refactor(database-ui): separate components out of data table

Author: franklinfollis

packages/cli/src/db-studio/ui/src/components/ColumnInfo.tsx renamed to packages/cli/src/db-studio/ui/src/components/ColumnHeader.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Key, Link } from 'lucide-react'
+import { Key, Link, ArrowUpDown, ArrowUpWideNarrow, ArrowDownWideNarrow } from 'lucide-react'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import type { ColumnMetadata } from './DataTable'
 
-interface ColumnInfoProps {
+type ColumnInfoProps = {
   column: ColumnMetadata
   children: React.ReactNode
 }
@@ -12,7 +12,7 @@ interface ColumnInfoProps {
  * Hover card component that displays detailed column metadata
  * Shows type, nullable status, constraints, foreign keys, etc.
  */
-export function ColumnInfo({ column, children }: ColumnInfoProps) {
+function ColumnInfo({ column, children }: ColumnInfoProps) {
   return (
     <HoverCard openDelay={300}>
       <HoverCardTrigger asChild>{children}</HoverCardTrigger>
@@ -98,3 +98,68 @@ export function ColumnInfo({ column, children }: ColumnInfoProps) {
     </HoverCard>
   )
 }
+
+type SortIconProps = {
+  sorted: false | 'asc' | 'desc'
+  className: string
+}
+
+function SortIcon({ sorted, className }: SortIconProps) {
+  switch (sorted) {
+    case 'asc':
+      return <ArrowUpWideNarrow className={className} />
+    case 'desc':
+      return <ArrowDownWideNarrow className={className} />
+    default:
+      return <ArrowUpDown className={className} />
+  }
+}
+
+type ColumnHeaderProps = {
+  column: ColumnMetadata
+  sorted: false | 'asc' | 'desc'
+  showControls?: boolean
+  onSortChange?: (column: string | null, direction: 'asc' | 'desc' | null) => void
+}
+
+/**
+ * Column header component that displays column name, type, and optional sorting controls
+ * Wraps content in a ColumnInfo hover card for displaying detailed metadata
+ */
+export function ColumnHeader({ column, sorted, showControls = true, onSortChange }: ColumnHeaderProps) {
+  const isKey = column.primaryKey
+  const isForeignKey = !!column.foreignKey
+  const isSortable = showControls && onSortChange
+
+  const handleSort = React.useCallback(() => {
+    if (!onSortChange) return
+
+    // Three-state sorting: no sort → asc → desc → no sort
+    if (!sorted) {
+      onSortChange(column.name, 'asc')
+    } else if (sorted === 'asc') {
+      onSortChange(column.name, 'desc')
+    } else {
+      onSortChange(null, null)
+    }
+  }, [sorted, onSortChange, column.name])
+
+  return (
+    <ColumnInfo column={column}>
+      <div
+        className={`flex items-center gap-1.5 px-4 py-2 w-full h-full ${
+          isSortable ? 'cursor-pointer select-none hover:text-gray-200 transition-colors' : ''
+        }`}
+        onClick={isSortable ? handleSort : undefined}
+      >
+        {isKey && <Key className="w-3.5 h-3.5 text-yellow-400 shrink-0" />}
+        {isForeignKey && <Link className="w-3.5 h-3.5 text-blue-400 shrink-0" />}
+        <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+          <span className="text-xs font-semibold text-gray-200 tracking-wider truncate">{column.name}</span>
+          <span className="text-[10px] text-gray-500 font-normal truncate">{column.type}</span>
+        </div>
+        {isSortable && <SortIcon sorted={sorted} className="h-3.5 w-3.5 text-gray-400 shrink-0" />}
+      </div>
+    </ColumnInfo>
+  )
+}

packages/cli/src/db-studio/ui/src/components/ColumnsDropdown.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import type { Table } from '@tanstack/react-table'
+import { Settings2, Search } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+
+type ColumnsDropdownProps = {
+  table: Table<Record<string, unknown>>
+  columnSearch: string
+  setColumnSearch: (value: string) => void
+}
+
+export const ColumnsDropdown = React.memo(function ColumnsDropdown({
+  table,
+  columnSearch,
+  setColumnSearch,
+}: ColumnsDropdownProps) {
+  const hasHiddenColumns = Object.values(table.getState().columnVisibility).some((visible) => visible === false)
+
+  return (
+    <DropdownMenu onOpenChange={(open) => !open && setColumnSearch('')}>
+      <DropdownMenuTrigger asChild>
+        <div className="relative">
+          <Button variant="outline">
+            <Settings2 className="mr-2 h-4 w-4" />
+            Columns
+          </Button>
+          {hasHiddenColumns && (
+            <Badge
+              variant="secondary"
+              className="absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px] rounded-full bg-white text-black"
+            >
+              !
+            </Badge>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-[240px]" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <div className="px-2 py-2" onKeyDown={(e) => e.stopPropagation()}>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400" />
+            <Input
+              placeholder="Search..."
+              value={columnSearch}
+              onChange={(e) => setColumnSearch(e.target.value)}
+              className="h-8 text-xs pl-8 w-full"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+        <div className="max-h-[300px] overflow-y-auto">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-full justify-start text-xs font-normal"
+            onClick={(e) => {
+              e.preventDefault()
+              const hasHiddenColumns = table.getAllColumns().some((col) => !col.getIsVisible() && col.getCanHide())
+              table.getAllColumns().forEach((col) => {
+                if (col.getCanHide()) {
+                  col.toggleVisibility(hasHiddenColumns)
+                }
+              })
+            }}
+          >
+            {table.getAllColumns().some((col) => !col.getIsVisible() && col.getCanHide())
+              ? 'Select all'
+              : 'Deselect all'}
+          </Button>
+          {table
+            .getAllColumns()
+            .filter((column) => column.getCanHide())
+            .filter((column) => column.id.toLowerCase().includes(columnSearch.toLowerCase()))
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  checked={column.getIsVisible()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                  onSelect={(e) => e.preventDefault()}
+                >
+                  {column.id}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+          {table
+            .getAllColumns()
+            .filter((column) => column.getCanHide())
+            .filter((column) => column.id.toLowerCase().includes(columnSearch.toLowerCase())).length === 0 && (
+            <div className="px-2 py-2 text-xs text-gray-500 text-center">No columns found</div>
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+})