nikcli 0.0.6

package/src/cli/cmd/tui/component/table-db/table/table-selection-manager.ts

@@ -0,0 +1,136 @@
+import type { TableRow } from "./types"
+
+export class TableSelectionManager {
+  private _table: any
+  private _selectionMode: "none" | "single" | "multiple"
+  private _selectedIndices: Set<number> = new Set()
+  private _focusedIndex: number = 0
+  private _onSelectionChange?: (indices: number[]) => void
+
+  constructor(table: any, mode: "none" | "single" | "multiple", onSelectionChange?: (indices: number[]) => void) {
+    this._table = table
+    this._selectionMode = mode
+    this._onSelectionChange = onSelectionChange
+  }
+
+  get selectionMode(): "none" | "single" | "multiple" {
+    return this._selectionMode
+  }
+
+  get selectedIndices(): number[] {
+    return Array.from(this._selectedIndices).sort((a, b) => a - b)
+  }
+
+  get selectedCount(): number {
+    return this._selectedIndices.size
+  }
+
+  get hasSelection(): boolean {
+    return this._selectedIndices.size > 0
+  }
+
+  get focusedIndex(): number {
+    return this._focusedIndex
+  }
+
+  setFocusedIndex(index: number) {
+    this._focusedIndex = index
+    this._table.requestRender()
+  }
+
+  setSelectedIndex(index: number | null) {
+    this._selectedIndices.clear()
+    if (index !== null) {
+      this._selectedIndices.add(index)
+      this._focusedIndex = index
+    }
+    this._onSelectionChange?.(this.selectedIndices)
+    this._table.requestRender()
+  }
+
+  addSelection(index: number) {
+    if (this._selectionMode === "multiple") {
+      if (this._selectedIndices.has(index)) {
+        this._selectedIndices.delete(index)
+      } else {
+        this._selectedIndices.add(index)
+      }
+      this._onSelectionChange?.(this.selectedIndices)
+      this._table.requestRender()
+    }
+  }
+
+  selectRange(endIndex: number) {
+    if (this._selectionMode !== "multiple") return
+
+    const start = Math.min(this._focusedIndex, endIndex)
+    const end = Math.max(this._focusedIndex, endIndex)
+
+    for (let i = start; i <= end; i++) {
+      this._selectedIndices.add(i)
+    }
+    this._onSelectionChange?.(this.selectedIndices)
+    this._table.requestRender()
+  }
+
+  clearSelection() {
+    this._selectedIndices.clear()
+    this._onSelectionChange?.([])
+    this._table.requestRender()
+  }
+
+  selectAll() {
+    if (this._selectionMode !== "multiple") return
+
+    const rowCount = this._table.getVisibleRowCount()
+    for (let i = 0; i < rowCount; i++) {
+      this._selectedIndices.add(i)
+    }
+    this._onSelectionChange?.(this.selectedIndices)
+    this._table.requestRender()
+  }
+
+  moveUp(count: number = 1) {
+    this._focusedIndex = Math.max(0, this._focusedIndex - count)
+    this._table.requestRender()
+  }
+
+  moveDown(count: number = 1) {
+    const max = this._table.getVisibleRowCount() - 1
+    this._focusedIndex = Math.min(max, this._focusedIndex + count)
+    this._table.requestRender()
+  }
+
+  moveLeft(count: number = 1) {
+    const columnCount = this._table.getColumnCount()
+    this._focusedIndex = Math.max(0, this._focusedIndex - count)
+    return columnCount
+  }
+
+  moveRight(count: number = 1) {
+    const columnCount = this._table.getColumnCount()
+    this._focusedIndex = Math.min(this._focusedIndex + count, columnCount - 1)
+    return columnCount
+  }
+
+  getSelectedRow(): TableRow | null {
+    if (this._selectedIndices.size === 0) return null
+    return this._table.getRowAt(Array.from(this._selectedIndices)[0])
+  }
+
+  getSelectedRows(): TableRow[] {
+    return this.selectedIndices.map((i) => this._table.getRowAt(i)).filter(Boolean)
+  }
+
+  isSelected(index: number): boolean {
+    return this._selectedIndices.has(index)
+  }
+
+  isFocused(index: number): boolean {
+    return this._focusedIndex === index
+  }
+
+  isSelectedOrFocused(index: number): boolean {
+    return this.isSelected(index) || this.isFocused(index)
+  }
+}

package/src/cli/cmd/tui/component/table-db/table/table-state.ts

