sqlite-hub 0.12.0 → 0.17.0

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>
   `;
 }

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"

package/frontend/js/components/queryHistoryPanel.js

@@ -1,133 +1,130 @@
-import {
-  escapeHtml,
-  formatNumber,
-} from "../utils/format.js";
-import { renderStatusBadge } from "./badges.js";
+import { escapeHtml, formatNumber } from '../utils/format.js';
+import { renderStatusBadge } from './badges.js';
 
 function getQueryTypeTone(queryType) {
-  if (queryType === "select" || queryType === "update") {
-    return "success";
-  }
+    if (queryType === 'select' || queryType === 'update') {
+        return 'success';
+    }
 
-  if (queryType === "pragma") {
-    return "primary";
-  }
+    if (queryType === 'pragma') {
+        return 'primary';
+    }
 
-  return "muted";
+    return 'muted';
 }
 
 export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId) {
-  const isActive = Number(activeHistoryId) === Number(item.id);
-  const isSelected = Number(selectedHistoryId) === Number(item.id);
-  const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
-  const itemClasses = [
-    "query-history-item",
-    isActive ? "is-active" : "",
-    item.lastRun?.status === "error" ? "is-error" : "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  const tableMarkup = visibleTables
-    .map((tableName) =>
-      [
-        '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
-        escapeHtml(tableName),
-        "</span>",
-      ].join("")
-    )
-    .join("");
+    const isActive = Number(activeHistoryId) === Number(item.id);
+    const isSelected = Number(selectedHistoryId) === Number(item.id);
+    const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+    const itemClasses = [
+        'query-history-item',
+        isActive ? 'is-active' : '',
+        item.lastRun?.status === 'error' ? 'is-error' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const tableMarkup = visibleTables
+        .map(tableName =>
+            [
+                '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
+                escapeHtml(tableName),
+                '</span>',
+            ].join(''),
+        )
+        .join('');
 
-  return [
-    '<article class="',
-    itemClasses,
-    '"><button class="query-history-item-hit ',
-    isActive ? "is-active" : "",
-    '" data-action="select-query-history-item" data-history-id="',
-    escapeHtml(item.id),
-    '" type="button">',
-    '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">',
-    escapeHtml(item.displayTitle),
-    "</span>",
-    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
-    item.isSaved ? renderStatusBadge("saved", "primary") : "",
-    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
-    "</div>",
-    '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
-    escapeHtml(item.previewSql),
-    "</p></button>",
-    '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
-    '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
-    tableMarkup,
-    '</div><div class="flex items-center gap-1">',
-    '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
-    '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
-    '<button class="query-history-icon-button ',
-    item.isSaved ? "is-active" : "",
-    '" data-action="toggle-query-history-saved" data-history-id="',
-    escapeHtml(item.id),
-    '" data-next-value="',
-    item.isSaved ? "false" : "true",
-    '" title="',
-    item.isSaved ? "Remove from saved" : "Save query",
-    '" type="button"><span class="material-symbols-outlined text-[18px]">',
-    item.isSaved ? "bookmark" : "bookmark_add",
-    "</span></button>",
-    '<button class="query-history-icon-button ',
-    isSelected ? "is-active" : "",
-    '" data-action="select-query-history-item" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
-    "</div></div></article>",
-  ].join("");
+    return [
+        '<article class="',
+        itemClasses,
+        '"><button class="query-history-item-hit ',
+        isActive ? 'is-active' : '',
+        '" data-action="select-query-history-item" data-history-id="',
+        escapeHtml(item.id),
+        '" type="button">',
+        '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface w-full">',
+        escapeHtml(item.displayTitle),
+        '</span>',
+        renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+        item.isSaved ? renderStatusBadge('saved', 'primary') : '',
+        item.isDestructive ? renderStatusBadge('destructive', 'warning') : '',
+        '</div>',
+        '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
+        escapeHtml(item.previewSql),
+        '</p></button>',
+        '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
+        '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
+        tableMarkup,
+        '</div><div class="flex items-center gap-1">',
+        '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
+        '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
+        '<button class="query-history-icon-button ',
+        item.isSaved ? 'is-active' : '',
+        '" data-action="toggle-query-history-saved" data-history-id="',
+        escapeHtml(item.id),
+        '" data-next-value="',
+        item.isSaved ? 'false' : 'true',
+        '" title="',
+        item.isSaved ? 'Remove from saved' : 'Save query',
+        '" type="button"><span class="material-symbols-outlined text-[18px]">',
+        item.isSaved ? 'bookmark' : 'bookmark_add',
+        '</span></button>',
+        '<button class="query-history-icon-button ',
+        isSelected ? 'is-active' : '',
+        '" data-action="select-query-history-item" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
+        '</div></div></article>',
+    ].join('');
 }
 
 function renderQueryHistoryTabs(activeTab, historyTotal) {
-  const tabs = [
-    { id: "recent", label: "Recent" },
-    { id: "saved", label: "Saved" },
-    { id: "unsaved", label: "Unsaved" },
-    { id: "failed", label: "Failed" },
-  ];
+    const tabs = [
+        { id: 'recent', label: 'Recent' },
+        { id: 'saved', label: 'Saved' },
+        { id: 'unsaved', label: 'Unsaved' },
+        { id: 'failed', label: 'Failed' },
+    ];
 
-  return [
-    '<div class="flex items-center gap-2">',
-    tabs
-      .map((tab) =>
-        [
-          '<button class="query-history-tab ',
-          activeTab === tab.id ? "is-active" : "",
-          '" data-action="set-query-history-tab" data-tab="',
-          tab.id,
-          '" type="button">',
-          escapeHtml(tab.label),
-          "</button>",
-        ].join("")
-      )
-      .join(""),
-    '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
-    escapeHtml(formatNumber(historyTotal)),
-    "</span></div>",
-  ].join("");
+    return [
+        '<div class="flex items-center gap-2">',
+        tabs
+            .map(tab =>
+                [
+                    '<button class="query-history-tab ',
+                    activeTab === tab.id ? 'is-active' : '',
+                    '" data-action="set-query-history-tab" data-tab="',
+                    tab.id,
+                    '" type="button">',
+                    escapeHtml(tab.label),
+                    '</button>',
+                ].join(''),
+            )
+            .join(''),
+        '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
+        escapeHtml(formatNumber(historyTotal)),
+        '</span></div>',
+    ].join('');
 }
 
 export function renderQueryHistoryPanel({
-  items = [],
-  loading = false,
-  loadingMore = false,
-  error = null,
-  activeTab = "recent",
-  search = "",
-  committedSearch = "",
-  total = 0,
-  hasMore = false,
-  activeHistoryId = null,
-  selectedHistoryId = null,
+    items = [],
+    loading = false,
+    loadingMore = false,
+    error = null,
+    activeTab = 'recent',
+    search = '',
+    committedSearch = '',
+    total = 0,
+    hasMore = false,
+    activeHistoryId = null,
+    selectedHistoryId = null,
 }) {
-  return `
+    return `
     <aside class="query-history-panel border-l border-outline-variant/10 bg-surface-container-lowest">
       <div class="border-b border-outline-variant/10 px-4 py-4">
         <div class="flex items-center justify-between gap-3">
@@ -162,23 +159,23 @@ export function renderQueryHistoryPanel({
       <div
         class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3"
         data-query-history-committed-search="${escapeHtml(committedSearch)}"
-        data-query-history-loading-more="${loadingMore ? "true" : "false"}"
+        data-query-history-loading-more="${loadingMore ? 'true' : 'false'}"
         data-query-history-search="${escapeHtml(search)}"
         data-query-history-scroll
         data-query-history-tab="${escapeHtml(activeTab)}"
       >
         ${
-          error
-            ? `
+            error
+                ? `
               <div class="border border-error/30 bg-error-container/20 px-4 py-3 text-sm text-error">
                 ${escapeHtml(error.message)}
               </div>
             `
