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>
102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import { redirect } from 'next/navigation'
|
|
import { cookies } from 'next/headers'
|
|
import { getIronSession } from 'iron-session'
|
|
import { SessionData, sessionOptions } from '@/lib/session'
|
|
import { isPairedSessionExpired } from '@/lib/auth/pairing'
|
|
import { prisma } from '@/lib/prisma'
|
|
import { productAccessFilter } from '@/lib/product-access'
|
|
import { NavBar } from '@/components/shared/nav-bar'
|
|
import { MinWidthBanner } from '@/components/shared/min-width-banner'
|
|
import { StatusBar } from '@/components/shared/status-bar'
|
|
import { SoloRealtimeBridge } from '@/components/solo/realtime-bridge'
|
|
import { NotificationsBridge } from '@/components/notifications/notifications-bridge'
|
|
import { AlertToast } from '@/components/shared/alert-toast'
|
|
import { Suspense } from 'react'
|
|
|
|
export default async function AppLayout({ children }: { children: React.ReactNode }) {
|
|
const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
|
|
|
|
if (!session.userId) {
|
|
redirect('/login')
|
|
}
|
|
|
|
// ST-1002 (M10): paired-sessies (via QR-pairing) hebben een eigen kortere TTL.
|
|
// Vervallen → vernietig en stuur naar /login.
|
|
if (isPairedSessionExpired(session)) {
|
|
session.destroy()
|
|
redirect('/login')
|
|
}
|
|
|
|
const [user, userRoles, accessibleProducts] = await Promise.all([
|
|
prisma.user.findUnique({
|
|
where: { id: session.userId },
|
|
select: { username: true, email: true, active_product_id: true },
|
|
}),
|
|
prisma.userRole.findMany({
|
|
where: { user_id: session.userId },
|
|
select: { role: true },
|
|
}),
|
|
prisma.product.findMany({
|
|
where: { archived: false, ...productAccessFilter(session.userId) },
|
|
orderBy: { name: 'asc' },
|
|
select: { id: true, name: true },
|
|
}),
|
|
])
|
|
const roles = userRoles.map(r => r.role as string)
|
|
|
|
if (!user) {
|
|
redirect('/login')
|
|
}
|
|
|
|
// Resolve active product — clear stale reference if archived or inaccessible
|
|
let activeProduct: { id: string; name: string } | null = null
|
|
let hasActiveSprint = false
|
|
if (user.active_product_id) {
|
|
const product = await prisma.product.findFirst({
|
|
where: { id: user.active_product_id, archived: false, ...productAccessFilter(session.userId) },
|
|
select: { id: true, name: true },
|
|
})
|
|
if (product) {
|
|
activeProduct = product
|
|
const sprint = await prisma.sprint.findFirst({
|
|
where: { product_id: product.id, status: 'ACTIVE' },
|
|
select: { id: true },
|
|
})
|
|
hasActiveSprint = !!sprint
|
|
} else {
|
|
await prisma.user.update({
|
|
where: { id: session.userId },
|
|
data: { active_product_id: null },
|
|
})
|
|
redirect('/dashboard?alert=product_unavailable')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="h-screen bg-background flex flex-col overflow-hidden">
|
|
<a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:text-sm">
|
|
Ga naar inhoud
|
|
</a>
|
|
<NavBar
|
|
isDemo={session.isDemo}
|
|
roles={roles}
|
|
userId={session.userId}
|
|
username={user.username}
|
|
email={user.email}
|
|
activeProduct={activeProduct}
|
|
products={accessibleProducts}
|
|
hasActiveSprint={hasActiveSprint}
|
|
/>
|
|
<MinWidthBanner />
|
|
<main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">
|
|
{children}
|
|
</main>
|
|
<StatusBar />
|
|
<SoloRealtimeBridge />
|
|
<NotificationsBridge userId={session.userId} />
|
|
<Suspense>
|
|
<AlertToast />
|
|
</Suspense>
|
|
</div>
|
|
)
|
|
}
|