sqlite-hub 0.16.0 → 0.17.0

package/frontend/js/utils/markdownDocuments.js

@@ -0,0 +1,248 @@
+import { escapeHtml } from './format.js';
+
+const FENCED_CODE_PATTERN = /^\s*(```|~~~)/;
+const TASK_LINE_PATTERN = /^(\s*)([-*+])\s+\[([ xX])\]\s+(.*?)(\r?)$/;
+
+function decodeBasicHtmlEntities(value = '') {
+    return String(value)
+        .replace(/:/gi, ':')
+        .replace(/:/g, ':')
+        .replace(/:/gi, ':')
+        .replace(/&/gi, '&')
+        .replace(/"/gi, '"')
+        .replace(/'/gi, "'");
+}
+
+function sanitizeRenderedMarkdown(html = '') {
+    return String(html).replace(/\s(href|src)=("([^"]*)"|'([^']*)'|([^\s>]+))/gi, (match, attribute, raw, doubleQuoted, singleQuoted, bare) => {
+        const value = doubleQuoted ?? singleQuoted ?? bare ?? '';
+        const decodedValue = decodeBasicHtmlEntities(value).trim();
+
+        if (/^(javascript|data|vbscript):/i.test(decodedValue)) {
+            return ` ${attribute}="#"`;
+        }
+
+        return match;
+    });
+}
+
+function renderFallbackMarkdown(markdown = '') {
+    const lines = String(markdown).split(/\r?\n/);
+    const html = [];
+    let listItems = [];
+    let listTag = 'ul';
+
+    const flushList = () => {
+        if (!listItems.length) {
+            return;
+        }
+
+        html.push(`<${listTag}>${listItems.map(item => `<li>${item}</li>`).join('')}</${listTag}>`);
+        listItems = [];
+        listTag = 'ul';
+    };
+
+    for (const line of lines) {
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        const unorderedMatch = line.match(/^\s*[-*+]\s+(.+)$/);
+        const orderedMatch = line.match(/^\s*\d+[.)]\s+(.+)$/);
+
+        if (headingMatch) {
+            flushList();
+            const level = Math.min(6, headingMatch[1].length);
+            html.push(`<h${level}>${escapeHtml(headingMatch[2])}</h${level}>`);
+            continue;
+        }
+
+        if (unorderedMatch) {
+            if (listItems.length && listTag !== 'ul') {
+                flushList();
+            }
+            listTag = 'ul';
+            listItems.push(escapeHtml(unorderedMatch[1]));
+            continue;
+        }
+
+        if (orderedMatch) {
+            if (listItems.length && listTag !== 'ol') {
+                flushList();
+            }
+            listTag = 'ol';
+            listItems.push(escapeHtml(orderedMatch[1]));
+            continue;
+        }
+
+        flushList();
+
+        if (line.trim()) {
+            html.push(`<p>${escapeHtml(line)}</p>`);
+        }
+    }
+
+    flushList();
+    return html.join('\n');
+}
+
+function renderMarkdownBlock(markdown = '') {
+    const source = escapeHtml(markdown);
+    const markedRuntime = globalThis.marked;
+    const parser = typeof markedRuntime?.parse === 'function' ? markedRuntime.parse.bind(markedRuntime) : null;
+
+    if (!parser) {
+        return renderFallbackMarkdown(markdown);
+    }
+
+    return sanitizeRenderedMarkdown(
+        parser(source, {
+            async: false,
+            breaks: false,
+            gfm: true,
+        }),
+    );
+}
+
+function renderMarkdownInline(markdown = '') {
+    const source = escapeHtml(markdown);
+    const markedRuntime = globalThis.marked;
+    const parser =
+        typeof markedRuntime?.parseInline === 'function' ? markedRuntime.parseInline.bind(markedRuntime) : null;
+
+    if (!parser) {
+        return source;
+    }
+
+    return sanitizeRenderedMarkdown(
+        parser(source, {
+            async: false,
+            breaks: false,
+            gfm: true,
+        }),
+    );
+}
+
+function renderTaskList(items = []) {
+    if (!items.length) {
+        return '';
+    }
+
+    return `
+      <ul class="document-markdown-task-list">
+        ${items
+            .map(item => {
+                const checked = item.checked;
+
+                return `
+                  <li class="document-markdown-task-item ${checked ? 'is-checked' : ''}">
+                    <label class="document-markdown-task-label">
+                      <input
+                        ${checked ? 'checked' : ''}
+                        class="document-markdown-task-checkbox"
+                        data-action="toggle-document-todo"
+                        data-line-index="${escapeHtml(String(item.lineIndex))}"
+                        type="checkbox"
+                      />
+                      <span class="document-markdown-task-text">${renderMarkdownInline(item.text)}</span>
+                    </label>
+                  </li>
+                `;
+            })
+            .join('')}
+      </ul>
+    `;
+}
+
+export function renderMarkdownPreview(markdown = '') {
+    const lines = String(markdown ?? '').split('\n');
+    const blocks = [];
+    let markdownLines = [];
+    let taskItems = [];
+    let inFence = false;
+
+    const flushMarkdown = () => {
+        if (!markdownLines.length) {
+            return;
+        }
+
+        blocks.push(renderMarkdownBlock(markdownLines.join('\n')));
+        markdownLines = [];
+    };
+
+    const flushTasks = () => {
+        if (!taskItems.length) {
+            return;
+        }
+
+        blocks.push(renderTaskList(taskItems));
+        taskItems = [];
+    };
+
+    lines.forEach((line, lineIndex) => {
+        const fenceLine = FENCED_CODE_PATTERN.test(line);
+
+        if (fenceLine) {
+            flushTasks();
+            markdownLines.push(line);
+            inFence = !inFence;
+            return;
+        }
+
+        if (!inFence) {
+            const taskMatch = line.match(TASK_LINE_PATTERN);
+
+            if (taskMatch) {
+                flushMarkdown();
+                taskItems.push({
+                    checked: taskMatch[3].toLowerCase() === 'x',
+                    lineIndex,
+                    text: taskMatch[4],
+                });
+                return;
+            }
+        }
+
+        flushTasks();
+        markdownLines.push(line);
+    });
+
+    flushTasks();
+    flushMarkdown();
+
+    return blocks.join('\n').trim() || '<p class="document-markdown-empty">Empty document</p>';
+}
+
+function isLineInsideFencedCode(lines, lineIndex) {
+    let inFence = false;
+
+    for (let index = 0; index < lineIndex; index += 1) {
+        if (FENCED_CODE_PATTERN.test(lines[index] ?? '')) {
+            inFence = !inFence;
+        }
+    }
+
+    return inFence;
+}
+
+export function toggleMarkdownTodoLine(markdown = '', lineIndex) {
+    const lines = String(markdown ?? '').split('\n');
+    const numericLineIndex = Number(lineIndex);
+
+    if (!Number.isInteger(numericLineIndex) || numericLineIndex < 0 || numericLineIndex >= lines.length) {
+        return String(markdown ?? '');
+    }
+
+    if (isLineInsideFencedCode(lines, numericLineIndex)) {
+        return String(markdown ?? '');
+    }
+
+    const line = lines[numericLineIndex];
+    const match = line.match(TASK_LINE_PATTERN);
+
+    if (!match) {
+        return String(markdown ?? '');
+    }
+
+    const nextMarker = match[3].toLowerCase() === 'x' ? ' ' : 'x';
+    lines[numericLineIndex] = `${match[1]}${match[2]} [${nextMarker}] ${match[4]}${match[5]}`;
+
+    return lines.join('\n');
+}

package/frontend/js/views/documents.js

@@ -0,0 +1,300 @@
+import { escapeHtml, formatCompactDateTime, formatNumber } from '../utils/format.js';
+import { renderMarkdownPreview } from '../utils/markdownDocuments.js';
+
+function renderMissingDatabase() {
+    return `
+      <section class="view-surface">
+        <div class="view-frame flex min-h-full items-center justify-center">
+          <div class="text-center">
+            <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
+            <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+              No Active SQLite Database
+            </p>
+            <p class="mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
+              Select a database before opening its document folder.
+            </p>
+          </div>
+        </div>
+      </section>
+    `;
+}
+
+function renderDocumentListItem(item, selectedId) {
+    const isSelected = String(item.id) === String(selectedId);
+
+    return `
+      <button
+        class="documents-list-item ${isSelected ? 'is-selected' : ''}"
+        data-action="select-document"
+        data-document-id="${escapeHtml(item.id)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined documents-list-item__icon">description</span>
+        <span class="documents-list-item__body">
+          <span class="documents-list-item__title" title="${escapeHtml(item.filename)}">
+            ${escapeHtml(item.filename)}
+          </span>
+          <span class="documents-list-item__meta">
+            ${escapeHtml(formatCompactDateTime(item.updatedAt))} // ${formatNumber(item.contentLength ?? 0)} chars
+          </span>
+        </span>
+      </button>
+    `;
+}
+
+function renderDocumentsSidebar(documents) {
+    const items = documents.items ?? [];
+
+    return `
+      <aside class="documents-view__sidebar">
+        <div class="documents-view__sidebar-header">
+          <div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/50">
+              Documents
+            </div>
+            <div class="mt-1 font-mono text-xs text-primary-container">${formatNumber(items.length)} files</div>
+          </div>
+          <button
+            class="icon-button"
+            data-action="create-document"
+            title="New document"
+            type="button"
+            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">add</span>
+          </button>
+        </div>
+        <div class="documents-view__sidebar-body custom-scrollbar">
+          ${
+              items.length
+                  ? items.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
+                  : `<div class="documents-list-empty">No documents yet</div>`
+          }
+        </div>
+      </aside>
+    `;
+}
+
+function renderDocumentToolbar(documents) {
+    const disabled = documents.saving || documents.detailLoading || !documents.selectedId;
+
+    return `       <label class="documents-filename-field">
+          <input
+            class="control-input"
+            data-bind="document-field"
+            data-field="filename"
+            name="filename"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(documents.draftFilename)}"
+            ${!documents.selectedId ? 'disabled' : ''}
+          />
+        </label>
+      <div class="documents-toolbar">
+   
+ 
+       
+        <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="toggle-document-pane"
+            data-pane="editor"
+            type="button"
+          >
+            <span class="material-symbols-outlined">${documents.editorVisible ? 'visibility_off' : 'edit_note'}</span>
+            ${documents.editorVisible ? 'Hide Editor' : 'Show Editor'}
+          </button>
+          <button
+            class="standard-button"
+            data-action="toggle-document-pane"
+            data-pane="preview"
+            type="button"
+          >
+            <span class="material-symbols-outlined">${documents.previewVisible ? 'visibility_off' : 'visibility'}</span>
+            ${documents.previewVisible ? 'Hide Preview' : 'Show Preview'}
+          </button>
+          <input
+            accept=".md,.markdown,text/markdown,text/plain"
+            data-bind="document-import-file"
+            hidden
+            type="file"
+          />
+          </div>
+        <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="open-document-insert-table-modal"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">table_chart</span>
+            Insert Table
+          </button>
+          <button
+            class="standard-button"
+            data-action="open-document-insert-note-modal"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">note_add</span>
+            Insert Note
+          </button>
+          <button
+            class="standard-button"
+            data-action="export-document-markdown"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">download</span>
+            Export .md
+          </button>
+          <button
+            class="standard-button"
+            data-action="import-document-markdown"
+            type="button"
+            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">upload_file</span>
+            Import .md
+          </button>
+        </div>
+          <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="delete-document"
+            type="button"
+            ${disabled || documents.deleting ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">delete</span>
+            Delete
+          </button>
+          <button
+            class="signature-button"
+            data-action="save-document"
+            type="button"
+            ${disabled || !documents.dirty ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">save</span>
+            ${documents.saving ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    `;
+}
+
+function renderDocumentEditor(documents) {
+    if (!documents.editorVisible) {
+        return '';
+    }
+
+    return `
+      <section class="documents-pane documents-pane--editor">
+        <div class="documents-pane__header">
+          <span>Editor</span>
+          <span>${formatNumber(documents.draftContent.length)} chars</span>
+        </div>
+        <textarea
+          class="documents-editor-input custom-scrollbar"
+          data-bind="document-field"
+          data-field="content"
+          name="content"
+          spellcheck="true"
+          ${!documents.selectedId ? 'disabled' : ''}
+        >${escapeHtml(documents.draftContent)}</textarea>
+      </section>
+    `;
+}
+
+function renderDocumentPreview(documents) {
+    if (!documents.previewVisible) {
+        return '';
+    }
+
+    return `
+      <section class="documents-pane documents-pane--preview">
+        <div class="documents-pane__header">
+          <span>Preview</span>
+          <span>${escapeHtml(documents.dirty ? 'unsaved' : 'saved')}</span>
+        </div>
+        <div class="document-markdown-preview custom-scrollbar" data-document-preview>
+          ${renderMarkdownPreview(documents.draftContent)}
+        </div>
+      </section>
+    `;
+}
+
+function renderEmptyDocumentsState(documents) {
+    return `
+      <div class="documents-empty-state">
+        <span class="material-symbols-outlined">description</span>
+        <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+          No Documents
+        </p>
+        <button
+          class="signature-button mt-4"
+          data-action="create-document"
+          type="button"
+          ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+        >
+          <span class="material-symbols-outlined">add</span>
+          New Document
+        </button>
+      </div>
+    `;
+}
+
+function renderDocumentDetail(documents) {
+    if (documents.loading && !documents.items.length) {
+        return `
+          <main class="documents-view__detail">
+            <div class="documents-empty-state">
+              <span class="material-symbols-outlined">sync</span>
+              <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+                Loading Documents
+              </p>
+            </div>
+          </main>
+        `;
+    }
+
+    if (!documents.selectedId) {
+        return `
+          <main class="documents-view__detail">
+            ${renderEmptyDocumentsState(documents)}
+          </main>
+        `;
+    }
+
+    const paneCount = Number(documents.editorVisible) + Number(documents.previewVisible);
+
+    return `
+      <main class="documents-view__detail">
+        ${renderDocumentToolbar(documents)}
+        ${documents.saveError ? `<div class="documents-error">${escapeHtml(documents.saveError.message)}</div>` : ''}
+        <div class="documents-workspace ${paneCount > 1 ? 'documents-workspace--split' : ''}">
+          ${renderDocumentEditor(documents)}
+          ${renderDocumentPreview(documents)}
+        </div>
+      </main>
+    `;
+}
+
+export function renderDocumentsView(state) {
+    if (!state.connections.active) {
+        return {
+            main: renderMissingDatabase(),
+            panel: '',
+        };
+    }
+
+    const documents = state.documents;
+
+    return {
+        main: `<div class="documents-view">
+                ${renderDocumentsSidebar(documents)}
+                ${renderDocumentDetail(documents)}
+              </div>
+            </div>`,
+        panel: '',
+    };
+}

package/frontend/js/views/settings.js

@@ -24,6 +24,9 @@ function renderSettingsContent(state) {
     `;
     }
 
+    const appVersion = escapeHtml(state.settings.appVersion ?? '0.0.0');
+    const sqliteVersion = escapeHtml(state.settings.sqliteVersion ?? 'unknown');
+
     return `
     <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
       <section class="shell-section overflow-hidden">
@@ -32,14 +35,47 @@ function renderSettingsContent(state) {
           <span class="material-symbols-outlined text-xs text-primary-container">deployed_code</span>
         </div>
         <div class="space-y-5 p-6">
+          <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+            <div>
+              <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                Current_Version
+              </div>
+              <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+                v${appVersion}
+              </div>
+            </div>
+            <div>
+              <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                SQLite_Runtime
+              </div>
+              <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+                ${sqliteVersion}
+              </div>
+            </div>
+          </div>
+          <div class="border-t border-outline-variant/10 py-4 text-sm leading-6 text-on-surface-variant">
+            SQL functions and syntax are evaluated with this SQLite runtime.
+          </div>
+        </div>
+      </section>
+
+      <section class="shell-section overflow-hidden">
+        <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest px-4 py-2">
+          <span class="text-[10px] font-bold uppercase tracking-[0.25em]">CLI</span>
+          <span class="material-symbols-outlined text-xs text-primary-container">terminal</span>
+        </div>
+        <div class="space-y-4 p-6">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
-              Current_Version
+              Custom_Port
             </div>
-            <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-              v${escapeHtml(state.settings.appVersion ?? '0.0.0')}
+            <div class="mt-3 border border-outline-variant/10 bg-surface-container-high px-4 py-3 font-mono text-sm text-primary-container">
+              sqlite-hub --port:PORT
             </div>
           </div>
+          <div class="text-sm leading-6 text-on-surface-variant">
+            Start SQLite Hub with a different local port when the default port is already in use.
+          </div>
         </div>
       </section>
 

package/frontend/styles/components.css

@@ -588,6 +588,19 @@
     white-space: pre-wrap;
 }
 
+.copy-column-preview--editable {
+    display: block;
+    min-height: 10rem;
+    outline: none;
+    resize: vertical;
+    width: 100%;
+}
+
+.copy-column-preview--editable:focus {
+    border-color: rgb(var(--rgb-primary) / 0.55);
+    color: rgb(var(--rgb-on-surface) / 0.9);
+}
+
 .metric-card {
     background: var(--color-surface-low);
     display: flex;