From 233e8efd6272e0186a64ebc59fd026b7b18e9639 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 13:53:15 +0000
Subject: [PATCH] Fix: Correct avatar display in header

---
 src/components/auth/AuthButtons.tsx | 11 +++++++++--
 src/components/ui/avatar.tsx        |  2 +-
 src/hooks/useAuth.tsx               |  6 ++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/auth/AuthButtons.tsx b/src/components/auth/AuthButtons.tsx
index ff5d1d79..1e99568f 100644
--- a/src/components/auth/AuthButtons.tsx
+++ b/src/components/auth/AuthButtons.tsx
@@ -87,8 +87,15 @@ export function AuthButtons() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
-            <AvatarImage src={profile?.avatar_url || ''} alt={profile?.display_name || profile?.username || ''} />
-            <AvatarFallback>
+            <AvatarImage 
+              src={profile?.avatar_url || undefined}
+              alt={profile?.display_name || profile?.username || user.email || 'User avatar'}
+              onError={(e) => {
+                console.warn('[Avatar] Failed to load image:', profile?.avatar_url);
+                e.currentTarget.src = ''; // Force fallback
+              }}
+            />
+            <AvatarFallback className="bg-primary/10 text-primary font-medium">
               {(profile?.display_name || profile?.username || user.email || 'U').charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 68d21bbf..df1b90f1 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -29,7 +29,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground", className)}
     {...props}
   />
 ));
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index 0f4fa2c2..f92f43cc 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -73,6 +73,12 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
 
       // Success - update state and complete
       if (isMountedRef.current) {
+        authLog('[Auth] Profile loaded:', {
+          userId: data?.user_id,
+          username: data?.username,
+          avatar_url: data?.avatar_url,
+          avatar_image_id: data?.avatar_image_id
+        });
         setProfile(data as Profile);
         profileRetryCountRef.current = 0;
         onComplete?.();