@@ -0,0 +1,198 @@
+import type { TableRow, SortDirection } from "./types"
+
+export class TableStateManager {
+  private _sortColumn: string | null = null
+  private _sortDirection: SortDirection = "asc"
+  private _filterQuery: string = ""
+  private _page: number = 1
+  private _pageSize: number = 50
+  private _originalData: TableRow[] = []
+
+  get sortColumn(): string | null {
+    return this._sortColumn
+  }
+
+  get sortDirection(): SortDirection {
+    return this._sortDirection
+  }
+
+  get filterQuery(): string {
+    return this._filterQuery
+  }
+
+  get page(): number {
+    return this._page
+  }
+
+  get pageSize(): number {
+    return this._pageSize
+  }
+
+  get isSorted(): boolean {
+    return this._sortColumn !== null
+  }
+
+  get isFiltered(): boolean {
+    return this._filterQuery.length > 0
+  }
+
+  get isPaginated(): boolean {
+    return this._pageSize > 0
+  }
+
+  setData(data: TableRow[]): void {
+    this._originalData = data
+  }
+
+  setSort(columnId: string, direction?: SortDirection): void {
+    if (this._sortColumn === columnId) {
+      this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc"
+    } else {
+      this._sortColumn = columnId
+      this._sortDirection = direction || "asc"
+    }
+  }
+
+  clearSort(): void {
+    this._sortColumn = null
+    this._sortDirection = "asc"
+  }
+
+  setFilter(query: string): void {
+    this._filterQuery = query
+    this._page = 1
+  }
+
+  clearFilter(): void {
+    this._filterQuery = ""
+    this._page = 1
+  }
+
+  setPage(page: number): void {
+    this._page = Math.max(1, page)
+  }
+
+  setPageSize(size: number): void {
+    this._pageSize = Math.max(1, size)
+    this._page = 1
+  }
+
+  nextPage(): boolean {
+    const maxPage = this.getTotalPages()
+    if (this._page < maxPage) {
+      this._page++
+      return true
+    }
+    return false
+  }
+
+  prevPage(): boolean {
+    if (this._page > 1) {
+      this._page--
+      return true
+    }
+    return false
+  }
+
+  firstPage(): void {
+    this._page = 1
+  }
+
+  lastPage(): void {
+    this._page = this.getTotalPages()
+  }
+
+  getTotalPages(): number {
+    const filtered = this._applyFilter(this._originalData)
+    if (!this.isPaginated) return 1
+    return Math.ceil(filtered.length / this._pageSize)
+  }
+
+  getTotalRows(): number {
+    return this._originalData.length
+  }
+
+  getFilteredRows(): number {
+    return this._applyFilter(this._originalData).length
+  }
+
+  getVisibleRows(): TableRow[] {
+    let result = this._originalData
+
+    result = this._applyFilter(result)
+    result = this._applySort(result)
+
+    if (this.isPaginated) {
+      const start = (this._page - 1) * this._pageSize
+      const end = start + this._pageSize
+      result = result.slice(start, end)
+    }
+
+    return result
+  }
+
+  getAllRows(): TableRow[] {
+    let result = this._originalData
+    result = this._applyFilter(result)
+    result = this._applySort(result)
+    return result
+  }
+
+  private _applyFilter(rows: TableRow[]): TableRow[] {
+    if (!this._filterQuery) return rows
+
+    const query = this._filterQuery.toLowerCase()
+    return rows.filter((row) => {
+      const values = Object.values(row).map((v) => String(v).toLowerCase())
+      return values.some((v) => v.includes(query))
+    })
+  }
+
+  private _applySort(rows: TableRow[]): TableRow[] {
+    if (!this._sortColumn) return rows
+
+    return [...rows].sort((a, b) => {
+      const aVal = a[this._sortColumn!]
+      const bVal = b[this._sortColumn!]
+
+      let comparison = 0
+
+      if (aVal === null || aVal === undefined) {
+        comparison = -1
+      } else if (bVal === null || bVal === undefined) {
+        comparison = 1
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        comparison = aVal - bVal
+      } else {
+        const aStr = String(aVal).toLowerCase()
+        const bStr = String(bVal).toLowerCase()
+        comparison = aStr.localeCompare(bStr)
+      }
+
+      return this._sortDirection === "asc" ? comparison : -comparison
+    })
+  }
+
+  getSortState(): { column: string | null; direction: SortDirection } {
+    return {
+      column: this._sortColumn,
+      direction: this._sortDirection,
+    }
+  }
+
+  getPaginationState(): { page: number; pageSize: number; totalPages: number; totalRows: number } {
+    return {
+      page: this._page,
+      pageSize: this._pageSize,
+      totalPages: this.getTotalPages(),
+      totalRows: this._originalData.length,
+    }
+  }
+
+  reset(): void {
+    this._sortColumn = null
+    this._sortDirection = "asc"
+    this._filterQuery = ""
+    this._page = 1
+  }
+}

package/src/cli/cmd/tui/component/table-db/table/types.ts

