Implement photo upload enhancements

src/components/upload/PhotoCaptionEditor.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { X, Eye, GripVertical, Edit3 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface PhotoWithCaption {
+  url: string;
+  caption: string;
+  title?: string;
+  order: number;
+}
+
+interface PhotoCaptionEditorProps {
+  photos: PhotoWithCaption[];
+  onPhotosChange: (photos: PhotoWithCaption[]) => void;
+  onRemovePhoto: (index: number) => void;
+  maxCaptionLength?: number;
+  className?: string;
+}
+
+export function PhotoCaptionEditor({
+  photos,
+  onPhotosChange,
+  onRemovePhoto,
+  maxCaptionLength = 200,
+  className = '',
+}: PhotoCaptionEditorProps) {
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+  const updatePhotoCaption = (index: number, caption: string) => {
+    const updatedPhotos = photos.map((photo, i) =>
+      i === index ? { ...photo, caption } : photo
+    );
+    onPhotosChange(updatedPhotos);
+  };
+
+  const updatePhotoTitle = (index: number, title: string) => {
+    const updatedPhotos = photos.map((photo, i) =>
+      i === index ? { ...photo, title } : photo
+    );
+    onPhotosChange(updatedPhotos);
+  };
+
+  const movePhoto = (fromIndex: number, toIndex: number) => {
+    const updatedPhotos = [...photos];
+    const [movedPhoto] = updatedPhotos.splice(fromIndex, 1);
+    updatedPhotos.splice(toIndex, 0, movedPhoto);
+    
+    // Update order values
+    const reorderedPhotos = updatedPhotos.map((photo, index) => ({
+      ...photo,
+      order: index,
+    }));
+    
+    onPhotosChange(reorderedPhotos);
+  };
+
+  if (photos.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="flex items-center justify-between">
+        <Label className="text-base font-medium">Photo Captions</Label>
+        <Badge variant="secondary" className="text-xs">
+          {photos.length} photo{photos.length !== 1 ? 's' : ''}
+        </Badge>
+      </div>
+      
+      <div className="space-y-3">
+        {photos.map((photo, index) => (
+          <Card key={`${photo.url}-${index}`} className="overflow-hidden">
+            <CardContent className="p-4">
+              <div className="flex gap-4">
+                {/* Photo preview */}
+                <div className="relative flex-shrink-0">
+                  <img
+                    src={photo.url}
+                    alt={photo.title || `Photo ${index + 1}`}
+                    className="w-24 h-24 object-cover rounded-lg"
+                  />
+                  <div className="absolute -top-2 -right-2 flex gap-1">
+                    <button
+                      onClick={() => onRemovePhoto(index)}
+                      className="p-1 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors shadow-lg"
+                      title="Remove photo"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                    <button
+                      onClick={() => window.open(photo.url, '_blank')}
+                      className="p-1 bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors shadow-lg"
+                      title="View full size"
+                    >
+                      <Eye className="w-3 h-3" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Caption editing */}
+                <div className="flex-1 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Photo {index + 1}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setEditingIndex(editingIndex === index ? null : index)}
+                        className="h-7 px-2"
+                      >
+                        <Edit3 className="w-3 h-3" />
+                      </Button>
+                      <div
+                        className="cursor-grab hover:cursor-grabbing p-1 text-muted-foreground hover:text-foreground transition-colors"
+                        title="Drag to reorder"
+                      >
+                        <GripVertical className="w-4 h-4" />
+                      </div>
+                    </div>
+                  </div>
+
+                  {editingIndex === index ? (
+                    <div className="space-y-2">
+                      <div>
+                        <Label htmlFor={`title-${index}`} className="text-xs">
+                          Title (optional)
+                        </Label>
+                        <Input
+                          id={`title-${index}`}
+                          value={photo.title || ''}
+                          onChange={(e) => updatePhotoTitle(index, e.target.value)}
+                          placeholder="Photo title"
+                          maxLength={100}
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div>
+                        <Label htmlFor={`caption-${index}`} className="text-xs">
+                          Caption
+                        </Label>
+                        <Input
+                          id={`caption-${index}`}
+                          value={photo.caption}
+                          onChange={(e) => updatePhotoCaption(index, e.target.value)}
+                          placeholder="Add a caption for this photo..."
+                          maxLength={maxCaptionLength}
+                          className="h-8 text-sm"
+                        />
+                        <p className="text-xs text-muted-foreground mt-1">
+                          {photo.caption.length}/{maxCaptionLength} characters
+                        </p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-1">
+                      {photo.title && (
+                        <p className="text-sm font-medium">{photo.title}</p>
+                      )}
+                      <p className="text-sm text-muted-foreground">
+                        {photo.caption || (
+                          <span className="italic">Click edit to add caption</span>
+                        )}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}