Enhance Header component by adding AvatarFallback for user initials when profile picture is unavailable. Update Avatar component to ensure proper export of AvatarFallback. Clean up code formatting for consistency.

Author: tenkus47

frontend/public/img/icon_logo.png

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 import { LogOut } from "lucide-react";
 import { useAuth } from "../contexts/AuthContext";
-import { Avatar, AvatarImage } from "./ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 // No props needed as we'll use the auth context
 const Header: React.FC = () => {
   const { login, logout, user, isAuthenticated } = useAuth();
@@ -44,6 +44,7 @@ const Header: React.FC = () => {
               >
                 <Avatar title={user?.name}>
                   <AvatarImage src={user?.picture} />
+                  <AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
                 </Avatar>
                 <span>{user?.name ?? "Profile"}</span>
               </div>

frontend/src/components/Header.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Avatar({
   className,
@@ -16,7 +16,7 @@ function Avatar({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarImage({
@@ -29,7 +29,7 @@ function AvatarImage({
       className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -45,7 +45,7 @@ function AvatarFallback({
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };