use a badge as visual-cue for sources count

nwaughachukwuma · Dec 5, 2024 · 87cbcd8 · 87cbcd8
1 parent 5ff639e
commit 87cbcd8
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -76,14 +76,22 @@
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
-	<Drawer.Trigger>
+	<Drawer.Trigger class="relative">
 		<Button
 			variant="ghost"
 			on:click
 			class="bg-gray-800 text-base py-6 w-full hover:bg-gray-700 text-white"
 		>
 			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" />