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}