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}