Make day strip draggable and fix sleep bars

assets/js/app.js

@@ -1013,6 +1013,7 @@
         const typeSelect = document.querySelector("[data-event-type-select]");
         const unitInput = document.querySelector("[data-event-unit]");
         const swipeContainer = document.querySelector("[data-day-swipe]");
+        const dayStrip = document.querySelector("[data-day-strip]");
         const periodRail = document.querySelector(".range-period-rail");
 
         const walkMode = document.body.dataset.walkMode || "time";
@@ -1446,27 +1447,38 @@
             typeSelect.addEventListener("change", syncUnit);
         }
 
-        if (swipeContainer) {
+        if (swipeContainer && dayStrip) {
             let pointerStartX = 0;
             let pointerStartY = 0;
             let dragging = false;
             let didSwipe = false;
+            let activePointerId = null;
+
+            const resetStrip = () => {
+                dayStrip.classList.remove("is-dragging");
+                dayStrip.style.setProperty("--day-strip-offset", "0px");
+            };
 
             const handleSwipe = (deltaX, deltaY) => {
                 if (document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
+                    resetStrip();
                     return;
                 }
 
                 if (deltaX < 0 && swipeContainer.dataset.nextDate) {
                     didSwipe = true;
+                    dayStrip.style.setProperty("--day-strip-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%");
                     window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
+                } else {
+                    resetStrip();
                 }
             };
 
-            swipeContainer.addEventListener("pointerdown", event => {
+            dayStrip.addEventListener("pointerdown", event => {
                 if (event.target.closest("input, textarea, select, label, [data-stepper], .dashboard-overlay")) {
                     dragging = false;
                     return;
@@ -1474,24 +1486,57 @@
 
                 didSwipe = false;
                 dragging = true;
+                activePointerId = event.pointerId;
                 pointerStartX = event.clientX;
                 pointerStartY = event.clientY;
+                dayStrip.classList.add("is-dragging");
+                dayStrip.setPointerCapture?.(event.pointerId);
             });
 
-            swipeContainer.addEventListener("pointerup", event => {
+            dayStrip.addEventListener("pointermove", event => {
+                if (!dragging || (activePointerId !== null && event.pointerId !== activePointerId)) {
+                    return;
+                }
+
+                const deltaX = event.clientX - pointerStartX;
+                const deltaY = event.clientY - pointerStartY;
+                if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 20) {
+                    dragging = false;
+                    activePointerId = null;
+                    resetStrip();
+                    return;
+                }
+
+                dayStrip.style.setProperty("--day-strip-offset", `${Math.max(-120, Math.min(120, deltaX))}px`);
+            });
+
+            dayStrip.addEventListener("pointerup", event => {
                 if (!dragging) {
                     return;
                 }
 
                 dragging = false;
+                activePointerId = null;
                 handleSwipe(event.clientX - pointerStartX, event.clientY - pointerStartY);
             });
 
-            swipeContainer.addEventListener("pointercancel", () => {
+            dayStrip.addEventListener("pointercancel", () => {
                 dragging = false;
+                activePointerId = null;
+                resetStrip();
             });
 
-            swipeContainer.addEventListener("click", event => {
+            dayStrip.addEventListener("lostpointercapture", () => {
+                if (!dragging) {
+                    return;
+                }
+
+                dragging = false;
+                activePointerId = null;
+                resetStrip();
+            });
+
+            dayStrip.addEventListener("click", event => {
                 if (!didSwipe) {
                     return;
                 }