Small stuff

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import Link from 'next/link';
-import { useState, useEffect } from 'react';
 import {
   Avatar,
   AvatarFallback,
@@ -24,23 +23,25 @@ const AvatarDropdown = () => {
     await signOut();
   };
 
+  const getInitials = (name: string | null | undefined): string => {
+    if (!name) return '';
+    return name.split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase();
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
         <Avatar className='cursor-pointer'>
           {avatarUrl ? (
-            <AvatarImage src={avatarUrl} />
+            <AvatarImage src={avatarUrl} alt={getInitials(profile?.full_name)} width={64} height={64} />
           ) : (
-            <AvatarFallback className='text-2xl'>
-              {profile?.full_name ? (
-                profile.full_name
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('')
-                  .toUpperCase()
-              ) : (
-                <User size={32} />
-              )}
+            <AvatarFallback className='text-sm'>
+              {profile?.full_name
+                ? getInitials(profile.full_name)
+                : <User size={32} />}
             </AvatarFallback>
           )}
         </Avatar>

src/components/default/profile/AvatarUpload.tsx

@@ -19,7 +19,16 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
-    const result = await uploadToStorage(file, 'avatars');
+    const result = await uploadToStorage({
+      file,
+      bucket: 'avatars',
+      resize: true,
+      options: {
+        maxWidth: 500,
+        maxHeight: 500,
+        quality: 0.8,
+      }
+    });
     if (result.success && result.path) {
       await onAvatarUploaded(result.path);
     }
@@ -41,9 +50,9 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
       >
         <Avatar className='h-32 w-32'>
           {avatarUrl ? (
-            <AvatarImage src={avatarUrl} alt={profile?.full_name ?? 'User'} />
+            <AvatarImage src={avatarUrl} alt={getInitials(profile?.full_name)} width={128} height={128} />
           ) : (
-            <AvatarFallback className='text-2xl'>
+            <AvatarFallback className='text-4xl'>
               {profile?.full_name
                 ? getInitials(profile.full_name)
                 : <User size={32} />}