add Badge component

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}>

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>
+  )
+}