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>
This commit is contained in:
parent
009375a131
commit
3243282bfd
9 changed files with 594 additions and 1 deletions
157
components/notifications/answer-modal.tsx
Normal file
157
components/notifications/answer-modal.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
'use client'
|
||||
|
||||
// ST-1105: Modal waar de gebruiker een Claude-vraag beantwoordt (M11).
|
||||
//
|
||||
// Free-text Textarea (max 4000) of multiple-choice via knoppen wanneer de
|
||||
// vraag `options` heeft. Submit roept answerQuestion-Server-Action aan via
|
||||
// useTransition; bij succes wordt de vraag uit de store verwijderd
|
||||
// (optimistisch) en sluit de modal. Demo-modus: textarea readOnly + submit
|
||||
// disabled met tooltip.
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { ExternalLink } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { answerQuestion } from '@/actions/questions'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
const MAX_ANSWER_CHARS = 4000
|
||||
|
||||
interface AnswerModalProps {
|
||||
question: NotificationQuestion | null
|
||||
isDemo: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
|
||||
const [answer, setAnswer] = useState('')
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
if (!question) return null
|
||||
|
||||
const charsLeft = MAX_ANSWER_CHARS - answer.length
|
||||
const tooLong = charsLeft < 0
|
||||
const submitDisabled = isDemo || pending || answer.trim().length === 0 || tooLong
|
||||
|
||||
function submit(text: string) {
|
||||
if (!question) return
|
||||
if (isDemo) {
|
||||
toast.error('Niet beschikbaar in demo-modus')
|
||||
return
|
||||
}
|
||||
startTransition(async () => {
|
||||
const res = await answerQuestion(question.id, text)
|
||||
if (!res.ok) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
// Optimistisch verwijderen — SSE-event komt anders later met dezelfde
|
||||
// remove en kost een extra render
|
||||
useNotificationsStore.getState().remove(question.id)
|
||||
toast.success('Antwoord verstuurd')
|
||||
setAnswer('')
|
||||
onClose()
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={!!question} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Beantwoord Claude</DialogTitle>
|
||||
<DialogDescription>
|
||||
<span className="font-mono">{question.story_code ?? 'story'}</span>
|
||||
{' — '}
|
||||
{question.story_title}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Link
|
||||
href={`/products/${question.product_id}/sprint`}
|
||||
className="text-primary inline-flex items-center gap-1 self-start text-xs hover:underline"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
<span>Open in Sprint</span>
|
||||
</Link>
|
||||
|
||||
<div className="bg-surface-container-low rounded-md border p-3 text-sm whitespace-pre-wrap">
|
||||
{question.question}
|
||||
</div>
|
||||
|
||||
{question.options && question.options.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-muted-foreground text-xs">Kies een van de opties:</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{question.options.map((opt) => (
|
||||
<Button
|
||||
key={opt}
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="justify-start"
|
||||
disabled={isDemo || pending}
|
||||
onClick={() => submit(opt)}
|
||||
>
|
||||
{opt}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Textarea
|
||||
value={answer}
|
||||
onChange={(e) => setAnswer(e.target.value)}
|
||||
placeholder="Typ je antwoord…"
|
||||
rows={5}
|
||||
maxLength={MAX_ANSWER_CHARS}
|
||||
readOnly={isDemo}
|
||||
aria-label="Antwoord op Claude's vraag"
|
||||
/>
|
||||
<div
|
||||
className={
|
||||
tooLong
|
||||
? 'text-error text-right text-xs'
|
||||
: 'text-muted-foreground text-right text-xs'
|
||||
}
|
||||
>
|
||||
{charsLeft} tekens over
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={onClose} disabled={pending}>
|
||||
Annuleren
|
||||
</Button>
|
||||
{(!question.options || question.options.length === 0) && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={<span className="inline-flex" />}>
|
||||
<Button
|
||||
onClick={() => submit(answer)}
|
||||
disabled={submitDisabled}
|
||||
>
|
||||
{pending ? 'Bezig…' : 'Verstuur'}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
{isDemo && (
|
||||
<TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
62
components/notifications/notifications-bridge.tsx
Normal file
62
components/notifications/notifications-bridge.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
// 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} />
|
||||
}
|
||||
23
components/notifications/notifications-realtime-mount.tsx
Normal file
23
components/notifications/notifications-realtime-mount.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// ST-1105: Tiny client island dat de notifications-store hydrateert met
|
||||
// server-side fetched initial questions en de SSE-realtime hook activeert.
|
||||
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'
|
||||
import { useNotificationsRealtime } from '@/lib/realtime/use-notifications-realtime'
|
||||
|
||||
interface Props {
|
||||
initial: NotificationQuestion[]
|
||||
}
|
||||
|
||||
export function NotificationsRealtimeMount({ initial }: Props) {
|
||||
// Hydrate de store met server-side-rendered data zodat de bell-count direct
|
||||
// klopt zonder te wachten op de SSE state-event.
|
||||
useEffect(() => {
|
||||
useNotificationsStore.getState().init(initial)
|
||||
}, [initial])
|
||||
|
||||
useNotificationsRealtime()
|
||||
return null
|
||||
}
|
||||
106
components/notifications/notifications-sheet.tsx
Normal file
106
components/notifications/notifications-sheet.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
'use client'
|
||||
|
||||
// ST-1105: Slide-over (rechts) met de lijst van openstaande Claude-vragen (M11).
|
||||
//
|
||||
// Story-assignee = currentUser krijgt een primary-container accent ("voor jou").
|
||||
// Klik op een item opent de AnswerModal voor die specifieke vraag. Sheet blijft
|
||||
// open na een succesvol antwoord zodat meerdere antwoorden achter elkaar kunnen.
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet'
|
||||
import { useNotificationsStore } from '@/stores/notifications-store'
|
||||
import { AnswerModal } from './answer-modal'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { NotificationQuestion } from '@/stores/notifications-store'
|
||||
|
||||
interface NotificationsSheetProps {
|
||||
trigger: React.ReactNode
|
||||
currentUserId: string
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function NotificationsSheet({
|
||||
trigger,
|
||||
currentUserId,
|
||||
isDemo,
|
||||
}: NotificationsSheetProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [activeQuestion, setActiveQuestion] = useState<NotificationQuestion | null>(null)
|
||||
const questions = useNotificationsStore((s) => s.questions)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger render={trigger as React.ReactElement} />
|
||||
<SheetContent side="right" className="w-full sm:max-w-md">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
|
||||
<SheetDescription>
|
||||
Beantwoord open vragen om Claude verder te laten werken.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
{questions.length === 0 ? (
|
||||
<div className="text-muted-foreground mt-8 px-4 py-6 text-center text-sm">
|
||||
Geen openstaande vragen. Lekker bezig!
|
||||
</div>
|
||||
) : (
|
||||
<ul className="mt-4 flex flex-col gap-2 px-4 pb-4">
|
||||
{questions.map((q) => {
|
||||
const forYou = q.assignee_id === currentUserId
|
||||
return (
|
||||
<li key={q.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveQuestion(q)}
|
||||
className={cn(
|
||||
'border-border w-full rounded-md border p-3 text-left transition-colors hover:bg-surface-container',
|
||||
forYou &&
|
||||
'bg-primary-container text-primary-container-foreground border-primary/30 hover:bg-primary-container/80',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="font-mono text-xs opacity-80">
|
||||
{q.story_code ?? '—'}
|
||||
</span>
|
||||
<span className="line-clamp-1 text-sm font-medium">
|
||||
{q.story_title}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
'line-clamp-2 mt-1 text-sm',
|
||||
forYou ? 'opacity-90' : 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{q.question}
|
||||
</p>
|
||||
{forYou && (
|
||||
<span className="mt-2 inline-block rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide">
|
||||
Voor jou
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<AnswerModal
|
||||
question={activeQuestion}
|
||||
isDemo={isDemo}
|
||||
onClose={() => setActiveQuestion(null)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue