Fix avatar upload and display issues

src/components/upload/PhotoUpload.tsx

@@ -52,8 +52,9 @@ export function PhotoUpload({
 
   const isAvatar = variant === 'avatar';
   const isCompact = variant === 'compact';
+  const actualMaxFiles = isAvatar ? 1 : maxFiles;
   const totalImages = uploadedImages.length + existingPhotos.length;
-  const canUploadMore = totalImages < maxFiles;
+  const canUploadMore = totalImages < actualMaxFiles;
 
   const validateFile = (file: File): string | null => {
     // Check file size (10MB limit)
@@ -144,13 +145,13 @@ export function PhotoUpload({
   };
 
   const handleFiles = async (files: FileList) => {
-    if (!canUploadMore) {
-      setError(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`);
-      onError?.(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`);
+    if (!isAvatar && !canUploadMore) {
+      setError(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`);
+      onError?.(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`);
       return;
     }
 
-    const filesToUpload = Array.from(files).slice(0, maxFiles - totalImages);
+    const filesToUpload = isAvatar ? Array.from(files).slice(0, 1) : Array.from(files).slice(0, actualMaxFiles - totalImages);
     
     // Validate all files first
     for (const file of filesToUpload) {
@@ -173,11 +174,17 @@ export function PhotoUpload({
       });
 
       const results = await Promise.all(uploadPromises);
-      setUploadedImages(prev => [...prev, ...results]);
       
-      // Call completion callback with all image URLs
+      if (isAvatar) {
+        // For avatars, replace all existing images
+        setUploadedImages(results);
+        onUploadComplete?.(results.map(img => img.url));
+      } else {
+        // For regular uploads, append to existing images
+        setUploadedImages(prev => [...prev, ...results]);
         const allUrls = [...existingPhotos, ...uploadedImages.map(img => img.url), ...results.map(img => img.url)];
         onUploadComplete?.(allUrls);
+      }
       
       setUploadProgress(100);
     } catch (error: any) {
@@ -210,7 +217,7 @@ export function PhotoUpload({
     e.preventDefault();
     setDragOver(false);
     
-    if (!canUploadMore || uploading) return;
+    if (!(isAvatar || canUploadMore) || uploading) return;
     
     const files = e.dataTransfer.files;
     if (files.length > 0) {
@@ -307,13 +314,13 @@ export function PhotoUpload({
         className={cn(
           'border-2 border-dashed transition-colors cursor-pointer',
           dragOver && 'border-primary bg-primary/5',
-          !canUploadMore && 'opacity-50 cursor-not-allowed',
+          !(isAvatar || canUploadMore) && 'opacity-50 cursor-not-allowed',
           isCompact && 'p-2'
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
-        onClick={canUploadMore && !uploading ? triggerFileSelect : undefined}
+        onClick={isAvatar || (canUploadMore && !uploading) ? triggerFileSelect : undefined}
       >
         <CardContent className={cn('p-8 text-center', isCompact && 'p-4')}>
           {uploading ? (
@@ -338,20 +345,22 @@ export function PhotoUpload({
               
               <div className="space-y-2">
                 <p className="text-lg font-medium">
-                  {canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'}
+                  {isAvatar ? 'Upload Avatar' : canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'}
                 </p>
                 <p className="text-sm text-muted-foreground">
-                  {canUploadMore ? (
+                  {isAvatar ? (
+                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB</>
+                  ) : canUploadMore ? (
                     <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</>
                   ) : (
-                    `Maximum ${maxFiles} ${maxFiles === 1 ? 'photo' : 'photos'} allowed`
+                    `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed`
                   )}
                 </p>
               </div>
 
-              {canUploadMore && (
+              {!isAvatar && canUploadMore && (
                 <Badge variant="outline">
-                  {totalImages}/{maxFiles} {maxFiles === 1 ? 'photo' : 'photos'}
+                  {totalImages}/{actualMaxFiles} {actualMaxFiles === 1 ? 'photo' : 'photos'}
                 </Badge>
               )}
             </div>
@@ -366,7 +375,7 @@ export function PhotoUpload({
         multiple={maxFiles > 1}
         onChange={handleFileSelect}
         className="hidden"
-        disabled={!canUploadMore || uploading}
+        disabled={!(isAvatar || canUploadMore) || uploading}
       />
 
       {/* Error Display */}