From 7c9f464686ffa6ebcbce3bc148b7bd9b8305cceb Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Thu, 21 May 2026 12:36:53 +0200
Subject: [PATCH] Fix dashboard swipe and visual details

---
 assets/css/app.css            | 45 ++++++++++++++++++++++++++++++++++-
 assets/js/app.js              | 23 +++++++++++++++---
 templates/layout.php          | 17 -------------
 templates/pages/dashboard.php |  8 ++++---
 4 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index df80d21..65146d7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -955,7 +955,8 @@ body.page-dashboard .content {
     gap: 0.25rem;
     min-width: 0;
     flex: 0 0 var(--sleep-segment-width, auto);
-    padding: 0.35rem 0.65rem;
+    width: var(--sleep-segment-width, auto);
+    padding: 0.35rem 0.45rem;
     color: rgba(255, 255, 255, 0.94);
     font-size: 0.82rem;
     white-space: nowrap;
@@ -964,6 +965,15 @@ body.page-dashboard .content {
     position: relative;
 }
 
+.sleep-phase-bar__segment.is-compact {
+    padding-inline: 0.12rem;
+    font-size: 0;
+}
+
+.sleep-phase-bar__segment.is-compact strong {
+    display: none;
+}
+
 .sleep-phase-bar__segment::after {
     content: attr(data-tooltip);
     position: fixed;
@@ -1962,6 +1972,39 @@ body.page-dashboard .content {
         color: rgba(18, 48, 75, 0.9);
     }
 
+    .day-summary-card__label,
+    .day-chip,
+    .range-day-card__score,
+    .score-scale,
+    .signal-scale {
+        color: rgba(18, 48, 75, 0.72);
+    }
+
+    .day-chip {
+        background: rgba(18, 48, 75, 0.07);
+        border-color: rgba(18, 48, 75, 0.14);
+    }
+
+    .signal-pill {
+        color: rgba(18, 48, 75, 0.92);
+    }
+
+    .signal-pill strong,
+    .signal-pill span {
+        color: rgba(18, 48, 75, 0.92);
+    }
+
+    .overlay-signal-card h3,
+    .overlay-signal-card p,
+    .overlay-signal-card__ring,
+    .overlay-signal-card__buttons button {
+        color: rgba(18, 48, 75, 0.92);
+    }
+
+    .overlay-signal-card__ring {
+        background: rgba(255, 255, 255, 0.68);
+    }
+
     .range-moment-list__item span span,
     .timeline-card__value,
     .timeline-card--empty p {
diff --git a/assets/js/app.js b/assets/js/app.js
index 7c8ebbf..68fcdf9 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1450,22 +1450,29 @@
             let pointerStartX = 0;
             let pointerStartY = 0;
             let dragging = false;
-            let ignoreSwipe = false;
+            let didSwipe = false;
 
             const handleSwipe = (deltaX, deltaY) => {
-                if (ignoreSwipe || document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
+                if (document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
                     return;
                 }
 
                 if (deltaX < 0 && swipeContainer.dataset.nextDate) {
+                    didSwipe = true;
                     window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
                 } else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
+                    didSwipe = true;
                     window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
                 }
             };
 
             swipeContainer.addEventListener("pointerdown", event => {
-                ignoreSwipe = Boolean(event.target.closest("a, button, input, textarea, select, label, [data-event-editable]"));
+                if (event.target.closest("input, textarea, select, label, [data-stepper], .dashboard-overlay")) {
+                    dragging = false;
+                    return;
+                }
+
+                didSwipe = false;
                 dragging = true;
                 pointerStartX = event.clientX;
                 pointerStartY = event.clientY;
@@ -1484,6 +1491,16 @@
                 dragging = false;
             });
 
+            swipeContainer.addEventListener("click", event => {
+                if (!didSwipe) {
+                    return;
+                }
+
+                event.preventDefault();
+                event.stopPropagation();
+                didSwipe = false;
+            }, true);
+
             window.addEventListener("keydown", event => {
                 if (document.body.classList.contains("is-dashboard-overlay-open")) {
                     return;
diff --git a/templates/layout.php b/templates/layout.php
index 8939aa0..23e2159 100644
--- a/templates/layout.php
+++ b/templates/layout.php
@@ -121,23 +121,6 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa
                 </footer>
             <?php endif; ?>
         </main>
-
-        <?php if ($authUser !== null && !$immersiveDashboard): ?>
-            <nav class="mobile-nav glass-panel" aria-label="Mobile Hauptnavigation">
-                <a class="<?= is_active_path('/') ? 'active' : '' ?>" href="/">
-                    <img class="nav-icon" src="<?= e(icon_path('dashboard')) ?>" alt="">
-                    <span>Start</span>
-                </a>
-                <a class="<?= is_active_path('/archive') ? 'active' : '' ?>" href="/archive">
-                    <img class="nav-icon" src="<?= e(icon_path('archive')) ?>" alt="">
-                    <span>Archiv</span>
-                </a>
-                <a class="<?= is_active_path('/options') ? 'active' : '' ?>" href="/options">
-                    <img class="nav-icon" src="<?= e(icon_path('options')) ?>" alt="">
-                    <span>Optionen</span>
-                </a>
-            </nav>
-        <?php endif; ?>
     </div>
 </body>
 </html>
diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php
index e1c4931..6b73c34 100644
--- a/templates/pages/dashboard.php
+++ b/templates/pages/dashboard.php
@@ -40,7 +40,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
 
     <header class="dashboard-topbar">
         <nav class="dashboard-switcher glass-panel" aria-label="Ansicht wechseln">
-            <a class="<?= $dashboardView === 'day' ? 'active' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode($dashboardDate)) ?>">Tag</a>
+            <a class="<?= $dashboardView === 'day' && $dashboardDate === today() ? 'active' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode(today())) ?>">Heute</a>
             <a class="<?= $dashboardView === 'week' ? 'active' : '' ?>" href="/?view=week&amp;date=<?= e(rawurlencode(today())) ?>">Woche</a>
             <a class="<?= $dashboardView === 'month' ? 'active' : '' ?>" href="/?view=month&amp;date=<?= e(rawurlencode(today())) ?>">Monat</a>
         </nav>
@@ -214,7 +214,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                             <?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
                                             <?php if ($phaseHours <= 0) { continue; } ?>
                                             <?php $phasePercent = $sleepBarTotal > 0 ? max(0.5, min(100, ($phaseHours / $sleepBarTotal) * 100)) : 0; ?>
-                                            <span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?>" style="--sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
+                                            <span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?><?= $phasePercent < 13 ? ' is-compact' : '' ?>" style="--sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
                                                 <strong><?= e($label) ?></strong> <?= e(format_points($phaseHours)) ?> h
                                             </span>
                                         <?php endforeach; ?>
@@ -238,6 +238,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                     <?php foreach (['mood' => 'Stimmung', 'energy' => 'Energie', 'stress' => 'Stress'] as $metric => $label): ?>
                                         <?php $value = normalize_signal_value($item[$metric] ?? 0); ?>
                                         <?php $valueTone = signal_value_class($metric === 'stress' ? -$value : $value); ?>
+                                        <?php if ($value === 0) { continue; } ?>
                                         <span class="signal-pill signal-pill--<?= e(signal_badge_tone($value, $metric)) ?> signal-pill--<?= e($valueTone) ?>">
                                             <strong><?= e($label) ?></strong>
                                             <img class="signal-pill__icon" src="<?= e(icon_path($metric === 'mood' ? 'signal-mood' : ($metric === 'energy' ? 'signal-energy' : 'signal-stress'))) ?>" alt="<?= e($label) ?>">
@@ -534,7 +535,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                 <?php endforeach; ?>
             </div>
 
-            <?php $weekDetailDays = array_values(array_filter($dashboardWeek['days'], static fn (array $day): bool => !empty($day['has_content']))); ?>
+            <?php $weekDetailDays = array_values(array_reverse(array_filter($dashboardWeek['days'], static fn (array $day): bool => !empty($day['has_content'])))); ?>
             <?php if ($weekDetailDays !== []): ?>
             <div class="range-day-list">
                 <?php foreach ($weekDetailDays as $day): ?>
@@ -632,6 +633,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
 
                 return !empty($day['has_content']) || $summaryText !== '';
             })); ?>
+            <?php $monthDetailDays = array_reverse($monthDetailDays); ?>
             <?php if ($monthDetailDays !== []): ?>
                 <div class="range-day-list range-day-list--month">
                     <?php foreach ($monthDetailDays as $day): ?>