Refine swipe affordance and sleep bar

assets/css/app.css

@@ -477,6 +477,7 @@ body.page-dashboard .content {
     z-index: 0;
     display: inline-flex;
     align-items: center;
+    gap: 0.48rem;
     min-height: 3rem;
     max-width: min(12rem, 42vw);
     padding: 0.8rem 1rem;
@@ -494,6 +495,22 @@ body.page-dashboard .content {
     transition: opacity 120ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+.day-slide-hint__arrow {
+    width: 0.8rem;
+    height: 0.8rem;
+    border-top: 2px solid currentColor;
+    border-left: 2px solid currentColor;
+    opacity: 0.9;
+}
+
+.day-slide-hint--prev .day-slide-hint__arrow {
+    transform: rotate(-45deg);
+}
+
+.day-slide-hint--next .day-slide-hint__arrow {
+    transform: rotate(135deg);
+}
+
 .day-slide-hint--prev {
     left: 0.75rem;
     opacity: var(--day-prev-hint);
@@ -523,6 +540,7 @@ body.page-dashboard .content {
     position: relative;
     z-index: 1;
     margin-bottom: 0;
+    touch-action: pan-y;
     transform: translate3d(var(--day-slider-offset, 0), 0, 0) scale(var(--day-slider-scale, 1));
     transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
     will-change: transform;
@@ -978,7 +996,7 @@ body.page-dashboard .content {
 
 .sleep-phase-bar {
     position: relative;
-    min-height: 2.35rem;
+    height: 2.35rem;
     margin-top: 1.55rem;
     overflow: visible;
     border-radius: 999px;
@@ -986,6 +1004,17 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.08);
 }
 
+.sleep-phase-bar__fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    display: flex;
+    width: var(--sleep-actual-width, 0);
+    min-width: 0.18rem;
+    overflow: hidden;
+    border-radius: inherit;
+    box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2);
+}
+
 .sleep-phase-bar__target {
     position: absolute;
     left: min(var(--sleep-optimal-left, 100%), calc(100% - 2px));
@@ -1012,11 +1041,10 @@ body.page-dashboard .content {
 
 .sleep-phase-bar__segment {
     box-sizing: border-box;
-    position: absolute;
-    left: var(--sleep-segment-left, 0);
-    top: 0;
-    bottom: 0;
+    position: relative;
     width: var(--sleep-segment-width, auto);
+    height: 100%;
+    flex: 0 0 var(--sleep-segment-width, auto);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1092,10 +1120,24 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.1);
 }
 
-.sleep-phase-bar__segment:last-of-type {
+.sleep-phase-bar__fill .sleep-phase-bar__segment:last-child {
     border-radius: 0 999px 999px 0;
 }
 
+.sleep-phase-bar__fill .sleep-phase-bar__segment:first-child {
+    border-radius: 999px 0 0 999px;
+}
+
+.sleep-phase-bar__rest-label {
+    position: absolute;
+    right: 0.65rem;
+    top: 50%;
+    color: rgba(255, 255, 255, 0.52);
+    font-size: 0.68rem;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
 .media-lightbox[hidden] {
     display: none;
 }

assets/js/app.js

@@ -1512,7 +1512,9 @@
             };
 
             const handleSwipe = (deltaX, deltaY) => {
-                if (document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
+                const absX = Math.abs(deltaX);
+                const absY = Math.abs(deltaY);
+                if (document.body.classList.contains("is-dashboard-overlay-open") || absX < 55 || absY > Math.max(120, absX * 1.15)) {
                     resetStrip();
                     return;
                 }
@@ -1553,7 +1555,7 @@
 
                 const deltaX = event.clientX - pointerStartX;
                 const deltaY = event.clientY - pointerStartY;
-                if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 20) {
+                if (Math.abs(deltaY) > Math.max(52, Math.abs(deltaX) * 1.35)) {
                     dragging = false;
                     activePointerId = null;
                     resetStrip();