sqlite-hub 1.1.0 → 1.1.2

package/frontend/js/views/documents.js

@@ -1,3 +1,4 @@
+import { renderDropdownButton } from '../components/dropdownButton.js';
 import { escapeHtml, formatCompactDateTime, formatNumber } from '../utils/format.js';
 import { renderMarkdownPreview } from '../utils/markdownDocuments.js';
 
@@ -24,7 +25,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,183 +43,249 @@ 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>
     `;
 }
 
-function renderDocumentToolbar(documents) {
+function renderDocumentImportFileInput() {
+    return `
+      <input
+        accept=".md,.markdown,text/markdown,text/plain"
+        data-bind="document-import-file"
+        hidden
+        type="file"
+      />
+    `;
+}
+
+function renderNewDocumentDropdown(documents, className = '') {
+    return `
+      <div class="${escapeHtml(className)}">
+        ${renderDropdownButton({
+            disabled: documents.saving,
+            icon: 'add',
+            label: 'New Document',
+            title: 'New document',
+            items: [
+                {
+                    action: 'create-document',
+                    icon: 'draft',
+                    label: 'Blank Page',
+                },
+                {
+                    action: 'import-document-markdown',
+                    icon: 'upload_file',
+                    label: 'Import .md',
+                },
+            ],
+        })}
+      </div>
+    `;
+}
+
+function renderDocumentsPanelToggle(documents) {
+    const visible = documents.documentsVisible !== false;
+
+    return `
+      <button
+        class="standard-button panel-toggle-button ${visible ? '' : 'is-active'}"
+        aria-pressed="${visible ? 'false' : 'true'}"
+        data-action="toggle-documents-panel"
+        type="button"
+      >
+        <span class="material-symbols-outlined">${visible ? 'visibility_off' : 'visibility'}</span>
+        ${visible ? 'Hide Documents' : 'Show Documents'}
+      </button>
+    `;
+}
+
+function renderDocumentPaneToggle(documents, pane) {
+    const isEditor = pane === 'editor';
+    const visible = isEditor ? documents.editorVisible : documents.previewVisible;
+    const label = `${visible ? 'Hide' : 'Show'} ${isEditor ? 'Editor' : 'Preview'}`;
+    const icon = visible ? 'visibility_off' : isEditor ? 'edit_note' : 'visibility';
+
+    return `
+      <button
+        class="standard-button panel-toggle-button documents-pane__toggle ${visible ? '' : 'is-active'}"
+        aria-pressed="${visible ? 'false' : 'true'}"
+        data-action="toggle-document-pane"
+        data-pane="${escapeHtml(pane)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined">${icon}</span>
+        ${label}
+      </button>
+    `;
+}
+
+function renderDocumentsTitlebar(documents, options = {}) {
+    const { showDocumentActions = false, showFilename = true } = options;
     const disabled = documents.saving || documents.detailLoading || !documents.selectedId;
 
-    return `       <label class="documents-filename-field">
-          <input
-            class="control-input"
-            data-bind="document-field"
-            data-field="filename"
-            name="filename"
-            spellcheck="false"
-            type="text"
-            value="${escapeHtml(documents.draftFilename)}"
-            ${!documents.selectedId ? 'disabled' : ''}
-          />
-        </label>
-      <div class="documents-toolbar">
-   
- 
-       
-        <div class="documents-toolbar__actions">
-          <button
-            class="standard-button"
-            data-action="toggle-document-pane"
-            data-pane="editor"
-            type="button"
-          >
-            <span class="material-symbols-outlined">${documents.editorVisible ? 'visibility_off' : 'edit_note'}</span>
-            ${documents.editorVisible ? 'Hide Editor' : 'Show Editor'}
-          </button>
-          <button
-            class="standard-button"
-            data-action="toggle-document-pane"
-            data-pane="preview"
-            type="button"
-          >
-            <span class="material-symbols-outlined">${documents.previewVisible ? 'visibility_off' : 'visibility'}</span>
-            ${documents.previewVisible ? 'Hide Preview' : 'Show Preview'}
-          </button>
-          <input
-            accept=".md,.markdown,text/markdown,text/plain"
-            data-bind="document-import-file"
-            hidden
-            type="file"
-          />
-          </div>
-        <div class="documents-toolbar__actions">
-          <button
-            class="standard-button"
-            data-action="open-document-insert-table-modal"
-            type="button"
-            ${disabled ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">table_chart</span>
-            Insert Table
-          </button>
-          <button
-            class="standard-button"
-            data-action="open-document-insert-note-modal"
-            type="button"
-            ${disabled ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">note_add</span>
-            Insert Note
-          </button>
-          <button
-            class="standard-button"
-            data-action="export-document-markdown"
-            type="button"
-            ${disabled ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">download</span>
-            Export .md
-          </button>
-          <button
-            class="standard-button"
-            data-action="import-document-markdown"
-            type="button"
-            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">upload_file</span>
-            Import .md
-          </button>
-        </div>
-          <div class="documents-toolbar__actions">
-          <button
-            class="standard-button"
-            data-action="delete-document"
-            type="button"
-            ${disabled || documents.deleting ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">delete</span>
-            Delete
-          </button>
-          <button
-            class="signature-button"
-            data-action="save-document"
-            type="button"
-            ${disabled || !documents.dirty ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">save</span>
-            ${documents.saving ? 'Saving...' : 'Save'}
-          </button>
-        </div>
+    return `
+      <div class="documents-titlebar">
+        ${renderDocumentsPanelToggle(documents)}
+        ${
+            showFilename
+                ? `
+                  <label class="documents-filename-field">
+                    <input
+                      class="control-input"
+                      data-bind="document-field"
+                      data-field="filename"
+                      name="filename"
+                      spellcheck="false"
+                      type="text"
+                      value="${escapeHtml(documents.draftFilename)}"
+                      ${!documents.selectedId ? 'disabled' : ''}
+                    />
+                  </label>
+                `
+                : ''
+        }
+        ${renderNewDocumentDropdown(documents, 'documents-create-button')}
+        ${
+            showDocumentActions
+                ? `
+                  ${renderDropdownButton({
+                      disabled,
+                      icon: 'add_box',
+                      label: 'Insert',
+                      title: 'Insert content',
+                      items: [
+                          {
+                              action: 'open-document-insert-table-modal',
+                              icon: 'table_chart',
+                              label: 'Insert Table',
+                          },
+                          {
+                              action: 'open-document-insert-note-modal',
+                              icon: 'note_add',
+                              label: 'Insert Note',
+                          },
+                      ],
+                  })}
+                  <button
+                    class="standard-button"
+                    data-action="export-document-markdown"
+                    type="button"
+                    ${disabled ? 'disabled aria-disabled="true"' : ''}
+                  >
+                    <span class="material-symbols-outlined">download</span>
+                    Export .md
+                  </button>
+                  <button
+                    class="delete-button"
+                    data-action="delete-document"
+                    type="button"
+                    ${disabled || documents.deleting ? 'disabled aria-disabled="true"' : ''}
+                  >
+                    <span class="material-symbols-outlined">delete</span>
+                    Delete
+                  </button>
+                `
+                : ''
+        }
       </div>
     `;
 }
 
 function renderDocumentEditor(documents) {
-    if (!documents.editorVisible) {
-        return '';
-    }
-
     return `
-      <section class="documents-pane documents-pane--editor">
+      <section class="documents-pane documents-pane--editor ${documents.editorVisible ? '' : 'documents-pane--collapsed'}">
         <div class="documents-pane__header">
-          <span>Editor</span>
-          <span>${formatNumber(documents.draftContent.length)} chars</span>
+          ${renderDocumentPaneToggle(documents, 'editor')}
+          <span class="documents-pane__meta">${formatNumber(documents.draftContent.length)} chars</span>
         </div>
-        <textarea
-          class="documents-editor-input custom-scrollbar"
-          data-bind="document-field"
-          data-field="content"
-          name="content"
-          spellcheck="true"
-          ${!documents.selectedId ? 'disabled' : ''}
-        >${escapeHtml(documents.draftContent)}</textarea>
+        ${
+            documents.editorVisible
+                ? `
+                  <textarea
+                    class="documents-editor-input custom-scrollbar"
+                    data-bind="document-field"
+                    data-field="content"
+                    name="content"
+                    spellcheck="true"
+                    ${!documents.selectedId ? 'disabled' : ''}
+                  >${escapeHtml(documents.draftContent)}</textarea>
+                `
+                : ''
+        }
       </section>
     `;
 }
 
 function renderDocumentPreview(documents) {
-    if (!documents.previewVisible) {
-        return '';
-    }
-
     return `
-      <section class="documents-pane documents-pane--preview">
+      <section class="documents-pane documents-pane--preview ${documents.previewVisible ? '' : 'documents-pane--collapsed'}">
         <div class="documents-pane__header">
-          <span>Preview</span>
-          <span>${escapeHtml(documents.dirty ? 'unsaved' : 'saved')}</span>
-        </div>
-        <div class="document-markdown-preview custom-scrollbar" data-document-preview>
-          ${renderMarkdownPreview(documents.draftContent)}
+          ${renderDocumentPaneToggle(documents, 'preview')}
+          <span class="documents-pane__meta">${escapeHtml(documents.dirty ? 'unsaved' : 'saved')}</span>
         </div>
+        ${
+            documents.previewVisible
+                ? `
+                  <div class="document-markdown-preview custom-scrollbar" data-document-preview>
+                    ${renderMarkdownPreview(documents.draftContent)}
+                  </div>
+                `
+                : ''
+        }
       </section>
     `;
 }
@@ -230,15 +297,7 @@ function renderEmptyDocumentsState(documents) {
         <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
           No Documents
         </p>
-        <button
-          class="signature-button mt-4"
-          data-action="create-document"
-          type="button"
-          ${documents.saving ? 'disabled aria-disabled="true"' : ''}
-        >
-          <span class="material-symbols-outlined">add</span>
-          New Document
-        </button>
+        ${renderNewDocumentDropdown(documents, 'mt-4')}
       </div>
     `;
 }
@@ -247,6 +306,7 @@ function renderDocumentDetail(documents) {
     if (documents.loading && !documents.items.length) {
         return `
           <main class="documents-view__detail">
+            ${renderDocumentsTitlebar(documents, { showFilename: false })}
             <div class="documents-empty-state">
               <span class="material-symbols-outlined">sync</span>
               <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
@@ -260,18 +320,26 @@ function renderDocumentDetail(documents) {
     if (!documents.selectedId) {
         return `
           <main class="documents-view__detail">
+            ${renderDocumentsTitlebar(documents, { showFilename: false })}
             ${renderEmptyDocumentsState(documents)}
           </main>
         `;
     }
 
-    const paneCount = Number(documents.editorVisible) + Number(documents.previewVisible);
+    const workspaceClasses = [
+        'documents-workspace',
+        documents.editorVisible && documents.previewVisible ? 'documents-workspace--split' : '',
+        !documents.editorVisible ? 'documents-workspace--editor-collapsed' : '',
+        !documents.previewVisible ? 'documents-workspace--preview-collapsed' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
 
     return `
       <main class="documents-view__detail">
-        ${renderDocumentToolbar(documents)}
+        ${renderDocumentsTitlebar(documents, { showDocumentActions: true })}
         ${documents.saveError ? `<div class="documents-error">${escapeHtml(documents.saveError.message)}</div>` : ''}
-        <div class="documents-workspace ${paneCount > 1 ? 'documents-workspace--split' : ''}">
+        <div class="${workspaceClasses}">
           ${renderDocumentEditor(documents)}
           ${renderDocumentPreview(documents)}
         </div>
@@ -288,13 +356,14 @@ export function renderDocumentsView(state) {
     }
 
     const documents = state.documents;
+    const documentsVisible = documents.documentsVisible !== false;
 
     return {
-        main: `<div class="documents-view">
-                ${renderDocumentsSidebar(documents)}
+        main: `<div class="documents-view ${documentsVisible ? 'documents-view--with-subnavi' : ''}">
+                ${renderDocumentImportFileInput()}
+                ${documentsVisible ? renderDocumentsSidebar(documents) : ''}
                 ${renderDocumentDetail(documents)}
-              </div>
-            </div>`,
+              </div>`,
         panel: '',
     };
 }

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

@@ -1,4 +1,5 @@
 import { clearInspector, renderDdlSection, renderInspector } from '../components/structureGraph.js';
+import { renderDropdownButton } from '../components/dropdownButton.js';
 import { escapeHtml, formatNumber } from '../utils/format.js';
 
 function renderEntryGroup(title, entries, activeName, options = {}) {
@@ -22,7 +23,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 +218,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"
           >
@@ -229,30 +231,31 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
           </button>
         </div>
         <div class="structure-graph__toolbar-actions">
-          <button
-            class="${toolbarButtonClass}"
-            data-structure-graph-action="fit"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-sm">fit_screen</span>
-            Fit Graph
-          </button>
-          <button
-            class="${toolbarButtonClass}"
-            data-structure-graph-action="relayout"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-sm">device_hub</span>
-            Recalculate Layout
-          </button>
-          <button
-            class="${toolbarButtonClass}"
-            data-structure-graph-action="clear"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-sm">close</span>
-            Clear Selection
-          </button>
+          ${renderDropdownButton({
+              icon: 'format_shapes',
+              label: 'Format',
+              title: 'Format graph',
+              items: [
+                  {
+                      action: 'fit',
+                      actionAttribute: 'data-structure-graph-action',
+                      icon: 'fit_screen',
+                      label: 'Fit Graph',
+                  },
+                  {
+                      action: 'relayout',
+                      actionAttribute: 'data-structure-graph-action',
+                      icon: 'device_hub',
+                      label: 'Recalculate Layout',
+                  },
+                  {
+                      action: 'clear',
+                      actionAttribute: 'data-structure-graph-action',
+                      icon: 'close',
+                      label: 'Clear Selection',
+                  },
+              ],
+          })}
           <button
             class="${toolbarButtonClass}"
             data-structure-graph-action="open-data"
@@ -265,7 +268,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 +325,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
                           ? `