feat: Implement mobile responsiveness enhancements

src/components/moderation/PhotoModal.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface PhotoModalProps {
   photos: Array<{
@@ -16,8 +17,16 @@ interface PhotoModalProps {
 }
 
 export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
+  const isMobile = useIsMobile();
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  
   const currentPhoto = photos[currentIndex];
+  
+  // Minimum swipe distance (in px)
+  const minSwipeDistance = 50;
 
   const goToPrevious = () => {
     setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
@@ -33,28 +42,62 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
     if (e.key === 'Escape') onClose();
   };
 
+  const onTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(null);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const onTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const onTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > minSwipeDistance;
+    const isRightSwipe = distance < -minSwipeDistance;
+    
+    if (isLeftSwipe) {
+      goToNext();
+    } else if (isRightSwipe) {
+      goToPrevious();
+    }
+  };
+
+  useEffect(() => {
+    setCurrentIndex(initialIndex);
+  }, [initialIndex]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-7xl w-full max-h-[90vh] p-0 [&>button]:hidden">
-        <div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
+      <DialogContent className={`max-w-7xl w-full p-0 [&>button]:hidden ${isMobile ? 'max-h-screen h-screen' : 'max-h-[90vh]'}`}>
+        <div 
+          className="relative bg-black rounded-lg overflow-hidden touch-none" 
+          onKeyDown={handleKeyDown} 
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+          tabIndex={0}
+        >
           {/* Close button */}
           <Button
             variant="ghost"
-            size="sm"
+            size={isMobile ? "default" : "sm"}
             onClick={onClose}
-            className="absolute top-4 right-4 z-20 text-white hover:bg-white/10"
+            className={`absolute z-20 text-white hover:bg-white/10 ${isMobile ? 'top-2 right-2 h-10 w-10 p-0' : 'top-4 right-4'}`}
           >
-            <X className="h-4 w-4" />
+            <X className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
           </Button>
 
           {/* Header */}
-          <div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
+          <div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}>
             <div className="text-white">
-              <h3 className="font-medium">
+              <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
                 {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
               </h3>
               {photos.length > 1 && (
-                <p className="text-sm text-white/70">
+                <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
                   {currentIndex + 1} of {photos.length}
                 </p>
               )}
@@ -62,17 +105,19 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
           </div>
 
           {/* Image */}
-          <div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
+          <div className={`flex items-center justify-center ${isMobile ? 'min-h-screen' : 'min-h-[400px] max-h-[80vh]'}`}>
             <img
+              ref={imageRef}
               src={currentPhoto?.url}
               alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
-              className="max-w-full max-h-full object-contain"
+              className="max-w-full max-h-full object-contain select-none"
               loading="lazy"
+              draggable={false}
             />
           </div>
 
           {/* Navigation */}
-          {photos.length > 1 && (
+          {photos.length > 1 && !isMobile && (
             <>
               <Button
                 variant="ghost"
@@ -92,11 +137,29 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
               </Button>
             </>
           )}
+          
+          {/* Mobile navigation dots */}
+          {photos.length > 1 && isMobile && (
+            <div className="absolute bottom-20 left-0 right-0 flex justify-center gap-2 px-4">
+              {photos.map((_, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => setCurrentIndex(idx)}
+                  className={`h-2 rounded-full transition-all ${
+                    idx === currentIndex 
+                      ? 'w-8 bg-white' 
+                      : 'w-2 bg-white/50'
+                  }`}
+                  aria-label={`Go to photo ${idx + 1}`}
+                />
+              ))}
+            </div>
+          )}
 
           {/* Caption */}
           {currentPhoto?.caption && (
-            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
-              <p className="text-white text-sm">{currentPhoto.caption}</p>
+            <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'} ${isMobile && photos.length > 1 ? 'pb-14' : ''}`}>
+              <p className={`text-white ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentPhoto.caption}</p>
             </div>
           )}
         </div>