sqlite-hub 0.11.1 → 0.12.0

package/frontend/js/api.js

@@ -419,22 +419,72 @@ export function patchSettings(settings) {
   });
 }
 
-export function downloadQueryCsv(sql) {
-  return download("/api/export/query.csv", {
+const TEXT_EXPORT_EXTENSIONS = {
+  csv: "csv",
+  tsv: "tsv",
+  md: "md",
+};
+
+function normalizeTextExportFormat(format) {
+  const normalized = String(format ?? "csv").toLowerCase();
+  return TEXT_EXPORT_EXTENSIONS[normalized] ? normalized : "csv";
+}
+
+export function getQueryExport(sql, format = "csv") {
+  return request("/api/export/query", {
+    method: "POST",
+    body: {
+      sql,
+      format: normalizeTextExportFormat(format),
+    },
+  });
+}
+
+export function downloadQueryExport(sql, format = "csv") {
+  const normalizedFormat = normalizeTextExportFormat(format);
+  const extension = TEXT_EXPORT_EXTENSIONS[normalizedFormat];
+
+  return download(`/api/export/query.${extension}`, {
     method: "POST",
     body: { sql },
-    fallbackFilename: "query-results.csv",
+    fallbackFilename: `query-results.${extension}`,
   });
 }
 
-export function downloadTableCsv(tableName, options = {}) {
-  return download("/api/export/table.csv", {
+export function downloadQueryCsv(sql) {
+  return downloadQueryExport(sql, "csv");
+}
+
+function buildTableExportBody(tableName, options = {}) {
+  return {
+    tableName,
+    sortColumn: options.sortColumn,
+    sortDirection: options.sortDirection,
+    filterColumn: options.filterColumn,
+    filterOperator: options.filterOperator,
+    filterValue: options.filterValue,
+    format: normalizeTextExportFormat(options.format),
+  };
+}
+
+export function getTableExport(tableName, options = {}) {
+  return request("/api/export/table", {
     method: "POST",
-    body: {
-      tableName,
-      sortColumn: options.sortColumn,
-      sortDirection: options.sortDirection,
-    },
-    fallbackFilename: `${tableName || "table"}.csv`,
+    body: buildTableExportBody(tableName, options),
   });
 }
+
+export function downloadTableExport(tableName, options = {}) {
+  const normalizedFormat = normalizeTextExportFormat(options.format);
+  const extension = TEXT_EXPORT_EXTENSIONS[normalizedFormat];
+
+  return download(`/api/export/table.${extension}`, {
+    method: "POST",
+    body: buildTableExportBody(tableName, { ...options, format: normalizedFormat }),
+    fallbackFilename: `${tableName || "table"}.${extension}`,
+  });
+}
+
+export function downloadTableCsv(tableName, options = {}) {
+  return downloadTableExport(tableName, { ...options, format: "csv" });
+}

package/frontend/js/app.js

@@ -33,8 +33,10 @@ import {
     dismissMediaTaggingIssue,
     dismissToast,
     executeCurrentQuery,
-    exportCurrentDataTableCsv,
-    exportCurrentQueryCsv,
+    duplicateCurrentDataTableAsTable,
+    exportCurrentDataTableFormat,
+    duplicateCurrentQueryAsTable,
+    exportCurrentQueryFormat,
     getState,
     initializeApp,
     loadMoreQueryHistory,
@@ -45,6 +47,8 @@ import {
     openDeleteEditorRowModal,
     openDeleteQueryHistoryModal,
     openDeleteQueryChartModal,
+    openDataExportModal,
+    openQueryExportModal,
     openDataRowByIdentity,
     openEditConnectionModal,
     openCreateQueryChartModal,
@@ -132,10 +136,7 @@ import { renderOverviewView } from './views/overview.js';
 import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
-import {
-    replaceChildrenFromRenderedMarkup,
-    replaceElementFromRenderedMarkup,
-} from './utils/dom.js';
+import { replaceChildrenFromRenderedMarkup, replaceElementFromRenderedMarkup } from './utils/dom.js';
 import { highlightSql } from './utils/format.js';
 
 const appRoot = document.querySelector('#app');
@@ -333,7 +334,7 @@ function normalizeMediaTaggingRotationDegrees(value) {
         return 0;
     }
 
-    return ((Math.round(numericValue / 90) * 90) % 360 + 360) % 360;
+    return (((Math.round(numericValue / 90) * 90) % 360) + 360) % 360;
 }
 
 function syncMediaTaggingMediaRotationUi(node, rotationDegrees) {
@@ -384,7 +385,9 @@ function syncMediaTaggingTagSearchUi(input) {
             continue;
         }
 
-        const searchText = String(tagOption.dataset.tagSearchText ?? '').trim().toLowerCase();
+        const searchText = String(tagOption.dataset.tagSearchText ?? '')
+            .trim()
+            .toLowerCase();
         tagOption.hidden = Boolean(normalizedQuery) && !searchText.includes(normalizedQuery);
     }
 
@@ -502,23 +505,18 @@ function syncQueryHistoryUi(historyId) {
         return false;
     }
 
-    const historyItem = state.editor.history.find(entry => Number(entry.id) === numericId) ?? state.editor.historyDetail ?? null;
-    const listItemNode = shellRefs.view.querySelector(
-        [
-            '[data-action="select-query-history-item"][data-history-id="',
-            String(numericId),
-            '"]',
-        ].join(''),
-    )?.closest('.query-history-item');
+    const historyItem =
+        state.editor.history.find(entry => Number(entry.id) === numericId) ?? state.editor.historyDetail ?? null;
+    const listItemNode = shellRefs.view
+        .querySelector(
+            ['[data-action="select-query-history-item"][data-history-id="', String(numericId), '"]'].join(''),
+        )
+        ?.closest('.query-history-item');
 
     if (historyItem && listItemNode instanceof HTMLElement) {
         replaceElementFromRenderedMarkup(
             listItemNode,
-            renderQueryHistoryListItem(
-                historyItem,
-                state.editor.historyActiveId,
-                state.editor.historySelectedId,
-            ),
+            renderQueryHistoryListItem(historyItem, state.editor.historyActiveId, state.editor.historySelectedId),
         );
     }
 
@@ -1256,6 +1254,43 @@ async function executeEditorQueryAndNavigate() {
     router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
+const OPENABLE_URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
+
+function getOpenableUrl(value) {
+    const text = String(value ?? '').trim();
+
+    if (!OPENABLE_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 openRowEditorUrl(actionNode) {
+    const field = actionNode.closest('[data-row-editor-url-field]');
+    const inputValue = field?.querySelector('[data-row-editor-url-input]')?.value;
+    const url = getOpenableUrl(inputValue ?? actionNode.dataset.url);
+
+    if (!url) {
+        showToast('Field value is not a valid URL.', 'alert');
+        return;
+    }
+
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+
 async function handleAction(actionNode) {
     const { action } = actionNode.dataset;
 
@@ -1266,6 +1301,9 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'open-row-editor-url':
+            openRowEditorUrl(actionNode);
+            return;
         case 'open-modal':
             openModal(actionNode.dataset.modal);
             return;
@@ -1464,12 +1502,44 @@ async function handleAction(actionNode) {
             router.navigate(tab === 'results' ? '/editor/results' : '/editor');
             return;
         }
-        case 'export-query-csv':
-            await exportCurrentQueryCsv();
+        case 'open-query-export-modal':
+            openQueryExportModal();
+            return;
+        case 'export-query-format': {
+            const format = actionNode.dataset.exportFormat;
+
+            if (format === 'table') {
+                const imported = await duplicateCurrentQueryAsTable();
+
+                if (imported) {
+                    router.navigate('/table-designer/new');
+                }
+
+                return;
+            }
+
+            await exportCurrentQueryFormat(format);
             return;
-        case 'export-data-csv':
-            await exportCurrentDataTableCsv();
+        }
+        case 'open-data-export-modal':
+            openDataExportModal();
             return;
+        case 'export-data-format': {
+            const format = actionNode.dataset.exportFormat;
+
+            if (format === 'table') {
+                const imported = await duplicateCurrentDataTableAsTable();
+
+                if (imported) {
+                    router.navigate('/table-designer/new');
+                }
+
+                return;
+            }
+
+            await exportCurrentDataTableFormat(format);
+            return;
+        }
         case 'toggle-data-tables':
             toggleDataTablesPanel();
             return;
@@ -1565,11 +1635,7 @@ async function handleAction(actionNode) {
             const currentRotation = getState().mediaTagging.workflowMediaRotationDegrees ?? 0;
             const command = actionNode.dataset.rotationCommand;
             const nextRotation =
-                command === 'left'
-                    ? currentRotation - 90
-                    : command === 'right'
-                      ? currentRotation + 90
-                      : 0;
+                command === 'left' ? currentRotation - 90 : command === 'right' ? currentRotation + 90 : 0;
 
             syncMediaTaggingMediaRotationUi(actionNode, nextRotation);
             setMediaTaggingWorkflowMediaRotationDegrees(nextRotation, { notify: false });

package/frontend/js/components/emptyState.js

@@ -1,67 +1,61 @@
-import {
-  escapeHtml,
-  formatBytes,
-  formatDateTime,
-  truncateMiddle,
-} from "../utils/format.js";
-import { renderConnectionLogo } from "./connectionLogo.js";
+import { escapeHtml, formatBytes, formatDateTime, truncateMiddle } from '../utils/format.js';
+import { renderConnectionLogo } from './connectionLogo.js';
 
 function renderRecentConnectionButton(connection) {
-  return [
-    '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
-    escapeHtml(connection.id),
-    '" type="button">',
-    renderConnectionLogo(connection, {
-      containerClass:
-        "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
-      imageClassName: "h-full w-full object-cover",
-      iconClassName: "text-sm text-primary-container",
-    }),
-    '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
-    escapeHtml(connection.label),
-    '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
-    escapeHtml(truncateMiddle(connection.path, 34)),
-    "</span></span></button>",
-  ].join("");
+    return [
+        '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
+        escapeHtml(connection.id),
+        '" type="button">',
+        renderConnectionLogo(connection, {
+            containerClass: 'flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest',
+            imageClassName: 'h-full w-full object-cover',
+            iconClassName: 'text-sm text-primary-container',
+        }),
+        '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
+        escapeHtml(connection.label),
+        '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
+        escapeHtml(truncateMiddle(connection.path, 34)),
+        '</span></span></button>',
+    ].join('');
 }
 
 function renderRecentConnections(recentConnections = []) {
-  if (!recentConnections.length) {
-    return `
+    if (!recentConnections.length) {
+        return `
       <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/40">
         No recent SQLite databases recorded yet.
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="flex flex-wrap justify-center gap-4">
       ${recentConnections
-        .slice(0, 4)
-        .map((connection) => renderRecentConnectionButton(connection))
-        .join("")}
+          .slice(0, 4)
+          .map(connection => renderRecentConnectionButton(connection))
+          .join('')}
     </div>
   `;
 }
 
 function renderActiveConnection(activeConnection) {
-  if (!activeConnection) {
-    return `
+    if (!activeConnection) {
+        return `
       <p class="font-light text-lg uppercase tracking-wide text-on-surface-variant">
         No database connected
       </p>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="mx-auto max-w-2xl border border-outline-variant/15 bg-surface-container-low px-6 py-5 text-left">
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div class="flex items-start gap-4">
           ${renderConnectionLogo(activeConnection, {
-            containerClass:
-              "flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest",
-            imageClassName: "h-full w-full object-cover",
-            iconClassName: "text-2xl text-primary-container",
+              containerClass:
+                  'flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest',
+              imageClassName: 'h-full w-full object-cover',
+              iconClassName: 'text-2xl text-primary-container',
           })}
           <div>
             <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
@@ -71,14 +65,14 @@ function renderActiveConnection(activeConnection) {
               ${escapeHtml(activeConnection.label)}
             </h2>
             <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
-              truncateMiddle(activeConnection.path, 72)
+                truncateMiddle(activeConnection.path, 72),
             )}</p>
           </div>
         </div>
         <div class="text-right text-xs text-on-surface-variant/65">
           <div>${escapeHtml(formatBytes(activeConnection.sizeBytes))}</div>
           <div class="mt-1">${escapeHtml(formatDateTime(activeConnection.lastModifiedAt))}</div>
-          <div class="mt-1">${activeConnection.readOnly ? "READ_ONLY" : "READ_WRITE"}</div>
+          <div class="mt-1">${activeConnection.readOnly ? 'READ_ONLY' : 'READ_WRITE'}</div>
         </div>
       </div>
     </div>
@@ -86,9 +80,9 @@ function renderActiveConnection(activeConnection) {
 }
 
 export function renderEmptyState({ activeConnection, recentConnections = [] }) {
-  const hasActive = Boolean(activeConnection);
+    const hasActive = Boolean(activeConnection);
 
-  return `
+    return `
     <section class="landing-view machined-grid px-6">
       <div class="landing-accent landing-accent--a"></div>
       <div class="landing-accent landing-accent--b"></div>
@@ -96,12 +90,14 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
       <div class="empty-state-shell z-10 text-center">
         <div class="mb-2">
           <span class="font-mono text-[10px] tracking-[0.3em] text-primary-container/40">
-            SYSTEM_READY // ${hasActive ? "ACTIVE_CONTEXT" : "IDLE_STATE"}
+            SYSTEM_READY // ${hasActive ? 'ACTIVE_CONTEXT' : 'IDLE_STATE'}
           </span>
         </div>
         <h1 class="mb-4 font-headline text-7xl font-black tracking-tighter text-primary-container opacity-90 md:text-9xl">
           SQLite Hub
         </h1>
+        <p class="font-mono text-primary-container/40">The only fucking SQLite Manager you'll ever need.</p>
+        <br/>
         <div class="mx-auto mb-12 max-w-3xl space-y-4">
           ${renderActiveConnection(activeConnection)}
           <div class="h-[2px] w-12 bg-primary-container mx-auto"></div>
@@ -128,8 +124,8 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
           </button>
         </div>
         ${
-          hasActive
-            ? `
+            hasActive
+                ? `
               <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
                 <button
                   class="standard-button"
@@ -157,7 +153,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                 </button>
               </div>
             `
-            : ""
+                : ''
         }
         <div class="mt-16 flex flex-col items-center gap-4 opacity-70 transition-opacity hover:opacity-100">
           <p class="font-mono text-[10px] tracking-widest text-on-surface-variant">RECENT_TARGETS</p>

package/frontend/js/components/modal.js

@@ -800,6 +800,91 @@ function renderDeleteQueryHistoryForm(modal) {
   ].join("");
 }
 
+function renderQueryExportPreview(lines = []) {
+  return lines.map((line) => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join("");
+}
+
+function getExportOptions() {
+  return [
+    { label: "CSV", format: "csv", icon: "table_rows", meta: ".csv", preview: ["id,name", "1,Acme"] },
+    { label: "TSV", format: "tsv", icon: "view_column", meta: ".tsv", preview: ["id\tname", "1\tAcme"] },
+    {
+      label: "Markdown",
+      format: "md",
+      icon: "article",
+      meta: ".md",
+      preview: ["| id | name |", "| --- | --- |"],
+    },
+    {
+      label: "Duplicate",
+      format: "table",
+      icon: "table_chart",
+      meta: "as table",
+      preview: ["columns inferred", "rows prefilled"],
+    },
+  ];
+}
+
+function renderTextExportModal(modal, action) {
+  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+
+  return `
+    <div class="space-y-5">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        ${getExportOptions()
+          .map(
+            (option) => `
+              <button
+                class="group flex min-h-36 flex-col justify-between border border-outline-variant/20 bg-surface-container-low px-5 py-5 text-left text-on-surface transition-colors hover:border-primary-container/45 hover:bg-surface-container-high focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-container disabled:cursor-wait disabled:opacity-60"
+                data-action="${escapeHtml(action)}"
+                data-export-format="${escapeHtml(option.format)}"
+                type="button"
+                ${disabledAttribute}
+              >
+                <span class="flex w-full items-start justify-between gap-4">
+                  <span class="flex min-w-0 items-center gap-3">
+                    <span class="flex h-10 w-10 shrink-0 items-center justify-center border border-outline-variant/20 bg-surface-container-highest text-primary-container group-hover:border-primary-container/35">
+                      <span class="material-symbols-outlined text-xl">${escapeHtml(option.icon)}</span>
+                    </span>
+                    <span class="min-w-0">
+                      <span class="block truncate font-headline text-lg font-black uppercase tracking-normal text-primary-container">
+                        ${escapeHtml(option.label)}
+                      </span>
+                      <span class="mt-1 block font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
+                        ${escapeHtml(option.meta)}
+                      </span>
+                    </span>
+                  </span>
+                  <span class="material-symbols-outlined mt-1 text-base text-on-surface-variant/35 group-hover:text-primary-container">
+                    arrow_forward
+                  </span>
+                </span>
+                <span class="mt-5 block w-full overflow-hidden border border-outline-variant/10 bg-surface-container-lowest px-3 py-3 font-mono text-[11px] leading-5 text-on-surface-variant/70">
+                  ${renderQueryExportPreview(option.preview)}
+                </span>
+              </button>
+            `,
+          )
+          .join("")}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex justify-end">
+        <button class="standard-button" data-action="close-modal" type="button">
+          Cancel
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function renderQueryExportModal(modal) {
+  return renderTextExportModal(modal, "export-query-format");
+}
+
+function renderDataExportModal(modal) {
+  return renderTextExportModal(modal, "export-data-format");
+}
+
 function renderCreateMediaTaggingMappingTableForm(modal, state) {
   const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
   const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
@@ -981,6 +1066,16 @@ export function renderModal(state) {
       title: "Delete Query",
       body: renderDeleteQueryHistoryForm(modal),
     },
+    "query-export": {
+      eyebrow: "SQL Editor // Export query result",
+      title: "Export Query",
+      body: renderQueryExportModal(modal),
+    },
+    "data-export": {
+      eyebrow: "Data Browser // Export table data",
+      title: "Export Table",
+      body: renderDataExportModal(modal),
+    },
     "create-media-tagging-tag-table": {
       eyebrow: "Media Tagging // Create default tag table",
       title: "Create Tag Table",

package/frontend/js/components/queryEditor.js

@@ -81,10 +81,11 @@ export function renderQueryEditor({
     </button>
     <button
       class="${secondaryButtonClass}"
-      data-action="export-query-csv"
+      data-action="open-query-export-modal"
       type="button"
     >
-      ${exporting ? "Exporting..." : "Export CSV"}
+      <span class="material-symbols-outlined text-sm">download</span>
+      ${exporting ? "Exporting..." : "Export"}
     </button>
     <button
       class="signature-button"