sqlite-hub 0.7.0 → 0.9.0

package/frontend/js/views/charts.js

@@ -50,10 +50,10 @@ function renderChartsList(state) {
         <div>
           <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            No Query History
+            No Chartable Queries
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
-            Run saved queries in the SQL Editor first. They will appear here automatically.
+            Run SELECT queries in the SQL Editor first. They will appear here automatically.
           </p>
         </div>
       </div>
@@ -157,7 +157,7 @@ function renderQuerySqlSection(state, rawSql) {
     return `
     <section class="mt-5 border border-outline-variant/10 bg-surface-container-lowest">
       <button
-        class="flex w-full items-center justify-between gap-3 border-b border-outline-variant/10 px-4 py-3 text-left"
+        class="standard-button flex w-full justify-between border-b border-outline-variant/10 px-4 text-left"
         data-action="toggle-charts-sql-panel"
         type="button"
       >
@@ -192,10 +192,13 @@ function renderQueryResultsSection(state) {
           Results
         </span>
         <button
-          class="toolbar-button query-chart-card__action"
+          class="standard-button"
           data-action="toggle-charts-results-panel"
           type="button"
         >
+          <span class="material-symbols-outlined text-sm">
+            ${isVisible ? 'table_rows_narrow' : 'table_rows'}
+          </span>
           ${isVisible ? 'Hide Results' : 'Show Results'}
         </button>
       </div>
@@ -244,7 +247,7 @@ function renderChartHeightPresetToggle(state) {
             .map(
                 preset => `
               <button
-                class="toolbar-button charts-height-toggle__button ${activePreset === preset.value ? 'is-active' : ''}"
+                class="standard-button charts-height-toggle__button ${activePreset === preset.value ? 'is-active' : ''}"
                 data-action="set-charts-height-preset"
                 data-preset="${preset.value}"
                 type="button"
@@ -312,7 +315,7 @@ function renderChartCard(chart, state, analysis) {
         </div>
         <div class="flex flex-wrap items-center gap-2">
           <button
-            class="toolbar-button query-chart-card__action"
+            class="standard-button"
             data-action="open-edit-query-chart-modal"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -320,7 +323,7 @@ function renderChartCard(chart, state, analysis) {
             Edit
           </button>
           <button
-            class="toolbar-button query-chart-card__action"
+            class="delete-button"
             data-action="open-delete-query-chart-modal"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -328,7 +331,7 @@ function renderChartCard(chart, state, analysis) {
             Delete
           </button>
           <button
-            class="toolbar-button query-chart-card__action"
+            class="standard-button"
             data-action="export-query-chart-png"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -347,6 +350,7 @@ function renderChartCard(chart, state, analysis) {
 function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
+    const historyVisible = state.editor.historyPanelVisible !== false;
 
     if (!selectedHistoryId) {
         return renderEmptyChartDetail();
@@ -384,32 +388,48 @@ function renderChartsDetail(state) {
     <div class="custom-scrollbar flex-1 overflow-auto">
       <div class="charts-detail-shell">
         <header class="charts-detail-shell__header">
-          <div class="min-w-0">
-            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Charts
-            </div>
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+            Charts
+          </div>
+          <div class="charts-detail-shell__title">
             <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(detail.item.displayTitle)}
             </h1>
           </div>
           <div class="charts-detail-shell__controls">
-            ${renderChartHeightPresetToggle(state)}
-            <button
-              class="toolbar-button charts-detail-shell__button"
-              data-action="open-query-history"
-              data-history-id="${escapeHtml(detail.item.id)}"
-              type="button"
-            >
-              Open In Editor
-            </button>
-            <button
-              class="toolbar-button charts-detail-shell__button charts-detail-shell__button--primary"
-              data-action="open-create-query-chart-modal"
-              type="button"
-              ${state.charts.resultError || !state.charts.result ? 'disabled' : ''}
-            >
-              New Chart
-            </button>
+            <div class="charts-detail-shell__controls-group">
+              ${renderChartHeightPresetToggle(state)}
+              <button
+                class="standard-button"
+                data-action="toggle-query-history-panel"
+                data-next-value="${historyVisible ? 'false' : 'true'}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">${
+                  historyVisible ? 'visibility_off' : 'history'
+                }</span>
+                ${historyVisible ? 'Hide Query History' : 'Show Query History'}
+              </button>
+            </div>
+            <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
+              <button
+                class="standard-button"
+                data-action="open-query-history"
+                data-history-id="${escapeHtml(detail.item.id)}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">terminal</span>
+                Open In Editor
+              </button>
+              <button
+                class="signature-button"
+                data-action="open-create-query-chart-modal"
+                type="button"
+                ${state.charts.resultError || !state.charts.result ? 'disabled' : ''}
+              >
+                New Chart
+              </button>
+            </div>
           </div>
         </header>
 
@@ -442,6 +462,8 @@ function renderChartsDetail(state) {
 }
 
 export function renderChartsView(state) {
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
     if (!state.connections.active && state.charts.error?.code === 'ACTIVE_DATABASE_REQUIRED') {
         return {
             main: `<section class="view-surface flex min-h-full">${renderMissingDatabase()}</section>`,
@@ -452,17 +474,23 @@ export function renderChartsView(state) {
     return {
         main: `
       <section class="charts-view">
-        <aside class="charts-view__sidebar">
-          <div class="charts-view__sidebar-header">
-            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-              Query History
-            </div>
-            <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              Charts
-            </h2>
-          </div>
-          ${renderChartsList(state)}
-        </aside>
+        ${
+            historyVisible
+                ? `
+                  <aside class="charts-view__sidebar">
+                    <div class="charts-view__sidebar-header">
+                      <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                        Query History
+                      </div>
+                      <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                        Charts
+                      </h2>
+                    </div>
+                    ${renderChartsList(state)}
+                  </aside>
+                `
+                : ''
+        }
         <div class="charts-view__detail">${renderChartsDetail(state)}</div>
       </section>
     `,

package/frontend/js/views/connections.js

@@ -8,32 +8,25 @@ function renderConnectionsActionButton({
   action = "open-modal",
   modal,
   tone = "secondary",
-  className = "",
   disabled = false,
 }) {
-  const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const toneClassName =
     tone === "primary"
-      ? "clipped-corner border border-primary-container bg-primary-container text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.65)] hover:bg-primary-fixed"
-      : "clipped-corner border border-outline-variant/20 bg-surface-container-highest text-primary-container shadow-[inset_2px_0_0_0_rgba(252,227,0,0.95)] hover:bg-surface-bright";
-  const iconClassName =
-    tone === "primary"
-      ? "text-base text-on-primary"
-      : "text-base text-primary-container/90";
-  const clipStyle = `style="--clip-path: ${clipPath};"`;
+      ? "signature-button"
+      : "standard-button";
+  const iconClassName = "";
   const modalAttribute = modal ? `data-modal="${modal}"` : "";
 
   return `
     <button
-      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors disabled:cursor-default disabled:opacity-40 ${toneClassName} ${className}"
+      class="${toneClassName}"
       data-action="${escapeHtml(action)}"
       ${modalAttribute}
-      ${clipStyle}
       type="button"
       ${disabled ? "disabled" : ""}
     >
       <span>${label}</span>
-      <span class="material-symbols-outlined ${iconClassName}">${icon}</span>
+      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ""}">${icon}</span>
     </button>
   `;
 }
@@ -77,13 +70,11 @@ function renderConnectionsBody(state) {
             icon: "folder_open",
             modal: "open-connection",
             tone: "primary",
-            className: "min-w-[17rem] px-8 py-6 text-sm",
           })}
           ${renderConnectionsActionButton({
             label: "Create Database",
             icon: "note_add",
             modal: "create-connection",
-            className: "min-w-[17rem] px-8 py-6 text-sm",
           })}
         </div>
       </div>
@@ -108,13 +99,11 @@ export function renderConnectionsView(state) {
       icon: "folder_open",
       modal: "open-connection",
       tone: "primary",
-      className: "min-w-[13rem]",
     })}
     ${renderConnectionsActionButton({
       label: "Create Database",
       icon: "note_add",
       modal: "create-connection",
-      className: "min-w-[13rem]",
     })}
     ${
       state.connections.active
@@ -122,7 +111,6 @@ export function renderConnectionsView(state) {
             label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
             icon: "inventory_2",
             action: "create-backup",
-            className: "min-w-[13rem]",
             disabled: state.connections.backupLoading,
           })
         : ""

package/frontend/js/views/data.js

@@ -3,6 +3,10 @@ import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
 import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
 
 function getSelectedRow(state) {
+    if (state.dataBrowser.selectedRow) {
+        return state.dataBrowser.selectedRow;
+    }
+
     const rowIndex = state.dataBrowser.selectedRowIndex;
 
     if (typeof rowIndex !== 'number') {
@@ -93,14 +97,14 @@ function renderWorkspaceHeader(state) {
           ${
               table
                   ? `<button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="toggle-data-tables"
                     type="button"
                   >
                     ${tablesVisible ? '<span class="material-symbols-outlined text-sm">visibility_off</span> Hide Tables' : 'Show Tables'}
                   </button>
                   <button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="export-data-csv"
                     type="button"
                   >
@@ -109,7 +113,7 @@ function renderWorkspaceHeader(state) {
                   : ''
           }
           <button
-            class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
@@ -119,11 +123,12 @@ function renderWorkspaceHeader(state) {
               table
                   ? `
                   <button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="navigate"
-                    data-to="/structure"
+                    data-to="/structure/${encodeURIComponent(table.name)}"
                     type="button"
                   >
+                  <span class="material-symbols-outlined">account_tree</span>
                     Open Structure
                   </button>
                 `
@@ -239,10 +244,10 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
 
     return `
     <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
-      <label class="flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-4 py-3">
+      <label class="control-shell flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-3">
         <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
         <input
-          class="min-w-0 flex-1 bg-transparent text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
+          class="control-input control-input--ghost min-w-0 flex-1 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
           data-bind="data-search-query"
           placeholder="Filter current page..."
           type="search"
@@ -250,7 +255,7 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
         />
       </label>
       <select
-        class="min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
+        class="control-select min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
         data-bind="data-search-column"
       >
         ${columns
@@ -340,13 +345,9 @@ function renderTableSurface(state) {
             getRowClass: (_, filteredIndex) => {
                 const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
 
-                return `${
-                    state.dataBrowser.selectedRowIndex === rowIndex
-                        ? 'bg-surface-bright'
-                        : filteredIndex % 2 === 0
-                          ? 'bg-surface-container-low'
-                          : 'bg-surface-container-lowest'
-                } cursor-pointer transition-colors hover:bg-surface-container-high`;
+                return `data-browser-row ${
+                    filteredIndex % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd'
+                } ${state.dataBrowser.selectedRowIndex === rowIndex ? 'is-selected' : ''} cursor-pointer transition-colors`;
             },
             getRowAttrs: (_, filteredIndex) => {
                 const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
@@ -390,10 +391,8 @@ function renderTableSurface(state) {
                   .map(
                       pageSize => `
                     <button
-                      class="border px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] transition-colors ${
-                          pageSize === (table.limit ?? state.dataBrowser.pageSize)
-                              ? 'border-primary-container/30 bg-surface-container-high text-primary-container'
-                              : 'border-outline-variant/20 text-on-surface hover:bg-surface-container-highest'
+                      class="standard-button ${
+                          pageSize === (table.limit ?? state.dataBrowser.pageSize) ? 'is-active' : ''
                       }"
                       data-action="set-data-page-size"
                       data-page-size="${pageSize}"
@@ -408,7 +407,7 @@ function renderTableSurface(state) {
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page - 1}"
               type="button"
@@ -420,7 +419,7 @@ function renderTableSurface(state) {
               page ${escapeHtml(formatNumber(page))} / ${escapeHtml(formatNumber(pageCount))}
             </div>
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page + 1}"
               type="button"
@@ -435,15 +434,23 @@ function renderTableSurface(state) {
   `;
 }
 
-function renderDataRowEditorPanel(state) {
+export function renderDataRowEditorPanel(state) {
     const table = state.dataBrowser.table;
     const rowIndex = state.dataBrowser.selectedRowIndex;
     const row = getSelectedRow(state);
+    const isIndexedRow = typeof rowIndex === 'number';
 
-    if (!table || !row || typeof rowIndex !== 'number') {
+    if (!table || !row) {
         return '';
     }
 
+    const foreignKeyColumnNames = new Set(
+        (table.foreignKeys ?? []).flatMap(foreignKey =>
+            (foreignKey.mappings ?? []).map(mapping => String(mapping.from ?? '').trim()).filter(Boolean),
+        ),
+    );
+    const getColumnBadges = column => (foreignKeyColumnNames.has(column.name) ? ['FK'] : []);
+
     const identityColumns = table.identityStrategy?.type === 'primaryKey' ? (table.identityStrategy.columns ?? []) : [];
     const editableColumns = (table.columnMeta ?? []).filter(column => {
         if (!column.visible || column.generated) {
@@ -477,10 +484,12 @@ function renderDataRowEditorPanel(state) {
     return renderRowEditorPanel({
         title: table.name,
         sectionLabel: 'Row Editor',
-        subtitle: `row ${rowIndex + 1}`,
+        subtitle: isIndexedRow ? `row ${rowIndex + 1}` : 'targeted row',
         closeAction: 'clear-data-row-selection',
         formName: 'save-data-row',
-        hiddenFields: [{ name: 'rowIndex', value: String(rowIndex) }],
+        hiddenFields: isIndexedRow
+            ? [{ name: 'rowIndex', value: String(rowIndex) }]
+            : [{ name: 'rowIdentity', value: JSON.stringify(row.__identity ?? null) }],
         disabledMessage: state.connections.active?.readOnly
             ? 'The active database is opened read-only, so row editing is disabled.'
             : table.notSafelyUpdatable
@@ -492,19 +501,23 @@ function renderDataRowEditorPanel(state) {
             return {
                 name: column.name,
                 label: column.name,
+                badges: getColumnBadges(column),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),
         readonlyFields: readonlyColumns.map(column => ({
             name: column.name,
-            label: column.name,
+            label: {
+                label: column.name,
+                badges: getColumnBadges(column),
+            },
             value: formatCellValue(row[column.name]),
         })),
         saveError: state.dataBrowser.saveError,
         saving: state.dataBrowser.saving,
         deleting: state.dataBrowser.deleting,
         deleteAction: 'delete-data-row',
-        deleteRowIndex: rowIndex,
+        deleteRowIndex: isIndexedRow ? rowIndex : null,
         deleteEnabled: Boolean(row.__identity),
         reloadAction: 'reload-data-route',
     });