@@ -0,0 +1,69 @@
+import type { RGBA } from "@opentui/core"
+
+export interface TableColumn {
+  id: string
+  title: string
+  width: number | string
+  minWidth?: number
+  maxWidth?: number
+  align?: "left" | "center" | "right"
+  sortable?: boolean
+  resizable?: boolean
+  visible?: boolean
+  formatter?: (value: any) => string
+}
+
+export interface TableRow {
+  id: string | number
+  [key: string]: any
+}
+
+export interface TableStyle {
+  headerBg?: RGBA | string
+  headerFg?: RGBA | string
+  rowOddBg?: RGBA | string
+  rowEvenBg?: RGBA | string
+  selectedBg?: RGBA | string
+  selectedFg?: RGBA | string
+  borderColor?: RGBA | string
+  focusRing?: boolean
+}
+
+export interface TableOptions {
+  columns: TableColumn[]
+  rows: TableRow[]
+  rowKey?: string
+  selection?: "none" | "single" | "multiple"
+  showHeader?: boolean
+  showRowNumbers?: boolean
+  striped?: boolean
+  compact?: boolean
+  style?: TableStyle
+  onRowSelect?: (row: TableRow, index: number) => void
+  onRowActivate?: (row: TableRow, index: number) => void
+  onCellEdit?: (row: TableRow, column: TableColumn, value: any) => void
+  onSort?: (column: TableColumn, direction: "asc" | "desc") => void
+}
+
+export interface TableState {
+  data: TableRow[]
+  filteredData: TableRow[]
+  selectedRow: number | null
+  sortColumn: string | null
+  sortDirection: "asc" | "desc"
+  filterQuery: string
+  page: number
+  pageSize: number
+}
+
+export interface TableActions {
+  setData: (columns: TableColumn[], rows: TableRow[]) => void
+  selectRow: (index: number | null) => void
+  sortBy: (columnId: string) => void
+  filter: (query: string) => void
+  setPage: (page: number) => void
+  nextPage: () => void
+  prevPage: () => void
+}
+
+export type SortDirection = "asc" | "desc"

package/src/cli/cmd/tui/component/table-db/ui/db-visualizer.tsx

@@ -0,0 +1,71 @@
+import { createMemo, Show } from "solid-js"
+import { useTerminalDimensions } from "@opentui/solid"
+import { useTheme } from "../../../context/theme"
+import { useSync } from "../../../context/sync"
+import { tableRenderer } from "./table-renderer"
+import type { DBTable, TablePreview, TableChange } from "../db/types"
+
+interface DBVisualizerProps {
+  tables?: DBTable[]
+  preview?: TablePreview[]
+  changes?: TableChange[]
+  mode: "schema" | "preview" | "diff"
+  filePath?: string
+}
+
+export function DBVisualizer(props: DBVisualizerProps) {
+  const { theme } = useTheme()
+  const dimensions = useTerminalDimensions()
+  const sync = useSync()
+
+  const tables = createMemo(() => {
+    if (props.filePath && sync.data.dbschema[props.filePath]) {
+      return sync.data.dbschema[props.filePath].tables
+    }
+    return props.tables || []
+  })
+
+  const renderedContent = createMemo(() => {
+    const width = dimensions().width
+    const tableList = tables()
+
+    switch (props.mode) {
+      case "schema":
+        return tableRenderer.renderSchemaOverview(tableList, width)
+      case "preview":
+        if (props.preview && props.preview.length > 0) {
+          return props.preview
+            .map((p) => `=== ${p.tableName} ===\n${tableRenderer.renderPreview(p, width)}`)
+            .join("\n\n")
+        }
+        return tableRenderer.renderSchemaOverview(tableList, width)
+      case "diff":
+        return tableRenderer.renderDiffSummary(props.changes || [], width)
+      default:
+        return tableRenderer.renderSchemaOverview(tableList, width)
+    }
+  })
+
+  const stats = createMemo(() => tableRenderer.renderStats(tables()))
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="row" gap={2}>
+        <text fg={theme.success}>◈ {stats().tables} tables</text>
+        <text fg={theme.primary}>→ {stats().columns} columns</text>
+        <Show when={stats().rows > 0}>
+          <text fg={theme.warning}>▒ {stats().rows} rows</text>
+        </Show>
+        <Show when={stats().pks > 0}>
+          <text fg={theme.textMuted}>⚿ {stats().pks} with PK</text>
+        </Show>
+      </box>
+
+      <scrollbox height="100%">
+        <box flexDirection="column" gap={0}>
+          <text fg={theme.text}>{renderedContent()}</text>
+        </box>
+      </scrollbox>
+    </box>
+  )
+}

package/src/cli/cmd/tui/component/table-db/ui/index.ts

@@ -0,0 +1,2 @@
+export { TableRenderer, tableRenderer } from "./table-renderer"
+export { DBVisualizer } from "./db-visualizer"