feat(ST-506): toon gebruikersrollen in navigatiebalk

Haalt rollen op in AppLayout en geeft ze door aan NavBar.
NavBar toont afkortingen (PO · SM · Dev) rechts van de navigatie.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(app)/layout.tsx

@@ -2,6 +2,7 @@ import { redirect } from 'next/navigation'
 import { cookies } from 'next/headers'
 import { getIronSession } from 'iron-session'
 import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
 import { NavBar } from '@/components/shared/nav-bar'
 import { MinWidthBanner } from '@/components/shared/min-width-banner'
 import { StatusBar } from '@/components/shared/status-bar'
@@ -13,12 +14,18 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     redirect('/login')
   }
 
+  const userRoles = await prisma.userRole.findMany({
+    where: { user_id: session.userId },
+    select: { role: true },
+  })
+  const roles = userRoles.map(r => r.role as string)
+
   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} />
+      <NavBar isDemo={session.isDemo} roles={roles} />
       <MinWidthBanner />
       <main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">
         {children}

components/shared/nav-bar.tsx

@@ -8,11 +8,18 @@ import { Badge } from '@/components/ui/badge'
 import { AppIcon } from '@/components/shared/app-icon'
 import { cn } from '@/lib/utils'
 
-interface NavBarProps {
-  isDemo: boolean
+const ROLE_LABELS: Record<string, string> = {
+  PRODUCT_OWNER: 'PO',
+  SCRUM_MASTER: 'SM',
+  DEVELOPER: 'Dev',
 }
 
-export function NavBar({ isDemo }: NavBarProps) {
+interface NavBarProps {
+  isDemo: boolean
+  roles: string[]
+}
+
+export function NavBar({ isDemo, roles }: NavBarProps) {
   const pathname = usePathname()
 
   const navLinks = [
@@ -51,8 +58,13 @@ export function NavBar({ isDemo }: NavBarProps) {
         ))}
       </nav>
 
-      {/* Rechts: instellingen + uitloggen */}
+      {/* Rechts: rollen + instellingen + uitloggen */}
       <div className="ml-auto flex items-center gap-2">
+        {roles.length > 0 && (
+          <span className="text-xs text-muted-foreground px-2">
+            {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
+          </span>
+        )}
         <Link
           href="/settings"
           className={cn(