Keep the hour it is now on the axis

The visible range is drawn from the events in view, and in the evening the
events are behind you: the bounds end at six, everything after that is in the
trailing strip, and the now line has nowhere to land. The app stops saying
where in the day you are, which is most of what it is open for. Same at seven
in the morning, from the other end.

So when today is one of the columns, the axis takes that one hour in, and
everything the widening reached over folds behind it. At half eleven at night
the fixture week reads 7am to 8pm as usual, then an "8pm to 11pm" strip, then
one 11pm row with the line in it. A row and a strip, not four rows of empty
evening. Only the hour itself is opened, so how far the clock has drifted past
the last event costs nothing.

The pin sits on top of the hysteresis rather than inside it. previous.current
still holds what the events and the user asked for, so an hour pinned open
tonight cannot accumulate into the bounds the grid remembers tomorrow.

One consequence, and it is the only place the axis is allowed to move under
you: page to a week that does not contain today and the row goes again, along
with the strip it was sitting under.

The tick that drives it is an hour long, not a minute, because that is how
often the answer changes. It lives in a new useClock alongside the minute tick
the now line already had, which moves there out of GridNowLine. Both schedule
off the clock rather than off an interval, so a machine that was asleep
catches up on the next tick instead of drifting further out every hour.

The browser suite has to say what time it is now. The shape of the axis
depends on the hour a run happens at, so anything measuring a row height or
counting strips pins the clock to the middle of the working day, the same way
it already pins the theme and the week start. The three tests that are about
the clock ask for half eleven at night, which the fixture leaves empty.

tests/grid.spec.ts

@@ -5,7 +5,18 @@
 // are measured rather than asserted about the DOM.
 
 import { expect, test } from "@playwright/test";
-import { axis, blocks, box, gridFit, gridReady, headerDates, openApp, settle } from "./app";
+import {
+  MIDDAY,
+  axis,
+  blocks,
+  box,
+  clockAt,
+  gridFit,
+  gridReady,
+  headerDates,
+  openApp,
+  settle,
+} from "./app";
 
 test.describe("the grid fits the window", () => {
   test("the body is exactly the height the window left it, with nothing to scroll", async ({
@@ -71,9 +82,13 @@ test.describe("the grid fits the window", () => {
   });
 });
 
+// Every test here pins the clock to the middle of the working day. The axis takes in the hour it
+// is now when the events have left it out, so the shape of a quiet evening is not the shape of a
+// busy morning, and an axis test that did not say which one it meant would pass or fail on when it
+// was run. What the clock does to the axis is the last test in the file.
 test.describe("the axis holds still", () => {
   test("paging a week keeps the same hours on screen", async ({ page }) => {
-    await openApp(page);
+    await openApp(page, { now: MIDDAY() });
     const before = (await axis(page)).map((entry) => entry.text);
     const dates = await headerDates(page);
     expect(before.length).toBeGreaterThan(6);
@@ -95,7 +110,7 @@ test.describe("the axis holds still", () => {
   // axis is solved from what the band left over, so paging past them rescales every hour on the
   // grid. The comment at the top of GridAllDay.tsx says the band never does this.
   test("paging a week does not move the hours on screen either", async ({ page }) => {
-    await openApp(page);
+    await openApp(page, { now: MIDDAY() });
     const before = await axis(page);
     const band = (await box(page.locator(".grid-allday"))).height;
     const row = (await gridFit(page)).rowHeight;
@@ -113,7 +128,7 @@ test.describe("the axis holds still", () => {
   });
 
   test("paging back does not reflow them either", async ({ page }) => {
-    await openApp(page);
+    await openApp(page, { now: MIDDAY() });
     const before = (await axis(page)).map((entry) => entry.text);
     for (let i = 0; i < 4; i++) {
       await page.keyboard.press("h");
@@ -123,7 +138,7 @@ test.describe("the axis holds still", () => {
   });
 
   test("the empty ends of the day are folded into a strip at each end", async ({ page }) => {
-    await openApp(page);
+    await openApp(page, { now: MIDDAY() });
     const strips = page.locator(".grid-strip");
     await expect(strips).toHaveCount(2);
     // Midnight to the first event, and the last event to midnight: both say what they cover.
@@ -132,6 +147,54 @@ test.describe("the axis holds still", () => {
   });
 });
 
+test.describe("the hour it is now", () => {
+  // Half eleven at night, which the fixture leaves empty: the axis the events drew stops hours
+  // earlier, so without the pin there is nowhere for the line to be.
+  const LATE = () => clockAt(23, 30);
+
+  test("is on the axis even when the events stopped hours ago", async ({ page }) => {
+    await openApp(page, { now: LATE() });
+
+    expect((await axis(page)).map((entry) => entry.text)).toContain("11pm");
+    await expect(page.locator(".grid-now")).toHaveCount(1);
+
+    // On today's column, and inside the row it belongs to rather than on the strip above it.
+    const line = await box(page.locator(".grid-now"));
+    const row = (await gridFit(page)).rowHeight;
+    const eleven = (await axis(page)).find((entry) => entry.text === "11pm");
+    const canvas = await box(page.locator(".grid-canvas"));
+    expect(line.top - canvas.top).toBeGreaterThan(eleven!.y);
+    expect(line.top - canvas.top).toBeLessThan(eleven!.y + row);
+  });
+
+  test("costs one row, not the whole evening it reached over", async ({ page }) => {
+    await openApp(page, { now: LATE() });
+    const hours = (await axis(page)).map((entry) => entry.text);
+
+    // The hours between the last event and now are not on the axis; they are in a strip.
+    expect(hours).not.toContain("9pm");
+    expect(hours).not.toContain("10pm");
+    await expect(page.locator(".grid-strip", { hasText: /to 11pm/ })).toHaveCount(1);
+    // And the day still fits.
+    const fit = await gridFit(page);
+    expect(fit.canvasHeight).toBeCloseTo(fit.bodyHeight, 0);
+    expect(fit.overflow).toBe(false);
+  });
+
+  test("is gone again on a week that does not contain today", async ({ page }) => {
+    await openApp(page, { now: LATE() });
+    const before = (await axis(page)).map((entry) => entry.text);
+    expect(before).toContain("11pm");
+
+    // A whole week on, today is not one of the columns and neither is the hour it is now.
+    await page.keyboard.press("L");
+    await settle(page);
+
+    expect((await axis(page)).map((entry) => entry.text)).not.toContain("11pm");
+    await expect(page.locator(".grid-now")).toHaveCount(0);
+  });
+});
+
 test.describe("the all-day band", () => {
   test("a multi-day event spans exactly the days it covers", async ({ page }) => {
     await openApp(page);