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 => {

templates/layout.php

@@ -36,6 +36,10 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa
     <link rel="shortcut icon" href="/favicon.ico?v=20260412">
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/branding/apple-touch-icon.png?v=20260412">
     <link rel="manifest" href="/manifest.webmanifest">
+    <?php if (($page ?? '') === 'dashboard' && ($dashboardView ?? '') === 'day'): ?>
+        <link rel="prefetch" href="/?view=day&amp;date=<?= e(rawurlencode((string) ($dashboardPrevDate ?? shift_date(today(), -1)))) ?>">
+        <link rel="prefetch" href="/?view=day&amp;date=<?= e(rawurlencode((string) ($dashboardNextDate ?? shift_date(today(), 1)))) ?>">
+    <?php endif; ?>
     <link rel="stylesheet" href="/assets/css/app.css?v=<?= e($cssVersion) ?>">
     <script defer src="/assets/js/app.js?v=<?= e($jsVersion) ?>"></script>
 </head>

templates/pages/dashboard.php

@@ -55,7 +55,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
 
     <?php if ($dashboardView === 'day'): ?>
         <div class="dashboard-day" data-day-swipe data-prev-date="<?= e($dashboardPrevDate) ?>" data-next-date="<?= e($dashboardNextDate) ?>">
-            <div class="dashboard-day__hero">
+            <div class="dashboard-day__hero" data-day-slider>
                 <p class="dashboard-day__eyebrow"><?= e((string) $dayWeekday) ?></p>
                 <h1><?= e(format_display_date((string) $dayEntry['date'], false)) ?></h1>