Implement interactive hunk staging and discarding

Introduce a new dialog that allows users to view file changes as individual hunks and selectively stage, unstage, or discard them. This provides more granular control over modifications, similar to `git add -p`. Enhance branch panel usability by allowing double-click to checkout a branch.
2026-07-01 14:47:36 +02:00
parent 0bbd5ce1e8
commit 5752243e6e
9 changed files with 636 additions and 11 deletions
@@ -14,6 +14,7 @@
  import FileHistoryPanel from "./lib/components/FileHistoryPanel.svelte";
  import GlobalSearchDialog from "./lib/components/GlobalSearchDialog.svelte";
  import HistoryPanel from "./lib/components/HistoryPanel.svelte";
+  import LinePatchDialog from "./lib/components/LinePatchDialog.svelte";
  import NewBranchDialog from "./lib/components/NewBranchDialog.svelte";
  import RepoLoadingOverlay from "./lib/components/RepoLoadingOverlay.svelte";
  import ResolveDialog from "./lib/components/ResolveDialog.svelte";
@@ -25,6 +26,7 @@
    commit,
    compareCommits,
    cancelCodeSearch,
+    applyFilePatch,
    createBranch,
    diffFileAgainstWorkingTree,
    compareFileToParent,
@@ -41,6 +43,7 @@
    credLoad,
    credSave,
    credDelete,
+    getFilePatch,
    readConflict,
    resolveConflict,
    resolveConflictSide,
@@ -65,6 +68,7 @@
    GitRepositoryFile,
    GitSearchHit,
    GitStatus,
+    PatchApplyAction,
    PreparedResolution,
    StoredCredential,
  } from "./lib/types";
@@ -103,6 +107,12 @@
  let selectedDiffPath = "";
  let diffHighlightQuery = "";
  let pendingRestoreFile: { commit: GitCommit; file: GitCommitFile } | null = null;
+  let linePatchOpen = false;
+  let linePatchFile: GitFileStatus | null = null;
+  let linePatchStaged = false;
+  let linePatchText = "";
+  let linePatchLoading = false;
+  let linePatchError = "";
  let globalSearchOpen = false;
  let lastSearchQuery = "";
  let globalSearchResults: GitSearchHit[] = [];
@@ -675,6 +685,77 @@
    });
  }

