refactor(archive): redesign segmented archive experience

assets/js/app.js

@@ -70,6 +70,25 @@
         });
     }
 
+    function initArchiveMobileDetail() {
+        if (!document.body.classList.contains("page-archive")) {
+            return;
+        }
+
+        const isMobileViewport = () => window.matchMedia("(max-width: 820px)").matches;
+        const detail = document.querySelector("#archive-detail-panel[data-detail-open='1']");
+
+        if (!detail || !isMobileViewport()) {
+            return;
+        }
+
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                detail.scrollIntoView({ block: "start", behavior: "smooth" });
+            });
+        });
+    }
+
     function sleepDurationPoints(hours, points) {
         if (hours < 4) {
             return Number(points.lt4 || 0);
@@ -542,8 +561,12 @@
         }
 
         function calendarColor(entry) {
+            const isLightMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+
             if (!entry) {
-                return "rgba(255, 255, 255, 0.06)";
+                return isLightMode
+                    ? "rgba(86, 124, 156, 0.11)"
+                    : "rgba(255, 255, 255, 0.06)";
             }
 
             const ratio = Math.max(0, Math.min(1, Number(entry.score) / Math.max(Number(entry.max || 1), 1)));
@@ -644,6 +667,7 @@
         const yOffset = config.yOffset;
         const gridHeight = (7 * cellSize) + (6 * verticalGap);
         const height = yOffset + gridHeight + 8;
+        const sundayLabelY = yOffset + (6 * (cellSize + verticalGap)) + (cellSize * 0.78);
         const rightPadding = 4;
         const naturalWidth = xOffset + (totalWeeks * cellSize) + ((totalWeeks - 1) * baseCellGap) + rightPadding;
         const availableWidth = Math.floor(container.clientWidth || 0);
@@ -718,6 +742,7 @@
                 <text class="calendar-tooltip" x="0" y="34">Mo</text>
                 <text class="calendar-tooltip" x="0" y="68">Mi</text>
                 <text class="calendar-tooltip" x="0" y="102">Fr</text>
+                <text class="calendar-tooltip" x="0" y="${sundayLabelY}">So</text>
                 ${cells}
             </svg>
             <div class="calendar-legend">
@@ -1273,6 +1298,7 @@
     updateRangeOutputs();
     initHeaderDatePicker();
     initTrackPreview();
+    initArchiveMobileDetail();
     initDashboardCharts();
     initSportTypeManager();
     initPwaShell();