feat(lanes): stage/undo one hunk at a time, sticky review file headers

Review and the single-file view gain per-hunk Stage and Undo
(stage-hunk / discard-hunk: the hunk is named by its @@ line and
re-matched against a fresh diff, then git apply --cached / -R; undo
needs confirm: true and two clicks). Each review file header stays
pinned while its diff scrolls and carries the file's own
stage/unstage/discard.

client/src/components/lanes/LaneDiffView.tsx

@@ -21,7 +21,15 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useMemo, useRef, useState, type CSSProperties } from "react";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { canonicalLang, highlight, tokenClass } from "../../lib/highlight";
 import type { LaneChangeFile, LaneDiffHunk, LaneDiffLine } from "../../lib/types";
@@ -276,19 +284,38 @@ function markerClass(type: LaneDiffLine["type"]) {
   return "text-fg-muted";
 }
 
-function HunkHeader({ hunk, fixed }: { hunk: LaneDiffHunk; fixed?: boolean }) {
+/** Per-hunk controls (stage / undo) beside each `@@` line. A context rather
+ *  than a prop because the header renders from four places. */
+const HunkActions = createContext<((hunk: LaneDiffHunk) => ReactNode) | null>(null);
+
+function HunkHeader({
+  hunk,
+  fixed,
+  noActions,
+}: {
+  hunk: LaneDiffHunk;
+  fixed?: boolean;
+  /** The split view's left column: one set of controls per hunk, not two. */
+  noActions?: boolean;
+}) {
+  const actions = useContext(HunkActions);
   const at = hunk.header.split("@@")[1];
   // Windowed, the header is one ROW_PX row like the lines around it.
   return (
     <div
-      className={`bg-surface-2 px-2 text-[10px] text-fg-muted ${
+      className={`flex items-center gap-2 bg-surface-2 px-2 text-[10px] text-fg-muted ${
         fixed ? "overflow-hidden whitespace-nowrap leading-4" : "py-0.5"
       }`}
       style={fixed ? FIXED : undefined}
       data-diff-item={fixed ? "" : undefined}
     >
-      {at ? `@@${at}@@` : hunk.header}
-      {hunk.context ? ` ${hunk.context}` : ""}
+      <span className="min-w-0 flex-1 truncate">
+        {at ? `@@${at}@@` : hunk.header}
+        {hunk.context ? ` ${hunk.context}` : ""}
+      </span>
+      {actions && !noActions && (
+        <span className="sticky right-2 flex shrink-0 items-center gap-0.5">{actions(hunk)}</span>
+      )}
     </div>
   );
 }
@@ -394,7 +421,7 @@ function SplitColumn({
     <>
       {hunks.map((hunk, h) => (
         <div key={`${hunk.header}:${h}`}>
-          <HunkHeader hunk={hunk} />
+          <HunkHeader hunk={hunk} noActions={side === "left"} />
           {analyseHunk(hunk).rows.map((row, i) => (
             <SplitLine key={i} row={row} lang={lang} side={side} />
           ))}
@@ -422,7 +449,7 @@ function SplitSlice({
         .slice(range.start, range.end)
         .map(({ hunk, i }, k) =>
           i < 0 ? (
-            <HunkHeader key={range.start + k} hunk={hunk} fixed />
+            <HunkHeader key={range.start + k} hunk={hunk} fixed noActions={side === "left"} />
           ) : (
             <SplitLine
               key={range.start + k}
@@ -520,11 +547,14 @@ export function LaneDiffView({
   file,
   layout,
   fill = false,
+  hunkActions,
 }: {
   file: LaneChangeFile;
   layout: DiffLayout;
   /** Take the parent's height (single-file view) instead of the 60vh cap. */
   fill?: boolean;
+  /** Controls drawn on each hunk's header row. */
+  hunkActions?: (hunk: LaneDiffHunk) => ReactNode;
 }) {
   const { t } = useTranslation(["lanes"]);
   const lang = langFor(file.path);
@@ -544,43 +574,45 @@ export function LaneDiffView({
     return <p className="px-2 py-1 text-[10px] text-fg-muted">{t("changes.noHunks")}</p>;
 
   return (
-    <div
-      data-testid="lane-diff-view"
-      data-layout={layout}
-      onScroll={(e) => win.onScroll(e.currentTarget)}
-      className={`flex flex-col font-mono text-[11px] leading-[1.45] ${
-        layout === "split" ? boxHeight(fill) : `overflow-auto ${boxHeight(fill)}`
-      }`}
-    >
-      {layout === "split" ? (
-        <SplitView hunks={file.hunks} lang={lang} fill={fill} />
-      ) : win.on ? (
-        <Windowed count={items.length} range={win.range} minWidth={minWidth}>
-          {items
-            .slice(win.range.start, win.range.end)
-            .map(({ hunk, i }, k) =>
-              i < 0 ? (
-                <HunkHeader key={win.range.start + k} hunk={hunk} fixed />
-              ) : (
-                <UnifiedLine
-                  key={win.range.start + k}
-                  line={hunk.lines[i]!}
-                  lang={lang}
-                  emph={analyseHunk(hunk).emph.get(i)}
-                  style={FIXED}
-                />
-              )
-            )}
-        </Windowed>
-      ) : (
-        file.hunks.map((hunk, i) => (
-          <UnifiedHunk key={`${hunk.header}:${i}`} hunk={hunk} lang={lang} />
-        ))
-      )}
-      {file.truncated && (
-        <p className="px-2 py-1 text-[10px] text-status-warning">{t("changes.fileTruncated")}</p>
-      )}
-    </div>
+    <HunkActions.Provider value={hunkActions ?? null}>
+      <div
+        data-testid="lane-diff-view"
+        data-layout={layout}
+        onScroll={(e) => win.onScroll(e.currentTarget)}
+        className={`flex flex-col font-mono text-[11px] leading-[1.45] ${
+          layout === "split" ? boxHeight(fill) : `overflow-auto ${boxHeight(fill)}`
+        }`}
+      >
+        {layout === "split" ? (
+          <SplitView hunks={file.hunks} lang={lang} fill={fill} />
+        ) : win.on ? (
+          <Windowed count={items.length} range={win.range} minWidth={minWidth}>
+            {items
+              .slice(win.range.start, win.range.end)
+              .map(({ hunk, i }, k) =>
+                i < 0 ? (
+                  <HunkHeader key={win.range.start + k} hunk={hunk} fixed />
+                ) : (
+                  <UnifiedLine
+                    key={win.range.start + k}
+                    line={hunk.lines[i]!}
+                    lang={lang}
+                    emph={analyseHunk(hunk).emph.get(i)}
+                    style={FIXED}
+                  />
+                )
+              )}
+          </Windowed>
+        ) : (
+          file.hunks.map((hunk, i) => (
+            <UnifiedHunk key={`${hunk.header}:${i}`} hunk={hunk} lang={lang} />
+          ))
+        )}
+        {file.truncated && (
+          <p className="px-2 py-1 text-[10px] text-status-warning">{t("changes.fileTruncated")}</p>
+        )}
+      </div>
+    </HunkActions.Provider>
   );
 }