From 31e04fb9a124935fca0410c7183bd74ae61c28a8 Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Tue, 1 Sep 2026 07:58:14 +0000
Subject: [PATCH] Lift the chart window out of the Sleep panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It governs nearly every panel on the page — the training grid, the timing
charts, both sleep patterns, the counts panel, all three walk views — but it
sat inside Sleep, so it read as a sleep setting. That was already the reason
its old home carried a comment explaining it was not one; a control needing a
comment to deny what its position says is in the wrong position.

It now has its own row under the quick actions, above the first panel that
reads it, with a "Charts cover" label to say what it does. The row skips the
card chrome: it is a control, not content, and giving it a section's surface
and shadow would have made it look like a panel with nothing in it.

No JS change — both the click wiring and renderChartWindow address the buttons
by class, so they never cared where the picker lived.

Also removes that old comment, which had stopped being wrong about the picker
and started being wrong about the panel: the walks move carried it along by
accident and left it sitting above Weight, explaining a control three panels
away.
---
 src/changelog.json |  1 +
 src/index.html     | 22 +++++++++++++---------
 src/style.css      | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/changelog.json b/src/changelog.json
index 97cea7b..64a282e 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
 [
+  { "date": "2026-09-01", "text": "The 7d / 14d / 30d buttons have moved out of the Sleep panel onto their own “Charts cover” row, just under the Log event buttons. They always set the window for every chart on the page — training, timing, sleep, walks, pees/poos/meals — but sitting inside the Sleep panel made them look like a sleep setting" },
   { "date": "2026-09-01", "text": "Dropped the “Darker = more sessions that day” caption under the training consistency grid. Tapping a cell still opens that day" },
   { "date": "2026-09-01", "text": "Dropped two hint lines: the “Based on N pee gaps…” sentence under the Timing charts, and the “Rule of thumb at this age…” one in the Walks panel. The charts above them already say it. The age-based walking goal is still there, drawn as the goal line on the Walk trend" },
   { "date": "2026-09-01", "text": "On the dark theme the awake timers are a warm near-white now — both “Awake for” at the top and the pill in the day bar — instead of yellow text on a yellow-tinted pill. The light theme keeps its dark gold, where white would disappear into a near-white pill" },
diff --git a/src/index.html b/src/index.html
index afce91c..e70f2a4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -134,6 +134,19 @@
         </div>
       </section>
 
+      <!-- Page-level, not a panel's: every panel below that covers more than
+           one day reads this, so it sits on its own row above them all rather
+           than inside one of them, where it read as that panel's own control
+           (see renderChartWindow). -->
+      <div class="chart-window">
+        <span class="chart-window-label">Charts cover</span>
+        <div class="chart-days-picker" role="group" aria-label="How many days the charts cover">
+          <button type="button" class="ghost" data-days="7">7d</button>
+          <button type="button" class="ghost" data-days="14">14d</button>
+          <button type="button" class="ghost" data-days="30">30d</button>
+        </div>
+      </div>
+
       <section class="training" data-panel="training">
         <h2>Training</h2>
         <ul id="training-list" class="training-list"></ul>
@@ -229,11 +242,6 @@
 
       <section class="patterns" data-panel="sleep-daily">
         <h2>Sleep <span class="muted-note" data-chart-days-label>(last 7 days)</span></h2>
-        <div class="chart-days-picker" role="group" aria-label="How many days the charts cover">
-          <button type="button" class="ghost" data-days="7">7d</button>
-          <button type="button" class="ghost" data-days="14">14d</button>
-          <button type="button" class="ghost" data-days="30">30d</button>
-        </div>
         <div class="chart">
           <div class="chart-title">Hours per day</div>
           <svg id="chart-sleep" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Sleep hours per day"></svg>
@@ -315,10 +323,6 @@
         <p class="muted-note">Minutes walked so far at each point of the day, against yesterday and the average over the picked window. The line climbs only while a walk is on, so every step is one walk.</p>
       </section>
 
-      <!-- The day-window picker lives in this panel but governs every
-           day-window chart on the page — the training grid above, both sleep
-           patterns below, the counts panel and the walk chart — so changing it
-           here changes all of them (see renderChartWindow). -->
       <section class="weight" data-panel="weight">
         <h2>Weight</h2>
         <div class="weight-summary">
diff --git a/src/style.css b/src/style.css
index d35fc8c..fbafdef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -721,11 +721,29 @@ dialog menu {
 .time-row input { flex: 1 1 120px; min-width: 0; }
 .time-row button { padding: 8px 12px; }
 
+/* The chart window is a page-level control rather than a panel's, so its row
+   skips the card chrome the sections have: no surface, no shadow, just a label
+   and the buttons sitting on the page background between two cards. */
+.chart-window {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 4px;
+}
+.chart-window-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+}
+
 .chart-days-picker {
   display: flex;
   gap: 6px;
   margin: -4px 0 14px;
 }
+/* No heading above it out here, so nothing to pull up under or clear beneath. */
+.chart-window .chart-days-picker { margin: 0; }
 .chart-days-picker button {
   padding: 5px 12px;
   font-size: 0.8rem;