diff --git a/src/app.js b/src/app.js
index 7ac192f..faef5ce 100644
--- a/src/app.js
+++ b/src/app.js
@@ -999,8 +999,14 @@
}
empty.hidden = true;
for (const w of windows) {
+ // A window may bring its own class and label, which is how the merged
+ // sleep/wake list states every row's kind. A single-kind list passes one
+ // class and one label for the lot and only tags the open row, where
+ // "Walking" is news rather than a repetition of the heading.
+ const cls = w.cls || extraClass;
+ const tag = w.tag || (w.ongoing ? ongoingLabel : "");
const li = document.createElement("li");
- li.className = `ww ${extraClass}` + (w.ongoing ? " ongoing" : "");
+ li.className = `ww ${cls}` + (w.ongoing ? " ongoing" : "");
const range = document.createElement("span");
range.className = "ww-range";
range.textContent = w.ongoing
@@ -1011,29 +1017,34 @@
dur.textContent = formatDuration(w.end - w.start);
li.appendChild(range);
li.appendChild(dur);
- if (w.ongoing) {
- const tag = document.createElement("span");
- tag.className = "ww-tag";
- tag.textContent = ongoingLabel;
- li.appendChild(tag);
+ if (tag) {
+ const tagEl = document.createElement("span");
+ tagEl.className = "ww-tag";
+ tagEl.textContent = tag;
+ li.appendChild(tagEl);
}
list.appendChild(li);
}
}
- function renderSleepWindows(events) {
- renderWindowList(
- "sleep-list", "sleep-empty",
- sleepWindowsForDay(events, selectedDay()),
- "Asleep", "sleep-ww",
- );
+ // Sleep and wake windows are the same boundaries read two ways — a wake
+ // window is precisely the gap between two sleeps — so they alternate by
+ // construction and sorting the two sets by start time interleaves them back
+ // into the day's actual rhythm. Read in order, "45 minutes asleep after two
+ // and a half hours up" is a single glance instead of a comparison between
+ // two lists.
+ function sleepWakeWindowsForDay(events, day) {
+ return [
+ ...sleepWindowsForDay(events, day).map(w => ({ ...w, cls: "sleep-ww", tag: "Asleep" })),
+ ...wakeWindowsForDay(events, day).map(w => ({ ...w, cls: "wake-ww", tag: "Awake" })),
+ ].sort((a, b) => a.start - b.start);
}
- function renderWakeWindows(events) {
+ function renderSleepWake(events) {
renderWindowList(
- "wake-list", "wake-empty",
- wakeWindowsForDay(events, selectedDay()),
- "Awake", "wake-ww",
+ "sleep-wake-list", "sleep-wake-empty",
+ sleepWakeWindowsForDay(events, selectedDay()),
+ "", "",
);
}
@@ -2595,8 +2606,7 @@
renderStats(events);
renderLasts(events);
renderTiming(events);
- renderSleepWindows(events);
- renderWakeWindows(events);
+ renderSleepWake(events);
renderWalks(events);
renderWeekly(events);
renderSleepTimeline(events);
@@ -4474,8 +4484,7 @@
renderStats(evs);
renderLasts(evs);
renderTiming(evs);
- renderSleepWindows(evs);
- renderWakeWindows(evs);
+ renderSleepWake(evs);
renderWalks(evs);
renderWeekly(evs);
renderSleepTimeline(evs);
diff --git a/src/changelog.json b/src/changelog.json
index 4ebbd74..cf642a0 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,6 @@
[
+ { "date": "2026-08-31", "text": "The Walks panel and its two charts have moved down the page, below “Pees, poos & meals”" },
+ { "date": "2026-08-31", "text": "Sleep windows and Wake windows are one “Sleep & wake” panel now, with the two interleaved into a single list in time order — asleep 22:10–06:05, awake until 08:30, asleep 45 min, and so on down the day. A wake window is just the gap between two sleeps, so the two lists were always halves of the same sequence, and reading them in order makes “only a 45-minute nap after two and a half hours up” obvious in a way two separate lists never did. Each row says which it is and carries a stripe in its colour; whichever one is still running keeps the highlight" },
{ "date": "2026-08-31", "text": "The list of weigh-ins under the Weight chart folds away on its own now — tap “History” inside the panel to collapse just the rows and keep the latest figure and the curve on screen. It remembers the choice like the panels do, and folding the whole Weight panel still takes everything with it" },
{ "date": "2026-08-31", "text": "Walks now get the same two pattern views sleep has. “When … walks” is a day-per-row grid shaded where a walk was on, so you can see at a glance whether the routine is actually regular or drifts around. “Walk trend” draws the minutes walked so far at each point of the day against yesterday and the average over the picked window, with the age-based goal as a line and a ✓ once the day clears it — the line climbs only while a walk is on, so every step is one walk. Both appear under the Walks panel as soon as you have logged a walk, and stay out of the way until then" },
{ "date": "2026-08-31", "text": "The 7d / 14d / 30d buttons now set the window for the Timing panel too. Until now the typical, shortest and longest gaps between pees, poos and meals were always measured over the last 7 days whatever you picked; switch to 30d and they are measured over 30, which settles down the typical gap once there is a month of history to draw on" },
diff --git a/src/index.html b/src/index.html
index 375c3f2..af29e4c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -218,56 +218,17 @@
-
-
Sleep windows
-
-
No sleep windows yet for this day.
+
+
+
Sleep & wake
+
+
No sleep or wake windows yet for this day.
-
-
Wake windows
-
-
No wake windows yet for this day.
-
-
-
-
Walks
-
-
No walks yet for this day. Use 🦮 Walk start / 🏁 Walk end to time one.
-
-
-
-
Minutes per day (last 7 days)
-
-
-
-
-
-
-
When walking(last 7 days)
-
-
Each row is a day, midnight to midnight; shaded = out on a walk. Tap a row to open that day.
-
-
-
-
Walk trend
-
-
- Today
- Yesterday
- 7-day avg
- Goal
-
-
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.
-
-
-
Sleep (last 7 days)
@@ -325,6 +286,44 @@
+
+
Walks
+
+
No walks yet for this day. Use 🦮 Walk start / 🏁 Walk end to time one.
+
+
+
+
Minutes per day (last 7 days)
+
+
+
+
+
+
+
When walking(last 7 days)
+
+
Each row is a day, midnight to midnight; shaded = out on a walk. Tap a row to open that day.
+
+
+
+
Walk trend
+
+
+ Today
+ Yesterday
+ 7-day avg
+ Goal
+
+
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.
+
+
+
Weight
diff --git a/src/style.css b/src/style.css
index cf2e905..73b8c3c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -462,18 +462,36 @@ textarea { resize: vertical; }
border-color: var(--accent);
background: var(--accent-soft);
}
-.ww.ongoing .ww-tag {
+/* Every row can carry a state, not only the open one: the merged sleep/wake
+ list labels each row asleep or awake, where the label is the whole point. */
+.ww .ww-tag {
font-size: 0.75rem;
- color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
+ color: var(--muted);
}
+/* A stripe in the row's own colour, so an alternating list reads as alternating
+ before you get to the words. */
+.ww.sleep-ww { border-left: 3px solid color-mix(in srgb, var(--sleep) 55%, transparent); }
+.ww.wake-ww { border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
+.ww.walk-ww { border-left: 3px solid color-mix(in srgb, var(--walk) 55%, transparent); }
+.ww.sleep-ww .ww-tag { color: var(--sleep); }
+.ww.wake-ww .ww-tag { color: var(--accent); }
+.ww.walk-ww .ww-tag { color: var(--walk); }
+.ww.ongoing .ww-tag { color: var(--accent); }
.ww.sleep-ww.ongoing {
border-color: var(--sleep);
background: color-mix(in srgb, var(--sleep) 14%, var(--surface));
}
.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep); }
+/* Spelled out like the other two: the faded stripe above would otherwise win
+ over the generic .ww.ongoing on specificity ties and leave the open awake
+ row without its full-strength edge. */
+.ww.wake-ww.ongoing {
+ border-color: var(--accent);
+ background: color-mix(in srgb, var(--accent) 14%, var(--surface));
+}
.ww.walk-ww.ongoing {
border-color: var(--walk);
background: color-mix(in srgb, var(--walk) 14%, var(--surface));