feat(tui): design revamp of diff viewer

packages/opencode/src/cli/cmd/tui/feature-plugins/system/diff-viewer-file-tree-utils.ts

@@ -5,6 +5,7 @@
 
 export type FileTreeItem = {
   readonly file: string
+  readonly status?: "added" | "deleted" | "modified"
 }
 
 export type FileTreeNode = {
@@ -125,6 +126,21 @@ export function moveFileTreeSelection(rows: readonly FileTreeRow[], selected: nu
   return rows[Math.max(0, Math.min(rows.length - 1, index + offset))]!.id
 }
 
+export function moveFileTreeSelectionToFirstChild(rows: readonly FileTreeRow[], selected: number | undefined) {
+  const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  const row = index === -1 ? undefined : rows[index]
+  if (row?.kind !== "directory") return selected
+  const child = rows[index + 1]
+  return child && child.depth > row.depth ? child.id : selected
+}
+
+export function moveFileTreeSelectionToParent(rows: readonly FileTreeRow[], selected: number | undefined) {
+  const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  const row = index === -1 ? undefined : rows[index]
+  if (!row || row.depth === 0) return selected
+  return rows.findLast((item, itemIndex) => itemIndex < index && item.depth < row.depth)?.id ?? selected
+}
+
 export function moveFileTreeSelectionToFile(
   rows: readonly FileTreeRow[],
   selected: number | undefined,

packages/opencode/src/cli/cmd/tui/feature-plugins/system/diff-viewer-file-tree.tsx

@@ -1,30 +1,36 @@
 /** @jsxImportSource @opentui/solid */
-import type { ColorInput, ScrollBoxRenderable } from "@opentui/core"
+import type { ColorInput, RGBA, ScrollBoxRenderable } from "@opentui/core"
 import { Locale } from "@/util/locale"
+import { tint } from "@tui/context/theme"
 import { createEffect, createMemo, For, Match, Switch } from "solid-js"
-import { buildFileTree, flattenFileTree, type FileTreeItem } from "./diff-viewer-file-tree-utils"
+import { buildFileTree, flattenFileTree, type FileTreeItem, type FileTreeRow } from "./diff-viewer-file-tree-utils"
+import { Panel } from "./diff-viewer-ui"
 
-const FILE_TREE_WIDTH = 32
 const FILE_TREE_HORIZONTAL_PADDING = 2
+const FILE_TREE_STATUS_WIDTH = 2
 
 export type DiffViewerFileTreeTheme = {
-  readonly background: ColorInput
+  readonly background: RGBA
   readonly backgroundPanel: ColorInput
   readonly backgroundElement: ColorInput
   readonly primary: ColorInput
+  readonly secondary: ColorInput
   readonly selectedListItemText: ColorInput
-  readonly text: ColorInput
-  readonly textMuted: ColorInput
+  readonly text: RGBA
+  readonly textMuted: RGBA
   readonly error: ColorInput
 }
 
 export type DiffViewerFileTreeProps = {
+  readonly width: number
   readonly files: readonly FileTreeItem[]
   readonly loading: boolean
   readonly error: unknown
   readonly theme: DiffViewerFileTreeTheme
   readonly focused?: boolean
   readonly highlightedNode?: number
+  readonly selectedFileIndex?: number
+  readonly reviewedFileNames?: ReadonlySet<string>
   readonly expandedNodes?: ReadonlySet<number>
 }
 
@@ -43,21 +49,12 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
     requestAnimationFrame(scrollSelectedIntoView)
   })
 
+  const fadedColor = () => tint(props.theme.text, props.theme.background, 0.75)
+
   return (
-    <box
-      width={FILE_TREE_WIDTH}
-      flexShrink={0}
-      backgroundColor={props.theme.backgroundPanel}
-      paddingLeft={1}
-      paddingRight={1}
-      paddingTop={1}
-      gap={1}
-      minHeight={0}
-    >
+    <Panel border="both" width={props.width}>
       <scrollbox
         ref={(element: ScrollBoxRenderable) => (scroll = element)}
-        flexGrow={1}
-        minHeight={0}
         verticalScrollbarOptions={{ visible: false }}
         horizontalScrollbarOptions={{ visible: false }}
       >
@@ -70,26 +67,24 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
           </Match>
           <Match when={props.files.length > 0}>
             <For each={rows()}>
-              {(row) => {
+              {(row, index) => {
                 const highlighted = () => props.focused && props.highlightedNode === row.id
-                const prefix = () =>
-                  `${"  ".repeat(row.depth)}${row.kind === "directory" ? (props.expandedNodes && !props.expandedNodes.has(row.id) ? "▸ " : "▾ ") : "  "}`
+                const selected = () => row.fileIndex !== undefined && props.selectedFileIndex === row.fileIndex
+                const reviewed = () => {
+                  const file = row.fileIndex === undefined ? undefined : props.files[row.fileIndex]?.file
+                  return file !== undefined && props.reviewedFileNames?.has(file)
+                }
+                const prefix = () => fileTreeRowPrefix(rows(), index(), row, props.expandedNodes)
+                const status = () => fileTreeRowStatus(row, props.files)
                 const name = () =>
                   Locale.truncate(
                     row.name,
-                    Math.max(1, FILE_TREE_WIDTH - FILE_TREE_HORIZONTAL_PADDING - prefix().length),
+                    Math.max(1, props.width - FILE_TREE_HORIZONTAL_PADDING - prefix().length - status().length),
                   )
                 return (
-                  <box flexDirection="row" width="100%">
+                  <box flexDirection="row" width="100%" backgroundColor={highlighted() ? props.theme.primary : undefined}>
                     <text
-                      fg={
-                        highlighted()
-                          ? props.theme.background
-                          : row.kind === "directory"
-                            ? props.theme.textMuted
-                            : props.theme.text
-                      }
-                      bg={highlighted() ? props.theme.primary : undefined}
+                      fg={highlighted() ? props.theme.background : fadedColor()}
                       wrapMode="none"
                       flexShrink={0}
                     >
@@ -100,24 +95,30 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
                         fg={
                           highlighted()
                             ? props.theme.background
-                            : row.kind === "directory"
+                            : reviewed()
                               ? props.theme.textMuted
-                              : props.theme.text
+                              : selected()
+                                ? props.theme.primary
+                                : row.kind === "directory"
+                                  ? tint(props.theme.text, props.theme.background, 0.35)
+                                  : props.theme.text
                         }
-                        bg={highlighted() ? props.theme.primary : undefined}
                         wrapMode="none"
                       >
                         {name()}
                       </text>
                     </box>
+                    <text fg={highlighted() ? props.theme.background : props.theme.textMuted} wrapMode="none" flexShrink={0}>
+                      {status()}
+                    </text>
                   </box>
                 )
               }}
             </For>
           </Match>
         </Switch>
       </scrollbox>
-    </box>
+    </Panel>
   )
 }
 
@@ -131,3 +132,33 @@ function scrollFileTreeRowIntoView(scroll: ScrollBoxRenderable | undefined, inde
     scroll.scrollTo(index - scroll.viewport.height + 1)
   }
 }
+
+function fileTreeRowPrefix(
+  rows: readonly FileTreeRow[],
+  index: number,
+  row: FileTreeRow,
+  expandedNodes: ReadonlySet<number> | undefined,
+) {
+  const indentation = Array.from({ length: row.depth }, (_, depth) => {
+    if (depth === 0 && !hasLaterSibling(rows, 0, 0)) return " "
+    return hasLaterSibling(rows, index, depth) ? "│  " : "   "
+  }).join("")
+  const topRoot = index === 0 && row.depth === 0
+  const branch = topRoot ? " " : hasLaterSibling(rows, index, row.depth) ? "├─ " : "└─ "
+  const marker = row.kind === "directory" ? (expandedNodes && !expandedNodes.has(row.id) ? "▸ " : "▾ ") : ""
+
+  return `${indentation}${branch}${marker}`
+}
+
+function hasLaterSibling(rows: readonly FileTreeRow[], index: number, depth: number) {
+  return rows.slice(index + 1).find((row) => row.depth <= depth)?.depth === depth
+}
+
+function fileTreeRowStatus(row: FileTreeRow, files: readonly FileTreeItem[]) {
+  if (row.fileIndex === undefined) return ""
+  const status = files[row.fileIndex]?.status
+  if (status === "modified") return "M".padStart(FILE_TREE_STATUS_WIDTH)
+  if (status === "added") return "A".padStart(FILE_TREE_STATUS_WIDTH)
+  if (status === "deleted") return "D".padStart(FILE_TREE_STATUS_WIDTH)
+  return "?".padStart(FILE_TREE_STATUS_WIDTH)
+}

