From b91a2a430c366f6d1f303d8821f86824e87709d2 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 10:50:44 +0200
Subject: [PATCH] web/repo: merge the diff file views

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/CommitView.stories.svelte |   6 +-
 .../lib/components/repo/DiffCardChrome.svelte |  67 +++++++
 .../lib/components/repo/DiffFileCard.svelte   | 106 +++++-----
 .../lib/components/repo/DiffFileList.svelte   |  84 --------
 ...ies.svelte => DiffFileTree.stories.svelte} |   6 +-
 ...ullFileTree.svelte => DiffFileTree.svelte} |  49 +++--
 .../lib/components/repo/DiffStatPill.svelte   |  72 ++++---
 .../components/repo/DiffTopbar.stories.svelte |   8 +-
 web/src/lib/components/repo/DiffTopbar.svelte |  22 +-
 .../components/repo/DiffView.stories.svelte   |   2 +-
 web/src/lib/components/repo/DiffView.svelte   |  13 +-
 web/src/lib/components/repo/pierreDiff.css    |  11 +
 .../lib/components/repo/pulls/PullDiff.svelte |  36 ++--
 .../pulls/PullDiffFileCard.stories.svelte     | 188 ++++++++++++++++++
 .../repo/pulls/PullDiffFileCard.svelte        |  78 +++-----
 ...ffFileList.svelte => PullDiffFiles.svelte} |  13 --
 web/src/lib/components/repo/types.ts          |   4 +-
 17 files changed, 475 insertions(+), 290 deletions(-)
 create mode 100644 web/src/lib/components/repo/DiffCardChrome.svelte
 delete mode 100644 web/src/lib/components/repo/DiffFileList.svelte
 rename web/src/lib/components/repo/{DiffFileList.stories.svelte => DiffFileTree.stories.svelte} (93%)
 rename web/src/lib/components/repo/{pulls/PullFileTree.svelte => DiffFileTree.svelte} (62%)
 create mode 100644 web/src/lib/components/repo/pulls/PullDiffFileCard.stories.svelte
 rename web/src/lib/components/repo/pulls/{PullDiffFileList.svelte => PullDiffFiles.svelte} (71%)

diff --git a/web/src/lib/components/repo/CommitView.stories.svelte b/web/src/lib/components/repo/CommitView.stories.svelte
index 3d2e2cb90..f100809ec 100644
--- a/web/src/lib/components/repo/CommitView.stories.svelte
+++ b/web/src/lib/components/repo/CommitView.stories.svelte
@@ -80,7 +80,7 @@
 		await expect(canvas.getByText("co-author")).toBeVisible();
 		await expect(canvas.getByText("committer")).toBeVisible();
 
