sqlite-hub 1.2.0 → 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

@@ -56,7 +56,10 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteSettingsApiTokenModal,
     openCreateBackupModal,
-    openEditBackupNotesModal,
+    openEditBackupModal,
+    openBackupDiffDrawer,
+    closeBackupDiffDrawer,
+    openGenerateTypesModal,
     openDeleteBackupModal,
     openRestoreBackupModal,
     openDeleteQueryChartModal,
@@ -122,7 +125,7 @@ import {
     submitDeleteSettingsApiTokenConfirmation,
     submitBackupSafetyChoice,
     submitCreateBackupConfirmation,
-    submitEditBackupNotesConfirmation,
+    submitEditBackupConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -132,6 +135,7 @@ import {
     setCopyColumnModalError,
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
+    setBackupDiffTab,
     setRoute,
     setSettingsSection,
     saveQueryHistoryNotes,
@@ -166,6 +170,7 @@ import {
     updateCurrentTableDesignerColumnField,
     updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
+    updateGenerateTypesModal,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
@@ -1065,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"
@@ -2003,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;
@@ -2582,11 +2649,29 @@ async function handleAction(actionNode) {
         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);
@@ -3181,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();
@@ -3227,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,
@@ -3398,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;
@@ -3623,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
           ? `