sqlite-hub 2.0.1 → 2.2.0

package/frontend/js/app.js

@@ -35,6 +35,7 @@ import {
     clearEditorRowSelection,
     clearEditorResults,
     clearQueryHistorySelection,
+    clearConnectionTagFilters,
     closeModal,
     checkSettingsAppVersion,
     dismissMediaTaggingIssue,
@@ -46,6 +47,9 @@ import {
     exportCurrentQueryFormat,
     getState,
     initializeApp,
+    insertCurrentDocumentDatabaseInfo,
+    insertCurrentDocumentSavedQueries,
+    insertCurrentDocumentTimeMetadata,
     insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
     loadMoreLogs,
@@ -66,6 +70,7 @@ import {
     openDeleteQueryChartModal,
     openDataExportModal,
     openGenerateDataModal,
+    openCreateDocumentFolderModal,
     openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
@@ -75,6 +80,7 @@ import {
     openEditQueryChartModal,
     openDocumentInsertNoteModal,
     openDocumentInsertTableModal,
+    openDocumentInsertTableDefinitionModal,
     preserveCurrentDataRowSelectionForReload,
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
@@ -97,12 +103,21 @@ import {
     selectQueryHistoryItem,
     selectStructureEntry,
     setDocumentsSearchQuery,
+    setConnectionSearchQuery,
     setLogFilter,
     setLogSearchInput,
     applyLogSearch,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
     toggleTableDesignerTablesPanel,
+    openTableDesignerConstraintsDrawer,
+    closeTableDesignerConstraintsDrawer,
+    startTableDesignerCheckEditor,
+    cancelTableDesignerCheckEditor,
+    applyTableDesignerCheckPreset,
+    updateTableDesignerCheckEditorField,
+    saveTableDesignerCheckEditor,
+    removeCurrentTableDesignerCheckConstraint,
     setDataTableSearchQuery,
     setStructureTableSearchQuery,
     toggleStructureTablesPanel,
@@ -125,6 +140,8 @@ import {
     submitDeleteDocumentConfirmation,
     submitDocumentInsertNote,
     submitDocumentInsertTable,
+    submitDocumentInsertTableDefinition,
+    submitCreateDocumentFolder,
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
@@ -156,22 +173,28 @@ import {
     toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
-    queueTableDesignerCsvImport,
+    queueTableDesignerImport,
     showToast,
     storeCopyColumnPreferences,
     submitCreateConnection,
     createCurrentMediaTag,
+    moveCurrentDocumentToFolder,
     submitDeleteRowConfirmation,
     submitEditConnection,
     submitImportSql,
     submitOpenConnection,
     subscribe,
     toggleCurrentMediaTagSelection,
+    toggleConnectionTagFilter,
     toggleQueryHistorySavedState,
+    addEditConnectionTag,
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
     updateCopyColumnModalFormatField,
     updateCurrentDocumentDraftField,
+    updateDocumentTableDefinitionOption,
+    updateDocumentTableDefinitionSampleRowCount,
+    updateDocumentTableDefinitionSelection,
     updateDocumentInsertQuerySelection,
     updateCurrentQueryChartDraftConfigField,
     updateCurrentQueryChartDraftField,
@@ -181,6 +204,8 @@ import {
     updateGenerateDataMapping,
     updateGenerateDataModal,
     updateGenerateTypesModal,
+    updateEditConnectionTagQuery,
+    removeEditConnectionTag,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
@@ -188,7 +213,7 @@ import {
 import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderBackupsView } from './views/backups.js';
 import { renderConnectionsView } from './views/connections.js';
-import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
+import { buildDataSidebarSignature, renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
@@ -260,6 +285,7 @@ let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
 let lastRenderedChartsDetailSignature = '';
 let lastRenderedChartsCardSignature = '';
+let lastRenderedDataSidebarSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
@@ -267,10 +293,25 @@ let pendingQueryEditorFocus = false;
 let pendingMediaTaggingTagSearchFocus = false;
 let documentAutosaveTimer = null;
 let pendingDocumentAutosaveId = null;
+let lastDocumentEditorInsertionRange = null;
 
-const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
+const DOCUMENT_AUTOSAVE_DELAY_MS = 2000;
 
 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 +616,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;
@@ -600,6 +663,81 @@ function syncDataRowSelectionUi(selectedRowIndex = null) {
     return true;
 }
 
+function syncDataSidebarActiveTable(state) {
+    if (state.route.name !== 'data') {
+        return false;
+    }
+
+    const sidebarNode = shellRefs.view.querySelector('[data-data-sidebar]');
+
+    if (!(sidebarNode instanceof HTMLElement)) {
+        return state.dataBrowser.tablesVisible === false;
+    }
+
+    const selectedTableName = String(state.dataBrowser.selectedTable ?? '');
+
+    for (const itemNode of sidebarNode.querySelectorAll('[data-data-table-item]')) {
+        if (!(itemNode instanceof HTMLElement)) {
+            continue;
+        }
+
+        const isActive = itemNode.dataset.dataTableName === selectedTableName;
+
+        itemNode.classList.toggle('is-active', isActive);
+        itemNode.classList.toggle('border-primary-container/30', isActive);
+        itemNode.classList.toggle('bg-surface-container-high', isActive);
+        itemNode.classList.toggle('border-outline-variant/10', !isActive);
+        itemNode.classList.toggle('bg-surface-container-lowest', !isActive);
+        itemNode.classList.toggle('hover:bg-surface-container-high', !isActive);
+
+        const labelNode = itemNode.querySelector('[data-data-table-name-label]');
+
+        if (labelNode instanceof HTMLElement) {
+            labelNode.classList.toggle('is-active', isActive);
+        }
+    }
+
+    return true;
+}
+
+function renderDataMainIntoScratch(state) {
+    const scratch = document.createElement('div');
+
+    replaceChildrenFromRenderedMarkup(scratch, renderDataView(state).main);
+    return scratch;
+}
+
+function patchDataMainUi(state, { tableHorizontalScrollState = null } = {}) {
+    const dataView = shellRefs.view.querySelector('[data-data-view]');
+
+    if (!(dataView instanceof HTMLElement)) {
+        return false;
+    }
+
+    const currentWorkspace = dataView.querySelector('[data-data-workspace]');
+    const currentSidebar = dataView.querySelector('[data-data-sidebar]');
+    const scratch = renderDataMainIntoScratch(state);
+    const nextWorkspace = scratch.querySelector('[data-data-workspace]');
+    const nextSidebar = scratch.querySelector('[data-data-sidebar]');
+
+    if (
+        !(currentWorkspace instanceof HTMLElement) ||
+        !(nextWorkspace instanceof HTMLElement) ||
+        Boolean(currentSidebar) !== Boolean(nextSidebar)
+    ) {
+        return false;
+    }
+
+    currentWorkspace.replaceWith(nextWorkspace);
+    restoreTableHorizontalScrollState({
+        snapshot: tableHorizontalScrollState,
+        routeName: state.route.name,
+        scrollNodes: nextWorkspace.querySelectorAll('[data-table-horizontal-scroll]'),
+    });
+
+    return syncDataSidebarActiveTable(state);
+}
+
 function syncQueryHistoryUi(historyId) {
     const state = getState();
     const numericId = Number(historyId);
@@ -1074,6 +1212,71 @@ function patchLogsTableUi(state) {
     return true;
 }
 
+function normalizeDocumentsTextPatchMarkup(markup) {
+    return String(markup ?? '')
+        .replace(
+            /(<span\b[^>]*data-document-save-state=")(?:saved|unsaved)("[^>]*>)[\s\S]*?(<\/span>)/g,
+            '$1__document_save_state__$2__document_save_state__$3',
+        )
+        .replace(
+            /(<span\b[^>]*data-document-list-meta\b[^>]*>)[\s\S]*?(<\/span>)/g,
+            '$1__document_list_meta__$2',
+        );
+}
+
+function renderDocumentsMainIntoScratch(state) {
+    const scratch = document.createElement('div');
+
+    replaceChildrenFromRenderedMarkup(scratch, renderDocumentsView(state).main);
+    return scratch;
+}
+
+function patchDocumentsTextNodes(selector, scratch) {
+    const currentNodes = shellRefs.view.querySelectorAll(selector);
+    const nextNodes = scratch.querySelectorAll(selector);
+
+    if (currentNodes.length !== nextNodes.length) {
+        return false;
+    }
+
+    for (let index = 0; index < currentNodes.length; index += 1) {
+        const currentNode = currentNodes[index];
+        const nextNode = nextNodes[index];
+
+        if (!(currentNode instanceof HTMLElement) || !(nextNode instanceof HTMLElement)) {
+            return false;
+        }
+
+        currentNode.textContent = nextNode.textContent;
+
+        if (selector === '[data-document-save-state]') {
+            currentNode.dataset.documentSaveState = nextNode.dataset.documentSaveState ?? '';
+        }
+    }
+
+    return true;
+}
+
+function patchDocumentsTextOnlyUi(state, nextMainMarkup) {
+    if (lastRenderedRouteName !== 'documents' || state.route.name !== 'documents') {
+        return false;
+    }
+
+    const previousComparable = normalizeDocumentsTextPatchMarkup(lastRenderedMainMarkup);
+    const nextComparable = normalizeDocumentsTextPatchMarkup(nextMainMarkup);
+
+    if (previousComparable !== nextComparable) {
+        return false;
+    }
+
+    const scratch = renderDocumentsMainIntoScratch(state);
+
+    return (
+        patchDocumentsTextNodes('[data-document-save-state]', scratch) &&
+        patchDocumentsTextNodes('[data-document-list-meta]', scratch)
+    );
+}
+
 function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -1383,6 +1586,29 @@ function focusMediaTaggingTagSearchInput() {
     return true;
 }
 
+function focusModalAutofocusElement() {
+    const element = shellRefs.modal.querySelector('[autofocus]');
+
+    if (
+        !(
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement ||
+            element instanceof HTMLButtonElement
+        )
+    ) {
+        return false;
+    }
+
+    element.focus({ preventScroll: true });
+
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        element.setSelectionRange(element.value.length, element.value.length);
+    }
+
+    return true;
+}
+
 function syncSidebarActiveRoute(routeName) {
     if (!isMediaTaggingRouteName(routeName)) {
         return false;
@@ -1417,11 +1643,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 +1662,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 +1683,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 = '';
     }
@@ -1503,6 +1736,7 @@ function renderApp(state) {
     const chartsHistorySignature = buildChartsHistorySignature(state);
     const chartsDetailSignature = buildChartsDetailSignature(state);
     const chartsCardSignature = buildChartsCardSignature(state);
+    const dataSidebarSignature = buildDataSidebarSignature(state);
     const isLockedRoute = [
         'editor',
         'editorResults',
@@ -1526,6 +1760,7 @@ function renderApp(state) {
     const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
     const chartsDetailChanged = chartsDetailSignature !== lastRenderedChartsDetailSignature;
     const chartsCardsChanged = chartsCardSignature !== lastRenderedChartsCardSignature;
+    const dataSidebarChanged = dataSidebarSignature !== lastRenderedDataSidebarSignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
     const shellMarkupUnchanged =
@@ -1566,9 +1801,16 @@ function renderApp(state) {
 
     const canPatchChartsMain = mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
     const canPatchLogsMain = mainChanged && previousRouteName === 'logs' && state.route.name === 'logs';
+    const canPatchDocumentsMain = mainChanged && previousRouteName === 'documents' && state.route.name === 'documents';
+    const canPatchDataMain =
+        mainChanged && previousRouteName === 'data' && state.route.name === 'data' && !dataSidebarChanged;
     let mainPatched = false;
     let preservedChartsDom = false;
 
+    if (canPatchDataMain) {
+        mainPatched = patchDataMainUi(state, { tableHorizontalScrollState });
+    }
+
     if (canPatchChartsMain) {
         const historyPatched = !chartsHistoryChanged || patchChartsHistoryUi(state);
 
@@ -1595,6 +1837,10 @@ function renderApp(state) {
         mainPatched = patchLogsTableUi(state);
     }
 
+    if (!mainPatched && canPatchDocumentsMain) {
+        mainPatched = patchDocumentsTextOnlyUi(state, main);
+    }
+
     if (mainChanged) {
         if (!mainPatched) {
             teardownStructureGraph();
@@ -1674,6 +1920,8 @@ function renderApp(state) {
         if (focusNewTableDesignerNameField()) {
             pendingNewTableDesignerAutofocus = false;
         }
+    } else if (modalChanged && state.modal && focusModalAutofocusElement()) {
+        // Modal content is inserted dynamically, so native autofocus is not reliable.
     } else {
         restoreFocusedInputState(focusedInput);
     }
@@ -1690,6 +1938,7 @@ function renderApp(state) {
     lastRenderedChartsHistorySignature = chartsHistorySignature;
     lastRenderedChartsDetailSignature = chartsDetailSignature;
     lastRenderedChartsCardSignature = chartsCardSignature;
+    lastRenderedDataSidebarSignature = dataSidebarSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
 
@@ -2379,16 +2628,60 @@ function exportCurrentDocumentMarkdown() {
     showToast(`Document "${filename}" exported.`, 'success');
 }
 
+function isDocumentEditorInput(node) {
+    return (
+        node instanceof HTMLTextAreaElement &&
+        node.classList.contains('documents-editor-input') &&
+        node.dataset.bind === 'document-field' &&
+        node.dataset.field === 'content'
+    );
+}
+
+function rememberDocumentEditorInsertionRange(textarea) {
+    if (!isDocumentEditorInput(textarea)) {
+        return null;
+    }
+
+    const documents = getState().documents;
+    const range = {
+        documentId: String(documents.selectedId ?? ''),
+        start: textarea.selectionStart,
+        end: textarea.selectionEnd,
+    };
+
+    lastDocumentEditorInsertionRange = range;
+    return range;
+}
+
+function rememberDocumentEditorInsertionRangeFromTarget(target) {
+    if (isDocumentEditorInput(target)) {
+        rememberDocumentEditorInsertionRange(target);
+    }
+}
+
 function getCurrentDocumentEditorInsertionRange() {
     const textarea = document.querySelector('.documents-editor-input');
 
-    if (!(textarea instanceof HTMLTextAreaElement)) {
+    if (isDocumentEditorInput(textarea)) {
+        const range = rememberDocumentEditorInsertionRange(textarea);
+
+        return range
+            ? {
+                  start: range.start,
+                  end: range.end,
+              }
+            : null;
+    }
+
+    const documents = getState().documents;
+
+    if (String(lastDocumentEditorInsertionRange?.documentId ?? '') !== String(documents.selectedId ?? '')) {
         return null;
     }
 
     return {
-        start: textarea.selectionStart,
-        end: textarea.selectionEnd,
+        start: lastDocumentEditorInsertionRange.start,
+        end: lastDocumentEditorInsertionRange.end,
     };
 }
 
@@ -2621,6 +2914,12 @@ async function handleAction(actionNode) {
             }
             return;
         }
+        case 'open-create-document-folder-modal':
+            openCreateDocumentFolderModal();
+            return;
+        case 'move-document-to-folder':
+            await moveCurrentDocumentToFolder(actionNode.dataset.folderId || null);
+            return;
         case 'select-document': {
             const documentId = String(actionNode.dataset.documentId ?? '').trim();
 
@@ -2643,6 +2942,33 @@ async function handleAction(actionNode) {
         case 'open-document-insert-note-modal':
             await openDocumentInsertNoteModal(getCurrentDocumentEditorInsertionRange());
             return;
+        case 'open-document-insert-table-definition-modal':
+            await openDocumentInsertTableDefinitionModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'insert-document-saved-queries': {
+            const inserted = await insertCurrentDocumentSavedQueries(getCurrentDocumentEditorInsertionRange());
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
+        case 'insert-document-time-metadata': {
+            const inserted = await insertCurrentDocumentTimeMetadata(getCurrentDocumentEditorInsertionRange());
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
+        case 'insert-document-database-info': {
+            const inserted = await insertCurrentDocumentDatabaseInfo(getCurrentDocumentEditorInsertionRange());
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
         case 'import-document-markdown': {
             const fileInput = document.querySelector('[data-bind="document-import-file"]');
 
@@ -2662,8 +2988,9 @@ async function handleAction(actionNode) {
             toggleDocumentsPane(actionNode.dataset.pane);
             return;
         case 'toggle-document-todo':
-            clearDocumentAutosaveTimer();
-            await toggleCurrentDocumentTodo(actionNode.dataset.lineIndex);
+            if (toggleCurrentDocumentTodo(actionNode.dataset.lineIndex)) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
             return;
         case 'open-create-query-chart-modal':
             openCreateQueryChartModal();
@@ -2680,6 +3007,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 +3400,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 +3547,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 +3623,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;
 
@@ -3322,6 +3718,30 @@ document.addEventListener('contextmenu', event => {
     openCopyColumnMenu(headerNode);
 });
 
+document.addEventListener('focusin', event => {
+    rememberDocumentEditorInsertionRangeFromTarget(event.target);
+});
+
+document.addEventListener('keyup', event => {
+    rememberDocumentEditorInsertionRangeFromTarget(event.target);
+});
+
+document.addEventListener('pointerup', event => {
+    rememberDocumentEditorInsertionRangeFromTarget(event.target);
+});
+
+document.addEventListener(
+    'select',
+    event => {
+        rememberDocumentEditorInsertionRangeFromTarget(event.target);
+    },
+    true,
+);
+
+document.addEventListener('selectionchange', () => {
+    rememberDocumentEditorInsertionRangeFromTarget(document.activeElement);
+});
+
 document.addEventListener('keydown', event => {
     const target = event.target;
     const state = getState();
@@ -3340,6 +3760,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 +3800,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 +3865,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 +3904,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);
@@ -3523,6 +4008,7 @@ document.addEventListener('input', event => {
     }
 
     if (bindNode.dataset.bind === 'document-field') {
+        rememberDocumentEditorInsertionRangeFromTarget(bindNode);
         updateCurrentDocumentDraftField(bindNode.dataset.field, bindNode.value);
         scheduleDocumentAutosave(getState().documents.selectedId);
         return;
@@ -3538,6 +4024,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 +4059,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 +4219,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 +4247,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;
     }
 
@@ -3745,6 +4269,21 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-table-definition-select') {
+        updateDocumentTableDefinitionSelection(bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'document-table-definition-option') {
+        updateDocumentTableDefinitionOption(bindNode.dataset.option, bindNode.checked);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'document-table-definition-row-count') {
+        updateDocumentTableDefinitionSampleRowCount(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-field') {
         if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
             updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
@@ -3913,6 +4452,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;
@@ -3958,6 +4498,10 @@ document.addEventListener('submit', async event => {
         case 'delete-api-token-confirm':
             await submitDeleteSettingsApiTokenConfirmation();
             return;
+        case 'create-document-folder': {
+            await submitCreateDocumentFolder(String(formData.get('name') ?? ''));
+            return;
+        }
         case 'document-insert-table': {
             const inserted = await submitDocumentInsertTable();
 
@@ -3966,6 +4510,14 @@ document.addEventListener('submit', async event => {
             }
             return;
         }
+        case 'document-insert-table-definition': {
+            const inserted = await submitDocumentInsertTableDefinition();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
         case 'document-insert-note': {
             const inserted = submitDocumentInsertNote();