Refactor: Remove photo reordering

src/components/upload/EntityPhotoGallery.tsx

@@ -2,6 +2,13 @@ import { useState, useEffect } from 'react';
 import { Camera, Upload, LogIn, Settings } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useAuth } from '@/hooks/useAuth';
 import { useNavigate } from 'react-router-dom';
 import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload';
@@ -35,10 +42,11 @@ export function EntityPhotoGallery({
   const [loading, setLoading] = useState(true);
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<'newest' | 'oldest'>('newest');
 
   useEffect(() => {
     fetchPhotos();
-  }, [entityId, entityType]);
+  }, [entityId, entityType, sortBy]);
 
   const fetchPhotos = async () => {
     try {
@@ -50,8 +58,7 @@ export function EntityPhotoGallery({
         .select('id, cloudflare_image_url, title, caption, submitted_by, created_at, order_index')
         .eq('entity_type', entityType)
         .eq('entity_id', entityId)
-        .order('order_index', { ascending: true })
-        .order('created_at', { ascending: false });
+        .order('created_at', { ascending: sortBy === 'oldest' });
 
       console.log('📷 [FETCH PHOTOS] Query result:', { photoData, error, count: photoData?.length });
 
@@ -132,34 +139,52 @@ export function EntityPhotoGallery({
   return (
     <div className="space-y-6">
       {/* Header with Upload and Management Buttons */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0 space-y-3 sm:space-y-0">
-        <div>
-          <h3 className="text-base sm:text-lg font-semibold">Photo Gallery</h3>
-          <p className="text-sm text-muted-foreground hidden sm:block">
-            Share your photos of {entityName}
-          </p>
-        </div>
-        <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
-          {isModerator && photos.length > 0 && (
-            <Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2 w-full sm:w-auto">
-              <Settings className="w-4 h-4" />
-              <span className="sm:inline">Manage</span>
-            </Button>
-          )}
-          <Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
-            {user ? (
-              <>
-                <Upload className="w-4 h-4" />
-                <span className="sm:inline">Upload Photos</span>
-              </>
-            ) : (
-              <>
-                <LogIn className="w-4 h-4" />
-                <span className="sm:inline">Sign in to Upload</span>
-              </>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div>
+            <h3 className="text-base sm:text-lg font-semibold">Photo Gallery</h3>
+            <p className="text-sm text-muted-foreground hidden sm:block">
+              Share your photos of {entityName}
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
+            {isModerator && photos.length > 0 && (
+              <Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2 w-full sm:w-auto">
+                <Settings className="w-4 h-4" />
+                <span className="sm:inline">Manage</span>
+              </Button>
             )}
-          </Button>
+            <Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
+              {user ? (
+                <>
+                  <Upload className="w-4 h-4" />
+                  <span className="sm:inline">Upload Photos</span>
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-4 h-4" />
+                  <span className="sm:inline">Sign in to Upload</span>
+                </>
+              )}
+            </Button>
+          </div>
         </div>
+        
+        {/* Sort Dropdown */}
+        {photos.length > 0 && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Sort by:</span>
+            <Select value={sortBy} onValueChange={(value: 'newest' | 'oldest') => setSortBy(value)}>
+              <SelectTrigger className="w-full sm:w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="newest">Newest First</SelectItem>
+                <SelectItem value="oldest">Oldest First</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
       </div>
 
       {/* Photo Management Dialog */}
@@ -183,16 +208,11 @@ export function EntityPhotoGallery({
                   className="w-full h-48 sm:h-56 md:h-48 object-cover transition-transform cursor-pointer touch-manipulation active:opacity-80 sm:hover:scale-105"
                   onClick={() => handlePhotoClick(index)}
                 />
-                {(photo.title || photo.caption) && (
+                {photo.caption && (
                   <div className="p-2 sm:p-3">
-                    {photo.title && (
-                      <h4 className="font-medium text-xs sm:text-sm line-clamp-2">{photo.title}</h4>
-                    )}
-                    {photo.caption && (
-                      <p className="text-[10px] sm:text-xs text-muted-foreground line-clamp-2 mt-1">
-                        {photo.caption}
-                      </p>
-                    )}
+                    <p className="text-[10px] sm:text-xs text-muted-foreground line-clamp-2">
+                      {photo.caption}
+                    </p>
                   </div>
                 )}
               </CardContent>