sqlite-hub 0.16.0 → 0.17.0

package/frontend/index.html

@@ -23,6 +23,7 @@
     <script src="/vendor/echarts/dist/echarts.min.js"></script>
     <script src="/vendor/elkjs/lib/elk.bundled.js"></script>
     <script src="/vendor/cytoscape-elk/dist/cytoscape-elk.js"></script>
+    <script src="/vendor/marked/lib/marked.umd.js"></script>
     <script src="js/app.js" type="module"></script>
   </body>
 </html>

package/frontend/js/api.js

@@ -490,3 +490,31 @@ export function downloadTableExport(tableName, options = {}) {
 export function downloadTableCsv(tableName, options = {}) {
   return downloadTableExport(tableName, { ...options, format: "csv" });
 }
+
+export function getDocuments() {
+  return request("/api/documents");
+}
+
+export function createDocument(payload = {}) {
+  return request("/api/documents", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function getDocument(documentId) {
+  return request(`/api/documents/${encodeURIComponent(documentId)}`);
+}
+
+export function updateDocument(documentId, payload = {}) {
+  return request(`/api/documents/${encodeURIComponent(documentId)}`, {
+    method: "PATCH",
+    body: payload,
+  });
+}
+
+export function deleteDocument(documentId) {
+  return request(`/api/documents/${encodeURIComponent(documentId)}`, {
+    method: "DELETE",
+  });
+}

package/frontend/js/app.js

@@ -24,6 +24,8 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    createDocument,
+    createDocumentFromMarkdownExport,
     clearCurrentQuery,
     clearDataRowSelection,
     clearEditorRowSelection,
@@ -48,12 +50,15 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteQueryChartModal,
     openDataExportModal,
+    openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
     openEditConnectionModal,
     openCreateQueryChartModal,
     openCopyColumnModal,
     openEditQueryChartModal,
+    openDocumentInsertNoteModal,
+    openDocumentInsertTableModal,
     preserveCurrentDataRowSelectionForReload,
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
@@ -66,6 +71,7 @@ import {
     runQueryHistoryItem,
     skipCurrentMediaTaggingItem,
     saveCurrentQueryChartDraft,
+    saveCurrentDocument,
     saveCurrentMediaTaggingConfig,
     selectDataRow,
     selectEditorRow,
@@ -90,6 +96,9 @@ import {
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
+    submitDeleteDocumentConfirmation,
+    submitDocumentInsertNote,
+    submitDocumentInsertTable,
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
@@ -100,6 +109,7 @@ import {
     setQueryHistorySearchInput,
     setQueryHistoryTab,
     setCopyColumnModalError,
+    setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
     setRoute,
     saveQueryHistoryNotes,
@@ -107,6 +117,8 @@ import {
     saveCurrentTableDesignerDraft,
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
+    toggleCurrentDocumentTodo,
+    toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
@@ -124,6 +136,8 @@ import {
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
     updateCopyColumnModalFormatField,
+    updateCurrentDocumentDraftField,
+    updateDocumentInsertQuerySelection,
     updateCurrentQueryChartDraftConfigField,
     updateCurrentQueryChartDraftField,
     updateCurrentTableDesignerColumnField,
@@ -136,6 +150,7 @@ import {
 import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
+import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
 import { renderMediaTaggingView } from './views/mediaTagging.js';
@@ -197,6 +212,10 @@ let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
 let pendingMediaTaggingTagSearchFocus = false;
+let documentAutosaveTimer = null;
+let pendingDocumentAutosaveId = null;
+
+const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
 
 const APP_TITLE = 'SQLite Hub';
 const ROUTE_TITLE_SEGMENTS = {
@@ -207,6 +226,7 @@ const ROUTE_TITLE_SEGMENTS = {
     editor: 'SQL Editor',
     editorResults: 'SQL Editor',
     charts: 'Charts',
+    documents: 'Documents',
     tableDesigner: 'Table Designer',
     mediaTaggingSetup: 'Media Tagging',
     mediaTaggingQueue: 'Tagging Queue',
@@ -797,13 +817,58 @@ function readFileAsText(file) {
             resolve(String(reader.result ?? ''));
         };
         reader.onerror = () => {
-            reject(reader.error ?? new Error('The selected CSV file could not be read.'));
+            reject(reader.error ?? new Error('The selected file could not be read.'));
         };
 
         reader.readAsText(file);
     });
 }
 
+function clearDocumentAutosaveTimer() {
+    if (documentAutosaveTimer !== null) {
+        window.clearTimeout(documentAutosaveTimer);
+    }
+
+    documentAutosaveTimer = null;
+    pendingDocumentAutosaveId = null;
+}
+
+function scheduleDocumentAutosave(documentId) {
+    clearDocumentAutosaveTimer();
+
+    if (!documentId) {
+        return;
+    }
+
+    pendingDocumentAutosaveId = String(documentId);
+    documentAutosaveTimer = window.setTimeout(async () => {
+        const state = getState();
+        const scheduledDocumentId = pendingDocumentAutosaveId;
+
+        documentAutosaveTimer = null;
+        pendingDocumentAutosaveId = null;
+
+        if (
+            state.route.name !== 'documents' ||
+            String(state.documents.selectedId ?? '') !== scheduledDocumentId ||
+            !state.documents.dirty
+        ) {
+            return;
+        }
+
+        if (state.documents.saving) {
+            scheduleDocumentAutosave(scheduledDocumentId);
+            return;
+        }
+
+        if (state.documents.deleting) {
+            return;
+        }
+
+        await saveCurrentDocument({ toast: false });
+    }, DOCUMENT_AUTOSAVE_DELAY_MS);
+}
+
 async function buildConnectionLogoUpload(file) {
     if (!(file instanceof File) || !file.size) {
         return null;
@@ -852,6 +917,8 @@ function resolveView(state) {
             return renderOverviewView(state);
         case 'charts':
             return renderChartsView(state);
+        case 'documents':
+            return renderDocumentsView(state);
         case 'data':
             return renderDataView(state);
         case 'editor':
@@ -1101,6 +1168,39 @@ async function handleTableDesignerCsvImport(fileInput) {
     }
 }
 
+async function handleDocumentMarkdownImport(fileInput) {
+    if (!(fileInput instanceof HTMLInputElement)) {
+        return;
+    }
+
+    const file = fileInput.files?.[0];
+
+    if (!(file instanceof File)) {
+        return;
+    }
+
+    try {
+        const content = await readFileAsText(file);
+        const document = await createDocumentFromMarkdownExport({
+            filename: file.name,
+            content,
+        });
+
+        if (!document?.id) {
+            showToast('Markdown document could not be imported.', 'alert');
+            return;
+        }
+
+        clearDocumentAutosaveTimer();
+        showToast(`Document "${document.filename}" imported.`, 'success');
+        router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+    } catch (error) {
+        showToast(error?.message || 'Markdown import failed.', 'alert');
+    } finally {
+        fileInput.value = '';
+    }
+}
+
 function renderApp(state) {
     syncDocumentTitle(state);
 
@@ -1118,6 +1218,7 @@ function renderApp(state) {
         'editorResults',
         'data',
         'charts',
+        'documents',
         'structure',
         'tableDesigner',
         'mediaTaggingSetup',
@@ -1520,6 +1621,69 @@ function buildCopyColumnExportFilename(columnName, copyMode) {
     return `${columnSlug}-${metadata.suffix}.${metadata.extension}`;
 }
 
+function normalizeMarkdownDownloadFilename(value) {
+    let filename = String(value ?? '')
+        .trim()
+        .replace(/[\u0000-\u001f\u007f]/g, ' ')
+        .replace(/[\\/]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/^\.+/, '')
+        .trim();
+
+    if (!filename) {
+        filename = 'document.md';
+    }
+
+    if (!/\.md$/i.test(filename)) {
+        filename = `${filename}.md`;
+    }
+
+    return filename;
+}
+
+function countEditedMarkdownTodoItems(text) {
+    const lines = String(text ?? '')
+        .split(/\r\n|\r|\n/g)
+        .filter(line => line.trim());
+
+    return lines.length;
+}
+
+function buildDocumentTimestampSlug(date = new Date()) {
+    const pad = value => String(value).padStart(2, '0');
+
+    return [
+        date.getFullYear(),
+        pad(date.getMonth() + 1),
+        pad(date.getDate()),
+        pad(date.getHours()),
+        pad(date.getMinutes()),
+    ].join('-');
+}
+
+function buildCopyColumnDocumentFilename(columnName) {
+    const columnSlug = slugifyExportFilenamePart(columnName);
+
+    return `${columnSlug}-todos-${buildDocumentTimestampSlug()}.md`;
+}
+
+function buildCopyColumnDocumentContent({ state, columnName, text, valueCount }) {
+    const activeConnection = state.connections.active;
+    const lines = [
+        `# ${columnName || 'Column'} todos`,
+        '',
+        `- Database: ${activeConnection?.label || 'Active database'}`,
+        `- Column: ${columnName || 'N/A'}`,
+        `- Items: ${valueCount}`,
+        `- Generated: ${new Date().toLocaleString()}`,
+        '',
+    ];
+
+    lines.push('## Todos', '', String(text ?? '').trim(), '');
+
+    return lines.join('\n');
+}
+
 function downloadTextFile({ text, filename, mimeType }) {
     const blob = new Blob([text], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -1677,6 +1841,37 @@ function exportRowEditorJson() {
     showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
 }
 
+function exportCurrentDocumentMarkdown() {
+    const documents = getState().documents;
+
+    if (!documents.selectedId) {
+        showToast('No document is selected.', 'alert');
+        return;
+    }
+
+    const filename = normalizeMarkdownDownloadFilename(documents.draftFilename || documents.selected?.filename);
+
+    downloadTextFile({
+        text: documents.draftContent ?? '',
+        filename,
+        mimeType: 'text/markdown;charset=utf-8',
+    });
+    showToast(`Document "${filename}" exported.`, 'success');
+}
+
+function getCurrentDocumentEditorInsertionRange() {
+    const textarea = document.querySelector('.documents-editor-input');
+
+    if (!(textarea instanceof HTMLTextAreaElement)) {
+        return null;
+    }
+
+    return {
+        start: textarea.selectionStart,
+        end: textarea.selectionEnd,
+    };
+}
+
 function preserveDataRowEditorSelectionForReload() {
     preserveCurrentDataRowSelectionForReload();
 }
@@ -1698,6 +1893,9 @@ async function submitCopyColumnModal(formData) {
     const outputSeparator = lineBreaks ? '\n' : separator;
     const intent = String(formData.get('intent') ?? 'copy');
     const isExportIntent = intent === 'export';
+    const isDocumentIntent = intent === 'document';
+    const isMarkdownTodo = isMarkdownTodoCopyColumnMode(copyMode);
+    const editedText = formData.has('editedText') ? String(formData.get('editedText') ?? '') : null;
     const result = getCopyColumnResult(state, scope);
     const hasColumn = (result?.columns ?? []).some(column => String(column) === columnName);
 
@@ -1710,20 +1908,57 @@ async function submitCopyColumnModal(formData) {
         return;
     }
 
-    if (!isMarkdownTodoCopyColumnMode(copyMode)) {
+    if (!isMarkdownTodo) {
         storeCopyColumnPreferences({ separator, wrapper, lineBreaks });
+    } else if (editedText !== null) {
+        setCopyColumnModalEditedText(editedText);
     }
     setCopyColumnModalSubmitting(true);
 
-    const { text, valueCount } = buildCopyColumnText({
+    const generatedOutput = buildCopyColumnText({
         result,
         columnName,
         copyMode,
         separator: outputSeparator,
         wrapper,
     });
+    const text = isMarkdownTodo && editedText !== null ? editedText : generatedOutput.text;
+    const valueCount = isMarkdownTodo && editedText !== null
+        ? countEditedMarkdownTodoItems(editedText)
+        : generatedOutput.valueCount;
 
     try {
+        if (isDocumentIntent) {
+            if (!isMarkdownTodo) {
+                throw new Error('Document export is only available for Markdown Todo columns.');
+            }
+
+            const document = await createDocumentFromMarkdownExport({
+                filename: buildCopyColumnDocumentFilename(columnName),
+                title: `${columnName || 'Column'} todos`,
+                content: buildCopyColumnDocumentContent({
+                    state,
+                    columnName,
+                    text,
+                    valueCount,
+                }),
+            });
+
+            if (!document) {
+                throw new Error('Document could not be created.');
+            }
+
+            closeModal();
+            showToast(
+                `Document "${document.filename}" created · ${formatNumber(valueCount)} ${
+                    valueCount === 1 ? 'item' : 'items'
+                }`,
+                'success',
+            );
+            router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            return;
+        }
+
         if (isExportIntent) {
             const metadata = getCopyColumnExportMetadata(copyMode);
 
@@ -1754,10 +1989,23 @@ async function submitCopyColumnModal(formData) {
         );
     } catch (error) {
         setCopyColumnModalError({
-            code: isExportIntent ? 'COPY_COLUMN_EXPORT_FAILED' : 'CLIPBOARD_ACCESS_FAILED',
-            message: error?.message || (isExportIntent ? 'Column export failed.' : 'Clipboard access failed.'),
+            code: isDocumentIntent
+                ? 'COPY_COLUMN_DOCUMENT_EXPORT_FAILED'
+                : isExportIntent
+                  ? 'COPY_COLUMN_EXPORT_FAILED'
+                  : 'CLIPBOARD_ACCESS_FAILED',
+            message:
+                error?.message ||
+                (isDocumentIntent
+                    ? 'Document export failed.'
+                    : isExportIntent
+                      ? 'Column export failed.'
+                      : 'Clipboard access failed.'),
         });
-        showToast(isExportIntent ? 'Column export failed.' : 'Clipboard access failed.', 'alert');
+        showToast(
+            isDocumentIntent ? 'Document export failed.' : isExportIntent ? 'Column export failed.' : 'Clipboard access failed.',
+            'alert',
+        );
     }
 }
 
@@ -1794,6 +2042,58 @@ async function handleAction(actionNode) {
                 mode: actionNode.dataset.copyMode,
             });
             return;
+        case 'create-document': {
+            const document = await createDocument();
+
+            if (document?.id) {
+                router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            }
+            return;
+        }
+        case 'select-document': {
+            const documentId = String(actionNode.dataset.documentId ?? '').trim();
+
+            if (documentId) {
+                clearDocumentAutosaveTimer();
+                router.navigate(`/documents/${encodeURIComponent(documentId)}`);
+            }
+            return;
+        }
+        case 'save-document':
+            clearDocumentAutosaveTimer();
+            await saveCurrentDocument();
+            return;
+        case 'export-document-markdown':
+            exportCurrentDocumentMarkdown();
+            return;
+        case 'open-document-insert-table-modal':
+            await openDocumentInsertTableModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'open-document-insert-note-modal':
+            await openDocumentInsertNoteModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'import-document-markdown': {
+            const fileInput = document.querySelector('[data-bind="document-import-file"]');
+
+            if (!(fileInput instanceof HTMLInputElement)) {
+                return;
+            }
+
+            fileInput.value = '';
+            fileInput.click();
+            return;
+        }
+        case 'delete-document':
+            clearDocumentAutosaveTimer();
+            openDeleteDocumentModal();
+            return;
+        case 'toggle-document-pane':
+            toggleDocumentsPane(actionNode.dataset.pane);
+            return;
+        case 'toggle-document-todo':
+            clearDocumentAutosaveTimer();
+            await toggleCurrentDocumentTodo(actionNode.dataset.lineIndex);
+            return;
         case 'open-create-query-chart-modal':
             openCreateQueryChartModal();
             return;
@@ -2284,6 +2584,20 @@ document.addEventListener('keydown', event => {
     const target = event.target;
     const state = getState();
 
+    if (
+        (event.key === 's' || event.key === 'S') &&
+        (event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey &&
+        !event.defaultPrevented &&
+        state.route.name === 'documents'
+    ) {
+        event.preventDefault();
+        clearDocumentAutosaveTimer();
+        void saveCurrentDocument();
+        return;
+    }
+
     // Handle Enter key in tag form fields to trigger create tag
     if (
         event.key === 'Enter' &&
@@ -2409,6 +2723,12 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-field') {
+        updateCurrentDocumentDraftField(bindNode.dataset.field, bindNode.value);
+        scheduleDocumentAutosave(getState().documents.selectedId);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -2579,6 +2899,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-import-file') {
+        void handleDocumentMarkdownImport(bindNode);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'document-insert-query-select') {
+        updateDocumentInsertQuerySelection(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-field') {
         if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
             updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
@@ -2757,6 +3087,32 @@ document.addEventListener('submit', async event => {
         case 'delete-query-history-confirm':
             await submitDeleteQueryHistoryConfirmation();
             return;
+        case 'delete-document-confirm': {
+            const result = await submitDeleteDocumentConfirmation();
+
+            if (result.deleted) {
+                router.navigate(
+                    result.nextDocumentId ? `/documents/${encodeURIComponent(result.nextDocumentId)}` : '/documents',
+                );
+            }
+            return;
+        }
+        case 'document-insert-table': {
+            const inserted = await submitDocumentInsertTable();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
+        case 'document-insert-note': {
+            const inserted = submitDocumentInsertNote();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
         case 'apply-row-update-preview':
             await submitRowUpdatePreviewConfirmation();
             return;