dbdiff-app 0.1.0

package/src/components/DataGrid/useDataGridSelection.ts

@@ -0,0 +1,340 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { CellPosition, CellRange } from "../../types";
+import type { DataGridColumn, DataGridSelection, ExtraRow } from "./types";
+import {
+  serializeCellValue,
+  setInternalClipboard,
+  storeToVirtualIndex,
+  virtualToStoreIndex,
+} from "./utils";
+
+interface UseDataGridSelectionOptions {
+  columns: DataGridColumn[];
+  rows: Record<string, unknown>[];
+  extraRows?: ExtraRow[];
+  /** Controlled mode: external selection state */
+  selection?: DataGridSelection;
+  /** Controlled mode: callback when selection changes */
+  onSelectionChange?: (selection: DataGridSelection) => void;
+  /** Intercept keydown. Return true to prevent DataGrid's default handling. */
+  onKeyDown?: (e: KeyboardEvent) => boolean;
+  /** Ref to scroll a row into view */
+  scrollToIndex?: (index: number) => void;
+}
+
+export function useDataGridSelection({
+  columns,
+  rows,
+  extraRows,
+  selection: controlledSelection,
+  onSelectionChange,
+  onKeyDown: externalOnKeyDown,
+  scrollToIndex,
+}: UseDataGridSelectionOptions) {
+  // Uncontrolled internal state
+  const [internalSelection, setInternalSelection] = useState<DataGridSelection>(
+    {
+      selectedCell: null,
+      selectedRange: null,
+      isDragging: false,
+    },
+  );
+
+  const isControlled = controlledSelection !== undefined;
+  const selection = isControlled ? controlledSelection : internalSelection;
+
+  const updateSelection = useCallback(
+    (updater: (prev: DataGridSelection) => DataGridSelection) => {
+      if (isControlled && onSelectionChange) {
+        onSelectionChange(updater(controlledSelection!));
+      } else {
+        setInternalSelection(updater);
+      }
+    },
+    [isControlled, onSelectionChange, controlledSelection],
+  );
+
+  const selectCell = useCallback(
+    (cell: CellPosition | null) => {
+      updateSelection(() => ({
+        selectedCell: cell,
+        selectedRange: null,
+        isDragging: false,
+      }));
+    },
+    [updateSelection],
+  );
+
+  const selectCellRange = useCallback(
+    (range: CellRange) => {
+      updateSelection((prev) => ({
+        ...prev,
+        selectedCell: prev.selectedCell,
+        selectedRange: range,
+      }));
+    },
+    [updateSelection],
+  );
+
+  const setDragging = useCallback(
+    (isDragging: boolean) => {
+      updateSelection((prev) => ({ ...prev, isDragging }));
+    },
+    [updateSelection],
+  );
+
+  // Track drag start cell and dragging state via ref for synchronous access.
+  // React useState is async, so handleCellMouseEnter would see stale isDragging
+  // from its closure. The ref is updated synchronously in handleCellMouseDown.
+  const dragStartCell = useRef<CellPosition | null>(null);
+  const isDraggingRef = useRef(false);
+  const rafRef = useRef<number | null>(null);
+
+  const handleCellClick = useCallback(
+    (rowIndex: number, columnName: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (e.shiftKey && selection.selectedCell) {
+        const anchor = selection.selectedRange?.start ?? selection.selectedCell;
+        selectCellRange({
+          start: anchor,
+          end: { rowIndex, columnName },
+        });
+      } else {
+        selectCell({ rowIndex, columnName });
+      }
+    },
+    [
+      selection.selectedCell,
+      selection.selectedRange,
+      selectCell,
+      selectCellRange,
+    ],
+  );
+
+  const handleCellMouseDown = useCallback(
+    (rowIndex: number, columnName: string, e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      e.preventDefault(); // Prevent native text selection during drag
+      if (e.shiftKey) return; // Let handleCellClick handle shift+click for range selection
+      dragStartCell.current = { rowIndex, columnName };
+      isDraggingRef.current = true;
+      setDragging(true);
+      selectCell({ rowIndex, columnName });
+    },
+    [selectCell, setDragging],
+  );
+
+  const handleCellMouseEnter = useCallback(
+    (rowIndex: number, columnName: string) => {
+      if (!isDraggingRef.current || !dragStartCell.current) return;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        selectCellRange({
+          start: dragStartCell.current!,
+          end: { rowIndex, columnName },
+        });
+      });
+    },
+    [selectCellRange],
+  );
+
+  // Global mouse up - end drag
+  useEffect(() => {
+    const handleMouseUp = () => {
+      if (isDraggingRef.current) {
+        isDraggingRef.current = false;
+        setDragging(false);
+        dragStartCell.current = null;
+      }
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, [setDragging]);
+
+  // Keyboard: arrow nav, Cmd+C, Cmd+A, Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't handle if in input or textarea
+      const target = e.target as HTMLElement;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
+
+      // Let external handler intercept first
+      if (externalOnKeyDown && externalOnKeyDown(e)) return;
+
+      const { selectedCell, selectedRange } = selection;
+
+      // Cmd+C / Ctrl+C - copy
+      if (selectedCell && e.key === "c" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const columnNames = columns.map((c) => c.name);
+        const existingRowCount = rows.length;
+
+        if (selectedRange) {
+          const startColIdx = columnNames.indexOf(
+            selectedRange.start.columnName,
+          );
+          const endColIdx = columnNames.indexOf(selectedRange.end.columnName);
+          const minCol = Math.min(startColIdx, endColIdx);
+          const maxCol = Math.max(startColIdx, endColIdx);
+
+          const startV = storeToVirtualIndex(
+            selectedRange.start.rowIndex,
+            existingRowCount,
+          );
+          const endV = storeToVirtualIndex(
+            selectedRange.end.rowIndex,
+            existingRowCount,
+          );
+          const minRow = Math.min(startV, endV);
+          const maxRow = Math.max(startV, endV);
+
+          const tsvRows: string[] = [];
+          for (let v = minRow; v <= maxRow; v++) {
+            const storeIdx = virtualToStoreIndex(v, existingRowCount);
+            const tsvCols: string[] = [];
+            for (let c = minCol; c <= maxCol; c++) {
+              const colName = columnNames[c];
+              let value: unknown;
+              if (storeIdx < 0 && extraRows) {
+                const newRowIdx = Math.abs(storeIdx) - 1;
+                const extraRow = extraRows[newRowIdx];
+                value = extraRow?.data[colName] ?? null;
+              } else {
+                value = rows[storeIdx]?.[colName];
+              }
+              tsvCols.push(serializeCellValue(value));
+            }
+            tsvRows.push(tsvCols.join("\t"));
+          }
+          const text = tsvRows.join("\n");
+          navigator.clipboard.writeText(text);
+          setInternalClipboard(text, undefined, true);
+        } else {
+          // Single cell copy
+          let value: unknown;
+          if (selectedCell.rowIndex < 0 && extraRows) {
+            const newRowIdx = Math.abs(selectedCell.rowIndex) - 1;
+            const extraRow = extraRows[newRowIdx];
+            value = extraRow?.data[selectedCell.columnName] ?? null;
+          } else {
+            value = rows[selectedCell.rowIndex]?.[selectedCell.columnName];
+          }
+          const text = serializeCellValue(value);
+          navigator.clipboard.writeText(text);
+          setInternalClipboard(text, value);
+        }
+        return;
+      }
+
+      // Cmd+A / Ctrl+A - select all
+      if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
+        const totalRowCount = rows.length + (extraRows?.length ?? 0);
+        if (columns.length === 0 || totalRowCount === 0) return;
+        e.preventDefault();
+        const firstCol = columns[0].name;
+        const lastCol = columns[columns.length - 1].name;
+        const lastStoreIndex = virtualToStoreIndex(
+          totalRowCount - 1,
+          rows.length,
+        );
+        updateSelection(() => ({
+          selectedCell: { rowIndex: 0, columnName: firstCol },
+          selectedRange: {
+            start: { rowIndex: 0, columnName: firstCol },
+            end: { rowIndex: lastStoreIndex, columnName: lastCol },
+          },
+          isDragging: false,
+        }));
+        return;
+      }
+
+      // Escape - deselect
+      if (e.key === "Escape" && selectedCell) {
+        e.preventDefault();
+        selectCell(null);
+        return;
+      }
+
+      // Arrow key navigation
+      if (
+        selectedCell &&
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)
+      ) {
+        e.preventDefault();
+        const columnNames = columns.map((c) => c.name);
+        const existingRowCount = rows.length;
+        const extraRowCount = extraRows?.length ?? 0;
+        const totalRows = existingRowCount + extraRowCount;
+
+        if (columnNames.length === 0 || totalRows === 0) return;
+
+        const moveFrom =
+          e.shiftKey && selectedRange ? selectedRange.end : selectedCell;
+
+        let newVirtual = storeToVirtualIndex(
+          moveFrom.rowIndex,
+          existingRowCount,
+        );
+        let newColIndex = columnNames.indexOf(moveFrom.columnName);
+
+        switch (e.key) {
+          case "ArrowUp":
+            newVirtual = Math.max(0, newVirtual - 1);
+            break;
+          case "ArrowDown":
+            newVirtual = Math.min(totalRows - 1, newVirtual + 1);
+            break;
+          case "ArrowLeft":
+            newColIndex = Math.max(0, newColIndex - 1);
+            break;
+          case "ArrowRight":
+            newColIndex = Math.min(columnNames.length - 1, newColIndex + 1);
+            break;
+        }
+
+        const newCell = {
+          rowIndex: virtualToStoreIndex(newVirtual, existingRowCount),
+          columnName: columnNames[newColIndex],
+        };
+
+        if (e.shiftKey) {
+          const anchor = selectedRange?.start ?? selectedCell;
+          updateSelection((prev) => ({
+            ...prev,
+            selectedRange: { start: anchor, end: newCell },
+          }));
+        } else {
+          selectCell(newCell);
+        }
+
+        scrollToIndex?.(
+          storeToVirtualIndex(newCell.rowIndex, existingRowCount),
+        );
+        return;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    selection,
+    columns,
+    rows,
+    extraRows,
+    externalOnKeyDown,
+    selectCell,
+    selectCellRange,
+    updateSelection,
+    scrollToIndex,
+  ]);
+
+  return {
+    selection,
+    selectCell,
+    selectCellRange,
+    setDragging,
+    handleCellClick,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+  };
+}

