From d649beebb4b301fd5b481243d0b486dd15361935 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 16:35:27 +0200
Subject: [PATCH] web/repo: rework the PR diff file tree and card chrome

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/repo/DiffCardChrome.svelte |  6 +-
 .../lib/components/repo/DiffFileTree.svelte   | 43 +++++------
 web/src/lib/components/repo/DiffTopbar.svelte |  4 +-
 web/src/lib/components/repo/pierreDiff.css    | 10 +--
 .../lib/components/repo/pulls/PullDiff.svelte | 73 ++++++++++++-------
 .../repo/pulls/PullDiffFileCard.svelte        |  6 +-
 .../repo/pulls/PullDiffFiles.svelte           |  2 +-
 7 files changed, 83 insertions(+), 61 deletions(-)

diff --git a/web/src/lib/components/repo/DiffCardChrome.svelte b/web/src/lib/components/repo/DiffCardChrome.svelte
index cc378489f..88faf6c12 100644
--- a/web/src/lib/components/repo/DiffCardChrome.svelte
+++ b/web/src/lib/components/repo/DiffCardChrome.svelte
@@ -32,7 +32,7 @@
 	}: Props = $props();
 </script>
 
-<details bind:open {id} class="mx-auto w-full rounded-sm bg-background-default">
+<details bind:open {id} class="mx-auto w-full bg-background-default">
 	<summary
 		class={[
 			"sticky cursor-pointer list-none bg-background-default",
@@ -41,11 +41,11 @@
 	>
 		<div
 			class={[
-				"flex justify-between border border-border-default",
+				"flex justify-between border border-border-default transition-colors duration-150 hover:bg-background-subtle",
 				open ? "rounded-t-sm" : "rounded-sm"
 			]}
 		>
-			<div class="flex items-center gap-2 overflow-x-auto py-2 px-2.5">
+			<div class="flex items-center gap-2 overflow-x-auto px-2.5 py-2 select-none">
 				{#if open}
 					<ChevronDown class="size-3.5 shrink-0" aria-hidden="true" />
 				{:else}
diff --git a/web/src/lib/components/repo/DiffFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte
index 394847934..bc4c7642f 100644
--- a/web/src/lib/components/repo/DiffFileTree.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.svelte
@@ -3,16 +3,19 @@
 
 	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"
+			root: "pt-1 pr-4 pb-8 pl-1.5",
+			row: "group my-0.5 inline-flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-foreground-default transition-colors hover:bg-background-subtle",
+			icon: "size-4 shrink-0 text-foreground-placeholder transition-colors group-hover:text-foreground-default",
+			name: "truncate select-none",
+			children: "ml-4 border-l border-border-subtle pl-2"
 		},
 		variants: {
 			kind: {
-				dir: { row: "cursor-pointer list-none" },
-				file: { row: "flex items-center gap-2", name: "no-underline hover:underline" }
+				dir: {
+					row: "cursor-pointer list-none",
+					name: "text-foreground-muted group-hover:text-inherit"
+				},
+				file: { row: "flex items-center gap-2" }
 			}
 		}
 	});
@@ -81,28 +84,26 @@
 			{@const open = !closed[node.path]}
 			<details {open} ontoggle={(e) => (closed[node.path] = !e.currentTarget.open)}>
 				<summary class={dir.row()}>
-					<span class={dir.label()}>
-						{#if open}
-							<FolderOpen class={dir.icon()} aria-hidden="true" />
-						{:else}
-							<Folder class={dir.icon()} aria-hidden="true" />
-						{/if}
-						<span class={dir.name()}>{node.name}</span>
-					</span>
+					{#if open}
+						<FolderOpen class={dir.icon()} aria-hidden="true" />
+					{:else}
+						<Folder class={dir.icon()} aria-hidden="true" />
+					{/if}
+					<span class={dir.name()}>{node.name}</span>
 				</summary>
 				<div class={dir.children()}>
 					{@render nodes(node.children)}
 				</div>
 			</details>
 		{:else}
-			<div class={file.row()}>
+			<a href="#file-{node.path}" class={file.row()}>
 				<File class={file.icon()} aria-hidden="true" />
-				<a href="#file-{node.path}" class={file.name()}>
-					{node.name}
-				</a>
-			</div>
+				<span class={file.name()}>{node.name}</span>
+			</a>
 		{/if}
 	{/each}
 {/snippet}
 
-{@render nodes(tree)}
+<div class={dir.root()}>
+	{@render nodes(tree)}
+</div>
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index 9ce7f0ccf..0120d84cb 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -77,14 +77,14 @@
 				href={downloadUrls.patch as "/"}
 				data-sveltekit-reload
 				icon={FileCode}
-				aria-label="Download patch"
+				aria-label="As .patch"
 				><span class="hidden sm:inline" aria-hidden="true">Download patch</span></Button
 			>
 			<Button
 				href={downloadUrls.diff as "/"}
 				data-sveltekit-reload
 				icon={FileDiff}
-				aria-label="Download diff"
+				aria-label="As .diff"
 				><span class="hidden sm:inline" aria-hidden="true">Download diff</span></Button
 			>
 		</span>
diff --git a/web/src/lib/components/repo/pierreDiff.css b/web/src/lib/components/repo/pierreDiff.css
index a56a8e4a4..edd9ee583 100644
--- a/web/src/lib/components/repo/pierreDiff.css
+++ b/web/src/lib/components/repo/pierreDiff.css
@@ -79,12 +79,12 @@
 }
 
 [data-expand-button] {
-    & > svg[data-icon] {
-        width: 14px;
-        height: 14px;
-    }
+	& > svg[data-icon] {
+		width: 14px;
+		height: 14px;
+	}
 }
 
 [data-separator-wrapper] [data-separator-multi-button] > [data-expand-button] {
-    border: none;
+	border: none;
 }
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
index b92400793..b36fc2154 100644
--- a/web/src/lib/components/repo/pulls/PullDiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import FileDiff from "$icon/file-diff";
 	import FileCode from "$icon/file-code";
+	import FileDown from "$icon/file-down";
 	import PanelLeftClose from "$icon/panel-left-close";
 	import ListTree from "$icon/list-tree";
 	import LoaderCircle from "$icon/loader-circle";
@@ -17,6 +18,8 @@
 	import PullDiffFiles from "./PullDiffFiles.svelte";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
 	import type { PullDiff, PullDiffDeps } from "$lib/api/pullDiff";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
 
 	interface Props {
 		deps: PullDiffDeps;
@@ -44,15 +47,13 @@
 	let diffStyle = $derived<DiffStyle>(initialDiffStyle);
 </script>
 
-<Card padding="none" class="flex gap-2 px-2 pb-4">
+<Card padding="none" class="flex gap-2 px-2">
 	<!-- 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-svh]"
-					: "top-11 max-h-[calc(100vh-3.75rem)]"
+				"sticky flex w-80 shrink-0 flex-col self-start",
+				stickyTop === "viewport" ? "top-0 max-h-svh" : "top-11 max-h-[calc(100vh-3.75rem)]"
 			]}
 		>
 			<div
