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>
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
// ST-1105: Zustand store voor het Claude vraag-antwoord-kanaal (M11).
|
|
//
|
|
// Houdt de huidige set van **open** vragen voor de ingelogde gebruiker bij —
|
|
// gevoed door:
|
|
// - Initial-state-event van /api/realtime/notifications (init)
|
|
// - Realtime SSE-events op scrum4me_changes (upsert/remove)
|
|
// - Server Action answerQuestion (optimistic remove via removeOptimistic)
|
|
//
|
|
// Eenvoudiger dan solo-store: geen drag-and-drop, geen view-transitions, geen
|
|
// pending-ops om optimistic-echo te onderdrukken — antwoorden zijn discrete
|
|
// acties en de stream kan met dubbele update-events leven.
|
|
|
|
import { create } from 'zustand'
|
|
|
|
export interface NotificationQuestion {
|
|
id: string
|
|
product_id: string
|
|
story_id: string
|
|
task_id: string | null
|
|
story_code: string | null
|
|
story_title: string
|
|
assignee_id: string | null
|
|
question: string
|
|
options: string[] | null
|
|
created_at: string
|
|
expires_at: string
|
|
}
|
|
|
|
interface NotificationsState {
|
|
questions: NotificationQuestion[]
|
|
init: (qs: NotificationQuestion[]) => void
|
|
upsert: (q: NotificationQuestion) => void
|
|
remove: (id: string) => void
|
|
openCount: () => number
|
|
forYouCount: (userId: string | null) => number
|
|
}
|
|
|
|
export const useNotificationsStore = create<NotificationsState>((set, get) => ({
|
|
questions: [],
|
|
|
|
init: (qs) => set({ questions: qs }),
|
|
|
|
upsert: (q) =>
|
|
set((state) => {
|
|
const idx = state.questions.findIndex((x) => x.id === q.id)
|
|
if (idx === -1) return { questions: [q, ...state.questions] }
|
|
const next = state.questions.slice()
|
|
next[idx] = q
|
|
return { questions: next }
|
|
}),
|
|
|
|
remove: (id) =>
|
|
set((state) => ({ questions: state.questions.filter((q) => q.id !== id) })),
|
|
|
|
openCount: () => get().questions.length,
|
|
|
|
forYouCount: (userId) => {
|
|
if (!userId) return 0
|
|
return get().questions.filter((q) => q.assignee_id === userId).length
|
|
},
|
|
}))
|