sqlite-hub 1.0.0 → 1.1.1

package/frontend/js/views/structure.js

@@ -22,7 +22,7 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
                           : '';
 
                       return [
-                          '<button class="w-full border px-3 ',
+                          '<button class="subnavi-item border px-3 ',
                           compact ? 'py-2.5' : 'py-3',
                           ' text-left transition-colors ',
                           isActive
@@ -115,20 +115,27 @@ function renderObjectInspector(detail) {
     return `
     <div class="structure-graph__panel">
       <div class="space-y-3">
-        <div class="structure-graph__eyebrow">Object Inspector</div>
-        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
-        <div class="flex flex-wrap items-center gap-3">
-          <div class="structure-graph__subtitle">${escapeHtml(detail.type ?? 'object')}</div>
-          ${
-              detail.tableName
-                  ? `
-                  <div class="structure-graph__subtitle">
-                    TABLE ${escapeHtml(detail.tableName)}
-                  </div>
-                `
-                  : ''
-          }
+        <div class="structure-graph__panel-heading">
+          <div class="structure-graph__eyebrow">Object Inspector</div>
+          <button
+            class="query-history-icon-button"
+            data-structure-graph-action="toggle-inspector"
+            type="button"
+            aria-label="Hide inspector"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
+        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        ${
+            detail.tableName
+                ? `
+                <div class="structure-graph__subtitle">
+                  TABLE ${escapeHtml(detail.tableName)}
+                </div>
+              `
+                : ''
+        }
       </div>
 
       <div class="structure-graph__summary">
@@ -210,10 +217,11 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
 
     return `
     <section class="structure-graph" data-structure-graph-root>
-      <div class="structure-graph__toolbar">
+      <div class="structure-graph__toolbar workspace-header">
         <div class="structure-graph__toolbar-main">
           <button
-            class="${toolbarButtonClass}"
+            class="${toolbarButtonClass} panel-toggle-button ${tablesVisible ? '' : 'is-active'}"
+            aria-pressed="${tablesVisible ? 'false' : 'true'}"
             data-action="toggle-structure-tables"
             type="button"
           >
@@ -255,8 +263,11 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
             <span class="material-symbols-outlined text-sm">table_rows</span>
             Open Data
           </button>
+        </div>
+        <div class="structure-graph__toolbar-inspector">
           <button
-            class="${toolbarButtonClass}"
+            class="${toolbarButtonClass} panel-toggle-button"
+            aria-pressed="false"
             data-structure-graph-action="toggle-inspector"
             type="button"
           >
@@ -280,6 +291,11 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
               The active database does not expose table metadata for the schema graph.
             </p>
           </div>
+          <div
+            class="structure-graph__edge-readout"
+            data-structure-graph-edge-readout
+            hidden
+          ></div>
         </div>
 
         <aside
@@ -307,24 +323,24 @@ export function renderStructureView(state) {
         ${
             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),
-                        ),
-                    )}
+              <aside class="structure-view__sidebar subnavi-panel">
+                <div class="structure-view__sidebar-header subnavi-header">
+                  <div>
+                    <div class="subnavi-header-title">Objects</div>
+                    <div class="subnavi-header-details">
+                      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>
                 ${renderStructureTableSearch(state)}
-                <div class="structure-view__sidebar-body custom-scrollbar">
+                <div class="structure-view__sidebar-body subnavi-list custom-scrollbar">
                   ${
                       structure
                           ? `

package/frontend/js/views/tableDesigner.js

@@ -16,12 +16,56 @@ function renderRouteError(error) {
   `;
 }
 
