sqlite-hub 0.9.13 → 0.11.1

package/frontend/js/views/data.js

@@ -16,8 +16,37 @@ function getSelectedRow(state) {
     return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
 }
 
+function getFilteredTables(tables, searchQuery) {
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
+
+    if (!normalizedSearch) {
+        return tables;
+    }
+
+    return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
+}
+
+function renderDataTableSearch(state) {
+    return `
+      <label class="table-designer-sidebar__search">
+        <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+        <input
+          class="table-designer-sidebar__search-input"
+          data-bind="data-table-search"
+          placeholder="Search tables..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(state.dataBrowser.tableSearchQuery ?? '')}"
+        />
+      </label>
+    `;
+}
+
 function renderTableList(state) {
     const tables = state.dataBrowser.tables ?? [];
+    const filteredTables = getFilteredTables(tables, state.dataBrowser.tableSearchQuery);
     const activeName = state.dataBrowser.selectedTable;
 
     if (state.dataBrowser.loading && !tables.length) {
@@ -39,10 +68,18 @@ function renderTableList(state) {
     `;
     }
 
+    if (!filteredTables.length) {
+        return `
+      <div class="px-6 py-6 text-sm text-on-surface-variant/55">
+        No tables match the current search.
+      </div>
+    `;
+    }
+
     return `
     <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
       <div class="space-y-2">
-        ${tables
+        ${filteredTables
             .map(
                 table => `
               <button
@@ -203,71 +240,88 @@ function renderSortableHeader(columnName, sortColumn, sortDirection, action) {
   `;
 }
 
-function getFilteredTableRows(table, state) {
-    const allRows = table?.rows ?? [];
+function getActiveFilterColumn(table, state) {
     const availableColumns = table?.columns ?? [];
-    const searchQuery = String(state.dataBrowser.searchQuery ?? '')
-        .trim()
-        .toLowerCase();
-    const activeColumn = availableColumns.includes(state.dataBrowser.searchColumn)
+
+    return availableColumns.includes(state.dataBrowser.searchColumn)
         ? state.dataBrowser.searchColumn
         : (availableColumns[0] ?? '');
+}
 
-    const indexedRows = allRows.map((row, index) => ({
-        row,
-        index,
-    }));
+function isTextFilterColumn(table, columnName) {
+    const column = (table?.columnMeta ?? []).find(item => item.name === columnName);
+
+    return String(column?.affinity ?? '').toUpperCase() === 'TEXT';
+}
 
-    if (!searchQuery || !activeColumn) {
-        return {
-            activeColumn,
-            filteredRows: indexedRows,
-            searchQuery,
-        };
+function getFilterOperatorLabel(operator, textColumn) {
+    if (textColumn && operator === '=') {
+        return 'contains';
     }
 
-    return {
-        activeColumn,
-        searchQuery,
-        filteredRows: indexedRows.filter(({ row }) =>
-            formatCellValue(row[activeColumn]).toLowerCase().includes(searchQuery),
-        ),
-    };
+    if (textColumn && operator === 'equals') {
+        return 'equals';
+    }
+
+    if (textColumn && operator === '!=') {
+        return 'not contains';
+    }
+
+    return operator;
 }
 
-function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
+function renderTableFilterBar(table, state, activeColumn) {
     const columns = table?.columns ?? [];
 
     if (!table || !columns.length) {
         return '';
     }
+
     const columnOptions = columns
-        .map(columnName => [
-            '<option value="',
-            escapeHtml(columnName),
-            '" ',
-            columnName === activeColumn ? 'selected' : '',
-            '>',
-            escapeHtml(columnName),
-            '</option>',
-        ].join(''))
+        .map(columnName =>
+            [
+                '<option value="',
+                escapeHtml(columnName),
+                '" ',
+                columnName === activeColumn ? 'selected' : '',
+                '>',
+                escapeHtml(columnName),
+                '</option>',
+            ].join(''),
+        )
         .join('');
+    const activeColumnIsText = isTextFilterColumn(table, activeColumn);
+    const operators = activeColumnIsText ? ['=', 'equals', '!=', '<', '>', '<=', '>='] : ['=', '!=', '<', '>', '<=', '>='];
+    const activeOperator = operators.includes(state.dataBrowser.filterOperator) ? state.dataBrowser.filterOperator : '=';
+    const operatorOptions = operators
+        .map(operator =>
+            [
+                '<option value="',
+                escapeHtml(operator),
+                '" ',
+                operator === activeOperator ? 'selected' : '',
+                '>',
+                escapeHtml(getFilterOperatorLabel(operator, activeColumnIsText)),
+                '</option>',
+            ].join(''),
+        )
+        .join('');
+    const filterValue = String(state.dataBrowser.searchQuery ?? '');
 
     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="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="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" value="',
-        escapeHtml(state.dataBrowser.searchQuery ?? ''),
-        '" /></label>',
+        '<span class="material-symbols-outlined text-base text-on-surface-variant/55">filter_alt</span>',
         '<select 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">',
         columnOptions,
         '</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>',
+        '<select class="control-select min-w-[7rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none" data-bind="data-filter-operator">',
+        operatorOptions,
+        '</select>',
+        '<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">',
+        '<input 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="Value..." type="search" value="',
+        escapeHtml(filterValue),
+        '" /></label>',
+        '</div>',
     ].join('');
 }
 
@@ -300,7 +354,11 @@ function renderTableSurface(state) {
     `;
     }
 
-    const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
+    const activeColumn = getActiveFilterColumn(table, state);
+    const indexedRows = (table.rows ?? []).map((row, index) => ({
+        row,
+        index,
+    }));
     const sortColumn = state.dataBrowser.sortColumn;
     const sortDirection = state.dataBrowser.sortDirection;
     const columns = (table.columns ?? []).map(columnName => ({
@@ -324,44 +382,41 @@ function renderTableSurface(state) {
     const pageCount = table.pageCount ?? Math.max(1, Math.ceil(totalRows / (table.limit ?? 50)));
     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);
+    const pageSizes = Object.freeze([25, 50, 100, 250]);
+    const hasActiveFilter = Boolean(String(state.dataBrowser.searchQuery ?? '').trim() && activeColumn);
     const gridMarkup = renderDataGrid({
         columns,
-        rows: filteredRows.map(({ row }) => row),
+        rows: indexedRows.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: (_, filteredIndex) => {
-            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+        getRowClass: (_, rowIndexOnPage) => {
+            const rowIndex = indexedRows[rowIndexOnPage]?.index ?? rowIndexOnPage;
 
             return [
                 'data-browser-row',
-                filteredIndex % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd',
+                rowIndexOnPage % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd',
                 state.dataBrowser.selectedRowIndex === rowIndex ? 'is-selected' : '',
                 'cursor-pointer transition-colors',
-            ].filter(Boolean).join(' ');
+            ]
+                .filter(Boolean)
+                .join(' ');
         },
-        getRowAttrs: (_, filteredIndex) => {
-            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+        getRowAttrs: (_, rowIndexOnPage) => {
+            const rowIndex = indexedRows[rowIndexOnPage]?.index ?? rowIndexOnPage;
 
             return ['data-action="select-data-row" data-row-index="', rowIndex, '"'].join('');
         },
     });
     const emptyMarkup = !table.rows?.length
-        ? '<div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10"><p class="font-mono text-[10px] uppercase tracking-[0.22em] text-on-surface-variant/40">TABLE_IS_EMPTY</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>',
-            ].join('')
-          : '';
-    const visibleRowsText = hasActiveSearch
-        ? [' // ', escapeHtml(formatNumber(filteredRowCount)), ' visible on this page'].join('')
+        ? [
+              '<div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">',
+              '<p class="font-mono text-[10px] uppercase tracking-[0.22em] text-on-surface-variant/40">',
+              hasActiveFilter ? 'NO_ROWS_MATCH_FILTER' : 'TABLE_IS_EMPTY',
+              '</p></div>',
+          ].join('')
         : '';
+    const filteredRowsText = hasActiveFilter ? ' filtered' : '';
     const pageSizeButtons = pageSizes
         .map(pageSize =>
             [
@@ -378,7 +433,7 @@ function renderTableSurface(state) {
 
     return [
         '<div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">',
-        renderTableSearchBar(table, state, activeColumn, filteredRowCount),
+        renderTableFilterBar(table, state, activeColumn),
         '<div class="custom-scrollbar flex-1 overflow-auto">',
         gridMarkup,
         emptyMarkup,
@@ -390,8 +445,8 @@ function renderTableSurface(state) {
         escapeHtml(formatNumber(toRow)),
         ' of ',
         escapeHtml(formatNumber(totalRows)),
+        filteredRowsText,
         ' rows',
-        visibleRowsText,
         '</div>',
         '<div class="flex flex-wrap items-center gap-4"><div class="flex items-center gap-2">',
         '<span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">rows</span>',
@@ -433,7 +488,10 @@ export function renderDataRowEditorPanel(state) {
             (foreignKey.mappings ?? []).map(mapping => String(mapping.from ?? '').trim()).filter(Boolean),
         ),
     );
-    const getColumnTypeBadge = column => String(column.declaredType || column.affinity || 'BLOB').trim().toUpperCase();
+    const getColumnTypeBadge = column =>
+        String(column.declaredType || column.affinity || 'BLOB')
+            .trim()
+            .toUpperCase();
     const getColumnNumberInputMeta = column => {
         const affinity = String(column.affinity ?? '').toUpperCase();
 
@@ -556,6 +614,7 @@ export function renderDataView(state) {
                           total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
                         </div>
                       </div>
+                      ${renderDataTableSearch(state)}
                       ${renderTableList(state)}
                     </aside>
                   `

package/frontend/js/views/editor.js

@@ -4,7 +4,7 @@ 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';
+import { getQueryMessages, getQueryPerformance } from '../store.js';
 import { escapeHtml, formatBytes, formatCellValue, formatExecutionTimeMs, formatNumber, isBlobPreview } from '../utils/format.js';
 
 function renderMissingDatabase() {
@@ -244,7 +244,6 @@ function renderResultsSurface(state, isResultsRoute) {
 }
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
-    const connection = getCurrentConnection(state);
     const editorSectionClass = state.editor.editorPanelVisible ? 'min-h-[27.5%] max-h-[60%]' : 'flex-none';
     const resultsSectionClass = 'flex-1';
 
@@ -261,7 +260,6 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                 historyTotal: state.editor.historyTotal,
                 editorVisible: state.editor.editorPanelVisible,
                 historyVisible: state.editor.historyPanelVisible,
-                title: connection?.label ?? 'SQLite Query Workspace',
             })}
           </section>
           <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">

package/frontend/js/views/structure.js

@@ -2,7 +2,7 @@ import { clearInspector, renderDdlSection, renderInspector } from "../components
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
 function renderEntryGroup(title, entries, activeName, options = {}) {
-  const { compact = false, showMeta = true } = options;
+  const { compact = false, showMeta = true, emptyMessage = null } = options;
   const entriesMarkup = entries.length
     ? [
         '<div class="space-y-2">',
@@ -51,8 +51,8 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
       ].join("")
     : [
         '<div class="text-sm text-on-surface-variant/45">No ',
-        escapeHtml(title.toLowerCase()),
-        " found.</div>",
+        emptyMessage ? escapeHtml(emptyMessage) : `${escapeHtml(title.toLowerCase())} found.`,
+        "</div>",
       ].join("");
 
   return `
@@ -65,6 +65,34 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
   `;
 }
 
+function getFilteredTables(tables, searchQuery) {
+  const normalizedSearch = String(searchQuery ?? "")
+    .trim()
+    .toLowerCase();
+
+  if (!normalizedSearch) {
+    return tables;
+  }
+
+  return tables.filter((table) => table.name.toLowerCase().includes(normalizedSearch));
+}
+
+function renderStructureTableSearch(state) {
+  return `
+    <label class="table-designer-sidebar__search">
+      <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+      <input
+        class="table-designer-sidebar__search-input"
+        data-bind="structure-table-search"
+        placeholder="Search tables..."
+        spellcheck="false"
+        type="search"
+        value="${escapeHtml(state.structure.tableSearchQuery ?? "")}"
+      />
+    </label>
+  `;
+}
+
 function renderLoadingInspector() {
   return `
     <div class="structure-graph__panel is-empty">
@@ -308,6 +336,9 @@ function renderStructureWorkspaceHeader(structure, selectedName) {
 
 export function renderStructureView(state) {
   const structure = state.structure.data;
+  const filteredTables = structure
+    ? getFilteredTables(structure.grouped.tables ?? [], state.structure.tableSearchQuery)
+    : [];
   const detail =
     state.structure.detail?.name === state.structure.selectedName ? state.structure.detail : null;
   const tablesVisible = state.structure.tablesVisible !== false;
@@ -334,15 +365,22 @@ export function renderStructureView(state) {
                     )}
                   </div>
                 </div>
+                ${renderStructureTableSearch(state)}
                 <div class="structure-view__sidebar-body custom-scrollbar">
                   ${
                     structure
                       ? `
                           ${renderEntryGroup(
                             "Tables",
-                            structure.grouped.tables,
+                            filteredTables,
                             state.structure.selectedName,
-                            { compact: true, showMeta: false }
+                            {
+                              compact: true,
+                              showMeta: false,
+                              emptyMessage: state.structure.tableSearchQuery
+                                ? "tables match the current search."
+                                : null,
+                            }
                           )}
                           ${renderEntryGroup(
                             "Views",