Refactor: Improve Uppy component styling

src/components/upload/UppyPhotoUpload.tsx

@@ -7,9 +7,9 @@ import { DashboardModal } from '@uppy/react';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { Button } from '@/components/ui/button';
-import { Upload, Image as ImageIcon } from 'lucide-react';
-
-// CSS imports removed to avoid build issues - using custom styling instead
+import { Badge } from '@/components/ui/badge';
+import { Upload, X, Eye, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 interface UppyPhotoUploadProps {
   onUploadComplete?: (urls: string[]) => void;
@@ -23,6 +23,8 @@ interface UppyPhotoUploadProps {
   className?: string;
   children?: React.ReactNode;
   disabled?: boolean;
+  showPreview?: boolean;
+  size?: 'default' | 'compact' | 'large';
 }
 
 interface CloudflareResponse {
@@ -55,9 +57,13 @@ export function UppyPhotoUpload({
   className = '',
   children,
   disabled = false,
+  showPreview = true,
+  size = 'default',
 }: UppyPhotoUploadProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [uploadedImages, setUploadedImages] = useState<string[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
   const uppyRef = useRef<Uppy | null>(null);
   const { toast } = useToast();
 
@@ -81,11 +87,18 @@ export function UppyPhotoUpload({
       showRemoveButtonAfterComplete: true,
       showSelectedFiles: true,
       note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
+      theme: 'auto',
+      closeAfterFinish: true,
     });
 
     // Add Image Editor plugin
     uppy.use(ImageEditor, {
       quality: 0.8,
+      cropperOptions: {
+        viewMode: 1,
+        background: false,
+        autoCropArea: 1,
+      },
     });
 
     // Add XHR Upload plugin (configured per file in beforeUpload)
@@ -103,6 +116,8 @@ export function UppyPhotoUpload({
         return;
       }
 
+      setIsUploading(true);
+      setUploadProgress(0);
       onUploadStart?.();
 
       // Process each file to get upload URL
@@ -144,6 +159,11 @@ export function UppyPhotoUpload({
       }
     });
 
+    // Handle upload progress
+    uppy.on('progress', (progress) => {
+      setUploadProgress(Math.round(progress));
+    });
+
     // Handle upload success
     uppy.on('upload-success', async (file, response) => {
       try {
@@ -187,6 +207,7 @@ export function UppyPhotoUpload({
     // Handle upload error
     uppy.on('upload-error', (file, error, response) => {
       console.error('Upload error:', error);
+      setIsUploading(false);
       
       // Check if it's an expired URL error and retry
       if (error.message?.includes('expired') || response?.status === 400) {
@@ -219,6 +240,9 @@ export function UppyPhotoUpload({
 
     // Handle upload complete
     uppy.on('complete', (result) => {
+      setIsUploading(false);
+      setUploadProgress(0);
+      
       if (result.successful.length > 0) {
         onUploadComplete?.(uploadedImages);
         toast({
@@ -234,7 +258,15 @@ export function UppyPhotoUpload({
     return () => {
       uppy.destroy();
     };
-  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages]);
+  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages, size]);
+
+  const removeImage = (index: number) => {
+    const newUrls = uploadedImages.filter((_, i) => i !== index);
+    setUploadedImages(newUrls);
+    if (onUploadComplete) {
+      onUploadComplete(newUrls);
+    }
+  };
 
   const handleOpenModal = () => {
     if (!disabled) {
@@ -242,26 +274,101 @@ export function UppyPhotoUpload({
     }
   };
 
-  return (
-    <>
-      <div className={className}>
-        {children ? (
-          <div onClick={handleOpenModal} className="cursor-pointer">
-            {children}
-          </div>
-        ) : (
-          <Button
-            onClick={handleOpenModal}
-            disabled={disabled}
-            variant="outline"
-            className="w-full"
-          >
-            <Upload className="mr-2 h-4 w-4" />
-            Upload Photos
-          </Button>
-        )}
-      </div>
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'compact':
+        return 'px-4 py-2 text-sm';
+      case 'large':
+        return 'px-8 py-4 text-lg';
+      default:
+        return 'px-6 py-3';
+    }
+  };
 
+  const renderUploadTrigger = () => {
+    if (children) {
+      return (
+        <div onClick={handleOpenModal} className="cursor-pointer">
+          {children}
+        </div>
+      );
+    }
+
+    const baseClasses = "photo-upload-trigger transition-all duration-300 flex items-center justify-center gap-2";
+    const sizeClasses = getSizeClasses();
+    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:scale-105';
+    
+    return (
+      <Button
+        onClick={handleOpenModal}
+        disabled={disabled || isUploading}
+        className={cn(baseClasses, sizeClasses, disabledClasses)}
+        size={size === 'compact' ? 'sm' : size === 'large' ? 'lg' : 'default'}
+      >
+        {isUploading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            Uploading... {uploadProgress}%
+          </>
+        ) : (
+          <>
+            <Upload className="w-4 h-4" />
+            {size === 'compact' ? 'Upload' : 'Upload Photos'}
+          </>
+        )}
+      </Button>
+    );
+  };
+
+  const renderPreview = () => {
+    if (!showPreview || uploadedImages.length === 0) return null;
+
+    return (
+      <div className="mt-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium text-muted-foreground">
+            Uploaded Photos ({uploadedImages.length})
+          </span>
+          <Badge variant="secondary" className="text-xs">
+            {uploadedImages.length}/{maxFiles}
+          </Badge>
+        </div>
+        <div className="upload-preview-grid">
+          {uploadedImages.map((url, index) => (
+            <div key={index} className="upload-preview-item group">
+              <img
+                src={url}
+                alt={`Uploaded ${index + 1}`}
+                className="w-full h-full object-cover"
+              />
+              <div className="upload-preview-overlay">
+                <button
+                  onClick={() => removeImage(index)}
+                  className="p-1 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors mr-2"
+                  title="Remove image"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+                <button
+                  onClick={() => window.open(url, '_blank')}
+                  className="p-1 bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors"
+                  title="View full size"
+                >
+                  <Eye className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {renderUploadTrigger()}
+      {renderPreview()}
+      
       {uppyRef.current && (
         <DashboardModal
           uppy={uppyRef.current}
@@ -272,21 +379,6 @@ export function UppyPhotoUpload({
           browserBackButtonClose
         />
       )}
-
-      {uploadedImages.length > 0 && (
-        <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
-          {uploadedImages.map((url, index) => (
-            <div key={index} className="relative aspect-square rounded-lg overflow-hidden bg-muted">
-              <img
-                src={url}
-                alt={`Uploaded ${index + 1}`}
-                className="w-full h-full object-cover"
-              />
-              <div className="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors" />
-            </div>
-          ))}
-        </div>
-      )}
-    </>
+    </div>
   );
 }