From c102e0930db12dd1d96df43b3637c5d2203e5a41 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 23:52:38 +0200
Subject: [PATCH] web: draw the language dots with ColorBall

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoCardContent.svelte | 10 +++++-----
 web/src/lib/components/search/FileMatch.svelte     | 13 +++++--------
 web/src/lib/components/search/SearchSidebar.svelte |  5 +----
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
index 8dd7ba45d..cf054c2cb 100644
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -66,14 +66,14 @@
 
 	{#if repo.language !== undefined || stats.length > 0}
 		<div
-			class="mt-auto flex flex-wrap items-center gap-4 pt-2 typography-monospace-small font-mono text-foreground-muted"
+			class="mt-auto flex flex-wrap items-center gap-4 pt-2 typography-monospace-small text-foreground-muted"
 		>
 			{#if repo.language}
 				<span class="flex items-center gap-2">
-					<span
-						class="inline-block size-2.5 shrink-0 rounded-full"
-						style="background-color: var(--color-background-success-emphasis);"
-					></span>
+					<ColorBall
+						color={LANGUAGE_COLORS[repo.language] ?? LANGUAGE_COLOR_FALLBACK}
+						class="size-2.5"
+					/>
 					<span>{repo.language}</span>
 				</span>
 			{/if}
diff --git a/web/src/lib/components/search/FileMatch.svelte b/web/src/lib/components/search/FileMatch.svelte
index 5089bd114..b0e17bcee 100644
--- a/web/src/lib/components/search/FileMatch.svelte
+++ b/web/src/lib/components/search/FileMatch.svelte
@@ -30,9 +30,6 @@
 	const visible = $derived(chunks.slice(0, VISIBLE_CHUNKS));
 	const hidden = $derived(chunks.slice(VISIBLE_CHUNKS));
 	const hiddenMatches = $derived(matchCount(hidden));
-	const dotColor = $derived(
-		result.language ? (LANGUAGE_COLORS[result.language] ?? LANGUAGE_COLOR_FALLBACK) : undefined
-	);
 </script>
 
 {#snippet gap()}
@@ -71,16 +68,16 @@
 		<div class="flex min-w-0 items-center gap-2">
 			<File class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 			<!-- prettier-ignore -->
-			<a href={fileHref} class="min-w-0 truncate font-mono no-underline hover:underline"
+			<a href={fileHref} class="min-w-0 truncate typography-monospace-regular no-underline hover:underline"
 				>{@render spans(pathSpans)}</a
 			>
 		</div>
 		{#if result.language}
 			<div class="flex shrink-0 items-center gap-2 text-foreground-muted">
-				<span
-					class="inline-block size-2.5 shrink-0 rounded-full"
-					style={`background-color: ${dotColor}`}
-				></span>
+				<ColorBall
+					color={LANGUAGE_COLORS[result.language] ?? LANGUAGE_COLOR_FALLBACK}
+					class="size-2.5"
+				/>
 				<span>{result.language}</span>
 			</div>
 		{/if}
diff --git a/web/src/lib/components/search/SearchSidebar.svelte b/web/src/lib/components/search/SearchSidebar.svelte
index 3792b8da3..eddcf05e7 100644
--- a/web/src/lib/components/search/SearchSidebar.svelte
+++ b/web/src/lib/components/search/SearchSidebar.svelte
@@ -50,10 +50,7 @@
 						onclick={() => addLang(lang)}
 						class="flex w-fit shrink-0 items-center gap-2 rounded-sm border border-border-default bg-background-default px-2 py-1 text-sm text-foreground-default transition-colors hover:bg-background-subtle"
 					>
-						<span
-							class="inline-block size-2.5 shrink-0 rounded-full"
-							style={`background-color: ${langColor(lang)}`}
-						></span>
+						<ColorBall color={langColor(lang)} class="size-2.5" />
 						<span>{lang}</span>
 					</button>
 				{/each}
-- 
2.54.0