-            : ""
+                : ''
         }
         ${
-          !loading && !items.length
-            ? `
+            !loading && !items.length
+                ? `
               <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
                 <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
@@ -189,36 +186,34 @@ export function renderQueryHistoryPanel({
                 </p>
               </div>
             `
-            : ""
+                : ''
         }
           <div class="space-y-3">
-          ${items
-            .map((item) => renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId))
-            .join("")}
+          ${items.map(item => renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId)).join('')}
         </div>
         ${
-          loading
-            ? `
+            loading
+                ? `
               <div class="mt-4 text-center text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/50">
                 Loading query history...
               </div>
             `
-            : ""
+                : ''
         }
         ${
-          hasMore
-            ? `
+            hasMore
+                ? `
               <div class="mt-4 flex justify-center">
                 <button
                   class="standard-button"
                   data-action="load-more-query-history"
                   type="button"
                 >
-                  ${loadingMore ? "Loading..." : "Load More"}
+                  ${loadingMore ? 'Loading...' : 'Load More'}
                 </button>
               </div>
             `
-            : ""
+                : ''
         }
       </div>
     </aside>

package/frontend/js/components/queryResults.js

@@ -9,31 +9,93 @@ function getSortIcon(columnName, sortColumn, sortDirection) {
   return sortDirection === "desc" ? "south" : "north";
 }
 
-function renderSortableHeader(columnName, sortColumn, sortDirection) {
+const COPY_COLUMN_ACTIONS = [
+  { mode: "column", label: "Copy column" },
+  { mode: "column-with-header", label: "Copy column with header" },
+  { mode: "first-10", label: "Copy first 10" },
+  { mode: "markdown-todo", label: "Export as Markdown Todo" },
+];
+
+function renderColumnActionMenu(columnName, resultScope) {
+  return `
+    <details class="query-result-column-menu" data-copy-column-menu>
+      <summary
+        aria-label="Column actions for ${escapeHtml(columnName)}"
+        class="query-result-column-menu__toggle"
+        title="Column actions"
+      >
+        <span class="material-symbols-outlined" aria-hidden="true">more_vert</span>
+      </summary>
+      <div class="query-result-column-menu__panel" role="menu">
+        ${COPY_COLUMN_ACTIONS.map(
+          (item) => `
+            <button
+              class="query-result-column-menu__item"
+              data-action="open-copy-column-modal"
+              data-column-name="${escapeHtml(columnName)}"
+              data-copy-mode="${escapeHtml(item.mode)}"
+              data-result-scope="${escapeHtml(resultScope)}"
+              role="menuitem"
+              type="button"
+            >
+              ${escapeHtml(item.label)}
+            </button>
+          `
+        ).join("")}
+      </div>
+    </details>
+  `;
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection, { resultScope, sortAction }) {
   const isActive = columnName === sortColumn;
+  const labelMarkup = `<span class="query-result-column-label truncate" title="${escapeHtml(columnName)}">${escapeHtml(
+    columnName
+  )}</span>`;
 
   return `
-    <button
-      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
-        isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
-      }"
-      data-action="sort-editor-results-column"
+    <div
+      class="query-result-column-header"
       data-column-name="${escapeHtml(columnName)}"
-      type="button"
+      data-result-column-header
+      data-result-scope="${escapeHtml(resultScope)}"
     >
-      <span class="truncate">${escapeHtml(columnName)}</span>
-      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
-        columnName,
-        sortColumn,
-        sortDirection
-      )}</span>
-    </button>
+      ${
+        sortAction
+          ? `
+            <button
+              class="query-result-column-sort ${
+                isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
+              }"
+              data-action="${escapeHtml(sortAction)}"
+              data-column-name="${escapeHtml(columnName)}"
+              type="button"
+            >
+              ${labelMarkup}
+              <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+                columnName,
+                sortColumn,
+                sortDirection
+              )}</span>
+            </button>
+          `
+          : `<span class="query-result-column-static text-on-surface-variant">${labelMarkup}</span>`
+      }
+      ${renderColumnActionMenu(columnName, resultScope)}
+    </div>
   `;
 }
 
 export function renderQueryResultsPane(
   result,
-  { selectedRowIndex = null, editable = false, sortColumn = null, sortDirection = null } = {}
+  {
+    selectedRowIndex = null,
+    editable = false,
+    sortColumn = null,
+    sortDirection = null,
+    resultScope = "editor",
+    sortAction = "sort-editor-results-column",
+  } = {}
 ) {
   if (!result) {
     return `
@@ -48,8 +110,8 @@ export function renderQueryResultsPane(
 
   const columns = (result.columns ?? []).map((columnName) => ({
     headerClassName:
-      "border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
-    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection),
+      "query-result-header-cell border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
+    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection, { resultScope, sortAction }),
     cellClassName: "px-4 py-3 align-top text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);