From 87cbcd8d586ef5d9a79350761956b10da2dab907 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 5 Dec 2024 11:33:12 +0000
Subject: [PATCH] use a badge as visual-cue for sources count

---
 app/src/lib/components/ManageAudioSourceDrawer.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index f6bf7d3..91a2ef5 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -76,7 +76,7 @@
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
-	<Drawer.Trigger>
+	<Drawer.Trigger class="relative">
 		<Button
 			variant="ghost"
 			on:click
@@ -84,6 +84,14 @@
 		>
 			Manage Sources
 		</Button>
+
+		{#if numSources || aiSource}
+			<div
+				class="p-2 absolute flex items-center justify-center bg-emerald-800 text-emerald-200 text-xs translate-x-3 -translate-y-3 top-0 right-0 rounded-full w-6 h-6"
+			>
+				{(numSources || 0) + (aiSource ? 1 : 0)}
+			</div>
+		{/if}
 	</Drawer.Trigger>
 
 	<Drawer.Overlay class="bg-black/40" />