Refactor: Implement avatar cleanup plan

src/components/upload/PhotoUpload.tsx

@@ -16,7 +16,7 @@ import { cn } from '@/lib/utils';
 import { supabase } from '@/integrations/supabase/client';
 
 interface PhotoUploadProps {
-  onUploadComplete?: (urls: string[]) => void;
+  onUploadComplete?: (urls: string[], imageId?: string) => void;
   onUploadStart?: () => void;
   onError?: (error: string) => void;
   maxFiles?: number;
@@ -24,6 +24,7 @@ interface PhotoUploadProps {
   className?: string;
   variant?: 'default' | 'compact' | 'avatar';
   accept?: string;
+  currentImageId?: string; // For cleanup of existing image
 }
 
 interface UploadedImage {
@@ -41,7 +42,8 @@ export function PhotoUpload({
   existingPhotos = [],
   className,
   variant = 'default',
-  accept = 'image/jpeg,image/png,image/webp'
+  accept = 'image/jpeg,image/png,image/webp',
+  currentImageId
 }: PhotoUploadProps) {
   const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
   const [uploading, setUploading] = useState(false);
@@ -164,6 +166,19 @@ export function PhotoUpload({
     onUploadStart?.();
 
     try {
+      // Delete old image first if this is an avatar update
+      if (isAvatar && currentImageId) {
+        try {
+          await supabase.functions.invoke('upload-image', {
+            method: 'DELETE',
+            body: { imageId: currentImageId }
+          });
+        } catch (deleteError) {
+          console.warn('Failed to delete old avatar:', deleteError);
+          // Continue with upload even if deletion fails
+        }
+      }
+
       const uploadPromises = filesToUpload.map(async (file, index) => {
         setUploadProgress((index / filesToUpload.length) * 100);
         return uploadFile(file);
@@ -174,7 +189,7 @@ export function PhotoUpload({
       if (isAvatar) {
         // For avatars, replace all existing images
         setUploadedImages(results);
-        onUploadComplete?.(results.map(img => img.url));
+        onUploadComplete?.(results.map(img => img.url), results[0]?.id);
       } else {
         // For regular uploads, append to existing images
         setUploadedImages(prev => [...prev, ...results]);