sqlite-hub 0.7.0 → 0.8.7

package/frontend/js/components/queryHistoryDetail.js

@@ -155,14 +155,14 @@ export function renderQueryHistoryDetail({
           </label>
           <div class="mt-2 flex gap-2">
             <input
-              class="flex-1 border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+              class="control-input flex-1 border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
               name="title"
               placeholder="${escapeHtml(item.displayTitle)}"
               type="text"
               value="${escapeHtml(item.title ?? "")}"
             />
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save
@@ -175,7 +175,7 @@ export function renderQueryHistoryDetail({
 
         <div class="mt-5 flex flex-wrap gap-2">
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="open-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -183,7 +183,16 @@ export function renderQueryHistoryDetail({
             Open In Editor
           </button>
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
+            data-action="navigate"
+            data-to="/charts/${encodeURIComponent(item.id)}"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">bar_chart</span>
+            Open In Charts
+          </button>
+          <button
+            class="standard-button"
             data-action="run-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -191,7 +200,7 @@ export function renderQueryHistoryDetail({
             Run Now
           </button>
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="toggle-query-history-saved"
             data-history-id="${escapeHtml(item.id)}"
             data-next-value="${item.isSaved ? "false" : "true"}"
@@ -200,7 +209,7 @@ export function renderQueryHistoryDetail({
             ${item.isSaved ? "Unsave" : "Save"}
           </button>
           <button
-            class="toolbar-button border border-error/25 bg-error-container/20 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-error transition-colors hover:border-error hover:bg-error-container/30"
+            class="delete-button"
             data-action="delete-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -228,7 +237,7 @@ export function renderQueryHistoryDetail({
           )}</textarea>
           <div class="mt-2 flex justify-end">
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save Notes

package/frontend/js/components/queryHistoryPanel.js

@@ -171,7 +171,7 @@ export function renderQueryHistoryPanel({
         <label class="mt-4 block">
           <span class="sr-only">Search query history</span>
           <input
-            class="w-full border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+            class="control-input w-full border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
             data-bind="query-history-search"
             placeholder="Search SQL, titles, notes..."
             type="search"
@@ -223,7 +223,7 @@ export function renderQueryHistoryPanel({
             ? `
               <div class="mt-4 flex justify-center">
                 <button
-                  class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant transition-colors hover:border-primary-container hover:text-primary-container"
+                  class="standard-button"
                   data-action="load-more-query-history"
                   type="button"
                 >

package/frontend/js/components/rowEditorPanel.js

@@ -106,12 +106,52 @@ export function renderRowEditorPanel({
   const canSubmit = !disabledMessage && editableFields.length > 0;
   const canDelete = !disabledMessage && deleteEnabled;
   const formId = `${formName}-panel-form`;
+  const headerActions = [
+    reloadAction
+      ? `
+          <button
+            class="standard-button"
+            data-action="${escapeHtml(reloadAction)}"
+            type="button"
+          >
+            Reload
+          </button>
+        `
+      : "",
+    canSubmit
+      ? `
+          <button
+            class="standard-button"
+            form="${escapeHtml(formId)}"
+            type="submit"
+            ${saving || deleting ? "disabled" : ""}
+          >
+            ${escapeHtml(saving ? "Saving..." : submitLabel)}
+          </button>
+        `
+      : "",
+    canDelete
+      ? `
+          <button
+            class="delete-button"
+            data-action="${escapeHtml(deleteAction)}"
+            data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+            type="button"
+            ${saving || deleting ? "disabled" : ""}
+          >
+            ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
+          </button>
+        `
+      : "",
+  ]
+    .filter(Boolean)
+    .join("");
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-        <div class="space-y-4">
-          <div>
+        <div class="flex items-start justify-between gap-4">
+          <div class="min-w-0 flex-1">
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
             </div>
@@ -128,59 +168,24 @@ export function renderRowEditorPanel({
                 : ""
             }
           </div>
-          <div class="flex flex-wrap items-center justify-end gap-2">
-            ${
-              reloadAction
-                ? `
-                    <button
-                      class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
-                      data-action="${escapeHtml(reloadAction)}"
-                      type="button"
-                    >
-                      Reload
-                    </button>
-                  `
-                : ""
-            }
-            ${
-              canSubmit
-                ? `
-                    <button
-                      class="bg-primary-container px-5 py-3 text-[10px] font-black uppercase tracking-[0.16em] text-on-primary disabled:cursor-default disabled:opacity-40"
-                      form="${escapeHtml(formId)}"
-                      type="submit"
-                      ${saving || deleting ? "disabled" : ""}
-                    >
-                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
-                    </button>
-                  `
-                : ""
-            }
-            ${
-              canDelete
-                ? `
-                    <button
-                      class="border border-error/25 bg-error-container/10 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-colors hover:bg-error-container/20 disabled:cursor-default disabled:opacity-40"
-                      data-action="${escapeHtml(deleteAction)}"
-                      data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
-                      type="button"
-                      ${saving || deleting ? "disabled" : ""}
-                    >
-                      ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
-                    </button>
-                  `
-                : ""
-            }
-            <button
-              aria-label="Close panel"
-              class="flex h-11 w-11 items-center justify-center border border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
-              data-action="${escapeHtml(closeAction)}"
-              type="button"
-            >
-              <span class="material-symbols-outlined text-base">close</span>
-            </button>
-          </div>
+          <button
+            aria-label="Close panel"
+            class="query-history-icon-button shrink-0"
+            data-action="${escapeHtml(closeAction)}"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
+        ${
+          headerActions
+            ? `
+                <div class="mt-4 flex flex-wrap items-center justify-end gap-2">
+                  ${headerActions}
+                </div>
+              `
+            : ""
+        }
       </header>
       <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
         ${

package/frontend/js/components/sidebar.js

@@ -1,61 +1,60 @@
-import { escapeHtml } from "../utils/format.js";
-import { renderConnectionLogo } from "./connectionLogo.js";
+import { escapeHtml } from '../utils/format.js';
+import { renderConnectionLogo } from './connectionLogo.js';
 
 const sidebarItems = [
-  { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
-  { label: "Overview", href: "#/overview", key: "overview", icon: "dashboard" },
-  { label: "Data", href: "#/data", key: "data", icon: "table_rows" },
-  { label: "Charts", href: "#/charts", key: "charts", icon: "bar_chart" },
-  { label: "SQL Editor", href: "#/editor", key: "editor", icon: "terminal" },
-  { label: "Structure", href: "#/structure", key: "structure", icon: "account_tree" },
-  { label: "Table Designer", href: "#/table-designer", key: "tableDesigner", icon: "table_chart" },
-  { label: "Settings", href: "#/settings", key: "settings", icon: "settings" },
+    { label: 'Connections', href: '#/connections', key: 'connections', icon: 'database' },
+    { label: 'Overview', href: '#/overview', key: 'overview', icon: 'dashboard' },
+    { label: 'Data', href: '#/data', key: 'data', icon: 'table_rows' },
+    { label: 'SQL Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
+    { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
+    { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
+    { label: 'Table Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },
 ];
 
 function getActiveSidebarKey(routeName) {
-  if (routeName === "landing") {
-    return "connections";
-  }
+    if (routeName === 'landing') {
+        return 'connections';
+    }
 
-  if (routeName === "editorResults") {
-    return "editor";
-  }
+    if (routeName === 'editorResults') {
+        return 'editor';
+    }
 
-  return routeName;
+    return routeName;
 }
 
 export function renderSidebar(state) {
-  const activeKey = getActiveSidebarKey(state.route.name);
-  const activeConnection = state.connections.active;
+    const activeKey = getActiveSidebarKey(state.route.name);
+    const activeConnection = state.connections.active;
 
-  return `
+    return `
     <nav class="sidebar-links">
       ${sidebarItems
-        .map(
-          (item) => `
-            <a class="sidebar-link ${item.key === activeKey ? "is-active" : ""}" href="${item.href}">
+          .map(
+              item => `
+            <a class="sidebar-link ${item.key === activeKey ? 'is-active' : ''}" href="${item.href}">
               <span class="material-symbols-outlined">${item.icon}</span>
               <span>${item.label}</span>
             </a>
-          `
-        )
-        .join("")}
+          `,
+          )
+          .join('')}
     </nav>
     <div class="sidebar-footer">
       <div class="sidebar-footer-card">
         ${renderConnectionLogo(activeConnection, {
-          containerClass:
-            "sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary",
-          imageClassName: "h-full w-full object-cover",
-          iconClassName: "text-[15px]",
-          icon: "memory",
+            containerClass: 'sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary',
+            imageClassName: 'h-full w-full object-cover',
+            iconClassName: 'text-[15px]',
+            icon: 'memory',
         })}
         <div class="min-w-0">
           <p class="truncate text-[10px] font-bold text-on-surface">
-            ${escapeHtml(activeConnection?.label ?? "NO_ACTIVE_DATABASE")}
+            ${escapeHtml(activeConnection?.label ?? 'NO_ACTIVE_DATABASE')}
           </p>
           <p class="text-[8px] text-on-surface-variant/60">
-            ${activeConnection?.readOnly ? "READ_ONLY" : "READ_WRITE"}
+            ${activeConnection?.readOnly ? 'READ_ONLY' : 'READ_WRITE'}
           </p>
         </div>
       </div>

package/frontend/js/components/structureGraph.js

@@ -1,3 +1,4 @@
+import { showToast } from "../store.js";
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
 let cytoscapeFactory = null;
@@ -98,6 +99,31 @@ function createColumnFlags(column, foreignKeyColumns) {
   return flags.join("");
 }
 
+export function renderDdlSection(ddl, emptyLabel = "No DDL available.") {
+  const ddlText = typeof ddl === "string" ? ddl : "";
+  const hasDdl = Boolean(ddlText.trim());
+
+  return `
+    <section class="structure-graph__section">
+      <div class="structure-graph__section-header">
+        <div class="structure-graph__section-title">DDL</div>
+        <button
+          class="standard-button"
+          data-structure-graph-action="copy-ddl"
+          ${hasDdl ? "" : "disabled"}
+          type="button"
+        >
+          <span class="material-symbols-outlined text-sm">content_copy</span>
+          Copy
+        </button>
+      </div>
+      <pre class="structure-graph__ddl custom-scrollbar" data-structure-graph-ddl>${escapeHtml(
+        hasDdl ? ddlText : emptyLabel
+      )}</pre>
+    </section>
+  `;
+}
+
 export function clearInspector() {
   return `
     <div class="structure-graph__panel is-empty">
@@ -165,12 +191,7 @@ export function renderInspector(tableData) {
         </div>
       </section>
 
-      <section class="structure-graph__section">
-        <div class="structure-graph__section-title">DDL</div>
-        <pre class="structure-graph__ddl custom-scrollbar">${escapeHtml(
-          tableData.ddl || "No DDL available."
-        )}</pre>
-      </section>
+      ${renderDdlSection(tableData.ddl)}
     </div>
   `;
 }
@@ -398,60 +419,6 @@ export function highlightConnectedElements(cy, element) {
   element.addClass("hovered");
 }
 
-function getBestMatchingNode(cy, name) {
-  const normalizedQuery = String(name ?? "").trim().toLowerCase();
-
-  if (!normalizedQuery) {
-    return null;
-  }
-
-  const nodes = cy.nodes().toArray();
-  const exactMatch = nodes.find(
-    (node) => String(node.data("tableName")).toLowerCase() === normalizedQuery
-  );
-
-  if (exactMatch) {
-    return exactMatch;
-  }
-
-  const startsWithMatch = nodes.find((node) =>
-    String(node.data("tableName")).toLowerCase().startsWith(normalizedQuery)
-  );
-
-  if (startsWithMatch) {
-    return startsWithMatch;
-  }
-
-  return (
-    nodes.find((node) =>
-      String(node.data("tableName")).toLowerCase().includes(normalizedQuery)
-    ) ?? null
-  );
-}
-
-export function focusTableByName(cy, name) {
-  const node = getBestMatchingNode(cy, name);
-
-  if (!node) {
-    return null;
-  }
-
-  cy.animate(
-    {
-      fit: {
-        eles: node.closedNeighborhood(),
-        padding: 120,
-      },
-      duration: 240,
-    },
-    {
-      queue: false,
-    }
-  );
-
-  return node;
-}
-
 function destroyCurrentGraph() {
   if (!currentGraph) {
     return;
@@ -473,8 +440,6 @@ function destroyCurrentGraph() {
       zoom: currentGraph.cy.zoom(),
       inspectorHidden: currentGraph.inspectorHidden,
       selectedTableName: currentGraph.selectedTableName,
-      searchValue: currentGraph.searchInput?.value ?? "",
-      searchMiss: currentGraph.searchRoot?.classList.contains("is-miss") ?? false,
     };
   }
 
@@ -542,6 +507,25 @@ function updateOpenDataButton() {
   currentGraph.openDataButton.classList.toggle("is-disabled", !isEnabled);
 }
 
+async function copyInspectorDdl(button) {
+  const ddlNode = button
+    ?.closest(".structure-graph__section")
+    ?.querySelector("[data-structure-graph-ddl]");
+  const ddl = ddlNode?.textContent ?? "";
+
+  if (!ddl.trim()) {
+    showToast("No DDL available to copy.", "alert");
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(ddl);
+    showToast("DDL copied.", "success");
+  } catch (error) {
+    showToast("Clipboard access failed.", "alert");
+  }
+}
+
 function syncInspectorLayout() {
   if (!currentGraph?.root) {
     return;
@@ -565,17 +549,12 @@ function updateInspectorToggleButton() {
   `;
 }
 
-function clearSelection({ preserveSearch = true } = {}) {
+function clearSelection() {
   if (!currentGraph) {
     return;
   }
 
   currentGraph.selectedTableName = null;
-  if (!preserveSearch && currentGraph.searchInput) {
-    currentGraph.searchInput.value = "";
-    currentGraph.searchRoot.classList.remove("is-miss");
-  }
-
   resetHighlights(currentGraph.cy);
   syncEntryHighlights();
   currentGraph.inspector.innerHTML = getDefaultInspectorMarkup();
@@ -677,61 +656,24 @@ function restorePersistedViewport(cy, persistedState) {
   return true;
 }
 
-export function setupToolbar(cy, schema) {
+export function setupToolbar(cy) {
   if (!currentGraph) {
     return () => {};
   }
 
   const { root } = currentGraph;
-  const searchRoot = root.querySelector("[data-structure-graph-search]");
-  const searchInput = root.querySelector("[data-structure-graph-search-input]");
   const openDataButton = root.querySelector('[data-structure-graph-action="open-data"]');
   const inspectorToggleButton = root.querySelector(
     '[data-structure-graph-action="toggle-inspector"]'
   );
-  let searchTimer = null;
 
-  currentGraph.searchRoot = searchRoot;
-  currentGraph.searchInput = searchInput;
   currentGraph.openDataButton = openDataButton;
   currentGraph.inspectorToggleButton = inspectorToggleButton;
   updateOpenDataButton();
   updateInspectorToggleButton();
   syncInspectorLayout();
 
-  const handleSearch = () => {
-    if (!searchInput || !searchRoot) {
-      return;
-    }
-
-    const value = searchInput.value.trim();
-
-    if (!value) {
-      searchRoot.classList.remove("is-miss");
-      restoreGraphState();
-      if (!currentGraph.selectedTableName) {
-        currentGraph.inspector.innerHTML = getDefaultInspectorMarkup();
-      }
-      return;
-    }
-
-    const matchedNode = focusTableByName(cy, value);
-
-    if (!matchedNode) {
-      searchRoot.classList.add("is-miss");
-      return;
-    }
-
-    searchRoot.classList.remove("is-miss");
-    applyTableSelection(matchedNode, { focus: true });
-  };
-
-  const onSearchInput = () => {
-    window.clearTimeout(searchTimer);
-    searchTimer = window.setTimeout(handleSearch, 140);
-  };
-
-  const onToolbarClick = (event) => {
+  const onToolbarClick = async (event) => {
     const button = event.target.closest("[data-structure-graph-action]");
 
     if (!button) {
@@ -755,7 +697,7 @@ export function setupToolbar(cy, schema) {
         });
         break;
       case "clear":
-        clearSelection({ preserveSearch: false });
+        clearSelection();
         break;
       case "open-data":
         if (currentGraph?.selectedTableName) {
@@ -767,16 +709,16 @@ export function setupToolbar(cy, schema) {
         updateInspectorToggleButton();
         syncInspectorLayout();
         break;
+      case "copy-ddl":
+        await copyInspectorDdl(button);
+        break;
       default:
     }
   };
 
-  searchInput?.addEventListener("input", onSearchInput);
   root.addEventListener("click", onToolbarClick);
 
   return () => {
-    window.clearTimeout(searchTimer);
-    searchInput?.removeEventListener("input", onSearchInput);
     root.removeEventListener("click", onToolbarClick);
   };
 }
@@ -837,8 +779,6 @@ export async function mountStructureGraph(snapshot) {
     cleanup: [],
     resizeObserver: null,
     resizeHandler: null,
-    searchRoot: null,
-    searchInput: null,
     openDataButton: null,
     inspectorToggleButton: null,
     inspectorHidden: cachedState?.inspectorHidden ?? false,
@@ -846,7 +786,7 @@ export async function mountStructureGraph(snapshot) {
     selectedTableName: null,
   };
 
-  currentGraph.cleanup.push(setupToolbar(cy, schema));
+  currentGraph.cleanup.push(setupToolbar(cy));
 
   cy.on("tap", "node", (event) => {
     applyTableSelection(event.target, { focus: false });
@@ -877,14 +817,6 @@ export async function mountStructureGraph(snapshot) {
 
   currentGraph.initialSelectedTableName = selectedTableName;
 
-  if (currentGraph.searchInput && cachedState?.searchValue) {
-    currentGraph.searchInput.value = cachedState.searchValue;
-  }
-
-  if (currentGraph.searchRoot) {
-    currentGraph.searchRoot.classList.toggle("is-miss", Boolean(cachedState?.searchMiss));
-  }
-
   if (restorePersistedViewport(cy, cachedState)) {
     if (selectedTableName) {
       const selectedNode = cy.getElementById(getTableId(selectedTableName));