package/src/components/DataGrid/utils.ts

@@ -0,0 +1,184 @@
+import type { CellPosition } from "../../types";
+import type { RangeEdges } from "./types";
+
+/** Row height in pixels for the virtualizer */
+export const ROW_HEIGHT = 37;
+
+/**
+ * Convert store index (negative for new rows) to virtual index.
+ * Virtual indices: 0..M-1 for existing rows, M..M+N-1 for new rows.
+ */
+export function storeToVirtualIndex(
+  storeIndex: number,
+  existingRowCount: number,
+): number {
+  if (storeIndex >= 0) return storeIndex;
+  // New rows: -1 → existingRowCount, -2 → existingRowCount+1, etc.
+  const newRowArrayIndex = Math.abs(storeIndex) - 1;
+  return existingRowCount + newRowArrayIndex;
+}
+
+/**
+ * Convert virtual index to store index (negative for new rows).
+ */
+export function virtualToStoreIndex(
+  virtualIndex: number,
+  existingRowCount: number,
+): number {
+  if (virtualIndex < existingRowCount) return virtualIndex;
+  // Virtual index >= existingRowCount means it's a new row
+  const newRowArrayIndex = virtualIndex - existingRowCount;
+  return -(newRowArrayIndex + 1);
+}
+
+/**
+ * Get all row indices from a selection (single cell or range).
+ */
+export function getSelectedRowIndices(
+  selectedCell: CellPosition | null,
+  selectedRange: { start: CellPosition; end: CellPosition } | null,
+  existingRowCount: number,
+): number[] {
+  if (!selectedCell) return [];
+
+  if (!selectedRange) {
+    return [selectedCell.rowIndex];
+  }
+
+  const startVirtual = storeToVirtualIndex(
+    selectedRange.start.rowIndex,
+    existingRowCount,
+  );
+  const endVirtual = storeToVirtualIndex(
+    selectedRange.end.rowIndex,
+    existingRowCount,
+  );
+  const minVirtual = Math.min(startVirtual, endVirtual);
+  const maxVirtual = Math.max(startVirtual, endVirtual);
+
+  const rowIndices: number[] = [];
+  for (let v = minVirtual; v <= maxVirtual; v++) {
+    rowIndices.push(virtualToStoreIndex(v, existingRowCount));
+  }
+  return rowIndices;
+}
+
+/**
+ * Check if a cell is within a selected range and return its edge positions.
+ * Uses virtual indices to handle both existing rows (0..M-1) and new rows (-1..-N)
+ * as a unified linear space.
+ */
+export function getCellRangeInfo(
+  cell: CellPosition,
+  range: { start: CellPosition; end: CellPosition } | null,
+  columnOrder: string[],
+  existingRowCount: number,
+): { isInRange: boolean; edges: RangeEdges | null } {
+  if (!range) return { isInRange: false, edges: null };
+
+  const cellVirtual = storeToVirtualIndex(cell.rowIndex, existingRowCount);
+  const startVirtual = storeToVirtualIndex(
+    range.start.rowIndex,
+    existingRowCount,
+  );
+  const endVirtual = storeToVirtualIndex(range.end.rowIndex, existingRowCount);
+
+  const minRowVirtual = Math.min(startVirtual, endVirtual);
+  const maxRowVirtual = Math.max(startVirtual, endVirtual);
+
+  const startColIndex = columnOrder.indexOf(range.start.columnName);
+  const endColIndex = columnOrder.indexOf(range.end.columnName);
+  const cellColIndex = columnOrder.indexOf(cell.columnName);
+
+  const minColIndex = Math.min(startColIndex, endColIndex);
+  const maxColIndex = Math.max(startColIndex, endColIndex);
+
+  const isInRange =
+    cellVirtual >= minRowVirtual &&
+    cellVirtual <= maxRowVirtual &&
+    cellColIndex >= minColIndex &&
+    cellColIndex <= maxColIndex;
+
+  if (!isInRange) return { isInRange: false, edges: null };
+
+  return {
+    isInRange: true,
+    edges: {
+      top: cellVirtual === minRowVirtual,
+      bottom: cellVirtual === maxRowVirtual,
+      left: cellColIndex === minColIndex,
+      right: cellColIndex === maxColIndex,
+    },
+  };
+}
+
+export function formatCellValue(value: unknown): string {
+  if (value === null) return "NULL";
+  if (value === undefined) return "";
+  if (typeof value === "object") {
+    if (Array.isArray(value)) {
+      return `[${value.length} item${value.length !== 1 ? "s" : ""}]`;
+    }
+    const keys = Object.keys(value as Record<string, unknown>);
+    if (keys.length === 0) return "{}";
+    if (keys.length <= 3) return `{ ${keys.join(", ")} }`;
+    return `{ ${keys.slice(0, 3).join(", ")}, ... }`;
+  }
+  return String(value);
+}
+
+/** Full serialization for clipboard copy (not truncated) */
+export function serializeCellValue(value: unknown): string {
+  if (value === null) return "NULL";
+  if (value === undefined) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+/**
+ * Parse TSV text into a 2D array of strings.
+ * Returns null if text has no tabs or newlines (single value, not a range).
+ * Handles \r\n line endings and trims a trailing empty line.
+ */
+export function parseTSV(text: string): string[][] | null {
+  if (!text.includes("\t") && !text.includes("\n")) return null;
+  const lines = text.replace(/\r\n/g, "\n").replace(/\n$/, "").split("\n");
+  return lines.map((line) => line.split("\t"));
+}
+
+// Internal clipboard: stashes raw cell value alongside the system clipboard text
+// so we can detect when a paste originates from a copy within this app.
+let _internalClipboard: {
+  text: string;
+  rawValue: unknown;
+  isRangeCopy: boolean;
+} | null = null;
+
+export function setInternalClipboard(
+  text: string,
+  rawValue: unknown,
+  isRangeCopy = false,
+) {
+  _internalClipboard = { text, rawValue, isRangeCopy };
+}
+
+export function getInternalClipboardValue(
+  systemClipboardText: string,
+): unknown | undefined {
+  if (_internalClipboard && _internalClipboard.text === systemClipboardText) {
+    return _internalClipboard.rawValue;
+  }
+  return undefined;
+}
+
+/**
+ * Check if the pasted text originated from our own range copy.
+ * When true, "NULL" cells in TSV should be treated as SQL null.
+ */
+export function isInternalRangeCopy(systemClipboardText: string): boolean {
+  return (
+    _internalClipboard !== null &&
+    _internalClipboard.text === systemClipboardText &&
+    _internalClipboard.isRangeCopy
+  );
+}

package/src/components/DatabaseMenu.tsx

@@ -0,0 +1,93 @@
+import { useState, useRef, useEffect } from "react";
+import type { DatabaseConfig, ExportType } from "../types";
+
+interface DatabaseMenuProps {
+  databaseConfig: DatabaseConfig;
+}
+
+export function DatabaseMenu({ databaseConfig }: DatabaseMenuProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    }
+    if (menuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [menuOpen]);
+
+  async function handleExport(exportType: ExportType) {
+    setMenuOpen(false);
+    setExporting(true);
+    try {
+      const res = await fetch("/api/export", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          connection: databaseConfig.connection,
+          exportType,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        alert(data.error || "Export failed");
+        return;
+      }
+
+      const blob = await res.blob();
+      const disposition = res.headers.get("Content-Disposition") ?? "";
+      const match = disposition.match(/filename="(.+)"/);
+      const filename =
+        match?.[1] ?? `${databaseConfig.connection.database}.sql`;
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch {
+      alert("Export failed — could not reach server");
+    } finally {
+      setExporting(false);
+    }
+  }
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        className="px-3 h-8 rounded-md text-[13px] font-semibold text-secondary hover:text-primary hover:bg-stone-200/50 dark:hover:bg-white/[0.06] transition-all duration-150 disabled:opacity-50"
+        onClick={() => setMenuOpen(!menuOpen)}
+        disabled={exporting}
+      >
+        {exporting ? "Exporting..." : "Database"}
+      </button>
+      {menuOpen && (
+        <div className="absolute top-full left-0 mt-1 p-1 min-w-[200px] bg-white/90 dark:bg-[#2a2a2a]/90 backdrop-blur-xl border border-stone-200/50 dark:border-white/10 rounded-lg shadow-xl z-50">
+          <button
+            className="w-full px-2.5 py-1 text-left text-[13px] text-primary rounded-md hover:bg-stone-100 dark:hover:bg-white/10 transition-colors"
+            onClick={() => handleExport("schema")}
+          >
+            Export Schema
+          </button>
+          <button
+            className="w-full px-2.5 py-1 text-left text-[13px] text-primary rounded-md hover:bg-stone-100 dark:hover:bg-white/10 transition-colors"
+            onClick={() => handleExport("schema-and-data")}
+          >
+            Export Schema + Data
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}