From 2ffaeffd102ff49ff4254da5abf64255b505d5eb Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 10 Sep 2026 09:02:12 +0100
Subject: [PATCH] web/lib: more diffview improvements

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/DiffView.svelte | 15 ++++++---
 web/src/lib/components/repo/pierreDiff.css  | 37 ++++++++++++++++-----
 web/src/pierre.css                          |  6 ++++
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index c8d13f6c0..8bcc42307 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -165,12 +165,13 @@
 						: 'flex'} min-h-0 w-full shrink-0 flex-col sm:w-(--tree-width)"
 					style:--tree-width="{treeWidth}px"
 				>
-					<div class="flex min-h-14 items-center bg-background-default py-2">
+					<div class="flex min-h-12 items-center bg-background-default py-2">
 						<Button
 							icon={PanelLeftClose}
 							title="Collapse file tree"
 							onclick={() => (treeToggled = false)}
 							variant="ghost"
+							size="small"
 						/>
 					</div>
 					<div
@@ -208,7 +209,7 @@
 			     headers dock under. the button labels drop out below the width
 			     where the full toolbar still fits on that one line -->
 				<div
-					class="@container/toolbar flex min-h-14 flex-nowrap items-center justify-between gap-2 bg-background-default py-2"
+					class="@container/toolbar flex min-h-12 flex-nowrap items-center justify-between gap-2 bg-background-default py-2"
 				>
 					<div class="{treeToggled === false ? '' : 'sm:pl-1'} flex items-center gap-3">
 						{#if treeToggled !== true}
@@ -217,12 +218,13 @@
 								icon={ListTree}
 								onclick={() => (treeToggled = true)}
 								variant="ghost"
+								size="small"
 								class={treeToggled === false ? undefined : "sm:hidden"}
 							/>
 						{/if}
 						{#if diff}
-							<DiffStatPill stat={diff.stat} />
-							<span class="text-foreground-muted">
+							<DiffStatPill stat={diff.stat} size="small" />
+							<span class="typography-paragraph-small text-foreground-muted">
 								{diff.files.length} changed {diff.files.length === 1
 									? "file"
 									: "files"}
@@ -235,6 +237,7 @@
 							title={allOpen ? "Collapse lines" : "Expand lines"}
 							onclick={() => setAllOpen(!allOpen)}
 							variant="ghost"
+							size="small"
 						>
 							<span class="hidden @min-[42rem]/toolbar:inline"
 								>{allOpen ? "Collapse" : "Expand"}</span
@@ -244,12 +247,13 @@
 							<Dropdown
 								variant="button"
 								buttonVariant="ghost"
+								size="small"
 								align="right"
 								label="Download commit"
 								title="Download commit"
 							>
 								{#snippet trigger()}
-									<FileDown />
+									<FileDown class="size-4" aria-hidden="true" />
 									<span class="hidden @min-[42rem]/toolbar:inline"
 										>Download commit</span
 									>
@@ -277,6 +281,7 @@
 									data-sveltekit-replacestate
 									data-sveltekit-noscroll
 									onclick={styleHref ? undefined : () => (localStyle = style)}
+									size="small"
 									{...segmentProps(diffStyle === style)}
 								>
 									<span class="hidden @min-[42rem]/toolbar:inline"
diff --git a/web/src/lib/components/repo/pierreDiff.css b/web/src/lib/components/repo/pierreDiff.css
index 68a4b7525..d6dd285d9 100644
--- a/web/src/lib/components/repo/pierreDiff.css
+++ b/web/src/lib/components/repo/pierreDiff.css
@@ -13,24 +13,45 @@
 	--mix-light: 0%;
 }
 
+[data-gutter],
+[data-column-number],
+[data-gutter-buffer] {
+	background-color: var(--diffs-bg-gutter);
+	background-image: linear-gradient(
+		var(--diffs-bg-gutter-wash),
+		var(--diffs-bg-gutter-wash)
+	);
+}
+
 [data-line-type="change-addition"][data-column-number]::before,
 [data-line-type="change-deletion"][data-column-number]::before {
 	width: 2px;
 }
 
+[data-line-type="change-addition"][data-column-number],
+[data-line-type="change-deletion"][data-column-number] {
+	--diffs-bg-number-wash: 60%;
+	--mix-light: 0%;
+	--mix-dark: 0%;
+	--diffs-diff-line-mix-target: var(--diffs-bg);
+	background-image:
+		linear-gradient(var(--diffs-bg-number-tint), var(--diffs-bg-number-tint)),
+		linear-gradient(var(--diffs-bg-gutter-wash), var(--diffs-bg-gutter-wash));
+}
+
 [data-line-type="change-addition"][data-column-number] {
-	--diffs-bg-addition-number-override: var(--diffs-bg-addition-override);
-	background-image: linear-gradient(
-		var(--diffs-bg-addition-emphasis),
-		var(--diffs-bg-addition-emphasis)
+	--diffs-bg-number-tint: color-mix(
+		in srgb,
+		var(--diffs-bg-addition-override) var(--diffs-bg-number-wash),
+		transparent
 	);
 }
 
 [data-line-type="change-deletion"][data-column-number] {
-	--diffs-bg-deletion-number-override: var(--diffs-bg-deletion-override);
-	background-image: linear-gradient(
-		var(--diffs-bg-deletion-emphasis),
-		var(--diffs-bg-deletion-emphasis)
+	--diffs-bg-number-tint: color-mix(
+		in srgb,
+		var(--diffs-bg-deletion-override) var(--diffs-bg-number-wash),
+		transparent
 	);
 }
 
diff --git a/web/src/pierre.css b/web/src/pierre.css
index 2c69b58b9..634d835ae 100644
--- a/web/src/pierre.css
+++ b/web/src/pierre.css
@@ -15,6 +15,9 @@
 	--diffs-bg-separator-override: var(--color-background-inset);
 	--diffs-fg-number-override: var(--color-foreground-placeholder);
 
+	--diffs-bg-gutter: var(--color-background-subtle);
+	--diffs-bg-gutter-wash: transparent;
+
 	--diffs-bg-addition-override: var(--color-background-success-subtle);
 	--diffs-bg-deletion-override: var(--color-background-danger-subtle);
 	--diffs-addition-color-override: var(--color-foreground-success);
@@ -70,6 +73,9 @@
 	@variant dark {
 		--diffs-fg-number-override: var(--color-foreground-subtle);
 
+		--diffs-bg-gutter: var(--color-background-default);
+		--diffs-bg-gutter-wash: var(--color-alpha-dark-5);
+
 		/* catppuccin mocha text (background stays on the app token) */
 		--diffs-foreground: #cdd6f4;
 
-- 
knotmirror 0.0.1