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>
62 lines
2 KiB
TypeScript
62 lines
2 KiB
TypeScript
// ST-1105: Mount-component voor de notifications-realtime hook (M11).
|
|
//
|
|
// Server Component dat de initial open-questions fetch't met
|
|
// productAccessFilter en doorgeeft aan een minimal client-island; client opent
|
|
// daarna de SSE-stream voor live updates.
|
|
|
|
import { prisma } from '@/lib/prisma'
|
|
import { productAccessFilter } from '@/lib/product-access'
|
|
import { NotificationsRealtimeMount } from './notifications-realtime-mount'
|
|
import type { NotificationQuestion } from '@/stores/notifications-store'
|
|
|
|
interface NotificationsBridgeProps {
|
|
userId: string
|
|
}
|
|
|
|
export async function NotificationsBridge({ userId }: NotificationsBridgeProps) {
|
|
const products = await prisma.product.findMany({
|
|
where: { archived: false, ...productAccessFilter(userId) },
|
|
select: { id: true },
|
|
})
|
|
const productIds = products.map((p) => p.id)
|
|
|
|
const openQuestions =
|
|
productIds.length === 0
|
|
? []
|
|
: await prisma.claudeQuestion.findMany({
|
|
where: {
|
|
status: 'open',
|
|
expires_at: { gt: new Date() },
|
|
product_id: { in: productIds },
|
|
},
|
|
orderBy: { created_at: 'desc' },
|
|
take: 100,
|
|
select: {
|
|
id: true,
|
|
product_id: true,
|
|
story_id: true,
|
|
task_id: true,
|
|
question: true,
|
|
options: true,
|
|
created_at: true,
|
|
expires_at: true,
|
|
story: { select: { code: true, title: true, assignee_id: true } },
|
|
},
|
|
})
|
|
|
|
const initial: NotificationQuestion[] = openQuestions.map((q) => ({
|
|
id: q.id,
|
|
product_id: q.product_id,
|
|
story_id: q.story_id,
|
|
task_id: q.task_id,
|
|
story_code: q.story.code,
|
|
story_title: q.story.title,
|
|
assignee_id: q.story.assignee_id,
|
|
question: q.question,
|
|
options: Array.isArray(q.options) ? (q.options as string[]) : null,
|
|
created_at: q.created_at.toISOString(),
|
|
expires_at: q.expires_at.toISOString(),
|
|
}))
|
|
|
|
return <NotificationsRealtimeMount initial={initial} />
|
|
}
|