Refine Health import event presentation

assets/css/app.css

@@ -743,12 +743,26 @@ body.page-dashboard .content {
 }
 
 .timeline-card__image {
-    grid-column: 1 / -1;
     width: 100%;
+    height: 100%;
     max-height: 18rem;
     object-fit: cover;
     border-radius: 1.25rem;
-    margin-bottom: 0.2rem;
+    display: block;
+}
+
+.timeline-media-button {
+    grid-column: 1 / -1;
+    width: 100%;
+    min-height: 11rem;
+    max-height: 18rem;
+    padding: 0;
+    margin: 0 0 0.2rem;
+    border: 0;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.08);
+    cursor: zoom-in;
 }
 
 .timeline-card__time-chip {
@@ -832,14 +846,16 @@ body.page-dashboard .content {
 
 .timeline-route-map {
     position: relative;
+    grid-column: 1 / -1;
     width: 100%;
-    max-width: 24rem;
     height: 10.5rem;
-    margin-top: 0.8rem;
+    margin-top: 0.2rem;
+    padding: 0;
     overflow: hidden;
     border-radius: 1.1rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(255, 255, 255, 0.08);
+    cursor: zoom-in;
 }
 
 .timeline-route-map svg {
@@ -858,7 +874,7 @@ body.page-dashboard .content {
     filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
 }
 
-.timeline-route-map a {
+.timeline-route-map__credit {
     position: absolute;
     right: 0.35rem;
     bottom: 0.28rem;
@@ -867,7 +883,96 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.82);
     color: rgba(10, 22, 35, 0.82);
     font-size: 0.66rem;
-    text-decoration: none;
+}
+
+.sleep-phase-bar {
+    display: flex;
+    min-height: 2.35rem;
+    margin-top: 0.75rem;
+    overflow: hidden;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.sleep-phase-bar__segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    min-width: max-content;
+    padding: 0.35rem 0.65rem;
+    color: rgba(255, 255, 255, 0.94);
+    font-size: 0.82rem;
+    white-space: nowrap;
+}
+
+.sleep-phase-bar__segment--deep {
+    background: linear-gradient(135deg, rgba(44, 82, 180, 0.92), rgba(38, 52, 124, 0.92));
+}
+
+.sleep-phase-bar__segment--rem {
+    background: linear-gradient(135deg, rgba(120, 83, 210, 0.92), rgba(73, 60, 154, 0.92));
+}
+
+.sleep-phase-bar__segment--core {
+    background: linear-gradient(135deg, rgba(54, 147, 173, 0.92), rgba(38, 106, 135, 0.92));
+}
+
+.media-lightbox[hidden] {
+    display: none;
+}
+
+.media-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1200;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+}
+
+.media-lightbox__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.media-lightbox__panel {
+    position: relative;
+    z-index: 1;
+    width: min(96vw, 72rem);
+    max-height: 92vh;
+}
+
+.media-lightbox__close {
+    position: absolute;
+    right: 0.75rem;
+    top: 0.75rem;
+    z-index: 2;
+    width: 2.6rem;
+    height: 2.6rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.24);
+    background: rgba(20, 28, 38, 0.72);
+    color: #fff;
+    font-size: 1.5rem;
+}
+
+.media-lightbox__content img,
+.media-lightbox__content .timeline-route-map {
+    width: 100%;
+    max-width: none;
+    height: min(72vh, 42rem);
+    border-radius: 1.4rem;
+    object-fit: contain;
+}
+
+.media-lightbox__content .timeline-route-map {
+    cursor: default;
 }
 
 .timeline-card__meta strong {

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();