Slide day header and prefetch adjacent days

assets/css/app.css

@@ -468,14 +468,20 @@ body.page-dashboard .content {
     height: 11rem;
     margin-top: 0.95rem;
     touch-action: pan-y;
-    transform: translateX(var(--day-strip-offset, 0));
+}
+
+.dashboard-compare-strip.is-dragging {
+    cursor: grabbing;
+}
+
+.dashboard-day__hero[data-day-slider] {
+    transform: translateX(var(--day-slider-offset, 0));
     transition: transform 180ms ease;
     will-change: transform;
 }
 
-.dashboard-compare-strip.is-dragging {
+.dashboard-day__hero[data-day-slider].is-dragging {
     transition: none;
-    cursor: grabbing;
 }
 
 .compare-day {

assets/js/app.js

@@ -1014,6 +1014,7 @@
         const unitInput = document.querySelector("[data-event-unit]");
         const swipeContainer = document.querySelector("[data-day-swipe]");
         const dayStrip = document.querySelector("[data-day-strip]");
+        const daySlider = document.querySelector("[data-day-slider]");
         const periodRail = document.querySelector(".range-period-rail");
 
         const walkMode = document.body.dataset.walkMode || "time";
@@ -1447,7 +1448,7 @@
             typeSelect.addEventListener("change", syncUnit);
         }
 
-        if (swipeContainer && dayStrip) {
+        if (swipeContainer && dayStrip && daySlider) {
             let pointerStartX = 0;
             let pointerStartY = 0;
             let dragging = false;
@@ -1456,7 +1457,8 @@
 
             const resetStrip = () => {
                 dayStrip.classList.remove("is-dragging");
-                dayStrip.style.setProperty("--day-strip-offset", "0px");
+                daySlider.classList.remove("is-dragging");
+                daySlider.style.setProperty("--day-slider-offset", "0px");
             };
 
             const handleSwipe = (deltaX, deltaY) => {
@@ -1467,11 +1469,11 @@
 
                 if (deltaX < 0 && swipeContainer.dataset.nextDate) {
                     didSwipe = true;
-                    dayStrip.style.setProperty("--day-strip-offset", "-120%");
+                    daySlider.style.setProperty("--day-slider-offset", "-120%");
                     window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
                 } else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
                     didSwipe = true;
-                    dayStrip.style.setProperty("--day-strip-offset", "120%");
+                    daySlider.style.setProperty("--day-slider-offset", "120%");
                     window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
                 } else {
                     resetStrip();
@@ -1490,6 +1492,7 @@
                 pointerStartX = event.clientX;
                 pointerStartY = event.clientY;
                 dayStrip.classList.add("is-dragging");
+                daySlider.classList.add("is-dragging");
                 dayStrip.setPointerCapture?.(event.pointerId);
             });
 
@@ -1507,7 +1510,7 @@
                     return;
                 }
 
-                dayStrip.style.setProperty("--day-strip-offset", `${Math.max(-120, Math.min(120, deltaX))}px`);
+                daySlider.style.setProperty("--day-slider-offset", `${Math.max(-120, Math.min(120, deltaX))}px`);
             });
 
             dayStrip.addEventListener("pointerup", event => {