sqlite-hub 0.6.0 → 0.8.7

package/frontend/js/views/data.js

@@ -67,6 +67,7 @@ function renderTableList(state) {
 
 function renderWorkspaceHeader(state) {
     const table = state.dataBrowser.table;
+    const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
     <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
@@ -91,19 +92,24 @@ function renderWorkspaceHeader(state) {
         <div class="flex items-center gap-3">
           ${
               table
-                  ? `
+                  ? `<button
+                    class="standard-button"
+                    data-action="toggle-data-tables"
+                    type="button"
+                  >
+                    ${tablesVisible ? '<span class="material-symbols-outlined text-sm">visibility_off</span> Hide Tables' : 'Show Tables'}
+                  </button>
                   <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"
+                    class="standard-button"
                     data-action="export-data-csv"
                     type="button"
                   >
                     ${state.dataBrowser.exportLoading ? 'Exporting...' : 'Export CSV'}
-                  </button>
-                `
+                  </button>`
                   : ''
           }
           <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"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
@@ -113,11 +119,12 @@ function renderWorkspaceHeader(state) {
               table
                   ? `
                   <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"
+                    class="standard-button"
                     data-action="navigate"
                     data-to="/structure"
                     type="button"
                   >
+                  <span class="material-symbols-outlined">account_tree</span>
                     Open Structure
                   </button>
                 `
@@ -233,10 +240,10 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
 
     return `
     <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
-      <label class="flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-4 py-3">
+      <label class="control-shell flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-3">
         <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
         <input
-          class="min-w-0 flex-1 bg-transparent text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
+          class="control-input control-input--ghost min-w-0 flex-1 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
           data-bind="data-search-query"
           placeholder="Filter current page..."
           type="search"
@@ -244,7 +251,7 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
         />
       </label>
       <select
-        class="min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
+        class="control-select min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
         data-bind="data-search-column"
       >
         ${columns
@@ -384,10 +391,8 @@ function renderTableSurface(state) {
                   .map(
                       pageSize => `
                     <button
-                      class="border px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] transition-colors ${
-                          pageSize === (table.limit ?? state.dataBrowser.pageSize)
-                              ? 'border-primary-container/30 bg-surface-container-high text-primary-container'
-                              : 'border-outline-variant/20 text-on-surface hover:bg-surface-container-highest'
+                      class="standard-button ${
+                          pageSize === (table.limit ?? state.dataBrowser.pageSize) ? 'is-active' : ''
                       }"
                       data-action="set-data-page-size"
                       data-page-size="${pageSize}"
@@ -402,7 +407,7 @@ function renderTableSurface(state) {
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page - 1}"
               type="button"
@@ -414,7 +419,7 @@ function renderTableSurface(state) {
               page ${escapeHtml(formatNumber(page))} / ${escapeHtml(formatNumber(pageCount))}
             </div>
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page + 1}"
               type="button"
@@ -505,21 +510,29 @@ function renderDataRowEditorPanel(state) {
 }
 
 export function renderDataView(state) {
+    const tablesVisible = state.dataBrowser.tablesVisible !== false;
+
     return {
         main: `
       <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="grid h-full min-h-0 grid-cols-1 md:grid-cols-[18rem_minmax(0,1fr)]">
-          <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
-            <div class="border-b border-outline-variant/10 px-6 py-5">
-              <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-                Tables
-              </div>
-              <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
-              </div>
-            </div>
-            ${renderTableList(state)}
-          </aside>
+        <div class="grid h-full min-h-0 grid-cols-1 ${tablesVisible ? 'md:grid-cols-[18rem_minmax(0,1fr)]' : ''}">
+          ${
+              tablesVisible
+                  ? `
+                    <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
+                      <div class="border-b border-outline-variant/10 px-6 py-5">
+                        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                          Tables
+                        </div>
+                        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                          total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                        </div>
+                      </div>
+                      ${renderTableList(state)}
+                    </aside>
+                  `
+                  : ''
+          }
           <section class="flex min-h-0 flex-col overflow-hidden">
             ${renderWorkspaceHeader(state)}
             ${renderWorkspaceError(state)}

package/frontend/js/views/editor.js

@@ -236,7 +236,7 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = "min-h-[27.5%]";
+  const editorSectionClass = state.editor.editorPanelVisible ? "min-h-[27.5%]" : "flex-none";
   const resultsSectionClass = "flex-1";
 
   return {
@@ -252,6 +252,8 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               exporting: state.editor.exportLoading,
               historyLoading: state.editor.historyLoading,
               historyTotal: state.editor.historyTotal,
+              editorVisible: state.editor.editorPanelVisible,
+              historyVisible: state.editor.historyPanelVisible,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
@@ -259,18 +261,22 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
             ${renderResultsSurface(state, isResultsRoute)}
           </section>
         </div>
-        ${renderQueryHistoryPanel({
-          items: state.editor.history,
-          loading: state.editor.historyLoading,
-          loadingMore: state.editor.historyLoadingMore,
-          error: state.editor.historyError,
-          activeTab: state.editor.historyTab,
-          search: state.editor.historySearchInput,
-          total: state.editor.historyTotal,
-          hasMore: state.editor.historyHasMore,
-          activeHistoryId: state.editor.historyActiveId,
-          selectedHistoryId: state.editor.historySelectedId,
-        })}
+        ${
+          state.editor.historyPanelVisible
+            ? renderQueryHistoryPanel({
+                items: state.editor.history,
+                loading: state.editor.historyLoading,
+                loadingMore: state.editor.historyLoadingMore,
+                error: state.editor.historyError,
+                activeTab: state.editor.historyTab,
+                search: state.editor.historySearchInput,
+                total: state.editor.historyTotal,
+                hasMore: state.editor.historyHasMore,
+                activeHistoryId: state.editor.historyActiveId,
+                selectedHistoryId: state.editor.historySelectedId,
+              })
+            : ""
+        }
       </section>
     `,
     panel:

package/frontend/js/views/overview.js

@@ -58,7 +58,7 @@ function renderTopTables(overview) {
   );
 
   return `
-    <section class="shell-section xl:col-span-2">
+    <section class="shell-section">
       <div class="flex items-center justify-between bg-surface-container-highest px-4 py-2">
         <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Top Tables</span>
         <span class="material-symbols-outlined text-xs text-on-surface-variant">table_rows</span>
@@ -131,7 +131,7 @@ function renderOperationalSurface(overview) {
           ? `
             <div class="border-t border-outline-variant/10 px-4 py-3">
               <button
-                class="toolbar-button border border-outline-variant/20 bg-surface-container px-3 py-1.5 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-overview-in-finder"
                 type="button"
               >
@@ -145,17 +145,154 @@ function renderOperationalSurface(overview) {
   `;
 }
 
+function pluralize(count, singular, plural = `${singular}s`) {
+  return Number(count) === 1 ? singular : plural;
+}
+
+function getSchemaMapNarrative(preview) {
+  const relationshipCount = Number(preview.relationshipCount ?? 0);
+  const fkClusters = Number(preview.fkClusters ?? 0);
+  const isolatedTables = Number(preview.isolatedTables ?? 0);
+  const connectedTables = Math.max(0, Number(preview.tableCount ?? 0) - isolatedTables);
+
+  if (relationshipCount === 0 || fkClusters === 0) {
+    return {
+      title: "Mostly standalone schema",
+      body:
+        "There are no meaningful foreign-key groups yet. The Structure view will read more like a list of isolated tables than a connected graph.",
+    };
+  }
+
+  if (isolatedTables === 0) {
+    return {
+      title: "Connected schema",
+      body: `Foreign keys tie the whole schema together in ${formatNumber(
+        fkClusters
+      )} ${pluralize(fkClusters, "cluster")}. Structure is useful here because dependencies and joins are visible at a glance.`,
+    };
+  }
+
+  return {
+    title: "One connected core, several islands",
+    body: `${formatNumber(connectedTables)} ${pluralize(
+      connectedTables,
+      "table"
+    )} are connected through foreign keys, while ${formatNumber(
+      isolatedTables
+    )} ${pluralize(
+      isolatedTables,
+      "table"
+    )} stand alone. Structure helps most when you want to inspect the connected core and ignore the isolated tables.`,
+  };
+}
+
+function renderSchemaMapPreview(overview) {
+  const preview = overview.schemaMap ?? {
+    tableCount: overview.counts?.tables ?? 0,
+    indexCount: overview.counts?.indexes ?? 0,
+    relationshipCount: 0,
+    fkClusters: 0,
+    isolatedTables: 0,
+  };
+  const narrative = getSchemaMapNarrative(preview);
+  const stats = [
+    { label: "FK Links", value: formatNumber(preview.relationshipCount) },
+    { label: "FK Clusters", value: formatNumber(preview.fkClusters) },
+    { label: "Isolated Tables", value: formatNumber(preview.isolatedTables) },
+  ];
+
+  return `
+    <section class="shell-section overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(45,250,255,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(252,227,0,0.12),transparent_42%),linear-gradient(135deg,#1b1b19,#101111)]">
+      <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest/60 px-4 py-2">
+        <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Schema Map</span>
+        <span class="material-symbols-outlined text-xs text-on-surface-variant">account_tree</span>
+      </div>
+      <div class="space-y-5 p-4">
+        <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
+          <div>
+            <div class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(narrative.title)}
+            </div>
+            <p class="mt-2 max-w-3xl text-sm leading-6 text-on-surface-variant/70">
+              ${escapeHtml(narrative.body)}
+            </p>
+          </div>
+          <div class="flex justify-start xl:justify-end">
+            <button
+              class="standard-button"
+              data-action="navigate"
+              data-to="/structure"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-sm">account_tree</span>
+              Open Structure
+            </button>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          ${stats
+            .map(
+              (stat) => `
+                <div class="border border-outline-variant/10 bg-surface-container-lowest/70 px-3 py-3">
+                  <div class="text-[9px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                    ${escapeHtml(stat.label)}
+                  </div>
+                  <div class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-on-surface">
+                    ${escapeHtml(stat.value)}
+                  </div>
+                </div>
+              `
+            )
+            .join("")}
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest/70 px-4 py-4">
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+            Why It Helps
+          </div>
+          <div class="mt-3 grid gap-3 md:grid-cols-3">
+            <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+              <div class="text-[9px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                FK Links
+              </div>
+              <div class="mt-2 text-sm leading-6 text-on-surface-variant/70">
+                Shows how many actual relationships exist between tables.
+              </div>
+            </div>
+            <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+              <div class="text-[9px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                FK Clusters
+              </div>
+              <div class="mt-2 text-sm leading-6 text-on-surface-variant/70">
+                Tells you whether the schema is one connected area or split into separate groups.
+              </div>
+            </div>
+            <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+              <div class="text-[9px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                Isolated Tables
+              </div>
+              <div class="mt-2 text-sm leading-6 text-on-surface-variant/70">
+                Highlights how many tables have no FK links and can usually be ignored during relationship analysis.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  `;
+}
+
 function renderIntegrityCard(overview, readOnly) {
   return `
-    <section class="relative overflow-hidden border border-outline-variant/10 bg-[radial-gradient(circle_at_top_right,rgba(252,227,0,0.14),transparent_30%),linear-gradient(135deg,#1c1b1b,#0e0e0e)]">
-      <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(32,31,31,0.95),rgba(32,31,31,0.2))]"></div>
+    <section class="shell-section relative overflow-hidden bg-[radial-gradient(circle_at_top_right,rgba(252,227,0,0.14),transparent_30%),linear-gradient(135deg,#1c1b1b,#0e0e0e)]">
+      <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest/60 px-4 py-2">
+        <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Integrity Status</span>
+        <span class="material-symbols-outlined text-xs text-on-surface-variant">security</span>
+      </div>
+      <div class="pointer-events-none absolute inset-x-0 bottom-0 top-10 bg-[linear-gradient(to_top,rgba(32,31,31,0.95),rgba(32,31,31,0.2))]"></div>
       <div class="relative flex min-h-[220px] flex-col justify-end p-6">
         <div class="mb-6 flex h-16 w-16 items-center justify-center border border-primary-container/20 bg-primary-container/10">
           <span class="material-symbols-outlined text-4xl text-primary-container">security</span>
         </div>
-        <div class="text-[10px] font-black uppercase tracking-[0.25em] text-primary-container">
-          INTEGRITY_STATUS
-        </div>
         <div class="mt-2 flex flex-wrap items-center gap-2">
           ${renderStatusBadge(overview.sqlite?.integrityCheck ?? "unknown", "success")}
           ${renderStatusBadge(
@@ -190,10 +327,9 @@ export function renderOverviewView(state) {
               : "System Registry: NO_ACTIVE_DATABASE",
             actions: `
               <button
-                class="toolbar-button toolbar-button--primary bg-primary-container px-4 py-2 font-headline text-xs font-bold uppercase tracking-widest text-on-primary clipped-corner"
+                class="signature-button"
                 data-action="navigate"
                 data-to="/editor"
-                style="--clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);"
                 type="button"
               >
                 <span class="material-symbols-outlined text-sm">terminal</span>
@@ -218,7 +354,10 @@ export function renderOverviewView(state) {
                   ? `
                       ${renderOverviewMetrics(overview)}
                       <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
-                        ${renderTopTables(overview)}
+                        <div class="space-y-6 xl:col-span-2">
+                          ${renderTopTables(overview)}
+                          ${renderSchemaMapPreview(overview)}
+                        </div>
                         <div class="space-y-6">
                           ${renderOperationalSurface(overview)}
                           ${renderIntegrityCard(overview, readOnly)}

package/frontend/js/views/settings.js

@@ -56,7 +56,7 @@ function renderSettingsContent(state) {
             Copyright Oliver Jessner
           </div>
           <a
-            class="inline-flex items-center gap-2 border border-outline-variant/20 bg-surface-container-low px-4 py-3 text-xs font-bold uppercase tracking-[0.2em] text-primary-container transition-colors hover:bg-surface-container-highest"
+            class="standard-button"
             href="https://oliverjessner.at"
             rel="noreferrer"
             target="_blank"
@@ -77,7 +77,7 @@ function renderSettingsContent(state) {
             Open Source Code
           </div>
           <a
-            class="inline-flex items-center gap-2 border border-outline-variant/20 bg-surface-container-low px-4 py-3 text-xs font-bold uppercase tracking-[0.2em] text-primary-container transition-colors hover:bg-surface-container-highest"
+            class="standard-button"
             href="https://github.com/oliverjessner/sqlite-hub"
             rel="noreferrer"
             target="_blank"