@hienlh/ppm 0.19.12 → 0.20.0

package/src/web/components/git/git-status-panel.tsx

@@ -15,6 +15,7 @@ import {
   GitCommitHorizontal,
   GitBranch,
   Check,
+  SquareDashedMousePointer,
 } from "lucide-react";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { api, projectUrl } from "@/lib/api-client";
@@ -26,6 +27,7 @@ import { useProjectStore } from "@/stores/project-store";
 import { useGitStatusStore } from "@/stores/git-status-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { GitWorktreePanel } from "./git-worktree-panel";
+import { HunkStageDialog, type HunkStageTarget } from "./hunk-stage-dialog";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -124,6 +126,8 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
     label: string;
     files: string[];
   } | null>(null);
+  // Non-null while the hunk picker is open, for the file it was opened on.
+  const [hunkTarget, setHunkTarget] = useState<HunkStageTarget | null>(null);
   const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
   const viewMode = useSettingsStore((s) => s.gitStatusViewMode);
   const setViewMode = useSettingsStore((s) => s.setGitStatusViewMode);
@@ -531,6 +535,7 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
             onFolderAction={(files) => unstageFiles(files.map((f) => f.path))}
             onClickFile={openDiff}
             onOpenFile={openFile}
+            onPickHunks={(f) => setHunkTarget({ filePath: f.path, scope: "index" })}
             disabled={acting}
           />
 
@@ -553,6 +558,7 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
             onFolderAction={(files) => stageFiles(files.map((f) => f.path))}
             onClickFile={openDiff}
             onOpenFile={openFile}
