sqlite-hub 0.16.0 → 0.17.2

package/frontend/js/components/modal.js

@@ -1,5 +1,6 @@
 import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from "../utils/format.js";
 import {
+  buildCopyColumnText,
   buildCopyColumnPreviewText,
   getCopyColumnActionLabel,
   getCopyColumnExportMetadata,
@@ -170,7 +171,7 @@ function renderOpenConnectionForm(modal) {
         text: "Open read-only",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -244,7 +245,7 @@ function renderEditConnectionForm(modal) {
         text: "Open read-only",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -263,21 +264,41 @@ function renderEditConnectionForm(modal) {
   `;
 }
 
-function renderCreateDatabaseForm(modal) {
+export function renderCreateDatabaseForm(modal) {
   return `
     <form class="space-y-5" data-form="create-connection">
-      ${renderField({
-        label: "New SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/new-database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          New SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          <input
+            class="control-input min-w-0 flex-1 border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+            data-create-database-path
+            name="path"
+            placeholder="/absolute/path/to/new-database.sqlite"
+            type="text"
+          />
+          <button
+            class="standard-button flex-none"
+            data-action="choose-create-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-create-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose a folder and filename, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",
         placeholder: "Optional display name",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -363,7 +384,7 @@ function renderImportSqlForm(modal, state) {
         explicit path instead of file upload.
       </p>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -423,7 +444,7 @@ function renderDeleteRowConfirmForm(modal) {
     rowPreviewMarkup,
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Row",
@@ -513,7 +534,7 @@ function renderRowUpdatePreviewForm(modal) {
       </div>
       ${paramsMarkup}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit">
           ${modal.submitting ? 'Applying...' : 'Apply Changes'}
@@ -753,7 +774,7 @@ function renderChartEditorForm(modal, state) {
           : ""
       }
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -781,7 +802,7 @@ function renderDeleteChartForm(modal) {
     '<p class="text-sm leading-7 text-on-surface-variant/65">The linked query-history entry stays intact. Only this chart definition is removed.</p>',
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Chart",
@@ -798,7 +819,7 @@ function renderDeleteQueryHistoryForm(modal) {
     '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the query-history entry and all recorded runs linked to it.</p>',
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Query",
@@ -806,6 +827,147 @@ function renderDeleteQueryHistoryForm(modal) {
   ].join("");
 }
 
+function renderDeleteDocumentForm(modal) {
+  return [
+    '<form class="space-y-5" data-form="delete-document-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete document <span class="font-bold text-primary-container">',
+    escapeHtml(modal.filename ?? "document"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the Markdown document from the active database document folder.</p>',
+    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+    formatNumber(modal.contentLength ?? 0),
+    " chars</div>",
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-between gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Document",
+    "</button></div></form>",
+  ].join("");
+}
+
+function getDocumentInsertQueryTitle(query) {
+  return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
+}
+
+function getSelectedDocumentInsertQuery(modal) {
+  const selectedHistoryId = String(modal.selectedHistoryId ?? "");
+
+  return (modal.queries ?? []).find((query) => String(query.id) === selectedHistoryId) ?? null;
+}
+
+function renderDocumentInsertQuerySelect(modal, emptyText) {
+  const queries = modal.queries ?? [];
+
+  if (modal.loading) {
+    return '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">Loading saved queries...</div>';
+  }
+
+  if (!queries.length) {
+    return `<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">${escapeHtml(emptyText)}</div>`;
+  }
+
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Saved Query
+      </span>
+      <select
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        data-bind="document-insert-query-select"
+        name="historyId"
+      >
+        ${queries
+          .map(
+            (query) => `
+              <option
+                value="${escapeHtml(query.id)}"
+                ${String(query.id) === String(modal.selectedHistoryId) ? "selected" : ""}
+              >
+                ${escapeHtml(getDocumentInsertQueryTitle(query))}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+    </label>
+  `;
+}
+
+function renderDocumentInsertQueryPreview(query) {
+  if (!query) {
+    return "";
+  }
+
+  return `
+    <div class="space-y-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Query Preview
+      </div>
+      <pre class="max-h-44 overflow-auto border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-xs leading-6 text-on-surface-variant/75 custom-scrollbar">${escapeHtml(
+        query.rawSql || query.previewSql || ""
+      )}</pre>
+    </div>
+  `;
+}
+
+function renderDocumentInsertTableForm(modal) {
+  const selectedQuery = getSelectedDocumentInsertQuery(modal);
+  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
+    ? 'disabled aria-disabled="true"'
+    : "";
+
+  return `
+    <form class="space-y-5" data-form="document-insert-table">
+      ${renderDocumentInsertQuerySelect(modal, "No saved queries are available for this database.")}
+      ${renderDocumentInsertQueryPreview(selectedQuery)}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${disabledAttribute}>
+          ${modal.submitting ? "Inserting..." : "Insert Table"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderDocumentInsertNoteForm(modal) {
+  const selectedQuery = getSelectedDocumentInsertQuery(modal);
+  const note = String(selectedQuery?.notes ?? "").trim();
+  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
+    ? 'disabled aria-disabled="true"'
+    : "";
+
+  return `
+    <form class="space-y-5" data-form="document-insert-note">
+      ${renderDocumentInsertQuerySelect(modal, "No saved queries with notes are available for this database.")}
+      ${
+        note
+          ? `
+            <div class="space-y-2">
+              <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+                Note Preview
+              </div>
+              <pre class="max-h-64 overflow-auto whitespace-pre-wrap border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm leading-6 text-on-surface custom-scrollbar">${escapeHtml(
+                note
+              )}</pre>
+            </div>
+          `
+          : ""
+      }
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${disabledAttribute}>
+          ${modal.submitting ? "Inserting..." : "Insert Note"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 function renderQueryExportPreview(lines = []) {
   return lines.map((line) => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join("");
 }
@@ -888,7 +1050,7 @@ function renderTextExportModal(modal, action) {
           .join("")}
       </div>
       ${renderError(modal.error)}
-      <div class="flex justify-end">
+      <div class="flex justify-start">
         <button class="standard-button" data-action="close-modal" type="button">
           Cancel
         </button>
@@ -911,23 +1073,47 @@ function getCopyColumnResult(state, modal) {
 
 function renderCopyColumnPreview(modal, state) {
   const result = getCopyColumnResult(state, modal);
+  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
   const separator = Boolean(modal.lineBreaks) && !isMarkdownTodoCopyColumnMode(modal.copyMode)
     ? "\n"
     : String(modal.separator ?? ",");
   const wrapper = String(modal.wrapper ?? '"');
-  const preview = buildCopyColumnPreviewText({
-    result,
-    columnName: modal.columnName,
-    copyMode: modal.copyMode,
-    separator,
-    wrapper,
-    maxRows: isMarkdownTodoCopyColumnMode(modal.copyMode) ? 10 : 4,
-  });
-
-  if (!preview) {
+  const preview = isMarkdownTodo
+    ? modal.editedText ?? buildCopyColumnText({
+        result,
+        columnName: modal.columnName,
+        copyMode: modal.copyMode,
+        separator: "\n",
+        wrapper,
+      }).text
+    : buildCopyColumnPreviewText({
+        result,
+        columnName: modal.columnName,
+        copyMode: modal.copyMode,
+        separator,
+        wrapper,
+        maxRows: 4,
+      });
+
+  if (!preview && !isMarkdownTodo) {
     return "";
   }
 
+  if (isMarkdownTodo) {
+    return `
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Editable Preview
+        </span>
+        <textarea
+          class="copy-column-preview copy-column-preview--editable custom-scrollbar"
+          name="editedText"
+          spellcheck="true"
+        >${escapeHtml(preview)}</textarea>
+      </label>
+    `;
+  }
+
   return `
     <div class="space-y-2">
       <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -977,7 +1163,7 @@ function renderCopyColumnFormatField({ label, name, value = "" }) {
   `;
 }
 
-function renderCopyColumnModal(modal, state) {
+export function renderCopyColumnModal(modal, state) {
   const result = getCopyColumnResult(state, modal);
   const rows = result?.rows ?? [];
   const valueCount = modal.copyMode === "first-10" ? Math.min(rows.length, 10) : rows.length;
@@ -1029,7 +1215,7 @@ function renderCopyColumnModal(modal, state) {
       ${formatFieldsMarkup}
       ${renderCopyColumnPreview(modal, state)}
       ${renderError(modal.error)}
-      <div class="flex flex-wrap items-center justify-end gap-3 pt-2">
+      <div class="flex flex-wrap items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -1038,24 +1224,41 @@ function renderCopyColumnModal(modal, state) {
         >
           Cancel
         </button>
-        <button
-          class="standard-button"
-          name="intent"
-          type="submit"
-          value="export"
-          ${disabledAttribute}
-        >
-          ${modal.submitting ? "Working..." : `Export as ${exportMetadata.extension.toUpperCase()}`}
-        </button>
-        <button
-          class="signature-button"
-          name="intent"
-          type="submit"
-          value="copy"
-          ${disabledAttribute}
-        >
-          ${modal.submitting ? "Working..." : "Copy"}
-        </button>
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          <button
+            class="standard-button"
+            name="intent"
+            type="submit"
+            value="export"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : `Export as ${exportMetadata.extension.toUpperCase()}`}
+          </button>
+          ${
+            isMarkdownTodo
+              ? `
+          <button
+            class="standard-button"
+            name="intent"
+            type="submit"
+            value="document"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : "Export to document folder"}
+          </button>
+          `
+              : ""
+          }
+          <button
+            class="signature-button"
+            name="intent"
+            type="submit"
+            value="copy"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : "Copy"}
+          </button>
+        </div>
       </div>
     </form>
   `;
@@ -1230,7 +1433,7 @@ function renderTableDesignerConstraintsModal(modal, state) {
       <div class="table-designer-constraints-modal__empty">
         No active table designer draft.
       </div>
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Close</button>
       </div>
     `;
@@ -1291,7 +1494,7 @@ function renderTableDesignerConstraintsModal(modal, state) {
           : "No multi-column or partial unique constraints detected.",
         body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(""),
       })}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Close</button>
       </div>
     </div>
@@ -1336,7 +1539,7 @@ function renderCreateMediaTaggingMappingTableForm(modal, state) {
         ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL)}
       </div>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -1400,7 +1603,7 @@ function renderCreateMediaTaggingTagTableForm(modal, state) {
         ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL)}
       </div>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -1479,6 +1682,21 @@ export function renderModal(state) {
       title: "Delete Query",
       body: renderDeleteQueryHistoryForm(modal),
     },
+    "delete-document": {
+      eyebrow: "Documents // Confirm deletion",
+      title: "Delete Document",
+      body: renderDeleteDocumentForm(modal),
+    },
+    "document-insert-table": {
+      eyebrow: "Documents // Saved query output",
+      title: "Insert Table",
+      body: renderDocumentInsertTableForm(modal),
+    },
+    "document-insert-note": {
+      eyebrow: "Documents // Saved query notes",
+      title: "Insert Note",
+      body: renderDocumentInsertNoteForm(modal),
+    },
     "query-export": {
       eyebrow: "SQL Editor // Export query result",
       title: "Export Query",
@@ -1521,6 +1739,8 @@ export function renderModal(state) {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
       <div class="w-full ${
         modal.kind === "chart-editor" ||
+        modal.kind === "document-insert-table" ||
+        modal.kind === "document-insert-note" ||
         modal.kind === "row-update-preview" ||
         modal.kind === "table-designer-constraints"
           ? "max-w-3xl"

package/frontend/js/components/pageHeader.js

@@ -1,33 +1,31 @@
-import { escapeHtml } from "../utils/format.js";
+import { escapeHtml } from '../utils/format.js';
 
-export function renderPageHeader({ eyebrow = "", title, subtitle = "", actions = "" }) {
-  return `
+export function renderPageHeader({ eyebrow = '', title, subtitle = '', actions = '' }) {
+    return `
     <div class="mb-10 flex flex-wrap items-end justify-between gap-6">
       <div>
         ${
-          eyebrow
-            ? `
+            eyebrow
+                ? `
               <div class="page-eyebrow">
                 <span class="text-[#FCE300] text-xs font-mono font-bold tracking-widest uppercase">${escapeHtml(
-                  eyebrow
+                    eyebrow,
                 )}</span>
                 <div class="page-eyebrow-line"></div>
               </div>
             `
-            : ""
+                : ''
         }
-        <h1 class="text-5xl font-headline font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(
-          title
-        )}</h1>
+        <h1 class="text-5xl font-headline font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(title)}</h1>
         ${
-          subtitle
-            ? `<p class="text-xs font-mono text-on-surface/40 mt-1 uppercase tracking-widest">${escapeHtml(
-                subtitle
-              )}</p>`
-            : ""
+            subtitle
+                ? `<p class="text-xs font-mono text-on-surface/40 mt-1 uppercase tracking-widest">${escapeHtml(
+                      subtitle,
+                  )}</p>`
+                : ''
         }
       </div>
-      ${actions ? `<div class="flex gap-3">${actions}</div>` : ""}
+      ${actions ? `<div class="flex gap-3">${actions}</div>` : ''}
     </div>
   `;
 }