feat(ST-1105): add NavBar bell + sheet + answer-modal + Zustand store + SSE hook

UI-volledig voor de Claude vraag-antwoord-flow (M11). Bel-icon links van avatar
in NavBar; klik opent slide-over rechts met openstaande vragen; klik op een vraag
opent een modal voor antwoord. Story-assignee = current user krijgt visuele
"voor jou"-emphase met primary-container accent en error-color badge-ring.

Bestanden:
- stores/notifications-store.ts — Zustand store met init/upsert/remove +
  openCount/forYouCount selectors (vereenvoudigd vs solo-store: geen pendingOps,
  geen optimistic-echo-onderdrukking)
- lib/realtime/use-notifications-realtime.ts — EventSource hook met state-
  event en message-event handling, exponential-backoff reconnect, Page
  Visibility pause-resume
- components/notifications/notifications-bridge.tsx — Server Component die
  initial open-questions fetcht via productAccessFilter
- components/notifications/notifications-realtime-mount.tsx — tiny client
  island dat de store hydrateert + de hook activeert
- components/notifications/notifications-sheet.tsx — shadcn Sheet met item-
  lijst, "voor jou"-accent voor assignee-vragen, lege staat
- components/notifications/answer-modal.tsx — Dialog met options-radio of
  free-text Textarea (max 4000), char-counter, demo-blok via Tooltip; bij
  succes optimistisch remove + sheet blijft open zodat meerdere vragen
  achter elkaar te beantwoorden zijn
- components/shared/notifications-bell.tsx — Bell-icon met badge (count >9 → "9+"),
  ring-accent als forYouCount > 0, ARIA-label voor screenreaders

Wiring:
- components/shared/nav-bar.tsx — <NotificationsBell /> rechts naast <UserMenu>
- app/(app)/layout.tsx — <NotificationsBridge /> naast <SoloRealtimeBridge />,
  user.id (server-side) als prop

base-ui-aanpassingen: SheetTrigger/TooltipTrigger gebruiken render-prop ipv
asChild (geen Radix).

Quality gates: lint 0 errors, tsc clean, vitest 146/146, npm run build groen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/shared/nav-bar.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { AppIcon } from '@/components/shared/app-icon'
 import { UserMenu } from '@/components/shared/user-menu'
+import { NotificationsBell } from '@/components/shared/notifications-bell'
 import { cn } from '@/lib/utils'
 import { setActiveProductAction } from '@/actions/active-product'
 
@@ -179,8 +180,9 @@ export function NavBar({
         )}
       </div>
 
-      {/* Rechts: account-menu */}
+      {/* Rechts: notifications + account-menu */}
       <div className="flex items-center gap-2 flex-1 justify-end">
+        <NotificationsBell currentUserId={userId} isDemo={isDemo} />
         <UserMenu userId={userId} username={username} email={email} roles={roles} />
       </div>
     </header>

components/shared/notifications-bell.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+// ST-1105: Bell-icon in de NavBar met badge van het aantal open Claude-vragen
+// voor de ingelogde gebruiker (M11).
+//
+// Klik opent <NotificationsSheet />. Story-assignee-vragen ("voor jou") worden
+// gemarkeerd met een ring-accent op het badge zodat ook bij gelijke totaal-
+// count de prioriteit zichtbaar is.
+
+import { Bell } from 'lucide-react'
+import { useNotificationsStore } from '@/stores/notifications-store'
+import { NotificationsSheet } from '@/components/notifications/notifications-sheet'
+import { cn } from '@/lib/utils'
+
+interface NotificationsBellProps {
+  currentUserId: string
+  isDemo: boolean
+}
+
+export function NotificationsBell({ currentUserId, isDemo }: NotificationsBellProps) {
+  const total = useNotificationsStore((s) => s.questions.length)
+  const forYou = useNotificationsStore((s) =>
+    s.questions.filter((q) => q.assignee_id === currentUserId).length,
+  )
+
+  return (
+    <NotificationsSheet
+      currentUserId={currentUserId}
+      isDemo={isDemo}
+      trigger={
+        <button
+          type="button"
+          aria-label={`Notificaties — ${total} open vragen${forYou > 0 ? `, ${forYou} voor jou` : ''}`}
+          className="relative inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
+          <Bell className="h-5 w-5 text-foreground" />
+          {total > 0 && (
+            <span
+              role="status"
+              className={cn(
+                'absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none',
+                forYou > 0
+                  ? 'bg-error text-error-foreground ring-2 ring-background'
+                  : 'bg-primary text-primary-foreground',
+              )}
+            >
+              {total > 9 ? '9+' : total}
+            </span>
+          )}
+        </button>
+      }
+    />
+  )
+}