feat: Implement photo submission editing and display enhancements

src/components/moderation/PhotoSubmissionDisplay.tsx

@@ -1,14 +1,14 @@
 import { useState, useEffect } from 'react';
 import { supabase } from '@/integrations/supabase/client';
-import { useIsMobile } from '@/hooks/use-mobile';
+import { PhotoGrid } from '@/components/common/PhotoGrid';
 import type { PhotoSubmissionItem } from '@/types/photo-submissions';
+import type { PhotoItem } from '@/types/photos';
 
 interface PhotoSubmissionDisplayProps {
   submissionId: string;
 }
 
 export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayProps) {
-  const isMobile = useIsMobile();
   const [photos, setPhotos] = useState<PhotoSubmissionItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -114,21 +114,15 @@ export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayP
     );
   }
 
-  return (
-    <div className={`grid gap-2 ${isMobile ? 'grid-cols-2' : 'grid-cols-3'}`}>
-      {photos.slice(0, isMobile ? 2 : 3).map((photo) => (
-        <img
-          key={photo.id}
-          src={photo.cloudflare_image_url}
-          alt={photo.title || photo.caption || 'Submitted photo'}
-          className="w-full h-32 object-cover rounded-md"
-        />
-      ))}
-      {photos.length > (isMobile ? 2 : 3) && (
-        <div className="text-sm text-muted-foreground flex items-center justify-center bg-muted rounded-md">
-          +{photos.length - (isMobile ? 2 : 3)} more
-        </div>
-      )}
-    </div>
-  );
+  // Convert PhotoSubmissionItem[] to PhotoItem[] for PhotoGrid
+  const photoItems: PhotoItem[] = photos.map(photo => ({
+    id: photo.id,
+    url: photo.cloudflare_image_url,
+    filename: photo.filename || `Photo ${photo.order_index + 1}`,
+    caption: photo.caption,
+    title: photo.title,
+    date_taken: photo.date_taken,
+  }));
+
+  return <PhotoGrid photos={photoItems} />;
 }