sqlite-hub 0.11.1 → 0.16.0

package/frontend/js/components/modal.js

@@ -1,4 +1,10 @@
-import { escapeHtml, highlightSql, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from "../utils/format.js";
+import {
+  buildCopyColumnPreviewText,
+  getCopyColumnActionLabel,
+  getCopyColumnExportMetadata,
+  isMarkdownTodoCopyColumnMode,
+} from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 import {
   analyzeQueryChartResult,
@@ -800,6 +806,498 @@ function renderDeleteQueryHistoryForm(modal) {
   ].join("");
 }
 
+function renderQueryExportPreview(lines = []) {
+  return lines.map((line) => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join("");
+}
+
+function getExportOptions() {
+  return [
+    { label: "CSV", format: "csv", icon: "table_rows", meta: ".csv", preview: ["id,name", "1,Acme"] },
+    { label: "TSV", format: "tsv", icon: "view_column", meta: ".tsv", preview: ["id\tname", "1\tAcme"] },
+    {
+      label: "Markdown",
+      format: "md",
+      icon: "article",
+      meta: ".md",
+      preview: ["| id | name |", "| --- | --- |"],
+    },
+    {
+      label: "Duplicate",
+      format: "table",
+      icon: "table_chart",
+      meta: "as table",
+      preview: ["columns inferred", "rows prefilled"],
+    },
+  ];
+}
+
+function renderTextExportModal(modal, action) {
+  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+
+  return `
+    <div class="space-y-5" data-export-modal>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Filename
+        </span>
+        <input
+          autocomplete="off"
+          class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="filename"
+          spellcheck="false"
+          type="text"
+          value="${escapeHtml(modal.filename ?? "")}"
+          ${disabledAttribute}
+        />
+      </label>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        ${getExportOptions()
+          .map(
+            (option) => `
+              <button
+                class="group flex min-h-36 flex-col justify-between border border-outline-variant/20 bg-surface-container-low px-5 py-5 text-left text-on-surface transition-colors hover:border-primary-container/45 hover:bg-surface-container-high focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-container disabled:cursor-wait disabled:opacity-60"
+                data-action="${escapeHtml(action)}"
+                data-export-format="${escapeHtml(option.format)}"
+                type="button"
+                ${disabledAttribute}
+              >
+                <span class="flex w-full items-start justify-between gap-4">
+                  <span class="flex min-w-0 items-center gap-3">
+                    <span class="flex h-10 w-10 shrink-0 items-center justify-center border border-outline-variant/20 bg-surface-container-highest text-primary-container group-hover:border-primary-container/35">
+                      <span class="material-symbols-outlined text-xl">${escapeHtml(option.icon)}</span>
+                    </span>
+                    <span class="min-w-0">
+                      <span class="block truncate font-headline text-lg font-black uppercase tracking-normal text-primary-container">
+                        ${escapeHtml(option.label)}
+                      </span>
+                      <span class="mt-1 block font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
+                        ${escapeHtml(option.meta)}
+                      </span>
+                    </span>
+                  </span>
+                  <span class="material-symbols-outlined mt-1 text-base text-on-surface-variant/35 group-hover:text-primary-container">
+                    arrow_forward
+                  </span>
+                </span>
+                <span class="mt-5 block w-full overflow-hidden border border-outline-variant/10 bg-surface-container-lowest px-3 py-3 font-mono text-[11px] leading-5 text-on-surface-variant/70">
+                  ${renderQueryExportPreview(option.preview)}
+                </span>
+              </button>
+            `,
+          )
+          .join("")}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex justify-end">
+        <button class="standard-button" data-action="close-modal" type="button">
+          Cancel
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function renderQueryExportModal(modal) {
+  return renderTextExportModal(modal, "export-query-format");
+}
+
+function renderDataExportModal(modal) {
+  return renderTextExportModal(modal, "export-data-format");
+}
+
+function getCopyColumnResult(state, modal) {
+  return modal.scope === "charts" ? state.charts.result : state.editor.result;
+}
+
+function renderCopyColumnPreview(modal, state) {
+  const result = getCopyColumnResult(state, modal);
+  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) {
+    return "";
+  }
+
+  return `
+    <div class="space-y-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Preview
+      </div>
+      <pre class="copy-column-preview custom-scrollbar">${escapeHtml(preview)}</pre>
+    </div>
+  `;
+}
+
+function renderCopyColumnLineBreaksField({ checked = false, disabled = false } = {}) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Format
+      </span>
+      <span class="standard-checkbox ${disabled ? "is-disabled" : ""}">
+        <input
+          ${checked ? "checked" : ""}
+          ${disabled ? "disabled" : ""}
+          data-bind="copy-column-format-field"
+          data-field="lineBreaks"
+          name="lineBreaks"
+          type="checkbox"
+        />
+        <span>Line breaks</span>
+      </span>
+    </label>
+  `;
+}
+
+function renderCopyColumnFormatField({ label, name, value = "" }) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        class="control-input 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="copy-column-format-field"
+        data-field="${escapeHtml(name)}"
+        name="${escapeHtml(name)}"
+        type="text"
+        value="${escapeHtml(value)}"
+      />
+    </label>
+  `;
+}
+
+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;
+  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+  const exportMetadata = getCopyColumnExportMetadata(modal.copyMode);
+  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+  const lineBreaks = isMarkdownTodo || Boolean(modal.lineBreaks);
+  const formatFieldsMarkup = isMarkdownTodo
+    ? renderCopyColumnLineBreaksField({
+        checked: true,
+        disabled: true,
+      })
+    : `
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        ${renderCopyColumnFormatField({
+          label: "Separator",
+          name: "separator",
+          value: modal.separator ?? ",",
+        })}
+        ${renderCopyColumnFormatField({
+          label: "Wrapper",
+          name: "wrapper",
+          value: modal.wrapper ?? '"',
+        })}
+        ${renderCopyColumnLineBreaksField({
+          checked: lineBreaks,
+        })}
+      </div>
+    `;
+
+  return `
+    <form class="space-y-5" data-form="copy-column">
+      <input name="scope" type="hidden" value="${escapeHtml(modal.scope ?? "editor")}" />
+      <input name="columnName" type="hidden" value="${escapeHtml(modal.columnName ?? "")}" />
+      <input name="copyMode" type="hidden" value="${escapeHtml(modal.copyMode ?? "column")}" />
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Column
+        </div>
+        <div class="mt-2 flex min-w-0 items-center justify-between gap-4">
+          <code class="min-w-0 truncate font-mono text-sm text-primary-container" title="${escapeHtml(
+            modal.columnName ?? ""
+          )}">${escapeHtml(modal.columnName ?? "")}</code>
+          <span class="shrink-0 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/50">
+            ${escapeHtml(getCopyColumnActionLabel(modal.copyMode))} · ${formatNumber(valueCount)}
+          </span>
+        </div>
+      </div>
+      ${formatFieldsMarkup}
+      ${renderCopyColumnPreview(modal, state)}
+      ${renderError(modal.error)}
+      <div class="flex flex-wrap items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+          ${disabledAttribute}
+        >
+          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>
+    </form>
+  `;
+}
+
+function getTableDesignerUniqueConstraintTypeLabel(constraint) {
+  if (constraint.partial) {
+    return "Partial unique index";
+  }
+
+  if ((constraint.columns?.length ?? 0) > 1) {
+    return "Multi-column unique";
+  }
+
+  return "Unique constraint";
+}
+
+function renderTableDesignerUniqueConstraintExpression(constraint) {
+  const expression = String(constraint.expression || constraint.sql || "").trim();
+
+  if (expression) {
+    return expression;
+  }
+
+  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
+  return columns.length ? `UNIQUE (${columns.join(", ")})` : "UNIQUE constraint";
+}
+
+function renderTableDesignerCheckConstraintExpression(constraint) {
+  return String(constraint.expression || "").trim() || "CHECK constraint";
+}
+
+function normalizeTableDesignerConstraintColumnName(name) {
+  return String(name ?? "").trim().toLowerCase();
+}
+
+function tableDesignerConstraintIncludesColumn(constraint, columnName) {
+  const normalizedColumn = normalizeTableDesignerConstraintColumnName(columnName);
+
+  if (!normalizedColumn) {
+    return false;
+  }
+
+  return (constraint.columns ?? []).some(
+    (constraintColumn) =>
+      normalizeTableDesignerConstraintColumnName(constraintColumn.name) === normalizedColumn
+  );
+}
+
+function renderTableDesignerUniqueConstraintEditor(constraint) {
+  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
+
+  return `
+    <article class="table-designer-constraint-editor">
+      <div class="table-designer-constraint-editor__header">
+        <div class="min-w-0">
+          <div class="table-designer-constraint-editor__type">
+            ${escapeHtml(getTableDesignerUniqueConstraintTypeLabel(constraint))}
+            ${constraint.origin ? ` // origin ${escapeHtml(constraint.origin)}` : ""}
+          </div>
+          <input
+            class="table-designer-field table-designer-constraint-editor__name"
+            data-bind="table-designer-constraint-field"
+            data-constraint-id="${escapeHtml(constraint.id)}"
+            data-constraint-kind="unique"
+            data-field="name"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(constraint.name || "UNIQUE constraint")}"
+          />
+        </div>
+        <div class="status-badge status-badge--muted">Rebuild</div>
+      </div>
+      ${
+        columns.length
+          ? `
+            <div class="table-designer-constraint__columns">
+              ${columns.map((column) => `<span>${escapeHtml(column)}</span>`).join("")}
+            </div>
+          `
+          : ""
+      }
+      <textarea
+        class="table-designer-constraint-editor__sql custom-scrollbar"
+        data-bind="table-designer-constraint-field"
+        data-constraint-id="${escapeHtml(constraint.id)}"
+        data-constraint-kind="unique"
+        data-field="expression"
+        spellcheck="false"
+      >${escapeHtml(renderTableDesignerUniqueConstraintExpression(constraint))}</textarea>
+    </article>
+  `;
+}
+
+function renderTableDesignerCheckConstraintEditor(constraint) {
+  const columns = constraint.columns ?? [];
+  const allowedValues = columns.flatMap((column) =>
+    (column.allowedValues ?? []).map((value) => ({
+      columnName: column.name,
+      value,
+    }))
+  );
+
+  return `
+    <article class="table-designer-constraint-editor">
+      <div class="table-designer-constraint-editor__header">
+        <div class="min-w-0">
+          <div class="table-designer-constraint-editor__type">
+            ${columns.length ? escapeHtml(columns.map((column) => column.name).join(", ")) : "Table check"}
+          </div>
+          <input
+            class="table-designer-field table-designer-constraint-editor__name"
+            data-bind="table-designer-constraint-field"
+            data-constraint-id="${escapeHtml(constraint.id)}"
+            data-constraint-kind="check"
+            data-field="name"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(constraint.name || "CHECK constraint")}"
+          />
+        </div>
+        <div class="status-badge status-badge--muted">Rebuild</div>
+      </div>
+      ${
+        allowedValues.length
+          ? `
+            <div class="table-designer-constraint__values custom-scrollbar">
+              ${allowedValues
+                .map(
+                  (entry) => `
+                    <span title="${escapeHtml(entry.columnName)}">${escapeHtml(entry.value)}</span>
+                  `
+                )
+                .join("")}
+            </div>
+          `
+          : ""
+      }
+      <textarea
+        class="table-designer-constraint-editor__sql custom-scrollbar"
+        data-bind="table-designer-constraint-field"
+        data-constraint-id="${escapeHtml(constraint.id)}"
+        data-constraint-kind="check"
+        data-field="expression"
+        spellcheck="false"
+      >${escapeHtml(renderTableDesignerCheckConstraintExpression(constraint))}</textarea>
+    </article>
+  `;
+}
+
+function renderTableDesignerConstraintSection({ title, count, emptyText, body }) {
+  return `
+    <section class="table-designer-constraints-modal__section">
+      <div class="table-designer-constraints-modal__section-header">
+        <div class="table-designer-constraints-modal__section-title">${escapeHtml(title)}</div>
+        <div class="status-badge status-badge--muted">${formatNumber(count)}</div>
+      </div>
+      ${
+        count
+          ? `<div class="table-designer-constraints__list">${body}</div>`
+          : `<div class="table-designer-constraints-modal__empty">${escapeHtml(emptyText)}</div>`
+      }
+    </section>
+  `;
+}
+
+function renderTableDesignerConstraintsModal(modal, state) {
+  const draft = state.tableDesigner?.draft;
+
+  if (!draft) {
+    return `
+      <div class="table-designer-constraints-modal__empty">
+        No active table designer draft.
+      </div>
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Close</button>
+      </div>
+    `;
+  }
+
+  const selectedColumn = modal.columnId
+    ? (draft.columns ?? []).find((column) => column.id === modal.columnId)
+    : null;
+  const selectedColumnName = String(modal.columnName ?? selectedColumn?.name ?? "").trim();
+  const hasSelectedColumn = Boolean(modal.columnId || selectedColumnName);
+  const selectedColumnLabel = selectedColumnName || "Unnamed column";
+  const allUniqueConstraints = draft.mode === "edit" ? draft.uniqueConstraints ?? [] : [];
+  const allCheckConstraints = draft.mode === "edit" ? draft.checkConstraints ?? [] : [];
+  const uniqueConstraints = hasSelectedColumn
+    ? allUniqueConstraints.filter((constraint) =>
+        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
+      )
+    : allUniqueConstraints;
+  const checkConstraints = hasSelectedColumn
+    ? allCheckConstraints.filter((constraint) =>
+        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
+      )
+    : allCheckConstraints;
+  const totalCount = uniqueConstraints.length + checkConstraints.length;
+
+  return `
+    <div class="table-designer-constraints-modal">
+      <div class="table-designer-constraints-modal__summary">
+        <div class="min-w-0">
+          <div class="table-designer-constraints-modal__label">Table</div>
+          <code title="${escapeHtml(draft.tableName ?? "")}">${escapeHtml(draft.tableName ?? "")}</code>
+        </div>
+        ${
+          hasSelectedColumn
+            ? `
+              <div class="min-w-0">
+                <div class="table-designer-constraints-modal__label">Column</div>
+                <code title="${escapeHtml(selectedColumnLabel)}">${escapeHtml(selectedColumnLabel)}</code>
+              </div>
+            `
+            : ""
+        }
+        <div class="status-badge status-badge--primary">V2 · ${formatNumber(totalCount)}</div>
+      </div>
+      ${renderTableDesignerConstraintSection({
+        title: "Check constraints",
+        count: checkConstraints.length,
+        emptyText: hasSelectedColumn
+          ? "No check constraints detected for this column."
+          : "No check constraints detected.",
+        body: checkConstraints.map(renderTableDesignerCheckConstraintEditor).join(""),
+      })}
+      ${renderTableDesignerConstraintSection({
+        title: hasSelectedColumn ? "Related unique constraints" : "Unique constraints",
+        count: uniqueConstraints.length,
+        emptyText: hasSelectedColumn
+          ? "No related multi-column or partial unique constraints detected."
+          : "No multi-column or partial unique constraints detected.",
+        body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(""),
+      })}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Close</button>
+      </div>
+    </div>
+  `;
+}
+
 function renderCreateMediaTaggingMappingTableForm(modal, state) {
   const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
   const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
@@ -981,6 +1479,26 @@ export function renderModal(state) {
       title: "Delete Query",
       body: renderDeleteQueryHistoryForm(modal),
     },
+    "query-export": {
+      eyebrow: "SQL Editor // Export query result",
+      title: "Export Query",
+      body: renderQueryExportModal(modal),
+    },
+    "data-export": {
+      eyebrow: "Data Browser // Export table data",
+      title: "Export Table",
+      body: renderDataExportModal(modal),
+    },
+    "copy-column": {
+      eyebrow: "Results // Copy or export column values",
+      title: isMarkdownTodoCopyColumnMode(modal.copyMode) ? "Export Markdown Todo" : "Copy column",
+      body: renderCopyColumnModal(modal, state),
+    },
+    "table-designer-constraints": {
+      eyebrow: "Table Designer // Constraints",
+      title: "Checks",
+      body: renderTableDesignerConstraintsModal(modal, state),
+    },
     "create-media-tagging-tag-table": {
       eyebrow: "Media Tagging // Create default tag table",
       title: "Create Tag Table",
@@ -1001,7 +1519,13 @@ export function renderModal(state) {
 
   return `
     <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 === "row-update-preview" ? "max-w-3xl" : "max-w-xl"} border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div class="w-full ${
