From 0b73bafa81160c1eef1a4b6cd34e22dd01df7d06 Mon Sep 17 00:00:00 2001
From: EiSiMo <mail@moritz.run>
Date: Thu, 23 Apr 2026 12:53:15 +0200
Subject: [PATCH] debug(lightbox): trace IIFE init, partial-fetch contents,
 tile clicks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lightbox still not opening on the user's side after the style.display
switch. Wire console.log() at every checkpoint so we can read off
DevTools where the chain breaks:

- partial fetch logs how many .flat-gallery-tile / a.flat-gallery-tile
  elements arrived and the first 200 chars of HTML — catches stale
  partial caches and template regressions.
- IIFE init logs whether the overlay element and each child were found.
- The delegated click handler logs every tile click, the gallery
  tile/url counts, and the open() call. A sibling branch logs clicks
  *inside* the gallery that don't match a tile (catches markup drift).
- open() logs the final computed display value so we can tell whether
  CSS still hides the overlay after the style change.
- A window.error listener catches any uncaught exception that would
  abort app.js before our IIFE registers its handlers.

All log lines are prefixed `[lazyflat.lightbox]` and tagged
`DEBUG(lightbox):` in source for easy removal once it's confirmed
working.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/static/app.js | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/web/static/app.js b/web/static/app.js
index a17e554..5a3961b 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -90,6 +90,11 @@ document.addEventListener("click", (ev) => {
     .then((html) => {
       pane.innerHTML = html;
       pane.dataset.loaded = "1";
+      // DEBUG(lightbox): confirm fetched partial actually contains <button class="flat-gallery-tile">
+      const tileCount = pane.querySelectorAll(".flat-gallery-tile").length;
+      const aTagCount = pane.querySelectorAll("a.flat-gallery-tile").length;
+      console.log("[lazyflat.lightbox] partial loaded flat=%s tiles=%d (a-tags=%d, html-snippet=%o)",
+                  flatId, tileCount, aTagCount, html.slice(0, 200));
     })
     .catch(() => {
       pane.innerHTML = '<div class="px-4 py-5 text-sm text-slate-500">Detail konnte nicht geladen werden.</div>';
@@ -136,7 +141,10 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
 // at runtime, which conflicted with our class toggle and kept the modal
 // invisible after open().
 (function () {
+  // DEBUG(lightbox): start-up trace, remove once the viewer is confirmed working.
+  console.log("[lazyflat.lightbox] IIFE start");
   const overlay = document.getElementById("lazyflat-lightbox");
+  console.log("[lazyflat.lightbox] overlay element:", overlay);
   if (!overlay) {
     console.warn("[lazyflat.lightbox] #lazyflat-lightbox not in DOM; viewer disabled");
     return;
@@ -146,6 +154,9 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
   const prevBtn = overlay.querySelector("[data-lightbox-prev]");
   const nextBtn = overlay.querySelector("[data-lightbox-next]");
   const closeBtn = overlay.querySelector("[data-lightbox-close]");
+  console.log("[lazyflat.lightbox] children:",
+              { imgEl: !!imgEl, counterEl: !!counterEl, prevBtn: !!prevBtn,
+                nextBtn: !!nextBtn, closeBtn: !!closeBtn });
   let urls = [];
   let idx = 0;
 
@@ -158,13 +169,19 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
   }
 
   function open(list, startIdx) {
-    if (!list.length) return;
+    console.log("[lazyflat.lightbox] open() called", { count: list && list.length, startIdx, list });
+    if (!list.length) {
+      console.warn("[lazyflat.lightbox] open() bailed — empty url list");
+      return;
+    }
     urls = list;
     idx = Math.max(0, Math.min(startIdx | 0, urls.length - 1));
     overlay.style.display = "flex";
     overlay.setAttribute("aria-hidden", "false");
     document.body.classList.add("lightbox-open");
     render();
+    console.log("[lazyflat.lightbox] open() done — overlay computed display:",
+                getComputedStyle(overlay).display, "src:", imgEl.src);
   }
 
   function close() {
@@ -197,14 +214,34 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
 
   document.addEventListener("click", (ev) => {
     const tile = ev.target.closest(".flat-gallery-tile");
-    if (!tile) return;
+    if (!tile) {
+      // DEBUG(lightbox): only log clicks somewhere INSIDE a gallery so we don't spam.
+      if (ev.target.closest && ev.target.closest(".flat-gallery")) {
+        console.log("[lazyflat.lightbox] click inside gallery but no .flat-gallery-tile ancestor",
+                    { target: ev.target, tagName: ev.target.tagName });
+      }
+      return;
+    }
+    console.log("[lazyflat.lightbox] tile clicked", { tile, target: ev.target,
+                tagName: tile.tagName, fullSrc: tile.dataset.fullSrc });
     const gallery = tile.closest(".flat-gallery");
-    if (!gallery) return;
+    if (!gallery) {
+      console.warn("[lazyflat.lightbox] tile has no .flat-gallery ancestor");
+      return;
+    }
     ev.preventDefault();
     const tiles = Array.from(gallery.querySelectorAll(".flat-gallery-tile"));
     const list = tiles
       .map((t) => t.dataset.fullSrc || (t.querySelector("img") || {}).src || "")
       .filter(Boolean);
+    console.log("[lazyflat.lightbox] gallery has", tiles.length, "tiles,", list.length, "valid urls");
     open(list, tiles.indexOf(tile));
   });
+  console.log("[lazyflat.lightbox] click delegate attached");
 })();
+
+// DEBUG(lightbox): catch any uncaught error so we know if app.js stopped
+// running before the IIFE attached its handlers.
+window.addEventListener("error", (ev) => {
+  console.error("[lazyflat.lightbox] window error:", ev.message, ev.filename + ":" + ev.lineno);
+});