hold the hour it is now open through every strip, folds included

src/components/GridGaps.tsx

@@ -15,7 +15,7 @@
 import { memo, useMemo } from "react";
 import { isFolded, timeToY, type Fold, type FitLayout } from "../grid/fit";
 import { TOUCH_QUERY, useMediaQuery } from "../useMedia";
-import { busyHours, rangeLabel, vars } from "./GridModel";
+import { rangeLabel, vars } from "./GridModel";
 import { useGrid } from "./GridStore";
 import { Icon } from "./Icon";
 
@@ -53,17 +53,18 @@ export const FOLD_ICON_SIZE = 16;
 const MIN_GAP_H = 24;
 
 /**
- * The empty run around `hour`: nothing scheduled on any visible day, nothing already folded, both
- * ends stopped by the bounds. Null when the hour is busy, folded or off the axis.
+ * The empty run around `hour`: nothing scheduled on any visible day, not the hour it is now,
+ * nothing already folded, both ends stopped by the bounds. Null when the hour is held, folded or
+ * off the axis.
  *
  * This is deliberately not `bandAt`, which is what `z` folds and which walks straight through an
  * existing fold. What the mouse offers has to be exactly what the label says, so a run cut in two
  * by a fold reads as two runs and collapses as the half you pointed at. Folding merges them anyway.
  */
