sqlite-hub 0.6.0 → 0.8.7

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));

package/frontend/js/components/tableDesignerEditor.js

@@ -86,7 +86,7 @@ function renderColumnRow(column, draft, catalogTables) {
           )
           .join("")}
       </select>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -96,7 +96,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Not null</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -106,7 +106,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Unique</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -164,12 +164,13 @@ function renderColumnRow(column, draft, catalogTables) {
           .join("")}
       </select>
       <button
-        class="table-designer-delete"
+        class="delete-button"
         data-action="remove-table-designer-column"
         data-column-id="${escapeHtml(column.id)}"
         type="button"
       >
         <span class="material-symbols-outlined text-base">delete</span>
+        <span>Remove</span>
       </button>
     </div>
   `;
@@ -204,7 +205,7 @@ function renderFillToggle(draft) {
   const hasImportedRows = (draft.importedCsvRows?.length ?? 0) > 0;
 
   return `
-    <label class="table-designer-fill-toggle ${hasImportedRows ? "" : "is-disabled"}">
+    <label class="standard-checkbox table-designer-fill-toggle table-designer-checkbox-override ${hasImportedRows ? "" : "is-disabled"}">
       <input
         data-bind="table-designer-field"
         data-field="fillImportedRows"
@@ -301,14 +302,14 @@ export function renderTableDesignerEditor(state) {
         <div class="table-designer-main__actions">
           ${renderFillToggle(draft)}
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
             Reload Schema
           </button>
           <button
-            class="table-designer-main__primary ${draft.canSave ? "" : "is-disabled"}"
+            class="standard-button"
             data-action="save-table-designer"
             ${draft.canSave ? "" : "disabled"}
             type="button"
@@ -342,7 +343,7 @@ export function renderTableDesignerEditor(state) {
             <div class="table-designer-main__section-title">Columns</div>
           </div>
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="add-table-designer-column"
             type="button"
           >

package/frontend/js/components/tableDesignerSidebar.js

@@ -1,41 +1,34 @@
-import { escapeHtml, formatNumber } from "../utils/format.js";
+import { escapeHtml, formatNumber } from '../utils/format.js';
 
 function getFilteredTables(tables, searchQuery) {
-  const normalizedSearch = String(searchQuery ?? "").trim().toLowerCase();
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
 
-  if (!normalizedSearch) {
-    return tables;
-  }
+    if (!normalizedSearch) {
+        return tables;
+    }
 
-  return tables.filter((table) => table.name.toLowerCase().includes(normalizedSearch));
+    return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
 }
 
 export function renderTableDesignerSidebar(state) {
-  const tables = state.tableDesigner.tables ?? [];
-  const filteredTables = getFilteredTables(tables, state.tableDesigner.searchQuery);
-  const isNewDraft = state.tableDesigner.draft?.mode === "create";
+    const tables = state.tableDesigner.tables ?? [];
+    const filteredTables = getFilteredTables(tables, state.tableDesigner.searchQuery);
+    const isNewDraft = state.tableDesigner.draft?.mode === 'create';
 
-  return `
+    return `
     <aside class="table-designer-sidebar">
       <div class="table-designer-sidebar__header">
         <div>
-          <div class="table-designer-sidebar__eyebrow">Schema Workspace</div>
-          <div class="table-designer-sidebar__title">Table Designer</div>
+          <div class="table-designer-sidebar__eyebrow">Table Designer</div>
           <div class="table-designer-sidebar__meta">
-            ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? "" : "s"}
+            ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? '' : 's'}
           </div>
         </div>
         <div class="table-designer-sidebar__header-actions">
           <button
-            class="table-designer-sidebar__new-button"
-            data-action="navigate"
-            data-to="/table-designer/new"
-            type="button"
-          >
-            + New Table
-          </button>
-          <button
-            class="table-designer-sidebar__import-button"
+            class="standard-button"
             data-action="import-table-designer-csv"
             type="button"
           >
@@ -46,7 +39,16 @@ export function renderTableDesignerSidebar(state) {
             class="table-designer-sidebar__file-input"
             data-bind="table-designer-import-file"
             type="file"
-          />
+          />  
+          <button
+            class="signature-button"
+            data-action="navigate"
+            data-to="/table-designer/new"
+            type="button"
+          >
+            + New Table
+          </button>
+  
         </div>
       </div>
 
@@ -58,23 +60,23 @@ export function renderTableDesignerSidebar(state) {
           placeholder="Search tables..."
           spellcheck="false"
           type="search"
-          value="${escapeHtml(state.tableDesigner.searchQuery ?? "")}"
+          value="${escapeHtml(state.tableDesigner.searchQuery ?? '')}"
         />
       </label>
 
       <div class="table-designer-sidebar__list custom-scrollbar">
         ${
-          state.tableDesigner.loading && !tables.length
-            ? `
+            state.tableDesigner.loading && !tables.length
+                ? `
                 <div class="table-designer-sidebar__empty">
                   <span class="material-symbols-outlined mb-2 text-3xl">progress_activity</span>
                   <div>Loading SQLite schema...</div>
                 </div>
               `
-            : isNewDraft
-              ? `
+                : isNewDraft
+                  ? `
                   <button
-                    class="table-designer-sidebar__item is-active"
+                    class="table-designer-sidebar__item is-active w-full border border-primary-container/30 bg-surface-container-high px-4 py-3 text-left transition-colors"
                     data-action="navigate"
                     data-to="/table-designer/new"
                     type="button"
@@ -83,42 +85,44 @@ export function renderTableDesignerSidebar(state) {
                     <div class="table-designer-sidebar__item-meta">unsaved schema</div>
                   </button>
                 `
-              : ""
+                  : ''
         }
         ${
-          !filteredTables.length && !state.tableDesigner.loading
-            ? `
+            !filteredTables.length && !state.tableDesigner.loading
+                ? `
                 <div class="table-designer-sidebar__empty">
                   ${
-                    tables.length
-                      ? "No tables match the current search."
-                      : "No tables found. Create the first table in this database."
+                      tables.length
+                          ? 'No tables match the current search.'
+                          : 'No tables found. Create the first table in this database.'
                   }
                 </div>
               `
-            : filteredTables
-                .map(
-                  (table) => `
+                : filteredTables
+                      .map(
+                          table => `
                     <button
-                      class="table-designer-sidebar__item ${
-                        !isNewDraft && table.name === state.tableDesigner.selectedTableName
-                          ? "is-active"
-                          : ""
+                      class="table-designer-sidebar__item w-full border px-4 py-3 text-left transition-colors ${
+                          !isNewDraft && table.name === state.tableDesigner.selectedTableName
+                              ? 'is-active border-primary-container/30 bg-surface-container-high'
+                              : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                       }"
                       data-action="navigate"
                       data-to="/table-designer/${encodeURIComponent(table.name)}"
                       type="button"
                     >
-                      <div class="table-designer-sidebar__item-name">${escapeHtml(table.name)}</div>
-                      <div class="table-designer-sidebar__item-meta">
+                      <div class="table-designer-sidebar__item-name ${
+                          !isNewDraft && table.name === state.tableDesigner.selectedTableName ? 'is-active' : ''
+                      }">${escapeHtml(table.name)}</div>
+                      <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
                         ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
-                          Number(table.columnCount ?? 0) === 1 ? "" : "s"
+                            Number(table.columnCount ?? 0) === 1 ? '' : 's'
                         }
                       </div>
                     </button>
-                  `
-                )
-                .join("")
+                  `,
+                      )
+                      .join('')
         }
       </div>
     </aside>

package/frontend/js/components/tableDesignerSqlPreview.js

@@ -1,40 +1,72 @@
 import { escapeHtml } from "../utils/format.js";
 
-export function renderTableDesignerSqlPreview(draft) {
+function renderPreviewHeader(draft, isVisible) {
+  return `
+    <div class="table-designer-preview__header">
+      <div>
+        <div class="table-designer-preview__eyebrow">SQL Preview</div>
+        <div class="table-designer-preview__title">${
+          draft ? "Live SQLite Output" : "No Draft Selected"
+        }</div>
+      </div>
+      <div class="table-designer-preview__actions">
+        ${
+          draft && isVisible
+            ? `
+              <button
+                class="standard-button"
+                data-action="copy-table-designer-sql"
+                type="button"
+              >
+                Copy SQL
+              </button>
+            `
+            : ""
+        }
+        <button
+          class="standard-button"
+          data-action="toggle-table-designer-sql-preview"
+          data-next-value="${isVisible ? "false" : "true"}"
+          type="button"
+        >
+          <span class="material-symbols-outlined">${isVisible ? "visibility_off" : "expand_less"}</span>
+          ${isVisible ? "Hide" : "Show"}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export function renderTableDesignerSqlPreview(draft, isVisible = true) {
   if (!draft) {
     return `
-      <section class="table-designer-preview shell-section">
-        <div class="table-designer-preview__header">
-          <div>
-            <div class="table-designer-preview__eyebrow">SQL Preview</div>
-            <div class="table-designer-preview__title">No Draft Selected</div>
-          </div>
-        </div>
-        <div class="table-designer-preview__empty">
-          Select a table or create a new one to inspect the generated SQLite statements.
-        </div>
+      <section class="table-designer-preview shell-section${isVisible ? "" : " is-collapsed"}">
+        ${renderPreviewHeader(draft, isVisible)}
+        ${
+          isVisible
+            ? `
+              <div class="table-designer-preview__empty">
+                Select a table or create a new one to inspect the generated SQLite statements.
+              </div>
+            `
+            : ""
+        }
       </section>
     `;
   }
 
   return `
-    <section class="table-designer-preview shell-section">
-      <div class="table-designer-preview__header">
-        <div>
-          <div class="table-designer-preview__eyebrow">SQL Preview</div>
-          <div class="table-designer-preview__title">Live SQLite Output</div>
-        </div>
-        <button
-          class="table-designer-preview__copy"
-          data-action="copy-table-designer-sql"
-          type="button"
-        >
-          Copy SQL
-        </button>
-      </div>
-      <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
-        draft.sqlPreview || "-- SQL preview unavailable."
-      )}</pre>
+    <section class="table-designer-preview shell-section${isVisible ? "" : " is-collapsed"}">
+      ${renderPreviewHeader(draft, isVisible)}
+      ${
+        isVisible
+          ? `
+            <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
+              draft.sqlPreview || "-- SQL preview unavailable."
+            )}</pre>
+          `
+          : ""
+      }
     </section>
   `;
 }