Function DatabaseView

packages/app-core/src/components/DatabaseView.tsx:24–220

({
  tabPath,
  isActive = true
}: {
  tabPath: string
  isActive?: boolean
})

 * (title + view switcher + add controls) and the active view.
 */
export function DatabaseView({
  tabPath,
  isActive = true
}: {
  tabPath: string
  isActive?: boolean
}): JSX.Element {
  const csvPath = csvPathFromDatabaseTab(tabPath)
  const doc = useStore((s) => (csvPath ? s.databases[csvPath] : undefined))
  const loading = useStore((s) => (csvPath ? !!s.databasesLoading[csvPath] : false))
  const loadDatabase = useStore((s) => s.loadDatabase)
  const updateDatabaseRows = useStore((s) => s.updateDatabaseRows)
  const updateDatabaseSchema = useStore((s) => s.updateDatabaseSchema)
  const renameDatabase = useStore((s) => s.renameDatabase)
  const [viewMenu, setViewMenu] = useState<{ viewId: string; x: number; y: number } | null>(null)
  const [renamingView, setRenamingView] = useState<string | null>(null)
  const [rawMode, setRawMode] = useState(false)
  const [editingTitle, setEditingTitle] = useState(false)
  // Only `.base` databases rename by title (a legacy loose `.csv` doesn't).
  const canRenameTitle = !!csvPath && !!formDirFromCsvPath(csvPath)

  useEffect(() => {
    if (csvPath && !doc && !loading) void loadDatabase(csvPath)
  }, [csvPath, doc, loading, loadDatabase])

  if (!csvPath) {
    return (
      <div className="flex min-h-0 flex-1 items-center justify-center text-sm text-ink-500">
        Invalid database.
      </div>
    )
  }
  if (!doc) {
    return (
      <div className="flex min-h-0 flex-1 items-center justify-center text-sm text-ink-500">
        {loading ? 'Loading database…' : 'Opening…'}
      </div>
    )
  }

  const activeView = doc.views.find((v) => v.id === doc.activeViewId) ?? doc.views[0]

  const viewMenuItems = (viewId: string): ContextMenuItem[] => [
    { label: 'Rename view', onSelect: () => setRenamingView(viewId) },
    {
      label: 'Delete view',
      danger: true,
      disabled: doc.views.length <= 1,
      onSelect: () => updateDatabaseSchema(csvPath, removeView(doc, viewId))
    }
  ]

  return (
    <div className="flex min-h-0 flex-1 flex-col bg-paper-100 text-ink-900">
      <header className="glass-header flex h-12 shrink-0 items-center gap-2 px-4">
        <DatabaseIcon className="h-4 w-4 shrink-0 text-ink-500" />
        {editingTitle && canRenameTitle ? (
          <input