sqlite-hub 0.6.0 → 0.7.0

package/frontend/js/views/structure.js

@@ -1,4 +1,3 @@
-import { renderPageHeader } from "../components/pageHeader.js";
 import { clearInspector, renderInspector } from "../components/structureGraph.js";
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
@@ -6,7 +5,7 @@ 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>
@@ -282,6 +281,31 @@ 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 =
@@ -289,17 +313,61 @@ export function renderStructureView(state) {
 
   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",
-          })}
+      <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
+                    )}
+                  `
+                : ""
+            }
+          </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 border-outline-variant/10 bg-surface-container-low">
+                <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>
@@ -308,7 +376,7 @@ export function renderStructureView(state) {
               `
               : 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="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>
@@ -317,44 +385,18 @@ export function renderStructureView(state) {
                   `
                 : 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">
-                          ${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>
-                        </div>
+                      <div class="structure-view__graph-shell">
                         ${renderGraphSurface(
                           structure,
                           state.structure.selectedName,
                           detail,
                           state.structure.detailLoading
                         )}
-                      </section>
+                      </div>
                     `
                   : ""
           }
-        </div>
+        </section>
       </section>
     `,
     panel: "",

package/frontend/styles/components.css

@@ -371,7 +371,6 @@
     text-transform: uppercase;
 }
 
-.table-designer-sidebar__title,
 .table-designer-preview__title,
 .table-designer-main__section-title {
     color: var(--color-on-surface);
@@ -457,7 +456,7 @@
     align-items: center;
     background: var(--color-surface-container-lowest);
     border: 1px solid rgba(75, 71, 50, 0.18);
-    margin: var(--spacing-4) var(--spacing-5) 0;
+    margin: var(--spacing-4) var(--spacing-3) 0;
     border-bottom: 1px solid rgba(75, 71, 50, 0.18);
     display: flex;
     gap: var(--spacing-3);
@@ -514,26 +513,19 @@ select.table-designer-field {
 }
 
 .table-designer-sidebar__item {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.14);
     display: block;
     margin-bottom: var(--spacing-2);
-    padding: var(--spacing-4);
-    text-align: left;
     transition:
         background-color var(--transition-fast),
         border-color var(--transition-fast);
-    width: 100%;
 }
 
 .table-designer-sidebar__item:hover {
-    background: var(--color-surface-container);
-    border-color: rgba(252, 227, 0, 0.22);
+    border-color: rgba(75, 71, 50, 0.1);
 }
 
 .table-designer-sidebar__item.is-active {
-    background: var(--color-surface-container-high);
-    border-color: rgba(252, 227, 0, 0.32);
+    border-color: rgba(252, 227, 0, 0.3);
 }
 
 .table-designer-sidebar__item-name {
@@ -545,12 +537,12 @@ select.table-designer-field {
     text-overflow: ellipsis;
 }
 
-.table-designer-sidebar__item.is-active .table-designer-sidebar__item-name {
+.table-designer-sidebar__item-name.is-active {
     color: var(--color-primary-container);
 }
 
 .table-designer-sidebar__item-meta {
-    color: rgba(205, 199, 171, 0.48);
+    color: rgba(229, 226, 225, 0.45);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
     letter-spacing: 0.12em;

package/frontend/styles/views.css

@@ -1,124 +1,354 @@
 .machined-grid {
-  background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
-  background-size: 32px 32px;
+    background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
+    background-size: 32px 32px;
 }
 
 .data-grid-texture {
-  background-image: radial-gradient(var(--color-primary-container) 1px, transparent 1px);
-  background-size: 24px 24px;
-  opacity: 0.03;
+    background-image: radial-gradient(var(--color-primary-container) 1px, transparent 1px);
+    background-size: 24px 24px;
+    opacity: 0.03;
 }
 
 .view-surface {
-  background: var(--color-surface);
-  min-height: 100%;
+    background: var(--color-surface);
+    min-height: 100%;
 }
 
 .view-frame {
-  min-height: 100%;
-  padding: var(--spacing-8);
+    min-height: 100%;
+    padding: var(--spacing-8);
 }
 
 .view-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
 }
 
 .table-designer-view {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .table-designer-workspace {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  min-height: 0;
-  min-width: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    min-height: 0;
+    min-width: 0;
 }
 
 .table-designer-workspace__top,
 .table-designer-workspace__bottom {
-  min-height: 0;
-  min-width: 0;
+    min-height: 0;
+    min-width: 0;
 }
 
 .table-designer-workspace__top {
-  flex: 1;
+    flex: 1;
 }
 
 .table-designer-workspace__bottom {
-  flex: 0 0 34%;
+    flex: 0 0 34%;
 }
 
 .landing-view {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-height: 100%;
-  overflow: hidden;
-  position: relative;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    overflow: hidden;
+    position: relative;
 }
 
 .landing-accent {
-  background: rgba(75, 71, 50, 0.2);
-  height: 1px;
-  position: absolute;
+    background: rgba(75, 71, 50, 0.2);
+    height: 1px;
+    position: absolute;
 }
 
 .landing-accent--a {
-  left: 3rem;
-  top: 2.5rem;
-  transform: rotate(45deg);
-  width: 8rem;
+    left: 3rem;
+    top: 2.5rem;
+    transform: rotate(45deg);
+    width: 8rem;
 }
 
 .landing-accent--b {
-  bottom: 2.5rem;
-  right: 3rem;
-  transform: rotate(-12deg);
-  width: 16rem;
+    bottom: 2.5rem;
+    right: 3rem;
+    transform: rotate(-12deg);
+    width: 16rem;
 }
 
 .landing-accent--c {
-  border-bottom: 1px solid rgba(75, 71, 50, 0.12);
-  border-right: 1px solid rgba(75, 71, 50, 0.12);
-  height: 4rem;
-  left: 0;
-  top: 50%;
-  width: 4rem;
+    border-bottom: 1px solid rgba(75, 71, 50, 0.12);
+    border-right: 1px solid rgba(75, 71, 50, 0.12);
+    height: 4rem;
+    left: 0;
+    top: 50%;
+    width: 4rem;
 }
 
 .system-placeholder-grid {
-  display: grid;
-  gap: var(--spacing-4);
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    display: grid;
+    gap: var(--spacing-4);
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .system-placeholder-card {
-  background: var(--color-surface-low);
-  border-bottom: 2px solid rgba(49, 48, 48, 1);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  min-height: 160px;
-  padding: var(--spacing-6);
+    background: var(--color-surface-low);
+    border-bottom: 2px solid rgba(49, 48, 48, 1);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: 160px;
+    padding: var(--spacing-6);
 }
 
 .system-placeholder-card.is-primary {
-  border-bottom-color: var(--color-primary-container);
+    border-bottom-color: var(--color-primary-container);
 }
 
-@media (max-width: 1023px) {
-  .table-designer-view {
+.charts-view {
+    background: var(--color-surface);
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.charts-view__sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    display: flex;
+    flex: 0 0 23rem;
     flex-direction: column;
-  }
+    min-height: 0;
+    width: 23rem;
+}
+
+.charts-view__sidebar-header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: var(--spacing-5);
+}
+
+.structure-view {
+    background: var(--color-surface);
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.structure-view__sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    display: flex;
+    flex: 0 0 18.5rem;
+    flex-direction: column;
+    min-height: 0;
+    width: 18.5rem;
+}
+
+.structure-view__sidebar-header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: var(--spacing-5);
+}
+
+.structure-view__sidebar-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-4);
+}
+
+.structure-view__detail {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+}
+
+.structure-view__header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: 1.25rem 1.5rem;
+}
+
+.structure-headline-container {
+    max-width: min(64rem, 100%);
+}
+
+.structure-view__graph-shell {
+    flex: 1;
+    min-height: 0;
+}
+
+.structure-sidebar__section + .structure-sidebar__section {
+    margin-top: 1.5rem;
+}
+
+.charts-view__detail {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+}
+
+.charts-detail-shell {
+    min-height: 100%;
+    padding: var(--spacing-6);
+}
+
+.charts-detail-shell__header {
+    align-items: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+}
+
+.charts-detail-shell__controls {
+    align-items: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+}
+
+.charts-detail-shell__button {
+    background: var(--color-surface-container);
+    border: 1px solid rgba(75, 71, 50, 0.2);
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    padding: 0.75rem 1rem;
+}
+
+.charts-detail-shell__button--primary {
+    background: var(--color-primary-container);
+    border-color: transparent;
+    color: var(--color-on-primary);
+}
+
+.charts-detail-shell__button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.charts-height-toggle {
+    background: var(--color-surface-container-low);
+    border: 1px solid rgba(75, 71, 50, 0.18);
+    display: inline-flex;
+    gap: 0.25rem;
+    padding: 0.25rem;
+}
+
+.charts-height-toggle__button {
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--color-on-surface-variant);
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    padding: 0.55rem 0.8rem;
+}
+
+.charts-height-toggle__button.is-active {
+    background: var(--color-primary-container);
+    border-color: transparent;
+    color: var(--color-on-primary);
+}
+
+.query-chart-card {
+    --query-chart-height: 450px;
+    background: var(--color-surface-low);
+    border: 1px solid rgba(75, 71, 50, 0.12);
+    overflow: hidden;
+}
+
+.query-chart-card--small {
+    --query-chart-height: 300px;
+}
+
+.query-chart-card--medium {
+    --query-chart-height: 450px;
+}
+
+.query-chart-card--large {
+    --query-chart-height: 600px;
+}
+
+.query-chart-card__header {
+    align-items: center;
+    background: var(--color-surface-container-highest);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+}
+
+.query-chart-card__body {
+    background:
+        radial-gradient(circle at top right, rgba(252, 227, 0, 0.08), transparent 28%),
+        linear-gradient(180deg, rgba(32, 31, 31, 0.92), rgba(14, 14, 14, 1));
+    min-height: var(--query-chart-height);
+    padding: 1rem;
+}
+
+.query-chart-canvas,
+.query-chart-surface-state {
+    height: var(--query-chart-height);
+    min-height: var(--query-chart-height);
+}
+
+.query-chart-card__action {
+    background: var(--color-surface-container);
+    border: 1px solid rgba(75, 71, 50, 0.18);
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    padding: 0.55rem 0.85rem;
+}
+
+.query-chart-card__results {
+    background: var(--color-surface-container-lowest);
+}
+
+@media (max-width: 1023px) {
+    .charts-view {
+        flex-direction: column;
+    }
+
+    .charts-view__sidebar {
+        flex-basis: 18rem;
+        width: 100%;
+    }
+
+    .structure-view {
+        flex-direction: column;
+    }
+
+    .structure-view__sidebar {
+        flex-basis: 18rem;
+        width: 100%;
+    }
+
+    .table-designer-view {
+        flex-direction: column;
+    }
 
-  .table-designer-workspace__bottom {
-    flex-basis: 280px;
-  }
+    .table-designer-workspace__bottom {
+        flex-basis: 280px;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -15,6 +15,7 @@
         "better-sqlite3": "^11.8.1",
         "cytoscape": "^3.33.2",
         "cytoscape-elk": "^2.3.0",
+        "echarts": "^5.6.0",
         "elkjs": "^0.11.1",
         "express": "^4.21.2"
     }