sqlite-hub 0.6.0 → 0.8.7

package/frontend/js/views/structure.js

@@ -1,12 +1,11 @@
-import { renderPageHeader } from "../components/pageHeader.js";
-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 = {}) {
   const { compact = false, showMeta = true } = options;
 
   return `
-    <section class="shell-section flex flex-col p-5">
+    <section class="structure-sidebar__section">
       <div class="mb-4 shrink-0 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
         ${escapeHtml(title)}
       </div>
@@ -173,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
@@ -199,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"
           >
@@ -220,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"
           >
@@ -228,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"
           >
@@ -236,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"
@@ -245,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"
           >
@@ -282,44 +277,63 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
   `;
 }
 
+function renderStructureWorkspaceHeader(structure, selectedName) {
+  const tableCount = structure?.grouped?.tables?.length ?? 0;
+  const viewCount = structure?.grouped?.views?.length ?? 0;
+
+  return `
+    <header class="structure-view__header">
+      <div class="structure-headline-container">
+        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+          Schema Graph
+        </div>
+        <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+          Structure
+        </h1>
+        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${
+            selectedName
+              ? `selected ${escapeHtml(selectedName)} // tables ${escapeHtml(formatNumber(tableCount))} // views ${escapeHtml(formatNumber(viewCount))}`
+              : `tables ${escapeHtml(formatNumber(tableCount))} // views ${escapeHtml(formatNumber(viewCount))}`
+          }
+        </div>
+      </div>
+    </header>
+  `;
+}
+
 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 flex h-full min-h-0 flex-col bg-surface-container">
-        <div class="view-frame flex h-full min-h-0 flex-col">
-          ${renderPageHeader({
-            title: "Structure",
-            subtitle: "Schema graph, foreign-key paths, raw DDL, and object metadata",
-          })}
-
-          ${
-            state.structure.loading && !structure
-              ? `
-                <div class="flex min-h-0 flex-1 items-center justify-center border border-outline-variant/10 bg-surface-container-low">
-                  <div class="text-center text-on-surface-variant/40">
-                    <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
-                    <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
+      <section class="view-surface structure-view">
+        ${
+          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>
                 </div>
-              `
-              : state.structure.error
-                ? `
-                    <div class="min-h-0 flex-1 border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
-                      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
-                        ${escapeHtml(state.structure.error.code)}
-                      </div>
-                      <div class="mt-2">${escapeHtml(state.structure.error.message)}</div>
-                    </div>
-                  `
-                : structure
-                  ? `
-                      <section class="grid min-h-0 flex-1 grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
-                        <div class="custom-scrollbar min-h-0 overflow-y-auto pr-1">
-                          <div class="space-y-6">
+                <div class="structure-view__sidebar-body custom-scrollbar">
+                  ${
+                    structure
+                      ? `
                           ${renderEntryGroup(
                             "Tables",
                             structure.grouped.tables,
@@ -342,19 +356,51 @@ export function renderStructureView(state) {
                             structure.grouped.triggers,
                             state.structure.selectedName
                           )}
-                          </div>
-                        </div>
+                        `
+                      : ""
+                  }
+                </div>
+              </aside>
+            `
+            : ""
+        }
+
+        <section class="structure-view__detail">
+          ${renderStructureWorkspaceHeader(structure, state.structure.selectedName)}
+          ${
+            state.structure.loading && !structure
+              ? `
+                <div class="flex min-h-0 flex-1 items-center justify-center border-t border-outline-variant/10 bg-surface-container-low">
+                  <div class="text-center text-on-surface-variant/40">
+                    <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+                    <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
+                  </div>
+                </div>
+              `
+              : state.structure.error
+                ? `
+                    <div class="min-h-0 flex-1 border-t border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+                      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                        ${escapeHtml(state.structure.error.code)}
+                      </div>
+                      <div class="mt-2">${escapeHtml(state.structure.error.message)}</div>
+                    </div>
+                  `
+                : structure
+                  ? `
+                      <div class="structure-view__graph-shell">
                         ${renderGraphSurface(
                           structure,
                           state.structure.selectedName,
                           detail,
-                          state.structure.detailLoading
+                          state.structure.detailLoading,
+                          tablesVisible
                         )}
-                      </section>
+                      </div>
                     `
                   : ""
           }
-        </div>
+        </section>
       </section>
     `,
     panel: "",

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;