+        modal.kind === "chart-editor" ||
+        modal.kind === "row-update-preview" ||
+        modal.kind === "table-designer-constraints"
+          ? "max-w-3xl"
+          : "max-w-xl"
+      } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">

package/frontend/js/components/queryEditor.js

@@ -69,9 +69,17 @@ export function renderQueryEditor({
       data-next-value="${historyVisible ? "false" : "true"}"
       type="button"
     >
-      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "history"}</span>
+      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "visibility"}</span>
       ${historyVisible ? "Hide History" : "Show History"}
     </button>
+    <button
+      class="${secondaryButtonClass}"
+      data-action="format-current-query"
+      type="button"
+    >
+      <span class="material-symbols-outlined text-sm">format_align_left</span>
+      Format
+    </button>
     <button
       class="${secondaryButtonClass}"
       data-action="clear-query"
@@ -81,10 +89,11 @@ export function renderQueryEditor({
     </button>
     <button
       class="${secondaryButtonClass}"
-      data-action="export-query-csv"
+      data-action="open-query-export-modal"
       type="button"
     >
-      ${exporting ? "Exporting..." : "Export CSV"}
+      <span class="material-symbols-outlined text-sm">download</span>
+      ${exporting ? "Exporting..." : "Export"}
     </button>
     <button
       class="signature-button"