Pin the current file header while scrolling the review pane (#141)

Co-authored-by: Ben Vinegar <ben@benv.ca>

Author: tanvesh01

src/ui/App.tsx

@@ -121,18 +121,26 @@ export function App({
   const [resizeStartWidth, setResizeStartWidth] = useState<number | null>(null);
   const [selectedFileId, setSelectedFileId] = useState(bootstrap.changeset.files[0]?.id ?? "");
   const [selectedHunkIndex, setSelectedHunkIndex] = useState(0);
+  const [selectedFileTopAlignRequestId, setSelectedFileTopAlignRequestId] = useState(0);
   const [scrollToNote, setScrollToNote] = useState(false);
   const deferredFilter = useDeferredValue(filter);
 
   const pagerMode = Boolean(bootstrap.input.options.pager);
   const activeTheme = resolveTheme(themeId, renderer.themeMode);
 
-  const jumpToFile = useCallback((fileId: string, nextHunkIndex = 0) => {
-    filesScrollRef.current?.scrollChildIntoView(fileRowId(fileId));
-    setSelectedFileId(fileId);
-    setSelectedHunkIndex(nextHunkIndex);
-    setScrollToNote(false);
-  }, []);
+  const jumpToFile = useCallback(
+    (fileId: string, nextHunkIndex = 0, options?: { alignFileHeaderTop?: boolean }) => {
+      filesScrollRef.current?.scrollChildIntoView(fileRowId(fileId));
+      setSelectedFileId(fileId);
+      setSelectedHunkIndex(nextHunkIndex);
+      setScrollToNote(false);
+
+      if (options?.alignFileHeaderTop) {
+        setSelectedFileTopAlignRequestId((current) => current + 1);
+      }
+    },
+    [],
+  );
 
   const jumpToAnnotatedHunk = useCallback((fileId: string, nextHunkIndex = 0) => {
     filesScrollRef.current?.scrollChildIntoView(fileRowId(fileId));
@@ -948,7 +956,7 @@ export function App({
               width={clampedFilesPaneWidth}
               onSelectFile={(fileId) => {
                 setFocusArea("files");
-                jumpToFile(fileId);
+                jumpToFile(fileId, 0, { alignFileHeaderTop: true });
               }}
             />
 
@@ -982,6 +990,7 @@ export function App({
           showHunkHeaders={showHunkHeaders}
           wrapLines={wrapLines}
           wrapToggleScrollTop={wrapToggleScrollTopRef.current}
+          selectedFileTopAlignRequestId={selectedFileTopAlignRequestId}
           theme={activeTheme}
           width={diffPaneWidth}
           onOpenAgentNotesAtHunk={openAgentNotesAtHunk}

src/ui/components/panes/DiffFileHeaderRow.tsx

@@ -0,0 +1,61 @@
+import type { DiffFile } from "../../../core/types";
+import { fileLabelParts } from "../../lib/files";
+import { fitText } from "../../lib/text";
+import type { AppTheme } from "../../themes";
+
+interface DiffFileHeaderRowProps {
+  file: DiffFile;
+  headerLabelWidth: number;
+  headerStatsWidth: number;
+  theme: AppTheme;
+  onSelect?: () => void;
+}
+
+/** Render one file header row in the review stream or sticky overlay. */
+export function DiffFileHeaderRow({
+  file,
+  headerLabelWidth,
+  headerStatsWidth,
+  theme,
+  onSelect,
+}: DiffFileHeaderRowProps) {
+  const additionsText = `+${file.stats.additions}`;
+  const deletionsText = `-${file.stats.deletions}`;
+  const { filename, stateLabel } = fileLabelParts(file);
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: 1,
+        flexShrink: 0,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: theme.panel,
+      }}
+      onMouseUp={onSelect}
+    >
+      {/* Clicking the file header jumps the main stream selection without collapsing to a single-file view. */}
+      <box style={{ flexDirection: "row" }}>
+        <text fg={theme.text}>
+          {fitText(filename, Math.max(1, headerLabelWidth - (stateLabel?.length ?? 0)))}
+        </text>
+        {stateLabel && <text fg={theme.muted}>{stateLabel}</text>}
+      </box>
+      <box
+        style={{
+          width: headerStatsWidth,
+          height: 1,
+          flexDirection: "row",
+          justifyContent: "flex-end",
+        }}
+      >
+        <text fg={theme.badgeAdded}>{additionsText}</text>
+        <text fg={theme.muted}> </text>
+        <text fg={theme.badgeRemoved}>{deletionsText}</text>
+      </box>
+    </box>
+  );
+}