@brimveyn/aimux 1.5.4 → 1.6.1

package/src/ui/components/git-panel.tsx

@@ -1,41 +1,62 @@
-import { memo, type ReactNode, useMemo } from 'react'
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { memo, type ReactNode, useEffect, useMemo, useRef } from 'react'
 
 import type {
   GitFileEntry,
+  GitFileListMode,
   GitFileSection,
   GitPaneDiffCountConfig,
   GitPanelState,
   GitPanePathConfig,
 } from '../../state/types'
 
-import { theme } from '../theme'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
+import { getCurrentTheme, useTheme } from '../theme'
 
 interface GitPanelProps {
+  collapsedFolders?: Record<string, true>
+  fileListMode?: GitFileListMode
   gitPanel: GitPanelState
   projectPath: string | undefined
-  selectedFileKey?: string | null
+  selectedEntryKey?: string | null
   pathConfig?: GitPanePathConfig
   diffCountConfig?: GitPaneDiffCountConfig
+  headOffset?: number
 }
 
-export function fileKey(file: Pick<GitFileEntry, 'path' | 'section'>): string {
-  return `${file.section}:${file.path}`
+function sectionTitle(section: GitFileSection, headOffset: number): string {
+  switch (section) {
+    case 'historical':
+      return `HEAD~${headOffset}`
+    case 'staged':
+      return 'Staged Changes'
+    case 'unstaged':
+      return 'Changes'
+    case 'untracked':
+      return 'Untracked'
+  }
 }
 
-const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
-  { key: 'staged', title: 'Staged Changes' },
-  { key: 'unstaged', title: 'Changes' },
-  { key: 'untracked', title: 'Untracked' },
-]
+const BASE_SECTION_ORDER: GitFileSection[] = ['staged', 'unstaged', 'untracked']
+const HISTORICAL_SECTION_ORDER: GitFileSection[] = ['historical', 'untracked']
 
