sqlite-hub 0.17.0 → 1.0.0

package/frontend/js/api.js

@@ -86,6 +86,18 @@ export function createConnection(payload) {
   });
 }
 
+export function chooseOpenDatabasePath() {
+  return request("/api/connections/choose-open-path", {
+    method: "POST",
+  });
+}
+
+export function chooseCreateDatabasePath() {
+  return request("/api/connections/choose-create-path", {
+    method: "POST",
+  });
+}
+
 export function importSql(payload) {
   return request("/api/connections/import-sql", {
     method: "POST",
@@ -419,6 +431,19 @@ export function patchSettings(settings) {
   });
 }
 
+export function createApiToken(name) {
+  return request("/api/settings/api-tokens", {
+    method: "POST",
+    body: { name },
+  });
+}
+
+export function deleteApiToken(tokenId) {
+  return request(`/api/settings/api-tokens/${encodeURIComponent(tokenId)}`, {
+    method: "DELETE",
+  });
+}
+
 const TEXT_EXPORT_EXTENSIONS = {
   csv: "csv",
   tsv: "tsv",

package/frontend/js/app.js

@@ -24,6 +24,9 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    createSettingsApiToken,
+    chooseOpenDatabasePath,
+    chooseCreateDatabasePath,
     createDocument,
     createDocumentFromMarkdownExport,
     clearCurrentQuery,
@@ -48,6 +51,7 @@ import {
     openDeleteDataRowModal,
     openDeleteEditorRowModal,
     openDeleteQueryHistoryModal,
+    openDeleteSettingsApiTokenModal,
     openDeleteQueryChartModal,
     openDataExportModal,
     openDeleteDocumentModal,
@@ -102,6 +106,7 @@ import {
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
+    submitDeleteSettingsApiTokenConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -112,6 +117,7 @@ import {
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
     setRoute,
+    setSettingsSection,
     saveQueryHistoryNotes,
     saveQueryHistoryTitle,
     saveCurrentTableDesignerDraft,
@@ -178,10 +184,19 @@ import {
     stringifyRowEditorJson,
 } from './utils/rowEditorJson.js';
 import { getTimestampPreviewForField } from './utils/timestampPreview.js';
+import {
+    buildRowEditorSubmittedValues,
+    getRowEditorValueState,
+    getRowEditorValueStateLabel,
+} from './utils/rowEditorValues.js';
 import {
     formatTextCellCharacterCount,
     getTextCellCharacterCount,
 } from './utils/textCellStats.js';
+import {
+    captureTableHorizontalScrollState,
+    restoreTableHorizontalScrollState,
+} from './utils/tableScrollState.js';
 
 const appRoot = document.querySelector('#app');
 
@@ -1257,6 +1272,10 @@ function renderApp(state) {
 
     const focusedInput = captureFocusedInputState();
     const queryHistoryScrollState = captureQueryHistoryScrollState();
+    const tableHorizontalScrollState = captureTableHorizontalScrollState({
+        routeName: lastRenderedRouteName,
+        scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+    });
     const isEnteringNewTableDesignerRoute =
         state.route.name === 'tableDesigner' && state.route.params?.isNew && previousRoutePath !== state.route.path;
 
@@ -1329,6 +1348,14 @@ function renderApp(state) {
         restoreQueryHistoryScrollState(queryHistoryScrollState);
     }
 
+    if (mainChanged && !mainPatched) {
+        restoreTableHorizontalScrollState({
+            snapshot: tableHorizontalScrollState,
+            routeName: state.route.name,
+            scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+        });
+    }
+
     if (pendingQueryEditorFocus && (state.route.name === 'editor' || state.route.name === 'editorResults')) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
@@ -1572,6 +1599,53 @@ function syncRowEditorFilePathPreview(inputNode) {
     previewNode.hidden = false;
 }
 
+function getRowEditorValueStateClassName(state) {
+    if (state === 'null') {
+        return 'border px-2 py-1 text-[9px] border-primary-container/35 bg-primary-container/15 text-primary-container';
+    }
+
+    if (state === 'empty') {
+        return 'border px-2 py-1 text-[9px] border-outline-variant/35 bg-surface-container-high text-on-surface-variant';
+    }
+
+    return 'border px-2 py-1 text-[9px] border-outline-variant/20 bg-surface-container text-on-surface-variant';
+}
+
+function syncRowEditorValueState(controlNode) {
+    const fieldNode = controlNode.closest('[data-row-editor-field]');
+    const valueInput = fieldNode?.querySelector('[data-row-editor-value-source]');
+    const stateBadge = fieldNode?.querySelector('[data-row-editor-value-state]');
+
+    if (!fieldNode || !valueInput || !stateBadge) {
+        return;
+    }
+
+    const valueState = getRowEditorValueState(valueInput.value);
+
+    valueInput.dataset.rowEditorDirty = 'true';
+    stateBadge.dataset.valueState = valueState;
+    stateBadge.className = getRowEditorValueStateClassName(valueState);
+    stateBadge.textContent = getRowEditorValueStateLabel(valueState);
+
+    syncRowEditorTimestampPreview(valueInput);
+    syncRowEditorFilePathPreview(valueInput);
+    syncRowEditorCharacterCount(valueInput);
+}
+
+function getRowEditorFieldMetadata(form) {
+    return Object.fromEntries(
+        Array.from(form.elements)
+            .filter(element => element.name?.startsWith('field:'))
+            .map(element => [
+                element.name.slice('field:'.length),
+                {
+                    initialState: element.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState,
+                    dirty: element.dataset.rowEditorDirty === 'true',
+                },
+            ]),
+    );
+}
+
 function closeCopyColumnMenus(exceptMenu = null) {
     document.querySelectorAll('[data-copy-column-menu][open]').forEach(menu => {
         if (menu !== exceptMenu && menu instanceof HTMLDetailsElement) {
@@ -1732,21 +1806,24 @@ function applyChangedRowEditorFormValues(rowObject) {
 
     const nextRowObject = { ...rowObject };
     const formData = new FormData(form);
+    const submittedValues = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
-    for (const [key, value] of formData.entries()) {
-        if (!key.startsWith('field:')) {
-            continue;
-        }
-
+    for (const [fieldName, value] of Object.entries(submittedValues)) {
+        const key = `field:${fieldName}`;
         const control = Array.from(form.elements).find(element => element.name === key);
         const initialValue = control?.dataset?.rowEditorInitialValue;
-        const currentValue = String(value ?? '');
+        const initialState = control?.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState;
+        const currentState = getRowEditorValueState(value);
+        const currentValue = value === null ? null : String(value);
 
-        if (initialValue !== undefined && currentValue === initialValue) {
+        if (
+            initialState === currentState &&
+            (currentState === 'null' || (initialValue !== undefined && currentValue === initialValue))
+        ) {
             continue;
         }
 
-        nextRowObject[key.slice('field:'.length)] = currentValue;
+        nextRowObject[fieldName] = currentValue;
     }
 
     return nextRowObject;
@@ -2019,6 +2096,32 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'set-settings-section':
+            setSettingsSection(actionNode.dataset.section);
+            return;
+        case 'open-delete-api-token-modal':
+            openDeleteSettingsApiTokenModal(actionNode.dataset.tokenId);
+            return;
+        case 'copy-created-api-token': {
+            const tokenInput = document.querySelector('[data-created-api-token]');
+            const token = tokenInput instanceof HTMLInputElement ? tokenInput.value : '';
+
+            if (token && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(token);
+                showToast('API token copied.', 'success');
+            }
+            return;
+        }
+        case 'copy-database-id': {
+            const databaseIdNode = document.querySelector('[data-database-id]');
+            const databaseId = databaseIdNode?.textContent?.trim() ?? '';
+
+            if (databaseId && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(databaseId);
+                showToast('Database ID copied.', 'success');
+            }
+            return;
+        }
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
@@ -2109,6 +2212,60 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'choose-open-database-path': {
+            const labelNode = actionNode.querySelector('[data-open-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseOpenDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="open-connection"] [data-open-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
+        case 'choose-create-database-path': {
+            const labelNode = actionNode.querySelector('[data-create-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseCreateDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="create-connection"] [data-create-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
         case 'close-modal':
             closeModal();
             return;
@@ -2689,6 +2846,7 @@ document.addEventListener('keydown', event => {
 
 document.addEventListener('input', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueInput = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2701,6 +2859,10 @@ document.addEventListener('input', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueInput) {
+        syncRowEditorValueState(valueInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -2845,6 +3007,7 @@ document.addEventListener(
 
 document.addEventListener('change', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueControl = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2857,6 +3020,10 @@ document.addEventListener('change', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueControl) {
+        syncRowEditorValueState(valueControl);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -3007,6 +3174,9 @@ document.addEventListener('submit', async event => {
     const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
+        case 'create-api-token':
+            await createSettingsApiToken(String(formData.get('name') ?? ''));
+            return;
         case 'open-connection': {
             resetStructureGraphForDatabaseChange();
             const connection = await submitOpenConnection({
@@ -3097,6 +3267,9 @@ document.addEventListener('submit', async event => {
             }
             return;
         }
+        case 'delete-api-token-confirm':
+            await submitDeleteSettingsApiTokenConfirmation();
+            return;
         case 'document-insert-table': {
             const inserted = await submitDocumentInsertTable();
 
@@ -3126,15 +3299,7 @@ document.addEventListener('submit', async event => {
             await submitCopyColumnModal(formData);
             return;
         case 'save-data-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             let rowIdentity = null;
             const rawRowIdentity = String(formData.get('rowIdentity') ?? '').trim();
@@ -3151,15 +3316,7 @@ document.addEventListener('submit', async event => {
             return;
         }
         case 'save-editor-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             await openEditorRowUpdatePreview(String(formData.get('rowIndex') ?? ''), values);
             return;

package/frontend/js/components/formControls.js

@@ -0,0 +1,38 @@
+import { escapeHtml } from '../utils/format.js';
+
+export const STANDARD_TEXT_INPUT_CLASS =
+    'control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors placeholder:text-on-surface-variant/35 focus:border-primary-container';
+
+export function renderTextInput({
+    className = '',
+    dataAttributes = {},
+    disabled = false,
+    maxlength = null,
+    name = '',
+    placeholder = '',
+    readonly = false,
+    spellcheck = null,
+    type = 'text',
+    value = '',
+} = {}) {
+    const attributes = [
+        `class="${escapeHtml([STANDARD_TEXT_INPUT_CLASS, className].filter(Boolean).join(' '))}"`,
+        name ? `name="${escapeHtml(name)}"` : '',
+        placeholder ? `placeholder="${escapeHtml(placeholder)}"` : '',
+        `type="${escapeHtml(type)}"`,
+        `value="${escapeHtml(value)}"`,
+        Number.isInteger(maxlength) ? `maxlength="${maxlength}"` : '',
+        disabled ? 'disabled' : '',
+        readonly ? 'readonly' : '',
+        typeof spellcheck === 'boolean' ? `spellcheck="${spellcheck}"` : '',
+        ...Object.entries(dataAttributes).map(([name, attributeValue]) => {
+            const attributeName = `data-${String(name).replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
+
+            return attributeValue === true
+                ? attributeName
+                : `${attributeName}="${escapeHtml(attributeValue)}"`;
+        }),
+    ].filter(Boolean);
+
+    return `<input ${attributes.join(' ')} />`;
+}

package/frontend/js/components/modal.js

@@ -7,6 +7,7 @@ import {
   isMarkdownTodoCopyColumnMode,
 } from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
+import { renderTextInput } from "./formControls.js";
 import {
   analyzeQueryChartResult,
   getQueryChartTypeLabel,
@@ -27,13 +28,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
-      <input
-        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-        name="${escapeHtml(name)}"
-        placeholder="${escapeHtml(placeholder)}"
-        type="${escapeHtml(type)}"
-        value="${escapeHtml(value)}"
-      />
+      ${renderTextInput({ name, placeholder, type, value })}
     </label>
   `;
 }
@@ -152,14 +147,33 @@ function renderError(error) {
   `;
 }
 
-function renderOpenConnectionForm(modal) {
+export function renderOpenConnectionForm(modal) {
   return `
     <form class="space-y-5" data-form="open-connection">
-      ${renderField({
-        label: "SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { openDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/database.sqlite",
+          })}
+          <button
+            class="standard-button flex-none"
+            data-action="choose-open-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-open-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose an existing SQLite file, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",
@@ -264,14 +278,33 @@ function renderEditConnectionForm(modal) {
   `;
 }
 
-function renderCreateDatabaseForm(modal) {
+export function renderCreateDatabaseForm(modal) {
   return `
     <form class="space-y-5" data-form="create-connection">
-      ${renderField({
-        label: "New SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/new-database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          New SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { createDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/new-database.sqlite",
+          })}
+          <button
+            class="standard-button flex-none"
+            data-action="choose-create-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-create-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose a folder and filename, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",
@@ -827,6 +860,28 @@ function renderDeleteDocumentForm(modal) {
   ].join("");
 }
 
+export function renderDeleteApiTokenForm(modal) {
+  return [
+    '<form class="space-y-5" data-form="delete-api-token-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete API token <span class="font-bold text-primary-container">',
+    escapeHtml(modal.tokenName ?? "API token"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">Requests using this token will immediately lose access to <span class="font-semibold text-on-surface">',
+    escapeHtml(modal.databaseLabel ?? "the active database"),
+    ".</span></p>",
+    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-[10px] text-on-surface-variant/55">',
+    escapeHtml(modal.tokenPrefix ?? ""),
+    "...</div>",
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-between gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Token",
+    "</button></div></form>",
+  ].join("");
+}
+
 function getDocumentInsertQueryTitle(query) {
   return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
 }
@@ -1667,6 +1722,11 @@ export function renderModal(state) {
       title: "Delete Document",
       body: renderDeleteDocumentForm(modal),
     },
+    "delete-api-token": {
+      eyebrow: "Settings // Confirm token deletion",
+      title: "Delete API Token",
+      body: renderDeleteApiTokenForm(modal),
+    },
     "document-insert-table": {
       eyebrow: "Documents // Saved query output",
       title: "Insert Table",

package/frontend/js/components/queryResults.js

@@ -95,6 +95,7 @@ export function renderQueryResultsPane(
     sortDirection = null,
     resultScope = "editor",
     sortAction = "sort-editor-results-column",
+    scrollKey = "",
   } = {}
 ) {
   if (!result) {
@@ -124,7 +125,23 @@ export function renderQueryResultsPane(
 
   return `
     <div class="relative flex h-full min-h-0 flex-col overflow-hidden bg-surface-container">
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest">
+      ${
+        result.truncated
+          ? `
+              <div class="border-b border-primary-container/20 bg-primary-container/10 px-4 py-2 text-xs text-on-surface">
+                Showing the first ${escapeHtml(String(result.rowLimit ?? result.rows?.length ?? 0))} rows. Refine the query or export it to process the complete result set.
+              </div>
+            `
+          : ""
+      }
+      <div
+        class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest"
+        ${
+          scrollKey
+            ? `data-table-horizontal-scroll data-table-scroll-key="${escapeHtml(scrollKey)}"`
+            : ""
+        }
+      >
         ${
           result.columns?.length
               ? renderDataGrid({