sqlite-hub 1.1.0 → 1.1.1

package/frontend/js/views/documents.js

@@ -24,7 +24,7 @@ function renderDocumentListItem(item, selectedId) {
 
     return `
       <button
-        class="documents-list-item ${isSelected ? 'is-selected' : ''}"
+        class="documents-list-item subnavi-item ${isSelected ? 'is-selected' : ''}"
         data-action="select-document"
         data-document-id="${escapeHtml(item.id)}"
         type="button"
@@ -42,33 +42,58 @@ function renderDocumentListItem(item, selectedId) {
     `;
 }
 
+function getFilteredDocuments(items, searchQuery) {
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
+
+    if (!normalizedSearch) {
+        return items;
+    }
+
+    return items.filter(item =>
+        [item.filename, item.title]
+            .filter(Boolean)
+            .some(value => String(value).toLowerCase().includes(normalizedSearch)),
+    );
+}
+
+function renderDocumentsSearch(documents) {
+    return `
+      <label class="table-designer-sidebar__search">
+        <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+        <input
+          class="table-designer-sidebar__search-input"
+          data-bind="documents-search"
+          placeholder="Search documents..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(documents.searchQuery ?? '')}"
+        />
+      </label>
+    `;
+}
+
 function renderDocumentsSidebar(documents) {
     const items = documents.items ?? [];
+    const filteredItems = getFilteredDocuments(items, documents.searchQuery);
 
     return `
-      <aside class="documents-view__sidebar">
-        <div class="documents-view__sidebar-header">
+      <aside class="documents-view__sidebar subnavi-panel">
+        <div class="documents-view__sidebar-header subnavi-header">
           <div>
-            <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/50">
-              Documents
-            </div>
-            <div class="mt-1 font-mono text-xs text-primary-container">${formatNumber(items.length)} files</div>
+            <div class="subnavi-header-title">Documents</div>
+            <div class="subnavi-header-details">${formatNumber(items.length)} files</div>
           </div>
-          <button
-            class="icon-button"
-            data-action="create-document"
-            title="New document"
-            type="button"
-            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">add</span>
-          </button>
         </div>
-        <div class="documents-view__sidebar-body custom-scrollbar">
+        ${renderDocumentsSearch(documents)}
+        <div class="documents-view__sidebar-body subnavi-list custom-scrollbar">
           ${
-              items.length
-                  ? items.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
-                  : `<div class="documents-list-empty">No documents yet</div>`
+              filteredItems.length
+                  ? filteredItems.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
+                  : `<div class="documents-list-empty">${
+                        items.length ? 'No documents match the current search.' : 'No documents yet'
+                    }</div>`
           }
         </div>
       </aside>
@@ -78,7 +103,9 @@ function renderDocumentsSidebar(documents) {
 function renderDocumentToolbar(documents) {
     const disabled = documents.saving || documents.detailLoading || !documents.selectedId;
 
-    return `       <label class="documents-filename-field">
+    return `
+      <div class="documents-titlebar">
+        <label class="documents-filename-field">
           <input
             class="control-input"
             data-bind="document-field"
@@ -90,13 +117,24 @@ function renderDocumentToolbar(documents) {
             ${!documents.selectedId ? 'disabled' : ''}
           />
         </label>
+        <button
+          class="signature-button documents-create-button"
+          data-action="create-document"
+          type="button"
+          ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+        >
+          <span class="material-symbols-outlined">add</span>
+          New Document
+        </button>
+      </div>
       <div class="documents-toolbar">
    
  
        
         <div class="documents-toolbar__actions">
           <button
-            class="standard-button"
+            class="standard-button panel-toggle-button ${documents.editorVisible ? '' : 'is-active'}"
+            aria-pressed="${documents.editorVisible ? 'false' : 'true'}"
             data-action="toggle-document-pane"
             data-pane="editor"
             type="button"
@@ -105,7 +143,8 @@ function renderDocumentToolbar(documents) {
             ${documents.editorVisible ? 'Hide Editor' : 'Show Editor'}
           </button>
           <button
-            class="standard-button"
+            class="standard-button panel-toggle-button ${documents.previewVisible ? '' : 'is-active'}"
+            aria-pressed="${documents.previewVisible ? 'false' : 'true'}"
             data-action="toggle-document-pane"
             data-pane="preview"
             type="button"

package/frontend/js/views/mediaTagging.js

@@ -396,8 +396,8 @@ function renderPreviewMedia(
 
     const metadata = getWorkflowMetadataEntries(currentItem);
     const toggleLabel = detailsVisible
-        ? '<span class="material-symbols-outlined">visibility_off</span> Shrink Media Viewer'
-        : 'Show Media Viewer';
+        ? '<span class="material-symbols-outlined">visibility_off</span> Hide Viewer'
+        : '<span class="material-symbols-outlined">visibility</span> Show Viewer';
 
     return `
     <div class="media-tagging-preview ${detailsVisible ? '' : 'media-tagging-preview--meta-hidden'}">
@@ -450,11 +450,12 @@ function renderPreviewMedia(
                     : ''
             }
             <button
-              class="standard-button media-tagging-preview__toggle"
+              class="standard-button panel-toggle-button media-tagging-preview__toggle ${detailsVisible ? '' : 'is-active'}"
+              aria-pressed="${detailsVisible ? 'false' : 'true'}"
               data-action="toggle-media-tagging-current-media"
               data-next-value="${detailsVisible ? 'false' : 'true'}"
-              data-expanded-label="Shrink Media Viewer"
-              data-collapsed-label="Show Media Viewer"
+              data-expanded-label="Hide Viewer"
+              data-collapsed-label="Show Viewer"
               aria-expanded="${detailsVisible ? 'true' : 'false'}"
               type="button"
             >

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
@@ -217,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"
           >
@@ -265,7 +266,8 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
         </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"
           >
@@ -321,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);
@@ -841,35 +942,14 @@
 .table-designer-sidebar {
     background: var(--color-surface-low);
     border-right: 1px solid var(--border-medium);
-    display: flex;
-    flex: 0 0 clamp(16rem, 20vw, 18.2rem);
-    flex-direction: column;
-    max-width: 18.2rem;
-    min-height: 0;
-    min-width: min(18.2rem, 100%);
-    width: clamp(16rem, 20vw, 18.2rem);
+    max-width: var(--subnavi-width);
 }
 
 .table-designer-sidebar__header {
-    border-bottom: 1px solid var(--border-medium);
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-4);
-    justify-content: space-between;
-    padding: var(--spacing-5);
-}
-
-.table-designer-sidebar__header-actions {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-2);
-    flex-wrap: wrap;
+    align-items: flex-start;
 }
 
-.table-designer-sidebar__eyebrow,
-.table-designer-preview__eyebrow,
-.table-designer-main__eyebrow {
+.table-designer-preview__eyebrow {
     color: var(--color-primary-container);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
@@ -877,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;
@@ -887,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);
@@ -984,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);
@@ -1067,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);
@@ -1091,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 {
@@ -1125,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;
@@ -1245,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);
@@ -1524,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%;
     }
 }
 

package/frontend/styles/structure-graph.css

@@ -12,7 +12,6 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    padding: 1rem 1.25rem;
 }
 
 .structure-graph__toolbar-main {
@@ -57,9 +56,18 @@
     background: var(--color-surface-container-highest);
 }
 
-.structure-graph__toolbar .standard-button.is-active {
+.structure-graph__toolbar .panel-toggle-button.is-active,
+.structure-graph__toolbar .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);
+}
+
+.structure-graph__toolbar .panel-toggle-button.is-active:hover,
+.structure-graph__toolbar .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);
 }