sqlite-hub 0.9.3 → 0.9.6

package/frontend/js/components/tableDesignerEditor.js

@@ -57,123 +57,98 @@ function getReferencedColumns(draft, catalogTables, referencesTable) {
 
 function renderColumnRow(column, draft, catalogTables) {
   const referenceColumns = getReferencedColumns(draft, catalogTables, column.referencesTable);
+  const typeOptions = draft.supportedTypes
+    .map((type) =>
+      [
+        '<option value="',
+        escapeHtml(type),
+        '" ',
+        type === column.type ? "selected" : "",
+        ">",
+        escapeHtml(type),
+        "</option>",
+      ].join("")
+    )
+    .join("");
+  const referenceTableOptions = catalogTables
+    .map((table) =>
+      [
+        '<option value="',
+        escapeHtml(table.name),
+        '" ',
+        table.name === column.referencesTable ? "selected" : "",
+        ">",
+        escapeHtml(table.name),
+        "</option>",
+      ].join("")
+    )
+    .join("");
+  const referenceColumnOptions = referenceColumns
+    .map((name) =>
+      [
+        '<option value="',
+        escapeHtml(name),
+        '" ',
+        name === column.referencesColumn ? "selected" : "",
+        ">",
+        escapeHtml(name),
+        "</option>",
+      ].join("")
+    )
+    .join("");
 
-  return `
-    <div class="table-designer-grid__row">
-      <input
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="name"
-        placeholder="column_name"
-        spellcheck="false"
-        type="text"
-        value="${escapeHtml(column.name)}"
-      />
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="type"
-      >
-        ${draft.supportedTypes
-          .map(
-            (type) => `
-              <option value="${escapeHtml(type)}" ${type === column.type ? "selected" : ""}>
-                ${escapeHtml(type)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="notNull"
-          type="checkbox"
-          ${column.notNull ? "checked" : ""}
-        />
-        <span>Not null</span>
-      </label>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="unique"
-          type="checkbox"
-          ${column.unique ? "checked" : ""}
-        />
-        <span>Unique</span>
-      </label>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="primaryKey"
-          type="checkbox"
-          ${column.primaryKey ? "checked" : ""}
-        />
-        <span>PK</span>
-      </label>
-      <input
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="defaultValue"
-        placeholder="SQL default"
-        spellcheck="false"
-        type="text"
-        value="${escapeHtml(column.defaultValue)}"
-      />
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="referencesTable"
-      >
-        <option value="">No FK table</option>
-        ${catalogTables
-          .map(
-            (table) => `
-              <option
-                value="${escapeHtml(table.name)}"
-                ${table.name === column.referencesTable ? "selected" : ""}
-              >
-                ${escapeHtml(table.name)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="referencesColumn"
-      >
-        <option value="">No FK column</option>
-        ${referenceColumns
-          .map(
-            (name) => `
-              <option value="${escapeHtml(name)}" ${name === column.referencesColumn ? "selected" : ""}>
-                ${escapeHtml(name)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <button
-        class="delete-button"
-        data-action="remove-table-designer-column"
-        data-column-id="${escapeHtml(column.id)}"
-        type="button"
-      >
-        <span class="material-symbols-outlined text-base">delete</span>
-        <span>Remove</span>
-      </button>
-    </div>
-  `;
+  const columnId = escapeHtml(column.id);
+
+  return [
+    '<div class="table-designer-grid__row">',
+    '<input class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="name" placeholder="column_name" spellcheck="false" type="text" value="',
+    escapeHtml(column.name),
+    '" />',
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="type">',
+    typeOptions,
+    "</select>",
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="notNull" type="checkbox" ',
+    column.notNull ? "checked" : "",
+    ' /><span>Not null</span></label>',
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="unique" type="checkbox" ',
+    column.unique ? "checked" : "",
+    ' /><span>Unique</span></label>',
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="primaryKey" type="checkbox" ',
+    column.primaryKey ? "checked" : "",
+    ' /><span>PK</span></label>',
+    '<input class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="defaultValue" placeholder="SQL default" spellcheck="false" type="text" value="',
+    escapeHtml(column.defaultValue),
+    '" />',
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="referencesTable"><option value="">No FK table</option>',
+    referenceTableOptions,
+    "</select>",
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="referencesColumn"><option value="">No FK column</option>',
+    referenceColumnOptions,
+    "</select>",
+    '<button class="delete-button" data-action="remove-table-designer-column" data-column-id="',
+    columnId,
+    '" type="button"><span class="material-symbols-outlined text-base">delete</span><span>Remove</span></button>',
+    "</div>",
+  ].join("");
 }
 
 function renderColumnGrid(draft, catalogTables) {

package/frontend/js/store.js

@@ -32,6 +32,8 @@ const DEFAULT_SETTINGS = {
 const DEFAULT_DATA_PAGE_SIZE = 50;
 const DATA_PAGE_SIZES = [25, 50, 100];
 const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
+const CHARTS_HISTORY_TAB_STORAGE_KEY = 'charts_history_tab';
+const QUERY_HISTORY_TAB_STORAGE_KEY = 'query_history_tab';
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
@@ -64,6 +66,38 @@ function storeDataPageSize(pageSize) {
     }
 }
 
+function readStoredChartsHistoryTab(fallback = 'recent') {
+    try {
+        return normalizeChartsHistoryTab(globalThis.localStorage?.getItem(CHARTS_HISTORY_TAB_STORAGE_KEY) ?? fallback);
+    } catch {
+        return normalizeChartsHistoryTab(fallback);
+    }
+}
+
+function storeChartsHistoryTab(tab) {
+    try {
+        globalThis.localStorage?.setItem(CHARTS_HISTORY_TAB_STORAGE_KEY, normalizeChartsHistoryTab(tab));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
+function readStoredQueryHistoryTab(fallback = 'recent') {
+    try {
+        return normalizeQueryHistoryTab(globalThis.localStorage?.getItem(QUERY_HISTORY_TAB_STORAGE_KEY) ?? fallback);
+    } catch {
+        return normalizeQueryHistoryTab(fallback);
+    }
+}
+
+function storeQueryHistoryTab(tab) {
+    try {
+        globalThis.localStorage?.setItem(QUERY_HISTORY_TAB_STORAGE_KEY, normalizeQueryHistoryTab(tab));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
 const state = {
     ready: false,
     route: { name: 'landing', path: '/', params: {} },
@@ -117,7 +151,7 @@ const state = {
         historyLoading: false,
         historyLoadingMore: false,
         historyError: null,
-        historyTab: 'recent',
+        historyTab: readStoredQueryHistoryTab(),
         historySearchInput: '',
         historySearch: '',
         historyPageSize: QUERY_HISTORY_PAGE_SIZE,
@@ -146,7 +180,7 @@ const state = {
         queries: [],
         loading: false,
         error: null,
-        historyTab: 'recent',
+        historyTab: readStoredChartsHistoryTab(),
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
         sqlExpanded: false,
@@ -690,7 +724,7 @@ function resetChartsState() {
     state.charts.queries = [];
     state.charts.loading = false;
     state.charts.error = null;
-    state.charts.historyTab = 'recent';
+    state.charts.historyTab = readStoredChartsHistoryTab(state.charts.historyTab);
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
     state.charts.sqlExpanded = false;
@@ -2290,6 +2324,7 @@ export function setChartsHistoryTab(tab) {
     }
 
     state.charts.historyTab = nextTab;
+    storeChartsHistoryTab(nextTab);
     emitChange();
 }
 
@@ -2621,6 +2656,7 @@ export async function setQueryHistoryTab(tab) {
     }
 
     state.editor.historyTab = normalizedTab;
+    storeQueryHistoryTab(normalizedTab);
     state.editor.historyActiveId = null;
     clearQueryHistoryDetailState();
     emitChange();

package/frontend/js/utils/dom.js

@@ -0,0 +1,28 @@
+function createRenderedMarkupFragment(contextNode, markup) {
+    const range = document.createRange();
+
+    range.selectNodeContents(contextNode);
+    return range.createContextualFragment(String(markup ?? ''));
+}
+
+// Renderers must escape user-controlled values before markup reaches this DOM boundary.
+export function replaceChildrenFromRenderedMarkup(target, markup) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+
+    target.replaceChildren(createRenderedMarkupFragment(target, markup));
+    return true;
+}
+
+export function replaceElementFromRenderedMarkup(target, markup) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+
+    const range = document.createRange();
+
+    range.selectNode(target);
+    target.replaceWith(range.createContextualFragment(String(markup ?? '')));
+    return true;
+}

package/frontend/js/utils/tableDesigner.js

@@ -713,13 +713,19 @@ function buildImportedInsertPreviewSql(draft, maxRows = 3) {
   }
 
   const columnSql = importedColumns.map((column) => quoteIdentifier(column.name)).join(", ");
-  const insertPrefix = `INSERT INTO ${quoteIdentifier(draft.tableName)} (${columnSql}) VALUES`;
+  const insertPrefix = [
+    "INSERT INTO",
+    quoteIdentifier(draft.tableName),
+    "(",
+    columnSql,
+    ") VALUES",
+  ].join(" ");
   const previewStatements = draft.importedCsvRows.slice(0, maxRows).map((row) => {
     const valueSql = importedColumns
       .map((column) => formatImportedCellValueForSql(column, row[column.importedValueIndex] ?? ""))
       .join(", ");
 
-    return `${insertPrefix} (${valueSql});`;
+    return [insertPrefix, "(", valueSql, ");"].join(" ");
   });
 
   if (draft.importedCsvRows.length > maxRows) {

package/frontend/js/views/charts.js

@@ -374,49 +374,29 @@ function renderChartSurface(chart, state, analysis) {
 function renderChartCard(chart, state, analysis) {
     const sizeClass = resolveChartCardSizeClass(state);
 
-    return `
-    <article class="query-chart-card ${sizeClass}">
-      <header class="query-chart-card__header">
-        <div class="min-w-0">
-          <div class="flex flex-wrap items-center gap-2">
-            <h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">
-              ${escapeHtml(chart.name)}
-            </h3>
-            ${renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')}
-          </div>
-        </div>
-        <div class="flex flex-wrap items-center gap-2">
-          <button
-            class="standard-button"
-            data-action="open-edit-query-chart-modal"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            class="delete-button"
-            data-action="open-delete-query-chart-modal"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Delete
-          </button>
-          <button
-            class="standard-button"
-            data-action="export-query-chart-png"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Export PNG
-          </button>
-        </div>
-      </header>
-      <div class="query-chart-card__body">
-        ${renderChartSurface(chart, state, analysis)}
-      </div>
-    </article>
-  `;
+    return [
+        '<article class="query-chart-card ',
+        sizeClass,
+        '"><header class="query-chart-card__header"><div class="min-w-0">',
+        '<div class="flex flex-wrap items-center gap-2">',
+        '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
+        escapeHtml(chart.name),
+        "</h3>",
+        renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
+        '</div></div><div class="flex flex-wrap items-center gap-2">',
+        '<button class="standard-button" data-action="open-edit-query-chart-modal" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Edit</button>',
+        '<button class="delete-button" data-action="open-delete-query-chart-modal" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Delete</button>',
+        '<button class="standard-button" data-action="export-query-chart-png" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Export PNG</button>',
+        '</div></header><div class="query-chart-card__body">',
+        renderChartSurface(chart, state, analysis),
+        "</div></article>",
+    ].join("");
 }
 
 export function renderChartsDetail(state) {