UI: move backup and migration actions into a sidebar tools menu

app.js

@@ -32,6 +32,9 @@ const brandTabs = document.getElementById("brandTabs");
 const consoleTabs = document.getElementById("consoleTabs");
 const gameSectionTitle = document.getElementById("gameSectionTitle");
 const dataModeInfo = document.getElementById("dataModeInfo");
+const toolsDrawer = document.getElementById("toolsDrawer");
+const toolsToggleBtn = document.getElementById("toolsToggleBtn");
+const toolsCloseBtn = document.getElementById("toolsCloseBtn");
 const migrateBtn = document.getElementById("migrateBtn");
 const backupControls = document.getElementById("backupControls");
 const backupBtn = document.getElementById("backupBtn");
@@ -43,6 +46,33 @@ const gameCardTemplate = document.getElementById("gameCardTemplate");
 let editingGameId = null;
 let pendingRestoreMode = "merge";
 
+toolsToggleBtn.addEventListener("click", () => {
+  toolsDrawer.classList.toggle("open");
+});
+
+toolsCloseBtn.addEventListener("click", () => {
+  toolsDrawer.classList.remove("open");
+});
+
+document.addEventListener("click", (event) => {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+  if (!toolsDrawer.classList.contains("open")) {
+    return;
+  }
+  if (toolsDrawer.contains(event.target) || toolsToggleBtn.contains(event.target)) {
+    return;
+  }
+  toolsDrawer.classList.remove("open");
+});
+
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    toolsDrawer.classList.remove("open");
+  }
+});
+
 platformForm.addEventListener("submit", async (event) => {
   event.preventDefault();