Madhura68
3243282bfd
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>
54 lines
2 KiB
TypeScript
54 lines
2 KiB
TypeScript
'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>
|
|
}
|
|
/>
|
|
)
|
|
}
|