@remit/web-client 0.0.231 → 0.0.233

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

@@ -13,18 +13,22 @@
  * was readable is kept, so `/calendar/fortnight/2026-06-10` lands on that day's
  * week instead of on an error.
  */
+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";
+import { calendarInstanceId, deviceTimeZone } from "@/hooks/calendar";
 import { useCalendarData } from "@/hooks/useCalendarData";
 import {
 	readCalendarDensity,
 	writeCalendarDensity,
 } from "@/lib/calendar-density";
-import { fixtureTimeZone } from "@/lib/calendar-fixtures";
 import {
 	calendarSearchSchema,
+	calendarViewMountsAgenda,
 	canonicalCalendarParams,
 	isoDate,
 } from "@/lib/calendar-route";
@@ -53,11 +57,13 @@ export const Route = createFileRoute("/calendar/$view/$date")({
 
 function CalendarViewLayout() {
 	const { view, date, calendarIds } = useCalendarAddress();
-	const { events, colorByCalendarId } = useCalendarData({
-		view,
-		date,
-		calendarIds,
-	});
+	// 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, enabled: drawsGrid });
 	const { goToView, goToToday, step, openEvent, openComposer } =
 		useCalendarNavigation();
 	const openedEvent = useOpenCalendarEvent();
@@ -70,6 +76,23 @@ function CalendarViewLayout() {
 		writeCalendarDensity(next);
 		setDensity(next);
 	}, []);
+	const [pick, setPick] = useState<CalendarSlotPick | undefined>(undefined);
+
+	const selectEvent = useCallback(
+		(eventId: string) => {
+			const instance = instanceOf(eventId);
+			openEvent(instance.calendarObjectId, instance.recurrenceId);
+		},
+		[instanceOf, openEvent],
+	);
+
+	const pickSlot = useCallback(
+		(slot: CalendarSlotPick) => {
+			setPick(slot);
+			openComposer();
+		},
+		[openComposer],
+	);
 
 	const workspace = (
 		<CalendarWorkspace
@@ -77,24 +100,37 @@ function CalendarViewLayout() {
 			date={date}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
+			agenda={<AgendaView density={density} onPickSlot={pickSlot} />}
+			isLoading={isLoading}
+			error={error}
+			onRetry={retry}
 			density={density}
-			selectedEventId={openedEvent?.calendarObjectId ?? ""}
-			timeZone={fixtureTimeZone()}
+			selectedEventId={
+				openedEvent
+					? calendarInstanceId(
+							openedEvent.calendarObjectId,
+							openedEvent.recurrenceId ?? "",
+						)
+					: ""
+			}
+			timeZone={deviceTimeZone()}
 			now={new Date().toISOString()}
 			onChangeView={goToView}
 			onToday={goToToday}
 			onStep={step}
 			onChangeDensity={changeDensity}
-			onSelectEvent={openEvent}
-			onPickSlot={openComposer}
+			onSelectEvent={selectEvent}
+			onPickSlot={pickSlot}
 		/>
 	);
 
 	return (
-		<CalendarShell
-			workspace={workspace}
-			reading={<Outlet />}
-			hasOpenEvent={openedEvent !== undefined || isWriting}
-		/>
+		<CalendarComposeSeedProvider pick={pick}>
+			<CalendarShell
+				workspace={workspace}
+				reading={<Outlet />}
+				hasOpenEvent={openedEvent !== undefined || isWriting}
+			/>
+		</CalendarComposeSeedProvider>
 	);
 }

package/src/routing/calendar.ts

@@ -82,7 +82,19 @@ export interface CalendarNavigation {
 	step: (direction: -1 | 1) => void;
 	/** Home, from every view and every distance away. */
 	goToToday: () => void;
-	openEvent: (calendarObjectId: string) => 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.
+	 */
+	openEvent: (calendarObjectId: string, recurrenceId?: string) => void;
 	closeEvent: () => void;
 	openComposer: () => void;
 }
@@ -118,13 +130,29 @@ export function useCalendarNavigation(): CalendarNavigation {
 			step: (direction: -1 | 1) =>
 				goTo({ view, date: stepCalendarDate(date, view, direction) }),
 			goToToday: () => goTo({ view, date: isoDate(new Date()) }),
-			openEvent: (calendarObjectId: string) =>
+			setAnchorDate: (next: string) =>
 				navigate({
-					to: "/calendar/$view/$date/$calendarObjectId",
-					params: { view, date, calendarObjectId },
+					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({
+							to: "/calendar/$view/$date/$calendarObjectId",
+							params: { view, date, calendarObjectId },
+							search: true,
+							hash: retainPanels,
+						})
+					: navigate({
+							to: "/calendar/$view/$date/$calendarObjectId/$recurrenceId",
+							params: { view, date, calendarObjectId, recurrenceId },
+							search: true,
+							hash: retainPanels,
+						}),
 			closeEvent: () => goTo({ view, date }),
 			openComposer: () =>
 				navigate({

package/src/test-support/http.ts

@@ -8,6 +8,8 @@ export interface HttpCall {
 	method: string;
 	url: string;
 	path: string;
+	/** Every request header, lower-cased — a conditional write is one of these. */
+	headers: Record<string, string>;
 	body: Record<string, unknown> | undefined;
 }
 
@@ -36,10 +38,16 @@ export const mockFetch = (responder: Responder = () => ({})): HttpMock => {
 		const request = input instanceof Request ? input : undefined;
 		const url = request ? request.url : String(input);
 		const rawBody = request ? await request.clone().text() : undefined;
+		const headers: Record<string, string> = {};
+		const sent = request ? request.headers : new Headers(init?.headers);
+		sent.forEach((value, name) => {
+			headers[name.toLowerCase()] = value;
+		});
 		const call: HttpCall = {
 			method: (request?.method ?? init?.method ?? "GET").toUpperCase(),
 			url,
 			path: new URL(url, "http://localhost").pathname,
+			headers,
 			body: rawBody ? JSON.parse(rawBody) : undefined,
 		};
 		calls.push(call);

package/src/lib/calendar-fixtures.ts

@@ -1,207 +0,0 @@
-/**
- * A week of invented calendar, so the routes and the grid can be walked before
- * the REST layer exists. Every name here is made up and every event is
- * generated from the day being looked at, which is what keeps the grid full
- * wherever the reader navigates instead of only in June 2026.
- *
- * Stage A.3 deletes this file: `hooks/useCalendarData` swaps its body for the
- * query hooks and nothing that renders a calendar changes.
- */
-import type {
-	CalendarColorId,
-	CalendarDescriptor,
-	CalendarEventData,
-} from "@remit/ui";
-
-export const workCalendarId = "fixture-work";
-export const personalCalendarId = "fixture-personal";
-export const teamCalendarId = "fixture-team";
-
-export const fixtureCalendars: CalendarDescriptor[] = [
-	{
-		id: workCalendarId,
-		accountId: "fixture-account-work",
-		accountLabel: "Work",
-		name: "Work",
-		color: "cal-1",
-	},
-	{
-		id: teamCalendarId,
-		accountId: "fixture-account-work",
-		accountLabel: "Work",
-		name: "Team",
-		color: "cal-6",
-	},
-	{
-		id: personalCalendarId,
-		accountId: "fixture-account-personal",
-		accountLabel: "Personal",
-		name: "Personal",
-		color: "cal-4",
-	},
-];
-
-export const fixtureColorByCalendarId: Record<string, CalendarColorId> =
-	Object.fromEntries(
-		fixtureCalendars.map((calendar) => [calendar.id, calendar.color]),
-	);
-
-const pad = (value: number): string => String(value).padStart(2, "0");
-
-/** The Monday of the week a day falls in; the grid starts its weeks there. */
-function weekStart(date: string): Date {
-	const [year, month, day] = date.split("-").map(Number);
-	const instant = new Date(Date.UTC(year, month - 1, day));
-	const weekday = (instant.getUTCDay() + 6) % 7;
-	instant.setUTCDate(instant.getUTCDate() - weekday);
-	return instant;
-}
-
-function dayOffsetFrom(start: Date, days: number): string {
-	const instant = new Date(start);
-	instant.setUTCDate(instant.getUTCDate() + days);
-	return `${instant.getUTCFullYear()}-${pad(instant.getUTCMonth() + 1)}-${pad(
-		instant.getUTCDate(),
-	)}`;
-}
-
-/** The zone the device is on, which is the only clock a fixture can honestly use. */
-export const fixtureTimeZone = (): string =>
-	Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-/** An ISO instant carrying the device's own offset for that day. */
-function at(date: string, hour: number, minute: number): string {
-	const local = new Date(`${date}T${pad(hour)}:${pad(minute)}:00`);
-	const offset = -local.getTimezoneOffset();
-	const sign = offset < 0 ? "-" : "+";
-	const size = Math.abs(offset);
-	return `${date}T${pad(hour)}:${pad(minute)}:00${sign}${pad(
-		Math.floor(size / 60),
-	)}:${pad(size % 60)}`;
-}
-
-const template: CalendarEventData = {
-	id: "",
-	calendarId: workCalendarId,
-	title: "",
-	start: "",
-	end: "",
-	allDay: false,
-	location: "",
-	notes: "",
-	attendees: [],
-	myRsvp: "accepted",
-	threadId: "",
-	threadSubject: "",
-	timeZone: "",
-	zoneCertainty: "explicit",
-	recurrenceRule: "",
-	seriesId: "",
-	seriesException: false,
-	status: "confirmed",
-};
-
-interface FixtureSpec {
-	dayOffset: number;
-	startHour: number;
-	startMinute: number;
-	endHour: number;
-	endMinute: number;
-	title: string;
-	calendarId: string;
-	location: string;
-	recurrenceRule: string;
-	seriesId: string;
-}
-
-const spec = (
-	dayOffset: number,
-	title: string,
-	startHour: number,
-	endHour: number,
-	over: Partial<FixtureSpec> = {},
-): FixtureSpec => ({
-	dayOffset,
-	startHour,
-	startMinute: 0,
-	endHour,
-	endMinute: 0,
-	title,
-	calendarId: workCalendarId,
-	location: "",
-	recurrenceRule: "",
-	seriesId: "",
-	...over,
-});
-
-/**
- * One made-up week: a daily standup, a couple of long blocks, an overlap on
- * Wednesday and something on a Saturday, so every band the grid draws has
- * something in it.
- */
-const WEEK: FixtureSpec[] = [
-	spec(0, "Standup", 9, 9, {
-		startMinute: 15,
-		endMinute: 30,
-		recurrenceRule: "Every weekday, 09:15",
-		seriesId: "fixture-standup",
-	}),
-	spec(0, "Roadmap review", 11, 12, { calendarId: teamCalendarId }),
-	spec(1, "Standup", 9, 9, {
-		startMinute: 15,
-		endMinute: 30,
-		recurrenceRule: "Every weekday, 09:15",
-		seriesId: "fixture-standup",
-	}),
-	spec(1, "Supplier call", 14, 15, {
-		calendarId: teamCalendarId,
-		location: "Meet",
-	}),
-	spec(2, "Standup", 9, 9, {
-		startMinute: 15,
-		endMinute: 30,
-		recurrenceRule: "Every weekday, 09:15",
-		seriesId: "fixture-standup",
-	}),
-	spec(2, "Design review", 10, 12, { calendarId: teamCalendarId }),
-	spec(2, "Dentist", 11, 12, {
-		calendarId: personalCalendarId,
-		location: "Kerkstraat 4",
-	}),
-	spec(3, "Standup", 9, 9, {
-		startMinute: 15,
-		endMinute: 30,
-		recurrenceRule: "Every weekday, 09:15",
-		seriesId: "fixture-standup",
-	}),
-	spec(3, "One to one", 15, 16, { location: "Room 2" }),
-	spec(4, "Standup", 9, 9, {
-		startMinute: 15,
-		endMinute: 30,
-		recurrenceRule: "Every weekday, 09:15",
-		seriesId: "fixture-standup",
-	}),
-	spec(4, "Retro", 16, 17, { calendarId: teamCalendarId }),
-	spec(5, "Climbing", 10, 12, { calendarId: personalCalendarId }),
-];
-
-/** The invented week around a day, in the zone the device is running on. */
-export function fixtureEventsAround(date: string): CalendarEventData[] {
-	const start = weekStart(date);
-	const timeZone = fixtureTimeZone();
-	return WEEK.map((entry) => {
-		const day = dayOffsetFrom(start, entry.dayOffset);
-		return {
-			...template,
-			id: `fixture-${day}-${entry.title.toLowerCase().replace(/\s+/g, "-")}`,
-			calendarId: entry.calendarId,
-			title: entry.title,
-			start: at(day, entry.startHour, entry.startMinute),
-			end: at(day, entry.endHour, entry.endMinute),
-			location: entry.location,
-			timeZone,
-			recurrenceRule: entry.recurrenceRule,
-			seriesId: entry.seriesId,
-		};
-	});
-}