From cb8adac08f0387b3527bf393862b46cbec6cb02a Mon Sep 17 00:00:00 2001
From: bluemoehre <bluemoehre@gmx.de>
Date: Wed, 1 Jul 2026 00:17:54 +0200
Subject: [PATCH] add Badge component

---
 src/components/AppBar.tsx |  9 +++++++--
 src/components/Badge.tsx  | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Badge.tsx

diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
index ee0af5c..4e8ecd7 100644
--- a/src/components/AppBar.tsx
+++ b/src/components/AppBar.tsx
@@ -1,5 +1,6 @@
 import { BellRingIcon, ListChecksIcon, SettingsIcon } from 'lucide-react'
 
+import { Badge } from '@/components/Badge'
 import { Button } from '@/components/ui/button'
 
 interface AppBarProps {
@@ -15,11 +16,15 @@ export function AppBar({ onSettingsClick, onJobsClick, onNotificationsClick }: A
         <span className="text-lg font-bold tracking-tight">MAIA.2</span>
         <div className="flex items-center gap-1">
           <Button variant="ghost" size="icon" onClick={onNotificationsClick}>
-            <BellRingIcon />
+            <Badge>
+              <BellRingIcon />
+            </Badge>
             <span className="sr-only">Notifications</span>
           </Button>
           <Button variant="ghost" size="icon" onClick={onJobsClick}>
-            <ListChecksIcon />
+            <Badge count={3} show>
+              <ListChecksIcon />
+            </Badge>
             <span className="sr-only">Running Jobs</span>
           </Button>
           <Button variant="ghost" size="icon" onClick={onSettingsClick}>
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..29196bd
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils'
+
+interface BadgeProps {
+  children: React.ReactNode
+  show?: boolean
+  count?: number
+  className?: string
+}
+
+export function Badge({ children, show = false, count, className }: BadgeProps) {
+  return (
+    <span className={cn('relative inline-flex', className)}>
+      {children}
+      {show &&
+        (count != null ? (
+          <span className="absolute -top-1 -right-1.5 flex h-2.5 min-w-2.5 items-center justify-center rounded-full bg-destructive px-0.5 text-[7px] font-medium text-destructive-foreground">
+            {count > 99 ? '99+' : count}
+          </span>
+        ) : (
+          <span className="absolute -top-1 -right-1.5 h-2.5 w-2.5 rounded-full bg-destructive" />
+        ))}
+    </span>
+  )
+}