Refactor: Implement avatar cleanup plan

src/pages/Profile.tsx

@@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useAuth } from '@/hooks/useAuth';
 import { 
   User, 
   MapPin, 
@@ -32,6 +33,7 @@ export default function Profile() {
   const { username } = useParams<{ username?: string }>();
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { refreshProfile } = useAuth();
   const [profile, setProfile] = useState<ProfileType | null>(null);
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState(false);
@@ -41,6 +43,7 @@ export default function Profile() {
     bio: '',
   });
   const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [avatarImageId, setAvatarImageId] = useState<string>('');
 
   useEffect(() => {
     getCurrentUser();
@@ -73,6 +76,7 @@ export default function Profile() {
           bio: data.bio || '',
         });
         setAvatarUrl(data.avatar_url || '');
+        setAvatarImageId(data.avatar_image_id || '');
       }
     } catch (error: any) {
       console.error('Error fetching profile:', error);
@@ -110,6 +114,7 @@ export default function Profile() {
           bio: data.bio || '',
         });
         setAvatarUrl(data.avatar_url || '');
+        setAvatarImageId(data.avatar_image_id || '');
       }
     } catch (error: any) {
       console.error('Error fetching profile:', error);
@@ -132,7 +137,8 @@ export default function Profile() {
         .update({
           display_name: editForm.display_name,
           bio: editForm.bio,
-          avatar_url: avatarUrl
+          avatar_url: avatarUrl,
+          avatar_image_id: avatarImageId
         })
         .eq('user_id', currentUser.id);
 
@@ -142,7 +148,8 @@ export default function Profile() {
         ...prev,
         display_name: editForm.display_name,
         bio: editForm.bio,
-        avatar_url: avatarUrl
+        avatar_url: avatarUrl,
+        avatar_image_id: avatarImageId
       } : null);
 
       setEditing(false);
@@ -159,6 +166,57 @@ export default function Profile() {
     }
   };
 
+  const handleAvatarUpload = async (urls: string[], imageId?: string) => {
+    if (!currentUser || !urls[0]) return;
+
+    const newAvatarUrl = urls[0];
+    const newImageId = imageId || '';
+    
+    // Update local state immediately
+    setAvatarUrl(newAvatarUrl);
+    setAvatarImageId(newImageId);
+
+    try {
+      // Update database immediately
+      const { error } = await supabase
+        .from('profiles')
+        .update({
+          avatar_url: newAvatarUrl,
+          avatar_image_id: newImageId
+        })
+        .eq('user_id', currentUser.id);
+
+      if (error) throw error;
+
+      // Update local profile state
+      setProfile(prev => prev ? {
+        ...prev,
+        avatar_url: newAvatarUrl,
+        avatar_image_id: newImageId
+      } : null);
+
+      // Refresh the auth context to update header avatar
+      if (refreshProfile) {
+        await refreshProfile();
+      }
+
+      toast({
+        title: "Avatar updated",
+        description: "Your profile picture has been updated successfully.",
+      });
+    } catch (error: any) {
+      // Revert local state on error
+      setAvatarUrl(profile?.avatar_url || '');
+      setAvatarImageId(profile?.avatar_image_id || '');
+      
+      toast({
+        variant: "destructive",
+        title: "Error updating avatar",
+        description: error.message,
+      });
+    }
+  };
+
   const isOwnProfile = currentUser && profile && currentUser.id === profile.user_id;
 
   if (loading) {
@@ -212,7 +270,8 @@ export default function Profile() {
                     variant="avatar"
                     maxFiles={1}
                     existingPhotos={profile.avatar_url ? [profile.avatar_url] : []}
-                    onUploadComplete={(urls) => setAvatarUrl(urls[0] || '')}
+                    onUploadComplete={handleAvatarUpload}
+                    currentImageId={avatarImageId}
                     onError={(error) => {
                       toast({
                         title: "Upload Error",