From 27a98274c1feeaaccd74147e9cd8d525916879b5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 13 Dec 2025 18:06:56 -0800
Subject: [PATCH] add NotificationBadge component

reusable red dot/count badge for notifications
---
 .../components/ui/NotificationBadge.svelte    | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/lib/components/ui/NotificationBadge.svelte

diff --git a/src/lib/components/ui/NotificationBadge.svelte b/src/lib/components/ui/NotificationBadge.svelte
new file mode 100644
index 00000000..7fa89589
--- /dev/null
+++ b/src/lib/components/ui/NotificationBadge.svelte
@@ -0,0 +1,60 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	interface Props {
+		/** Number of notifications */
+		count?: number
+		/** Whether to show the count number */
+		showCount?: boolean
+		/** Size variant */
+		size?: 'small' | 'medium'
+	}
+
+	let { count = 0, showCount = false, size = 'small' }: Props = $props()
+</script>
+
+{#if count > 0}
+	<span class="notification-badge" class:medium={size === 'medium'} class:has-count={showCount}>
+		{#if showCount}
+			{count > 99 ? '99+' : count}
+		{/if}
+	</span>
+{/if}
+
+<style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+	@use '$src/themes/colors' as colors;
+
+	.notification-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: colors.$fire-text-20;
+		flex-shrink: 0;
+
+		&.medium {
+			min-width: 10px;
+			height: 10px;
+		}
+
+		&.has-count {
+			min-width: 16px;
+			height: 16px;
+			padding: 0 4px;
+			border-radius: 8px;
+			font-size: 10px;
+			font-weight: typography.$medium;
+			color: white;
+
+			&.medium {
+				min-width: 18px;
+				height: 18px;
+				font-size: 11px;
+			}
+		}
+	}
+</style>