Madhura68
9e8f33b96e
Two gaps discovered during the first live grill-session of IDEA-002:
the agent posted a question, but the user had no UI to answer it.
1. Idea-questions only appeared on the Timeline-tab as read-only entries
2. Notifications-bell fetched + handled story-questions only
This fix:
**Inline answer-form in IdeaTimeline** (components/ideas/idea-timeline.tsx)
- Open questions now render an AnswerForm directly under the question text
- Multi-choice options become clickable buttons (one-click submit); free-text
fallback via collapsed details/textarea
- Plain free-text questions render textarea + Verzend
- Calls existing answerQuestion server-action; toast + router.refresh on success
**Notifications-bell extended for idea-questions**
- stores/notifications-store.ts: NotificationQuestion → discriminated union
(kind: 'story' | 'idea'); forYouCount treats idea-questions as always-for-you
(idea is strictly user_id-only — only the owner sees them)
- components/notifications/notifications-bridge.tsx: parallel fetch of
story-questions (productAccessFilter) + idea-questions (idea.user_id ===
session.userId); merged + sorted by created_at
- components/notifications/notifications-sheet.tsx: renders idea_code/title
for kind='idea'
- components/notifications/answer-modal.tsx: header + open-link branch on
kind (idea → /ideas/[id]?tab=timeline; story → existing /sprint link)
- lib/realtime/use-notifications-realtime.ts: idea-question events also
trigger close+reconnect on 'open' (loads fresh detail) and remove(id) on
non-open — same pattern story-questions already use
- components/shared/notifications-bell.tsx: badge counts idea-questions as
for-you regardless of assignee
**Security gap closed (actions/questions.ts answerQuestion)**
Before: accepted any answer if user has product-access.
After: idea-questions require idea.user_id === session.userId; story-
questions keep the existing productAccessFilter path. (Prisma 7 rejects
\`{ not: null }\` in WHERE; routing happens app-level after a single fetch.)
Tests: 546/546 still green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
107 lines
4 KiB
TypeScript
107 lines
4 KiB
TypeScript
'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) => {
|
|
// story-questions: forYou wanneer assignee = ingelogd; idee-vragen
|
|
// zijn altijd "voor jou" (idee is strikt user_id-only).
|
|
const forYou =
|
|
q.kind === 'idea' || q.assignee_id === currentUserId
|
|
const code = q.kind === 'idea' ? q.idea_code : (q.story_code ?? '—')
|
|
const title = q.kind === 'idea' ? q.idea_title : q.story_title
|
|
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">{code}</span>
|
|
<span className="line-clamp-1 text-sm font-medium">{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)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|