feat(web): collapsible file diffs in commit diff panel

Hovering the status badge reveals a chevron; clicking it toggles the
diff body. Collapsed state is held in the FileDiffList so it survives
virtualization unmounts, and on collapse we scroll the row's header to
the top of the viewport when it's already been scrolled past.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: brendan-kellam

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffList.tsx

@@ -2,7 +2,7 @@
 
 import { FileDiff } from "@/features/git";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useMemo, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { FileDiffRow } from "./fileDiffRow";
 
 interface FileDiffListProps {
@@ -23,7 +23,15 @@ const LINE_HEIGHT_PX = 18;
 const MIN_ROW_HEIGHT_PX = 200;
 const CONTEXT_LINES_PER_HUNK = 6;
 
-const estimateRowHeight = (file: FileDiff): number => {
+const getRowKey = (file: FileDiff, index: number): string => {
+    return file.newPath ?? file.oldPath ?? `idx-${index}`;
+};
+
+const estimateRowHeight = (file: FileDiff, isCollapsed: boolean): number => {
+    if (isCollapsed) {
+        return ROW_HEADER_PX;
+    }
+
     const visibleLines = file.hunks.reduce((sum, hunk) => {
         return sum + Math.max(hunk.oldRange.lines, hunk.newRange.lines) + CONTEXT_LINES_PER_HUNK;
     }, 0);
@@ -34,14 +42,39 @@ const estimateRowHeight = (file: FileDiff): number => {
 
 export const FileDiffList = ({ files, repoName, commitSha, parentSha }: FileDiffListProps) => {
     const parentRef = useRef<HTMLDivElement>(null);
+    const [collapsedKeys, setCollapsedKeys] = useState<Set<string>>(() => new Set());
+    const collapsedKeysRef = useRef(collapsedKeys);
+    collapsedKeysRef.current = collapsedKeys;
 
     const virtualizer = useVirtualizer({
         count: files.length,
         getScrollElement: () => parentRef.current,
-        estimateSize: (index) => estimateRowHeight(files[index]),
+        estimateSize: (index) => {
+            const file = files[index];
+            return estimateRowHeight(file, collapsedKeys.has(getRowKey(file, index)));
+        },
         overscan: 6,
     });
 
+    const toggleCollapsed = useCallback((key: string, index: number, rowStart: number) => {
+        const willCollapse = !collapsedKeysRef.current.has(key);
+        setCollapsedKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            } else {
+                next.add(key);
+            }
+            return next;
+        });
+        if (willCollapse) {
+            const scrollTop = parentRef.current?.scrollTop ?? 0;
+            if (scrollTop > rowStart) {
+                virtualizer.scrollToIndex(index, { align: 'start' });
+            }
+        }
+    }, [virtualizer]);
+
     return (
         <div
             ref={parentRef}
@@ -61,7 +94,7 @@ export const FileDiffList = ({ files, repoName, commitSha, parentSha }: FileDiff
             >
                 {virtualizer.getVirtualItems().map((virtualRow) => {
                     const file = files[virtualRow.index];
-                    const rowKey = file.newPath ?? file.oldPath ?? `idx-${virtualRow.index}`;
+                    const rowKey = getRowKey(file, virtualRow.index);
                     return (
                         <div
                             key={virtualRow.key}
@@ -82,6 +115,8 @@ export const FileDiffList = ({ files, repoName, commitSha, parentSha }: FileDiff
                                 repoName={repoName}
                                 commitSha={commitSha}
                                 parentSha={parentSha}
+                                isCollapsed={collapsedKeys.has(rowKey)}
+                                onToggleCollapsed={() => toggleCollapsed(rowKey, virtualRow.index, virtualRow.start)}
                             />
                         </div>
                     );

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx

@@ -24,9 +24,11 @@ interface FileDiffRowProps {
     commitSha: string;
     // Null for the initial commit (no parent).
     parentSha: string | null;
+    isCollapsed: boolean;
+    onToggleCollapsed: () => void;
 }
 
-export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha }: FileDiffRowProps) => {
+export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha, isCollapsed, onToggleCollapsed }: FileDiffRowProps) => {
     const status = getFileStatus(file);
 
     // Deleted files don't exist at the commit, so the link points to the
@@ -61,7 +63,7 @@ export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha }: F
                 className="flex flex-row items-center gap-2 py-2 px-3 border-b bg-muted sticky z-10"
                 style={{ top: `-${yOffset}px` }}
             >
-                <StatusBadge status={status} />
+                <StatusBadge status={status} onToggle={onToggleCollapsed} isCollapsed={isCollapsed} />
                 <div className="flex-1 min-w-0 flex flex-row items-center gap-1 overflow-hidden">
                     <code className="text-xs truncate">{getDisplayPath(file)}</code>
                     <CopyIconButton onCopy={onCopyPath} className="flex-shrink-0" />
@@ -75,16 +77,18 @@ export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha }: F
                     />
                 )}
             </div>
-            {file.hunks.length === 0 ? (
-                <div className="p-4 text-sm text-muted-foreground">
-                    No textual diff (binary file or empty change).
-                </div>
-            ) : (
-                <LightweightDiffViewer
-                    hunks={file.hunks}
-                    oldPath={file.oldPath}
-                    newPath={file.newPath}
-                />
+            {!isCollapsed && (
+                file.hunks.length === 0 ? (
+                    <div className="p-4 text-sm text-muted-foreground">
+                        No textual diff (binary file or empty change).
+                    </div>
+                ) : (
+                    <LightweightDiffViewer
+                        hunks={file.hunks}
+                        oldPath={file.oldPath}
+                        newPath={file.newPath}
+                    />
+                )
             )}
         </div>
     );

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileStatus.tsx

@@ -1,4 +1,5 @@
 import type { FileDiff } from "@/features/git";
+import { ChevronDown, ChevronRight } from "lucide-react";
 
 export type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed';
 
@@ -29,10 +30,35 @@ const STATUS_BADGE_COLORS: Record<FileStatus, string> = {
     renamed: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
 };
 
-export const StatusBadge = ({ status }: { status: FileStatus }) => (
-    <span
-        className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-mono font-bold ${STATUS_BADGE_COLORS[status]}`}
-    >
-        {STATUS_BADGE_LABELS[status]}
-    </span>
-);
+interface StatusBadgeProps {
+    status: FileStatus;
+    onToggle?: () => void;
+    isCollapsed?: boolean;
+}
+
+export const StatusBadge = ({ status, onToggle, isCollapsed }: StatusBadgeProps) => {
+    const baseClassName = `inline-flex items-center justify-center w-5 h-5 rounded text-xs font-mono font-bold ${STATUS_BADGE_COLORS[status]}`;
+
+    if (!onToggle) {
+        return (
+            <span className={baseClassName}>
+                {STATUS_BADGE_LABELS[status]}
+            </span>
+        );
+    }
+
+    const Chevron = isCollapsed ? ChevronRight : ChevronDown;
+
+    return (
+        <button
+            type="button"
+            onClick={onToggle}
+            aria-label={isCollapsed ? "Expand diff" : "Collapse diff"}
+            aria-expanded={!isCollapsed}
+            className={`${baseClassName} group cursor-pointer`}
+        >
+            <span className="group-hover:hidden">{STATUS_BADGE_LABELS[status]}</span>
+            <Chevron className="hidden group-hover:block w-3 h-3" />
+        </button>
+    );
+};