feat(ST-507): replace navbar roles/settings/logout with avatar user menu

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/(app)/layout.tsx

@@ -14,18 +14,34 @@ 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 [user, userRoles] = await Promise.all([
+    prisma.user.findUnique({
+      where: { id: session.userId },
+      select: { username: true, bio: true },
+    }),
+    prisma.userRole.findMany({
+      where: { user_id: session.userId },
+      select: { role: true },
+    }),
+  ])
   const roles = userRoles.map(r => r.role as string)
 
+  if (!user) {
+    redirect('/login')
+  }
+
   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} />
+      <NavBar
+        isDemo={session.isDemo}
+        roles={roles}
+        userId={session.userId}
+        username={user.username}
+        bio={user.bio}
+      />
       <MinWidthBanner />
       <main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">
         {children}

components/shared/nav-bar.tsx

@@ -2,32 +2,22 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { logoutAction } from '@/actions/auth'
-import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { AppIcon } from '@/components/shared/app-icon'
+import { UserMenu } from '@/components/shared/user-menu'
 import { cn } from '@/lib/utils'
 import { useProductStore } from '@/stores/product-store'
 
-const ROLE_LABELS: Record<string, string> = {
-  PRODUCT_OWNER: 'PO',
-  SCRUM_MASTER: 'SM',
-  DEVELOPER: 'Dev',
-}
-
-const ROLE_FULL_LABELS: Record<string, string> = {
-  PRODUCT_OWNER: 'Product Owner',
-  SCRUM_MASTER: 'Scrum Master',
-  DEVELOPER: 'Developer',
-}
-
 interface NavBarProps {
   isDemo: boolean
   roles: string[]
+  userId: string
+  username: string
+  bio: string | null
 }
 
-export function NavBar({ isDemo, roles }: NavBarProps) {
+export function NavBar({ isDemo, roles, userId, username, bio }: NavBarProps) {
   const pathname = usePathname()
   const currentProduct = useProductStore(s => s.currentProduct)
 
@@ -105,36 +95,9 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
         )}
       </div>
 
-      {/* Rechts: rollen + instellingen + uitloggen */}
+      {/* Rechts: account-menu */}
       <div className="flex items-center gap-2 flex-1 justify-end">
-        {roles.length > 0 && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger render={<span className="text-xs text-muted-foreground px-2 cursor-default" />}>
-                {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
-              </TooltipTrigger>
-              <TooltipContent>
-                {roles.map(r => ROLE_FULL_LABELS[r]).filter(Boolean).join(' · ')}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-        <Link
-          href="/settings"
-          className={cn(
-            'px-3 py-1.5 rounded-md text-sm transition-colors',
-            pathname.startsWith('/settings')
-              ? 'bg-primary-container text-primary-container-foreground font-medium'
-              : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
-          )}
-        >
-          Instellingen
-        </Link>
-        <form action={logoutAction}>
-          <Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
-            Uitloggen
-          </Button>
-        </form>
+        <UserMenu userId={userId} username={username} bio={bio} roles={roles} />
       </div>
     </header>
   )

components/shared/user-menu.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import Link from 'next/link'
+import { Settings, Sun, Globe, LogOut } from 'lucide-react'
+import { logoutAction } from '@/actions/auth'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+const ROLE_LABELS: Record<string, string> = {
+  PRODUCT_OWNER: 'Product Owner',
+  SCRUM_MASTER: 'Scrum Master',
+  DEVELOPER: 'Developer',
+}
+
+interface UserMenuProps {
+  userId: string
+  username: string
+  bio: string | null
+  roles: string[]
+}
+
+export function UserMenu({ userId, username, bio, roles }: UserMenuProps) {
+  const initials = username.slice(0, 2).toUpperCase()
+  const roleLabels = roles.map((r) => ROLE_LABELS[r]).filter(Boolean)
+  const subtitle = bio?.trim() ? bio.trim() : 'Lokaal account'
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        aria-label="Accountmenu openen"
+      >
+        <Avatar size="default">
+          <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
+          <AvatarFallback className="bg-primary-container text-primary-container-foreground">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" sideOffset={8} className="w-72">
+        <div className="flex items-center gap-3 px-2 py-2">
+          <Avatar size="lg">
+            <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
+            <AvatarFallback className="bg-primary-container text-primary-container-foreground">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-foreground truncate">{username}</div>
+            <div className="text-xs text-muted-foreground truncate">{subtitle}</div>
+          </div>
+        </div>
+
+        {roleLabels.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs uppercase tracking-wide text-muted-foreground">
+              Rollen
+            </DropdownMenuLabel>
+            <div className="px-2 pb-2 text-sm text-foreground">
+              {roleLabels.join(', ')}
+            </div>
+          </>
+        )}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem render={<Link href="/settings" />}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Instellingen</span>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled className="opacity-60">
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Thema: licht</span>
+          <Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
+            Binnenkort
+          </Badge>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled className="opacity-60">
+          <Globe className="mr-2 h-4 w-4" />
+          <span>Taal: Nederlands</span>
+          <Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
+            Binnenkort
+          </Badge>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <form action={logoutAction}>
+          <DropdownMenuItem
+            render={
+              <button type="submit" className="w-full text-left cursor-pointer" />
+            }
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>Uitloggen</span>
+          </DropdownMenuItem>
+        </form>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}