feat: let the reader zoom in two steps closer than a week

Events routinely end within a day of each other, and at the old close
end of the ladder their bar ends were a few pixels apart — the board
being asked the one question it exists to answer and telling the reader
to squint. Seventy-two and 108 px/day separate them, and give a one-day
event a bar wide enough to read and to tap rather than the 34px every
short bar collapses to.

The clamp test now reads the ladder's last rung instead of naming 48, so
extending it again does not need the test rewritten.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-18 22:34:37 +02:00
co-authored by Claude Opus 5
parent 0ccb5a144e
commit d491437e32
2 changed files with 24 additions and 3 deletions
+11 -2
View File
@@ -9,8 +9,17 @@
* `prefs` stores the chosen value and the two must agree on what is valid. * `prefs` stores the chosen value and the two must agree on what is valid.
*/ */
/** The ladder, in px per day. Roughly a third wider at each step. */ /**
export const DAY_WIDTHS = [6, 9, 13, 20, 32, 48] as const; * The ladder, in px per day. Roughly half again wider at each step.
*
* It runs from a quarter of calendar on one screen to a single day being wider
* than a finger. The close end is not decoration: several events routinely end
* within a day of each other, and at 48px a day their bar ends are a few pixels
* apart — which is the moment a reader is asking the board the one question it
* exists to answer, and being told to squint. Going in further separates them,
* and gives a one-day event a bar wide enough to read and to tap.
*/
export const DAY_WIDTHS = [6, 9, 13, 20, 32, 48, 72, 108] as const;
/** /**
* The scale the board opens at for a reader who has never touched the control. * The scale the board opens at for a reader who has never touched the control.
+13 -1
View File
@@ -27,7 +27,7 @@ describe("snapDayWidth", () => {
// close to what its reader chose. // close to what its reader chose.
expect(snapDayWidth(10)).toBe(9); expect(snapDayWidth(10)).toBe(9);
expect(snapDayWidth(7)).toBe(6); expect(snapDayWidth(7)).toBe(6);
expect(snapDayWidth(1000)).toBe(48); expect(snapDayWidth(1000)).toBe(DAY_WIDTHS[DAY_WIDTHS.length - 1]!);
// Exactly between two steps takes the wider one: ties go to the more // Exactly between two steps takes the wider one: ties go to the more
// legible board. // legible board.
expect(snapDayWidth(11)).toBe(13); expect(snapDayWidth(11)).toBe(13);
@@ -56,6 +56,18 @@ describe("stepDayWidth", () => {
expect(stepDayWidth(narrowest, -1)).toBe(narrowest); expect(stepDayWidth(narrowest, -1)).toBe(narrowest);
}); });
test("the close end goes past a week on screen", () => {
// Several events routinely end within a day of each other, and the reader
// has to be able to tell those ends apart — at 48px a day they are a few
// pixels between.
expect(canStep(48, 1)).toBe(true);
expect(stepDayWidth(48, 1)).toBe(72);
const widest = DAY_WIDTHS[DAY_WIDTHS.length - 1]!;
// A single day wider than a fingertip, so a one-day event is readable and
// tappable rather than the 34px minimum bar.
expect(widest).toBeGreaterThanOrEqual(96);
});
test("canStep says when a control has nowhere left to go", () => { test("canStep says when a control has nowhere left to go", () => {
expect(canStep(DAY_WIDTHS[0]!, -1)).toBe(false); expect(canStep(DAY_WIDTHS[0]!, -1)).toBe(false);
expect(canStep(DAY_WIDTHS[0]!, 1)).toBe(true); expect(canStep(DAY_WIDTHS[0]!, 1)).toBe(true);