@remit/web-client 0.0.232 → 0.0.234

package/src/hooks/useCalendarData.ts

@@ -11,16 +11,13 @@ import type {
 	CalendarEventData,
 	CalendarViewId,
 } from "@remit/ui";
-import { useMemo } from "react";
 import {
 	type CalendarInstanceRef,
 	calendarWindow,
-	isDrawnInstance,
 	readCalendarInstanceId,
-	toCalendarEventData,
-	UNZONED_CALENDAR,
 	useCalendarEventWindow,
-	useCalendars,
+	useCalendarSelection,
+	useDrawnEvents,
 	usePrefetchAdjacentWindows,
 } from "@/hooks/calendar";
 
@@ -30,6 +27,13 @@ export interface CalendarDataRequest {
 	date: string;
 	/** The calendars the address has ticked; empty means every one of them. */
 	calendarIds: readonly string[];
+	/**
+	 * False where the zoom on screen draws nothing from this window. The agenda
+	 * rolls its own range a week at a time, so asking for this view's week as
+	 * well would fetch a window nothing renders — and the address rewriting on
+	 * every scroll would ask again, with its neighbours, all the way down.
+	 */
+	enabled?: boolean;
 }
 
 export interface CalendarData {
@@ -46,66 +50,36 @@ export interface CalendarData {
 	instanceOf: (eventId: string) => CalendarInstanceRef;
 }
 
-/**
- * The calendars a request is asking about. An empty tick list is every
- * calendar rather than none: a reader who has ticked nothing off is looking at
- * all of them, and a URL naming a calendar that no longer exists shows the
- * rest instead of an empty week.
- */
-export function selectCalendarIds(
-	calendars: readonly CalendarDescriptor[],
-	ticked: readonly string[],
-): string[] {
-	const known = calendars.map((calendar) => calendar.id);
-	if (ticked.length === 0) return known;
-	const wanted = new Set(ticked);
-	const shown = known.filter((id) => wanted.has(id));
-	return shown.length === 0 ? known : shown;
-}
-
 export function useCalendarData({
 	view,
 	date,
 	calendarIds,
+	enabled = true,
 }: CalendarDataRequest): CalendarData {
-	const { calendars, colorByCalendarId, timeZoneByCalendarId, isLoading } =
-		useCalendars();
-
-	const shown = selectCalendarIds(calendars, calendarIds);
-	// Asking for every calendar by name and asking for all of them are the same
-	// question, so they are the same cache entry: the address ticking each one
-	// off must not refetch the week the address ticking none already holds.
-	const narrowed = shown.length === calendars.length ? [] : shown;
-	// A tick list can only be resolved against calendars that have loaded, so a
-	// narrowed address waits for them rather than asking about ids it cannot
-	// know are real.
-	const resolved = calendarIds.length === 0 || calendars.length > 0;
+	const {
+		calendars,
+		colorByCalendarId,
+		timeZoneByCalendarId,
+		shown,
+		narrowed,
+		resolved,
+		isLoading,
+	} = useCalendarSelection(calendarIds);
 
 	const window = calendarWindow(view, date);
+	const active = enabled && resolved;
 	const events = useCalendarEventWindow({
 		...window,
 		calendarIds: narrowed,
-		enabled: resolved,
+		enabled: active,
 	});
-	usePrefetchAdjacentWindows(view, date, narrowed, resolved);
+	usePrefetchAdjacentWindows(view, date, narrowed, active);
 
-	const shownKey = shown.join(",");
-	const instances = events.instances;
-
-	const eventData = useMemo(() => {
-		const drawn = new Set(shownKey === "" ? [] : shownKey.split(","));
-		return instances
-			.filter(
-				(instance) =>
-					isDrawnInstance(instance) && drawn.has(instance.calendarId),
-			)
-			.map((instance) =>
-				toCalendarEventData(
-					instance,
-					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
-				),
-			);
-	}, [instances, timeZoneByCalendarId, shownKey]);
+	const eventData = useDrawnEvents(
+		events.instances,
+		timeZoneByCalendarId,
+		shown,
+	);
 
 	return {
 		calendars,

package/src/lib/calendar-density.ts

@@ -8,7 +8,7 @@
  * way the intelligence rail's preference is (`lib/intelligence-pref.ts`), and
  * a storage failure falls back to the default rather than crashing.
  */
-import type { Density } from "@remit/ui";
+import type { AgendaDensity, Density } from "@remit/ui";
 
 export const CALENDAR_DENSITY_KEY = "remit:calendar-density";
 
@@ -32,3 +32,15 @@ export function writeCalendarDensity(density: Density): void {
 		// Storage unavailable — the in-memory default stands.
 	}
 }
+
+/**
+ * The same preference, as the strip reads it.
+ *
+ * The strip has three readings and the preference has two, so the third — a
+ * month of coloured dots with no titles on it — is not reachable from Glance.
+ * That is deliberate: the preference says how much of a day this screen shows,
+ * not whether to say what is on it, and one calendar-wide answer beats a second
+ * control that means something different at every zoom.
+ */
+export const agendaDensityOf = (density: Density): AgendaDensity =>
+	density === "compact" ? "pills" : "detail";

package/src/lib/calendar-route.test.ts

@@ -8,6 +8,7 @@ import { describe, it } from "node:test";
 import { CALENDAR_DENSITY_KEY } from "./calendar-density.js";
 import {
 	calendarSearchSchema,
+	calendarViewMountsAgenda,
 	calendarViewMountsGrid,
 	calendarViews,
 	canonicalCalendarParams,
@@ -89,13 +90,31 @@ describe("calendarViewMountsGrid", () => {
 		assert.equal(calendarViewMountsGrid("day"), true);
 	});
 
-	it("has the other three still to come", () => {
+	it("leaves the agenda to the strip and the other two to a later stage", () => {
 		assert.equal(calendarViewMountsGrid("year"), false);
 		assert.equal(calendarViewMountsGrid("month"), false);
 		assert.equal(calendarViewMountsGrid("agenda"), false);
 	});
 });
 
+describe("calendarViewMountsAgenda", () => {
+	it("draws the strip at one zoom and at no other", () => {
+		for (const view of calendarViews) {
+			assert.equal(calendarViewMountsAgenda(view), view === "agenda");
+		}
+	});
+
+	it("never draws the same zoom as the grid", () => {
+		for (const view of calendarViews) {
+			assert.equal(
+				calendarViewMountsAgenda(view) && calendarViewMountsGrid(view),
+				false,
+				`${view} claimed two surfaces`,
+			);
+		}
+	});
+});
+
 describe("stepCalendarDate", () => {
 	it("steps a screenful in the view's own unit", () => {
 		assert.equal(stepCalendarDate("2026-06-10", "day", 1), "2026-06-11");

package/src/lib/calendar-route.ts

@@ -32,15 +32,24 @@ const calendarViewSchema = z.enum(calendarViews);
 export const DEFAULT_CALENDAR_VIEW: CalendarViewId = "week";
 
 /**
- * The views the grid draws today. The other three are named surfaces that
- * arrive in later stages, and they say so on screen rather than matching a
- * route that renders nothing.
+ * The views the grid draws. Year and month are named surfaces that arrive in
+ * later stages, and they say so on screen rather than matching a route that
+ * renders nothing.
  */
 const GRID_VIEWS = new Set<CalendarViewId>(["week", "day"]);
 
 export const calendarViewMountsGrid = (view: CalendarViewId): boolean =>
 	GRID_VIEWS.has(view);
 
+/**
+ * The one view the strip draws. It is a zoom of the same ladder rather than a
+ * different screen: the grid is what a reader drops into for a day that has
+ * earned it, and the strip is what they come back out to, with the day and the
+ * ticked calendars they left with.
+ */
+export const calendarViewMountsAgenda = (view: CalendarViewId): boolean =>
+	view === "agenda";
+
 /** The view a segment names, or `undefined` where it names none. */
 export function parseCalendarView(segment: string): CalendarViewId | undefined {
 	const parsed = calendarViewSchema.safeParse(segment);
@@ -101,7 +110,8 @@ export function canonicalCalendarParams(
 /**
  * The day the previous or next screenful starts on. A step is measured in the
  * view's own unit, which is what makes back-and-forward land where the reader
- * came from at every zoom. Agenda steps a week, the range it loads.
+ * came from at every zoom. Agenda steps a week, which is far enough to be worth
+ * a press and near enough to stay inside the days it is already holding.
  */
 export function stepCalendarDate(
 	date: string,

package/src/routes/calendar/$view.$date.tsx

@@ -16,6 +16,7 @@
 import type { CalendarSlotPick } from "@remit/ui";
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
+import { AgendaView } from "@/components/calendar/AgendaView";
 import { CalendarComposeSeedProvider } from "@/components/calendar/CalendarComposeSeed";
 import { CalendarShell } from "@/components/calendar/CalendarShell";
 import { CalendarWorkspace } from "@/components/calendar/CalendarWorkspace";
@@ -27,6 +28,7 @@ import {
 } from "@/lib/calendar-density";
 import {
 	calendarSearchSchema,
+	calendarViewMountsAgenda,
 	canonicalCalendarParams,
 	isoDate,
 } from "@/lib/calendar-route";
@@ -55,8 +57,13 @@ export const Route = createFileRoute("/calendar/$view/$date")({
 
 function CalendarViewLayout() {
 	const { view, date, calendarIds } = useCalendarAddress();
+	// The strip fetches the days it holds a week at a time and draws none of
+	// this, so at that zoom the layout asks for nothing: the address rewrites on
+	// every scroll, and each rewrite would otherwise fetch a week nobody renders
+	// along with the two beside it.
+	const drawsGrid = !calendarViewMountsAgenda(view);
 	const { events, colorByCalendarId, isLoading, error, retry, instanceOf } =
-		useCalendarData({ view, date, calendarIds });
+		useCalendarData({ view, date, calendarIds, enabled: drawsGrid });
 	const { goToView, goToToday, step, openEvent, openComposer } =
 		useCalendarNavigation();
 	const openedEvent = useOpenCalendarEvent();
@@ -93,6 +100,7 @@ function CalendarViewLayout() {
 			date={date}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
+			agenda={<AgendaView density={density} onPickSlot={pickSlot} />}
 			isLoading={isLoading}
 			error={error}
 			onRetry={retry}

package/src/routing/calendar.ts

@@ -82,6 +82,14 @@ export interface CalendarNavigation {
 	step: (direction: -1 | 1) => void;
 	/** Home, from every view and every distance away. */
 	goToToday: () => void;
+	/**
+	 * The day the strip has scrolled to, written by `replace`. Scrolling is not
+	 * somewhere the reader went — Back belongs to the screen they arrived from,
+	 * not to every row they passed on the way down.
+	 */
+	setAnchorDate: (date: string) => void;
+	/** Out of the list and into the grid for one day. */
+	zoomToDay: (date: string) => void;
 	/**
 	 * One occurrence names the series it belongs to and the instance under it;
 	 * a resource that does not recur names only itself.
@@ -122,6 +130,15 @@ export function useCalendarNavigation(): CalendarNavigation {
 			step: (direction: -1 | 1) =>
 				goTo({ view, date: stepCalendarDate(date, view, direction) }),
 			goToToday: () => goTo({ view, date: isoDate(new Date()) }),
+			setAnchorDate: (next: string) =>
+				navigate({
+					to: VIEW_ROUTE,
+					params: { view, date: next },
+					search: true,
+					hash: retainPanels,
+					replace: true,
+				}),
+			zoomToDay: (next: string) => goTo({ view: "day", date: next }),
 			openEvent: (calendarObjectId: string, recurrenceId?: string) =>
 				recurrenceId === undefined || recurrenceId === ""
 					? navigate({