sqlite-hub 1.1.2 → 1.4.0

package/frontend/js/api.js

@@ -153,6 +153,17 @@ export function getBackup(backupId) {
   return request(`/api/backups/${encodeURIComponent(backupId)}`);
 }
 
+export function getBackupDiff(backupId, options = {}) {
+  const params = new URLSearchParams();
+
+  if (options.sampleLimit !== undefined) {
+    params.set("sampleLimit", String(options.sampleLimit));
+  }
+
+  const query = params.toString();
+  return request(`/api/backups/${encodeURIComponent(backupId)}/diff${query ? `?${query}` : ""}`);
+}
+
 export function createBackup(payload = {}) {
   return request("/api/backups", {
     method: "POST",
@@ -340,6 +351,13 @@ export function getStructureDetail(tableName) {
   return request(`/api/structure/${encodeURIComponent(tableName)}`);
 }
 
+export function generateStructureTypes(tableName, payload = {}) {
+  return request(`/api/structure/${encodeURIComponent(tableName)}/types`, {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function getTableDesignerOverview() {
   return request("/api/table-designer");
 }

package/frontend/js/app.js

@@ -46,6 +46,7 @@ import {
     exportCurrentQueryFormat,
     getState,
     initializeApp,
+    insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
     openModal,
     openOverviewInFinder,
@@ -55,7 +56,10 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteSettingsApiTokenModal,
     openCreateBackupModal,
-    openEditBackupNotesModal,
+    openEditBackupModal,
+    openBackupDiffDrawer,
+    closeBackupDiffDrawer,
+    openGenerateTypesModal,
     openDeleteBackupModal,
     openRestoreBackupModal,
     openDeleteQueryChartModal,
@@ -121,7 +125,7 @@ import {
     submitDeleteSettingsApiTokenConfirmation,
     submitBackupSafetyChoice,
     submitCreateBackupConfirmation,
-    submitEditBackupNotesConfirmation,
+    submitEditBackupConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -131,6 +135,7 @@ import {
     setCopyColumnModalError,
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
+    setBackupDiffTab,
     setRoute,
     setSettingsSection,
     saveQueryHistoryNotes,
@@ -165,6 +170,7 @@ import {
     updateCurrentTableDesignerColumnField,
     updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
+    updateGenerateTypesModal,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
@@ -239,6 +245,7 @@ let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
+let lastRenderedChartsDetailSignature = '';
 let lastRenderedChartsCardSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
@@ -786,6 +793,27 @@ function buildChartsCardSignature(state) {
     });
 }
 
+function buildChartsDetailSignature(state) {
+    if (state.route.name !== 'charts') {
+        return '';
+    }
+
+    const detail = state.charts.detail;
+    const historyVisible = state.charts.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
+    return JSON.stringify({
+        selectedHistoryId: state.charts.selectedHistoryId ?? null,
+        historyVisible,
+        detailLoading: Boolean(state.charts.detailLoading),
+        detailError: state.charts.detailError
+            ? [state.charts.detailError.code ?? '', state.charts.detailError.message ?? '']
+            : null,
+        hasDetailItem: Boolean(detail?.item),
+        displayTitle: detail?.item?.displayTitle ?? '',
+        cards: buildChartsCardSignature(state),
+    });
+}
+
 function syncChartsHistorySelectionUi(state) {
     const selectedHistoryId = String(state.charts.selectedHistoryId ?? '');
     const historyButtons = shellRefs.view.querySelectorAll(
@@ -1042,11 +1070,11 @@ function renderNotFoundView() {
           <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-primary-container/40">
             ROUTE_LOST // HASH_NOT_RECOGNIZED
           </p>
-          <h1 class="mt-4 font-headline text-6xl font-black uppercase tracking-tight text-primary-container">
+          <h1 class="mt-4 font-body text-6xl font-black uppercase tracking-tight text-primary-container">
             404_SIGNAL
           </h1>
           <button
-            class="standard-button mt-8 px-6 font-headline text-sm"
+            class="standard-button mt-8 px-6 font-body text-sm"
             data-action="navigate"
             data-to="/"
             type="button"
@@ -1368,6 +1396,7 @@ function renderApp(state) {
     const modalMarkup = renderModal(state);
     const toastMarkup = renderToasts(state.toasts);
     const chartsHistorySignature = buildChartsHistorySignature(state);
+    const chartsDetailSignature = buildChartsDetailSignature(state);
     const chartsCardSignature = buildChartsCardSignature(state);
     const isLockedRoute = [
         'editor',
@@ -1388,6 +1417,7 @@ function renderApp(state) {
     const panelChanged = panel !== lastRenderedPanelMarkup;
     const modalChanged = modalMarkup !== lastRenderedModalMarkup;
     const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
+    const chartsDetailChanged = chartsDetailSignature !== lastRenderedChartsDetailSignature;
     const chartsCardsChanged = chartsCardSignature !== lastRenderedChartsCardSignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
@@ -1436,12 +1466,17 @@ function renderApp(state) {
         const historyPatched = !chartsHistoryChanged || patchChartsHistoryUi(state);
 
         if (historyPatched) {
-            if (chartsCardsChanged) {
-                teardownQueryChartRenderer();
-            }
+            if (chartsDetailChanged) {
+                if (chartsCardsChanged) {
+                    teardownQueryChartRenderer();
+                }
 
-            preservedChartsDom = !chartsCardsChanged;
-            mainPatched = patchChartsDetailUi(state, { preserveCharts: preservedChartsDom });
+                preservedChartsDom = !chartsCardsChanged;
+                mainPatched = patchChartsDetailUi(state, { preserveCharts: preservedChartsDom });
+            } else {
+                preservedChartsDom = true;
+                mainPatched = syncChartsHistorySelectionUi(state);
+            }
         }
 
         if (!mainPatched) {
@@ -1542,6 +1577,7 @@ function renderApp(state) {
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
     lastRenderedChartsHistorySignature = chartsHistorySignature;
+    lastRenderedChartsDetailSignature = chartsDetailSignature;
     lastRenderedChartsCardSignature = chartsCardSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
@@ -1567,6 +1603,22 @@ async function executeEditorQueryAndNavigate() {
     router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
+function quoteSqlIdentifier(identifier) {
+    return `"${String(identifier ?? '').replace(/"/g, '""')}"`;
+}
+
+async function openTableInSqlEditor(tableName) {
+    const normalizedTableName = String(tableName ?? '').trim();
+
+    if (!normalizedTableName) {
+        showToast('No table selected for SQL Editor.', 'alert');
+        return;
+    }
+
+    setCurrentQuery(`SELECT * FROM ${quoteSqlIdentifier(normalizedTableName)};`);
+    router.navigate('/editor');
+}
+
 function formatCurrentQuery() {
     const currentQuery = getState().editor.sqlText ?? '';
     const formattedQuery = formatSqlQuery(currentQuery);
@@ -1956,6 +2008,68 @@ function downloadTextFile({ text, filename, mimeType }) {
     URL.revokeObjectURL(url);
 }
 
+async function copyGeneratedTypes() {
+    const modal = getState().modal;
+    const code = modal?.kind === 'generate-types' ? String(modal.result?.code ?? '') : '';
+
+    if (!code) {
+        showToast('No generated code to copy.', 'alert');
+        return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+        showToast('Clipboard API is not available.', 'alert');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(code);
+        showToast(
+            modal.result?.files?.length ? 'Type definitions copied to clipboard.' : 'Type definition copied to clipboard.',
+            'success',
+        );
+    } catch (error) {
+        showToast(
+            modal.result?.files?.length
+                ? 'Type definitions could not be copied.'
+                : 'Type definition could not be copied.',
+            'alert',
+        );
+    }
+}
+
+function downloadGeneratedTypes() {
+    const modal = getState().modal;
+    const result = modal?.kind === 'generate-types' ? modal.result : null;
+    const files = result?.files ?? [];
+
+    if (files.length) {
+        files.forEach((file, index) => {
+            window.setTimeout(() => {
+                downloadTextFile({
+                    text: file.code,
+                    filename: file.fileName || `${file.tableName || 'types'}.txt`,
+                    mimeType: 'text/plain;charset=utf-8',
+                });
+            }, index * 120);
+        });
+        showToast(`${files.length} type definition downloads started.`, 'success');
+        return;
+    }
+
+    if (!result?.code) {
+        showToast('No generated code to download.', 'alert');
+        return;
+    }
+
+    downloadTextFile({
+        text: result.code,
+        filename: result.fileName || 'types.txt',
+        mimeType: 'text/plain;charset=utf-8',
+    });
+    showToast('Type definition download started.', 'success');
+}
+
 function getSelectedDataBrowserRowForJson(state) {
     if (state.dataBrowser.selectedRow) {
         return state.dataBrowser.selectedRow;
@@ -2103,6 +2217,39 @@ function exportRowEditorJson() {
     showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
 }
 
+async function insertRowEditorJsonIntoDocument() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    const markdown = ['```json', payload.text, '```'].join('\n');
+
+    try {
+        const result = await insertMarkdownIntoLastOpenDocument(markdown);
+
+        if (!result.documentId) {
+            showToast('Open a document before inserting row JSON.', 'alert');
+            return;
+        }
+
+        if (!result.inserted) {
+            showToast('Row JSON could not be inserted.', 'alert');
+            return;
+        }
+
+        if (!result.saved) {
+            scheduleDocumentAutosave(result.documentId);
+        }
+
+        showToast(`Row from "${payload.label}" inserted into document.`, 'success');
+    } catch (error) {
+        showToast('Open a document before inserting row JSON.', 'alert');
+    }
+}
+
 function exportCurrentDocumentMarkdown() {
     const documents = getState().documents;
 
@@ -2319,6 +2466,9 @@ async function handleAction(actionNode) {
         case 'export-row-editor-json':
             exportRowEditorJson();
             return;
+        case 'insert-row-editor-json-into-document':
+            await insertRowEditorJsonIntoDocument();
+            return;
         case 'open-modal':
             openModal(actionNode.dataset.modal, {
                 columnId: actionNode.dataset.columnId,
@@ -2496,11 +2646,32 @@ async function handleAction(actionNode) {
         case 'refresh-backups':
             await refreshBackups();
             return;
+        case 'open-table-in-sql-editor':
+            await openTableInSqlEditor(actionNode.dataset.tableName);
+            return;
+        case 'open-generate-types-modal':
+            await openGenerateTypesModal(actionNode.dataset.tableName, actionNode.dataset.typeTarget, actionNode.dataset.typeScope);
+            return;
+        case 'copy-generated-types':
+            await copyGeneratedTypes();
+            return;
+        case 'download-generated-types':
+            downloadGeneratedTypes();
+            return;
         case 'open-restore-backup-modal':
             openRestoreBackupModal(actionNode.dataset.backupId);
             return;
-        case 'open-edit-backup-notes-modal':
-            openEditBackupNotesModal(actionNode.dataset.backupId);
+        case 'open-compare-backup-drawer':
+            await openBackupDiffDrawer(actionNode.dataset.backupId);
+            return;
+        case 'set-backup-diff-tab':
+            setBackupDiffTab(actionNode.dataset.tab);
+            return;
+        case 'close-backup-diff-drawer':
+            closeBackupDiffDrawer();
+            return;
+        case 'open-edit-backup-modal':
+            openEditBackupModal(actionNode.dataset.backupId);
             return;
         case 'open-delete-backup-modal':
             openDeleteBackupModal(actionNode.dataset.backupId);
@@ -3095,6 +3266,12 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (state.route.name === 'backups' && state.backups.diff?.visible) {
+        event.preventDefault();
+        closeBackupDiffDrawer();
+        return;
+    }
+
     if (state.editor.historySelectedId !== null || state.editor.historyDetail) {
         event.preventDefault();
         clearQueryHistorySelection();
@@ -3141,6 +3318,15 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'type-generation-field') {
+        if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
+            return;
+        }
+
+        void updateGenerateTypesModal(bindNode.dataset.typeGenerationField, bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'copy-column-format-field') {
         updateCopyColumnModalFormatField(
             bindNode.dataset.field,
@@ -3312,6 +3498,13 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'type-generation-field') {
+        const nextValue =
+            bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox' ? bindNode.checked : bindNode.value;
+        void updateGenerateTypesModal(bindNode.dataset.typeGenerationField, nextValue);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-column') {
         void setDataSearchColumn(bindNode.value);
         return;
@@ -3537,8 +3730,11 @@ document.addEventListener('submit', async event => {
                 type: String(formData.get('type') ?? 'manual'),
             });
             return;
-        case 'edit-backup-notes':
-            await submitEditBackupNotesConfirmation(String(formData.get('notes') ?? ''));
+        case 'edit-backup':
+            await submitEditBackupConfirmation({
+                name: String(formData.get('name') ?? ''),
+                notes: String(formData.get('notes') ?? ''),
+            });
             return;
         case 'delete-backup-confirm':
             await submitDeleteBackupConfirmation();

package/frontend/js/components/connectionCard.js

@@ -36,7 +36,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
     renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted"),
     connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : "",
     "</div></div>",
-    '<h3 class="mb-1 font-headline text-xl font-bold uppercase ',
+    '<h3 class="mb-1 font-body text-xl font-bold uppercase ',
     isActive ? "text-[#FCE300]" : "text-on-surface",
     '">',
     escapeHtml(connection.label),

package/frontend/js/components/emptyState.js

@@ -61,7 +61,7 @@ function renderActiveConnection(activeConnection) {
             <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
               ACTIVE_DATABASE
             </p>
-            <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-2xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(activeConnection.label)}
             </h2>
             <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
@@ -93,7 +93,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             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">
+        <h1 class="mb-4 font-body 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>
@@ -104,7 +104,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
         </div>
         <div class="mx-auto grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-2">
           <button
-            class="landing-primary-action clipped-btn group flex items-center justify-between bg-primary-container px-8 py-6 font-headline text-lg font-bold transition-all duration-300 hover:shadow-[0_0_20px_rgba(252,227,0,0.3)]"
+            class="landing-primary-action clipped-btn group flex items-center justify-between bg-primary-container px-8 py-6 font-body text-lg font-bold transition-all duration-300 hover:shadow-[0_0_20px_rgba(252,227,0,0.3)]"
             data-action="open-modal"
             data-modal="open-connection"
             style="--clip-path: polygon(0 0, 90% 0, 100% 25%, 100% 100%, 0 100%);"
@@ -114,7 +114,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             <span class="material-symbols-outlined transition-transform group-hover:translate-x-1">add_circle</span>
           </button>
           <button
-            class="flex items-center justify-between border-l-2 border-primary-container bg-surface-container-highest px-8 py-6 font-headline text-lg font-bold text-primary-container transition-colors duration-150 hover:bg-surface-bright"
+            class="flex items-center justify-between border-l-2 border-primary-container bg-surface-container-highest px-8 py-6 font-body text-lg font-bold text-primary-container transition-colors duration-150 hover:bg-surface-bright"
             data-action="open-modal"
             data-modal="create-connection"
             type="button"

package/frontend/js/components/generateTypesDropdown.js

@@ -0,0 +1,33 @@
+import { renderDropdownButton } from './dropdownButton.js';
+
+export function renderGenerateTypesDropdown({ selectedTableName = '', hasTables = false } = {}) {
+    const hasSelectedTable = Boolean(String(selectedTableName ?? '').trim());
+
+    return renderDropdownButton({
+        align: 'left',
+        icon: 'code',
+        label: 'Generate Types',
+        title: 'Generate types',
+        items: [
+            {
+                action: 'open-generate-types-modal',
+                disabled: !hasSelectedTable,
+                icon: 'select_check_box',
+                label: 'Selected table',
+                dataAttributes: {
+                    tableName: selectedTableName,
+                    typeScope: 'selected',
+                },
+            },
+            {
+                action: 'open-generate-types-modal',
+                disabled: !hasTables,
+                icon: 'library_books',
+                label: 'All tables',
+                dataAttributes: {
+                    typeScope: 'all',
+                },
+            },
+        ],
+    });
+}

package/frontend/js/components/metricCard.js

@@ -10,7 +10,7 @@ export function renderMetricCard({
   return `
     <div class="metric-card ${accent ? "metric-card--accent" : ""}">
       <span class="text-[10px] font-mono text-on-surface/40 uppercase">${escapeHtml(label)}</span>
-      <span class="text-3xl font-headline font-bold text-on-surface">${escapeHtml(value)}</span>
+      <span class="text-3xl font-body font-bold text-on-surface">${escapeHtml(value)}</span>
       ${
         progress
           ? `