Interleave the sleep and wake lists, move walks down

Sleep windows and Wake windows were two panels showing two halves of one
sequence: a wake window is precisely the gap between two sleeps, so the panels
alternated with each other and neither could be read as the day's rhythm on its
own. Answering "how long was he up before that nap?" meant looking at one panel,
holding a time in your head, and finding it in the other.

They are one list now, the two window sets sorted together by start time, which
is all the interleaving that alternating-by-construction needs. Each row states
whether it is asleep or awake and carries a stripe in its colour, so the
alternation reads before the words do, and the row still running keeps the
highlight it had. renderWindowList grew the ability for a window to bring its
own class and label; the single-kind lists still pass one of each for the whole
list and tag only the open row, where "Walking" is news rather than a repeat of
the heading it sits under.

One rule had to be spelled out: the new per-kind stripe ties on specificity with
the generic .ww.ongoing, and being later would have won, leaving an open awake
row with a faded edge instead of its full-strength one.

The walks group — the panel and both its patterns — moves below "Pees, poos &
meals". The three stay together: they were grouped under Walks deliberately, and
leaving the patterns behind would strand two walk charts among the sleep ones.

Both old panel keys go stale, so anyone who had folded Sleep windows or Wake
windows gets the merged panel open, as with any panel that is new to a build.

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);