sqlite-hub 2.0.1 → 2.1.0

package/frontend/js/app.js

@@ -35,6 +35,7 @@ import {
     clearEditorRowSelection,
     clearEditorResults,
     clearQueryHistorySelection,
+    clearConnectionTagFilters,
     closeModal,
     checkSettingsAppVersion,
     dismissMediaTaggingIssue,
@@ -97,12 +98,21 @@ import {
     selectQueryHistoryItem,
     selectStructureEntry,
     setDocumentsSearchQuery,
+    setConnectionSearchQuery,
     setLogFilter,
     setLogSearchInput,
     applyLogSearch,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
     toggleTableDesignerTablesPanel,
+    openTableDesignerConstraintsDrawer,
+    closeTableDesignerConstraintsDrawer,
+    startTableDesignerCheckEditor,
+    cancelTableDesignerCheckEditor,
+    applyTableDesignerCheckPreset,
+    updateTableDesignerCheckEditorField,
+    saveTableDesignerCheckEditor,
+    removeCurrentTableDesignerCheckConstraint,
     setDataTableSearchQuery,
     setStructureTableSearchQuery,
     toggleStructureTablesPanel,
@@ -156,7 +166,7 @@ import {
     toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
-    queueTableDesignerCsvImport,
+    queueTableDesignerImport,
     showToast,
     storeCopyColumnPreferences,
     submitCreateConnection,
@@ -167,7 +177,9 @@ import {
     submitOpenConnection,
     subscribe,
     toggleCurrentMediaTagSelection,
+    toggleConnectionTagFilter,
     toggleQueryHistorySavedState,
+    addEditConnectionTag,
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
     updateCopyColumnModalFormatField,
@@ -181,6 +193,8 @@ import {
     updateGenerateDataMapping,
     updateGenerateDataModal,
     updateGenerateTypesModal,
+    updateEditConnectionTagQuery,
+    removeEditConnectionTag,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
@@ -271,6 +285,20 @@ let pendingDocumentAutosaveId = null;
 const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
 
 const APP_TITLE = 'SQLite Hub';
+const TABLE_DESIGNER_IMPORT_FORMATS = {
+    csv: {
+        accept: '.csv,text/csv',
+        label: 'CSV',
+    },
+    tsv: {
+        accept: '.tsv,text/tab-separated-values',
+        label: 'TSV',
+    },
+    json: {
+        accept: '.json,application/json',
+        label: 'JSON',
+    },
+};
 const ROUTE_TITLE_SEGMENTS = {
     connections: 'Connections',
     backups: 'Backups',
@@ -575,6 +603,28 @@ function syncTableDesignerDraftUi(sourceNode) {
     return synced;
 }
 
+function normalizeCheckExpressionPreview(expression) {
+    const normalized = String(expression ?? '').trim();
+
+    if (!normalized) {
+        return 'CHECK (...)';
+    }
+
+    return /^CHECK\s*\(/i.test(normalized) ? normalized : `CHECK (${normalized})`;
+}
+
+function syncTableDesignerCheckEditorPreview(sourceNode) {
+    const drawerNode = sourceNode.closest('.table-designer-check-drawer');
+    const previewNode = drawerNode?.querySelector('[data-table-designer-check-preview]');
+
+    if (!(previewNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    replaceChildrenFromRenderedMarkup(previewNode, highlightSql(normalizeCheckExpressionPreview(sourceNode.value)));
+    return true;
+}
+
 function syncDataRowSelectionUi(selectedRowIndex = null) {
     if (getState().route.name !== 'data') {
         return false;
@@ -1417,11 +1467,18 @@ async function applyMediaTaggingAndFocusSearch() {
     return result;
 }
 
-async function handleTableDesignerCsvImport(fileInput) {
+function normalizeTableDesignerImportFormat(value) {
+    const normalized = String(value ?? '').trim().toLowerCase();
+    return Object.prototype.hasOwnProperty.call(TABLE_DESIGNER_IMPORT_FORMATS, normalized) ? normalized : 'csv';
+}
+
+async function handleTableDesignerImport(fileInput) {
     if (!(fileInput instanceof HTMLInputElement)) {
         return;
     }
 
+    const format = normalizeTableDesignerImportFormat(fileInput.dataset.importFormat);
+    const formatLabel = TABLE_DESIGNER_IMPORT_FORMATS[format].label;
     const file = fileInput.files?.[0];
 
     if (!(file instanceof File)) {
@@ -1429,14 +1486,14 @@ async function handleTableDesignerCsvImport(fileInput) {
     }
 
     if (!file.size) {
-        showToast('The selected CSV file is empty.', 'alert');
+        showToast(`The selected ${formatLabel} file is empty.`, 'alert');
         fileInput.value = '';
         return;
     }
 
     try {
-        const csvText = await readFileAsText(file);
-        const imported = queueTableDesignerCsvImport(file.name, csvText);
+        const text = await readFileAsText(file);
+        const imported = queueTableDesignerImport(file.name, text, { format });
 
         if (!imported) {
             return;
@@ -1450,7 +1507,7 @@ async function handleTableDesignerCsvImport(fileInput) {
             'success',
         );
     } catch (error) {
-        showToast(error?.message || 'CSV import failed.', 'alert');
+        showToast(error?.message || `${formatLabel} import failed.`, 'alert');
     } finally {
         fileInput.value = '';
     }
@@ -2680,6 +2737,16 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'clear-connection-tag-filters':
+            clearConnectionTagFilters();
+            return;
+        case 'add-edit-connection-tag':
+        case 'create-edit-connection-tag':
+            addEditConnectionTag(actionNode.dataset.tagName);
+            return;
+        case 'remove-edit-connection-tag':
+            removeEditConnectionTag(actionNode.dataset.tagName);
+            return;
         case 'choose-open-database-path': {
             const labelNode = actionNode.querySelector('[data-open-database-path-button-label]');
 
@@ -3063,6 +3130,30 @@ async function handleAction(actionNode) {
                 removeCurrentTableDesignerColumn(actionNode.dataset.columnId);
             }
             return;
+        case 'open-table-designer-constraints':
+            openTableDesignerConstraintsDrawer(actionNode.dataset.columnId, actionNode.dataset.columnName);
+            return;
+        case 'close-table-designer-constraints':
+            closeTableDesignerConstraintsDrawer();
+            return;
+        case 'start-table-designer-check-editor':
+            startTableDesignerCheckEditor();
+            return;
+        case 'edit-table-designer-check':
+            startTableDesignerCheckEditor(actionNode.dataset.constraintId);
+            return;
+        case 'cancel-table-designer-check-editor':
+            cancelTableDesignerCheckEditor();
+            return;
+        case 'apply-table-designer-check-preset':
+            applyTableDesignerCheckPreset(actionNode.dataset.presetId);
+            return;
+        case 'save-table-designer-check':
+            await saveTableDesignerCheckEditor();
+            return;
+        case 'remove-table-designer-check':
+            removeCurrentTableDesignerCheckConstraint(actionNode.dataset.constraintId);
+            return;
         case 'save-table-designer': {
             const savedTableName = await saveCurrentTableDesignerDraft();
             if (savedTableName) {
@@ -3186,14 +3277,20 @@ async function handleAction(actionNode) {
             router.navigate(`/structure/${encodeURIComponent(mediaTableName)}`);
             return;
         }
-        case 'import-table-designer-csv': {
+        case 'import-table-designer-data': {
             const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
 
             if (!(fileInput instanceof HTMLInputElement)) {
                 return;
             }
 
+            const format = normalizeTableDesignerImportFormat(actionNode.dataset.importFormat);
+            const formatOptions = TABLE_DESIGNER_IMPORT_FORMATS[format];
+
+            fileInput.dataset.importFormat = format;
+            fileInput.accept = actionNode.dataset.importAccept || formatOptions.accept;
             fileInput.value = '';
+            actionNode.closest('[data-dropdown-button]')?.removeAttribute('open');
             fileInput.click();
             return;
         }
@@ -3256,6 +3353,35 @@ function canApplyMediaTaggingShortcut(state) {
     );
 }
 
+function isEditableShortcutTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+
+    if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+    ) {
+        return true;
+    }
+
+    if (target.isContentEditable) {
+        return true;
+    }
+
+    if (
+        target.closest(
+            '[contenteditable="true"], [data-bind="current-query"], [data-sql-highlight="true"], .query-editor-input',
+        )
+    ) {
+        return true;
+    }
+
+    const role = String(target.getAttribute('role') ?? '').trim().toLowerCase();
+    return role === 'textbox' || role === 'searchbox' || role === 'combobox';
+}
+
 document.addEventListener('click', event => {
     const target = event.target instanceof Element ? event.target : null;
 
@@ -3340,6 +3466,27 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (
+        event.key === '/' &&
+        !event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.defaultPrevented &&
+        state.route.name === 'connections' &&
+        !isEditableShortcutTarget(target)
+    ) {
+        const searchInput = document.querySelector('[data-connections-search-input]');
+
+        if (searchInput instanceof HTMLInputElement) {
+            event.preventDefault();
+            searchInput.focus({ preventScroll: true });
+            searchInput.select();
+        }
+
+        return;
+    }
+
     // Handle Enter key in tag form fields to trigger create tag
     if (
         event.key === 'Enter' &&
@@ -3359,6 +3506,34 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (
+        event.key === 'Enter' &&
+        !event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.defaultPrevented &&
+        target instanceof HTMLElement &&
+        target.dataset.bind === 'edit-connection-tag-query'
+    ) {
+        event.preventDefault();
+        const tagQuery = target instanceof HTMLInputElement ? target.value.trim() : '';
+
+        if (!tagQuery) {
+            return;
+        }
+
+        const primaryTagAction =
+            document.querySelector('[data-edit-connection-tag-primary]') ??
+            document.querySelector('[data-action="add-edit-connection-tag"]');
+
+        if (primaryTagAction instanceof HTMLElement) {
+            primaryTagAction.click();
+        }
+
+        return;
+    }
+
     if (
         (event.key === 'Enter' || event.code === 'Enter' || event.code === 'NumpadEnter') &&
         event.shiftKey &&
@@ -3396,6 +3571,16 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (target instanceof HTMLInputElement && target.dataset.bind === 'connections-search') {
+        event.preventDefault();
+
+        if (!clearInputForEscape(target)) {
+            target.blur();
+        }
+
+        return;
+    }
+
     if (target instanceof HTMLInputElement && clearInputForEscape(target)) {
         event.preventDefault();
         return;
@@ -3425,6 +3610,12 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (state.route.name === 'tableDesigner' && state.tableDesigner.constraintsDrawer?.visible) {
+        event.preventDefault();
+        closeTableDesignerConstraintsDrawer();
+        return;
+    }
+
     if (state.route.name === 'charts' && state.charts.detailPanelVisible) {
         event.preventDefault();
         setChartsDetailPanelVisibility(false);
@@ -3538,6 +3729,16 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'connections-search') {
+        setConnectionSearchQuery(bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'edit-connection-tag-query') {
+        updateEditConnectionTagQuery(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -3563,6 +3764,20 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'table-designer-check-editor-field') {
+        const field = bindNode.dataset.field;
+        const value = bindNode instanceof HTMLInputElement || bindNode instanceof HTMLTextAreaElement ? bindNode.value : '';
+        const isCustomExpression = field === 'expression';
+
+        updateTableDesignerCheckEditorField(field, value, { notify: !isCustomExpression });
+
+        if (isCustomExpression) {
+            syncTableDesignerCheckEditorPreview(bindNode);
+        }
+
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-field') {
         if (
             (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') ||
@@ -3709,6 +3924,12 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'connection-tag-filter') {
+        const nextValue = bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox' ? bindNode.checked : false;
+        toggleConnectionTagFilter(bindNode.dataset.tagId, nextValue);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'media-tagging-field') {
         updateCurrentMediaTaggingField(bindNode.dataset.field, bindNode.value);
         void refreshMediaTaggingPreview();
@@ -3731,7 +3952,15 @@ document.addEventListener('change', event => {
     }
 
     if (bindNode.dataset.bind === 'table-designer-import-file') {
-        void handleTableDesignerCsvImport(bindNode);
+        void handleTableDesignerImport(bindNode);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'table-designer-check-editor-field') {
+        const value = bindNode instanceof HTMLInputElement || bindNode instanceof HTMLTextAreaElement ? bindNode.value : '';
+
+        updateTableDesignerCheckEditorField(bindNode.dataset.field, value, { notify: false });
+        syncTableDesignerCheckEditorPreview(bindNode);
         return;
     }
 
@@ -3913,6 +4142,7 @@ document.addEventListener('submit', async event => {
                 readOnly: formData.get('readOnly') === 'on',
                 clearLogo: formData.get('clearLogo') === 'on' && !logoUpload,
                 logoUpload,
+                tags: formData.getAll('tags').map(value => String(value ?? '')),
             });
 
             return;

package/frontend/js/components/badges.js

@@ -3,3 +3,19 @@ import { escapeHtml } from "../utils/format.js";
 export function renderStatusBadge(label, tone = "muted") {
   return `<span class="status-badge status-badge--${tone}">${escapeHtml(label)}</span>`;
 }
+
+export function renderTableKindBadge(table) {
+  if (table?.isVirtual) {
+    return `<span class="status-badge status-badge--primary shrink-0" title="Virtual table">Virtual</span>`;
+  }
+
+  if (table?.isShadow) {
+    return `<span class="status-badge status-badge--muted shrink-0" title="Shadow table">Shadow</span>`;
+  }
+
+  return "";
+}
+
+export function renderVirtualTableBadge(table) {
+  return renderTableKindBadge(table);
+}

package/frontend/js/components/connectionCard.js

@@ -7,6 +7,40 @@ import {
 import { renderStatusBadge } from "./badges.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 
+function renderConnectionTags(tags = []) {
+  const normalizedTags = Array.isArray(tags)
+    ? tags.filter((tag) => String(tag?.name ?? "").trim())
+    : [];
+
+  if (!normalizedTags.length) {
+    return "";
+  }
+
+  const visibleTags = normalizedTags.slice(0, 2);
+  const hiddenCount = Math.max(0, normalizedTags.length - visibleTags.length);
+  const title = normalizedTags.map((tag) => tag.name).join(", ");
+
+  return [
+    '<div class="connection-user-tags" title="',
+    escapeHtml(title),
+    '">',
+    visibleTags
+      .map(
+        (tag) =>
+          '<span class="connection-user-tag">' +
+          escapeHtml(tag.name) +
+          "</span>"
+      )
+      .join(""),
+    hiddenCount
+      ? '<span class="connection-user-tag connection-user-tag--more">+' +
+        escapeHtml(String(hiddenCount)) +
+        "</span>"
+      : "",
+    "</div>",
+  ].join("");
+}
+
 export function renderConnectionCard(connection, activeConnectionId) {
   const isActive = activeConnectionId
     ? connection.id === activeConnectionId
@@ -46,6 +80,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
     '">',
     escapeHtml(truncateMiddle(connection.path, 68)),
     "</p>",
+    renderConnectionTags(connection.tags),
     '<div class="mt-8 grid grid-cols-2 gap-4">',
     '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div><div class="text-xs font-bold text-on-surface">',
     escapeHtml(formatBytes(connection.sizeBytes)),