From 5ae498fd88020be7e4dd2b3122c21642c849d124 Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Tue, 30 Jun 2026 12:02:02 +0200
Subject: [PATCH] feat(quick-260630-gbh-01): header avatar display with initial
 fallback

- AuthUser store: add optional hasAvatar? field
- Header: populate hasAvatar from fetchCurrentUser() result
- Header avatar button: shows <img src='/api-proxy/users/me/avatar'> when hasAvatar=true with onError fallback to initial span
- Plain <img> tag used (same-origin /api-proxy rewrite, no next/image remote config needed)
---
 apps/web/src/components/layout/header.tsx | 16 ++++++++++++++--
 apps/web/src/lib/stores/auth-store.ts     |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index 4d1badd..8128e3b 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -31,6 +31,7 @@ export function Header() {
             displayName: u.displayName,
             role: u.role,
             tenantId: u.tenantId,
+            hasAvatar: u.hasAvatar,
           });
         }
       });
@@ -53,6 +54,8 @@ export function Header() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [dropdownOpen]);
 
+  const [avatarError, setAvatarError] = useState(false);
+
   const userInitial = user
     ? (user.displayName ?? user.username).charAt(0).toUpperCase()
     : '?';
@@ -104,10 +107,19 @@ export function Header() {
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setDropdownOpen(!dropdownOpen)}
-            className="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
+            className="h-8 w-8 rounded-full overflow-hidden bg-primary flex items-center justify-center text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
             aria-label={tHeader('userMenu')}
           >
-            {userInitial}
+            {user?.hasAvatar && !avatarError ? (
+              <img
+                src="/api-proxy/users/me/avatar"
+                alt=""
+                className="h-8 w-8 rounded-full object-cover"
+                onError={() => setAvatarError(true)}
+              />
+            ) : (
+              <span>{userInitial}</span>
+            )}
           </button>
 
           {/* Dropdown menu */}
diff --git a/apps/web/src/lib/stores/auth-store.ts b/apps/web/src/lib/stores/auth-store.ts
index 1ff8748..a1eda2e 100644
--- a/apps/web/src/lib/stores/auth-store.ts
+++ b/apps/web/src/lib/stores/auth-store.ts
@@ -6,6 +6,7 @@ export interface AuthUser {
   displayName: string | null;
   role: 'SUPER_ADMIN' | 'ADMIN' | 'USER';
   tenantId: string;
+  hasAvatar?: boolean;
 }
 
 interface AuthState {