-		await expect(canvas.getByRole("link", { name: ".patch" })).toHaveAttribute(
+		await expect(canvas.getByRole("link", { name: "Download patch" })).toHaveAttribute(
 			"href",
 			"/dawn/tangled/commit/0123456789abcdef0123456789abcdef01234567.patch"
 		);
@@ -96,8 +96,8 @@
 
 	const hidesDownloadsForShortRef = async ({ canvas }: PlayContext) => {
 		await expect(canvas.getByText("add a storybook fixture")).toBeVisible();
-		await expect(canvas.queryByRole("link", { name: ".patch" })).toBeNull();
-		await expect(canvas.queryByRole("link", { name: ".diff" })).toBeNull();
+		await expect(canvas.queryByRole("link", { name: "Download patch" })).toBeNull();
+		await expect(canvas.queryByRole("link", { name: "Download diff" })).toBeNull();
 	};
 
 	const { Story } = defineMeta({
diff --git a/web/src/lib/components/repo/DiffCardChrome.svelte b/web/src/lib/components/repo/DiffCardChrome.svelte
new file mode 100644
index 000000000..cc378489f
--- /dev/null
+++ b/web/src/lib/components/repo/DiffCardChrome.svelte
@@ -0,0 +1,67 @@
+<script module lang="ts">
+	export type DiffCardStickyTop = "commit" | "page" | "viewport";
+
+	const stickyTopClasses: Record<DiffCardStickyTop, string> = {
+		commit: "top-[calc(3rem+env(safe-area-inset-top))] z-5",
+		page: "top-24.5 z-10",
+		viewport: "top-14 z-10"
+	};
+</script>
+
+<script lang="ts">
+	import ChevronDown from "$icon/chevron-down";
+	import ChevronRight from "$icon/chevron-right";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		id: string;
+		open?: boolean;
+		stickyTop?: DiffCardStickyTop;
+		header: Snippet;
+		actions?: Snippet;
+		body: Snippet;
+	}
+
+	let {
+		id,
+		open = $bindable(true),
+		stickyTop = "commit",
+		header,
+		actions,
+		body
+	}: Props = $props();
+</script>
+
+<details bind:open {id} class="mx-auto w-full rounded-sm bg-background-default">
+	<summary
+		class={[
+			"sticky cursor-pointer list-none bg-background-default",
+			stickyTopClasses[stickyTop]
+		]}
+	>
+		<div
+			class={[
+				"flex justify-between border border-border-default",
+				open ? "rounded-t-sm" : "rounded-sm"
+			]}
+		>
+			<div class="flex items-center gap-2 overflow-x-auto py-2 px-2.5">
+				{#if open}
+					<ChevronDown class="size-3.5 shrink-0" aria-hidden="true" />
+				{:else}
+					<ChevronRight class="size-3.5 shrink-0" aria-hidden="true" />
+				{/if}
+				{@render header()}
+			</div>
+			{#if actions}
+				<div class="flex items-center pr-1">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	</summary>
+
+	<div class="overflow-clip rounded-b-sm border-x border-b border-border-default">
+		{@render body()}
+	</div>
+</details>
diff --git a/web/src/lib/components/repo/DiffFileCard.svelte b/web/src/lib/components/repo/DiffFileCard.svelte
index f90c791af..198c677ff 100644
--- a/web/src/lib/components/repo/DiffFileCard.svelte
+++ b/web/src/lib/components/repo/DiffFileCard.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import ArrowRight from "$icon/arrow-right";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronRight from "$icon/chevron-right";
 	import Eye from "$icon/eye";
 	import type { DiffFile, DiffStat } from "$lib/api/diff";
 	import type { FileDiffMetadata } from "@pierre/diffs";
 	import Button from "$lib/components/ui/Button.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import type { Snippet } from "svelte";
+	import DiffCardChrome from "./DiffCardChrome.svelte";
 	import DiffStatPill from "./DiffStatPill.svelte";
 	import PierreDiff from "./PierreDiff.svelte";
 	import type { DiffStyle } from "./pierre";
@@ -42,63 +42,49 @@
 	}: Props = $props();
 </script>
 
-<!-- the summary sticks below the topbar and needs a solid bg
-     or the diff shows through. z-[5] keeps it under the z-10 topbar it
-     shares its sticky band with -->
-<details
-	bind:open
-	id="file-{name}"
-	class="group mx-auto w-full rounded-sm border border-border-default bg-background-default"
->
-	<summary
-		class="sticky top-[calc(3rem+env(safe-area-inset-top))] z-5 cursor-pointer list-none rounded-sm bg-background-default group-open:rounded-b-none group-open:border-b group-open:border-border-default"
-	>
-		<div class="flex cursor-pointer justify-between">
-			<div class="flex items-center gap-2 overflow-x-auto p-2">
-				{#if open}
-					<ChevronDown class="size-4" />
-				{:else}
-					<ChevronRight class="size-4" />
-				{/if}
-				<DiffStatPill {stat} />
-
-				<div class="flex items-center gap-2 overflow-x-auto">
-					{#if file.name.old && file.name.new && file.name.old !== file.name.new}
-						{file.name.old}
-						<ArrowRight class="size-4" />
-						{file.name.new}
-					{:else}
-						{name}
-					{/if}
-				</div>
-			</div>
-			<div class="flex items-center pr-1">
-				{#if blobUrl}
-					<Button
-						href={blobUrl as "/"}
-						variant="ghost"
-						size="small"
-						icon={Eye}
-						class="hidden md:inline-flex"
-						onclick={(event) => event.stopPropagation()}
-					>
-						View file
-					</Button>
-				{/if}
-				{@render headerActions?.(file)}
-			</div>
+<DiffCardChrome id="file-{name}" bind:open stickyTop="commit">
+	{#snippet header()}
+		<DiffStatPill {stat} size="small" />
+		<div class="flex items-center gap-2 overflow-x-auto">
+			{#if file.name.old && file.name.new && file.name.old !== file.name.new}
+				{file.name.old}
+				<ArrowRight class="size-4" />
+				{file.name.new}
+			{:else}
+				{name}
+			{/if}
 		</div>
-	</summary>
+	{/snippet}
+
+	{#snippet actions()}
+		{#if blobUrl}
+			<Button
+				href={blobUrl as "/"}
+				variant="ghost"
+				size="small"
+				icon={Eye}
+				class="hidden md:inline-flex"
+				onclick={(event) => event.stopPropagation()}
+			>
+				View file
+			</Button>
+		{/if}
+		{@render headerActions?.(file)}
+	{/snippet}
 
-	{#if file.is_binary}
-		<p class="p-4 text-center text-foreground-placeholder">
-			This is a binary file and will not be displayed.
-		</p>
-	{:else}
-		<PierreDiff
-			files={fileDiff ? [fileDiff] : []}
-			{diffStyle}
-			prerenderedHTML={[prerenderedHTML]}
-		/>
-	{/if}
-</details>
+	{#snippet body()}
+		{#if file.is_binary}
+			<EmptyState
+				size="inline"
+				message="This is a binary file and will not be displayed."
+				class="justify-center p-4"
+			/>
+		{:else}
+			<PierreDiff
+				files={fileDiff ? [fileDiff] : []}
+				{diffStyle}
+				prerenderedHTML={[prerenderedHTML]}
+			/>
+		{/if}
+	{/snippet}
+</DiffCardChrome>
diff --git a/web/src/lib/components/repo/DiffFileList.svelte b/web/src/lib/components/repo/DiffFileList.svelte
deleted file mode 100644
index faef388b9..000000000
--- a/web/src/lib/components/repo/DiffFileList.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script module lang="ts">
-	interface TreeDir {
-		type: "dir";
-		name: string;
-		children: TreeNode[];
-	}
-
-	interface TreeFile {
-		type: "file";
-		name: string;
-		path: string;
-	}
-
-	type TreeNode = TreeDir | TreeFile;
-
-	// first-seen order (the diff's file order), no re-sorting
-	const buildTree = (paths: string[]): TreeNode[] => {
-		const roots: TreeNode[] = [];
-		const dirs: Record<string, TreeDir> = Object.create(null);
-		for (const path of paths) {
-			const parts = path.split("/");
-			let siblings = roots;
-			let prefix = "";
-			for (const dir of parts.slice(0, -1)) {
-				prefix = prefix ? `${prefix}/${dir}` : dir;
-				let node = dirs[prefix];
-				if (!node) {
-					node = { type: "dir", name: dir, children: [] };
-					dirs[prefix] = node;
-					siblings.push(node);
-				}
-				siblings = node.children;
-			}
-			siblings.push({ type: "file", name: parts.at(-1) ?? path, path });
-		}
-		return roots;
-	};
-</script>
-
-<script lang="ts">
-	import File from "$icon/file";
-	import Folder from "$icon/folder";
-	import FolderOpen from "$icon/folder-open";
-
-	interface Props {
-		// full slash-separated paths. anchors point at `#file-<path>`
-		files: { name: string }[];
-	}
-
-	let { files }: Props = $props();
-
-	const tree = $derived(buildTree(files.map((file) => file.name)));
-</script>
-
-{#snippet nodes(list: TreeNode[])}
-	{#each list as node (`${node.type}:${node.name}`)}
-		{#if node.type === "dir"}
-			<details open class="group">
-				<summary class="cursor-pointer list-none">
-					<span class="inline-flex items-center gap-2">
-						<Folder class="size-4 shrink-0 group-open:hidden" />
-						<FolderOpen class="hidden size-4 shrink-0 group-open:block" />
-						<span class="truncate text-foreground-default">{node.name}</span>
-					</span>
-				</summary>
-				<div class="ml-1 border-l border-border-default pl-2">
-					{@render nodes(node.children)}
-				</div>
-			</details>
-		{:else}
-			<div class="flex items-center gap-2">
-				<File class="size-4 shrink-0" />
-				<a
-					href="#file-{node.path}"
-					class="truncate text-foreground-default no-underline hover:underline"
-				>
-					{node.name}
-				</a>
-			</div>
-		{/if}
-	{/each}
-{/snippet}
-
-{@render nodes(tree)}
diff --git a/web/src/lib/components/repo/DiffFileList.stories.svelte b/web/src/lib/components/repo/DiffFileTree.stories.svelte
similarity index 93%
rename from web/src/lib/components/repo/DiffFileList.stories.svelte
rename to web/src/lib/components/repo/DiffFileTree.stories.svelte
index 4c67508a6..90abedbcd 100644
--- a/web/src/lib/components/repo/DiffFileList.stories.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.stories.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
 	import { expect } from "storybook/test";
-	import DiffFileList from "./DiffFileList.svelte";
+	import DiffFileTree from "./DiffFileTree.svelte";
 
 	const nestedFiles = [
 		{ name: "src/lib/components/repo/DiffView.svelte" },
@@ -39,8 +39,8 @@
 	};
 
 	const { Story } = defineMeta({
-		title: "Repo/DiffFileList",
-		component: DiffFileList,
+		title: "Repo/DiffFileTree",
+		component: DiffFileTree,
 		tags: ["autodocs"],
 		args: { files: nestedFiles }
 	});
diff --git a/web/src/lib/components/repo/pulls/PullFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte
similarity index 62%
rename from web/src/lib/components/repo/pulls/PullFileTree.svelte
rename to web/src/lib/components/repo/DiffFileTree.svelte
index c10604eed..394847934 100644
--- a/web/src/lib/components/repo/pulls/PullFileTree.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.svelte
@@ -1,4 +1,22 @@
 <script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	const treeRow = tv({
+		slots: {
+			row: "pt-1",
+			label: "inline-flex items-center gap-2",
+			icon: "size-4 shrink-0 text-foreground-placeholder",
+			name: "truncate text-foreground-default",
+			children: "ml-1 border-l border-transparent pl-2"
+		},
+		variants: {
+			kind: {
+				dir: { row: "cursor-pointer list-none" },
+				file: { row: "flex items-center gap-2", name: "no-underline hover:underline" }
+			}
+		}
+	});
+
 	interface TreeDir {
 		type: "dir";
 		name: string;
@@ -14,7 +32,6 @@
 
 	type TreeNode = TreeDir | TreeFile;
 
-	// first-seen order (the diff's file order), no re-sorting
 	const buildTree = (paths: string[]): TreeNode[] => {
 		const roots: TreeNode[] = [];
 		const dirs: Record<string, TreeDir> = Object.create(null);
@@ -44,7 +61,7 @@
 	import FolderOpen from "$icon/folder-open";
 
 	interface Props {
-		// full slash-separated paths, anchors point at `#file-<path>`
+		// full slash-separated paths. anchors point at `#file-<path>`
 		files: { name: string }[];
 	}
 
@@ -52,10 +69,10 @@
 
 	const tree = $derived(buildTree(files.map((file) => file.name)));
 
-	// the appview names a tailwind group per nesting level (`group/level-3`) so a
-	// folder icon only follows its own <details>; tracking open state per path is
-	// the same result without the twelve-deep safelist
 	let closed = $state<Record<string, boolean>>({});
+
+	const dir = treeRow({ kind: "dir" });
+	const file = treeRow({ kind: "file" });
 </script>
 
 {#snippet nodes(list: TreeNode[])}
@@ -63,28 +80,24 @@
 		{#if node.type === "dir"}
 			{@const open = !closed[node.path]}
 			<details {open} ontoggle={(e) => (closed[node.path] = !e.currentTarget.open)}>
-				<summary class="cursor-pointer list-none pt-1">
-					<span class="tree-directory inline-flex items-center gap-2">
+				<summary class={dir.row()}>
+					<span class={dir.label()}>
 						{#if open}
-							<FolderOpen class="size-4 shrink-0" aria-hidden="true" />
+							<FolderOpen class={dir.icon()} aria-hidden="true" />
 						{:else}
-							<Folder class="size-4 shrink-0" aria-hidden="true" />
+							<Folder class={dir.icon()} aria-hidden="true" />
 						{/if}
-						<span class="filename truncate text-foreground-default">{node.name}</span>
+						<span class={dir.name()}>{node.name}</span>
 					</span>
 				</summary>
-				<div class="ml-1 border-l border-border-default pl-2">
+				<div class={dir.children()}>
 					{@render nodes(node.children)}
 				</div>
 			</details>
 		{:else}
-			<div class="tree-file flex items-center gap-2 pt-1">
-				<File class="size-4 shrink-0" aria-hidden="true" />
-				<a
-					href="#file-{node.path}"
-					data-path={node.path}
-					class="filetree-link filename truncate text-foreground-default no-underline hover:underline"
-				>
+			<div class={file.row()}>
+				<File class={file.icon()} aria-hidden="true" />
+				<a href="#file-{node.path}" class={file.name()}>
 					{node.name}
 				</a>
 			</div>
diff --git a/web/src/lib/components/repo/DiffStatPill.svelte b/web/src/lib/components/repo/DiffStatPill.svelte
index 7604defae..0618d8c14 100644
--- a/web/src/lib/components/repo/DiffStatPill.svelte
+++ b/web/src/lib/components/repo/DiffStatPill.svelte
@@ -1,39 +1,59 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const diffStatPill = tv({
+		slots: {
+			root: "flex items-center overflow-clip rounded-sm",
+			insertions: "text-foreground-success select-none",
+			deletions: "text-foreground-danger select-none"
+		},
+		variants: {
+			variant: {
+				flat: {
+					insertions: "p-0.5",
+					deletions: "p-0.5"
+				},
+				background: {
+					insertions: "bg-background-success-subtle px-1 py-0.5",
+					deletions: "bg-background-danger-subtle px-1 py-0.5"
+				}
+			},
+			size: {
+				small: { root: "typography-monospace-small" },
+				regular: { root: "typography-monospace-regular" }
+			}
+		},
+		defaultVariants: {
+			variant: "background",
+			size: "regular"
+		}
+	});
+
+	export type DiffStatPillVariants = VariantProps<typeof diffStatPill>;
+</script>
+
 <script lang="ts">
 	import type { DiffStat } from "$lib/api/diff";
 
 	interface Props {
 		stat: DiffStat;
 		class?: string;
+		size?: DiffStatPillVariants["size"];
+		variant?: DiffStatPillVariants["variant"];
 	}
 
-	let { stat, class: className = "" }: Props = $props();
+	let { stat, class: className = "", size, variant }: Props = $props();
+
+	const style = $derived(diffStatPill({ variant, size }));
 </script>
 
 {#if stat.insertions > 0 || stat.deletions > 0}
-	<div class="flex items-center typography-monospace-regular font-mono {className}">
-		{#if stat.insertions > 0 && stat.deletions > 0}
-			<span
-				class="rounded-l bg-background-success-subtle px-1 py-0.5 text-foreground-success select-none"
-			>
-				+{stat.insertions}
-			</span>
-			<span
-				class="rounded-r bg-background-danger-subtle px-1 py-0.5 text-foreground-danger select-none"
-			>
-				-{stat.deletions}
-			</span>
-		{:else if stat.insertions > 0}
-			<span
-				class="rounded-sm bg-background-success-subtle px-1 py-0.5 text-foreground-success select-none"
-			>
-				+{stat.insertions}
-			</span>
-		{:else}
-			<span
-				class="rounded-sm bg-background-danger-subtle px-1 py-0.5 text-foreground-danger select-none"
-			>
-				-{stat.deletions}
-			</span>
-		{/if}
+	<div class={style.root({ class: className })}>
+		<span class={style.insertions()}>
+			+{stat.insertions}
+		</span>
+		<span class={style.deletions()}>
+			-{stat.deletions}
+		</span>
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/DiffTopbar.stories.svelte b/web/src/lib/components/repo/DiffTopbar.stories.svelte
index 4d2176aa8..20ea3335e 100644
--- a/web/src/lib/components/repo/DiffTopbar.stories.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.stories.svelte
@@ -30,17 +30,17 @@
 		}
 	}}
 	play={async ({ canvas }: PlayContext) => {
-		await expect(canvas.getByRole("link", { name: ".patch" })).toHaveAttribute(
+		await expect(canvas.getByRole("link", { name: "Download patch" })).toHaveAttribute(
 			"href",
 			expect.stringContaining(".patch")
 		);
-		await expect(canvas.getByRole("link", { name: ".diff" })).toHaveAttribute(
+		await expect(canvas.getByRole("link", { name: "Download diff" })).toHaveAttribute(
 			"href",
 			expect.stringContaining(".diff")
 		);
 		// reloads on purpose, the client router would shadow the endpoint with the
 		// commit page's [ref] route and 404
-		for (const link of canvas.getAllByRole("link", { name: /^\./ })) {
+		for (const link of canvas.getAllByRole("link", { name: /^Download/ })) {
 			await expect(link).toHaveAttribute("data-sveltekit-reload");
 		}
 	}}
@@ -87,7 +87,7 @@
 <Story name="Topbar slots" asChild>
 	<DiffTopbar stat={{ insertions: 19, deletions: 11, files_changed: 1 }} fileCount={1}>
 		{#snippet center()}
-			<span class="typography-monospace-small font-mono text-foreground-muted">Round #2</span>
+			<span class="typography-monospace-small text-foreground-muted">Round #2</span>
 		{/snippet}
 		{#snippet actions()}
 			<span class="typography-paragraph-small text-foreground-muted">review panel</span>
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index ab9fe461b..9ce7f0ccf 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Download from "$icon/download";
 	import FileDiff from "$icon/file-diff";
 	import FileCode from "$icon/file-code";
 	import FoldVertical from "$icon/fold-vertical";
@@ -74,11 +73,19 @@
 	{#if downloadUrls}
 		<!-- below md these crowd the topbar into page-level horizontal scroll -->
 		<span class="inline-flex gap-2">
-			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload icon={FileCode}
-				><span class="hidden sm:inline">Download patch</span></Button
+			<Button
+				href={downloadUrls.patch as "/"}
+				data-sveltekit-reload
+				icon={FileCode}
+				aria-label="Download patch"
+				><span class="hidden sm:inline" aria-hidden="true">Download patch</span></Button
 			>
-			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload icon={FileDiff}
-				><span class="hidden sm:inline">Download diff</span></Button
+			<Button
+				href={downloadUrls.diff as "/"}
+				data-sveltekit-reload
+				icon={FileDiff}
+				aria-label="Download diff"
+				><span class="hidden sm:inline" aria-hidden="true">Download diff</span></Button
 			>
 		</span>
 	{/if}
@@ -88,8 +95,11 @@
 			size="small"
 			icon={allOpen ? FoldVertical : UnfoldVertical}
 			onclick={() => onSetAllOpen(!allOpen)}
+			aria-label={allOpen ? "Collapse all" : "Expand all"}
 		>
-			<span class="hidden md:inline">{allOpen ? "Collapse all" : "Expand all"}</span>
+			<span class="hidden md:inline" aria-hidden="true"
+				>{allOpen ? "Collapse all" : "Expand all"}</span
+			>
 		</Button>
 	{/if}
 
diff --git a/web/src/lib/components/repo/DiffView.stories.svelte b/web/src/lib/components/repo/DiffView.stories.svelte
index 976398b29..ff4bf7689 100644
--- a/web/src/lib/components/repo/DiffView.stories.svelte
+++ b/web/src/lib/components/repo/DiffView.stories.svelte
@@ -81,7 +81,7 @@
 			"#file-src/colors.ts"
 		);
 
-		await expect(canvas.getByRole("link", { name: ".patch" })).toHaveAttribute(
+		await expect(canvas.getByRole("link", { name: "Download patch" })).toHaveAttribute(
 			"href",
 			downloadUrls.patch
 		);
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index b521c7cb9..7b4c9358d 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -2,8 +2,9 @@
 	import { diffFileName, type DiffFile, type DiffStat } from "$lib/api/diff";
 	import { fileStats } from "$lib/api/rawdiff";
 	import type { Snippet } from "svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import DiffFileCard from "./DiffFileCard.svelte";
-	import DiffFileList from "./DiffFileList.svelte";
+	import DiffFileTree from "./DiffFileTree.svelte";
 	import DiffTopbar from "./DiffTopbar.svelte";
 	import { diffRowKey, toFileDiffMetadata } from "./fileDiff";
 	import type { DiffStyle } from "./pierre";
@@ -90,16 +91,18 @@
 				<section
 					class="mx-auto min-h-full w-full overflow-x-auto rounded-sm border border-border-default bg-background-default px-6 py-2 typography-paragraph-regular"
 				>
-					<DiffFileList files={rows.map((row) => ({ name: row.name }))} />
+					<DiffFileTree files={rows.map((row) => ({ name: row.name }))} />
 				</section>
 			</aside>
 		{/if}
 
 		<div class="flex min-w-0 flex-1 flex-col gap-4">
 			{#if rows.length === 0}
-				<div class="py-8 text-center text-foreground-muted">
-					<p>No differences found between the selected revisions.</p>
-				</div>
+				<EmptyState
+					size="inline"
+					message="No differences found between the selected revisions."
+					class="justify-center py-8"
+				/>
 			{/if}
 			{#each rows as row (row.key)}
 				<DiffFileCard
diff --git a/web/src/lib/components/repo/pierreDiff.css b/web/src/lib/components/repo/pierreDiff.css
index 713f731aa..a56a8e4a4 100644
--- a/web/src/lib/components/repo/pierreDiff.css
+++ b/web/src/lib/components/repo/pierreDiff.css
@@ -77,3 +77,14 @@
 [data-code] {
 	scrollbar-gutter: auto;
 }
+
+[data-expand-button] {
+    & > svg[data-icon] {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+[data-separator-wrapper] [data-separator-multi-button] > [data-expand-button] {
+    border: none;
+}
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
index 96b01b030..b92400793 100644
--- a/web/src/lib/components/repo/pulls/PullDiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Download from "$icon/download";
 	import FileDiff from "$icon/file-diff";
 	import FileCode from "$icon/file-code";
 	import PanelLeftClose from "$icon/panel-left-close";
@@ -11,9 +10,11 @@
 	import UnfoldVertical from "$icon/unfold-vertical";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
+	import DiffFileTree from "$lib/components/repo/DiffFileTree.svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
-	import PullDiffFileList from "./PullDiffFileList.svelte";
-	import PullFileTree from "./PullFileTree.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
+	import PullDiffFiles from "./PullDiffFiles.svelte";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
 	import type { PullDiff, PullDiffDeps } from "$lib/api/pullDiff";
 
@@ -43,20 +44,20 @@
 	let diffStyle = $derived<DiffStyle>(initialDiffStyle);
 </script>
 
-<div class="flex gap-2 rounded-sm border border-border-default bg-background-default px-2 pb-4">
+<Card padding="none" class="flex gap-2 px-2 pb-4">
 	<!-- file tree -->
 	{#if treeOpen}
 		<aside
 			class={[
 				"sticky flex w-fit max-w-80 min-w-40 shrink-0 flex-col self-start",
 				stickyTop === "viewport"
-					? "top-0 max-h-[calc(100vh-1rem)]"
+					? "top-0 max-h-svh]"
 					: "top-11 max-h-[calc(100vh-3.75rem)]"
 			]}
 		>
 			<div
 				class={[
-					"sticky bg-background-default py-2",
+					"sticky flex min-h-14 items-center bg-background-default py-2",
 					stickyTop === "viewport" ? "top-0" : "top-11"
 				]}
 			>
@@ -64,7 +65,7 @@
 			</div>
 			<div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small">
 				{#if diff}
-					<PullFileTree files={diff.files} />
+					<DiffFileTree files={diff.files} />
 				{:else if loading}
 					<span class="text-foreground-subtle">
 						<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
@@ -78,7 +79,7 @@
 	<div class="min-w-0 flex-1">
 		<div
 			class={[
-				"sticky z-20 flex items-center justify-between bg-background-default py-2",
+				"sticky z-20 flex min-h-14 items-center justify-between bg-background-default py-2",
 				stickyTop === "viewport" ? "top-0" : "top-11"
 			]}
 		>
@@ -91,7 +92,7 @@
 					<span class="text-foreground-muted">
 						{diff.files.length} changed {diff.files.length === 1 ? "file" : "files"}
 						{#if diff.truncated > 0}
-							&middot; {diff.truncated} not rendered
+							<Separator variant="dot" class="px-1" />{diff.truncated} not rendered
 						{/if}
 					</span>
 				{/if}
@@ -103,13 +104,17 @@
 							href={downloadUrls.patch as "/"}
 							data-sveltekit-reload
 							icon={FileCode}
-							><span class="hidden sm:inline">Download patch</span></Button
+							aria-label="Download patch"
+							><span class="hidden sm:inline" aria-hidden="true">Download patch</span
+							></Button
 						>
 						<Button
 							href={downloadUrls.diff as "/"}
 							data-sveltekit-reload
 							icon={FileDiff}
-							><span class="hidden sm:inline">Download diff</span></Button
+							aria-label="Download diff"
+							><span class="hidden sm:inline" aria-hidden="true">Download diff</span
+							></Button
 						>
 					</span>
 				{/if}
@@ -140,10 +145,7 @@
 		</div>
 		<!-- plugs rounding gaps between the sticky toolbar and file headers -->
 		<div
-			class={[
-				"sticky -mb-6 h-6 bg-background-default",
-				stickyTop === "viewport" ? "top-7.5" : "top-18.5"
-			]}
+			class={["sticky -mb-6 h-6", stickyTop === "viewport" ? "top-7.5" : "top-18.5"]}
 			aria-hidden="true"
 		></div>
 
@@ -157,7 +159,7 @@
 			<!-- a new diff gets a fresh fill pool by teardown, so a version switch
 			     cannot show the previous version's text under a repeated file path -->
 			{#key diff}
-				<PullDiffFileList {deps} {diff} {diffStyle} {allOpen} {stickyTop} />
+				<PullDiffFiles {deps} {diff} {diffStyle} {allOpen} {stickyTop} />
 			{/key}
 		{:else if diff}
 			<div
@@ -171,4 +173,4 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</Card>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.stories.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.stories.svelte
new file mode 100644
index 000000000..71f8b94e2
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.stories.svelte
@@ -0,0 +1,188 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, waitFor } from "storybook/test";
+	import type { FileContentsResult, PullDiffFile } from "$lib/api/pullDiff";
+	import PullDiffFileCard from "./PullDiffFileCard.svelte";
+
+	const textFile: PullDiffFile = {
+		key: "src/lib/notifications.svelte.ts→src/lib/notifications.svelte.ts",
+		name: "src/lib/notifications.svelte.ts",
+		kind: "changed",
+		stat: { insertions: 5, deletions: 2 },
+		lines: 12
+	};
+
+	const renamedFile: PullDiffFile = {
+		key: "src/lib/api/notifs.ts→src/lib/api/notifications.ts",
+		name: "src/lib/api/notifications.ts",
+		oldName: "src/lib/api/notifs.ts",
+		kind: "renamed",
+		stat: { insertions: 3, deletions: 1 },
+		lines: 8
+	};
+
+	const binaryFile: PullDiffFile = {
+		key: "static/notification-bell.png→static/notification-bell.png",
+		name: "static/notification-bell.png",
+		kind: "changed",
+		stat: { insertions: 0, deletions: 0 },
+		lines: 0,
+		note: "This is a binary file and will not be displayed."
+	};
+
+	const largeFile: PullDiffFile = {
+		key: "src/lib/large.ts→src/lib/large.ts",
+		name: "src/lib/large.ts",
+		kind: "changed",
+		stat: { insertions: 1000, deletions: 500 },
+		lines: 2000,
+		note: "This file is too large to display."
+	};
+
+	const textContents: FileContentsResult = {
+		oldFile: {
+			name: "src/lib/notifications.svelte.ts",
+			contents: `import { getContext, setContext } from "svelte";
+
+export const NOTIFICATIONS_KEY = Symbol("notifications");
+
+export const createNotifications = () => {
+	let unread = $state(0);
+
+	return {
+		get unread() {
+			return unread;
+		},
+		set unread(value: number) {
+			unread = value;
+		}
+	};
+};
+`
+		},
+		newFile: {
+			name: "src/lib/notifications.svelte.ts",
+			contents: `import { getContext, setContext } from "svelte";
+
+export const NOTIFICATIONS_KEY = Symbol("notifications");
+
+export const createNotifications = () => {
+	let unread = $state(0);
+	const visited = new SvelteSet<string>();
+
+	return {
+		get unread() {
+			return unread;
+		},
+		markEntityVisited: async (uri: string) => {
+			if (visited.has(uri)) return;
+			visited.add(uri);
+			unread = Math.max(unread - 1, 0);
+		}
+	};
+};
+`
+		}
+	};
+
+	const shadowText = (canvasElement: HTMLElement) =>
+		[...canvasElement.querySelectorAll("diffs-container")]
+			.map((host) => host.shadowRoot?.textContent ?? "")
+			.join("\n");
+
+	type PlayContext = Pick<
+		StoryContext<Record<string, unknown>>,
+		"canvas" | "canvasElement" | "userEvent"
+	>;
+
+	const noop = () => {};
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullDiffFileCard",
+		component: PullDiffFileCard,
+		tags: ["autodocs"],
+		args: {
+			file: textFile,
+			contents: textContents,
+			diffStyle: "unified",
+			open: true,
+			stickyTop: "page",
+			observe: noop
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	play={async ({ canvasElement }: PlayContext) => {
+		await waitFor(() => expect(shadowText(canvasElement)).toContain("SvelteSet<string>()"));
+	}}
+/>
+
+<Story
+	name="Collapse toggle"
+	play={async ({ canvas, canvasElement, userEvent }: PlayContext) => {
+		const card = canvasElement.querySelector("details")!;
+		await expect(card.open).toBe(true);
+		await userEvent.click(card.querySelector("summary")!);
+		await expect(card.open).toBe(false);
+		await userEvent.click(card.querySelector("summary")!);
+		await expect(card.open).toBe(true);
+		await expect(canvas.getByText("src/lib/notifications.svelte.ts")).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Renamed file"
+	args={{
+		file: renamedFile,
+		contents: {
+			oldFile: { name: "src/lib/api/notifs.ts", contents: "export const old = true;\n" },
+			newFile: {
+				name: "src/lib/api/notifications.ts",
+				contents: "export const fresh = true;\n"
+			}
+		}
+	}}
+	play={async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByText("src/lib/api/notifications.ts")).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Binary file"
+	args={{
+		file: binaryFile,
+		contents: undefined
+	}}
+	play={async ({ canvas }: PlayContext) => {
+		await expect(
+			canvas.getByText("This is a binary file and will not be displayed.")
+		).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Large file"
+	args={{
+		file: largeFile,
+		contents: undefined
+	}}
+	play={async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByText("This file is too large to display.")).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Loading state"
+	args={{
+		file: textFile,
+		contents: undefined
+	}}
+	play={async ({ canvasElement }: PlayContext) => {
+		await waitFor(() => {
+			const loader = canvasElement.querySelector("svg[aria-hidden='true']");
+			expect(loader).toBeInTheDocument();
+		});
+	}}
+/>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
index 1ad9023e1..0d5d90a0e 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { untrack } from "svelte";
 	import { FileDiff } from "@pierre/diffs";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronRight from "$icon/chevron-right";
 	import LoaderCircle from "$icon/loader-circle";
+	import DiffCardChrome from "$lib/components/repo/DiffCardChrome.svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import {
 		clearPierreRender,
 		pierreDiffOptions,
@@ -80,52 +80,32 @@
 </script>
 
 <div use:observe data-diff-key={file.key} class="overflow-clip rounded-sm">
-	<details id="file-{file.name}" {open} class="group w-full">
-		<summary
-			class={[
-				"sticky z-10 cursor-pointer list-none bg-background-default",
-				stickyTop === "viewport" ? "top-13.5" : "top-24.5"
-			]}
-		>
-			<div
-				class="flex justify-between rounded-sm border border-border-default bg-background-default group-open:rounded-b-none"
-			>
-				<div class="flex items-center gap-2 p-2 typography-paragraph-small">
-					<ChevronRight
-						class="inline size-4 shrink-0 group-open:hidden"
-						aria-hidden="true"
-					/>
-					<ChevronDown
-						class="hidden size-4 shrink-0 group-open:inline"
-						aria-hidden="true"
-					/>
-					<DiffStatPill stat={{ ...file.stat, files_changed: 1 }} />
-					<span>{file.name}</span>
-				</div>
-				<!-- the appview's `Reviewed` checkbox goes here, with the localStorage
-				     review state that drives it -->
-				<div class="flex items-center gap-2 px-2"></div>
-			</div>
-		</summary>
+	<DiffCardChrome id="file-{file.name}" {open} {stickyTop}>
+		{#snippet header()}
+			<span class="flex items-center gap-2 typography-paragraph-small">
+				<span>{file.name}</span>
+				<DiffStatPill size="small" stat={{ ...file.stat, files_changed: 1 }} />
+			</span>
+		{/snippet}
 
-		<div class="overflow-clip rounded-b-sm border-x border-b border-border-default">
-			{#if note}
-				<div class="p-4 text-center typography-paragraph-small text-foreground-placeholder">
-					{note}
-				</div>
-			{:else if pair}
-				<diffs-container class="diffs-container" bind:this={host}></diffs-container>
-			{:else}
-				<!-- reserves roughly the height the text will take, so the page does not
-				     jump as cards below the fold fill in. capped, a 5000-line file
-				     should not reserve a screen-mile -->
-				<div
-					style="min-height: min({file.lines}lh, 40rem)"
-					class="flex items-start justify-center p-4 text-foreground-subtle"
-				>
-					<LoaderCircle class="size-4 animate-spin" aria-hidden="true" />
-				</div>
-			{/if}
-		</div>
-	</details>
+		{#snippet body()}
+			<div class="overflow-clip">
+				{#if note}
+					<EmptyState size="inline" message={note} class="justify-center p-4" />
+				{:else if pair}
+					<diffs-container class="diffs-container" bind:this={host}></diffs-container>
+				{:else}
+					<!-- reserves roughly the height the text will take, so the page does not
+					     jump as cards below the fold fill in. capped, a 5000-line file
+					     should not reserve a screen-mile -->
+					<div
+						style="min-height: min({file.lines}lh, 40rem)"
+						class="flex items-start justify-center p-4 text-foreground-subtle"
+					>
+						<LoaderCircle class="size-4 animate-spin" aria-hidden="true" />
+					</div>
+				{/if}
+			</div>
+		{/snippet}
+	</DiffCardChrome>
 </div>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileList.svelte b/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
similarity index 71%
rename from web/src/lib/components/repo/pulls/PullDiffFileList.svelte
rename to web/src/lib/components/repo/pulls/PullDiffFiles.svelte
index b237245b1..c1244d40b 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
@@ -21,12 +21,7 @@
 
 	let { deps, diff, diffStyle = "unified", allOpen = true, stickyTop = "page" }: Props = $props();
 
-	// the payload carries no line text, so each card's two sides are fetched on
-	// demand as it nears the viewport, a few at a time. the caller wraps this
-	// component in `{#key diff}`, so a new diff gets a fresh pool by teardown --
-	// `blob()` takes no abort signal, and results of a torn-down pool go nowhere
 	const CONCURRENCY = 6;
-	// far enough ahead that a card is usually filled by the time it is scrolled to
 	const LOOKAHEAD = "1500px 0px";
 
 	const byKey = $derived(new Map(diff.files.map((file) => [file.key, file])));
@@ -34,8 +29,6 @@
 	let entries = $state<Record<string, FileContentsResult>>({});
 	let running = 0;
 	const queue: PullDiffFile[] = [];
-	// nothing renders from this, it only keeps a repeated intersection from
-	// queueing the same file twice
 	const started = new SvelteSet<string>();
 
 	const pump = () => {
@@ -55,24 +48,18 @@
 		if (started.has(key)) return;
 		started.add(key);
 		const file = byKey.get(key);
-		// a binary, submodule, oversize or over-the-ceiling file carries its note
-		// already, there is nothing to fetch for it
 		if (file?.sides) {
 			queue.push(file);
 			pump();
 		}
 	};
 
-	// one observer for the whole list -- a card each would be hundreds of them.
-	// built on first use, so it cannot race the cards' actions and never runs on
-	// the server, where actions do not run at all
 	let io: IntersectionObserver | undefined;
 	const observer = () =>
 		(io ??= new IntersectionObserver(
 			(records) => {
 				for (const record of records) {
 					if (!record.isIntersecting) continue;
-					// only the action observes, so every target is one of our cards
 					const key = (record.target as HTMLElement).dataset.diffKey;
 					if (key) want(key);
 				}
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 80bbe78d9..5ac054882 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -50,11 +50,13 @@ export interface IssueSummary {
 	commentCount: number;
 }
 
+export type PullState = "open" | "closed" | "merged";
+
 export interface PullSummary {
 	uri: string;
 	rkey: string;
 	title: string;
-	state: "open" | "closed" | "merged";
+	state: PullState;
 	authorHandle: string;
 	authorDid: string;
 	createdAt: string;
-- 
2.54.0