sqlite-hub 0.11.1 → 0.12.0

package/frontend/js/components/rowEditorPanel.js

@@ -1,5 +1,7 @@
 import { escapeHtml } from "../utils/format.js";
 
+const URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
+
 function getJsonPreview(value) {
   if (value === null || value === undefined) {
     return null;
@@ -28,6 +30,114 @@ function getJsonPreview(value) {
   }
 }
 
+function getUrlValue(value) {
+  const text = String(value ?? "").trim();
+
+  if (!URL_PATTERN.test(text)) {
+    return null;
+  }
+
+  try {
+    const url = new URL(text);
+
+    return ["http:", "https:"].includes(url.protocol) ? url.href : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+function withUrlBadge(badges = [], url) {
+  if (!url) {
+    return badges;
+  }
+
+  const hasUrlBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "URL";
+  });
+
+  return hasUrlBadge ? badges : [...badges, { label: "URL", tone: "url" }];
+}
+
+function getAllowedValues(field) {
+  const seen = new Set();
+
+  return (Array.isArray(field.allowedValues) ? field.allowedValues : [])
+    .map((value) => String(value))
+    .filter((value) => {
+      if (seen.has(value)) {
+        return false;
+      }
+
+      seen.add(value);
+      return true;
+    });
+}
+
+function withCheckBadge(badges = [], allowedValues = []) {
+  if (!allowedValues.length) {
+    return badges;
+  }
+
+  const hasCheckBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "CHECK";
+  });
+
+  return hasCheckBadge ? badges : [...badges, { label: "CHECK", tone: "check" }];
+}
+
+function renderOpenUrlButton(url) {
+  if (!url) {
+    return "";
+  }
+
+  return `
+    <div class="mt-2">
+      <button
+        class="standard-button"
+        data-action="open-row-editor-url"
+        data-url="${escapeHtml(url)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined text-sm">open_in_new</span>
+        Open in tab
+      </button>
+    </div>
+  `;
+}
+
+function renderAllowedValuesSelect(field, allowedValues) {
+  const currentValue = String(field.value ?? "");
+  const hasCurrentAllowedValue = allowedValues.includes(currentValue);
+  const shouldRenderEmptyOption = field.notNull !== true;
+  const shouldRenderCurrentOption =
+    currentValue !== "" && !hasCurrentAllowedValue;
+  const options = [
+    shouldRenderEmptyOption
+      ? `<option value="" ${currentValue === "" ? "selected" : ""}>NULL / empty</option>`
+      : "",
+    shouldRenderCurrentOption
+      ? `<option value="${escapeHtml(currentValue)}" selected>${escapeHtml(currentValue)}</option>`
+      : "",
+    ...allowedValues.map(
+      (value) =>
+        `<option value="${escapeHtml(value)}" ${
+          value === currentValue ? "selected" : ""
+        }>${escapeHtml(value)}</option>`
+    ),
+  ].join("");
+
+  return `
+    <select
+      class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+      name="field:${escapeHtml(field.name)}"
+    >
+      ${options}
+    </select>
+  `;
+}
+
 function renderJsonViewer(prettyJson, title = "JSON Viewer") {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-4 py-4">
@@ -42,12 +152,15 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
 }
 
 function renderReadonlyField(label, value) {
-  const badges = Array.isArray(label?.badges) ? label.badges : [];
+  const url = getUrlValue(value);
+  const badges = withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url);
   const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = getJsonPreview(value);
 
   return `
-    <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+    <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3" ${
+      url ? "data-row-editor-url-field" : ""
+    }>
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
         ${badges.map((badge) => renderFieldBadge(badge)).join("")}
@@ -57,18 +170,22 @@ function renderReadonlyField(label, value) {
           ? `<div class="mt-2">${renderJsonViewer(jsonPreview)}</div>`
           : `<div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>`
       }
+      ${renderOpenUrlButton(url)}
     </div>
   `;
 }
 
 function renderEditableField(field) {
-  const badges = Array.isArray(field.badges) ? field.badges : [];
+  const url = getUrlValue(field.value);
+  const allowedValues = getAllowedValues(field);
+  const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
+  const badges = withUrlBadge(baseBadges, url);
   const jsonPreview = getJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
 
   return `
-    <label class="block space-y-2">
+    <div class="block space-y-2" ${url ? "data-row-editor-url-field" : ""}>
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
         ${badges.map((badge) => renderFieldBadge(badge)).join("")}
@@ -79,7 +196,9 @@ function renderEditableField(field) {
           : ""
       }
       ${
-        inputType === "number" && !jsonPreview
+        allowedValues.length && !jsonPreview
+          ? renderAllowedValuesSelect(field, allowedValues)
+          : inputType === "number" && !jsonPreview
           ? `
               <input
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
@@ -89,6 +208,18 @@ function renderEditableField(field) {
                 value="${escapeHtml(field.value ?? "")}"
               />
             `
+          : url && !jsonPreview
+            ? `
+              <input
+                class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                name="field:${escapeHtml(field.name)}"
+                data-row-editor-url-input
+                spellcheck="false"
+                type="text"
+                value="${escapeHtml(field.value ?? "")}"
+              />
+              ${renderOpenUrlButton(url)}
+            `
           : `
               <textarea
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
@@ -99,7 +230,7 @@ function renderEditableField(field) {
               >${escapeHtml(field.value ?? "")}</textarea>
             `
       }
-    </label>
+    </div>
   `;
 }
 
@@ -112,6 +243,14 @@ function getFieldBadgeClassName(tone) {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
 
+  if (tone === "url") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (tone === "check") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
   return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
 }
 

package/frontend/js/components/sidebar.js

@@ -6,16 +6,16 @@ const sidebarItems = [
     { label: 'Overview', href: '#/overview', key: 'overview', icon: 'dashboard' },
     { label: 'Data', href: '#/data', key: 'data', icon: 'table_rows' },
     { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
-    { label: 'SQL Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
+    { label: 'SQL_Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
     { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
-    { label: 'Table Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    { label: 'Table_Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
     {
-        label: 'Media Tagging',
+        label: 'MEDIA_TAGGING',
         key: 'mediaTagging',
         icon: 'sell',
         children: [
-            { label: 'Setup', href: '#/media-tagging', key: 'mediaTaggingSetup' },
-            { label: 'Tagging Queue', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
+            { label: 'SETUP', href: '#/media-tagging', key: 'mediaTaggingSetup' },
+            { label: 'TAGGING_QUEUE', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
         ],
     },
     { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },

package/frontend/js/store.js

@@ -50,6 +50,11 @@ const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
 const EDITOR_RESULT_TABS = new Set(['results', 'performance', 'messages']);
+const TEXT_EXPORT_FORMAT_LABELS = {
+    csv: 'CSV',
+    tsv: 'TSV',
+    md: 'Markdown',
+};
 const MISSING_DATABASE_ERROR = {
     code: 'ACTIVE_DATABASE_REQUIRED',
     message: 'No active SQLite database selected.',
@@ -1978,14 +1983,20 @@ async function previewMediaTaggingDraft(options = {}) {
     }
 }
 
-function invalidateDatabaseCaches() {
+function invalidateDatabaseCaches(options = {}) {
+    const preserveDataBrowserState = options.preserveDataBrowserState === true;
+
     state.overview.data = null;
     state.dataBrowser.tables = [];
-    state.dataBrowser.selectedTable = null;
+    if (!preserveDataBrowserState) {
+        state.dataBrowser.selectedTable = null;
+    }
     state.dataBrowser.table = null;
-    state.dataBrowser.page = 1;
-    resetDataBrowserTableSearch();
-    resetDataBrowserSearch();
+    if (!preserveDataBrowserState) {
+        state.dataBrowser.page = 1;
+        resetDataBrowserTableSearch();
+        resetDataBrowserSearch();
+    }
     clearDataBrowserRowSelectionState();
     state.dataBrowser.pendingOpenRow = null;
     state.dataBrowser.exportLoading = false;
@@ -2253,6 +2264,34 @@ export function openModal(kind) {
     emitChange();
 }
 
+export function openQueryExportModal() {
+    if (!String(state.editor.sqlText ?? '').trim()) {
+        pushToast('Enter a query before exporting.', 'alert');
+        return;
+    }
+
+    state.modal = {
+        kind: 'query-export',
+        error: null,
+        submitting: false,
+    };
+    emitChange();
+}
+
+export function openDataExportModal() {
+    if (!state.dataBrowser.selectedTable) {
+        pushToast('No table selected for export.', 'alert');
+        return;
+    }
+
+    state.modal = {
+        kind: 'data-export',
+        error: null,
+        submitting: false,
+    };
+    emitChange();
+}
+
 export function openEditConnectionModal(id) {
     const connection = state.connections.recent.find(entry => entry.id === id);
 
@@ -2845,7 +2884,7 @@ export async function executeCurrentQuery() {
         state.editor.result = response.data;
         resetEditorResultSort();
         state.editor.error = null;
-        invalidateDatabaseCaches();
+        invalidateDatabaseCaches({ preserveDataBrowserState: true });
         await refreshQueryHistoryState();
         pushToast(response.message || `Executed ${response.data.statementCount} SQL statement(s).`, 'success');
         return true;
@@ -3158,9 +3197,15 @@ export function addCurrentTableDesignerColumn() {
     return nextColumn?.id ?? null;
 }
 
-export function queueTableDesignerCsvImport(fileName, csvText) {
+export function queueTableDesignerCsvImport(fileName, csvText, options = {}) {
     try {
-        const imported = createTableDesignerDraftFromCsvImport({ fileName, csvText }, getTableDesignerContext());
+        const imported = createTableDesignerDraftFromCsvImport(
+            { fileName, csvText },
+            {
+                ...getTableDesignerContext(),
+                ...(options.context ?? {}),
+            },
+        );
 
         state.tableDesigner.pendingImportedDraft = imported.draft;
         state.tableDesigner.selectedTableName = null;
@@ -3169,6 +3214,10 @@ export function queueTableDesignerCsvImport(fileName, csvText) {
         emitChange();
         return imported;
     } catch (error) {
+        if (options.throwOnError) {
+            throw error;
+        }
+
         pushToast(error?.message || 'CSV import failed.', 'alert');
         return null;
     }
@@ -4132,25 +4181,127 @@ export async function submitDeleteQueryHistoryConfirmation() {
     return deleted;
 }
 
-export async function exportCurrentQueryCsv() {
+function beginCurrentQueryExport() {
     state.editor.exportLoading = true;
+    if (state.modal?.kind === 'query-export') {
+        state.modal.submitting = true;
+        state.modal.error = null;
+    }
     emitChange();
+}
+
+function reportCurrentQueryExportError(error) {
+    if (state.modal?.kind === 'query-export') {
+        withModalError(error);
+        return;
+    }
+
+    state.editor.error = normalizeError(error);
+    emitChange();
+}
+
+function finishCurrentQueryExport() {
+    state.editor.exportLoading = false;
+    if (state.modal?.kind === 'query-export') {
+        state.modal.submitting = false;
+    }
+    emitChange();
+}
+
+export async function exportCurrentQueryFormat(format = 'csv') {
+    const normalizedFormat = String(format ?? 'csv').toLowerCase();
+    const label = TEXT_EXPORT_FORMAT_LABELS[normalizedFormat] ?? TEXT_EXPORT_FORMAT_LABELS.csv;
+
+    beginCurrentQueryExport();
 
     try {
-        await api.downloadQueryCsv(state.editor.sqlText);
-        pushToast('Query export started.', 'success');
+        await api.downloadQueryExport(state.editor.sqlText, normalizedFormat);
+        closeModalInternal();
+        pushToast(`${label} export started.`, 'success');
         return true;
     } catch (error) {
-        state.editor.error = normalizeError(error);
-        emitChange();
+        reportCurrentQueryExportError(error);
         return false;
     } finally {
-        state.editor.exportLoading = false;
+        finishCurrentQueryExport();
+    }
+}
+
+export async function duplicateCurrentQueryAsTable() {
+    beginCurrentQueryExport();
+
+    try {
+        const response = await api.getQueryExport(state.editor.sqlText, 'csv');
+        const exportData = response?.data ?? {};
+        const imported = queueTableDesignerCsvImport(
+            exportData.filename || 'query-results.csv',
+            exportData.content || '',
+            { throwOnError: true },
+        );
+
+        closeModalInternal();
+        pushToast(
+            `Table draft created from ${imported.importedRowCount} row${imported.importedRowCount === 1 ? '' : 's'}.`,
+            'success',
+        );
+        return imported;
+    } catch (error) {
+        reportCurrentQueryExportError(error);
+        return null;
+    } finally {
+        finishCurrentQueryExport();
+    }
+}
+
+export async function exportCurrentQueryCsv() {
+    try {
+        return await exportCurrentQueryFormat('csv');
+    } catch (error) {
+        state.editor.error = normalizeError(error);
         emitChange();
+        return false;
     }
 }
 
-export async function exportCurrentDataTableCsv() {
+function getCurrentDataTableExportOptions(format = 'csv') {
+    return {
+        sortColumn: state.dataBrowser.sortColumn,
+        sortDirection: state.dataBrowser.sortDirection,
+        filterColumn: state.dataBrowser.searchColumn,
+        filterOperator: state.dataBrowser.filterOperator,
+        filterValue: state.dataBrowser.searchQuery,
+        format,
+    };
+}
+
+function beginCurrentDataTableExport() {
+    state.dataBrowser.exportLoading = true;
+    if (state.modal?.kind === 'data-export') {
+        state.modal.submitting = true;
+        state.modal.error = null;
+    }
+    emitChange();
+}
+
+function reportCurrentDataTableExportError(error) {
+    if (state.modal?.kind === 'data-export') {
+        withModalError(error);
+        return;
+    }
+
+    state.dataBrowser.error = normalizeError(error);
+    emitChange();
+}
+
+function finishCurrentDataTableExport() {
+    state.dataBrowser.exportLoading = false;
+    if (state.modal?.kind === 'data-export') {
+        state.modal.submitting = false;
+    }
+    emitChange();
+}
+
+export async function exportCurrentDataTableFormat(format = 'csv') {
     const tableName = state.dataBrowser.selectedTable;
 
     if (!tableName) {
@@ -4158,26 +4309,68 @@ export async function exportCurrentDataTableCsv() {
         return false;
     }
 
-    state.dataBrowser.exportLoading = true;
-    emitChange();
+    const normalizedFormat = String(format ?? 'csv').toLowerCase();
+    const label = TEXT_EXPORT_FORMAT_LABELS[normalizedFormat] ?? TEXT_EXPORT_FORMAT_LABELS.csv;
+
+    beginCurrentDataTableExport();
 
     try {
-        await api.downloadTableCsv(tableName, {
-            sortColumn: state.dataBrowser.sortColumn,
-            sortDirection: state.dataBrowser.sortDirection,
-        });
-        pushToast(`CSV export started for ${tableName}.`, 'success');
+        await api.downloadTableExport(tableName, getCurrentDataTableExportOptions(normalizedFormat));
+        closeModalInternal();
+        pushToast(`${label} export started for ${tableName}.`, 'success');
         return true;
     } catch (error) {
-        state.dataBrowser.error = normalizeError(error);
-        emitChange();
+        reportCurrentDataTableExportError(error);
         return false;
     } finally {
-        state.dataBrowser.exportLoading = false;
-        emitChange();
+        finishCurrentDataTableExport();
+    }
+}
+
+export async function duplicateCurrentDataTableAsTable() {
+    const tableName = state.dataBrowser.selectedTable;
+
+    if (!tableName) {
+        pushToast('No table selected for export.', 'alert');
+        return null;
+    }
+
+    beginCurrentDataTableExport();
+
+    try {
+        const response = await api.getTableExport(tableName, getCurrentDataTableExportOptions('csv'));
+        const exportData = response?.data ?? {};
+        const imported = queueTableDesignerCsvImport(
+            exportData.filename || `${tableName}.csv`,
+            exportData.content || '',
+            {
+                throwOnError: true,
+                context: {
+                    catalogTables: state.tableDesigner.tables?.length
+                        ? state.tableDesigner.tables
+                        : state.dataBrowser.tables,
+                },
+            },
+        );
+
+        closeModalInternal();
+        pushToast(
+            `Table draft created from ${imported.importedRowCount} row${imported.importedRowCount === 1 ? '' : 's'}.`,
+            'success',
+        );
+        return imported;
+    } catch (error) {
+        reportCurrentDataTableExportError(error);
+        return null;
+    } finally {
+        finishCurrentDataTableExport();
     }
 }
 
+export async function exportCurrentDataTableCsv() {
+    return exportCurrentDataTableFormat('csv');
+}
+
 export function sortEditorResultsByColumn(columnName) {
     const normalizedColumn = String(columnName ?? '').trim();
     const result = state.editor.result;

package/frontend/js/views/data.js

@@ -142,10 +142,11 @@ function renderWorkspaceHeader(state) {
                   </button>
                   <button
                     class="standard-button"
-                    data-action="export-data-csv"
+                    data-action="open-data-export-modal"
                     type="button"
                   >
-                    ${state.dataBrowser.exportLoading ? 'Exporting...' : 'Export CSV'}
+                    <span class="material-symbols-outlined text-sm">download</span>
+                    ${state.dataBrowser.exportLoading ? 'Exporting...' : 'Export'}
                   </button>`
                   : ''
           }
@@ -574,6 +575,8 @@ export function renderDataRowEditorPanel(state) {
                 label: column.name,
                 badges: getColumnBadges(column),
                 ...getColumnNumberInputMeta(column),
+                allowedValues: column.allowedValues ?? [],
+                notNull: Boolean(column.notNull),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/editor.js

@@ -193,6 +193,8 @@ function renderEditorRowPanel(state) {
             return {
                 name: column.sourceColumn,
                 label: column.sourceColumn,
+                allowedValues: column.allowedValues ?? [],
+                notNull: Boolean(column.notNull),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/settings.js

@@ -34,7 +34,7 @@ function renderSettingsContent(state) {
         <div class="space-y-5 p-6">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
-              Current Version
+              Current_Version
             </div>
             <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
               v${escapeHtml(state.settings.appVersion ?? '0.0.0')}