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>

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(