Refine Health import event presentation

assets/js/app.js

@@ -1651,6 +1651,54 @@
         timer = window.setInterval(refresh, 3500);
     }
 
+    function initMediaLightbox() {
+        const lightbox = document.querySelector("[data-media-lightbox]");
+        const content = document.querySelector("[data-media-lightbox-content]");
+        if (!(lightbox instanceof HTMLElement) || !(content instanceof HTMLElement)) {
+            return;
+        }
+
+        const close = () => {
+            lightbox.setAttribute("hidden", "hidden");
+            content.replaceChildren();
+            document.body.classList.remove("is-dashboard-overlay-open");
+        };
+
+        document.querySelectorAll("[data-media-lightbox-close]").forEach(button => {
+            button.addEventListener("click", close);
+        });
+
+        document.addEventListener("keydown", event => {
+            if (event.key === "Escape" && !lightbox.hasAttribute("hidden")) {
+                close();
+            }
+        });
+
+        document.querySelectorAll("[data-lightbox-kind]").forEach(trigger => {
+            trigger.addEventListener("click", event => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                content.replaceChildren();
+                if (trigger.dataset.lightboxKind === "image") {
+                    const image = document.createElement("img");
+                    image.src = trigger.dataset.lightboxSrc || "";
+                    image.alt = "";
+                    content.appendChild(image);
+                } else {
+                    const clone = trigger.cloneNode(true);
+                    clone.removeAttribute("data-lightbox-kind");
+                    clone.removeAttribute("aria-label");
+                    clone.disabled = true;
+                    content.appendChild(clone);
+                }
+
+                lightbox.removeAttribute("hidden");
+                document.body.classList.add("is-dashboard-overlay-open");
+            });
+        });
+    }
+
     function csrfToken() {
         return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") || "";
     }
@@ -1983,6 +2031,7 @@
     initDashboardExperience();
     initOptionsPanels();
     initHealthImportStatus();
+    initMediaLightbox();
     initSportTypeManager();
     initPwaShell();
     initPullToRefresh();