+  async function openLinePatch(file: GitFileStatus, staged: boolean) {
+    if (!activeRepoPath) return;
+    linePatchOpen = true;
+    linePatchFile = file;
+    linePatchStaged = staged;
+    linePatchText = "";
+    linePatchError = "";
+    linePatchLoading = true;
+
+    try {
+      linePatchText = await getFilePatch(activeRepoPath, file.path, staged);
+    } catch (error) {
+      linePatchError = errorToMessage(error);
+      errorMessage = linePatchError;
+    } finally {
+      linePatchLoading = false;
+    }
+  }
+
+  async function refreshLinePatch() {
+    if (!activeRepoPath || !linePatchFile) return;
+    await openLinePatch(linePatchFile, linePatchStaged);
+  }
+
+  function closeLinePatch() {
+    if (isBusy) return;
+    linePatchOpen = false;
+    linePatchFile = null;
+    linePatchText = "";
+    linePatchError = "";
+  }
+
+  function patchOperationLabel(action: PatchApplyAction, file: GitFileStatus): string {
+    switch (action) {
+      case "stage":
+        return `Staging hunk in ${file.path}`;
+      case "unstage":
+        return `Unstaging hunk in ${file.path}`;
+      default:
+        return `Discarding hunk in ${file.path}`;
+    }
+  }
+
+  async function applyLinePatch(action: PatchApplyAction, patch: string) {
+    if (!activeRepoPath || !linePatchFile || isBusy) return;
+    const file = linePatchFile;
+    operation = patchOperationLabel(action, file);
+    errorMessage = "";
+    linePatchError = "";
+
+    try {
+      applyStatus(await applyFilePatch(activeRepoPath, file.path, patch, action));
+      await refreshExplorerFiles(activeRepoPath);
+      await refreshFileHistory(activeRepoPath);
+
+      const updatedPatch = await getFilePatch(activeRepoPath, file.path, linePatchStaged);
+      if (updatedPatch.trim()) {
+        linePatchText = updatedPatch;
+      } else {
+        linePatchOpen = false;
+        linePatchFile = null;
+        linePatchText = "";
+      }
+    } catch (error) {
+      linePatchError = errorToMessage(error);
+      errorMessage = linePatchError;
+    } finally {
+      operation = "";
+    }
+  }
+
  async function stageAllFiles() {
    const paths = changedFiles.filter((f) => f.unstaged !== null).map((f) => f.path);
    if (paths.length === 0) return;
@@ -1129,6 +1210,7 @@
            onStage={stageFile}
            onUnstage={unstageFile}
            onDiscard={discardFile}
+            onPatch={openLinePatch}
            onStageAll={stageAllFiles}
            onUnstageAll={unstageAllFiles}
          />
@@ -1189,6 +1271,20 @@
  />
 {/if}

+{#if linePatchOpen && linePatchFile}
+  <LinePatchDialog
+    file={linePatchFile}
+    staged={linePatchStaged}
+    patch={linePatchText}
+    {isBusy}
+    isLoading={linePatchLoading}
+    error={linePatchError}
+    onClose={closeLinePatch}
+    onRefresh={refreshLinePatch}
+    onApply={applyLinePatch}
+  />
+{/if}
+
 {#if globalSearchOpen}
  <GlobalSearchDialog
    {hasRepository}
@@ -1094,6 +1094,11 @@
    width: min(1180px, calc(100vw - 32px));
    height: min(840px, calc(100vh - 32px));
  }
+  .line-patch-dialog {
+    grid-template-rows: auto minmax(0, 1fr);
+    width: min(1320px, calc(100vw - 32px));
+    height: min(860px, calc(100vh - 32px));
+  }
  .compare-select-dialog {
    display: block;
    width: min(720px, calc(100vw - 32px));
@@ -1311,6 +1316,112 @@

  .prepared-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: #4eca76; font-size: 12px; font-weight: 700; }

+  .line-patch-body {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .line-patch-scroll {
+    min-height: 0;
+    overflow: auto;
+    background: #0b0b14;
+  }
+
+  .line-patch-hunk {
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+
+  .line-patch-hunk-head {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    width: max-content;
+    min-width: 100%;
+    padding: 7px 10px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: rgba(20, 22, 36, 0.96);
+  }
+  .line-patch-hunk-head code {
+    color: var(--color-accent);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    white-space: pre;
+  }
+  .line-patch-hunk-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    padding-left: 16px;
+  }
+  .line-patch-hunk-button {
+    min-height: 22px;
+    padding: 0 8px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--color-ink);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .line-patch-hunk-button:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.08);
+  }
+  .line-patch-hunk-button.discard {
+    border-color: rgba(255, 90, 103, 0.7);
+    color: #ffccd1;
+  }
+  .line-patch-hunk-button.stage,
+  .line-patch-hunk-button.unstage {
+    border-color: rgba(78, 202, 118, 0.72);
+    color: #bff1ce;
+  }
+
+  .line-patch-lines {
+    min-width: max-content;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+
+  .line-patch-row {
+    display: grid;
+    grid-template-columns: 22px minmax(max-content, 1fr);
+    align-items: start;
+    min-height: 22px;
+    padding: 1px 10px 1px 28px;
+    color: var(--color-ink-muted);
+  }
+  .line-patch-row.add {
+    background: rgba(78, 202, 118, 0.09);
+    color: #bff1ce;
+  }
+  .line-patch-row.delete {
+    background: rgba(255, 90, 103, 0.1);
+    color: #ffccd1;
+  }
+  .line-patch-row.meta {
+    color: var(--color-ink-faint);
+  }
+  .line-patch-prefix {
+    color: var(--color-ink-faint);
+    text-align: center;
+    user-select: none;
+  }
+  .line-patch-row.add .line-patch-prefix { color: #4eca76; }
+  .line-patch-row.delete .line-patch-prefix { color: #ff6b7a; }
+  .line-patch-row code {
+    white-space: pre;
+    font-family: var(--font-mono);
+  }
+
  .global-search-body {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
@@ -50,6 +50,13 @@
    createOpen = false;
    localOpen = true;
  }
+
+  function checkoutOnDoubleClick(event: MouseEvent, branch: GitBranchInfo) {
+    if (branch.current || isBusy) return;
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (target?.closest("button")) return;
+    onCheckout(branch);
+  }
 </script>

 <section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Branches">
@@ -121,7 +128,12 @@
            <div class="branch-empty">No local branches.</div>
          {:else}
            {#each localBranches as branch (branch.name)}
-              <article class="branch-row" class:current={branch.current}>
+              <article
+                class="branch-row"
+                class:current={branch.current}
+                ondblclick={(event) => checkoutOnDoubleClick(event, branch)}
+                title={branch.current ? "Current branch" : "Double-click to checkout"}
+              >
                <div class="branch-info">
                  <GitBranch size={16} aria-hidden="true" />
                  <div>
@@ -169,7 +181,12 @@
            <div class="branch-empty">No remote branches.</div>
          {:else}
            {#each remoteBranches as branch (branch.name)}
-              <article class="branch-row" class:current={branch.current}>
+              <article
+                class="branch-row"
+                class:current={branch.current}
+                ondblclick={(event) => checkoutOnDoubleClick(event, branch)}
+                title={branch.current ? "Current branch" : "Double-click to checkout"}
+              >
                <div class="branch-info">
                  <GitBranch size={16} aria-hidden="true" />
                  <div>
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { LoaderCircle, X } from "@lucide/svelte";
+  import type { GitFileStatus, PatchApplyAction } from "../types";
+
+  type PatchLineKind = "context" | "add" | "delete" | "meta";
+
+  interface PatchLine {
+    id: string;
+    text: string;
+    kind: PatchLineKind;
+  }
+
+  interface PatchHunk {
+    id: string;
+    header: string;
+    lines: PatchLine[];
+  }
+
+  interface ParsedPatch {
+    headerLines: string[];
+    hunks: PatchHunk[];
+    binary: boolean;
+  }
+
+  interface Props {
+    file: GitFileStatus;
+    staged: boolean;
+    patch: string;
+    isBusy: boolean;
+    isLoading: boolean;
+    error: string;
+    onClose: () => void;
+    onRefresh: () => void | Promise<void>;
+    onApply: (action: PatchApplyAction, patch: string) => void | Promise<void>;
+  }
+
+  let {
+    file,
+    staged = false,
+    patch = "",
+    isBusy = false,
+    isLoading = false,
+    error = "",
+    onClose = () => {},
+    onRefresh = () => {},
+    onApply = () => {},
+  }: Props = $props();
+
+  let parsed = $state<ParsedPatch>({ headerLines: [], hunks: [], binary: false });
+
+  let scopeLabel = $derived(staged ? "Staged changes" : "Unstaged changes");
+  let displayPath = $derived(file.old_path ? `${file.old_path} -> ${file.path}` : file.path);
+
+  $effect(() => {
+    parsed = parsePatch(patch);
+  });
+
+  function parsePatch(input: string): ParsedPatch {
+    const normalized = input.replace(/\r\n/g, "\n");
+    const lines = normalized.split("\n");
+    if (lines[lines.length - 1] === "") lines.pop();
+
+    const headerLines: string[] = [];
+    const hunks: PatchHunk[] = [];
+    let current: PatchHunk | null = null;
+
+    for (const line of lines) {
+      if (line.startsWith("@@ ")) {
+        current = { id: `hunk-${hunks.length}`, header: line, lines: [] };
+        hunks.push(current);
+        continue;
+      }
+
+      if (!current) {
+        headerLines.push(line);
+        continue;
+      }
+
+      const kind = patchLineKind(line);
+      current.lines.push({
+        id: `${current.id}-line-${current.lines.length}`,
+        text: line,
+        kind,
+      });
+    }
+
+    return {
+      headerLines,
+      hunks,
+      binary: /(^|\n)(Binary files|GIT binary patch|literal \d+)/.test(normalized),
+    };
+  }
+
+  function patchLineKind(line: string): PatchLineKind {
+    if (line.startsWith("+") && !line.startsWith("+++")) return "add";
+    if (line.startsWith("-") && !line.startsWith("---")) return "delete";
+    if (line.startsWith(" ")) return "context";
+    return "meta";
+  }
+
+  function linePrefix(line: PatchLine): string {
+    if (line.kind === "add") return "+";
+    if (line.kind === "delete") return "-";
+    if (line.kind === "meta") return "\\";
+    return " ";
+  }
+
+  function lineBody(line: PatchLine): string {
+    if (line.kind === "meta") return line.text;
+    return line.text.slice(1);
+  }
+
+  function buildHunkPatch(hunk: PatchHunk): string {
+    return `${[...parsed.headerLines, hunk.header, ...hunk.lines.map((line) => line.text)].join("\n")}\n`;
+  }
+
+  async function applyHunkAction(action: PatchApplyAction, hunk: PatchHunk) {
+    if (isBusy || isLoading) return;
+    await onApply(action, buildHunkPatch(hunk));
+  }
+</script>
+
+<div class="dialog-backdrop" role="presentation">
+  <div class="dialog line-patch-dialog" role="dialog" aria-modal="true" aria-label="Line patch">
+    <header class="dialog-header">
+      <div>
+        <span class="eyebrow">{scopeLabel}</span>
+        <p class="dialog-title" title={displayPath}>{displayPath}</p>
+      </div>
+      <div class="dialog-header-actions">
+        <button class="btn-sm" type="button" onclick={onRefresh} disabled={isBusy || isLoading}>Refresh</button>
+        <button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
+          <X size={16} aria-hidden="true" />
+        </button>
+      </div>
+    </header>
+
+    <div class="line-patch-body">
+      {#if isLoading}
+        <div class="blank-state">
+          <LoaderCircle class="spin" size={18} aria-hidden="true" />
+          Loading patch...
+        </div>
+      {:else if error}
+        <div class="blank-state">{error}</div>
+      {:else if !patch.trim()}
+        <div class="blank-state">No line patch available for this file.</div>
+      {:else if parsed.binary || parsed.hunks.length === 0}
+        <div class="blank-state">This change cannot be split into text lines.</div>
+      {:else}
+        <div class="line-patch-scroll">
+          {#each parsed.hunks as hunk (hunk.id)}
+            <section class="line-patch-hunk">
+              <div class="line-patch-hunk-head">
+                <code>{hunk.header}</code>
+                <div class="line-patch-hunk-actions">
+                  {#if staged}
+                    <button class="line-patch-hunk-button discard" type="button" onclick={() => applyHunkAction("discard-staged", hunk)} disabled={isBusy}>
+                      Discard Hunk
+                    </button>
+                    <button class="line-patch-hunk-button unstage" type="button" onclick={() => applyHunkAction("unstage", hunk)} disabled={isBusy}>
+                      Unstage Hunk
+                    </button>
+                  {:else}
+                    <button class="line-patch-hunk-button discard" type="button" onclick={() => applyHunkAction("discard-unstaged", hunk)} disabled={isBusy}>
+                      Discard Hunk
+                    </button>
+                    <button class="line-patch-hunk-button stage" type="button" onclick={() => applyHunkAction("stage", hunk)} disabled={isBusy}>
+                      Stage Hunk
+                    </button>
+                  {/if}
+                </div>
+              </div>
+
+              <div class="line-patch-lines">
+                {#each hunk.lines as line (line.id)}
+                  <div class={`line-patch-row ${line.kind}`}>
+                    <span class="line-patch-prefix">{linePrefix(line)}</span>
+                    <code>{lineBody(line)}</code>
+                  </div>
+                {/each}
+              </div>
+            </section>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, RotateCcw, Undo2 } from "@lucide/svelte";
+  import { Check, FileDiff, RotateCcw, Undo2 } from "@lucide/svelte";
  import type { FileStatusKind, GitFileStatus, GitStatus } from "../types";

  interface Props {
@@ -12,6 +12,7 @@
    onStage: (file: GitFileStatus) => void;
    onUnstage: (file: GitFileStatus) => void;
    onDiscard: (file: GitFileStatus, staged: boolean) => void;
+    onPatch: (file: GitFileStatus, staged: boolean) => void;
    onStageAll: () => void;
    onUnstageAll: () => void;
  }
@@ -26,6 +27,7 @@
    onStage = () => {},
    onUnstage = () => {},
    onDiscard = () => {},
+    onPatch = () => {},
    onStageAll = () => {},
    onUnstageAll = () => {},
  }: Props = $props();
@@ -46,6 +48,10 @@
    return file.old_path ? `${baseName(file.old_path)} -> ${baseName(file.path)}` : baseName(file.path);
  }

+  function canPatch(kind: FileStatusKind | null): boolean {
+    return kind === "modified";
+  }
+
  let hasUnstaged = $derived(changedFiles.some((f) => f.unstaged !== null));
  let hasStaged = $derived(changedFiles.some((f) => f.staged !== null));
 </script>
@@ -113,6 +119,10 @@
                    <Undo2 size={14} aria-hidden="true" />
                    Unstage
                  </button>
+                  <button class="btn-sm" type="button" onclick={() => onPatch(file, true)} disabled={isBusy || !canPatch(file.staged)} title="Stage, unstage, or discard selected lines">
+                    <FileDiff size={14} aria-hidden="true" />
+                    Lines
+                  </button>
                  <button class="btn-sm" type="button" onclick={() => onDiscard(file, true)} disabled={isBusy} title="Discard staged changes">
                    <RotateCcw size={14} aria-hidden="true" />
                    Discard
@@ -134,6 +144,10 @@
                    <Check size={14} aria-hidden="true" />
                    Stage
                  </button>
+                  <button class="btn-sm" type="button" onclick={() => onPatch(file, false)} disabled={isBusy || !canPatch(file.unstaged)} title="Stage or discard selected lines">
+                    <FileDiff size={14} aria-hidden="true" />
+                    Lines
+                  </button>
                  <button class="btn-sm" type="button" onclick={() => onDiscard(file, false)} disabled={isBusy} title="Discard unstaged changes">
                    <RotateCcw size={14} aria-hidden="true" />
                    Discard
@@ -8,6 +8,7 @@ import type {
  GitRepositoryFile,
  GitSearchHit,
  GitStatus,
+  PatchApplyAction,
  RepositoryBundle,
  StoredCredential,
 } from "./types";
@@ -56,6 +57,19 @@ export function restoreFiles(
  return invoke<GitStatus>("restore_files", { path, files, staged });
 }

+export function getFilePatch(path: string, file: string, staged: boolean): Promise<string> {
+  return invoke<string>("get_file_patch", { path, file, staged });
+}
+
+export function applyFilePatch(
+  path: string,
+  file: string,
+  patch: string,
+  action: PatchApplyAction,
+): Promise<GitStatus> {
+  return invoke<GitStatus>("apply_file_patch", { path, file, patch, action });
+}
+
 export function commit(path: string, message: string): Promise<GitStatus> {
  return invoke<GitStatus>("commit", { path, message });
 }
@@ -24,6 +24,8 @@ export interface GitFileStatus {
  unstaged: FileStatusKind | null;
 }

+export type PatchApplyAction = "stage" | "unstage" | "discard-unstaged" | "discard-staged";
+
 export interface GitBranch {
  name: string;
  current: boolean;