feat(lanes,ui): per-lane git surface — Changes panel, VS Code-style diff, branch-aware Add lane, redesigned tooltips (#34, #35)
- Changes card beside lane detail with five modes: Files tree, overview, Review (whole diff, per-file collapse), single file, commit history. - LaneDiffView: unified / side-by-side with independent scroll on both axes and mirrored scrollLeft, expand/collapse context, intra-line emphasis. - Staged-only commit box; git actions (fetch/pull/push/stage/unstage/ discard/commit/switch/branch-create/branch-delete) guarded in git-ops.js. - Server: git-diff.js + git-ops.js behind GET /api/lanes/:id/git/* and POST /api/lanes/:id/git/:action; gitFacts gains upstream/ahead/behind. - Add lane: new/existing branch, current branch, worktree list, prefill from the git bar's "New lane here"; /api/run/cwds gains a repo kind. - GlobalTooltip upgrades every native title into a themed anchored bubble; chart/info popovers use theme tokens.
This commit is contained in:
@@ -0,0 +1,905 @@
|
||||
/**
|
||||
* @file The Changes panel: the lane's code beside its console, in the five
|
||||
* shapes a review actually needs —
|
||||
*
|
||||
* overview — every changed file with its +/- counts and its stage/discard
|
||||
* actions; click one to open it
|
||||
* review — every file's full diff, stacked, for reading a whole change-set
|
||||
* file — one file, as a diff or as its whole content (issue #35)
|
||||
* history — recent commits; opening one shows that commit's diff
|
||||
* browse — quick-open by path, or the repo's tracked file tree
|
||||
*
|
||||
* and three ranges: `work` (uncommitted, what the agent has touched right
|
||||
* now), `branch` (`base...HEAD`, what this lane adds on top of its base) and
|
||||
* `commit` (one commit, reached from history).
|
||||
*
|
||||
* Only the overview polls. Review, file, history and browse are a deliberate
|
||||
* read of a frozen moment — re-fetching under the reader's scroll position is
|
||||
* worse than a slightly stale view, and those are the expensive shapes.
|
||||
*
|
||||
* Rendering lives in LaneDiffView.tsx. Every write goes through
|
||||
* `POST /api/lanes/:id/git/:action`, and `discard` is asked for twice here
|
||||
* before the server is told `confirm: true` — it is the one action in this
|
||||
* panel git cannot undo.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsDownUp,
|
||||
ChevronsUpDown,
|
||||
Columns2,
|
||||
FileText,
|
||||
FoldVertical,
|
||||
Folder,
|
||||
Minus,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Rows3,
|
||||
Trash2,
|
||||
UnfoldVertical,
|
||||
} from "lucide-react";
|
||||
import { api } from "../../lib/api";
|
||||
import { LaneDiffView, LaneFileView, type DiffLayout } from "./LaneDiffView";
|
||||
import type {
|
||||
LaneChangeFile,
|
||||
LaneChangeRange,
|
||||
LaneChanges,
|
||||
LaneCommit,
|
||||
LaneTreeEntry,
|
||||
} from "../../lib/types";
|
||||
|
||||
/** How often the overview re-reads. Summary only — no patch text. */
|
||||
const OVERVIEW_REFRESH_MS = 15_000;
|
||||
/** Context steps the expand button walks through, then the whole file. */
|
||||
const CONTEXT_STEPS: readonly [number, ...number[]] = [3, 12, 40, 5000];
|
||||
|
||||
const LAST_CONTEXT = CONTEXT_STEPS[CONTEXT_STEPS.length - 1]!;
|
||||
|
||||
type Mode = "overview" | "review" | "file" | "history" | "browse";
|
||||
|
||||
/** Colour per porcelain status letter, matching LaneCard's file panel. */
|
||||
function statusClass(status: string, untracked: boolean) {
|
||||
if (untracked) return "text-status-success";
|
||||
const code = status.trim()[0];
|
||||
if (code === "A") return "text-status-success";
|
||||
if (code === "D") return "text-status-danger";
|
||||
if (code === "R") return "text-accent";
|
||||
return "text-status-warning";
|
||||
}
|
||||
|
||||
/** `+12 −3`, with the halves coloured and a zero side dropped. A binary file
|
||||
* has no line delta at all, so it says `bin` rather than leaving the row's
|
||||
* right edge blank, which reads as "changed by nothing". */
|
||||
function Delta({
|
||||
added,
|
||||
deleted,
|
||||
binary,
|
||||
}: {
|
||||
added: number | null;
|
||||
deleted: number | null;
|
||||
binary?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation(["lanes"]);
|
||||
if (binary)
|
||||
return <span className="shrink-0 font-mono text-[10px] text-fg-muted">{t("changes.bin")}</span>;
|
||||
return (
|
||||
<span className="shrink-0 font-mono text-[10px]">
|
||||
{added ? <span className="text-status-success">+{added}</span> : null}
|
||||
{added && deleted ? " " : null}
|
||||
{deleted ? <span className="text-status-danger">−{deleted}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* One folder level of the browse tree, rendered in place and recursing into
|
||||
* every expanded child — so opening a nested file no longer means navigating
|
||||
* away from its siblings.
|
||||
*/
|
||||
function TreeNodes({
|
||||
path,
|
||||
depth,
|
||||
children,
|
||||
expanded,
|
||||
onToggleDir,
|
||||
onOpenFile,
|
||||
}: {
|
||||
path: string;
|
||||
depth: number;
|
||||
children: Record<string, LaneTreeEntry[]>;
|
||||
expanded: Set<string>;
|
||||
onToggleDir: (path: string) => void;
|
||||
onOpenFile: (path: string) => void;
|
||||
}) {
|
||||
const entries = children[path];
|
||||
if (!entries) return null;
|
||||
return (
|
||||
<>
|
||||
{entries.map((e) => (
|
||||
<li key={e.path}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (e.dir ? onToggleDir(e.path) : onOpenFile(e.path))}
|
||||
style={{ paddingLeft: `${depth * 0.9 + 0.25}rem` }}
|
||||
className="flex w-full items-center gap-1 rounded px-1 py-0.5 text-left font-mono text-[11px] text-fg-primary hover:bg-surface-2"
|
||||
>
|
||||
{e.dir ? (
|
||||
expanded.has(e.path) ? (
|
||||
<ChevronDown className="h-3 w-3 shrink-0 text-fg-muted" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-fg-muted" />
|
||||
)
|
||||
) : (
|
||||
<span className="w-3 shrink-0" />
|
||||
)}
|
||||
{e.dir ? (
|
||||
<Folder className="h-3 w-3 shrink-0 text-accent" />
|
||||
) : (
|
||||
<FileText className="h-3 w-3 shrink-0 text-fg-muted" />
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate">{e.name}</span>
|
||||
</button>
|
||||
{e.dir && expanded.has(e.path) && (
|
||||
<ul>
|
||||
<TreeNodes
|
||||
path={e.path}
|
||||
depth={depth + 1}
|
||||
children={children}
|
||||
expanded={expanded}
|
||||
onToggleDir={onToggleDir}
|
||||
onOpenFile={onOpenFile}
|
||||
/>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function IconButton({
|
||||
label,
|
||||
onClick,
|
||||
disabled,
|
||||
danger,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
danger?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={label}
|
||||
title={label}
|
||||
className={`shrink-0 rounded p-0.5 disabled:opacity-40 ${
|
||||
danger ? "text-fg-muted hover:text-status-danger" : "text-fg-muted hover:text-fg-primary"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function LaneChangesPanel({ laneId }: { laneId: number }) {
|
||||
const { t } = useTranslation(["lanes"]);
|
||||
const [range, setRange] = useState<LaneChangeRange>("work");
|
||||
const [mode, setMode] = useState<Mode>("overview");
|
||||
const [openFile, setOpenFile] = useState<string | null>(null);
|
||||
const [sha, setSha] = useState<string | null>(null);
|
||||
const [context, setContext] = useState(CONTEXT_STEPS[0]);
|
||||
const [layout, setLayout] = useState<DiffLayout>("unified");
|
||||
const [whole, setWhole] = useState(false);
|
||||
const [data, setData] = useState<LaneChanges | null>(null);
|
||||
const [commits, setCommits] = useState<LaneCommit[] | null>(null);
|
||||
// A folder's children, keyed by its path ("" is the root) — fetched once,
|
||||
// on first expand, and kept so re-collapsing doesn't re-fetch.
|
||||
const [treeChildren, setTreeChildren] = useState<Record<string, LaneTreeEntry[]>>({});
|
||||
const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
|
||||
const [query, setQuery] = useState("");
|
||||
const [hits, setHits] = useState<string[] | null>(null);
|
||||
const [text, setText] = useState<{ path: string; lines: string[]; truncated: boolean } | null>(
|
||||
null
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [confirmDiscard, setConfirmDiscard] = useState<string | null>(null);
|
||||
// Files folded shut in review mode. A change-set is read file by file, and
|
||||
// a file already read is in the way of the next one — so the set is what is
|
||||
// COLLAPSED, and a file arriving later is open by default.
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
|
||||
// Where opening a file came FROM: its mode and how far the list was scrolled.
|
||||
// Reviewing a change-set is a walk down a long list, and landing back at the
|
||||
// top of it after every file is the whole cost of opening one.
|
||||
const scroller = useRef<HTMLDivElement>(null);
|
||||
const returnTo = useRef<{ mode: Mode; scroll: number } | null>(null);
|
||||
const pendingScroll = useRef<number | null>(null);
|
||||
const [message, setMessage] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await api.lanes.changes(laneId, {
|
||||
range,
|
||||
...(range === "commit" && sha ? { sha } : {}),
|
||||
...(mode === "file" && openFile ? { path: openFile, context } : {}),
|
||||
...(mode === "review" ? { full: true } : {}),
|
||||
});
|
||||
setData(result);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [laneId, range, sha, mode, openFile, context]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "history" || mode === "browse") return;
|
||||
void load();
|
||||
// Only the cheap shape polls; see the file header.
|
||||
if (mode !== "overview") return;
|
||||
const timer = window.setInterval(() => void load(), OVERVIEW_REFRESH_MS);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [load, mode]);
|
||||
|
||||
// History and the file tree are their own reads, each fetched when its mode
|
||||
// is entered rather than alongside the diff nobody is looking at.
|
||||
useEffect(() => {
|
||||
if (mode !== "history") return;
|
||||
void api.lanes
|
||||
.gitLog(laneId, { limit: 50 })
|
||||
.then((r) => setCommits(r.commits))
|
||||
.catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||||
}, [mode, laneId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode !== "browse" || query.trim() || "" in treeChildren) return;
|
||||
void api.lanes
|
||||
.gitTree(laneId, "")
|
||||
.then((r) => setTreeChildren((prev) => ({ ...prev, "": r.entries })))
|
||||
.catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||||
// `treeChildren` is the cache this fills — reading it as a dep would loop.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode, laneId, query]);
|
||||
|
||||
// A folder's children are fetched lazily, the first time it is expanded.
|
||||
const toggleDir = (path: string) => {
|
||||
setExpandedDirs((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (!next.delete(path)) next.add(path);
|
||||
return next;
|
||||
});
|
||||
if (path in treeChildren) return;
|
||||
void api.lanes
|
||||
.gitTree(laneId, path)
|
||||
.then((r) => setTreeChildren((prev) => ({ ...prev, [path]: r.entries })))
|
||||
.catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||||
};
|
||||
|
||||
const [treeBusy, setTreeBusy] = useState(false);
|
||||
|
||||
// Fetches whatever level isn't cached yet, depth-first, so "expand all"
|
||||
// works even on a tree nothing has been opened in.
|
||||
const expandAllDirs = async () => {
|
||||
setTreeBusy(true);
|
||||
const cache = { ...treeChildren };
|
||||
const toExpand = new Set(expandedDirs);
|
||||
const walk = async (path: string) => {
|
||||
let entries = cache[path];
|
||||
if (!entries) {
|
||||
entries = (await api.lanes.gitTree(laneId, path)).entries;
|
||||
cache[path] = entries;
|
||||
}
|
||||
const dirs = entries.filter((e) => e.dir);
|
||||
for (const d of dirs) toExpand.add(d.path);
|
||||
await Promise.all(dirs.map((d) => walk(d.path)));
|
||||
};
|
||||
try {
|
||||
await walk("");
|
||||
setTreeChildren(cache);
|
||||
setExpandedDirs(toExpand);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setTreeBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const q = query.trim();
|
||||
if (mode !== "browse" || !q) {
|
||||
setHits(null);
|
||||
return;
|
||||
}
|
||||
const timer = window.setTimeout(() => {
|
||||
void api.lanes
|
||||
.gitLs(laneId, q)
|
||||
.then((r) => setHits(r.paths))
|
||||
.catch(() => setHits([]));
|
||||
}, 150);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [mode, laneId, query]);
|
||||
|
||||
// The whole-file read is a different endpoint from the diff, so it is its
|
||||
// own fetch — and only while the viewer is actually showing it.
|
||||
useEffect(() => {
|
||||
if (mode !== "file" || !whole || !openFile) return;
|
||||
void api.lanes
|
||||
.gitFile(laneId, openFile, range === "commit" && sha ? sha : "work")
|
||||
.then((r) =>
|
||||
setText(r.available ? { path: r.path, lines: r.lines, truncated: r.truncated } : null)
|
||||
)
|
||||
.catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||||
}, [mode, whole, openFile, laneId, range, sha]);
|
||||
|
||||
// A lane switch must not leave the previous lane's file open — its path
|
||||
// almost certainly does not exist in the new one.
|
||||
useEffect(() => {
|
||||
setMode("overview");
|
||||
setOpenFile(null);
|
||||
setSha(null);
|
||||
setRange("work");
|
||||
setTreeChildren({});
|
||||
setExpandedDirs(new Set());
|
||||
setCommits(null);
|
||||
setCollapsed(new Set());
|
||||
returnTo.current = null;
|
||||
pendingScroll.current = null;
|
||||
}, [laneId]);
|
||||
|
||||
// Restoring has to wait for the list to be TALL enough again: leaving a file
|
||||
// re-fetches the mode it came from, so the first render back is an empty
|
||||
// box that would swallow the scroll.
|
||||
useLayoutEffect(() => {
|
||||
const el = scroller.current;
|
||||
const want = pendingScroll.current;
|
||||
if (mode === "file" || want == null || !el) return;
|
||||
if (el.scrollHeight - el.clientHeight < want) return;
|
||||
el.scrollTop = want;
|
||||
pendingScroll.current = null;
|
||||
}, [mode, data]);
|
||||
|
||||
const show = (path: string) => {
|
||||
// Opening a file FROM a file (the review list is gone by then) must not
|
||||
// overwrite the list position that is still waiting to be restored.
|
||||
if (mode !== "file") {
|
||||
returnTo.current = { mode, scroll: scroller.current?.scrollTop ?? 0 };
|
||||
}
|
||||
setOpenFile(path);
|
||||
setContext(CONTEXT_STEPS[0]);
|
||||
setWhole(false);
|
||||
setText(null);
|
||||
setMode("file");
|
||||
};
|
||||
|
||||
const act = async (action: "stage" | "unstage" | "discard", path: string, confirm?: boolean) => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await api.lanes.gitAction(laneId, action, { paths: [path], ...(confirm ? { confirm } : {}) });
|
||||
setConfirmDiscard(null);
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const commitStaged = async () => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
// `only: "staged"` — the whole point of staging file by file is that the
|
||||
// commit takes the index as it stands, with no `add -A` sweeping the
|
||||
// rest of the tree in behind it.
|
||||
await api.lanes.gitAction(laneId, "commit", { message: message.trim(), only: "staged" });
|
||||
setMessage("");
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCollapsed = (path: string) =>
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (!next.delete(path)) next.add(path);
|
||||
return next;
|
||||
});
|
||||
|
||||
const files = data?.available ? data.files : [];
|
||||
const allCollapsed = files.length > 0 && files.every((f) => collapsed.has(f.path));
|
||||
const stagedCount = range === "work" ? files.filter((f) => f.staged).length : 0;
|
||||
const current = mode === "file" ? files.find((f) => f.path === openFile) : undefined;
|
||||
|
||||
const Row = ({ f }: { f: LaneChangeFile }) => (
|
||||
<li className="group flex items-baseline gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => show(f.path)}
|
||||
className="flex min-w-0 flex-1 items-baseline gap-1.5 rounded px-1 py-0.5 text-left hover:bg-surface-2"
|
||||
>
|
||||
<span
|
||||
className={`w-3 shrink-0 font-mono text-[11px] font-semibold ${statusClass(
|
||||
f.status,
|
||||
f.untracked
|
||||
)}`}
|
||||
>
|
||||
{f.untracked ? "A" : f.status.trim()[0] || "M"}
|
||||
</span>
|
||||
<span
|
||||
className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-primary"
|
||||
title={f.path}
|
||||
>
|
||||
{f.path}
|
||||
</span>
|
||||
{f.conflicted && (
|
||||
<span className="shrink-0 text-[10px] text-status-danger">{t("changes.conflicted")}</span>
|
||||
)}
|
||||
<Delta added={f.added} deleted={f.deleted} binary={f.binary} />
|
||||
</button>
|
||||
{range === "work" && (
|
||||
<span className="flex shrink-0 items-center gap-0.5">
|
||||
{f.staged ? (
|
||||
<IconButton
|
||||
label={t("changes.unstage")}
|
||||
disabled={busy}
|
||||
onClick={() => void act("unstage", f.path)}
|
||||
>
|
||||
<Minus className="h-3 w-3" />
|
||||
</IconButton>
|
||||
) : null}
|
||||
{f.unstaged || f.untracked ? (
|
||||
<IconButton
|
||||
label={t("changes.stage")}
|
||||
disabled={busy}
|
||||
onClick={() => void act("stage", f.path)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</IconButton>
|
||||
) : null}
|
||||
<IconButton
|
||||
label={confirmDiscard === f.path ? t("changes.discardConfirm") : t("changes.discard")}
|
||||
disabled={busy}
|
||||
danger
|
||||
onClick={() => {
|
||||
// Two clicks, always: the first arms the row, the second is the
|
||||
// only one that reaches the server (which itself refuses the
|
||||
// call without `confirm: true`).
|
||||
if (confirmDiscard === f.path) void act("discard", f.path, true);
|
||||
else setConfirmDiscard(f.path);
|
||||
}}
|
||||
>
|
||||
<Trash2
|
||||
className={`h-3 w-3 ${confirmDiscard === f.path ? "text-status-danger" : ""}`}
|
||||
/>
|
||||
</IconButton>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
||||
return (
|
||||
<div data-testid="lane-changes" className="flex min-h-0 flex-1 flex-col">
|
||||
{/* Two rows on purpose: WHERE you are (mode, and the refresh that always
|
||||
applies) on top, HOW you are looking at it (range, layout, context,
|
||||
whole file) underneath. One row wrapped mid-group as soon as the
|
||||
panel was narrow, which is every panel beside a console. */}
|
||||
<div className="mb-2 space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{mode === "file" ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const back = returnTo.current;
|
||||
pendingScroll.current = back?.scroll ?? 0;
|
||||
returnTo.current = null;
|
||||
setMode(back?.mode ?? (range === "commit" ? "review" : "overview"));
|
||||
setOpenFile(null);
|
||||
setWhole(false);
|
||||
}}
|
||||
className="flex items-center gap-0.5 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2"
|
||||
>
|
||||
<ChevronLeft className="h-3 w-3" />
|
||||
{t("changes.back")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex min-w-0 items-center rounded border border-border bg-surface-2 p-0.5">
|
||||
{(["browse", "overview", "review", "history"] as const).map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
aria-pressed={mode === m}
|
||||
onClick={() => setMode(m)}
|
||||
className={`rounded px-2 py-0.5 text-[11px] font-medium transition-colors ${
|
||||
mode === m
|
||||
? "bg-accent text-white"
|
||||
: "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
|
||||
}`}
|
||||
>
|
||||
{t(`changes.mode.${m}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void load()}
|
||||
aria-label={t("changes.refresh")}
|
||||
title={t("changes.refresh")}
|
||||
className="ml-auto shrink-0 text-fg-muted hover:text-fg-primary"
|
||||
>
|
||||
<RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mode !== "history" && mode !== "browse" && (
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<div className="flex items-center rounded border border-border bg-surface-2 p-0.5">
|
||||
{(["work", "branch"] as const).map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
type="button"
|
||||
aria-pressed={range === r}
|
||||
onClick={() => {
|
||||
setRange(r);
|
||||
setSha(null);
|
||||
}}
|
||||
title={t(`changes.range.${r}Hint`)}
|
||||
className={`rounded px-2 py-0.5 text-[11px] transition-colors ${
|
||||
range === r
|
||||
? "bg-surface-4 text-fg-primary"
|
||||
: "text-fg-secondary hover:text-fg-primary"
|
||||
}`}
|
||||
>
|
||||
{t(`changes.range.${r}`)}
|
||||
</button>
|
||||
))}
|
||||
{range === "commit" && sha && (
|
||||
<span
|
||||
data-testid="lane-changes-commit-chip"
|
||||
className="rounded bg-surface-4 px-2 py-0.5 font-mono text-[11px] text-fg-primary"
|
||||
>
|
||||
{sha.slice(0, 7)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(mode === "file" || mode === "review") && (
|
||||
<div className="flex items-center gap-0.5 rounded border border-border bg-surface-2 p-0.5">
|
||||
{mode === "review" && (
|
||||
<IconButton
|
||||
label={allCollapsed ? t("changes.expandAll") : t("changes.collapseAll")}
|
||||
disabled={files.length === 0}
|
||||
onClick={() =>
|
||||
setCollapsed(allCollapsed ? new Set() : new Set(files.map((f) => f.path)))
|
||||
}
|
||||
>
|
||||
{allCollapsed ? (
|
||||
<ChevronsUpDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronsDownUp className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton
|
||||
label={t(`changes.layout.${layout === "unified" ? "split" : "unified"}`)}
|
||||
onClick={() => setLayout(layout === "unified" ? "split" : "unified")}
|
||||
>
|
||||
{layout === "unified" ? (
|
||||
<Columns2 className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<Rows3 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</IconButton>
|
||||
{mode === "file" && (
|
||||
<>
|
||||
{/* Context walks BOTH ways: an expanded diff that cannot
|
||||
be collapsed again leaves the reader re-opening the
|
||||
file to get the tight view back. */}
|
||||
<IconButton
|
||||
label={t("changes.collapseContext")}
|
||||
disabled={whole || context <= CONTEXT_STEPS[0]}
|
||||
onClick={() =>
|
||||
setContext(
|
||||
[...CONTEXT_STEPS].reverse().find((step) => step < context) ??
|
||||
CONTEXT_STEPS[0]
|
||||
)
|
||||
}
|
||||
>
|
||||
<FoldVertical className="h-3.5 w-3.5" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
label={t("changes.expandContext")}
|
||||
disabled={whole || context >= LAST_CONTEXT}
|
||||
onClick={() => setContext(CONTEXT_STEPS.find((s) => s > context) ?? context)}
|
||||
>
|
||||
<UnfoldVertical className="h-3.5 w-3.5" />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "file" && (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={whole}
|
||||
onClick={() => setWhole(!whole)}
|
||||
className={`rounded border border-border-light px-1.5 py-0.5 text-[11px] ${
|
||||
whole ? "bg-surface-4 text-fg-primary" : "text-fg-secondary hover:bg-surface-2"
|
||||
}`}
|
||||
>
|
||||
{t("changes.wholeFile")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="mb-2 whitespace-pre-wrap text-[11px] text-status-danger">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* In single-file mode the DIFF owns the scrolling, so its horizontal
|
||||
bar sits at the bottom of the visible box instead of at the bottom of
|
||||
a 2000-line container nobody has scrolled to yet. Every other mode is
|
||||
a list, and a list scrolls here. */}
|
||||
<div
|
||||
ref={scroller}
|
||||
data-testid="lane-changes-body"
|
||||
className={`flex min-h-0 flex-1 flex-col ${
|
||||
mode === "file" ? "overflow-hidden" : "overflow-y-auto"
|
||||
}`}
|
||||
>
|
||||
{mode === "history" ? (
|
||||
<ul data-testid="lane-changes-history" className="space-y-0.5">
|
||||
{(commits ?? []).map((c) => (
|
||||
<li key={c.sha}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSha(c.sha);
|
||||
setRange("commit");
|
||||
setMode("review");
|
||||
}}
|
||||
className="w-full rounded px-1 py-0.5 text-left hover:bg-surface-2"
|
||||
>
|
||||
<span className="flex items-baseline gap-1.5">
|
||||
<span className="shrink-0 font-mono text-[10px] text-fg-muted">{c.short}</span>
|
||||
<span className="min-w-0 flex-1 truncate text-[11px] text-fg-primary">
|
||||
{c.subject}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex items-baseline gap-1.5 pl-[3.2rem] text-[10px] text-fg-muted">
|
||||
<span className="truncate">{c.author}</span>
|
||||
<span>{new Date(c.date).toLocaleString()}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{commits && commits.length === 0 && (
|
||||
<li className="text-[11px] text-fg-muted">{t("changes.noCommits")}</li>
|
||||
)}
|
||||
</ul>
|
||||
) : mode === "browse" ? (
|
||||
<div data-testid="lane-changes-browse">
|
||||
<div className="mb-2 flex items-center gap-1.5">
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("changes.quickOpen")}
|
||||
aria-label={t("changes.quickOpen")}
|
||||
className="w-full rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
|
||||
/>
|
||||
{!hits && (
|
||||
<IconButton
|
||||
label={
|
||||
expandedDirs.size > 0
|
||||
? t("changes.collapseAllFolders")
|
||||
: t("changes.expandAllFolders")
|
||||
}
|
||||
disabled={treeBusy}
|
||||
onClick={() =>
|
||||
expandedDirs.size > 0 ? setExpandedDirs(new Set()) : void expandAllDirs()
|
||||
}
|
||||
>
|
||||
{expandedDirs.size > 0 ? (
|
||||
<ChevronsDownUp className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronsUpDown className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
{hits ? (
|
||||
<ul className="space-y-0.5">
|
||||
{hits.map((p) => (
|
||||
<li key={p}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
show(p);
|
||||
setWhole(true);
|
||||
}}
|
||||
className="w-full truncate rounded px-1 py-0.5 text-left font-mono text-[11px] text-fg-primary hover:bg-surface-2"
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{hits.length === 0 && (
|
||||
<li className="text-[11px] text-fg-muted">{t("changes.noMatches")}</li>
|
||||
)}
|
||||
</ul>
|
||||
) : (
|
||||
<ul className="space-y-0.5">
|
||||
<TreeNodes
|
||||
path=""
|
||||
depth={0}
|
||||
children={treeChildren}
|
||||
expanded={expandedDirs}
|
||||
onToggleDir={toggleDir}
|
||||
onOpenFile={(p) => {
|
||||
show(p);
|
||||
setWhole(true);
|
||||
}}
|
||||
/>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
) : !data ? (
|
||||
<p className="text-[11px] text-fg-muted">{t("changes.loading")}</p>
|
||||
) : !data.available ? (
|
||||
<p className="text-[11px] text-fg-muted">{t("changes.unavailable")}</p>
|
||||
) : files.length === 0 ? (
|
||||
<p className="text-[11px] text-fg-muted">{t(`changes.empty.${range}`)}</p>
|
||||
) : mode === "overview" ? (
|
||||
<>
|
||||
<ul data-testid="lane-changes-overview" className="space-y-0.5">
|
||||
{files.map((f) => (
|
||||
<Row key={f.path} f={f} />
|
||||
))}
|
||||
</ul>
|
||||
{stagedCount > 0 && (
|
||||
<div
|
||||
data-testid="lane-changes-commit"
|
||||
className="mt-2 flex items-center gap-1.5 border-t border-border-light pt-2"
|
||||
>
|
||||
<input
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && message.trim() && !busy) void commitStaged();
|
||||
}}
|
||||
placeholder={t("changes.commitPlaceholder")}
|
||||
aria-label={t("changes.commitPlaceholder")}
|
||||
className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy || !message.trim()}
|
||||
onClick={() => void commitStaged()}
|
||||
className="shrink-0 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{t("changes.commitStaged", { count: stagedCount })}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : mode === "file" ? (
|
||||
current || (whole && text) ? (
|
||||
<div className="flex min-h-0 flex-1 flex-col">
|
||||
<div className="mb-1 flex items-baseline gap-1.5">
|
||||
<FileText className="h-3 w-3 shrink-0 text-fg-muted" />
|
||||
<span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-primary">
|
||||
{openFile}
|
||||
</span>
|
||||
{current && (
|
||||
<Delta added={current.added} deleted={current.deleted} binary={current.binary} />
|
||||
)}
|
||||
</div>
|
||||
{whole ? (
|
||||
text ? (
|
||||
<LaneFileView
|
||||
path={text.path}
|
||||
lines={text.lines}
|
||||
truncated={text.truncated}
|
||||
fill
|
||||
/>
|
||||
) : (
|
||||
<p className="text-[11px] text-fg-muted">{t("changes.loading")}</p>
|
||||
)
|
||||
) : current ? (
|
||||
<LaneDiffView file={current} layout={layout} fill />
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[11px] text-fg-muted">{t("changes.fileGone")}</p>
|
||||
)
|
||||
) : (
|
||||
<div data-testid="lane-changes-review" className="space-y-3">
|
||||
{files.map((f) => {
|
||||
const shut = collapsed.has(f.path);
|
||||
return (
|
||||
<div key={f.path} className="rounded border border-border-light">
|
||||
{/* The whole header folds the file; only the PATH opens it.
|
||||
A header that opened the file on any click made folding a
|
||||
target-practice exercise against one chevron. */}
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => toggleCollapsed(f.path)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleCollapsed(f.path);
|
||||
}
|
||||
}}
|
||||
aria-expanded={!shut}
|
||||
aria-label={
|
||||
shut
|
||||
? t("changes.expandFile", { path: f.path })
|
||||
: t("changes.collapseFile", { path: f.path })
|
||||
}
|
||||
className={`flex cursor-pointer items-baseline gap-1.5 bg-surface-1 px-2 py-1 hover:bg-surface-2 ${
|
||||
shut ? "" : "border-b border-border-light"
|
||||
}`}
|
||||
>
|
||||
<ChevronRight
|
||||
className={`h-3 w-3 shrink-0 self-center text-fg-muted transition-transform ${
|
||||
shut ? "" : "rotate-90"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`shrink-0 font-mono text-[11px] font-semibold ${statusClass(f.status, f.untracked)}`}
|
||||
>
|
||||
{f.untracked ? "A" : f.status.trim()[0] || "M"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
show(f.path);
|
||||
}}
|
||||
className="min-w-0 flex-1 truncate text-left font-mono text-[11px] text-fg-primary hover:underline"
|
||||
title={t("changes.openFile", { path: f.path })}
|
||||
>
|
||||
{f.path}
|
||||
</button>
|
||||
<Delta added={f.added} deleted={f.deleted} binary={f.binary} />
|
||||
</div>
|
||||
{!shut && <LaneDiffView file={f} layout={layout} />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.available && data.truncated && mode !== "history" && mode !== "browse" && (
|
||||
<p className="mt-2 text-[10px] text-status-warning">{t("changes.truncated")}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LaneChangesPanel;
|
||||
Reference in New Issue
Block a user