@@ -61,9 +62,14 @@
 					stickyTop === "viewport" ? "top-0" : "top-11"
 				]}
 			>
-				<Button icon={PanelLeftClose} onclick={() => (treeOpen = false)} />
+				<Button
+					icon={PanelLeftClose}
+					title="Collapse file tree"
+					onclick={() => (treeOpen = false)}
+					variant="ghost"
+				/>
 			</div>
-			<div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small">
+			<div class="min-h-0 flex-1 scrollbar-gutter-stable overflow-y-auto">
 				{#if diff}
 					<DiffFileTree files={diff.files} />
 				{:else if loading}
@@ -74,6 +80,7 @@
 				{/if}
 			</div>
 		</aside>
+		<Separator orientation="vertical" />
 	{/if}
 	<!-- diffs -->
 	<div class="min-w-0 flex-1">
@@ -83,9 +90,14 @@
 				stickyTop === "viewport" ? "top-0" : "top-11"
 			]}
 		>
-			<div class="flex items-center gap-3">
+			<div class="{treeOpen ? 'pl-1' : ''} flex items-center gap-3">
 				{#if !treeOpen}
-					<Button icon={ListTree} onclick={() => (treeOpen = true)} />
+					<Button
+						title="Expand file tree"
+						icon={ListTree}
+						onclick={() => (treeOpen = true)}
+						variant="ghost"
+					/>
 				{/if}
 				{#if diff}
 					<DiffStatPill stat={diff.stat} />
@@ -98,31 +110,40 @@
 				{/if}
 			</div>
 			<div class="flex gap-2">
+				<Button
+					icon={allOpen ? FoldVertical : UnfoldVertical}
+					title={allOpen ? "Collapse lines" : "Expand lines"}
+					onclick={() => (allOpen = !allOpen)}
+					variant="ghost">{allOpen ? "Collapse" : "Expand"}</Button
+				>
 				{#if downloadUrls}
-					<span class="inline-flex gap-2">
-						<Button
+					<Dropdown
+						variant="button"
+						buttonVariant="ghost"
+						align="right"
+						label="Download commit"
+					>
+						{#snippet trigger()}
+							<FileDown />
+							Download commit
+						{/snippet}
+						<DropdownItem
 							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
+							aria-label="As a patch file"
+							><span class="hidden sm:inline" aria-hidden="true">As a patch file</span
+							>
+						</DropdownItem>
+						<DropdownItem
 							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>
+							aria-label="As a diff file"
+							><span class="hidden sm:inline" aria-hidden="true">As a diff file</span>
+						</DropdownItem>
+					</Dropdown>
 				{/if}
-				<Button
-					icon={allOpen ? FoldVertical : UnfoldVertical}
-					title={allOpen ? "Collapse all" : "Expand all"}
-					onclick={() => (allOpen = !allOpen)}
-				/>
 				<ButtonGroup>
 					<Button
 						icon={SquareSplitVertical}
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
index 0d5d90a0e..3a2e53b14 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
@@ -79,12 +79,12 @@
 	});
 </script>
 
-<div use:observe data-diff-key={file.key} class="overflow-clip rounded-sm">
+<div use:observe data-diff-key={file.key} class="overflow-clip">
 	<DiffCardChrome id="file-{file.name}" {open} {stickyTop}>
 		{#snippet header()}
-			<span class="flex items-center gap-2 typography-paragraph-small">
+			<span class="flex items-center gap-2">
 				<span>{file.name}</span>
-				<DiffStatPill size="small" stat={{ ...file.stat, files_changed: 1 }} />
+				<DiffStatPill stat={{ ...file.stat, files_changed: 1 }} />
 			</span>
 		{/snippet}
 
diff --git a/web/src/lib/components/repo/pulls/PullDiffFiles.svelte b/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
index c1244d40b..4dfc33762 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
@@ -79,7 +79,7 @@
 	});
 </script>
 
-<div class="space-y-4">
+<div class="space-y-2 pb-2">
 	{#each diff.files as file (file.key)}
 		<PullDiffFileCard
 			{file}
-- 
2.51.2