packages/opencode/src/cli/cmd/tui/feature-plugins/system/diff-viewer-ui.tsx

@@ -0,0 +1,94 @@
+import type { BorderSides, ColorInput } from "@opentui/core"
+import type { JSX } from "@opentui/solid"
+import { useTheme } from "@tui/context/theme"
+import { createContext, splitProps, useContext } from "solid-js"
+
+export type Axis = "x" | "y"
+export type SeparatorEdge = "edge" | "edge-in" | "edge-out"
+export type PanelBorder = "start" | "end" | "both" | "none"
+
+const PanelGroupContext = createContext<{ axis: Axis }>()
+
+function crossAxis(axis: Axis) {
+  return axis === "x" ? "y" : "x"
+}
+
+function usePanelGroup() {
+  return useContext(PanelGroupContext)
+}
+
+export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis }) {
+  const [local, boxProps] = splitProps(props, ["axis", "children"])
+  return (
+    <PanelGroupContext.Provider value={{ axis: local.axis }}>
+      <box minWidth={0} minHeight={0} padding={0} flexDirection={local.axis === "x" ? "row" : "column"} {...boxProps}>
+        {local.children}
+      </box>
+    </PanelGroupContext.Provider>
+  )
+}
+
+export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) {
+  const group = usePanelGroup()
+  const { theme } = useTheme()
+  const [local, boxProps] = splitProps(props, ["border"])
+  const border = local.border ?? "start"
+  const borderProps = border === "none"
+    ? {}
+    : {
+        border: panelBorderSides(group?.axis ?? "y", border),
+        borderColor: theme.border,
+      }
+
+  return (
+    <box
+      minWidth={0}
+      minHeight={0}
+      flexDirection={crossAxis(group?.axis || "y") === "x" ? "row" : "column"}
+      {...borderProps}
+      {...boxProps}
+    />
+  )
+}
+
+function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): BorderSides[] {
+  if (axis === "x") return border === "both" ? ["top", "bottom"] : [border === "start" ? "top" : "bottom"]
+  return border === "both" ? ["left", "right"] : [border === "start" ? "left" : "right"]
+}
+
+export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
+  const group = usePanelGroup()
+  const { theme } = useTheme()
+  const color = () => props.color ?? theme.border
+  const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
+  if (axis() === "y") {
+    if (!props.start && !props.end) return <box width={1} flexShrink={0} border={["left"]} borderColor={color()} />
+    return (
+      <box width={1} flexShrink={0} flexDirection="column">
+        {props.start && <text fg={color()}>{verticalEdge(props.start, "start")}</text>}
+        <box flexGrow={1} border={["left"]} borderColor={color()} />
+        {props.end && <text fg={color()}>{verticalEdge(props.end, "end")}</text>}
+      </box>
+    )
+  }
+  if (!props.start && !props.end) return <box height={1} flexShrink={0} border={["top"]} borderColor={color()} />
+  return (
+    <box height={1} flexShrink={0} flexDirection="row">
+      {props.start && <text fg={color()}>{horizontalEdge(props.start, "start")}</text>}
+      <box flexGrow={1} border={["top"]} borderColor={color()} />
+      {props.end && <text fg={color()}>{horizontalEdge(props.end, "end")}</text>}
+    </box>
+  )
+}
+
+function horizontalEdge(edge: SeparatorEdge, side: "start" | "end") {
+  if (edge === "edge") return side === "start" ? "├" : "┤"
+  if (edge === "edge-in") return "┴"
+  return "┬"
+}
+
+function verticalEdge(edge: SeparatorEdge, side: "start" | "end") {
+  if (edge === "edge") return side === "start" ? "┬" : "┴"
+  if (edge === "edge-in") return "┤"
+  return "├"
+}