fix(lanes,git): harden the lane git surface and fix client races in the Changes panel
Server (git-diff.js, git-ops.js, worktree.js, routes/lanes.js): - Every lane git call runs with GIT_LITERAL_PATHSPECS=1 and -z porcelain, so a file name is a file name, never a glob, and odd names parse correctly. - A lane that is a subdirectory of its repo sees and acts on ONLY its own paths (reads, stage/unstage/discard/commit, and gitFacts.files). - Any file named settings.local.json (the lane's router API key) is refused as 403 ESECRET on disk (symlinks resolved) and at every committed rev. - commit refuses with 400 ESTAGEDOUTSIDE while anything outside the lane is staged (checked with --no-renames, so a move into the lane is caught). - push resolves its remote (upstream → only remote → origin), else 400 ENOREMOTE; unstaging a rename unstages both halves. - Git writes serialize on the repo's git dir, not the lane id, so two lanes on one index cannot collide on index.lock. - git refusing an action (a numeric exit status) answers 409 EGIT with git's stderr instead of a 500 carrying a numeric code; one shared parseNumstat. Client: - Changes panel: no stale answer from a previous lane or an older quick-open query repaints the panel; discard disarms on lane switch; Enter on a file path opens it instead of folding; bounded tree expand-all. - Large diffs (> 500 rows) render only the visible rows, with stable width and in-sync split columns; mirrored split scroll is clamped. - Git bar: no "in sync" without counts, a clear no-remote message, branch list re-read after a switch, and no previous-lane facts after a lane switch. - Tooltips no longer flicker or close on unrelated scrolls.
This commit is contained in:
@@ -13,10 +13,15 @@
|
||||
* - Line pairing for split view happens here, on the rows the server already
|
||||
* numbered. The server stays the single source of what changed; this file
|
||||
* only decides how it looks.
|
||||
* Past `WINDOW_THRESHOLD` rows a view renders only the rows on screen (plus an
|
||||
* overscan) between two spacers. Rows never wrap — the box scrolls sideways —
|
||||
* so every windowed row is pinned to `ROW_PX` and the range is pure arithmetic
|
||||
* (`visibleRange`); the content's min-width comes from the longest line, so
|
||||
* the horizontal extent does not jump as rows come and go.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { useCallback, useRef } from "react";
|
||||
import { useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { canonicalLang, highlight, tokenClass } from "../../lib/highlight";
|
||||
import type { LaneChangeFile, LaneDiffHunk, LaneDiffLine } from "../../lib/types";
|
||||
@@ -32,6 +37,100 @@ function boxHeight(fill: boolean) {
|
||||
return fill ? "min-h-0 flex-1" : "max-h-[60vh]";
|
||||
}
|
||||
|
||||
/** Rows above which a view windows; at or below it renders exactly as before. */
|
||||
export const WINDOW_THRESHOLD = 500;
|
||||
/** A windowed row's pinned height — the rows' own 11px × 1.45 line box, rounded. */
|
||||
export const ROW_PX = 16;
|
||||
const OVERSCAN = 20;
|
||||
const FIXED: CSSProperties = { height: ROW_PX };
|
||||
|
||||
/**
|
||||
* The `[start, end)` item range to render for a scroll position. `scrollTop`
|
||||
* is clamped to the content first, so a stale offset (content that shrank, a
|
||||
* layout switch) still lands on real rows instead of an empty window.
|
||||
*/
|
||||
export function visibleRange(
|
||||
scrollTop: number,
|
||||
viewport: number,
|
||||
rowHeight: number,
|
||||
count: number,
|
||||
overscan: number
|
||||
) {
|
||||
const top = Math.min(Math.max(0, scrollTop), Math.max(0, count * rowHeight - viewport));
|
||||
const start = Math.max(0, Math.floor(top / rowHeight) - overscan);
|
||||
const end = Math.min(count, Math.ceil((top + viewport) / rowHeight) + overscan);
|
||||
return { start: Math.min(start, end), end };
|
||||
}
|
||||
|
||||
/**
|
||||
* Windowing state for one scroller of `count` items. Off (the whole range)
|
||||
* at or below the threshold.
|
||||
*/
|
||||
function useWindow(count: number) {
|
||||
const [top, setTop] = useState(0);
|
||||
const on = count > WINDOW_THRESHOLD;
|
||||
// The offset is tracked even while windowing is off, so a diff that GROWS
|
||||
// past the threshold (expanded context) windows where the reader is, not at
|
||||
// row 0. A ref, so an unwindowed diff does not re-render on every scroll.
|
||||
const lastTop = useRef(0);
|
||||
// count 0 = no scroller here (split layout): the browser drops its offset,
|
||||
// so coming back to unified must start from 0, not the pre-split row.
|
||||
if (count === 0) lastTop.current = 0;
|
||||
const [wasOn, setWasOn] = useState(on);
|
||||
if (wasOn !== on) {
|
||||
setWasOn(on);
|
||||
setTop(on ? lastTop.current : 0);
|
||||
}
|
||||
// ponytail: the viewport is taken as the window height — never smaller than
|
||||
// a box that lives inside the window, so it only over-renders a few dozen
|
||||
// rows, and it needs no ResizeObserver to follow a panel resize.
|
||||
const range = on
|
||||
? visibleRange(top, window.innerHeight, ROW_PX, count, OVERSCAN)
|
||||
: { start: 0, end: count };
|
||||
const onScroll = (el: HTMLElement) => {
|
||||
lastTop.current = el.scrollTop;
|
||||
if (on) setTop(el.scrollTop);
|
||||
};
|
||||
return { on, range, onScroll };
|
||||
}
|
||||
|
||||
/** Columns a line occupies under `whitespace-pre` (a tab counted at its widest). */
|
||||
function longest(texts: Iterable<string>) {
|
||||
let max = 0;
|
||||
for (const t of texts) {
|
||||
let n = t.length;
|
||||
for (let i = t.indexOf("\t"); i !== -1; i = t.indexOf("\t", i + 1)) n += 7;
|
||||
if (n > max) max = n;
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/** Stands in for `rows` off-screen rows. */
|
||||
function Spacer({ rows }: { rows: number }) {
|
||||
return rows > 0 ? <div data-diff-spacer aria-hidden style={{ height: rows * ROW_PX }} /> : null;
|
||||
}
|
||||
|
||||
/** A windowed list: spacer, the rendered slice, spacer, at a stable width. */
|
||||
function Windowed({
|
||||
count,
|
||||
range,
|
||||
minWidth,
|
||||
children,
|
||||
}: {
|
||||
count: number;
|
||||
range: { start: number; end: number };
|
||||
minWidth: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div data-diff-content style={{ minWidth }}>
|
||||
<Spacer rows={range.start} />
|
||||
{children}
|
||||
<Spacer rows={count - range.end} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Language tag for a path, for the tokenizer. Unknown ones render plain. */
|
||||
function langFor(filePath: string) {
|
||||
const ext = filePath.split(".").pop() || "";
|
||||
@@ -86,26 +185,51 @@ function emphasis(
|
||||
};
|
||||
}
|
||||
|
||||
/** Pair each run of removed lines with the run of added lines following it. */
|
||||
function pairs(
|
||||
lines: LaneDiffLine[]
|
||||
): Array<{ left: LaneDiffLine | null; right: LaneDiffLine | null }> {
|
||||
const out: Array<{ left: LaneDiffLine | null; right: LaneDiffLine | null }> = [];
|
||||
type PairRow = { left: LaneDiffLine | null; right: LaneDiffLine | null; emph: EmphPair | null };
|
||||
type EmphPair = { del: [number, number]; add: [number, number] };
|
||||
/** A hunk's split-view rows plus each paired line's emphasis, keyed by its
|
||||
* index in `hunk.lines` (what the unified view renders by). */
|
||||
type Analysed = { rows: PairRow[]; emph: Map<number, [number, number]> };
|
||||
|
||||
// Keyed by the hunk object: a hunk is immutable once fetched, so both split
|
||||
// columns and every re-render of the same data share one pass. A refetch
|
||||
// brings new objects and the old entries go with them.
|
||||
const analysed = new WeakMap<LaneDiffHunk, Analysed>();
|
||||
|
||||
/** Pair each run of removed lines with the run of added lines following it,
|
||||
* carrying indices so emphasis lands without searching the hunk again. */
|
||||
export function analyseHunk(hunk: LaneDiffHunk): Analysed {
|
||||
const hit = analysed.get(hunk);
|
||||
if (hit) return hit;
|
||||
const lines = hunk.lines;
|
||||
const rows: PairRow[] = [];
|
||||
const emph = new Map<number, [number, number]>();
|
||||
for (let i = 0; i < lines.length; ) {
|
||||
const line = lines[i]!;
|
||||
if (line.type === "ctx") {
|
||||
out.push({ left: line, right: line });
|
||||
rows.push({ left: line, right: line, emph: null });
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
const dels: LaneDiffLine[] = [];
|
||||
const adds: LaneDiffLine[] = [];
|
||||
while (i < lines.length && lines[i]!.type === "del") dels.push(lines[i++]!);
|
||||
while (i < lines.length && lines[i]!.type === "add") adds.push(lines[i++]!);
|
||||
for (let k = 0; k < Math.max(dels.length, adds.length); k += 1) {
|
||||
out.push({ left: dels[k] ?? null, right: adds[k] ?? null });
|
||||
const delStart = i;
|
||||
while (i < lines.length && lines[i]!.type === "del") i += 1;
|
||||
const addStart = i;
|
||||
while (i < lines.length && lines[i]!.type === "add") i += 1;
|
||||
const dels = addStart - delStart;
|
||||
const adds = i - addStart;
|
||||
for (let k = 0; k < Math.max(dels, adds); k += 1) {
|
||||
const left = k < dels ? lines[delStart + k]! : null;
|
||||
const right = k < adds ? lines[addStart + k]! : null;
|
||||
const e = left && right ? emphasis(left.text, right.text) : null;
|
||||
if (e) {
|
||||
emph.set(delStart + k, e.del);
|
||||
emph.set(addStart + k, e.add);
|
||||
}
|
||||
rows.push({ left, right, emph: e });
|
||||
}
|
||||
}
|
||||
const out = { rows, emph };
|
||||
analysed.set(hunk, out);
|
||||
return out;
|
||||
}
|
||||
|
||||
@@ -115,9 +239,26 @@ function Gutter({ n }: { n: number | null }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** A diff row. `w-max min-w-full` so the tint still spans a scrolled-open row. */
|
||||
function Row({ tint, children }: { tint: string; children: React.ReactNode }) {
|
||||
return <div className={`flex w-max min-w-full ${tint}`}>{children}</div>;
|
||||
/** A diff row. `w-max min-w-full` so the tint still spans a scrolled-open row.
|
||||
* `style` pins a windowed row's height; unwindowed rows carry none. */
|
||||
function Row({
|
||||
tint,
|
||||
style,
|
||||
children,
|
||||
}: {
|
||||
tint: string;
|
||||
style?: CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`flex w-max min-w-full ${tint}`}
|
||||
style={style}
|
||||
data-diff-item={style ? "" : undefined}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A /20 fill plus a 3px status bar at the row's left edge, so +/- rows still
|
||||
@@ -135,44 +276,110 @@ function markerClass(type: LaneDiffLine["type"]) {
|
||||
return "text-fg-muted";
|
||||
}
|
||||
|
||||
function HunkHeader({ hunk }: { hunk: LaneDiffHunk }) {
|
||||
function HunkHeader({ hunk, fixed }: { hunk: LaneDiffHunk; fixed?: boolean }) {
|
||||
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 py-0.5 text-[10px] text-fg-muted">
|
||||
<div
|
||||
className={`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}` : ""}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UnifiedLine({
|
||||
line,
|
||||
lang,
|
||||
emph,
|
||||
style,
|
||||
}: {
|
||||
line: LaneDiffLine;
|
||||
lang: string;
|
||||
emph?: [number, number];
|
||||
style?: CSSProperties;
|
||||
}) {
|
||||
return (
|
||||
<Row tint={rowTint(line.type)} style={style}>
|
||||
<Gutter n={line.oldLine} />
|
||||
<Gutter n={line.newLine} />
|
||||
<span className="whitespace-pre px-2">
|
||||
<span className={`select-none ${markerClass(line.type)}`}>
|
||||
{line.type === "add" ? "+" : line.type === "del" ? "-" : " "}
|
||||
</span>
|
||||
<Code text={line.text} lang={lang} emph={emph} />
|
||||
</span>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
function UnifiedHunk({ hunk, lang }: { hunk: LaneDiffHunk; lang: string }) {
|
||||
const emph = new Map<number, [number, number]>();
|
||||
for (const { left, right } of pairs(hunk.lines)) {
|
||||
if (!left || !right || left.type !== "del" || right.type !== "add") continue;
|
||||
const e = emphasis(left.text, right.text);
|
||||
if (!e) continue;
|
||||
emph.set(hunk.lines.indexOf(left), e.del);
|
||||
emph.set(hunk.lines.indexOf(right), e.add);
|
||||
}
|
||||
const { emph } = analyseHunk(hunk);
|
||||
return (
|
||||
<div>
|
||||
<HunkHeader hunk={hunk} />
|
||||
{hunk.lines.map((line, i) => (
|
||||
<Row key={i} tint={rowTint(line.type)}>
|
||||
<Gutter n={line.oldLine} />
|
||||
<Gutter n={line.newLine} />
|
||||
<span className="whitespace-pre px-2">
|
||||
<span className={`select-none ${markerClass(line.type)}`}>
|
||||
{line.type === "add" ? "+" : line.type === "del" ? "-" : " "}
|
||||
</span>
|
||||
<Code text={line.text} lang={lang} emph={emph.get(i)} />
|
||||
</span>
|
||||
</Row>
|
||||
<UnifiedLine key={i} line={line} lang={lang} emph={emph.get(i)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** One windowable item: a hunk's header (`i < 0`) or its i-th row — a line in
|
||||
* unified, a paired row in split. */
|
||||
type Item = { hunk: LaneDiffHunk; i: number };
|
||||
|
||||
function flatten(hunks: LaneDiffHunk[], layout: DiffLayout): Item[] {
|
||||
const out: Item[] = [];
|
||||
for (const hunk of hunks) {
|
||||
out.push({ hunk, i: -1 });
|
||||
const n = layout === "split" ? analyseHunk(hunk).rows.length : hunk.lines.length;
|
||||
for (let i = 0; i < n; i += 1) out.push({ hunk, i });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function longestInHunks(hunks: LaneDiffHunk[]) {
|
||||
return longest(
|
||||
(function* () {
|
||||
for (const h of hunks) for (const l of h.lines) yield l.text;
|
||||
})()
|
||||
);
|
||||
}
|
||||
|
||||
function SplitLine({
|
||||
row,
|
||||
lang,
|
||||
side,
|
||||
style,
|
||||
}: {
|
||||
row: PairRow;
|
||||
lang: string;
|
||||
side: "left" | "right";
|
||||
style?: CSSProperties;
|
||||
}) {
|
||||
const line = side === "left" ? row.left : row.right;
|
||||
return (
|
||||
<Row tint={rowTint(line?.type ?? null)} style={style}>
|
||||
<Gutter n={(side === "left" ? line?.oldLine : line?.newLine) ?? null} />
|
||||
<span className="whitespace-pre px-1">
|
||||
{line ? (
|
||||
<Code
|
||||
text={line.text}
|
||||
lang={lang}
|
||||
emph={side === "left" ? row.emph?.del : row.emph?.add}
|
||||
/>
|
||||
) : null}
|
||||
</span>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
/** One side of the split view: a hunk header, then that side's rows. */
|
||||
function SplitColumn({
|
||||
hunks,
|
||||
@@ -188,42 +395,103 @@ function SplitColumn({
|
||||
{hunks.map((hunk, h) => (
|
||||
<div key={`${hunk.header}:${h}`}>
|
||||
<HunkHeader hunk={hunk} />
|
||||
{pairs(hunk.lines).map(({ left, right }, i) => {
|
||||
const e =
|
||||
left && right && left.type === "del" && right.type === "add"
|
||||
? emphasis(left.text, right.text)
|
||||
: null;
|
||||
const line = side === "left" ? left : right;
|
||||
return (
|
||||
<Row key={i} tint={rowTint(line?.type ?? null)}>
|
||||
<Gutter n={(side === "left" ? line?.oldLine : line?.newLine) ?? null} />
|
||||
<span className="whitespace-pre px-1">
|
||||
{line ? (
|
||||
<Code text={line.text} lang={lang} emph={side === "left" ? e?.del : e?.add} />
|
||||
) : null}
|
||||
</span>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
{analyseHunk(hunk).rows.map((row, i) => (
|
||||
<SplitLine key={i} row={row} lang={lang} side={side} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** Both sides, each scrolling horizontally on its own but kept in step. */
|
||||
/** A windowed split column: the shared range of items, one side of each. */
|
||||
function SplitSlice({
|
||||
items,
|
||||
range,
|
||||
lang,
|
||||
side,
|
||||
}: {
|
||||
items: Item[];
|
||||
range: { start: number; end: number };
|
||||
lang: string;
|
||||
side: "left" | "right";
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{items
|
||||
.slice(range.start, range.end)
|
||||
.map(({ hunk, i }, k) =>
|
||||
i < 0 ? (
|
||||
<HunkHeader key={range.start + k} hunk={hunk} fixed />
|
||||
) : (
|
||||
<SplitLine
|
||||
key={range.start + k}
|
||||
row={analyseHunk(hunk).rows[i]!}
|
||||
lang={lang}
|
||||
side={side}
|
||||
style={FIXED}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** `v` held inside a scroller's own extent. */
|
||||
export function clampScroll(v: number, scrollSize: number, clientSize: number) {
|
||||
return Math.min(v, Math.max(0, scrollSize - clientSize));
|
||||
}
|
||||
|
||||
type Axis =
|
||||
| ["scrollLeft", "scrollWidth", "clientWidth"]
|
||||
| ["scrollTop", "scrollHeight", "clientHeight"];
|
||||
const AXES: Axis[] = [
|
||||
["scrollLeft", "scrollWidth", "clientWidth"],
|
||||
["scrollTop", "scrollHeight", "clientHeight"],
|
||||
];
|
||||
|
||||
/** Mirror `src`'s offset onto `dst`, clamped to what `dst` can show. */
|
||||
function follow(src: HTMLElement, dst: HTMLElement) {
|
||||
for (const [pos, size, client] of AXES) {
|
||||
// `src` pinned at its own end while `dst` sits past it: `src` is the
|
||||
// narrower column echoing a clamp we just caused. Pulling `dst` back to
|
||||
// it would snap the wide column home every time it scrolls past the
|
||||
// narrow one's longest line.
|
||||
if (src[pos] >= clampScroll(Infinity, src[size], src[client]) && dst[pos] > src[pos]) continue;
|
||||
const target = clampScroll(src[pos], dst[size], dst[client]);
|
||||
if (dst[pos] !== target) dst[pos] = target;
|
||||
}
|
||||
}
|
||||
|
||||
/** Both sides, each its own scroller but kept in step on both axes. */
|
||||
function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string; fill: boolean }) {
|
||||
const left = useRef<HTMLDivElement>(null);
|
||||
const right = useRef<HTMLDivElement>(null);
|
||||
const items = useMemo(() => flatten(hunks, "split"), [hunks]);
|
||||
const minWidth = useMemo(() => `calc(${longestInHunks(hunks)}ch + 3rem)`, [hunks]);
|
||||
const win = useWindow(items.length);
|
||||
|
||||
// Mirroring fires the other pane's own scroll handler, which mirrors back —
|
||||
// the equality check is what ends that, so no re-entry flag is needed.
|
||||
const sync = useCallback((from: "left" | "right") => {
|
||||
// the equality check (and `follow`'s edge rule) is what ends that, so no
|
||||
// re-entry flag is needed. Both axes: the columns hold paired rows, so a
|
||||
// vertical drift puts a deletion beside some unrelated line. Both columns
|
||||
// window off the same offset, so they always hold the same row range.
|
||||
const sync = (from: "left" | "right") => {
|
||||
const src = from === "left" ? left.current : right.current;
|
||||
const dst = from === "left" ? right.current : left.current;
|
||||
if (!src || !dst || dst.scrollLeft === src.scrollLeft) return;
|
||||
dst.scrollLeft = src.scrollLeft;
|
||||
}, []);
|
||||
if (!src || !dst) return;
|
||||
follow(src, dst);
|
||||
win.onScroll(src);
|
||||
};
|
||||
|
||||
const column = (side: "left" | "right") =>
|
||||
win.on ? (
|
||||
<Windowed count={items.length} range={win.range} minWidth={minWidth}>
|
||||
<SplitSlice items={items} range={win.range} lang={lang} side={side} />
|
||||
</Windowed>
|
||||
) : (
|
||||
<SplitColumn hunks={hunks} lang={lang} side={side} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`flex ${boxHeight(fill)}`}>
|
||||
@@ -233,7 +501,7 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
|
||||
onScroll={() => sync("left")}
|
||||
className="w-1/2 min-w-0 overflow-auto"
|
||||
>
|
||||
<SplitColumn hunks={hunks} lang={lang} side="left" />
|
||||
{column("left")}
|
||||
</div>
|
||||
<div
|
||||
ref={right}
|
||||
@@ -241,7 +509,7 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
|
||||
onScroll={() => sync("right")}
|
||||
className="w-1/2 min-w-0 overflow-auto border-l border-border-light"
|
||||
>
|
||||
<SplitColumn hunks={hunks} lang={lang} side="right" />
|
||||
{column("right")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -260,6 +528,15 @@ export function LaneDiffView({
|
||||
}) {
|
||||
const { t } = useTranslation(["lanes"]);
|
||||
const lang = langFor(file.path);
|
||||
const hunks = file.hunks;
|
||||
const items = useMemo(() => (hunks ? flatten(hunks, "unified") : []), [hunks]);
|
||||
const minWidth = useMemo(
|
||||
// two gutters + the row's px-2, plus the marker column
|
||||
() => `calc(${hunks ? longestInHunks(hunks) + 1 : 0}ch + 6rem)`,
|
||||
[hunks]
|
||||
);
|
||||
// Unified only; split windows inside its own two scrollers.
|
||||
const win = useWindow(layout === "unified" ? items.length : 0);
|
||||
|
||||
if (file.binary)
|
||||
return <p className="px-2 py-1 text-[10px] text-fg-muted">{t("changes.binary")}</p>;
|
||||
@@ -270,12 +547,31 @@ export function LaneDiffView({
|
||||
<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} />
|
||||
@@ -303,19 +599,32 @@ export function LaneFileView({
|
||||
}) {
|
||||
const { t } = useTranslation(["lanes"]);
|
||||
const lang = langFor(path);
|
||||
const win = useWindow(lines.length);
|
||||
// gutter + the row's px-2
|
||||
const minWidth = useMemo(() => `calc(${longest(lines)}ch + 3.5rem)`, [lines]);
|
||||
const row = (text: string, i: number, style?: CSSProperties) => (
|
||||
<Row key={i} tint="" style={style}>
|
||||
<Gutter n={i + 1} />
|
||||
<span className="whitespace-pre px-2">
|
||||
<Code text={text} lang={lang} />
|
||||
</span>
|
||||
</Row>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
data-testid="lane-file-view"
|
||||
onScroll={(e) => win.onScroll(e.currentTarget)}
|
||||
className={`overflow-auto font-mono text-[11px] leading-[1.45] ${boxHeight(fill)}`}
|
||||
>
|
||||
{lines.map((text, i) => (
|
||||
<Row key={i} tint="">
|
||||
<Gutter n={i + 1} />
|
||||
<span className="whitespace-pre px-2">
|
||||
<Code text={text} lang={lang} />
|
||||
</span>
|
||||
</Row>
|
||||
))}
|
||||
{win.on ? (
|
||||
<Windowed count={lines.length} range={win.range} minWidth={minWidth}>
|
||||
{lines
|
||||
.slice(win.range.start, win.range.end)
|
||||
.map((text, k) => row(text, win.range.start + k, FIXED))}
|
||||
</Windowed>
|
||||
) : (
|
||||
lines.map((text, i) => row(text, i))
|
||||
)}
|
||||
{truncated && (
|
||||
<p className="px-2 py-1 text-[10px] text-status-warning">{t("changes.fileTruncated")}</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user