sqlite-hub 0.3.2 → 0.5.0

package/{js → frontend/js}/utils/format.js

@@ -5,6 +5,10 @@ const DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
   dateStyle: "medium",
   timeStyle: "short",
 });
+const COMPACT_DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+  dateStyle: "short",
+  timeStyle: "short",
+});
 
 export function escapeHtml(value = "") {
   return String(value)
@@ -52,6 +56,25 @@ export function formatDateTime(value) {
   return Number.isNaN(date.getTime()) ? String(value) : DATE_TIME_FORMATTER.format(date);
 }
 
+export function formatCompactDateTime(value) {
+  if (!value) {
+    return "N/A";
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? String(value) : COMPACT_DATE_TIME_FORMATTER.format(date);
+}
+
+export function formatDurationMs(value) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue) || numericValue < 0) {
+    return "N/A";
+  }
+
+  return `${numericValue.toLocaleString("en-US")} ms`;
+}
+
 export function formatRelativeBoolean(value) {
   return value ? "ENABLED" : "DISABLED";
 }

package/{js → frontend/js}/views/data.js

@@ -168,6 +168,110 @@ function getCellWidthClass(columnName) {
   return "max-w-[12rem]";
 }
 
+function getSortIcon(columnName, sortColumn, sortDirection) {
+  if (columnName !== sortColumn) {
+    return "unfold_more";
+  }
+
+  return sortDirection === "desc" ? "south" : "north";
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection, action) {
+  const isActive = columnName === sortColumn;
+
+  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="${action}"
+      data-column-name="${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="truncate">${escapeHtml(columnName)}</span>
+      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+        columnName,
+        sortColumn,
+        sortDirection
+      )}</span>
+    </button>
+  `;
+}
+
+function getFilteredTableRows(table, state) {
+  const allRows = table?.rows ?? [];
+  const availableColumns = table?.columns ?? [];
+  const searchQuery = String(state.dataBrowser.searchQuery ?? "").trim().toLowerCase();
+  const activeColumn = availableColumns.includes(state.dataBrowser.searchColumn)
+    ? state.dataBrowser.searchColumn
+    : (availableColumns[0] ?? "");
+
+  const indexedRows = allRows.map((row, index) => ({
+    row,
+    index,
+  }));
+
+  if (!searchQuery || !activeColumn) {
+    return {
+      activeColumn,
+      filteredRows: indexedRows,
+      searchQuery,
+    };
+  }
+
+  return {
+    activeColumn,
+    searchQuery,
+    filteredRows: indexedRows.filter(({ row }) =>
+      formatCellValue(row[activeColumn]).toLowerCase().includes(searchQuery)
+    ),
+  };
+}
+
+function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
+  const columns = table?.columns ?? [];
+
+  if (!table || !columns.length) {
+    return "";
+  }
+
+  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">
+        <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"
+          data-bind="data-search-query"
+          placeholder="Filter current page..."
+          type="search"
+          value="${escapeHtml(state.dataBrowser.searchQuery ?? "")}"
+        />
+      </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"
+        data-bind="data-search-column"
+      >
+        ${columns
+          .map(
+            (columnName) => `
+              <option value="${escapeHtml(columnName)}" ${
+                columnName === activeColumn ? "selected" : ""
+              }>
+                ${escapeHtml(columnName)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+      <div class="text-[10px] font-mono tracking-[0.14em] text-on-surface-variant/55">
+        ${escapeHtml(formatNumber(filteredRowCount))} match${
+          filteredRowCount === 1 ? "" : "es"
+        } on this page
+      </div>
+    </div>
+  `;
+}
+
 function renderTableSurface(state) {
   const table = state.dataBrowser.table;
 
@@ -197,10 +301,14 @@ function renderTableSurface(state) {
     `;
   }
 
