sqlite-hub 0.7.0 → 0.8.7

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"

package/frontend/js/views/structure.js

@@ -1,4 +1,4 @@
-import { clearInspector, renderInspector } from "../components/structureGraph.js";
+import { clearInspector, renderDdlSection, renderInspector } from "../components/structureGraph.js";
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
 function renderEntryGroup(title, entries, activeName, options = {}) {
@@ -172,20 +172,16 @@ function renderObjectInspector(detail) {
           : ""
       }
 
-      <section class="structure-graph__section">
-        <div class="structure-graph__section-title">DDL</div>
-        <pre class="structure-graph__ddl custom-scrollbar">${escapeHtml(
-          detail.ddl || "No DDL available."
-        )}</pre>
-      </section>
+      ${renderDdlSection(detail.ddl)}
     </div>
   `;
 }
 
-function renderGraphSurface(structure, selectedName, detail, detailLoading) {
+function renderGraphSurface(structure, selectedName, detail, detailLoading, tablesVisible = true) {
   const graph = structure?.graph ?? { tables: [], relationshipCount: 0 };
   const selectedGraphTable =
     graph.tables?.find((table) => table.name === selectedName && table.type === "table") ?? null;
+  const toolbarButtonClass = "standard-button";
   const inspectorMarkup = selectedGraphTable
     ? renderInspector(selectedGraphTable)
     : detailLoading
@@ -198,20 +194,20 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
     <section class="structure-graph" data-structure-graph-root>
       <div class="structure-graph__toolbar">
         <div class="structure-graph__toolbar-main">
-          <label class="structure-graph__search" data-structure-graph-search>
-            <span class="material-symbols-outlined structure-graph__search-icon">search</span>
-            <input
-              class="structure-graph__search-input"
-              data-structure-graph-search-input
-              placeholder="Find table"
-              spellcheck="false"
-              type="search"
-            />
-          </label>
+          <button
+            class="${toolbarButtonClass}"
+            data-action="toggle-structure-tables"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">${
+              tablesVisible ? "visibility_off" : "visibility"
+            }</span>
+            ${tablesVisible ? "Hide Tables" : "Show Tables"}
+          </button>
         </div>
         <div class="structure-graph__toolbar-actions">
           <button
-            class="structure-graph__button"
+            class="${toolbarButtonClass}"
             data-structure-graph-action="fit"
             type="button"
           >
@@ -219,7 +215,7 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
             Fit Graph
           </button>
           <button
-            class="structure-graph__button"
+            class="${toolbarButtonClass}"
             data-structure-graph-action="relayout"
             type="button"
           >
@@ -227,7 +223,7 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
             Recalculate Layout
           </button>
           <button
-            class="structure-graph__button"
+            class="${toolbarButtonClass}"
             data-structure-graph-action="clear"
             type="button"
           >
@@ -235,7 +231,7 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
             Clear Selection
           </button>
           <button
-            class="structure-graph__button is-disabled"
+            class="${toolbarButtonClass}"
             data-structure-graph-action="open-data"
             disabled
             type="button"
@@ -244,7 +240,7 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
             Open Data
           </button>
           <button
-            class="structure-graph__button"
+            class="${toolbarButtonClass}"
             data-structure-graph-action="toggle-inspector"
             type="button"
           >
@@ -310,57 +306,64 @@ export function renderStructureView(state) {
   const structure = state.structure.data;
   const detail =
     state.structure.detail?.name === state.structure.selectedName ? state.structure.detail : null;
+  const tablesVisible = state.structure.tablesVisible !== false;
 
   return {
     main: `
       <section class="view-surface structure-view">
-        <aside class="structure-view__sidebar">
-          <div class="structure-view__sidebar-header">
-            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-              Objects
-            </div>
-            <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              total ${escapeHtml(
-                formatNumber(
-                  (structure?.grouped?.tables?.length ?? 0) +
-                    (structure?.grouped?.views?.length ?? 0) +
-                    (structure?.grouped?.indexes?.length ?? 0) +
-                    (structure?.grouped?.triggers?.length ?? 0)
-                )
-              )}
-            </div>
-          </div>
-          <div class="structure-view__sidebar-body custom-scrollbar">
-            ${
-              structure
-                ? `
-                    ${renderEntryGroup(
-                      "Tables",
-                      structure.grouped.tables,
-                      state.structure.selectedName,
-                      { compact: true, showMeta: false }
-                    )}
-                    ${renderEntryGroup(
-                      "Views",
-                      structure.grouped.views,
-                      state.structure.selectedName
-                    )}
-                    ${renderEntryGroup(
-                      "Indexes",
-                      structure.grouped.indexes,
-                      state.structure.selectedName,
-                      { compact: true, showMeta: false }
-                    )}
-                    ${renderEntryGroup(
-                      "Triggers",
-                      structure.grouped.triggers,
-                      state.structure.selectedName
+        ${
+          tablesVisible
+            ? `
+              <aside class="structure-view__sidebar">
+                <div class="structure-view__sidebar-header">
+                  <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                    Objects
+                  </div>
+                  <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                    total ${escapeHtml(
+                      formatNumber(
+                        (structure?.grouped?.tables?.length ?? 0) +
+                          (structure?.grouped?.views?.length ?? 0) +
+                          (structure?.grouped?.indexes?.length ?? 0) +
+                          (structure?.grouped?.triggers?.length ?? 0)
+                      )
                     )}
-                  `
-                : ""
-            }
-          </div>
-        </aside>
+                  </div>
+                </div>
+                <div class="structure-view__sidebar-body custom-scrollbar">
+                  ${
+                    structure
+                      ? `
+                          ${renderEntryGroup(
+                            "Tables",
+                            structure.grouped.tables,
+                            state.structure.selectedName,
+                            { compact: true, showMeta: false }
+                          )}
+                          ${renderEntryGroup(
+                            "Views",
+                            structure.grouped.views,
+                            state.structure.selectedName
+                          )}
+                          ${renderEntryGroup(
+                            "Indexes",
+                            structure.grouped.indexes,
+                            state.structure.selectedName,
+                            { compact: true, showMeta: false }
+                          )}
+                          ${renderEntryGroup(
+                            "Triggers",
+                            structure.grouped.triggers,
+                            state.structure.selectedName
+                          )}
+                        `
+                      : ""
+                  }
+                </div>
+              </aside>
+            `
+            : ""
+        }
 
         <section class="structure-view__detail">
           ${renderStructureWorkspaceHeader(structure, state.structure.selectedName)}
@@ -390,7 +393,8 @@ export function renderStructureView(state) {
                           structure,
                           state.structure.selectedName,
                           detail,
-                          state.structure.detailLoading
+                          state.structure.detailLoading,
+                          tablesVisible
                         )}
                       </div>
                     `

package/frontend/js/views/tableDesigner.js

@@ -26,8 +26,13 @@ export function renderTableDesignerView(state) {
           <div class="table-designer-workspace__top">
             ${renderTableDesignerEditor(state)}
           </div>
-          <div class="table-designer-workspace__bottom">
-            ${renderTableDesignerSqlPreview(state.tableDesigner.draft)}
+          <div class="table-designer-workspace__bottom${
+            state.tableDesigner.sqlPreviewVisible ? "" : " is-collapsed"
+          }">
+            ${renderTableDesignerSqlPreview(
+              state.tableDesigner.draft,
+              state.tableDesigner.sqlPreviewVisible
+            )}
           </div>
         </div>
       </section>

package/frontend/styles/base.css

@@ -28,6 +28,68 @@ button {
     cursor: pointer;
 }
 
+.control-button {
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    gap: var(--spacing-2);
+    height: var(--control-height);
+    line-height: 1;
+    min-height: var(--control-height);
+    padding: 0 var(--control-padding-inline);
+}
+
+.control-input,
+.control-select {
+    box-sizing: border-box;
+    height: var(--control-height);
+    min-height: var(--control-height);
+}
+
+.control-input {
+    padding: 0 var(--control-padding-inline);
+}
+
+input.control-input--ghost {
+    appearance: none;
+    background: transparent !important;
+    background-color: transparent !important;
+    background-image: none !important;
+    border: 0 !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    -webkit-appearance: none;
+    padding: 0;
+}
+
+input.control-input--ghost:focus,
+input.control-input--ghost:not(:focus) {
+    background: transparent !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none;
+}
+
+.control-select {
+    padding: 0 var(--control-padding-inline);
+}
+
+.control-shell {
+    box-sizing: border-box;
+    min-height: var(--control-height);
+}
+
+.control-icon-button {
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    height: var(--control-height);
+    justify-content: center;
+    min-height: var(--control-height);
+    width: var(--control-height);
+}
+
 a {
     color: inherit;
     text-decoration: none;