Improve component stability and user experience with safety checks

Implement robust error handling, safety checks for data structures, and state management improvements across various components to prevent runtime errors and enhance user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a71e826a-1d38-4b6e-a34f-fbf5ba1f1b25
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

src/components/moderation/PhotoModal.tsx

@@ -23,7 +23,19 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
   const [touchEnd, setTouchEnd] = useState<number | null>(null);
   const imageRef = useRef<HTMLImageElement>(null);
   
-  const currentPhoto = photos[currentIndex];
+  // Safety check: ensure photos array exists and is not empty
+  if (!photos || photos.length === 0) {
+    return null;
+  }
+  
+  // Clamp currentIndex to valid bounds
+  const safeIndex = Math.max(0, Math.min(currentIndex, photos.length - 1));
+  const currentPhoto = photos[safeIndex];
+  
+  // Early return if currentPhoto is undefined
+  if (!currentPhoto) {
+    return null;
+  }
   
   // Minimum swipe distance (in px)
   const minSwipeDistance = 50;
@@ -100,7 +112,7 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
               )}
               {photos.length > 1 && (
                 <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
-                  {currentIndex + 1} of {photos.length}
+                  {safeIndex + 1} of {photos.length}
                 </p>
               )}
             </div>
@@ -111,7 +123,7 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
             <img
               ref={imageRef}
               src={currentPhoto?.url}
-              alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
+              alt={currentPhoto?.caption || `Photo ${safeIndex + 1}`}
               className="max-w-full max-h-full object-contain select-none"
               loading="lazy"
               draggable={false}