+  const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
+  const sortColumn = state.dataBrowser.sortColumn;
+  const sortDirection = state.dataBrowser.sortDirection;
   const columns = (table.columns ?? []).map((columnName) => ({
-    label: escapeHtml(columnName),
     headerClassName:
-      "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-primary-container",
+      "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold tracking-[0.08em] text-primary-container",
+    renderHeader: () =>
+      renderSortableHeader(columnName, sortColumn, sortDirection, "sort-data-column"),
     cellClassName: "px-4 py-2 align-top text-[11px] text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);
@@ -219,25 +327,35 @@ function renderTableSurface(state) {
   const fromRow = totalRows === 0 ? 0 : (table.offset ?? 0) + 1;
   const toRow = totalRows === 0 ? 0 : Math.min((table.offset ?? 0) + (table.rows?.length ?? 0), totalRows);
   const pageSizes = [25, 50, 100];
+  const filteredRowCount = filteredRows.length;
+  const hasActiveSearch = Boolean(searchQuery);
 
   return `
     <div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">
+      ${renderTableSearchBar(table, state, activeColumn, filteredRowCount)}
       <div class="custom-scrollbar flex-1 overflow-auto">
         ${renderDataGrid({
           columns,
-          rows: table.rows ?? [],
+          rows: filteredRows.map(({ row }) => row),
           tableClass: "min-w-full border-collapse text-left font-mono text-xs",
           theadClass: "sticky top-0 z-10 bg-surface-container-highest",
           tbodyClass: "divide-y divide-outline-variant/5",
-          getRowClass: (_, index) =>
-            `${
-              state.dataBrowser.selectedRowIndex === index
+          getRowClass: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+            return `${
+              state.dataBrowser.selectedRowIndex === rowIndex
                 ? "bg-surface-bright"
-                : index % 2 === 0
+                : filteredIndex % 2 === 0
                   ? "bg-surface-container-low"
                   : "bg-surface-container-lowest"
-            } cursor-pointer transition-colors hover:bg-surface-container-high`,
-          getRowAttrs: (_, index) => `data-action="select-data-row" data-row-index="${index}"`,
+            } cursor-pointer transition-colors hover:bg-surface-container-high`;
+          },
+          getRowAttrs: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+            return `data-action="select-data-row" data-row-index="${rowIndex}"`;
+          },
         })}
         ${
           !table.rows?.length
@@ -248,6 +366,14 @@ function renderTableSurface(state) {
                   </p>
                 </div>
               `
+            : !filteredRowCount
+              ? `
+                  <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
+                    <p class="font-mono text-[10px] tracking-[0.18em] text-on-surface-variant/40">
+                      ${hasActiveSearch ? "No matching rows on this page." : "No rows available."}
+                    </p>
+                  </div>
+                `
             : ""
         }
       </div>
@@ -255,7 +381,7 @@ function renderTableSurface(state) {
         <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           showing ${escapeHtml(formatNumber(fromRow))}-${escapeHtml(formatNumber(toRow))} of ${escapeHtml(
             formatNumber(totalRows)
-          )} rows
+          )} rows${hasActiveSearch ? ` // ${escapeHtml(formatNumber(filteredRowCount))} visible on this page` : ""}
         </div>
         <div class="flex flex-wrap items-center gap-4">
           <div class="flex items-center gap-2">

package/{js → frontend/js}/views/editor.js

@@ -1,5 +1,7 @@
 import { renderBottomTabs } from "../components/bottomTabs.js";
 import { renderQueryEditor } from "../components/queryEditor.js";
+import { renderQueryHistoryDetail } from "../components/queryHistoryDetail.js";
+import { renderQueryHistoryPanel } from "../components/queryHistoryPanel.js";
 import { renderRowEditorPanel } from "../components/rowEditorPanel.js";
 import { renderQueryResultsPane } from "../components/queryResults.js";
 import { getCurrentConnection, getQueryMessages, getQueryPerformance } from "../store.js";
@@ -216,17 +218,17 @@ function renderResultsSurface(state, isResultsRoute) {
 
     content = state.connections.active
       ? renderQueryResultsPane(state.editor.result, {
-          exporting: state.editor.exportLoading,
           selectedRowIndex: state.editor.selectedRowIndex,
           editable: editingState.enabled,
-          editStatusMessage: editingState.message,
+          sortColumn: state.editor.resultSortColumn,
+          sortDirection: state.editor.resultSortDirection,
         })
       : renderMissingDatabase();
   }
 
   return `
     <div class="flex h-full min-h-0 flex-col border-t border-outline-variant/10 bg-surface-container-lowest">
-      ${renderBottomTabs(activeTab, counts)}
+      ${renderBottomTabs(state.editor.activeTab, counts)}
       <div class="min-h-0 flex-1">${content}</div>
     </div>
   `;
@@ -234,13 +236,13 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = isResultsRoute ? "h-1/4" : "min-h-[27.5%]";
-  const resultsSectionClass = isResultsRoute ? "h-3/4" : "flex-1";
+  const editorSectionClass = "min-h-[27.5%]";
+  const resultsSectionClass = "flex-1";
 
   return {
     main: `
-      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="flex h-full min-h-0 flex-1 flex-col">
+      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden xl:flex-row">
+        <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <section class="${editorSectionClass} flex min-h-0 flex-col ${
             isResultsRoute ? "border-b-4 border-background" : ""
           }">
@@ -248,17 +250,39 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               query: state.editor.sqlText,
               executing: state.editor.executing,
               exporting: state.editor.exportLoading,
-              history: state.editor.history,
               historyLoading: state.editor.historyLoading,
+              historyTotal: state.editor.historyTotal,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
-          <section class="${resultsSectionClass} flex min-h-0 flex-col overflow-hidden">
+          <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">
             ${renderResultsSurface(state, isResultsRoute)}
           </section>
         </div>
+        ${renderQueryHistoryPanel({
+          items: state.editor.history,
+          loading: state.editor.historyLoading,
+          loadingMore: state.editor.historyLoadingMore,
+          error: state.editor.historyError,
+          activeTab: state.editor.historyTab,
+          search: state.editor.historySearchInput,
+          total: state.editor.historyTotal,
+          hasMore: state.editor.historyHasMore,
+          activeHistoryId: state.editor.historyActiveId,
+          selectedHistoryId: state.editor.historySelectedId,
+        })}
       </section>
     `,
-    panel: isResultsRoute ? renderEditorRowPanel(state) : "",
+    panel:
+      isResultsRoute && state.editor.selectedRowIndex !== null
+        ? renderEditorRowPanel(state)
+        : state.editor.historySelectedId
+          ? renderQueryHistoryDetail({
+              item: state.editor.historyDetail,
+              runs: state.editor.historyRuns,
+              loading: state.editor.historyDetailLoading,
+              error: state.editor.historyDetailError,
+            })
+          : "",
   };
 }

package/{js → frontend/js}/views/overview.js

@@ -126,6 +126,21 @@ function renderOperationalSurface(overview) {
           )
           .join("")}
       </div>