-const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
-  '?': theme.success,
-  'A': theme.success,
-  'C': theme.accent,
-  'D': theme.danger,
-  'M': theme.warning,
-  'R': theme.accent,
-  'U': theme.danger,
+function statusColor(status: GitFileEntry['status']): string {
+  const t = getCurrentTheme()
+  switch (status) {
+    case '?':
+    case 'A':
+      return t.colors['gitDecoration.addedResourceForeground']
+    case 'C':
+    case 'R':
+      return t.colors['textLink.foreground']
+    case 'D':
+    case 'U':
+      return t.colors['editorError.foreground']
+    case 'M':
+      return t.colors['editorWarning.foreground']
+  }
 }
 
 function displayStatus(file: GitFileEntry): string {
@@ -43,16 +64,6 @@ function displayStatus(file: GitFileEntry): string {
   return file.status
 }
 
-function groupBySection(files: GitFileEntry[]): Record<GitFileSection, GitFileEntry[]> {
-  const groups: Record<GitFileSection, GitFileEntry[]> = {
-    staged: [],
-    unstaged: [],
-    untracked: [],
-  }
-  for (const file of files) groups[file.section].push(file)
-  return groups
-}
-
 function maxDigitWidth(files: GitFileEntry[]): { added: number; removed: number } {
   let addedMax = 1
   let removedMax = 1
@@ -67,7 +78,7 @@ function padRight(value: number | null, width: number): string {
   return String(value ?? 0).padStart(width, ' ')
 }
 
-export function splitPath(path: string): { prefix: string; basename: string } {
+function splitPath(path: string): { prefix: string; basename: string } {
   const slash = path.lastIndexOf('/')
   if (slash < 0) return { basename: path, prefix: '' }
   return { basename: path.slice(slash + 1), prefix: path.slice(0, slash + 1) }
@@ -77,30 +88,38 @@ function stripTrailingSlash(prefix: string): string {
   return prefix.endsWith('/') ? prefix.slice(0, -1) : prefix
 }
 
-function renderPath(file: GitFileEntry, pathConfig: GitPanePathConfig): ReactNode {
-  const showDir = pathConfig.enabled
+function renderFileLabel(
+  file: GitFileEntry,
+  pathConfig: GitPanePathConfig,
+  fileListMode: GitFileListMode
+): ReactNode {
   const transform = pathConfig.enabled ? pathConfig.pathFn : undefined
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
   const dir = stripTrailingSlash(prefix)
-  if (file.renamedFrom) {
-    const renamedDisplay = transform ? transform(file.renamedFrom) : file.renamedFrom
-    const renamed = splitPath(renamedDisplay)
-    const renamedDir = stripTrailingSlash(renamed.prefix)
+  const showDir = fileListMode === 'flat' && pathConfig.enabled && dir
+  if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={theme.text}>{renamed.basename}</span>
-        {showDir && renamedDir ? <span fg={theme.textMuted}> {renamedDir}</span> : null}
-        <span fg={theme.textMuted}> → </span>
-        <span fg={theme.text}>{basename}</span>
-        {showDir && dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+        <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
+        {showDir ? (
+          <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span>
+        ) : null}
       </text>
     )
   }
+  const renamedDisplay = transform ? transform(file.renamedFrom) : file.renamedFrom
+  const renamed = splitPath(renamedDisplay)
+  const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={theme.text}>{basename}</span>
-      {showDir && dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+      <span fg={getCurrentTheme().colors['descriptionForeground']}>{renamed.basename}</span>
+      {showDir && renamedDir ? (
+        <span fg={getCurrentTheme().colors['descriptionForeground']}> {renamedDir}</span>
+      ) : null}
+      <span fg={getCurrentTheme().colors['descriptionForeground']}> → </span>
+      <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
+      {showDir ? <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span> : null}
     </text>
   )
 }
@@ -116,74 +135,145 @@ function renderDiffCount(
   if (!diffCountConfig.enabled) return null
   if (!hasNumstat) {
     return (
-      <text fg={theme.textMuted} bg={bg} flexShrink={0}>
+      <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text fg={theme.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={theme.dim} bg={bg}>
+      <text
+        fg={getCurrentTheme().colors['gitDecoration.addedResourceForeground']}
+        bg={bg}
+      >{`+${padRight(file.added, addedW)}`}</text>
+      <text fg={getCurrentTheme().colors['editor.lineHighlightBackground']} bg={bg}>
         {' '}
       </text>
-      <text fg={theme.danger} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
+      <text
+        fg={getCurrentTheme().colors['editorError.foreground']}
+        bg={bg}
+      >{`−${padRight(file.removed, removedW)}`}</text>
+    </box>
+  )
+}
+
+function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
+  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
+  const onSelect = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
+  }
+  const onToggle = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-toggle-folder' })
+  }
+  return (
+    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+      <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
+        <box flexDirection="row" gap={1} onMouseDown={onToggle}>
+          <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg}>
+            {row.isCollapsed ? '▸' : '▾'}
+          </text>
+          <text fg={getCurrentTheme().colors['terminal.ansiMagenta']} bg={bg} wrapMode="none">
+            {row.name}
+          </text>
+        </box>
+      </box>
     </box>
   )
 }
 
 function renderFileRow(
-  file: GitFileEntry,
-  key: string,
+  row: GitTreeFileRow,
   addedW: number,
   removedW: number,
   isSelected: boolean,
+  fileListMode: GitFileListMode,
   pathConfig: GitPanePathConfig,
   diffCountConfig: GitPaneDiffCountConfig
 ): ReactNode {
+  const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected ? theme.panelHighlight : undefined
+  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
+  const onSelect = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
+  }
   return (
-    <box key={key} flexDirection="row" gap={1} paddingLeft={1} backgroundColor={bg}>
-      <text fg={STATUS_COLORS[file.status]} bg={bg}>
-        <strong>{displayStatus(file)}</strong>
-      </text>
-      <box flexGrow={1} overflow="hidden">
-        {renderPath(file, pathConfig)}
+    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+      <box width={2} flexShrink={0} justifyContent="center">
+        <text fg={statusColor(file.status)} bg={bg}>
+          <strong>{displayStatus(file)}</strong>
+        </text>
+      </box>
+      <box flexGrow={1} overflow="hidden" paddingLeft={fileListMode === 'tree' ? row.depth * 2 : 0}>
+        {renderFileLabel(file, pathConfig, fileListMode)}
       </box>
       {renderDiffCount(file, addedW, removedW, bg, diffCountConfig, hasNumstat)}
     </box>
   )
 }
 
-function renderSection(
+function renderTreeSection(
   section: GitFileSection,
   title: string,
   files: GitFileEntry[],
+  rows: Array<GitTreeFolderRow | GitTreeFileRow>,
   addedW: number,
   removedW: number,
-  selectedFileKey: string | null | undefined,
+  fileListMode: GitFileListMode,
+  selectedEntryKey: string | null | undefined,
+  showListModeToggle: boolean,
   pathConfig: GitPanePathConfig,
   diffCountConfig: GitPaneDiffCountConfig
 ): ReactNode {
   if (files.length === 0) return null
+  const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
+  const toggleListMode = (): void => {
+    dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
+    runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
+  }
   return (
     <box key={section} flexDirection="column">
-      <text fg={theme.accentAlt}>
-        <strong>
-          {title} ({files.length})
-        </strong>
-      </text>
-      {files.map((file, i) =>
-        renderFileRow(
-          file,
-          `${section}-${i}`,
-          addedW,
-          removedW,
-          !!selectedFileKey && fileKey(file) === selectedFileKey,
-          pathConfig,
-          diffCountConfig
-        )
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
+          <strong>
+            {title} ({files.length})
+          </strong>
+        </text>
+        {showListModeToggle ? (
+          <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
+            <text
+              fg={
+                fileListMode === 'tree'
+                  ? getCurrentTheme().colors['textLink.foreground']
+                  : getCurrentTheme().colors['descriptionForeground']
+              }
+            >
+              tree
+            </text>
+            <text fg={getCurrentTheme().colors['descriptionForeground']}>|</text>
+            <text
+              fg={
+                fileListMode === 'flat'
+                  ? getCurrentTheme().colors['textLink.foreground']
+                  : getCurrentTheme().colors['descriptionForeground']
+              }
+            >
+              flat
+            </text>
+          </box>
+        ) : null}
+      </box>
+      {rows.map((row) =>
+        row.kind === 'folder'
+          ? renderFolderRow(row, row.key === selectedEntryKey)
+          : renderFileRow(
+              row,
+              addedW,
+              removedW,
+              row.key === selectedEntryKey,
+              fileListMode,
+              pathConfig,
+              diffCountConfig
+            )
       )}
     </box>
   )
@@ -209,16 +299,25 @@ function computeStatusPlaceholder(
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
   if (!hasProjectPath) {
-    return { label: 'No active session', labelColor: theme.textMuted }
+    return {
+      label: 'No active session',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return { label: 'Not a git repository', labelColor: theme.textMuted }
+    return {
+      label: 'Not a git repository',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: theme.danger }
+    return { label: 'Git error', labelColor: getCurrentTheme().colors['editorError.foreground'] }
   }
   if (gitPanel.files.length === 0) {
-    return { label: 'Working tree clean', labelColor: theme.textMuted }
+    return {
+      label: 'Working tree clean',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   return null
 }
@@ -227,13 +326,22 @@ const DEFAULT_PATH_CONFIG: GitPanePathConfig = { enabled: true }
 const DEFAULT_DIFF_COUNT_CONFIG: GitPaneDiffCountConfig = { enabled: true }
 
 export const GitPanel = memo(function GitPanel({
+  collapsedFolders = {},
   diffCountConfig = DEFAULT_DIFF_COUNT_CONFIG,
+  fileListMode = 'tree',
   gitPanel,
+  headOffset = 0,
   pathConfig = DEFAULT_PATH_CONFIG,
   projectPath,
-  selectedFileKey,
+  selectedEntryKey,
 }: GitPanelProps) {
-  const groups = useMemo(() => groupBySection(gitPanel.files), [gitPanel.files])
+  const theme = useTheme()
+  const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const tree = useMemo(
+    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode),
+    [collapsedFolders, fileListMode, gitPanel.files]
+  )
   const { added: addedW, removed: removedW } = useMemo(
     () => maxDigitWidth(gitPanel.files),
     [gitPanel.files]
@@ -242,33 +350,54 @@ export const GitPanel = memo(function GitPanel({
   const statusNode = renderStatus(gitPanel, !!projectPath)
 
   const hasRemoteTracking = gitPanel.ahead > 0 || gitPanel.behind > 0
+  const toggleSection =
+    tree.sections.find((section) => section.section === 'unstaged' && section.files.length > 0)
+      ?.section ??
+    tree.sections.find((section) => section.files.length > 0)?.section ??
+    null
+
+  useEffect(() => {
+    const scrollbox = scrollRef.current
+    if (!scrollbox || !selectedEntryKey) return
+    const selectedIndex = tree.visibleRows.findIndex((row) => row.key === selectedEntryKey)
+    if (selectedIndex < 0) return
+    const viewportHeight = Math.max(1, scrollbox.viewport.height)
+    const target = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2))
+    scrollbox.scrollTo({ x: 0, y: target })
+  }, [selectedEntryKey, tree.visibleRows])
 
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       {hasRemoteTracking ? (
-        <text fg={theme.textMuted}>
+        <text fg={theme.colors['descriptionForeground']}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}
       {statusNode ?? (
         <scrollbox
           flexGrow={1}
+          ref={scrollRef}
           scrollY
+          scrollbarOptions={{ visible: false }}
           viewportCulling
           contentOptions={{ flexDirection: 'column', gap: 0 }}
         >
-          {SECTION_ORDER.map((s) =>
-            renderSection(
-              s.key,
-              s.title,
-              groups[s.key],
+          {sectionOrder.map((key) => {
+            const section = tree.sections.find((entry) => entry.section === key)
+            return renderTreeSection(
+              key,
+              sectionTitle(key, headOffset),
+              section?.files ?? [],
+              section?.rows ?? [],
               addedW,
               removedW,
-              selectedFileKey,
+              fileListMode,
+              selectedEntryKey,
+              key === toggleSection,
               pathConfig,
               diffCountConfig
             )
-          )}
+          })}
         </scrollbox>
       )}
     </box>