From 99d1c46b7f5537f398a397a2d36731031debe71d Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Sun, 12 Jul 2026 10:36:29 +0200
Subject: [PATCH] reference support

---
 components/shoot-log/TakeEditorPanel.tsx | 187 ++++++++++++++++++-----
 1 file changed, 151 insertions(+), 36 deletions(-)

diff --git a/components/shoot-log/TakeEditorPanel.tsx b/components/shoot-log/TakeEditorPanel.tsx
index e28076d..98ec018 100644
--- a/components/shoot-log/TakeEditorPanel.tsx
+++ b/components/shoot-log/TakeEditorPanel.tsx
@@ -213,7 +213,88 @@ interface LinkedShot {
   references: { id: string; fileUrl: string; fileName: string; label: string | null }[];
 }
 
+interface LightboxItem {
+  url: string;
+  label: string;
+}
+
+function ShotLightbox({
+  items,
+  index,
+  onClose,
+}: {
+  items: LightboxItem[];
+  index: number;
+  onClose: () => void;
+}) {
+  const [current, setCurrent] = useState(index);
+  const item = items[current];
+
+  // Keyboard navigation
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft") setCurrent((c) => Math.max(0, c - 1));
+      if (e.key === "ArrowRight") setCurrent((c) => Math.min(items.length - 1, c + 1));
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [items.length, onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/90 flex flex-col items-center justify-center"
+      onClick={onClose}
+    >
+      <button
+        className="absolute top-4 right-4 text-white/70 hover:text-white p-2"
+        onClick={onClose}
+      >
+        <X className="h-6 w-6" />
+      </button>
+
+      <div
+        className="max-w-[90vw] max-h-[80vh] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={item.url}
+          alt={item.label}
+          className="max-w-full max-h-[80vh] object-contain rounded-lg"
+        />
+      </div>
+
+      <p className="mt-3 text-sm text-zinc-300">{item.label}</p>
+
+      {items.length > 1 && (
+        <div className="flex gap-4 mt-4" onClick={(e) => e.stopPropagation()}>
+          <button
+            disabled={current === 0}
+            onClick={() => setCurrent((c) => c - 1)}
+            className="px-4 py-2 rounded bg-zinc-800 text-zinc-300 disabled:opacity-30 hover:bg-zinc-700 text-sm"
+          >
+            ← Prev
+          </button>
+          <span className="text-zinc-500 text-sm self-center">
+            {current + 1} / {items.length}
+          </span>
+          <button
+            disabled={current === items.length - 1}
+            onClick={() => setCurrent((c) => c + 1)}
+            className="px-4 py-2 rounded bg-zinc-800 text-zinc-300 disabled:opacity-30 hover:bg-zinc-700 text-sm"
+          >
+            Next →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function LinkedShotPanel({ shotId }: { shotId: string }) {
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
   const { data, isLoading } = useQuery<{ shot: LinkedShot }>({
     queryKey: ["linked-shot", shotId],
     queryFn: async () => {
@@ -239,46 +320,80 @@ function LinkedShotPanel({ shotId }: { shotId: string }) {
   const hasContent = shot.thumbnailUrl || shot.references.length > 0;
   if (!hasContent) return null;
 
+  // Build a flat list of lightbox items: thumbnail first, then references
+  const lightboxItems: LightboxItem[] = [
+    ...(shot.thumbnailUrl
+      ? [{ url: shot.thumbnailUrl, label: `${shot.shotCode} — Thumbnail` }]
+      : []),
+    ...shot.references.map((ref) => ({
+      url: ref.fileUrl,
+      label: ref.label ?? ref.fileName,
+    })),
+  ];
+
+  // Index offsets: thumbnail is 0 (if present), refs start at offset
+  const thumbLightboxIndex = shot.thumbnailUrl ? 0 : null;
+  const refLightboxOffset = shot.thumbnailUrl ? 1 : 0;
+
   return (
-    <div className="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 space-y-3">
-      <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
-        <BookImage className="h-3 w-3" />
-        Shot Reference — {shot.shotCode}
+    <>
+      <div className="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 space-y-3">
+        <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+          <BookImage className="h-3 w-3" />
+          Shot Reference — {shot.shotCode}
+        </div>
+
+        {shot.thumbnailUrl && (
+          <div
+            className="relative w-full max-w-xs aspect-[2.39] rounded-md overflow-hidden border border-zinc-700 cursor-zoom-in group"
+            onClick={() => setLightboxIndex(thumbLightboxIndex!)}
+          >
+            <Image
+              src={shot.thumbnailUrl}
+              alt={shot.shotCode}
+              fill
+              className="object-cover transition-transform group-hover:scale-105"
+              sizes="320px"
+            />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
+          </div>
+        )}
+
+        {shot.references.length > 0 && (
+          <div className="grid grid-cols-4 gap-2">
+            {shot.references.map((ref, i) => (
+              <div
+                key={ref.id}
+                className="relative aspect-square rounded-md overflow-hidden border border-zinc-700 bg-zinc-950 cursor-zoom-in group"
+                onClick={() => setLightboxIndex(refLightboxOffset + i)}
+              >
+                <Image
+                  src={ref.fileUrl}
+                  alt={ref.label ?? ref.fileName}
+                  fill
+                  className="object-cover transition-transform group-hover:scale-105"
+                  sizes="100px"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
+                {ref.label && (
+                  <div className="absolute bottom-0 inset-x-0 bg-black/70 text-[9px] text-zinc-300 truncate px-1 py-0.5">
+                    {ref.label}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
-      {shot.thumbnailUrl && (
-        <div className="relative w-full max-w-xs aspect-[2.39] rounded-md overflow-hidden border border-zinc-700">
-          <Image
-            src={shot.thumbnailUrl}
-            alt={shot.shotCode}
-            fill
-            className="object-cover"
-            sizes="320px"
-          />
-        </div>
+      {lightboxIndex !== null && (
+        <ShotLightbox
+          items={lightboxItems}
+          index={lightboxIndex}
+          onClose={() => setLightboxIndex(null)}
+        />
       )}
-
-      {shot.references.length > 0 && (
-        <div className="grid grid-cols-4 gap-2">
-          {shot.references.map((ref) => (
-            <div key={ref.id} className="relative aspect-square rounded-md overflow-hidden border border-zinc-700 bg-zinc-950 group">
-              <Image
-                src={ref.fileUrl}
-                alt={ref.label ?? ref.fileName}
-                fill
-                className="object-cover"
-                sizes="100px"
-              />
-              {ref.label && (
-                <div className="absolute bottom-0 inset-x-0 bg-black/70 text-[9px] text-zinc-300 truncate px-1 py-0.5">
-                  {ref.label}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+    </>
   );
 }