sqlite-hub 2.1.0 → 2.2.0

package/frontend/js/utils/markdownDocuments.js

@@ -2,6 +2,8 @@ import { escapeHtml } from './format.js';
 
 const FENCED_CODE_PATTERN = /^\s*(```|~~~)/;
 const TASK_LINE_PATTERN = /^(\s*)([-*+])\s+\[([ xX])\]\s+(.*?)(\r?)$/;
+const SQLITE_HUB_MAGIC_COMMENT_PATTERN =
+    /^\s*<!--\s*\/?sqlite-hub:magic(?:\s+[^>]*)?-->\s*$/i;
 
 function decodeBasicHtmlEntities(value = '') {
     return String(value)
@@ -26,6 +28,15 @@ function sanitizeRenderedMarkdown(html = '') {
     });
 }
 
+function openRenderedMarkdownLinksInNewTabs(html = '') {
+    return String(html).replace(/<a\b([^>]*)>/gi, (match, attributes = '') => {
+        const targetAttribute = /\starget\s*=/i.test(attributes) ? '' : ' target="_blank"';
+        const relAttribute = /\srel\s*=/i.test(attributes) ? '' : ' rel="noopener noreferrer"';
+
+        return `<a${attributes}${targetAttribute}${relAttribute}>`;
+    });
+}
+
 function renderFallbackMarkdown(markdown = '') {
     const lines = String(markdown).split(/\r?\n/);
     const html = [];
@@ -108,13 +119,13 @@ function renderMarkdownBlock(markdown = '') {
         return renderFallbackMarkdown(markdown);
     }
 
-    return sanitizeRenderedMarkdown(
+    return openRenderedMarkdownLinksInNewTabs(sanitizeRenderedMarkdown(
         parser(source, {
             async: false,
             breaks: false,
             gfm: true,
         }),
-    );
+    ));
 }
 
 function renderMarkdownInline(markdown = '') {
@@ -127,13 +138,13 @@ function renderMarkdownInline(markdown = '') {
         return source;
     }
 
-    return sanitizeRenderedMarkdown(
+    return openRenderedMarkdownLinksInNewTabs(sanitizeRenderedMarkdown(
         parser(source, {
             async: false,
             breaks: false,
             gfm: true,
         }),
-    );
+    ));
 }
 
 function renderTaskList(items = []) {
@@ -193,6 +204,12 @@ export function renderMarkdownPreview(markdown = '') {
     };
 
     lines.forEach((line, lineIndex) => {
+        if (!inFence && SQLITE_HUB_MAGIC_COMMENT_PATTERN.test(line)) {
+            flushTasks();
+            flushMarkdown();
+            return;
+        }
+
         const fenceLine = FENCED_CODE_PATTERN.test(line);
 
         if (fenceLine) {

package/frontend/js/views/connections.js

@@ -1,10 +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';
+import { filterConnections, getConnectionTagCounts } from '../utils/connectionRegistry.js';
 
 function renderConnectionsActionButton({
     label,
@@ -175,9 +172,7 @@ function renderConnectionsBody(state, visibleConnections) {
 
     return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-      ${visibleConnections
-          .map(connection => renderConnectionCard(connection, state.connections.active?.id))
-          .join('')}
+      ${visibleConnections.map(connection => renderConnectionCard(connection, state.connections.active?.id)).join('')}
     </div>
   `;
 }
@@ -191,7 +186,7 @@ export function renderConnectionsView(state) {
     ${
         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,

package/frontend/js/views/data.js

@@ -32,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">
@@ -92,13 +119,15 @@ 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="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)}
@@ -688,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>
@@ -708,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

package/frontend/styles/base.css

@@ -70,6 +70,15 @@ textarea:disabled {
     padding: 0 var(--control-padding-inline);
 }
 
+.control-input:focus,
+.control-input:focus-visible,
+.control-select:focus,
+.control-select:focus-visible {
+    border-color: var(--color-primary-container);
+    box-shadow: none;
+    outline: none;
+}
+
 input.control-input--ghost {
     appearance: none;
     background: transparent;