3bb178b5-949c-4434-a4e8-093caab5d33b

src/components/aos/top-bar.tsx

@@ -2,6 +2,7 @@
 
 import { Menu, Search, Bell, ChevronRight } from 'lucide-react'
 import { useAos, type ViewId } from '@/store/aos'
+import { useFetch } from '@/hooks/use-fetch'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { LocaleSwitcher } from './locale-switcher'
 import { NotificationsBell } from './notifications-bell'
@@ -51,6 +52,14 @@ export function TopBar() {
   const { view, setSidebarOpen, setCommandOpen } = useAos()
   const meta = TITLES[view]
   const crumbParts = meta.crumb.split(' / ')
+  const { data: meData } = useFetch<{ user: { name: string; email: string; role: string } } | null>('/api/auth/me')
+  const user = meData?.user
+  const initials = (user?.name ?? '?')
+    .split(' ')
+    .map((p) => p[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
 
   return (
     <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur-md md:px-6">
@@ -95,19 +104,19 @@ export function TopBar() {
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="gap-2 px-1.5">
               <Avatar className="size-8">
-                <AvatarFallback className="bg-primary text-primary-foreground text-xs">MB</AvatarFallback>
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">{initials}</AvatarFallback>
               </Avatar>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
             <DropdownMenuLabel className="flex flex-col">
-              <span className="text-sm font-medium">Max Brandt</span>
-              <span className="text-xs text-muted-foreground">max@nordlicht.digital</span>
+              <span className="text-sm font-medium">{user?.name ?? '—'}</span>
+              <span className="text-xs text-muted-foreground">{user?.email ?? ''}</span>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem className="flex items-center justify-between">
               <span>Rolle</span>
-              <Badge variant="outline" className="text-[10px]">Owner</Badge>
+              <Badge variant="outline" className="text-[10px] capitalize">{user?.role ?? '—'}</Badge>
             </DropdownMenuItem>
             <DropdownMenuItem>Profil</DropdownMenuItem>
             <DropdownMenuItem>Sitzungen</DropdownMenuItem>