From 1fa88d35111fdb42e0f829c4031bd714e97d049a Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 9 Sep 2026 18:33:50 +0100
Subject: [PATCH] web/repo: extract the commit body toggle into a component

uniform stylin

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../components/repo/CommitBodyToggle.svelte   | 21 +++++++++++++++++++
 web/src/lib/components/repo/CommitList.svelte | 13 ++++--------
 .../repo/pulls/PullCommitRow.svelte           | 12 ++---------
 3 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 web/src/lib/components/repo/CommitBodyToggle.svelte

diff --git a/web/src/lib/components/repo/CommitBodyToggle.svelte b/web/src/lib/components/repo/CommitBodyToggle.svelte
new file mode 100644
index 000000000..96a774130
--- /dev/null
+++ b/web/src/lib/components/repo/CommitBodyToggle.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Ellipsis from "$icon/ellipsis";
+
+	interface Props {
+		expanded: boolean;
+		onclick: () => void;
+		class?: string;
+	}
+
+	let { expanded, onclick, class: className }: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="{className} shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 text-foreground-default hover:bg-background-muted"
+	aria-expanded={expanded}
+	aria-label="Toggle commit body"
+	{onclick}
+>
+	<Ellipsis class="size-3" aria-hidden="true" />
+</button>
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index e894c46b6..e045bdf38 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import Ellipsis from "$icon/ellipsis";
+	import CommitBodyToggle from "$lib/components/repo/CommitBodyToggle.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
@@ -35,15 +35,10 @@
 					{commit.subject}
 				</a>
 				{#if commit.body}
-					<button
-						type="button"
-						class="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"
+					<CommitBodyToggle
+						expanded={expanded[commit.hash] === true}
 						onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
-					>
-						<Ellipsis class="size-3" aria-hidden="true" />
-					</button>
+					/>
 				{/if}
 			</span>
 
diff --git a/web/src/lib/components/repo/pulls/PullCommitRow.svelte b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
index 475359a03..32bb10ea6 100644
--- a/web/src/lib/components/repo/pulls/PullCommitRow.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Ellipsis from "$icon/ellipsis";
+	import CommitBodyToggle from "$lib/components/repo/CommitBodyToggle.svelte";
 	import MessageSquare from "$icon/message-square";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
 	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
@@ -63,15 +63,7 @@
 				<Link {onclick} class="truncate">{commit.subject}</Link>
 			</div>
 			{#if commit.body}
-				<button
-					type="button"
-					class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
-					aria-expanded={expanded}
-					aria-label="Toggle commit body"
-					onclick={() => (expanded = !expanded)}
-				>
-					<Ellipsis class="size-3" aria-hidden="true" />
-				</button>
+				<CommitBodyToggle {expanded} onclick={() => (expanded = !expanded)} />
 			{/if}
 		</div>
 
-- 
2.51.2