@rozenite/sqlite-plugin 1.7.0-rc.0

package/src/ui/sqlite-data-table.tsx

@@ -0,0 +1,296 @@
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnSizingState,
+  type Header,
+  type OnChangeFn,
+  type RowData,
+} from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import {
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { formatNumber } from './utils';
+import { SQLITE_ROW_NUMBER_COLUMN_ID } from './sqlite-table-column-order';
+
+const joinClassNames = (
+  ...classNames: Array<string | false | null | undefined>
+) => classNames.filter(Boolean).join(' ');
+
+const LoadingState = ({ columns }: { columns: number }) => (
+  <div className="sqlite-results-loading" aria-live="polite">
+    {Array.from({ length: 6 }, (_, rowIndex) => (
+      <div
+        key={`loading-${rowIndex}`}
+        className="sqlite-results-loading-row"
+        style={{
+          gridTemplateColumns: `repeat(${Math.max(columns, 3)}, minmax(12rem, 1fr))`,
+        }}
+      >
+        {Array.from({ length: Math.max(columns, 3) }, (_, columnIndex) => (
+          <span
+            key={`${rowIndex}-${columnIndex}`}
+            className="sqlite-results-loading-bar"
+          />
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+type SqliteDataTableProps<TData extends RowData> = {
+  tableId: string;
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  columnOrder: string[];
+  onColumnOrderChange: OnChangeFn<string[]>;
+  emptyTitle: string;
+  emptyDescription: string;
+  loading?: boolean;
+  loadingColumnCount?: number;
+  shellClassName?: string;
+  scrollContainerClassName?: string;
+  tableClassName?: string;
+  showRowNumbers?: boolean;
+  rowNumberOffset?: number;
+  onRowClick?: (row: TData, rowIndex: number) => void;
+  getRowAriaLabel?: (row: TData, rowIndex: number) => string;
+};
+
+type SortableColumnHeaderProps<TData extends RowData> = {
+  header: Header<TData, unknown>;
+};
+
+const SortableColumnHeader = <TData extends RowData>({
+  header,
+}: SortableColumnHeaderProps<TData>) => {
+  return (
+    <th
+      scope="col"
+      className={joinClassNames(
+        header.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
+          'sqlite-results-number-col',
+        header.column.getIsResizing() && 'sqlite-table-column-resizing',
+      )}
+      style={{
+        width: header.getSize(),
+      }}
+    >
+      <div className="sqlite-table-header-content">
+        <div className="min-w-0">
+          {header.isPlaceholder
+            ? null
+            : flexRender(header.column.columnDef.header, header.getContext())}
+        </div>
+      </div>
+      {header.column.getCanResize() ? (
+        <div
+          aria-hidden="true"
+          className={joinClassNames(
+            'sqlite-column-resizer',
+            header.column.getIsResizing() && 'is-active',
+          )}
+          onDoubleClick={() => header.column.resetSize()}
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+        />
+      ) : null}
+    </th>
+  );
+};
+
+export const SqliteDataTable = <TData extends RowData>({
+  tableId,
+  data,
+  columns,
+  columnOrder,
+  onColumnOrderChange,
+  emptyTitle,
+  emptyDescription,
+  loading = false,
+  loadingColumnCount,
+  shellClassName,
+  scrollContainerClassName,
+  tableClassName,
+  showRowNumbers = false,
+  rowNumberOffset = 0,
+  onRowClick,
+  getRowAriaLabel,
+}: SqliteDataTableProps<TData>) => {
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+  const scrollElementRef = useRef<HTMLDivElement | null>(null);
+
+  const rowNumberColumn = useMemo<ColumnDef<TData, unknown>>(
+    () => ({
+      id: SQLITE_ROW_NUMBER_COLUMN_ID,
+      header: '#',
+      enableResizing: false,
+      size: 72,
+      minSize: 72,
+      maxSize: 72,
+      cell: ({ row }) => (
+        <span className="sqlite-results-row-number sqlite-tabular">
+          {formatNumber(rowNumberOffset + row.index + 1)}
+        </span>
+      ),
+    }),
+    [rowNumberOffset],
+  );
+
+  const tableColumns = useMemo(
+    () => (showRowNumbers ? [rowNumberColumn, ...columns] : columns),
+    [columns, rowNumberColumn, showRowNumbers],
+  );
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    defaultColumn: {
+      minSize: 120,
+      size: 220,
+    },
+    state: {
+      columnOrder,
+      columnSizing,
+    },
+    onColumnOrderChange,
+    onColumnSizingChange: setColumnSizing,
+    columnResizeMode: 'onChange',
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const loadingColumns =
+    loadingColumnCount ?? columns.length + (showRowNumbers ? 1 : 0);
+  const tableRows = table.getRowModel().rows;
+  const rowVirtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => 36,
+    overscan: 10,
+    getItemKey: (index) => tableRows[index]?.id ?? index,
+    measureElement:
+      typeof window !== 'undefined' &&
+      !window.navigator.userAgent.includes('Firefox')
+        ? (element) => element?.getBoundingClientRect().height ?? 0
+        : undefined,
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  const handleRowKeyDown = (
+    event: ReactKeyboardEvent<HTMLTableRowElement>,
+    row: TData,
+    rowIndex: number,
+  ) => {
+    if (!onRowClick || (event.key !== 'Enter' && event.key !== ' ')) {
+      return;
+    }
+
+    event.preventDefault();
+    onRowClick(row, rowIndex);
+  };
+
+  const renderTable = (): ReactNode => (
+    <table
+      className={joinClassNames('sqlite-results-table', tableClassName)}
+      style={{ minWidth: table.getTotalSize() }}
+    >
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id} className="sqlite-table-row-shell">
+            {headerGroup.headers.map((header) => (
+              <SortableColumnHeader key={header.id} header={header} />
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody
+        style={{
+          height: rowVirtualizer.getTotalSize(),
+        }}
+      >
+        {virtualRows.map((virtualRow) => {
+          const row = tableRows[virtualRow.index];
+
+          if (!row) {
+            return null;
+          }
+
+          return (
+            <tr
+              key={row.id}
+              ref={(node) => {
+                if (node) {
+                  rowVirtualizer.measureElement(node);
+                }
+              }}
+              data-index={virtualRow.index}
+              className={joinClassNames(onRowClick && 'sqlite-results-row')}
+              role={onRowClick ? 'button' : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              aria-label={
+                onRowClick
+                  ? (getRowAriaLabel?.(row.original, row.index) ??
+                    `Inspect row ${row.index + 1}`)
+                  : undefined
+              }
+              onClick={() => onRowClick?.(row.original, row.index)}
+              onKeyDown={(event) =>
+                handleRowKeyDown(event, row.original, row.index)
+              }
+              style={{
+                transform: `translateY(${virtualRow.start}px)`,
+              }}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  className={joinClassNames(
+                    cell.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
+                      'sqlite-results-row-number',
+                  )}
+                  style={{ width: cell.column.getSize() }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+
+  return (
+    <div
+      className={joinClassNames('sqlite-results-shell', shellClassName)}
+      data-table-id={tableId}
+    >
+      <div
+        ref={scrollElementRef}
+        className={joinClassNames(
+          'sqlite-results-scroll',
+          scrollContainerClassName,
+        )}
+      >
+        {loading ? (
+          <LoadingState columns={loadingColumns} />
+        ) : data.length === 0 || columns.length === 0 ? (
+          <div className="sqlite-results-empty">
+            <div className="max-w-sm space-y-2 text-center">
+              <p className="text-base font-medium text-white">{emptyTitle}</p>
+              <p className="text-sm text-slate-400">{emptyDescription}</p>
+            </div>
+          </div>
+        ) : (
+          renderTable()
+        )}
+      </div>
+    </div>
+  );
+};

package/src/ui/sqlite-introspection.ts

@@ -0,0 +1,189 @@
+import { escapeSqlString, quoteSqlIdentifier } from '../shared/sql';
+import type { SqliteQueryResult } from '../shared/types';
+
+export type SqliteEntityType = 'table' | 'view';
+
+export type SqliteSchema = {
+  seq: number;
+  name: string;
+  file: string | null;
+};
+
+export type SqliteEntity = {
+  schemaName: string;
+  name: string;
+  type: SqliteEntityType;
+  sql: string | null;
+};
+
+export type SqliteColumnInfo = {
+  cid: number;
+  name: string;
+  type: string;
+  notNull: boolean;
+  defaultValue: string | null;
+  primaryKeyOrder: number;
+  hidden: number;
+};
+
+export type SqliteForeignKeyInfo = {
+  id: number;
+  seq: number;
+  table: string;
+  from: string;
+  to: string | null;
+  onUpdate: string;
+  onDelete: string;
+  match: string;
+};
+
+export type SqliteIndexInfo = {
+  seq: number;
+  name: string;
+  unique: boolean;
+  origin: string;
+  partial: boolean;
+};
+
+export type SqliteIndexColumnInfo = {
+  seqno: number;
+  cid: number;
+  name: string;
+};
+
+const buildQualifiedEntityName = (schemaName: string, entityName: string) =>
+  `${quoteSqlIdentifier(schemaName)}.${quoteSqlIdentifier(entityName)}`;
+
+const buildPragmaPrefix = (schemaName: string) =>
+  `${quoteSqlIdentifier(schemaName)}.`;
+
+const asString = (value: unknown) =>
+  typeof value === 'string' ? value : String(value ?? '');
+const asNullableString = (value: unknown) =>
+  value == null ? null : String(value);
+const asNumber = (value: unknown) => {
+  const parsed = Number(value ?? 0);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+export const LIST_SCHEMAS_SQL = 'PRAGMA database_list';
+
+export const buildListEntitiesSql = (schemaName: string) => `
+SELECT
+  name,
+  type,
+  sql
+FROM ${quoteSqlIdentifier(schemaName)}.sqlite_schema
+WHERE type IN ('table', 'view')
+  AND name NOT LIKE 'sqlite_%'
+ORDER BY CASE type WHEN 'table' THEN 0 ELSE 1 END, name COLLATE NOCASE
+`;
+
+export const buildBrowseEntitySql = (
+  schemaName: string,
+  entityName: string,
+  limit: number,
+  offset: number,
+  rowIdIdentifier?: string | null,
+) =>
+  `SELECT ${
+    rowIdIdentifier ? `${rowIdIdentifier} AS "__sqlite-hidden-rowid__", ` : ''
+  }* FROM ${buildQualifiedEntityName(schemaName, entityName)} LIMIT ${Math.max(1, Math.floor(limit))} OFFSET ${Math.max(0, Math.floor(offset))}`;
+
+export const buildEntityCountSql = (schemaName: string, entityName: string) =>
+  `SELECT COUNT(*) AS count FROM ${buildQualifiedEntityName(schemaName, entityName)}`;
+
+export const buildCreateSqlLookup = (
+  schemaName: string,
+  entityName: string,
+) => `
+SELECT sql
+FROM ${quoteSqlIdentifier(schemaName)}.sqlite_schema
+WHERE type IN ('table', 'view')
+  AND name = ${escapeSqlString(entityName)}
+LIMIT 1
+`;
+
+export const buildTableXInfoSql = (schemaName: string, entityName: string) =>
+  `PRAGMA ${buildPragmaPrefix(schemaName)}table_xinfo(${escapeSqlString(entityName)})`;
+
+export const buildForeignKeySql = (schemaName: string, entityName: string) =>
+  `PRAGMA ${buildPragmaPrefix(schemaName)}foreign_key_list(${escapeSqlString(entityName)})`;
+
+export const buildIndexListSql = (schemaName: string, entityName: string) =>
+  `PRAGMA ${buildPragmaPrefix(schemaName)}index_list(${escapeSqlString(entityName)})`;
+
+export const buildIndexInfoSql = (schemaName: string, indexName: string) =>
+  `PRAGMA ${buildPragmaPrefix(schemaName)}index_info(${escapeSqlString(indexName)})`;
+
+export const parseSchemas = (result: SqliteQueryResult): SqliteSchema[] =>
+  result.rows
+    .map((row) => ({
+      seq: asNumber(row.seq),
+      name: asString(row.name),
+      file: asNullableString(row.file),
+    }))
+    .filter((schema) => !!schema.name);
+
+export const parseEntities = (
+  result: SqliteQueryResult,
+  schemaName: string,
+): SqliteEntity[] =>
+  result.rows
+    .map((row) => ({
+      schemaName,
+      name: asString(row.name),
+      type: (asString(row.type) === 'view'
+        ? 'view'
+        : 'table') as SqliteEntityType,
+      sql: asNullableString(row.sql),
+    }))
+    .filter((entity) => !!entity.name);
+
+export const parseColumns = (result: SqliteQueryResult): SqliteColumnInfo[] =>
+  result.rows.map((row) => ({
+    cid: asNumber(row.cid),
+    name: asString(row.name),
+    type: asString(row.type),
+    notNull: asNumber(row.notnull) === 1,
+    defaultValue: asNullableString(row.dflt_value),
+    primaryKeyOrder: asNumber(row.pk),
+    hidden: asNumber(row.hidden),
+  }));
+
+export const parseForeignKeys = (
+  result: SqliteQueryResult,
+): SqliteForeignKeyInfo[] =>
+  result.rows.map((row) => ({
+    id: asNumber(row.id),
+    seq: asNumber(row.seq),
+    table: asString(row.table),
+    from: asString(row.from),
+    to: asNullableString(row.to),
+    onUpdate: asString(row.on_update),
+    onDelete: asString(row.on_delete),
+    match: asString(row.match),
+  }));
+
+export const parseIndexes = (result: SqliteQueryResult): SqliteIndexInfo[] =>
+  result.rows.map((row) => ({
+    seq: asNumber(row.seq),
+    name: asString(row.name),
+    unique: asNumber(row.unique) === 1,
+    origin: asString(row.origin),
+    partial: asNumber(row.partial) === 1,
+  }));
+
+export const parseIndexColumns = (
+  result: SqliteQueryResult,
+): SqliteIndexColumnInfo[] =>
+  result.rows
+    .map((row) => ({
+      seqno: asNumber(row.seqno),
+      cid: asNumber(row.cid),
+      name: asString(row.name),
+    }))
+    .filter((column) => !!column.name);
+
+export const parseCount = (result: SqliteQueryResult) =>
+  asNumber(result.rows[0]?.count);

package/src/ui/sqlite-modal-controls.tsx

@@ -0,0 +1,32 @@
+import { X } from 'lucide-react';
+
+const toneButtonClassName =
+  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
+
+export const sqliteSecondaryButtonClassName = `${toneButtonClassName} sqlite-button-secondary`;
+export const sqlitePrimaryButtonClassName = `${toneButtonClassName} sqlite-button-primary`;
+export const sqliteModalIconButtonClassName = `${sqliteSecondaryButtonClassName} h-10 w-10 shrink-0 px-0 py-0`;
+
+type SqliteModalCloseButtonProps = {
+  onClose: () => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+};
+
+export const SqliteModalCloseButton = ({
+  onClose,
+  disabled = false,
+  ariaLabel = 'Close modal',
+}: SqliteModalCloseButtonProps) => {
+  return (
+    <button
+      type="button"
+      className={sqliteModalIconButtonClassName}
+      aria-label={ariaLabel}
+      onClick={onClose}
+      disabled={disabled}
+    >
+      <X aria-hidden="true" className="h-4 w-4" />
+    </button>
+  );
+};

package/src/ui/sqlite-row-delete-modal.tsx

@@ -0,0 +1,130 @@
+import { Modal, useOverlayState } from '@heroui/react';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import {
+  SqliteModalCloseButton,
+  sqliteSecondaryButtonClassName,
+} from './sqlite-modal-controls';
+
+type SqliteRowDeleteModalProps = {
+  isOpen: boolean;
+  rowNumber: number;
+  entityName: string;
+  onClose: () => void;
+  onDelete: () => Promise<void>;
+};
+
+const toneButtonClassName =
+  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
+const dangerButtonClassName = `${toneButtonClassName} border border-rose-400/30 bg-rose-500/16 text-rose-50 hover:bg-rose-500/24`;
+
+export const SqliteRowDeleteModal = ({
+  isOpen,
+  rowNumber,
+  entityName,
+  onClose,
+  onDelete,
+}: SqliteRowDeleteModalProps) => {
+  const overlay = useOverlayState({
+    isOpen,
+    onOpenChange: (open: boolean) => {
+      if (!open) {
+        onClose();
+      }
+    },
+  });
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setDeleting(false);
+      setError(null);
+    }
+  }, [isOpen]);
+
+  const handleDelete = async () => {
+    try {
+      setDeleting(true);
+      setError(null);
+      await onDelete();
+      onClose();
+    } catch (nextError) {
+      setError(
+        nextError instanceof Error ? nextError.message : String(nextError),
+      );
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <Modal state={overlay}>
+      <Modal.Backdrop
+        variant="blur"
+        isDismissable={!deleting}
+        className="bg-[rgba(5,10,16,0.24)] backdrop-blur-[2px]"
+      >
+        <Modal.Container placement="center" size="md" scroll="inside">
+          <Modal.Dialog
+            aria-label={`Delete row ${rowNumber} from ${entityName}`}
+            className="w-full max-w-xl overflow-hidden border border-white/10 bg-[#0a121b] p-0 text-white shadow-[0_30px_90px_rgba(0,0,0,0.42)]"
+          >
+            <div className="flex items-center justify-between gap-4 border-b border-white/8 px-5 py-5">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/12 text-rose-200">
+                  <AlertTriangle aria-hidden="true" className="h-5 w-5" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold text-white">
+                    Delete Row {rowNumber}
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-400">{entityName}</p>
+                </div>
+              </div>
+              <SqliteModalCloseButton onClose={onClose} disabled={deleting} />
+            </div>
+
+            <Modal.Body className="space-y-0 p-0">
+              <div className="space-y-5 px-5 py-5">
+                <p className="text-sm leading-6 text-slate-300">
+                  This will permanently delete the selected row and immediately
+                  refetch the current page.
+                </p>
+
+                {error ? (
+                  <div className="sqlite-inline-error" aria-live="polite">
+                    <div>
+                      <p className="font-medium text-rose-100">Delete Failed</p>
+                      <p className="mt-1 text-sm text-rose-100/90">{error}</p>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+
+              <div className="flex items-center justify-end gap-3 border-t border-white/8 px-5 py-5">
+                <button
+                  type="button"
+                  className={sqliteSecondaryButtonClassName}
+                  onClick={onClose}
+                  disabled={deleting}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className={dangerButtonClassName}
+                  onClick={() => void handleDelete()}
+                  disabled={deleting}
+                >
+                  <Trash2 aria-hidden="true" className="h-4 w-4" />
+                  {deleting ? 'Deleting…' : 'Delete Row'}
+                </button>
+              </div>
+            </Modal.Body>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
+  );
+};