+      ${
+        overview.file?.path
+          ? `
+            <div class="border-t border-outline-variant/10 px-4 py-3">
+              <button
+                class="toolbar-button border border-outline-variant/20 bg-surface-container px-3 py-1.5 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+                data-action="open-overview-in-finder"
+                type="button"
+              >
+                Open In Finder
+              </button>
+            </div>
+          `
+          : ""
+      }
     </section>
   `;
 }

package/{js → frontend/js}/views/structure.js

@@ -6,8 +6,8 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
   const { compact = false, showMeta = true } = options;
 
   return `
-    <section class="shell-section p-5">
-      <div class="mb-4 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
+    <section class="shell-section flex flex-col p-5">
+      <div class="mb-4 shrink-0 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
         ${escapeHtml(title)}
       </div>
       ${
@@ -209,10 +209,6 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
               type="search"
             />
           </label>
-          <div class="structure-graph__toolbar-meta">
-            ${escapeHtml(formatNumber(graph.tables?.length ?? 0))} TABLES //
-            ${escapeHtml(formatNumber(graph.relationshipCount ?? 0))} RELATIONSHIPS
-          </div>
         </div>
         <div class="structure-graph__toolbar-actions">
           <button
@@ -293,8 +289,8 @@ export function renderStructureView(state) {
 
   return {
     main: `
-      <section class="view-surface min-h-full bg-surface-container">
-        <div class="view-frame space-y-8">
+      <section class="view-surface flex h-full min-h-0 flex-col bg-surface-container">
+        <div class="view-frame flex h-full min-h-0 flex-col">
           ${renderPageHeader({
             title: "Structure",
             subtitle: "Schema graph, foreign-key paths, raw DDL, and object metadata",
@@ -303,7 +299,7 @@ export function renderStructureView(state) {
           ${
             state.structure.loading && !structure
               ? `
-                <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+                <div class="flex min-h-0 flex-1 items-center justify-center border border-outline-variant/10 bg-surface-container-low">
                   <div class="text-center text-on-surface-variant/40">
                     <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
                     <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
@@ -312,7 +308,7 @@ export function renderStructureView(state) {
               `
               : state.structure.error
                 ? `
-                    <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+                    <div class="min-h-0 flex-1 border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
                       <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
                         ${escapeHtml(state.structure.error.code)}
                       </div>
@@ -321,8 +317,9 @@ export function renderStructureView(state) {
                   `
                 : structure
                   ? `
-                      <section class="grid grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
-                        <div class="space-y-6">
+                      <section class="grid min-h-0 flex-1 grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
+                        <div class="custom-scrollbar min-h-0 overflow-y-auto pr-1">
+                          <div class="space-y-6">
                           ${renderEntryGroup(
                             "Tables",
                             structure.grouped.tables,
@@ -345,6 +342,7 @@ export function renderStructureView(state) {
                             structure.grouped.triggers,
                             state.structure.selectedName
                           )}
+                          </div>
                         </div>
                         ${renderGraphSurface(
                           structure,

package/{styles → frontend/styles}/components.css

@@ -316,6 +316,112 @@
   padding: var(--spacing-3) var(--spacing-4);
 }
 
+.query-history-panel {
+  display: flex;
+  flex: 0 0 360px;
+  flex-direction: column;
+  min-height: 0;
+  width: 360px;
+}
+
+.query-history-item {
+  align-items: stretch;
+  background: var(--color-surface-low);
+  border: 1px solid rgba(75, 71, 50, 0.16);
+  border-left: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.query-history-item:hover {
+  background: var(--color-surface-high);
+  border-color: rgba(252, 227, 0, 0.18);
+}
+
+.query-history-item.is-active {
+  border-left-color: var(--color-primary-container);
+  box-shadow: 0 0 24px rgba(252, 227, 0, 0.06);
+}
+
+.query-history-item.is-error {
+  border-left-color: var(--color-error);
+}
+
+.query-history-item-hit {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: block;
+  min-width: 0;
+  padding: var(--spacing-3);
+  text-align: left;
+  transition: background-color var(--transition-fast);
+}
+
+.query-history-item-hit.is-active {
+  background: rgba(252, 227, 0, 0.08);
+}
+
+.query-history-icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: rgba(229, 226, 225, 0.6);
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+  width: 2rem;
+}
+
+.query-history-icon-button:hover,
+.query-history-icon-button.is-active {
+  background: var(--color-surface-highest);
+  color: var(--color-primary-container);
+}
+
+.query-history-tab {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  color: rgba(205, 199, 171, 0.45);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-status);
+  letter-spacing: 0.16em;
+  padding: 0.35rem 0;
+  text-transform: uppercase;
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.query-history-tab.is-active {
+  border-color: var(--color-primary-container);
+  color: var(--color-primary-container);
+}
+
+.query-history-sql-preview {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.query-history-detail-sql {
+  max-height: 240px;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 1279px) {
+  .query-history-panel {
+    border-left: 0;
+    border-top: 1px solid rgba(75, 71, 50, 0.16);
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+
 @media (min-width: 768px) {
   .top-nav-links {
     display: flex;

package/{styles → frontend/styles}/structure-graph.css

@@ -3,7 +3,8 @@
   border: 1px solid rgba(138, 123, 52, 0.26);
   display: flex;
   flex-direction: column;
-  min-height: 760px;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -100,14 +101,6 @@
   appearance: none;
 }
 
-.structure-graph__toolbar-meta {
-  color: rgba(231, 223, 189, 0.64);
-  font-family: var(--font-family-mono);
-  font-size: 0.625rem;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
 .structure-graph__button {
   align-items: center;
   background: rgba(17, 17, 15, 0.94);
@@ -193,8 +186,10 @@
 .structure-graph__inspector {
   background: linear-gradient(to bottom, rgba(26, 25, 23, 0.98), rgba(11, 11, 10, 0.99));
   border-left: 1px solid rgba(138, 123, 52, 0.24);
+  height: 100%;
   min-height: 0;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .structure-graph.is-inspector-hidden .structure-graph__inspector {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.3.2",
+    "version": "0.5.0",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -9,7 +9,7 @@
     "scripts": {
         "start": "node bin/sqlite-hub.js",
         "dev": "node --watch server/server.js --port:4180",
-        "publish": "bash publish_brew.sh && bash publish_npm.sh"
+        "publish": "bash scripts/publish_brew.sh && sleep 10 && npm login --auth-type=web && bash scripts/publish_npm.sh"
     },
     "dependencies": {
         "better-sqlite3": "^11.8.1",

package/{publish_brew.sh → scripts/publish_brew.sh}

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 cd "$ROOT_DIR"
 
 DRY_RUN=0
@@ -17,7 +17,7 @@ GH_REMOTE="origin"
 usage() {
   cat <<'EOF'
 Usage:
-  ./publish.sh [options]
+  ./scripts/publish_brew.sh [options]
 
 Options:
   --version X.Y.Z      Override the package.json version for this publish run.

package/{publish_npm.sh → scripts/publish_npm.sh}

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 cd "$ROOT_DIR"
 
 DRY_RUN=0
@@ -15,7 +15,7 @@ GH_REMOTE="origin"
 usage() {
   cat <<'EOF'
 Usage:
-  ./publish_npm.sh [options]
+  ./scripts/publish_npm.sh [options]
 
 Options:
   --tag NAME          Publish to a custom npm dist-tag instead of `latest`.

package/server/routes/connections.js

@@ -113,6 +113,8 @@ function createConnectionsRouter({ connectionManager, importService, backupServi
         filePath: req.body.path,
         label: req.body.label,
         readOnly: Boolean(req.body.readOnly),
+        logoUpload: req.body.logoUpload ?? null,
+        clearLogo: Boolean(req.body.clearLogo),
       });
 
       res.json(

package/server/routes/data.js

@@ -26,6 +26,8 @@ function createDataRouter({ dataBrowserService }) {
       const data = dataBrowserService.getTableData(req.params.tableName, {
         limit: req.query.limit,
         offset: req.query.offset,
+        sortColumn: req.query.sortColumn,
+        sortDirection: req.query.sortDirection,
       });
 
       res.json(

package/server/routes/export.js

@@ -24,7 +24,10 @@ function createExportRouter({ exportService }) {
   router.post(
     "/table.csv",
     route((req, res) => {
-      const result = exportService.exportTable(req.body?.tableName);
+      const result = exportService.exportTable(req.body?.tableName, {
+        sortColumn: req.body?.sortColumn,
+        sortDirection: req.body?.sortDirection,
+      });
       sendCsv(res, result);
     })
   );

package/server/routes/overview.js

@@ -31,6 +31,18 @@ function createOverviewRouter({ overviewService }) {
     })
   );
 
+  router.post(
+    "/overview/open-in-finder",
+    route(async (req, res) => {
+      await overviewService.revealActiveDatabaseInFinder();
+      res.json(
+        successResponse({
+          message: "Database file revealed in Finder.",
+        })
+      );
+    })
+  );
+
   return router;
 }