+function renderWorkspaceToolbar(state) {
+  const tablesVisible = state.tableDesigner.tablesVisible !== false;
+
+  return `
+    <div class="table-designer-workspace__toolbar workspace-header">
+      <div class="table-designer-workspace__toolbar-left">
+        <button
+          class="standard-button panel-toggle-button ${tablesVisible ? "" : "is-active"}"
+          aria-pressed="${tablesVisible ? "false" : "true"}"
+          data-action="toggle-table-designer-tables"
+          type="button"
+        >
+          <span class="material-symbols-outlined">${tablesVisible ? "visibility_off" : "visibility"}</span>
+          ${tablesVisible ? "Hide Tables" : "Show Tables"}
+        </button>
+      </div>
+      <div class="table-designer-workspace__toolbar-right">
+        <button
+          class="standard-button"
+          data-action="import-table-designer-csv"
+          type="button"
+        >
+          Import CSV
+        </button>
+        <input
+          accept=".csv,text/csv"
+          class="table-designer-workspace__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>
+  `;
+}
+
 export function renderTableDesignerView(state) {
   return {
     main: `
       <section class="view-surface table-designer-view">
-        ${renderTableDesignerSidebar(state)}
+        ${state.tableDesigner.tablesVisible !== false ? renderTableDesignerSidebar(state) : ""}
         <div class="table-designer-workspace">
+          ${renderWorkspaceToolbar(state)}
           ${renderRouteError(state.tableDesigner.error)}
           <div class="table-designer-workspace__top">
             ${renderTableDesignerEditor(state)}

package/frontend/styles/components.css

@@ -153,6 +153,92 @@
     color: var(--color-primary-container);
 }
 
+.subnavi-panel {
+    display: flex;
+    flex: 0 0 var(--subnavi-width);
+    flex-direction: column;
+    min-height: 0;
+    min-width: min(var(--subnavi-width), 100%);
+    width: var(--subnavi-width);
+}
+
+.subnavi-list {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: 0;
+    overflow: auto;
+    padding: var(--spacing-3);
+}
+
+.subnavi-item {
+    max-width: 100%;
+    width: min(var(--subnavi-item-width), 100%);
+}
+
+.subnavi-header {
+    align-items: center;
+    border-bottom: 1px solid var(--border-medium);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+    padding: var(--spacing-5);
+}
+
+.subnavi-header > :first-child {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    min-width: 0;
+    width: 100%;
+}
+
+.subnavi-header-title {
+    color: var(--color-primary-container);
+    flex: 1 1 auto;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.subnavi-header-details {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    flex: 0 0 auto;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    letter-spacing: 0.16em;
+    margin-left: auto;
+    text-align: right;
+    text-transform: uppercase;
+}
+
+.workspace-header {
+    align-items: center;
+    background: var(--color-surface-container);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    min-height: calc(var(--button-height) + (var(--spacing-3) * 2));
+    padding: var(--spacing-3) var(--spacing-6);
+}
+
+.workspace-header--low {
+    background: var(--color-surface-container-low);
+}
+
+.workspace-header > :only-child {
+    width: 100%;
+}
+
 .sidebar-footer {
     margin-top: auto;
     padding: 0 var(--spacing-6);
@@ -409,6 +495,21 @@
     text-transform: uppercase;
 }
 
+.panel-toggle-button.is-active,
+.panel-toggle-button[aria-pressed='true'] {
+    background: var(--primary-alpha-12);
+    border-color: rgb(var(--rgb-primary) / 0.38);
+    box-shadow: inset 0 0 0 1px var(--primary-alpha-12);
+    color: var(--color-primary-container);
+}
+
+.panel-toggle-button.is-active:hover,
+.panel-toggle-button[aria-pressed='true']:hover {
+    background: var(--primary-alpha-18);
+    border-color: rgb(var(--rgb-primary) / 0.5);
+    color: var(--color-primary-container);
+}
+
 .signature-button {
     color: #000;
     font-family: var(--font-family-headline);
@@ -624,13 +725,35 @@
 }
 
 .status-badge {
+    align-items: center;
     border: 1px solid transparent;
+    box-sizing: border-box;
     display: inline-flex;
     font-size: var(--font-size-micro);
     font-weight: 700;
+    justify-content: center;
     letter-spacing: 0.12em;
+    line-height: 1;
     padding: 0.125rem 0.5rem;
     text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.query-history-badge-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    width: 100%;
+}
+
+.query-history-badge-row .status-badge {
+    min-height: var(--button-height);
+    min-width: 8.5rem;
+}
+
+.query-history-badge-row--compact .status-badge {
+    min-width: 6.75rem;
 }
 
 .status-badge--primary {
@@ -746,38 +869,87 @@
     width: clamp(20rem, 26vw, 22.5rem);
 }
 
-.table-designer-sidebar {
-    background: var(--color-surface-low);
-    border-right: 1px solid var(--border-medium);
+.query-history-panel__header {
+    border-bottom: 1px solid var(--border-medium);
+    padding: var(--spacing-4);
+}
+
+.query-history-tabs {
+    align-items: center;
     display: flex;
-    flex: 0 0 clamp(16rem, 20vw, 18.2rem);
-    flex-direction: column;
-    max-width: 18.2rem;
+    gap: var(--spacing-2);
+    margin-top: var(--spacing-4);
+}
+
+.query-history-tabs__count {
+    color: var(--text-variant-subtle);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    margin-left: auto;
+    text-transform: uppercase;
+}
+
+.query-history-list-scroll {
+    flex: 1;
     min-height: 0;
-    min-width: min(18.2rem, 100%);
-    width: clamp(16rem, 20vw, 18.2rem);
+    overflow: auto;
+    padding: var(--spacing-3);
 }
 
-.table-designer-sidebar__header {
-    border-bottom: 1px solid var(--border-medium);
+.query-history-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar {
+    align-items: center;
+    display: grid;
     gap: var(--spacing-4);
-    justify-content: space-between;
-    padding: var(--spacing-5);
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 }
 
-.table-designer-sidebar__header-actions {
+.query-editor-toolbar__left,
+.query-editor-toolbar__center,
+.query-editor-toolbar__right {
     align-items: center;
     display: flex;
-    flex-direction: row;
-    gap: var(--spacing-2);
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar__center {
     flex-wrap: wrap;
+    justify-content: center;
+}
+
+.query-editor-toolbar__right {
+    justify-content: flex-end;
+}
+
+@media (max-width: 980px) {
+    .query-editor-toolbar {
+        grid-template-columns: 1fr;
+    }
+
+    .query-editor-toolbar__left,
+    .query-editor-toolbar__center,
+    .query-editor-toolbar__right {
+        justify-content: flex-start;
+    }
+}
+
+.table-designer-sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid var(--border-medium);
+    max-width: var(--subnavi-width);
 }
 
-.table-designer-sidebar__eyebrow,
-.table-designer-preview__eyebrow,
-.table-designer-main__eyebrow {
+.table-designer-sidebar__header {
+    align-items: flex-start;
+}
+
+.table-designer-preview__eyebrow {
     color: var(--color-primary-container);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
@@ -785,8 +957,7 @@
     text-transform: uppercase;
 }
 
-.table-designer-preview__title,
-.table-designer-main__section-title {
+.table-designer-preview__title {
     color: var(--color-on-surface);
     font-family: var(--font-family-headline);
     font-size: 1rem;
@@ -795,21 +966,6 @@
     margin-top: var(--spacing-2);
 }
 
-.table-designer-sidebar__meta,
-.table-designer-main__subtitle,
-.table-designer-main__section-text {
-    color: rgb(var(--rgb-on-surface) / 0.52);
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-status);
-    letter-spacing: 0.14em;
-    margin-top: var(--spacing-2);
-    text-transform: uppercase;
-}
-
-.table-designer-sidebar__file-input {
-    display: none;
-}
-
 .table-designer-sidebar__search {
     align-items: center;
     background: var(--color-surface-container-lowest);
@@ -892,16 +1048,8 @@ input.table-designer-sidebar__search-input[type='search'] {
     color: rgb(var(--rgb-on-surface-variant) / 0.65);
 }
 
-.table-designer-sidebar__list {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: var(--spacing-3);
-}
-
 .table-designer-sidebar__item {
     display: block;
-    margin-bottom: var(--spacing-2);
     transition:
         background-color var(--transition-fast),
         border-color var(--transition-fast);
@@ -975,7 +1123,6 @@ input.table-designer-sidebar__search-input[type='search'] {
     min-height: 0;
 }
 
-.table-designer-main__header,
 .table-designer-preview__header {
     align-items: center;
     border-bottom: 1px solid rgb(var(--rgb-outline) / 0.16);
@@ -999,7 +1146,7 @@ input.table-designer-sidebar__search-input[type='search'] {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-3);
-    margin-top: var(--spacing-2);
+    margin-top: 0;
 }
 
 .table-designer-main__name {
@@ -1033,13 +1180,6 @@ input.table-designer-main__name[type='text'] {
     padding: 0;
 }
 
-.table-designer-main__actions {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-3);
-}
-
 .table-designer-preview__actions {
     align-items: center;
     display: flex;
@@ -1153,7 +1293,7 @@ input.table-designer-main__name[type='text'] {
 }
 
 .table-designer-main__section-header {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-4);
@@ -1432,6 +1572,8 @@ input.table-designer-main__name[type='text'] {
         border-bottom: 1px solid var(--border-medium);
         border-right: none;
         flex-basis: auto;
+        max-width: none;
+        width: 100%;
     }
 }
 
@@ -1478,6 +1620,63 @@ input.table-designer-main__name[type='text'] {
     background: var(--primary-alpha-08);
 }
 
+.query-history-item-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    text-align: left;
+}
+
+.query-history-item-title {
+    color: var(--color-on-surface);
+    display: block;
+    font-family: var(--font-family-headline);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: 1.15;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.query-history-item.is-active .query-history-item-title,
+.query-history-item-hit.is-active .query-history-item-title {
+    color: var(--color-primary-container);
+}
+
+.query-history-item-footer {
+    align-items: center;
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+}
+
+.query-history-item-meta {
+    color: var(--text-variant-subtle);
+    display: flex;
+    flex-wrap: wrap;
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    gap: var(--spacing-2);
+    letter-spacing: 0.14em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.query-history-item-actions {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--spacing-1);
+    margin-left: auto;
+}
+
 .query-history-icon-button {
     background: transparent;
     border: 0;
@@ -1522,10 +1721,16 @@ input.table-designer-main__name[type='text'] {
 }
 
 .query-history-sql-preview {
+    color: rgb(var(--rgb-on-surface-variant) / 0.75);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: var(--spacing-2);
     overflow: hidden;
+    text-align: left;
 }
 
 .query-history-detail-sql {