feat: add side-by-side diff layout and whitespace toggle (#208)

packages/app/src/utils/diff-layout.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest";
+import { buildSplitDiffRows } from "./diff-layout";
+import type { ParsedDiffFile } from "@/hooks/use-checkout-diff-query";
+
+function makeFile(lines: ParsedDiffFile["hunks"][number]["lines"]): ParsedDiffFile {
+  return {
+    path: "example.ts",
+    isNew: false,
+    isDeleted: false,
+    additions: lines.filter((line) => line.type === "add").length,
+    deletions: lines.filter((line) => line.type === "remove").length,
+    status: "ok",
+    hunks: [
+      {
+        oldStart: 10,
+        oldCount: 4,
+        newStart: 10,
+        newCount: 5,
+        lines,
+      },
+    ],
+  };
+}
+
+describe("buildSplitDiffRows", () => {
+  it("pairs replacement runs by index", () => {
+    const rows = buildSplitDiffRows(
+      makeFile([
+        { type: "header", content: "@@ -10,2 +10,2 @@" },
+        { type: "remove", content: "before one" },
+        { type: "remove", content: "before two" },
+        { type: "add", content: "after one" },
+        { type: "add", content: "after two" },
+      ]),
+    );
+
+    expect(rows).toHaveLength(3);
+    expect(rows[1]).toMatchObject({
+      kind: "pair",
+      left: { type: "remove", content: "before one", lineNumber: 10 },
+      right: { type: "add", content: "after one", lineNumber: 10 },
+    });
+    expect(rows[2]).toMatchObject({
+      kind: "pair",
+      left: { type: "remove", content: "before two", lineNumber: 11 },
+      right: { type: "add", content: "after two", lineNumber: 11 },
+    });
+  });
+
+  it("keeps unmatched additions on the right side only", () => {
+    const rows = buildSplitDiffRows(
+      makeFile([
+        { type: "header", content: "@@ -10,1 +10,2 @@" },
+        { type: "remove", content: "before" },
+        { type: "add", content: "after one" },
+        { type: "add", content: "after two" },
+      ]),
+    );
+
+    expect(rows[2]).toMatchObject({
+      kind: "pair",
+      left: null,
+      right: { type: "add", content: "after two", lineNumber: 11 },
+    });
+  });
+
+  it("duplicates context rows on both sides", () => {
+    const rows = buildSplitDiffRows(
+      makeFile([
+        { type: "header", content: "@@ -10,1 +10,1 @@" },
+        { type: "context", content: "same line" },
+      ]),
+    );
+
+    expect(rows[1]).toMatchObject({
+      kind: "pair",
+      left: { type: "context", content: "same line", lineNumber: 10 },
+      right: { type: "context", content: "same line", lineNumber: 10 },
+    });
+  });
+});

packages/app/src/utils/diff-layout.ts

@@ -0,0 +1,147 @@
+import type { DiffLine, ParsedDiffFile } from "@/hooks/use-checkout-diff-query";
+
+export interface SplitDiffDisplayLine {
+  type: DiffLine["type"];
+  content: string;
+  tokens?: DiffLine["tokens"];
+  lineNumber: number | null;
+}
+
+export type SplitDiffRow =
+  | {
+      kind: "header";
+      content: string;
+    }
+  | {
+      kind: "pair";
+      left: SplitDiffDisplayLine | null;
+      right: SplitDiffDisplayLine | null;
+    };
+
+function toDisplayLine(input: {
+  line: DiffLine;
+  oldLineNumber: number | null;
+  newLineNumber: number | null;
+  side: "left" | "right";
+}): SplitDiffDisplayLine | null {
+  const { line, oldLineNumber, newLineNumber, side } = input;
+  if (line.type === "header") {
+    return null;
+  }
+
+  if (line.type === "remove") {
+    if (side !== "left") {
+      return null;
+    }
+    return {
+      type: "remove",
+      content: line.content,
+      tokens: line.tokens,
+      lineNumber: oldLineNumber,
+    };
+  }
+
+  if (line.type === "add") {
+    if (side !== "right") {
+      return null;
+    }
+    return {
+      type: "add",
+      content: line.content,
+      tokens: line.tokens,
+      lineNumber: newLineNumber,
+    };
+  }
+
+  return {
+    type: "context",
+    content: line.content,
+    tokens: line.tokens,
+    lineNumber: side === "left" ? oldLineNumber : newLineNumber,
+  };
+}
+
+export function buildSplitDiffRows(file: ParsedDiffFile): SplitDiffRow[] {
+  const rows: SplitDiffRow[] = [];
+
+  for (const hunk of file.hunks) {
+    let oldLineNo = hunk.oldStart;
+    let newLineNo = hunk.newStart;
+    rows.push({
+      kind: "header",
+      content: hunk.lines[0]?.type === "header" ? hunk.lines[0].content : "@@",
+    });
+
+    let pendingRemovals: Array<{ line: DiffLine; oldLineNumber: number }> = [];
+    let pendingAdditions: Array<{ line: DiffLine; newLineNumber: number }> = [];
+
+    const flushPendingRows = () => {
+      const pairCount = Math.max(pendingRemovals.length, pendingAdditions.length);
+      for (let index = 0; index < pairCount; index += 1) {
+        const removal = pendingRemovals[index] ?? null;
+        const addition = pendingAdditions[index] ?? null;
+        rows.push({
+          kind: "pair",
+          left: removal
+            ? toDisplayLine({
+                line: removal.line,
+                oldLineNumber: removal.oldLineNumber,
+                newLineNumber: null,
+                side: "left",
+              })
+            : null,
+          right: addition
+            ? toDisplayLine({
+                line: addition.line,
+                oldLineNumber: null,
+                newLineNumber: addition.newLineNumber,
+                side: "right",
+              })
+            : null,
+        });
+      }
+      pendingRemovals = [];
+      pendingAdditions = [];
+    };
+
+    for (const line of hunk.lines.slice(1)) {
+      if (line.type === "remove") {
+        pendingRemovals.push({ line, oldLineNumber: oldLineNo });
+        oldLineNo += 1;
+        continue;
+      }
+
+      if (line.type === "add") {
+        pendingAdditions.push({ line, newLineNumber: newLineNo });
+        newLineNo += 1;
+        continue;
+      }
+
+      flushPendingRows();
+
+      if (line.type === "context") {
+        rows.push({
+          kind: "pair",
+          left: toDisplayLine({
+            line,
+            oldLineNumber: oldLineNo,
+            newLineNumber: newLineNo,
+            side: "left",
+          }),
+          right: toDisplayLine({
+            line,
+            oldLineNumber: oldLineNo,
+            newLineNumber: newLineNo,
+            side: "right",
+          }),
+        });
+        oldLineNo += 1;
+        newLineNo += 1;
+      }
+    }
+
+    flushPendingRows();
+  }
+
+  return rows;
+}