We now have an AuthContext!

src/components/default/profile/AvatarUpload.tsx

@@ -1,19 +1,14 @@
 import { useFileUpload } from '@/lib/hooks/useFileUpload';
-import { useAvatar } from '@/lib/hooks/useAvatar';
-import type { Profile } from '@/utils/supabase';
+import { useAuth } from '@/components/context/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
-import { Pencil, User, Loader2 } from 'lucide-react';
+import { Loader2, Pencil, Upload, User } from 'lucide-react';
 
 type AvatarUploadProps = {
-  profile?: Profile;
   onAvatarUploaded: (path: string) => Promise<void>;
 };
 
-export const AvatarUpload = ({
-  profile,
-  onAvatarUploaded,
-}: AvatarUploadProps) => {
-  const { avatarUrl, isLoading } = useAvatar(profile);
+export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
+  const { profile, avatarUrl } = useAuth();
   const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
 
   const handleAvatarClick = () => {
@@ -30,27 +25,13 @@ export const AvatarUpload = ({
     }
   };
 
-  if (isLoading) {
-    return (
-      <div className='flex flex-col items-center'>
-        <div className='mb-4'>
-          <Avatar className='h-32 w-32'>
-            <AvatarFallback className='text-2xl'>
-              {profile?.full_name ? (
-                profile.full_name
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('')
-                  .toUpperCase()
-              ) : (
-                <User size={32} />
-              )}
-            </AvatarFallback>
-          </Avatar>
-        </div>
-      </div>
-    );
-  }
+  const getInitials = (name: string | null | undefined): string => {
+    if (!name) return '';
+    return name.split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase();
+  };
 
   return (
     <div className='flex flex-col items-center'>
@@ -63,27 +44,29 @@ export const AvatarUpload = ({
             <AvatarImage src={avatarUrl} alt={profile?.full_name ?? 'User'} />
           ) : (
             <AvatarFallback className='text-2xl'>
-              {profile?.full_name ? (
-                profile.full_name
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('')
-                  .toUpperCase()
-              ) : (
-                <User size={32} />
-              )}
+              {profile?.full_name
+                ? getInitials(profile.full_name)
+                : <User size={32} />}
             </AvatarFallback>
           )}
         </Avatar>
-        <div
-          className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
-          transition-all flex items-center justify-center'
-        >
-          <Pencil
-            className='text-white opacity-0 group-hover:opacity-100
-            transition-opacity'
-            size={24}
-          />
+          <div
+            className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
+              transition-all flex items-center justify-center'
+          >
+            <Upload
+              className='text-white opacity-0 group-hover:opacity-100
+                transition-opacity'
+              size={24}
+            />
+          </div>
+          <div className='absolute inset-1 transition-all flex items-end justify-end'>
+            <Pencil
+              className='text-white opacity-100 group-hover:opacity-0
+                transition-opacity'
+              size={24}
+            />
+          </div>
         </div>
         <input
           ref={fileInputRef}
@@ -93,16 +76,12 @@ export const AvatarUpload = ({
           onChange={handleFileChange}
           disabled={isUploading}
         />
-      </div>
       {isUploading && (
         <div className='flex items-center text-sm text-gray-500 mt-2'>
           <Loader2 className='h-4 w-4 mr-2 animate-spin' />
           Uploading...
         </div>
       )}
-      <p className='text-sm text-gray-500 mt-2'>
-        Click on the avatar to upload a new image
-      </p>
     </div>
   );
 };