Add a thumbnail filmstrip to the photo lightbox.

- Render a horizontally scrollable strip of thumbnails below the image
  that highlights and auto-centres the active photo and lets you jump
  straight to any shot.
- Pass thumbUrl through from the public and admin galleries, falling
  back to previewUrl when no thumbnail exists.
- Restructure the overlay into a flex column (image area + strip) and
  require a clearly horizontal gesture before treating a touch as a
  prev/next swipe, so vertical scrolls no longer trigger navigation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/app/(public)/photos/[slug]/GalleryClient.tsx

@@ -149,6 +149,7 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
     previewUrl: p.urls.preview || p.urls.original,
     downloadUrl: p.urls.original,
     filename: p.originalFilename,
+    thumbUrl: p.urls.thumb,
   }));
 
   const title = es && gallery.titleEs ? gallery.titleEs : gallery.title;

frontend/src/app/admin/photos/[id]/page.tsx

@@ -266,6 +266,7 @@ export default function AdminGalleryDetailPage() {
     previewUrl: p.urls.preview || p.urls.original,
     downloadUrl: p.urls.original,
     filename: p.originalFilename,
+    thumbUrl: p.urls.thumb,
   }));
   const openLightboxFor = (photoId: string) => {
     const idx = readyPhotos.findIndex((p) => p.id === photoId);

frontend/src/components/Lightbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useCallback, useState } from 'react';
+import { useEffect, useCallback, useRef, useState } from 'react';
 import {
   XMarkIcon,
   ChevronLeftIcon,
@@ -13,6 +13,8 @@ export interface LightboxItem {
   previewUrl: string;
   downloadUrl: string;
   filename?: string;
+  /** Small thumbnail for the filmstrip; falls back to previewUrl. */
+  thumbUrl?: string;
 }
 
 interface LightboxProps {
@@ -29,8 +31,10 @@ interface LightboxProps {
  * style of the admin gallery preview modal (fixed inset-0 bg-black/90).
  */
 export default function Lightbox({ items, index, onClose, onNavigate, renderActions }: LightboxProps) {
-  const [touchStartX, setTouchStartX] = useState<number | null>(null);
+  const touchStart = useRef<{ x: number; y: number } | null>(null);
+  const activeThumbRef = useRef<HTMLButtonElement | null>(null);
   const item = items[index];
+  const hasMultiple = items.length > 1;
 
   const prev = useCallback(() => {
     onNavigate(index > 0 ? index - 1 : items.length - 1);
@@ -53,19 +57,33 @@ export default function Lightbox({ items, index, onClose, onNavigate, renderActi
     };
   }, [onClose, prev, next]);
 
+  // Keep the active thumbnail centred in the filmstrip as you navigate.
+  useEffect(() => {
+    activeThumbRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'center',
+      block: 'nearest',
+    });
+  }, [index]);
+
   if (!item) return null;
 
   return (
     <div
-      className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
+      className="fixed inset-0 bg-black/90 z-50 flex flex-col"
       onClick={onClose}
-      onTouchStart={(e) => setTouchStartX(e.touches[0].clientX)}
+      onTouchStart={(e) => {
+        touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+      }}
       onTouchEnd={(e) => {
-        if (touchStartX === null) return;
+        if (touchStart.current === null) return;
-        const dx = e.changedTouches[0].clientX - touchStartX;
+        const dx = e.changedTouches[0].clientX - touchStart.current.x;
-        if (dx > 60) prev();
+        const dy = e.changedTouches[0].clientY - touchStart.current.y;
-        if (dx < -60) next();
+        touchStart.current = null;
-        setTouchStartX(null);
+        // Only treat as a swipe when it's clearly horizontal.
+        if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy)) return;
+        if (dx > 0) prev();
+        else next();
       }}
     >
       <button
@@ -91,47 +109,84 @@ export default function Lightbox({ items, index, onClose, onNavigate, renderActi
         {renderActions?.(item, index)}
       </div>
 
-      {items.length > 1 && (
+      {/* Main image area */}
-        <>
+      <div className="relative flex-1 min-h-0 flex items-center justify-center">
-          <button
+        {hasMultiple && (
-            className="absolute left-2 md:left-4 text-white/80 hover:text-white z-10 p-2"
+          <>
-            onClick={(e) => {
+            <button
-              e.stopPropagation();
+              className="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white z-10 p-2"
-              prev();
+              onClick={(e) => {
-            }}
+                e.stopPropagation();
-            aria-label="Previous"
+                prev();
-          >
+              }}
-            <ChevronLeftIcon className="w-9 h-9" />
+              aria-label="Previous"
-          </button>
+            >
-          <button
+              <ChevronLeftIcon className="w-9 h-9" />
-            className="absolute right-2 md:right-4 text-white/80 hover:text-white z-10 p-2"
+            </button>
-            onClick={(e) => {
+            <button
-              e.stopPropagation();
+              className="absolute right-2 md:right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white z-10 p-2"
-              next();
+              onClick={(e) => {
-            }}
+                e.stopPropagation();
-            aria-label="Next"
+                next();
-          >
+              }}
-            <ChevronRightIcon className="w-9 h-9" />
+              aria-label="Next"
-          </button>
+            >
-        </>
+              <ChevronRightIcon className="w-9 h-9" />
-      )}
+            </button>
+          </>
+        )}
 
-      {/* eslint-disable-next-line @next/next/no-img-element */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
+        <img
-        src={item.previewUrl}
+          src={item.previewUrl}
-        alt=""
+          alt=""
-        className="max-w-[95vw] max-h-[90vh] object-contain select-none"
+          className="max-w-[95vw] max-h-full object-contain select-none"
+          onClick={(e) => e.stopPropagation()}
+          draggable={false}
+        />
+      </div>
+
+      {/* Counter + thumbnail filmstrip you can skip through. */}
+      <div
+        className="shrink-0 pb-3 pt-2"
         onClick={(e) => e.stopPropagation()}
-        draggable={false}
+        onTouchStart={(e) => e.stopPropagation()}
-      />
+        onTouchEnd={(e) => e.stopPropagation()}
-
+      >
-      <div className="absolute bottom-3 inset-x-0 text-center text-white/70 text-sm">
+        <div className="text-center text-white/70 text-sm mb-2">
-        {index + 1} / {items.length}
+          {index + 1} / {items.length}
+        </div>
+        {hasMultiple && (
+          <div className="flex gap-2 overflow-x-auto px-4 pb-1 justify-start sm:justify-center [scrollbar-width:thin]">
+            {items.map((it, i) => (
+              <button
+                key={it.id}
+                ref={i === index ? activeThumbRef : null}
+                onClick={() => onNavigate(i)}
+                aria-label={`Photo ${i + 1}`}
+                aria-current={i === index}
+                className={`relative shrink-0 overflow-hidden rounded transition ${
+                  i === index
+                    ? 'ring-2 ring-white opacity-100'
+                    : 'opacity-50 hover:opacity-90'
+                }`}
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={it.thumbUrl || it.previewUrl}
+                  alt=""
+                  className="h-14 w-14 sm:h-16 sm:w-16 object-cover"
+                  draggable={false}
+                />
+              </button>
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Preload neighbours so prev/next feels instant. */}
       <div className="hidden" aria-hidden>
-        {items.length > 1 && (
+        {hasMultiple && (
           <>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img src={items[(index + 1) % items.length].previewUrl} alt="" />