@remit/web-client 0.0.232 → 0.0.233

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({