From da2bf322a79283eceae71ca9e37c99ddc86a2b15 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Sat, 1 Aug 2026 07:05:00 +0100
Subject: [PATCH] web/components: minor fixups

- inset breadcrums
- uniform height for BlobHeader and TreeHeader
- also use catpuccin syntax hl

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/BlobHeader.svelte |  4 +-
 web/src/lib/components/repo/BlobView.svelte   |  2 +-
 web/src/lib/components/repo/CommitList.svelte |  2 +-
 .../lib/components/repo/DiffFileList.svelte   |  4 +-
 web/src/lib/components/repo/DiffTopbar.svelte | 10 ++---
 web/src/lib/components/repo/RefChip.svelte    |  2 +-
 web/src/lib/components/repo/RepoCrumbs.svelte |  2 +-
 web/src/lib/components/repo/TreeHeader.svelte |  2 +-
 web/src/lib/components/repo/pierre.ts         | 26 +++++------
 web/src/pierre.css                            | 45 +++++++++++++------
 .../[repo]/tree/[ref]/[...path]/+page.svelte  |  2 +-
 11 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 6470291dd..9066f06cc 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -58,7 +58,7 @@
 	};
 </script>
 
-<div class="mb-3 flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular">
+<div class="flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular mb-2">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
@@ -82,7 +82,7 @@
 		<RefChip {ownerHandle} {repoName} {ref} />
 		{#if language && languageColor}
 			<div
-				class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-inset p-2 whitespace-nowrap"
+				class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap"
 			>
 				<div
 					class="size-2 rounded-full"
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index 9a7420bdd..04b9c9503 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -94,7 +94,7 @@
 	const showWrap = $derived(textViewActive && (overflows || wrap));
 </script>
 
-<TabPanel class="relative mx-auto mt-[1px] w-full">
+<TabPanel padded={false} class="relative mx-auto w-full p-4">
 	<BlobHeader
 		{ownerHandle}
 		{repoName}
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index bad6aae79..9c308ea91 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -32,7 +32,7 @@
 				{#if commit.body}
 					<button
 						type="button"
-						class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
+						class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
 						aria-expanded={expanded[commit.hash] === true}
 						aria-label="Toggle commit body"
 						onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
diff --git a/web/src/lib/components/repo/DiffFileList.svelte b/web/src/lib/components/repo/DiffFileList.svelte
index 791fe6bdc..faef388b9 100644
--- a/web/src/lib/components/repo/DiffFileList.svelte
+++ b/web/src/lib/components/repo/DiffFileList.svelte
@@ -56,7 +56,7 @@
 	{#each list as node (`${node.type}:${node.name}`)}
 		{#if node.type === "dir"}
 			<details open class="group">
-				<summary class="cursor-pointer list-none pt-1">
+				<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" />
@@ -68,7 +68,7 @@
 				</div>
 			</details>
 		{:else}
-			<div class="flex items-center gap-2 pt-1">
+			<div class="flex items-center gap-2">
 				<File class="size-4 shrink-0" />
 				<a
 					href="#file-{node.path}"
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index b85ea875b..4e51a478c 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -45,7 +45,7 @@
 </script>
 
 <div
-	class="sticky top-[env(safe-area-inset-top)] z-10 flex h-12 items-center gap-2 bg-background-canvas p-2"
+	class="sticky top-[env(safe-area-inset-top)] z-10 flex h-12 items-center gap-2 bg-background-canvas py-2"
 >
 	{#if onToggleFiles}
 		<Button
@@ -97,8 +97,8 @@
 			data-sveltekit-replacestate
 			data-sveltekit-noscroll
 			size="sm"
-			variant={diffStyle === "split" ? "default" : "primary"}
-			icon={SquareSplitHorizontal}
+			variant={diffStyle === "split" ? "ghost" : "default"}
+			icon={SquareSplitVertical}
 			aria-label="Unified diff"
 			title="Unified diff"
 		/>
@@ -107,8 +107,8 @@
 			data-sveltekit-replacestate
 			data-sveltekit-noscroll
 			size="sm"
-			variant={diffStyle === "split" ? "primary" : "default"}
-			icon={SquareSplitVertical}
+			variant={diffStyle === "split" ? "default" : "ghost"}
+			icon={SquareSplitHorizontal}
 			aria-label="Split diff"
 			title="Split diff"
 		/>
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
index 9b649ddb4..68e71e343 100644
--- a/web/src/lib/components/repo/RefChip.svelte
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div
-	class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap {className}"
+	class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap {className}"
 >
 	<span class="text-foreground-muted">at</span>
 	<a href={treeHref} class="text-foreground-default no-underline hover:underline">{ref}</a>
diff --git a/web/src/lib/components/repo/RepoCrumbs.svelte b/web/src/lib/components/repo/RepoCrumbs.svelte
index cfb2d3ff2..85be7010c 100644
--- a/web/src/lib/components/repo/RepoCrumbs.svelte
+++ b/web/src/lib/components/repo/RepoCrumbs.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div
-	class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
+	class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-canvas px-3 py-1 whitespace-nowrap"
 >
 	{#each crumbs as crumb (crumb.href)}
 		{#if crumb.last}
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index 63d9293fc..60c842764 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -20,7 +20,7 @@
 	const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
 </script>
 
-<div class="mb-3 flex items-center justify-between gap-2 text-sm">
+<div class="flex items-center justify-between gap-2 typography-paragraph-regular mb-2">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
diff --git a/web/src/lib/components/repo/pierre.ts b/web/src/lib/components/repo/pierre.ts
index fb428b77d..61dba50f9 100644
--- a/web/src/lib/components/repo/pierre.ts
+++ b/web/src/lib/components/repo/pierre.ts
@@ -22,19 +22,19 @@ registerCustomCSSVariableTheme(PIERRE_THEME_NAME, {
 	// pierre.css defines the real tokens on diffs-container, these are just
 	// fallbacks for the generated bindings
 	background: "#ffffff",
-	foreground: "#111827",
-	"token-comment": "#6b7280",
-	"token-string": "#16a34a",
-	"token-string-expression": "#16a34a",
-	"token-keyword": "#c084fc",
-	"token-function": "#60a5fa",
-	"token-constant": "#f59e0b",
-	"token-parameter": "#111827",
-	"token-punctuation": "#4b5563",
-	"token-link": "#4338ca",
-	"token-inserted": "#16a34a",
-	"token-deleted": "#dc2626",
-	"token-changed": "#d97706"
+	foreground: "#4c4f69",
+	"token-comment": "#7c7f93",
+	"token-string": "#40a02b",
+	"token-string-expression": "#40a02b",
+	"token-keyword": "#8839ef",
+	"token-function": "#1e66f5",
+	"token-constant": "#fe640b",
+	"token-parameter": "#e64553",
+	"token-punctuation": "#7c7f93",
+	"token-link": "#1e66f5",
+	"token-inserted": "#40a02b",
+	"token-deleted": "#d20f39",
+	"token-changed": "#df8e1d"
 });
 
 // pierre skips highlighting lines past 1e3 chars by default.
diff --git a/web/src/pierre.css b/web/src/pierre.css
index 971b561c6..6441a7d8d 100644
--- a/web/src/pierre.css
+++ b/web/src/pierre.css
@@ -12,7 +12,7 @@ diffs-container.diffs-container {
 	   forces color-scheme: dark. without them the bg chain goes
 	   guaranteed-invalid and light-dark() is stuck on the dark branch */
 	--diffs-background: var(--color-background-default);
-	--diffs-foreground: var(--color-foreground-default);
+	--diffs-foreground: #4c4f69;
 	color-scheme: light dark;
 	--diffs-light-bg: var(--color-background-default);
 	--diffs-dark-bg: var(--color-background-default);
@@ -27,19 +27,19 @@ diffs-container.diffs-container {
 	--diffs-addition-color-override: var(--color-foreground-success-strong);
 	--diffs-deletion-color-override: var(--color-foreground-danger-strong);
 
-	/* syntax palette for the "tangled" theme registered in pierre.ts */
-	--diffs-token-comment: var(--color-foreground-placeholder);
-	--diffs-token-string: var(--color-foreground-success);
-	--diffs-token-string-expression: var(--color-foreground-success);
-	--diffs-token-keyword: #c084fc;
-	--diffs-token-function: #60a5fa;
-	--diffs-token-constant: #f59e0b;
-	--diffs-token-parameter: var(--color-foreground-default);
-	--diffs-token-punctuation: var(--color-foreground-muted);
-	--diffs-token-link: var(--color-foreground-info);
-	--diffs-token-inserted: var(--color-foreground-success);
-	--diffs-token-deleted: var(--color-foreground-danger);
-	--diffs-token-changed: var(--color-foreground-warning);
+	/* syntax palette — catppuccin latte */
+	--diffs-token-comment: #7c7f93; /* overlay2 */
+	--diffs-token-string: #40a02b; /* green */
+	--diffs-token-string-expression: #40a02b; /* green */
+	--diffs-token-keyword: #8839ef; /* mauve */
+	--diffs-token-function: #1e66f5; /* blue */
+	--diffs-token-constant: #fe640b; /* peach */
+	--diffs-token-parameter: #e64553; /* maroon */
+	--diffs-token-punctuation: #7c7f93; /* overlay2 */
+	--diffs-token-link: #1e66f5; /* blue */
+	--diffs-token-inserted: #40a02b; /* green */
+	--diffs-token-deleted: #d20f39; /* red */
+	--diffs-token-changed: #df8e1d; /* yellow */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,5 +51,22 @@ diffs-container.diffs-container {
 		--diffs-bg-deletion-override: var(--color-background-danger-subtle);
 		--diffs-addition-color-override: var(--color-foreground-success);
 		--diffs-deletion-color-override: var(--color-foreground-danger);
+
+		/* catppuccin mocha text (background stays on the app token) */
+		--diffs-foreground: #cdd6f4;
+
+		/* syntax palette — catppuccin mocha */
+		--diffs-token-comment: #9399b2; /* overlay2 */
+		--diffs-token-string: #a6e3a1; /* green */
+		--diffs-token-string-expression: #a6e3a1; /* green */
+		--diffs-token-keyword: #cba6f7; /* mauve */
+		--diffs-token-function: #89b4fa; /* blue */
+		--diffs-token-constant: #fab387; /* peach */
+		--diffs-token-parameter: #eba0ac; /* maroon */
+		--diffs-token-punctuation: #9399b2; /* overlay2 */
+		--diffs-token-link: #89b4fa; /* blue */
+		--diffs-token-inserted: #a6e3a1; /* green */
+		--diffs-token-deleted: #f38ba8; /* red */
+		--diffs-token-changed: #f9e2af; /* yellow */
 	}
 }
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
index 11420b949..c294eb478 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
@@ -10,7 +10,7 @@
 	const repo = $derived(data.repo);
 </script>
 
-<TabPanel class="relative mx-auto w-full">
+<TabPanel padded={false} class="relative mx-auto w-full p-4">
 	<TreeHeader
 		ownerHandle={repo.ownerHandle}
 		repoName={repo.name}
-- 
2.51.2