sqlite-hub 1.1.1 → 1.2.0

package/frontend/js/app.js

@@ -24,6 +24,7 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    downloadBackup,
     createSettingsApiToken,
     chooseOpenDatabasePath,
     chooseCreateDatabasePath,
@@ -45,6 +46,7 @@ import {
     exportCurrentQueryFormat,
     getState,
     initializeApp,
+    insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
     openModal,
     openOverviewInFinder,
@@ -53,6 +55,10 @@ import {
     openDeleteEditorRowModal,
     openDeleteQueryHistoryModal,
     openDeleteSettingsApiTokenModal,
+    openCreateBackupModal,
+    openEditBackupNotesModal,
+    openDeleteBackupModal,
+    openRestoreBackupModal,
     openDeleteQueryChartModal,
     openDataExportModal,
     openDeleteDocumentModal,
@@ -68,6 +74,7 @@ import {
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
     refreshCurrentRoute,
+    refreshBackups,
     refreshMediaTaggingPreview,
     removeConnection,
     removeCurrentMediaTag,
@@ -105,6 +112,7 @@ import {
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
+    submitDeleteBackupConfirmation,
     submitDeleteDocumentConfirmation,
     submitDocumentInsertNote,
     submitDocumentInsertTable,
@@ -112,6 +120,9 @@ import {
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
     submitDeleteSettingsApiTokenConfirmation,
+    submitBackupSafetyChoice,
+    submitCreateBackupConfirmation,
+    submitEditBackupNotesConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -129,6 +140,7 @@ import {
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
     toggleCurrentDocumentTodo,
+    toggleDocumentsPanel,
     toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
@@ -159,6 +171,7 @@ import {
     removeCurrentTableDesignerColumn,
 } from './store.js';
 import { renderChartsDetail, renderChartsView } from './views/charts.js';
+import { renderBackupsView } from './views/backups.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderDocumentsView } from './views/documents.js';
@@ -227,6 +240,7 @@ let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
+let lastRenderedChartsDetailSignature = '';
 let lastRenderedChartsCardSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
@@ -241,6 +255,7 @@ const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
 const APP_TITLE = 'SQLite Hub';
 const ROUTE_TITLE_SEGMENTS = {
     connections: 'Connections',
+    backups: 'Backups',
     overview: 'Overview',
     data: 'Data',
     structure: 'Structure',
@@ -773,6 +788,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(
@@ -1053,6 +1089,8 @@ function resolveView(state) {
             return renderLandingView(state);
         case 'connections':
             return renderConnectionsView(state);
+        case 'backups':
+            return renderBackupsView(state);
         case 'overview':
             return renderOverviewView(state);
         case 'charts':
@@ -1353,6 +1391,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',
@@ -1373,6 +1412,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;
@@ -1421,12 +1461,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) {
@@ -1527,6 +1572,7 @@ function renderApp(state) {
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
     lastRenderedChartsHistorySignature = chartsHistorySignature;
+    lastRenderedChartsDetailSignature = chartsDetailSignature;
     lastRenderedChartsCardSignature = chartsCardSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
@@ -1552,6 +1598,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);
@@ -1585,6 +1647,27 @@ function formatCurrentQuery() {
     showToast('SQL query formatted.', 'success');
 }
 
+async function copyCurrentQueryToClipboard() {
+    const currentQuery = getState().editor.sqlText ?? '';
+
+    if (!currentQuery.trim()) {
+        showToast('No SQL query to copy.', 'alert');
+        return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+        showToast('Clipboard API is not available.', 'alert');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(currentQuery);
+        showToast('SQL query copied.', 'success');
+    } catch (error) {
+        showToast('SQL query could not be copied.', 'alert');
+    }
+}
+
 const OPENABLE_URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
 function getOpenableUrl(value) {
@@ -1795,6 +1878,14 @@ function closeCopyColumnMenus(exceptMenu = null) {
     });
 }
 
+function closeDropdownButtons(exceptDropdown = null) {
+    document.querySelectorAll('[data-dropdown-button][open]').forEach(dropdown => {
+        if (dropdown !== exceptDropdown && dropdown instanceof HTMLDetailsElement) {
+            dropdown.open = false;
+        }
+    });
+}
+
 function closeSidebarDatabasePickers(exceptPicker = null) {
     document.querySelectorAll('.sidebar-db-picker[open]').forEach(picker => {
         if (picker !== exceptPicker && picker instanceof HTMLDetailsElement) {
@@ -2059,6 +2150,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;
 
@@ -2275,6 +2399,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,
@@ -2446,6 +2573,36 @@ async function handleAction(actionNode) {
         case 'create-backup':
             await createActiveConnectionBackup();
             return;
+        case 'open-create-backup-modal':
+            openCreateBackupModal();
+            return;
+        case 'refresh-backups':
+            await refreshBackups();
+            return;
+        case 'open-table-in-sql-editor':
+            await openTableInSqlEditor(actionNode.dataset.tableName);
+            return;
+        case 'open-restore-backup-modal':
+            openRestoreBackupModal(actionNode.dataset.backupId);
+            return;
+        case 'open-edit-backup-notes-modal':
+            openEditBackupNotesModal(actionNode.dataset.backupId);
+            return;
+        case 'open-delete-backup-modal':
+            openDeleteBackupModal(actionNode.dataset.backupId);
+            return;
+        case 'download-backup':
+            await downloadBackup(actionNode.dataset.backupId);
+            return;
+        case 'backup-safety-create':
+            await submitBackupSafetyChoice('create');
+            return;
+        case 'backup-safety-continue':
+            await submitBackupSafetyChoice('continue');
+            return;
+        case 'backup-safety-cancel':
+            await submitBackupSafetyChoice('cancel');
+            return;
         case 'copy-media-tags': {
             const tags = getState().mediaTagging.tags ?? [];
             const formattedTags = tags
@@ -2476,6 +2633,9 @@ async function handleAction(actionNode) {
         case 'format-current-query':
             formatCurrentQuery();
             return;
+        case 'copy-current-query':
+            await copyCurrentQueryToClipboard();
+            return;
         case 'delete-data-row':
             openDeleteDataRowModal(actionNode.dataset.rowIndex);
             return;
@@ -2659,6 +2819,9 @@ async function handleAction(actionNode) {
         case 'toggle-table-designer-tables':
             toggleTableDesignerTablesPanel();
             return;
+        case 'toggle-documents-panel':
+            toggleDocumentsPanel();
+            return;
         case 'select-structure-entry':
             if (actionNode.dataset.entryName) {
                 await selectStructureEntry(actionNode.dataset.entryName);
@@ -2867,6 +3030,20 @@ document.addEventListener('click', event => {
         });
     }
 
+    const dropdownButton = target.closest('[data-dropdown-button]');
+
+    if (!dropdownButton) {
+        closeDropdownButtons();
+    } else if (target.closest('.dropdown-button__toggle')) {
+        window.requestAnimationFrame(() => {
+            if (dropdownButton instanceof HTMLDetailsElement && dropdownButton.open) {
+                closeDropdownButtons(dropdownButton);
+            }
+        });
+    } else if (target.closest('.dropdown-button__item')) {
+        closeDropdownButtons();
+    }
+
     const sidebarDatabasePicker = target.closest('.sidebar-db-picker');
 
     if (!sidebarDatabasePicker) {
@@ -2986,6 +3163,12 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (document.querySelector('[data-dropdown-button][open]')) {
+        event.preventDefault();
+        closeDropdownButtons();
+        return;
+    }
+
     if (document.querySelector('.sidebar-db-picker[open]')) {
         event.preventDefault();
         closeSidebarDatabasePickers();
@@ -3433,6 +3616,19 @@ document.addEventListener('submit', async event => {
         case 'delete-row-confirm':
             await submitDeleteRowConfirmation();
             return;
+        case 'create-backup':
+            await submitCreateBackupConfirmation({
+                name: String(formData.get('name') ?? ''),
+                notes: String(formData.get('notes') ?? ''),
+                type: String(formData.get('type') ?? 'manual'),
+            });
+            return;
+        case 'edit-backup-notes':
+            await submitEditBackupNotesConfirmation(String(formData.get('notes') ?? ''));
+            return;
+        case 'delete-backup-confirm':
+            await submitDeleteBackupConfirmation();
+            return;
         case 'save-query-chart':
             await saveCurrentQueryChartDraft();
             return;

package/frontend/js/components/dropdownButton.js

@@ -0,0 +1,92 @@
+import { escapeHtml } from "../utils/format.js";
+
+function renderDataAttributes(attributes = {}) {
+  return Object.entries(attributes)
+    .filter(([, value]) => value !== undefined && value !== null && value !== false)
+    .map(([key, value]) => {
+      const attributeName = key
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/_/g, "-")
+        .toLowerCase();
+
+      return value === true
+        ? `data-${attributeName}`
+        : `data-${attributeName}="${escapeHtml(value)}"`;
+    })
+    .join(" ");
+}
+
+function renderDropdownItem(item = {}) {
+  const dataAttributes = renderDataAttributes(item.dataAttributes);
+  const actionAttribute = item.actionAttribute || "data-action";
+  const actionMarkup =
+    item.action === undefined || item.action === null
+      ? ""
+      : `${escapeHtml(actionAttribute)}="${escapeHtml(item.action)}"`;
+  const disabled = item.disabled ? 'disabled aria-disabled="true"' : "";
+  const iconMarkup = item.icon
+    ? `<span class="material-symbols-outlined">${escapeHtml(item.icon)}</span>`
+    : "";
+
+  return `
+    <button
+      class="dropdown-button__item ${item.danger ? "dropdown-button__item--danger" : ""}"
+      ${actionMarkup}
+      ${dataAttributes}
+      ${disabled}
+      role="menuitem"
+      type="button"
+    >
+      ${iconMarkup}
+      <span>${escapeHtml(item.label)}</span>
+    </button>
+  `;
+}
+
+export function renderDropdownButton({
+  align = "right",
+  disabled = false,
+  icon = "more_horiz",
+  items = [],
+  label,
+  title = label,
+} = {}) {
+  const iconMarkup = icon
+    ? `<span class="material-symbols-outlined">${escapeHtml(icon)}</span>`
+    : "";
+  const buttonLabel = escapeHtml(label);
+  const chevron = '<span class="material-symbols-outlined dropdown-button__chevron">expand_more</span>';
+
+  if (disabled) {
+    return `
+      <button
+        aria-disabled="true"
+        class="standard-button dropdown-button__toggle"
+        disabled
+        title="${escapeHtml(title)}"
+        type="button"
+      >
+        ${iconMarkup}
+        ${buttonLabel}
+        ${chevron}
+      </button>
+    `;
+  }
+
+  return `
+    <details class="dropdown-button dropdown-button--align-${escapeHtml(align)}" data-dropdown-button>
+      <summary
+        aria-label="${escapeHtml(title)}"
+        class="standard-button dropdown-button__toggle"
+        title="${escapeHtml(title)}"
+      >
+        ${iconMarkup}
+        ${buttonLabel}
+        ${chevron}
+      </summary>
+      <div class="dropdown-button__panel" role="menu">
+        ${items.map((item) => renderDropdownItem(item)).join("")}
+      </div>
+    </details>
+  `;
+}