Restore DBGate beside Adminer

public/app.js

@@ -50,6 +50,7 @@ const localDbFields = document.querySelector("#localDbFields");
 const localDbInputs = document.querySelectorAll("#localDbFields input");
 const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
+const openAdminerButton = document.querySelector("#openAdminerButton");
 const openDbGateButton = document.querySelector("#openDbGateButton");
 const adminerServerValue = document.querySelector("#adminerServerValue");
 const adminerUserValue = document.querySelector("#adminerUserValue");
@@ -243,6 +244,7 @@ for (const input of transactionModeInputs)
 for (const input of localDbInputs)
     input.addEventListener("change", saveLocalDbSettings);
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
+openAdminerButton.addEventListener("click", openAdminer);
 openDbGateButton.addEventListener("click", openDbGate);
 lightContrastSelect.addEventListener("change", saveAppearance);
 darkContrastSelect.addEventListener("change", saveAppearance);
@@ -923,6 +925,7 @@ function closeSourceCandidates() {
     sourceList.replaceChildren();
 }
 function openSettings() {
+    loadDatabaseMode();
     settingsModal.hidden = false;
 }
 function syncSidebarForViewport() {
@@ -1073,8 +1076,8 @@ async function testLocalDbConnection() {
         testLocalDbButton.disabled = false;
     }
 }
-async function openDbGate() {
-    openDbGateButton.disabled = true;
+async function openAdminer() {
+    openAdminerButton.disabled = true;
     const previousNote = databaseModeNote.textContent;
     databaseModeNote.textContent = "Opening Adminer...";
     try {
@@ -1099,6 +1102,32 @@ async function openDbGate() {
         }, 3500);
     }
 }
+async function openDbGate() {
+    openDbGateButton.disabled = true;
+    const previousNote = databaseModeNote.textContent;
+    databaseModeNote.textContent = "Opening DBGate...";
+    try {
+        const response = await fetch("/api/tools/open-dbgate");
+        const data = await response.json();
+        if (!response.ok || !data.opened)
+            throw new Error(data.message || "DBGate could not be opened.");
+        databaseModeNote.textContent = `DBGate opened: ${data.url}`;
+    }
+    catch (error) {
+        databaseModeNote.textContent = `DBGate error: ${error.message}`;
+    }
+    finally {
+        openDbGateButton.disabled = false;
+        window.setTimeout(() => {
+            if (databaseModeNote.textContent.startsWith("DBGate")) {
+                renderDatabaseModeNote(localStorage.getItem("catalog-maker:database-mode") || "local");
+            }
+            else if (databaseModeNote.textContent === "Opening DBGate...") {
+                databaseModeNote.textContent = previousNote;
+            }
+        }, 3500);
+    }
+}
 function syncLocalDbFields(mode) {
     localDbFields.hidden = mode !== "local";
 }

public/app.ts

@@ -50,6 +50,7 @@ const localDbFields = document.querySelector("#localDbFields");
 const localDbInputs = document.querySelectorAll("#localDbFields input");
 const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
+const openAdminerButton = document.querySelector("#openAdminerButton");
 const openDbGateButton = document.querySelector("#openDbGateButton");
 const adminerServerValue = document.querySelector("#adminerServerValue");
 const adminerUserValue = document.querySelector("#adminerUserValue");
@@ -241,6 +242,7 @@ for (const input of permissionInputs) input.addEventListener("change", saveSetti
 for (const input of transactionModeInputs) input.addEventListener("change", saveSettings);
 for (const input of localDbInputs) input.addEventListener("change", saveLocalDbSettings);
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
+openAdminerButton.addEventListener("click", openAdminer);
 openDbGateButton.addEventListener("click", openDbGate);
 lightContrastSelect.addEventListener("change", saveAppearance);
 darkContrastSelect.addEventListener("change", saveAppearance);
@@ -1010,6 +1012,7 @@ function closeSourceCandidates() {
 }
 
 function openSettings() {
+  loadDatabaseMode();
   settingsModal.hidden = false;
 }
 
@@ -1168,8 +1171,8 @@ async function testLocalDbConnection() {
   }
 }
 
-async function openDbGate() {
-  openDbGateButton.disabled = true;
+async function openAdminer() {
+  openAdminerButton.disabled = true;
   const previousNote = databaseModeNote.textContent;
   databaseModeNote.textContent = "Opening Adminer...";
 
@@ -1192,6 +1195,30 @@ async function openDbGate() {
   }
 }
 
+async function openDbGate() {
+  openDbGateButton.disabled = true;
+  const previousNote = databaseModeNote.textContent;
+  databaseModeNote.textContent = "Opening DBGate...";
+
+  try {
+    const response = await fetch("/api/tools/open-dbgate");
+    const data = await response.json();
+    if (!response.ok || !data.opened) throw new Error(data.message || "DBGate could not be opened.");
+    databaseModeNote.textContent = `DBGate opened: ${data.url}`;
+  } catch (error) {
+    databaseModeNote.textContent = `DBGate error: ${error.message}`;
+  } finally {
+    openDbGateButton.disabled = false;
+    window.setTimeout(() => {
+      if (databaseModeNote.textContent.startsWith("DBGate")) {
+        renderDatabaseModeNote(localStorage.getItem("catalog-maker:database-mode") || "local");
+      } else if (databaseModeNote.textContent === "Opening DBGate...") {
+        databaseModeNote.textContent = previousNote;
+      }
+    }, 3500);
+  }
+}
+
 function syncLocalDbFields(mode) {
   localDbFields.hidden = mode !== "local";
 }

public/index.html

@@ -175,10 +175,16 @@
             <label class="settings-option">
               <input type="radio" name="databaseMode" value="scrape" />
               <span>Local scrape DB</span>
-              <button class="settings-inline-button" id="openDbGateButton" type="button">
-                <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#external"></use></svg>
-                <span>Open Adminer</span>
-              </button>
+              <span class="settings-tool-actions">
+                <button class="settings-inline-button" id="openAdminerButton" type="button">
+                  <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#external"></use></svg>
+                  <span>Adminer</span>
+                </button>
+                <button class="settings-inline-button" id="openDbGateButton" type="button">
+                  <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#external"></use></svg>
+                  <span>DBGate</span>
+                </button>
+              </span>
             </label>
             <div class="local-db-fields" id="localDbFields">
               <label class="settings-field">