Refactor: Simplify photo management modal

src/components/upload/PhotoManagementDialog.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/hooks/use-toast';
-import { ArrowUp, ArrowDown, Trash2, Star, StarOff, Pencil } from 'lucide-react';
+import { ArrowUp, ArrowDown, Trash2, Pencil } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 
 interface Photo {
@@ -123,44 +123,6 @@ export function PhotoManagementDialog({
     }
   };
 
-  const toggleFeatured = async (photoId: string) => {
-    try {
-      const photo = photos.find((p) => p.id === photoId);
-      if (!photo) return;
-
-      // If setting as featured, unset all other photos
-      if (!photo.is_featured) {
-        await supabase
-          .from('photos')
-          .update({ is_featured: false })
-          .eq('entity_type', entityType)
-          .eq('entity_id', entityId);
-      }
-
-      const { error } = await supabase
-        .from('photos')
-        .update({ is_featured: !photo.is_featured })
-        .eq('id', photoId);
-
-      if (error) throw error;
-
-      await fetchPhotos();
-      toast({
-        title: 'Success',
-        description: photo.is_featured
-          ? 'Photo removed from featured'
-          : 'Photo set as featured',
-      });
-      onUpdate?.();
-    } catch (error) {
-      console.error('Error updating featured status:', error);
-      toast({
-        title: 'Error',
-        description: 'Failed to update featured status',
-        variant: 'destructive',
-      });
-    }
-  };
 
   const deletePhoto = async (photoId: string) => {
     if (!confirm('Are you sure you want to delete this photo?')) return;
@@ -193,7 +155,6 @@ export function PhotoManagementDialog({
       const { error } = await supabase
         .from('photos')
         .update({
-          title: editingPhoto.title,
           caption: editingPhoto.caption,
         })
         .eq('id', editingPhoto.id);
@@ -223,30 +184,18 @@ export function PhotoManagementDialog({
         <DialogContent className="max-w-[95vw] sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>Edit Photo</DialogTitle>
-            <DialogDescription>Update photo details</DialogDescription>
+            <DialogDescription>Update photo caption</DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4">
             <div className="aspect-video w-full overflow-hidden rounded-lg">
               <img
                 src={editingPhoto.cloudflare_image_url}
-                alt={editingPhoto.title || 'Photo'}
+                alt={editingPhoto.caption || 'Photo'}
                 className="w-full h-full object-cover"
               />
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="title">Title</Label>
-              <Input
-                id="title"
-                value={editingPhoto.title || ''}
-                onChange={(e) =>
-                  setEditingPhoto({ ...editingPhoto, title: e.target.value })
-                }
-                placeholder="Photo title"
-              />
-            </div>
-
             <div className="space-y-2">
               <Label htmlFor="caption">Caption</Label>
               <Textarea
@@ -299,28 +248,18 @@ export function PhotoManagementDialog({
                     <div className="w-full aspect-video sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
                       <img
                         src={photo.cloudflare_image_url}
-                        alt={photo.title || 'Photo'}
+                        alt={photo.caption || 'Photo'}
                         className="w-full h-full object-cover"
                       />
                     </div>
 
                     <div className="flex-1 space-y-2">
-                      <div className="flex items-start justify-between">
+                      <div>
-                        <div>
+                        <p className="text-sm sm:text-base text-foreground">
-                          <h4 className="font-semibold text-sm sm:text-base">
+                          {photo.caption || (
-                            {photo.title || 'Untitled'}
+                            <span className="text-muted-foreground italic">No caption</span>
-                          </h4>
-                          {photo.caption && (
-                            <p className="text-xs sm:text-sm text-muted-foreground">
-                              {photo.caption}
-                            </p>
                           )}
-                        </div>
+                        </p>
-                        {photo.is_featured && (
-                          <span className="text-[10px] sm:text-xs bg-primary text-primary-foreground px-2 py-1 rounded">
-                            Featured
-                          </span>
-                        )}
                       </div>
 
                       <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-2">
@@ -344,24 +283,6 @@ export function PhotoManagementDialog({
                           <ArrowDown className="w-4 h-4 mr-2" />
                           <span className="sm:hidden">Move Down</span>
                         </Button>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => toggleFeatured(photo.id)}
-                          className="justify-start sm:justify-center"
-                        >
-                          {photo.is_featured ? (
-                            <>
-                              <StarOff className="w-4 h-4 mr-2" />
-                              <span className="sm:hidden">Remove Featured</span>
-                            </>
-                          ) : (
-                            <>
-                              <Star className="w-4 h-4 mr-2" />
-                              <span className="sm:hidden">Set Featured</span>
-                            </>
-                          )}
-                        </Button>
                         <Button
                           size="sm"
                           variant="outline"
@@ -369,14 +290,14 @@ export function PhotoManagementDialog({
                           className="justify-start sm:justify-center"
                         >
                           <Pencil className="w-4 h-4 mr-2" />
-                          <span className="sm:hidden">Edit Details</span>
+                          <span className="sm:hidden">Edit Caption</span>
                           <span className="hidden sm:inline">Edit</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="destructive"
                           onClick={() => deletePhoto(photo.id)}
-                          className="col-span-2 justify-start sm:justify-center"
+                          className="justify-start sm:justify-center"
                         >
                           <Trash2 className="w-4 h-4 mr-2" />
                           <span className="sm:hidden">Delete Photo</span>