+            onPickHunks={(f) => setHunkTarget({ filePath: f.path, scope: "worktree" })}
             disabled={acting}
             showRevert
             onRevert={(f) =>
@@ -571,6 +577,14 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
       {/* Commit block — bottom on mobile */}
       <div className="md:hidden border-t border-border shrink-0">{commitBox}</div>
 
+      {/* Hunk / line picker */}
+      <HunkStageDialog
+        projectName={projectName}
+        target={hunkTarget}
+        onClose={() => setHunkTarget(null)}
+        onApplied={fetchStatus}
+      />
+
       {/* Revert confirmation dialog */}
       <Dialog
         open={!!revertTarget}
@@ -622,6 +636,7 @@ function ActionButtons({
   onRevert,
   onAction,
   onOpenFile,
+  onPickHunks,
   actionIcon,
   actionTitle,
   disabled,
@@ -630,6 +645,7 @@ function ActionButtons({
   onRevert?: () => void;
   onAction: () => void;
   onOpenFile?: () => void;
+  onPickHunks?: () => void;
   actionIcon: React.ReactNode;
   actionTitle: string;
   disabled: boolean;
@@ -647,6 +663,17 @@ function ActionButtons({
           <FileText className="size-3" />
         </button>
       )}
+      {onPickHunks && (
+        <button
+          type="button"
+          className="flex items-center justify-center size-5 rounded text-muted-foreground hover:text-primary active:scale-95 transition-colors"
+          onClick={(e) => { e.stopPropagation(); onPickHunks(); }}
+          disabled={disabled}
+          title={`${actionTitle} lines…`}
+        >
+          <SquareDashedMousePointer className="size-3" />
+        </button>
+      )}
       {showRevert && onRevert && (
         <button
           type="button"
@@ -689,6 +716,7 @@ function FileSection({
   onFolderAction,
   onClickFile,
   onOpenFile,
+  onPickHunks,
   disabled,
   showRevert,
   onRevert,
@@ -707,6 +735,7 @@ function FileSection({
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
   onOpenFile?: (f: GitFileChange) => void;
+  onPickHunks?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -743,6 +772,7 @@ function FileSection({
               onAction={onAction}
               onClickFile={onClickFile}
               onOpenFile={onOpenFile}
+              onPickHunks={onPickHunks}
               disabled={disabled}
               showRevert={showRevert}
               onRevert={onRevert}
@@ -758,6 +788,7 @@ function FileSection({
           onFolderAction={onFolderAction}
           onClickFile={onClickFile}
           onOpenFile={onOpenFile}
+          onPickHunks={onPickHunks}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -817,6 +848,7 @@ function FileRow({
   onAction,
   onClickFile,
   onOpenFile,
+  onPickHunks,
   disabled,
   showRevert,
   onRevert,
@@ -828,6 +860,7 @@ function FileRow({
   onAction: (f: GitFileChange) => void;
   onClickFile: (f: GitFileChange) => void;
   onOpenFile?: (f: GitFileChange) => void;
+  onPickHunks?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -864,6 +897,7 @@ function FileRow({
         showRevert={showRevert}
         onRevert={onRevert ? () => onRevert(file) : undefined}
         onOpenFile={onOpenFile ? () => onOpenFile(file) : undefined}
+        onPickHunks={onPickHunks ? () => onPickHunks(file) : undefined}
         onAction={() => onAction(file)}
         actionIcon={actionIcon}
         actionTitle={actionTitle}
@@ -892,6 +926,11 @@ function FileRow({
             <DropdownMenuItem onClick={() => onAction(file)} disabled={disabled}>
               {actionTitle}
             </DropdownMenuItem>
+            {onPickHunks && (
+              <DropdownMenuItem onClick={() => onPickHunks(file)} disabled={disabled}>
+                {actionTitle} Lines…
+              </DropdownMenuItem>
+            )}
             {showRevert && onRevert && (
               <DropdownMenuItem
                 className="text-destructive focus:text-destructive"
@@ -920,6 +959,7 @@ function TreeView({
   onFolderAction,
   onClickFile,
   onOpenFile,
+  onPickHunks,
   disabled,
   showRevert,
   onRevert,
@@ -932,6 +972,7 @@ function TreeView({
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
   onOpenFile?: (f: GitFileChange) => void;
+  onPickHunks?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -953,6 +994,7 @@ function TreeView({
           onFolderAction={onFolderAction}
           onClickFile={onClickFile}
           onOpenFile={onOpenFile}
+          onPickHunks={onPickHunks}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -977,6 +1019,7 @@ function TreeNodeView({
   onFolderAction,
   onClickFile,
   onOpenFile,
+  onPickHunks,
   disabled,
   showRevert,
   onRevert,
@@ -991,6 +1034,7 @@ function TreeNodeView({
   onFolderAction?: (files: GitFileChange[]) => void;
   onClickFile: (f: GitFileChange) => void;
   onOpenFile?: (f: GitFileChange) => void;
+  onPickHunks?: (f: GitFileChange) => void;
   disabled: boolean;
   showRevert?: boolean;
   onRevert?: (f: GitFileChange) => void;
@@ -1024,6 +1068,7 @@ function TreeNodeView({
           onAction={onAction}
           onClickFile={onClickFile}
           onOpenFile={onOpenFile}
+          onPickHunks={onPickHunks}
           disabled={disabled}
           showRevert={showRevert}
           onRevert={onRevert}
@@ -1123,6 +1168,7 @@ function TreeNodeView({
                 onFolderAction={onFolderAction}
                 onClickFile={onClickFile}
                 onOpenFile={onOpenFile}
+                onPickHunks={onPickHunks}
                 disabled={disabled}
                 showRevert={showRevert}
                 onRevert={onRevert}

package/src/web/components/git/hunk-selection.ts

@@ -0,0 +1,132 @@
+/**
+ * Selection arithmetic for the hunk picker.
+ *
+ * Kept apart from the component so the mapping from "which lines are ticked" to
+ * "what the server is asked to apply" can be tested directly — it is the part
+ * that has to be right, since a wrong index stages the wrong line.
+ */
+
+export interface DiffLine {
+  kind: " " | "+" | "-";
+  text: string;
+  noNewline?: boolean;
+}
+
+export interface DiffHunk {
+  oldStart: number;
+  oldLines: number;
+  newStart: number;
+  newLines: number;
+  heading: string;
+  lines: DiffLine[];
+  /**
+   * Content address of this hunk, from `GET /git/hunks`. Echoed back on apply
+   * so the server resolves the selection against the diff that was on screen
+   * rather than against whatever the file says by the time the request lands.
+   */
+  id: string;
+}
+
+/** `${hunkIndex}:${lineIndex}` — flat, so one Set holds the whole selection. */
+export type LineKey = string;
+
+export const lineKey = (hunk: number, line: number): LineKey => `${hunk}:${line}`;
+
+/** Indexes of the changed lines in one hunk. Context is never selectable. */
+export function changedLineIndexes(hunk: DiffHunk): number[] {
+  const out: number[] = [];
+  hunk.lines.forEach((line, i) => {
+    if (line.kind !== " ") out.push(i);
+  });
+  return out;
+}
+
+/** Every selectable line across every hunk. */
+export function allChangedKeys(hunks: DiffHunk[]): LineKey[] {
+  return hunks.flatMap((hunk, h) => changedLineIndexes(hunk).map((i) => lineKey(h, i)));
+}
+
+/** How much of one hunk is ticked — drives its checkbox's three states. */
+export function hunkState(
+  hunks: DiffHunk[],
+  index: number,
+  selected: Set<LineKey>,
+): { picked: number; total: number } {
+  const hunk = hunks[index];
+  if (!hunk) return { picked: 0, total: 0 };
+  const changed = changedLineIndexes(hunk);
+  return {
+    picked: changed.filter((i) => selected.has(lineKey(index, i))).length,
+    total: changed.length,
+  };
+}
+
+/** Tick a whole hunk, or untick it when it is already fully ticked. */
+export function toggleHunk(
+  hunks: DiffHunk[],
+  index: number,
+  selected: Set<LineKey>,
+): Set<LineKey> {
+  const hunk = hunks[index];
+  if (!hunk) return selected;
+  const keys = changedLineIndexes(hunk).map((i) => lineKey(index, i));
+  const next = new Set(selected);
+  const allOn = keys.every((k) => next.has(k));
+  for (const key of keys) {
+    if (allOn) next.delete(key);
+    else next.add(key);
+  }
+  return next;
+}
+
+export function toggleLine(hunk: number, line: number, selected: Set<LineKey>): Set<LineKey> {
+  const next = new Set(selected);
+  const key = lineKey(hunk, line);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  return next;
+}
+
+export interface HunkRequest {
+  /** Position in the list as shown. A hint for the server, not the key. */
+  hunk: number;
+  /** The hunk's content address — what the server actually resolves by. */
+  id: string;
+  /** Line indexes within the hunk; omitted means the whole hunk. */
+  lines?: number[];
+}
+
+/**
+ * The body for `/git/{stage,unstage,discard}-hunks`.
+ *
+ * A fully ticked hunk is sent without `lines` so the server can take it
+ * verbatim; a hunk with nothing ticked is left out entirely rather than sent
+ * empty, which the server would reject.
+ */
+export function buildHunkRequest(hunks: DiffHunk[], selected: Set<LineKey>): HunkRequest[] {
+  const out: HunkRequest[] = [];
+  hunks.forEach((hunk, h) => {
+    const changed = changedLineIndexes(hunk);
+    const picked = changed.filter((i) => selected.has(lineKey(h, i)));
+    if (picked.length === 0) return;
+    out.push(
+      picked.length === changed.length
+        ? { hunk: h, id: hunk.id }
+        : { hunk: h, id: hunk.id, lines: picked },
+    );
+  });
+  return out;
+}
+
+/**
+ * The old/new line number for each row, walked the way git numbers a diff: an
+ * addition has no old number and a deletion has no new one.
+ */
+export function lineNumbers(hunk: DiffHunk): { old: string; next: string }[] {
+  let oldNo = hunk.oldStart;
+  let newNo = hunk.newStart;
+  return hunk.lines.map((line) => ({
+    old: line.kind === "+" ? "" : String(oldNo++),
+    next: line.kind === "-" ? "" : String(newNo++),
+  }));
+}