fix(layout): guard undefined user.name in avatar fallbacks (#320)

* fix(layout): guard undefined user.name in avatar fallbacks

* fix: AUTH_DEFAULT_USER as zod email

---------

Co-authored-by: charles-gauthereau <charles.gauthereau@soluce-technologies.com>

src/env.mjs

@@ -31,7 +31,7 @@ export const env = createEnv({
         SMTP_USER: z.string().optional(),
 
         AUTH_DEFAULT_USER_NAME: z.string().optional(),
-        AUTH_DEFAULT_USER: z.string().optional(),
+        AUTH_DEFAULT_USER: z.email().optional(),
         AUTH_DEFAULT_PASSWORD: z.string().optional(),
 
 

src/features/layout/logged-in-button.tsx

@@ -33,7 +33,7 @@ export const LoggedInButtonClient = ({ user, sessions, currentSession, accounts,
             <SidebarMenuButton type="button" className="h-auto justify-between py-2" data-testid="profile-dropdown">
                 <div className="flex items-center gap-2">
                     <Avatar className="size-6">
-                        <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
+                        <AvatarFallback>{(user.name?.[0] ?? user.email?.[0] ?? "?").toUpperCase()}</AvatarFallback>
                         {user.image && <AvatarImage src={user.image} />}
                     </Avatar>
                     <div className="flex flex-col items-start">

src/features/profile/avatar-with-upload.tsx

@@ -72,7 +72,7 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
 
             <Avatar className="w-24 h-24 lg:w-32 lg:h-32 border-4 border-muted/20">
                 <AvatarImage className="object-cover" src={user.image || undefined}/>
-                <AvatarFallback className="text-3xl">{user.name.charAt(0).toUpperCase()}</AvatarFallback>
+                <AvatarFallback className="text-3xl">{(user.name?.charAt(0) ?? user.email?.charAt(0) ?? "?").toUpperCase()}</AvatarFallback>
             </Avatar>
 
             <div