sqlite-hub 2.0.1 → 2.2.0

package/frontend/js/views/backups.js

@@ -687,14 +687,11 @@ export function renderBackupDiffDrawer(state) {
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
             <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
-              Backup Compare
+              Backup Compare // ${escapeHtml(currentLabel)}
             </div>
             <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(title)}
             </h2>
-            <div class="mt-1 truncate text-xs text-on-surface-variant/60">
-              Current // ${escapeHtml(currentLabel)}
-            </div>
           </div>
           <button
             class="query-history-icon-button"
@@ -708,7 +705,7 @@ export function renderBackupDiffDrawer(state) {
         <div class="mt-4 flex flex-wrap gap-2">
           ${renderStatusBadge('read only', 'muted')}
           ${diffState.loading ? renderStatusBadge('loading', 'muted') : ''}
-          ${diffState.error ? renderStatusBadge('error', 'alert') : ''}
+          ${diffState.error ? renderStatusBadge('error', 'muted') : ''}
         </div>
       </div>
       ${renderBackupDiffDrawerBody(diffState)}

package/frontend/js/views/charts.js

@@ -339,9 +339,14 @@ export function renderChartsDetailDrawer(state) {
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Chart Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                Charts // Query Detail
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Loading
+              </h2>
+            </div>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
               <span class="material-symbols-outlined text-[18px]">close</span>
             </button>
@@ -359,9 +364,14 @@ export function renderChartsDetailDrawer(state) {
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Chart Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                Charts // Query Detail
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Error
+              </h2>
+            </div>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
               <span class="material-symbols-outlined text-[18px]">close</span>
             </button>
@@ -383,7 +393,7 @@ export function renderChartsDetailDrawer(state) {
     const charts = detail.charts ?? [];
     const result = state.charts.result;
     const chartTypeBadges = charts.length
-        ? charts.map(chart => renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')).join('')
+        ? charts.map(chart => renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'muted')).join('')
         : renderStatusBadge('no charts', 'muted');
     const savedBadgeMarkup = `
       <span
@@ -391,12 +401,12 @@ export function renderChartsDetailDrawer(state) {
         data-history-id="${escapeHtml(detail.item.id)}"
         ${detail.item.isSaved ? '' : 'hidden'}
       >
-        ${renderStatusBadge('saved', 'primary')}
+        ${renderStatusBadge('saved', 'muted')}
       </span>
     `;
     const statusMarkup = [
         savedBadgeMarkup,
-        state.charts.resultError ? renderStatusBadge('result error', 'alert') : '',
+        state.charts.resultError ? renderStatusBadge('result error', 'muted') : '',
         state.charts.resultLoading ? renderStatusBadge('loading result', 'muted') : '',
         chartTypeBadges,
     ].join('');
@@ -413,7 +423,7 @@ export function renderChartsDetailDrawer(state) {
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
             <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Chart Detail
+              Charts // Query Detail
             </div>
             <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(detail.item.displayTitle)}

package/frontend/js/views/connections.js

@@ -1,6 +1,7 @@
 import { renderConnectionCard } from '../components/connectionCard.js';
 import { renderPageHeader } from '../components/pageHeader.js';
 import { escapeHtml } from '../utils/format.js';
+import { filterConnections, getConnectionTagCounts } from '../utils/connectionRegistry.js';
 
 function renderConnectionsActionButton({
     label,
@@ -28,7 +29,88 @@ function renderConnectionsActionButton({
   `;
 }
 
-function renderConnectionsBody(state) {
+function renderConnectionsToolbar(state, visibleCount) {
+    if (!state.connections.recent.length) {
+        return '';
+    }
+
+    const searchQuery = state.connections.searchQuery ?? '';
+    const selectedTagIds = new Set((state.connections.selectedTagIds ?? []).map(tagId => String(tagId)));
+    const selectedTags = (state.connections.tags ?? []).filter(tag => selectedTagIds.has(String(tag.id)));
+    const tagCounts = getConnectionTagCounts(state.connections.recent);
+    const filterLabel =
+        selectedTags.length === 0
+            ? 'TAGS: ALL'
+            : selectedTags.length === 1
+              ? `TAGS: ${selectedTags[0].name}`
+              : `TAGS: ${selectedTags.length}`;
+    const tagRows = (state.connections.tags ?? [])
+        .map(tag => {
+            const tagId = String(tag.id);
+            const isSelected = selectedTagIds.has(tagId);
+
+            return `
+              <label class="connection-tag-filter-row">
+                <input
+                  ${isSelected ? 'checked' : ''}
+                  data-bind="connection-tag-filter"
+                  data-tag-id="${escapeHtml(tagId)}"
+                  type="checkbox"
+                />
+                <span class="connection-tag-filter-row__name">${escapeHtml(tag.name)}</span>
+                <span class="connection-tag-filter-row__count">${escapeHtml(String(tagCounts.get(tagId) ?? tag.connectionCount ?? 0))}</span>
+              </label>
+            `;
+        })
+        .join('');
+
+    return `
+    <div class="connection-registry-toolbar" data-connection-registry-toolbar>
+      <label class="connection-registry-search">
+        <span class="sr-only">Search connections</span>
+        <span class="material-symbols-outlined connection-registry-search__icon" aria-hidden="true">search</span>
+        <input
+          autocomplete="off"
+          class="connection-registry-search__input"
+          data-bind="connections-search"
+          data-connections-search-input
+          placeholder="SEARCH_CONNECTIONS..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(searchQuery)}"
+        />
+        <span class="connection-registry-search__shortcut" aria-hidden="true">/</span>
+      </label>
+      <details class="dropdown-button dropdown-button--align-right connection-tag-filter" data-dropdown-button>
+        <summary class="standard-button dropdown-button__toggle connection-tag-filter__toggle" title="${escapeHtml(filterLabel)}">
+          <span class="connection-tag-filter__toggle-label">${escapeHtml(filterLabel)}</span>
+          <span class="material-symbols-outlined dropdown-button__chevron" aria-hidden="true">expand_more</span>
+        </summary>
+        <div class="dropdown-button__panel connection-tag-filter__panel">
+          <div class="connection-tag-filter__header">
+            <span>FILTER_BY_TAG</span>
+            <span>${escapeHtml(String(visibleCount))}</span>
+          </div>
+          ${
+              tagRows
+                  ? `<div class="connection-tag-filter__list custom-scrollbar">${tagRows}</div>`
+                  : '<div class="connection-tag-filter__empty">NO_TAGS_AVAILABLE</div>'
+          }
+          <button
+            class="standard-button connection-tag-filter__reset"
+            data-action="clear-connection-tag-filters"
+            type="button"
+            ${selectedTagIds.size ? '' : 'disabled'}
+          >
+            RESET_FILTER
+          </button>
+        </div>
+      </details>
+    </div>
+  `;
+}
+
+function renderConnectionsBody(state, visibleConnections) {
     if (state.connections.loading && !state.connections.recent.length) {
         return `
       <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
@@ -78,21 +160,33 @@ function renderConnectionsBody(state) {
     `;
     }
 
+    if (!visibleConnections.length) {
+        return `
+      <div class="connection-filter-empty">
+        <span class="material-symbols-outlined connection-filter-empty__icon">search_off</span>
+        <p class="connection-filter-empty__title">NO_CONNECTIONS_FOUND</p>
+        <p class="connection-filter-empty__hint">TRY_ANOTHER_SEARCH_OR_FILTER</p>
+      </div>
+    `;
+    }
+
     return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-      ${state.connections.recent
-          .map(connection => renderConnectionCard(connection, state.connections.active?.id))
-          .join('')}
+      ${visibleConnections.map(connection => renderConnectionCard(connection, state.connections.active?.id)).join('')}
     </div>
   `;
 }
 
 export function renderConnectionsView(state) {
+    const visibleConnections = filterConnections(state.connections.recent, {
+        searchQuery: state.connections.searchQuery,
+        selectedTagIds: state.connections.selectedTagIds,
+    });
     const actions = `
     ${
         state.connections.active
             ? renderConnectionsActionButton({
-                  label: state.connections.backupLoading ? 'Creating Backup...' : 'Create Backup',
+                  label: state.connections.backupLoading ? 'Create Backup...' : 'CreateBackup',
                   icon: 'inventory_2',
                   action: 'create-backup',
                   disabled: state.connections.backupLoading,
@@ -122,7 +216,8 @@ export function renderConnectionsView(state) {
               subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, '0')}`,
               actions,
           })}
-          ${renderConnectionsBody(state)}
+          ${renderConnectionsToolbar(state, visibleConnections.length)}
+          ${renderConnectionsBody(state, visibleConnections)}
         </div>
       </section>
     `,

package/frontend/js/views/data.js

@@ -1,5 +1,6 @@
 import { renderDataGrid } from '../components/dataGrid.js';
 import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
 import { detectEmailValue } from '../utils/emailPreview.js';
@@ -31,6 +32,33 @@ function getFilteredTables(tables, searchQuery) {
     return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
 }
 
+export function buildDataSidebarSignature(state) {
+    if (state?.route?.name !== 'data') {
+        return '';
+    }
+
+    const dataBrowser = state.dataBrowser ?? {};
+    const tablesVisible = dataBrowser.tablesVisible !== false;
+
+    if (!tablesVisible) {
+        return 'data-sidebar:hidden';
+    }
+
+    const tables = dataBrowser.tables ?? [];
+
+    return JSON.stringify({
+        loadingEmpty: Boolean(dataBrowser.loading && !tables.length),
+        tableSearchQuery: dataBrowser.tableSearchQuery ?? '',
+        tables: tables.map(table => [
+            table.name,
+            table.columnCount ?? 0,
+            Boolean(table.isVirtual),
+            Boolean(table.isShadow),
+            table.tableKind ?? '',
+        ]),
+    });
+}
+
 function renderDataTableSearch(state) {
     return `
       <label class="table-designer-sidebar__search">
@@ -91,11 +119,18 @@ function renderTableList(state) {
                       : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
               }"
               data-action="navigate"
+              data-data-table-item
+              data-data-table-name="${escapeHtml(table.name)}"
               data-to="/data/${encodeURIComponent(table.name)}"
               type="button"
             >
-              <div class="table-designer-sidebar__item-name ${table.name === activeName ? 'is-active' : ''}">
-                ${escapeHtml(table.name)}
+              <div class="flex min-w-0 items-center gap-2">
+                <div class="table-designer-sidebar__item-name min-w-0 flex-1 ${
+                    table.name === activeName ? 'is-active' : ''
+                }" data-data-table-name-label>
+                  ${escapeHtml(table.name)}
+                </div>
+                ${renderVirtualTableBadge(table)}
               </div>
               <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
                 ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
@@ -113,6 +148,12 @@ function renderTableList(state) {
 function renderWorkspaceHeader(state) {
     const table = state.dataBrowser.table;
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
+    const generateDisabled = !table || table.isShadow;
+    const generateTitle = !table
+        ? 'Select a table before generating rows'
+        : table.isShadow
+          ? 'Shadow tables are read-only in Data'
+          : 'Generate synthetic test rows for this table';
 
     return `
     <header class="workspace-header">
@@ -140,9 +181,9 @@ function renderWorkspaceHeader(state) {
           <button
             class="standard-button"
             data-action="open-generate-data-modal"
-            title="${table ? 'Generate synthetic test rows for this table' : 'Select a table before generating rows'}"
+            title="${escapeHtml(generateTitle)}"
             type="button"
-            ${table ? '' : 'disabled aria-disabled="true"'}
+            ${generateDisabled ? 'disabled aria-disabled="true"' : ''}
           >
             <span class="material-symbols-outlined text-sm">auto_awesome</span>
             Generate
@@ -628,6 +669,8 @@ export function renderDataRowEditorPanel(state) {
             : [{ name: 'rowIdentity', value: JSON.stringify(row.__identity ?? null) }],
         disabledMessage: state.connections.active?.readOnly
             ? 'The active database is opened read-only, so row editing is disabled.'
+            : table.isShadow
+              ? 'Shadow tables are read-only in Data.'
             : table.notSafelyUpdatable
               ? 'This table has no stable identity column, so SQLite Hub cannot safely update rows.'
               : '',
@@ -663,7 +706,7 @@ export function renderDataRowEditorPanel(state) {
         deleting: state.dataBrowser.deleting,
         deleteAction: 'delete-data-row',
         deleteRowIndex: isIndexedRow ? rowIndex : null,
-        deleteEnabled: Boolean(row.__identity),
+        deleteEnabled: Boolean(row.__identity) && !table.isShadow,
         reloadAction: 'reload-data-route',
         jsonActionsEnabled: true,
     });
@@ -674,12 +717,12 @@ export function renderDataView(state) {
 
     return {
         main: `
-      <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="data-view-grid ${tablesVisible ? 'data-view-grid--with-subnavi' : ''}">
+      <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden" data-data-view>
+        <div class="data-view-grid ${tablesVisible ? 'data-view-grid--with-subnavi' : ''}" data-data-view-grid>
           ${
               tablesVisible
                   ? `
-                    <aside class="data-view__sidebar subnavi-panel">
+                    <aside class="data-view__sidebar subnavi-panel" data-data-sidebar>
                       <div class="subnavi-header">
                         <div>
                           <div class="subnavi-header-title">Tables</div>
@@ -694,7 +737,7 @@ export function renderDataView(state) {
                   `
                   : ''
           }
-          <section class="flex min-h-0 flex-col overflow-hidden">
+          <section class="flex min-h-0 flex-col overflow-hidden" data-data-workspace>
             ${renderWorkspaceHeader(state)}
             ${renderWorkspaceError(state)}
             ${renderTableSurface(state)}

package/frontend/js/views/documents.js

@@ -35,7 +35,7 @@ function renderDocumentListItem(item, selectedId) {
           <span class="documents-list-item__title" title="${escapeHtml(item.filename)}">
             ${escapeHtml(item.filename)}
           </span>
-          <span class="documents-list-item__meta">
+          <span class="documents-list-item__meta" data-document-list-meta>
             ${escapeHtml(formatCompactDateTime(item.updatedAt))} // ${formatNumber(item.contentLength ?? 0)} chars
           </span>
         </span>
@@ -77,7 +77,45 @@ function renderDocumentsSearch(documents) {
 
 function renderDocumentsSidebar(documents) {
     const items = documents.items ?? [];
+    const folders = documents.folders ?? [];
     const filteredItems = getFilteredDocuments(items, documents.searchQuery);
+    const searchActive = Boolean(String(documents.searchQuery ?? '').trim());
+    const rootItems = filteredItems.filter(item => !item.folderId);
+    const renderFolderGroup = (label, groupItems, options = {}) => {
+        if (searchActive && !groupItems.length) {
+            return '';
+        }
+
+        return `
+          <div class="documents-folder-group">
+            <div class="px-3 pb-1 pt-3 text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/55">
+              ${escapeHtml(label)}
+            </div>
+            ${
+                groupItems.length
+                    ? groupItems.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
+                    : `<div class="documents-list-empty">${escapeHtml(options.emptyText ?? 'No documents')}</div>`
+            }
+          </div>
+        `;
+    };
+    const folderGroups = folders
+        .map(folder =>
+            renderFolderGroup(
+                folder.name,
+                filteredItems.filter(item => String(item.folderId ?? '') === String(folder.id)),
+                { emptyText: 'Empty folder' },
+            ),
+        )
+        .join('');
+    const rootGroup = renderFolderGroup('No Folder', rootItems, {
+        emptyText: folders.length ? 'No root documents' : 'No documents yet',
+    });
+    const listMarkup = rootGroup || folderGroups
+        ? `${rootGroup}${folderGroups}`
+        : `<div class="documents-list-empty">${
+              items.length ? 'No documents match the current search.' : 'No documents yet'
+          }</div>`;
 
     return `
       <aside class="documents-view__sidebar subnavi-panel">
@@ -89,13 +127,7 @@ function renderDocumentsSidebar(documents) {
         </div>
         ${renderDocumentsSearch(documents)}
         <div class="documents-view__sidebar-body subnavi-list custom-scrollbar">
-          ${
-              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>`
-          }
+          ${listMarkup}
         </div>
       </aside>
     `;
@@ -118,18 +150,18 @@ function renderNewDocumentDropdown(documents, className = '') {
         ${renderDropdownButton({
             disabled: documents.saving,
             icon: 'add',
-            label: 'New Document',
-            title: 'New document',
+            label: 'New',
+            title: 'New',
             items: [
                 {
                     action: 'create-document',
                     icon: 'draft',
-                    label: 'Blank Page',
+                    label: 'New Document',
                 },
                 {
-                    action: 'import-document-markdown',
-                    icon: 'upload_file',
-                    label: 'Import .md',
+                    action: 'open-create-document-folder-modal',
+                    icon: 'create_new_folder',
+                    label: 'New Folder',
                 },
             ],
         })}
@@ -137,40 +169,86 @@ function renderNewDocumentDropdown(documents, className = '') {
     `;
 }
 
-function renderDocumentsPanelToggle(documents) {
-    const visible = documents.documentsVisible !== false;
+function renderDocumentsViewDropdown(documents) {
+    const documentsVisible = documents.documentsVisible !== false;
+    const editorVisible = documents.editorVisible !== false;
+    const previewVisible = documents.previewVisible !== 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>
-    `;
+    return renderDropdownButton({
+        icon: 'visibility',
+        label: 'View',
+        title: 'View options',
+        items: [
+            {
+                action: 'toggle-document-pane',
+                dataAttributes: { pane: 'editor' },
+                icon: editorVisible ? 'visibility_off' : 'edit_note',
+                label: `${editorVisible ? 'Hide' : 'Show'} Editor`,
+            },
+            {
+                action: 'toggle-document-pane',
+                dataAttributes: { pane: 'preview' },
+                icon: previewVisible ? 'visibility_off' : 'visibility',
+                label: `${previewVisible ? 'Hide' : 'Show'} Preview`,
+            },
+            {
+                action: 'toggle-documents-panel',
+                icon: documentsVisible ? 'visibility_off' : 'description',
+                label: `${documentsVisible ? 'Hide' : 'Show'} Documents`,
+            },
+        ],
+    });
 }
 
-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';
+function renderDocumentsFileDropdown(documents) {
+    const exportDisabled = documents.saving || documents.detailLoading || !documents.selectedId;
 
-    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>
-    `;
+    return renderDropdownButton({
+        disabled: documents.saving,
+        icon: 'folder_open',
+        label: 'File',
+        title: 'File actions',
+        items: [
+            {
+                action: 'import-document-markdown',
+                icon: 'upload_file',
+                label: 'Import MD',
+            },
+            {
+                action: 'export-document-markdown',
+                disabled: exportDisabled,
+                icon: 'download',
+                label: 'Export MD',
+            },
+        ],
+    });
+}
+
+function renderDocumentsMoveDropdown(documents) {
+    const folders = documents.folders ?? [];
+    const selectedFolderId = String(documents.selected?.folderId ?? '');
+
+    return renderDropdownButton({
+        disabled: documents.saving || documents.detailLoading || !documents.selectedId,
+        icon: 'drive_file_move',
+        label: 'Move to',
+        title: 'Move document to folder',
+        items: [
+            {
+                action: 'move-document-to-folder',
+                disabled: !selectedFolderId,
+                icon: 'folder_off',
+                label: 'No Folder',
+            },
+            ...folders.map(folder => ({
+                action: 'move-document-to-folder',
+                dataAttributes: { folderId: folder.id },
+                disabled: selectedFolderId === String(folder.id),
+                icon: 'folder',
+                label: folder.name,
+            })),
+        ],
+    });
 }
 
 function renderDocumentsTitlebar(documents, options = {}) {
@@ -179,7 +257,6 @@ function renderDocumentsTitlebar(documents, options = {}) {
 
     return `
       <div class="documents-titlebar">
-        ${renderDocumentsPanelToggle(documents)}
         ${
             showFilename
                 ? `
@@ -216,19 +293,33 @@ function renderDocumentsTitlebar(documents, options = {}) {
                           {
                               action: 'open-document-insert-note-modal',
                               icon: 'note_add',
-                              label: 'Insert Note',
+                              label: 'Insert Query Note',
+                          },
+                          {
+                              action: 'open-document-insert-table-definition-modal',
+                              icon: 'schema',
+                              label: 'Insert Table Definition',
+                          },
+                          {
+                              action: 'insert-document-saved-queries',
+                              icon: 'bookmark',
+                              label: 'Insert Saved Queries',
+                          },
+                          {
+                              action: 'insert-document-time-metadata',
+                              icon: 'schedule',
+                              label: 'Insert Time Metadata',
+                          },
+                          {
+                              action: 'insert-document-database-info',
+                              icon: 'database',
+                              label: 'Insert Database Info',
                           },
                       ],
                   })}
-                  <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>
+                  ${renderDocumentsViewDropdown(documents)}
+                  ${renderDocumentsFileDropdown(documents)}
+                  ${renderDocumentsMoveDropdown(documents)}
                   <button
                     class="delete-button"
                     data-action="delete-document"
@@ -239,7 +330,10 @@ function renderDocumentsTitlebar(documents, options = {}) {
                     Delete
                   </button>
                 `
-                : ''
+                : `
+                  ${renderDocumentsViewDropdown(documents)}
+                  ${renderDocumentsFileDropdown(documents)}
+                `
         }
       </div>
     `;
@@ -249,7 +343,6 @@ function renderDocumentEditor(documents) {
     return `
       <section class="documents-pane documents-pane--editor ${documents.editorVisible ? '' : 'documents-pane--collapsed'}">
         <div class="documents-pane__header">
-          ${renderDocumentPaneToggle(documents, 'editor')}
           <span class="documents-pane__meta">${formatNumber(documents.draftContent.length)} chars</span>
         </div>
         ${
@@ -271,11 +364,12 @@ function renderDocumentEditor(documents) {
 }
 
 function renderDocumentPreview(documents) {
+    const saveState = documents.dirty ? 'unsaved' : 'saved';
+
     return `
       <section class="documents-pane documents-pane--preview ${documents.previewVisible ? '' : 'documents-pane--collapsed'}">
         <div class="documents-pane__header">
-          ${renderDocumentPaneToggle(documents, 'preview')}
-          <span class="documents-pane__meta">${escapeHtml(documents.dirty ? 'unsaved' : 'saved')}</span>
+          <span class="documents-pane__meta" data-document-save-state="${saveState}">${escapeHtml(saveState)}</span>
         </div>
         ${
             documents.previewVisible