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

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

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>
+  )
+}