-export function gapAt(layout: FitLayout, busy: readonly boolean[], hour: number): Fold | null {
+export function gapAt(layout: FitLayout, held: readonly boolean[], hour: number): Fold | null {
   const { start: lo, end: hi } = layout.bounds;
   if (hour < lo || hour >= hi) return null;
-  const free = (h: number) => !busy[h] && !isFolded(layout, h * 60);
+  const free = (h: number) => !held[h] && !isFolded(layout, h * 60);
   if (!free(hour)) return null;
   let start = hour;
   let end = hour + 1;
@@ -73,11 +74,11 @@ export function gapAt(layout: FitLayout, busy: readonly boolean[], hour: number)
 }
 
 /** Every empty run on the axis, which is what a pointer with no hover has to be given instead. */
-export function allGaps(layout: FitLayout, busy: readonly boolean[]): Fold[] {
+export function allGaps(layout: FitLayout, held: readonly boolean[]): Fold[] {
   const out: Fold[] = [];
   let hour = layout.bounds.start;
   while (hour < layout.bounds.end) {
-    const gap = gapAt(layout, busy, hour);
+    const gap = gapAt(layout, held, hour);
     if (!gap) {
       hour++;
       continue;
@@ -90,20 +91,19 @@ export function allGaps(layout: FitLayout, busy: readonly boolean[]): Fold[] {
 
 export const GridGaps = memo(function GridGaps() {
   const layout = useGrid((s) => s.layout);
-  const items = useGrid((s) => s.items);
+  const held = useGrid((s) => s.held);
   const hoverHour = useGrid((s) => s.hoverHour);
   // Booleans rather than the objects themselves: this must not repaint on every pointermove.
   const gesturing = useGrid((s) => s.drag !== null || s.draft !== null);
   const fold = useGrid((s) => s.fold);
   const touch = useMediaQuery(TOUCH_QUERY);
 
-  const busy = useMemo(() => busyHours(items), [items]);
   const gaps = useMemo(() => {
     if (!layout) return [];
-    if (touch) return allGaps(layout, busy);
-    const hovered = hoverHour === null ? null : gapAt(layout, busy, hoverHour);
+    if (touch) return allGaps(layout, held);
+    const hovered = hoverHour === null ? null : gapAt(layout, held, hoverHour);
     return hovered ? [hovered] : [];
-  }, [layout, busy, hoverHour, touch]);
+  }, [layout, held, hoverHour, touch]);
 
   if (!layout || gesturing) return null;
 

src/components/GridModel.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { Instance } from "../ipc";
-import { bandAt, busyHours, type Placed } from "./GridModel";
+import { bandAt, busyHours, heldHours, type Placed } from "./GridModel";
 
 const at = (hour: number, minute = 0) => new Date(2026, 0, 5, hour, minute).getTime();
 
@@ -20,16 +20,38 @@ describe("busyHours", () => {
   });
 });
 
+describe("heldHours", () => {
+  const items = [placed([9, 0], [9, 30])];
+  const hours = (held: boolean[]) => held.flatMap((b, h) => (b ? [h] : []));
+
+  it("is the busy hours plus the hour it is now", () => {
+    expect(hours(heldHours(items, 1))).toEqual([1, 9]);
+    expect(hours(heldHours(items, 9))).toEqual([9]);
+  });
+
+  it("is just the busy hours when today is not on screen", () => {
+    expect(hours(heldHours(items, null))).toEqual([9]);
+  });
+});
+
 describe("bandAt", () => {
   const items = [placed([9, 0], [9, 30]), placed([18, 0], [18, 30])];
   const bounds = { start: 7, end: 20 };
+  const held = heldHours(items, null);
 
   it("is the whole empty run around the hour, stopped by the events and the bounds", () => {
-    expect(bandAt(items, bounds, 12)).toEqual({ start: 10, end: 18 });
-    expect(bandAt(items, bounds, 19)).toEqual({ start: 19, end: 20 });
+    expect(bandAt(held, bounds, 12)).toEqual({ start: 10, end: 18 });
+    expect(bandAt(held, bounds, 19)).toEqual({ start: 19, end: 20 });
   });
 
   it("offers nothing on a busy hour, since a fold there would come straight back", () => {
-    expect(bandAt(items, bounds, 9)).toBeNull();
+    expect(bandAt(held, bounds, 9)).toBeNull();
+  });
+
+  it("stops at the hour it is now and offers nothing on it", () => {
+    const now = heldHours(items, 13);
+    expect(bandAt(now, bounds, 12)).toEqual({ start: 10, end: 13 });
+    expect(bandAt(now, bounds, 15)).toEqual({ start: 14, end: 18 });
+    expect(bandAt(now, bounds, 13)).toBeNull();
   });
 });

src/components/GridModel.tsx

@@ -294,17 +294,28 @@ export function busyHours(items: readonly Placed[]): boolean[] {
 }
 
 /**
- * The band `z` would fold at this hour: the whole empty run around it. Null on a busy hour, since
- * a fold hides empty time and an hour with an event in it would come straight back. Interior gaps
- * never fold themselves, so this only runs on demand.
+ * The hours the grid keeps at full scale whatever fold or bound covers them: every hour an event
+ * touches, and the hour it is now when today is one of the columns. This is the one definition,
+ * and everything that hides an hour or offers to hide one goes through it.
  */
-export function bandAt(items: readonly Placed[], bounds: Bounds, hour: number): Fold | null {
-  const busy = busyHours(items);
-  if (busy[hour]) return null;
+export function heldHours(items: readonly Placed[], nowHour: number | null): boolean[] {
+  const held = busyHours(items);
+  if (nowHour !== null && nowHour >= 0 && nowHour < 24) held[nowHour] = true;
+  return held;
+}
+
+/**
+ * The band `z` would fold at this hour: the whole empty run around it, stopped by the held hours
+ * and the bounds. Null on a held hour, since a fold hides empty time and a fold over an hour with
+ * an event in it, or the hour it is now, would come straight back. Interior gaps never fold
+ * themselves, so this only runs on demand.
+ */
+export function bandAt(held: readonly boolean[], bounds: Bounds, hour: number): Fold | null {
+  if (held[hour]) return null;
   let start = hour;
   let end = hour + 1;
-  while (start > bounds.start && !busy[start - 1]) start--;
-  while (end < bounds.end && !busy[end]) end++;
+  while (start > bounds.start && !held[start - 1]) start--;
+  while (end < bounds.end && !held[end]) end++;
   return { start, end };
 }
 

src/components/GridStore.tsx

@@ -15,7 +15,7 @@ import {
   type Fold,
 } from "../grid/fit";
 import { loadFolds, saveFolds } from "../grid/folds";
-import { bandAt, busyHours, type Placed } from "./GridModel";
+import { bandAt, heldHours } from "./GridModel";
 
 export type DragMode = "create" | "move" | "resize-start" | "resize-end";
 
@@ -44,12 +44,13 @@ interface GridState {
   floor: Bounds | null;
   layout: FitLayout | null;
   days: number[];
-  items: Placed[];
+  /** The hours no fold may hide: see `heldHours`. Published with the layout it was solved for. */
+  held: boolean[];
   hoverHour: number | null;
   drag: Drag | null;
   draft: Draft | null;
   saving: boolean;
-  publish: (layout: FitLayout, days: number[], items: Placed[]) => void;
+  publish: (layout: FitLayout, days: number[], held: boolean[]) => void;
   setHoverHour: (hour: number | null) => void;
   setDrag: (drag: Drag | null) => void;
   setDraft: (draft: Draft | null) => void;
@@ -66,12 +67,12 @@ export const useGrid = create<GridState>((set, get) => ({
   floor: null,
   layout: null,
   days: [],
-  items: [],
+  held: heldHours([], null),
   hoverHour: null,
   drag: null,
   draft: null,
   saving: false,
-  publish: (layout, days, items) => set({ layout, days, items }),
+  publish: (layout, days, held) => set({ layout, days, held }),
   setHoverHour: (hoverHour) => set((s) => (s.hoverHour === hoverHour ? {} : { hoverHour })),
   setDrag: (drag) => set({ drag }),
   setDraft: (draft) => set({ draft }),
@@ -81,7 +82,7 @@ export const useGrid = create<GridState>((set, get) => ({
     set({ folds });
   },
   unfold: (range) => {
-    const folds = saveFolds(unfoldStrip(get().folds, busyHours(get().items), range));
+    const folds = saveFolds(unfoldStrip(get().folds, get().held, range));
     // An out-of-bounds band has no fold to remove, so widening the floor is what holds it open.
     const base = get().floor ?? get().layout?.bounds ?? DEFAULT_BOUNDS;
     set({
@@ -90,7 +91,7 @@ export const useGrid = create<GridState>((set, get) => ({
     });
   },
   toggleFold: (hour) => {
-    const { layout, hoverHour, items } = get();
+    const { layout, hoverHour, held } = get();
     if (!layout) return;
     const at = hour ?? hoverHour;
     if (at === null || at === undefined) return;
@@ -100,7 +101,7 @@ export const useGrid = create<GridState>((set, get) => ({
       get().unfold({ start: segment.start / 60, end: segment.end / 60 });
       return;
     }
-    const band = bandAt(items, layout.bounds, h);
+    const band = bandAt(held, layout.bounds, h);
     if (band) get().fold(band);
   },
   unfoldAll: () => {

src/components/GridView.tsx

@@ -20,15 +20,7 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from "react";
 import { eventCreate, eventUpdate } from "../api/events";
-import {
-  computeBounds,
-  computeFit,
-  timeToY,
-  trimFolds,
-  yToTime,
-  type Bounds,
-  type Fold,
-} from "../grid/fit";
+import { computeBounds, computeFit, timeToY, yToTime, type Bounds, type Fold } from "../grid/fit";
 import { loadBounds, saveBounds } from "../grid/folds";
 import { useCalendarView } from "../store/useCalendarView";
 import { notify } from "../store/useToast";
@@ -52,9 +44,9 @@ import { GridGaps } from "./GridGaps";
 import { GridGhost } from "./GridGhost";
 import {
   MIN_EVENT_MINUTES,
-  busyHours,
   clampMinutes,
   dayMinutes,
+  heldHours,
   hourLabel,
   inBand,
   isVisible,
@@ -240,21 +232,19 @@ export function GridView({ defaultCalendarId }: GridViewProps) {
 
   const timed = useMemo(() => byDay.flat(), [byDay]);
 
-  // The hour the clock is in, when today is one of the columns.
-  //
-  // The axis is drawn from the events, and at nine in the evening the events are usually behind
-  // you: the bounds end at six, the rest of the day is in the trailing strip, and the now line has
-  // nowhere to land. So the hour you are in is taken into the bounds when it falls outside them.
-  // One hour, and only the hour, so the axis gains a row rather than an evening.
-  //
-  // Keyed on the hour rather than the minute, because that is how often the answer changes. The
-  // line itself moves every minute, on its own tick, in `GridNowLine`.
+  // The hour the clock is in, when today is one of the columns. Keyed on the hour rather than the
+  // minute, because that is how often the answer changes. The line itself moves every minute, on
+  // its own tick, in `GridNowLine`.
   const hourStart = useHourStart();
-  const nowBand = useMemo((): Bounds | null => {
-    if (!days.includes(startOfDay(hourStart))) return null;
-    const hour = new Date(hourStart).getHours();
-    return { start: hour, end: hour + 1 };
-  }, [days, hourStart]);
+  const nowHour = useMemo(
+    () => (days.includes(startOfDay(hourStart)) ? new Date(hourStart).getHours() : null),
+    [days, hourStart],
+  );
+
+  // The hours nothing may hide: every hour an event on screen covers, and the hour it is now, so
+  // the now line always has a row to land in. They are carved out of every strip alike, the ones
+  // outside the bounds and the ones you folded, and the bounds themselves stay the events' business.
+  const held = useMemo(() => heldHours(timed, nowHour), [timed, nowHour]);
 
   // Hysteresis needs the bounds it adopted last pass, so they live in a ref rather than in state:
   // paging a week must not reflow the axis, and a render loop through state would fight that.
@@ -263,26 +253,9 @@ export function GridView({ defaultCalendarId }: GridViewProps) {
     const bounds = floor
       ? { start: Math.min(auto.start, floor.start), end: Math.max(auto.end, floor.end) }
       : auto;
-    // What the events and the user asked for is what the hysteresis remembers. The clock's hour is
-    // a pin laid over the top of it every hour, so it never accumulates into the axis it pins.
     previous.current = bounds;
-    // A fold hides empty hours. Any hour an event on screen covers is given back at full scale,
-    // however it got there: typed into the palette, moved in the editor, or synced in from Google.
-    const shown = trimFolds(folds, busyHours(timed));
-    if (!nowBand) return computeFit({ bounds, folds: shown, viewportHeight: viewportH });
-
-    // Everything the widening reached over folds behind it. At half eleven at night the axis is
-    // one row longer and one strip taller, rather than four rows of empty evening shorter.
-    const reach: Fold[] = [
-      { start: nowBand.end, end: bounds.start },
-      { start: bounds.end, end: nowBand.start },
-    ];
-    const axis = {
-      start: Math.min(bounds.start, nowBand.start),
-      end: Math.max(bounds.end, nowBand.end),
-    };
-    return computeFit({ bounds: axis, folds: [...shown, ...reach], viewportHeight: viewportH });
-  }, [timed, folds, floor, viewportH, nowBand]);
+    return computeFit({ bounds, folds, hold: held, viewportHeight: viewportH });
+  }, [timed, folds, floor, viewportH, held]);
 
   useEffect(() => {
     const signature = `${layout.bounds.start} ${layout.bounds.end}`;
@@ -293,8 +266,8 @@ export function GridView({ defaultCalendarId }: GridViewProps) {
 
   const publish = useGrid((s) => s.publish);
   useEffect(() => {
-    if (viewportH > 0) publish(layout, days, timed);
-  }, [publish, layout, days, timed, viewportH]);
+    if (viewportH > 0) publish(layout, days, held);
+  }, [publish, layout, days, held, viewportH]);
 
   const todayMs = today();
   const todayIndex = days.findIndex((d) => d === todayMs);