@remit/web-client 0.0.230 → 0.0.231

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -0,0 +1,39 @@
+import { CalendarEventPane } from "@/components/calendar/CalendarEventPane";
+import { useCalendarData } from "@/hooks/useCalendarData";
+import { useCalendarAddress, useCalendarNavigation } from "@/routing";
+
+/**
+ * The event the address names, resolved.
+ *
+ * The two event routes — the series and one of its occurrences — differ only in
+ * what the address says, so the lookup and the way back live here once rather
+ * than in each of them.
+ */
+export interface OpenCalendarEventProps {
+	calendarObjectId: string;
+	/** One occurrence of a series, absent on the series itself. */
+	recurrenceId?: string;
+}
+
+export function OpenCalendarEvent({
+	calendarObjectId,
+	recurrenceId,
+}: OpenCalendarEventProps) {
+	const { view, date, calendarIds } = useCalendarAddress();
+	const { events, calendars } = useCalendarData({ view, date, calendarIds });
+	const { closeEvent } = useCalendarNavigation();
+
+	const event = events.find((candidate) => candidate.id === calendarObjectId);
+	const calendar = calendars.find(
+		(candidate) => candidate.id === event?.calendarId,
+	);
+
+	return (
+		<CalendarEventPane
+			event={event}
+			calendar={calendar}
+			isOccurrence={recurrenceId !== undefined}
+			onClose={closeEvent}
+		/>
+	);
+}

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -0,0 +1,193 @@
+/**
+ * What each zoom puts on screen.
+ *
+ * The route is one route for all five views, so "the view mounts its own
+ * component" is a decision this pane makes and the place to assert it. A zoom
+ * that is not drawn yet says so out loud: an empty surface would be
+ * indistinguishable from a week with nothing in it, which is the dead route
+ * this stage exists to avoid.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { CalendarColorId, CalendarEventData } from "@remit/ui";
+import { AppShellSlotted } from "@remit/ui";
+import { createElement, type ReactElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	CalendarWorkspace,
+	type CalendarWorkspaceProps,
+} from "./CalendarWorkspace.js";
+
+const TIME_ZONE = "Europe/Amsterdam";
+const DATE = "2026-06-10";
+const NOW = `${DATE}T09:30:00+02:00`;
+const CALENDAR = "cal_work";
+
+const colorByCalendarId: Record<string, CalendarColorId> = {
+	[CALENDAR]: "cal-1",
+};
+
+const roadmap: CalendarEventData = {
+	id: "roadmap",
+	calendarId: CALENDAR,
+	title: "Roadmap review",
+	start: `${DATE}T10:00:00+02:00`,
+	end: `${DATE}T11:00:00+02:00`,
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: TIME_ZONE,
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const noop = () => {};
+
+const workspaceProps = (
+	view: "year" | "month" | "week" | "day" | "agenda",
+	events: CalendarEventData[] = [roadmap],
+): CalendarWorkspaceProps => ({
+	view,
+	date: DATE,
+	events,
+	colorByCalendarId,
+	density: "comfortable",
+	selectedEventId: "",
+	timeZone: TIME_ZONE,
+	now: NOW,
+	onChangeView: noop,
+	onToday: noop,
+	onStep: noop,
+	onChangeDensity: noop,
+	onSelectEvent: noop,
+	onPickSlot: noop,
+});
+
+/**
+ * The calendar engine schedules browser timers while it renders. Nothing mounts
+ * here, so nothing ever clears them and the suite would sit on a live event
+ * loop after its last assertion. Take them back.
+ */
+function renderQuietly(element: ReactElement): string {
+	const scheduled: ReturnType<typeof setTimeout>[] = [];
+	const native = globalThis.setTimeout;
+	globalThis.setTimeout = ((...args: Parameters<typeof setTimeout>) => {
+		const handle = native(...args);
+		scheduled.push(handle);
+		return handle;
+	}) as typeof globalThis.setTimeout;
+	try {
+		return renderToString(element);
+	} finally {
+		globalThis.setTimeout = native;
+		for (const handle of scheduled) clearTimeout(handle);
+	}
+}
+
+const render = (
+	view: "year" | "month" | "week" | "day" | "agenda",
+	events: CalendarEventData[] = [roadmap],
+): string =>
+	renderQuietly(createElement(CalendarWorkspace, workspaceProps(view, events)));
+
+describe("the zoom the address names", () => {
+	it("draws the grid for the week and the day", () => {
+		for (const view of ["week", "day"] as const) {
+			const html = render(view);
+			assert.ok(
+				html.includes("Roadmap review"),
+				`${view} did not draw the events it was given`,
+			);
+			assert.equal(html.includes("Not built yet"), false);
+		}
+	});
+
+	it("says so for a zoom that is not drawn yet", () => {
+		for (const view of ["year", "month", "agenda"] as const) {
+			const html = render(view);
+			assert.ok(
+				html.includes(`calendar-placeholder-${view}`),
+				`${view} rendered no placeholder`,
+			);
+			assert.ok(html.includes("Not built yet"));
+			assert.ok(html.includes("Week and Day work now."));
+		}
+	});
+
+	it("names the agenda's own stage rather than a generic one", () => {
+		assert.ok(render("agenda").includes("scrolling day strip"));
+	});
+});
+
+describe("the toolbar", () => {
+	it("offers every zoom, whichever one is on", () => {
+		const html = render("year");
+		for (const label of ["Year", "Month", "Week", "Day", "Agenda"]) {
+			assert.ok(html.includes(`>${label}<`), `no way to reach ${label}`);
+		}
+	});
+
+	it("offers back, forward and today at a zoom that draws no grid", () => {
+		const html = render("month");
+		assert.ok(html.includes('aria-label="Previous"'));
+		assert.ok(html.includes('aria-label="Next"'));
+		assert.ok(html.includes(">Today<"));
+	});
+
+	it("names the range before the grid has measured one", () => {
+		// The words are the device's locale's; the year is the part that is this
+		// component's answer rather than `Intl`'s.
+		assert.ok(render("month").includes("2026"));
+		assert.ok(render("year").includes("2026"));
+	});
+
+	it("carries the density control, which the address never names", () => {
+		const html = render("week");
+		assert.ok(html.includes("Calendar density"));
+		assert.ok(html.includes(">Detail<"));
+		assert.ok(html.includes(">Glance<"));
+	});
+});
+
+describe("a week with nothing in it", () => {
+	it("draws the grid rather than an empty surface", () => {
+		const html = render("week", []);
+		assert.equal(html.includes("Not built yet"), false);
+		assert.ok(html.includes('aria-label="Previous"'));
+	});
+});
+
+/**
+ * The way back to the mail, at a width where the nav is not a pane.
+ *
+ * The shell renders the sidebar as a slide-over below 1024px and nothing opens
+ * a slide-over on its own, so a surface that is the whole width of the app has
+ * to carry the control itself — mail's own list headers do, and the calendar is
+ * reached from the same sidebar it would otherwise strand a reader away from.
+ */
+describe("the folders control", () => {
+	const shell = (width: number): string =>
+		renderQuietly(
+			createElement(AppShellSlotted, {
+				initialWidth: width,
+				nav: createElement("nav", null, "Folders"),
+				list: createElement(CalendarWorkspace, workspaceProps("week")),
+			}),
+		);
+
+	it("is in the calendar's header where the nav is a slide-over", () => {
+		assert.match(shell(900), /aria-label="Open folders"/);
+	});
+
+	it("is absent where the nav is a pane of its own", () => {
+		assert.doesNotMatch(shell(1440), /aria-label="Open folders"/);
+	});
+});

package/src/components/mail/MailSidebarAdapter.tsx

@@ -219,6 +219,22 @@ export function MailSidebarAdapter({
 				</NavLink>
 			);
 		}
+		if (navId === "calendar") {
+			// No list segment to name: the calendar's index route sends the reader
+			// to the week they are in, so a bookmark of the nav entry keeps working
+			// tomorrow.
+			return (
+				<NavLink
+					to="/calendar"
+					onClick={() => onClick?.()}
+					className={className}
+					aria-label={ariaLabel}
+					title={title}
+				>
+					{children}
+				</NavLink>
+			);
+		}
 		if (navId === "outbox") {
 			return (
 				<NavLink
@@ -332,6 +348,7 @@ export function MailSidebarAdapter({
 			selectedNavId={selectedNavId}
 			onSelectNav={handleSelectNav}
 			linkComponent={linkComponent}
+			calendarNav="shown"
 			variant={variant}
 			savedSearches={savedSearches}
 			saveableQuery={saveableQuery}

package/src/hooks/useCalendarData.ts

@@ -0,0 +1,72 @@
+/**
+ * What the calendar surfaces read, and the only place they read it from.
+ *
+ * The body is fixture data until the REST layer lands: stage A.3 swaps it for
+ * `GET /calendars` and `GET /calendar-events` over the range the view asks
+ * for, and every caller keeps the call it already makes. The seam is here, and
+ * not inside the grid, because the grid is presentational and expands no
+ * recurrence of its own — the server returns instances.
+ */
+import type {
+	CalendarColorId,
+	CalendarDescriptor,
+	CalendarEventData,
+	CalendarViewId,
+} from "@remit/ui";
+import { useMemo } from "react";
+import {
+	fixtureCalendars,
+	fixtureColorByCalendarId,
+	fixtureEventsAround,
+} from "@/lib/calendar-fixtures";
+
+export interface CalendarDataRequest {
+	view: CalendarViewId;
+	/** The day the view is centred on, `YYYY-MM-DD`. */
+	date: string;
+	/** The calendars the address has ticked; empty means every one of them. */
+	calendarIds: readonly string[];
+}
+
+export interface CalendarData {
+	calendars: CalendarDescriptor[];
+	events: CalendarEventData[];
+	colorByCalendarId: Record<string, CalendarColorId>;
+	isLoading: boolean;
+}
+
+/**
+ * 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({
+	date,
+	calendarIds,
+}: CalendarDataRequest): CalendarData {
+	const key = [...calendarIds].join(",");
+	return useMemo(() => {
+		const ticked = key === "" ? [] : key.split(",");
+		const shown = new Set(selectCalendarIds(fixtureCalendars, ticked));
+		return {
+			calendars: fixtureCalendars,
+			events: fixtureEventsAround(date).filter((event) =>
+				shown.has(event.calendarId),
+			),
+			colorByCalendarId: fixtureColorByCalendarId,
+			isLoading: false,
+		};
+	}, [date, key]);
+}

package/src/lib/calendar-density.ts

@@ -0,0 +1,34 @@
+/**
+ * How much of a day this device shows at once.
+ *
+ * A phone on a train and a monitor on a desk want different amounts of the
+ * same week, and the answer belongs to the screen rather than to the calendar:
+ * it is not a fact about the view, so it is in no tier of the address, and a
+ * link shared from one device must not resize the day on another. Stored the
+ * 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";
+
+export const CALENDAR_DENSITY_KEY = "remit:calendar-density";
+
+/** Roomy enough to read a title at a glance, which is the common case. */
+export const DEFAULT_CALENDAR_DENSITY: Density = "comfortable";
+
+export function readCalendarDensity(): Density {
+	try {
+		return localStorage.getItem(CALENDAR_DENSITY_KEY) === "compact"
+			? "compact"
+			: DEFAULT_CALENDAR_DENSITY;
+	} catch {
+		return DEFAULT_CALENDAR_DENSITY;
+	}
+}
+
+export function writeCalendarDensity(density: Density): void {
+	try {
+		localStorage.setItem(CALENDAR_DENSITY_KEY, density);
+	} catch {
+		// Storage unavailable — the in-memory default stands.
+	}
+}

package/src/lib/calendar-fixtures.ts

@@ -0,0 +1,207 @@
+/**
+ * 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,
+		};
+	});
+}

package/src/lib/calendar-format.ts

@@ -0,0 +1,29 @@
+/**
+ * The words a calendar surface puts a time in. Every component in `@remit/ui`
+ * takes its text already formatted and owns no clock, so the formatting lives
+ * on this side of the seam.
+ */
+import type { CalendarEventData } from "@remit/ui";
+
+const DAY = new Intl.DateTimeFormat(undefined, {
+	weekday: "short",
+	day: "numeric",
+	month: "long",
+});
+
+const CLOCK = new Intl.DateTimeFormat(undefined, {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: false,
+});
+
+/** "Wed 10 June, 10:00 – 11:00", or the day alone when it runs all of it. */
+export function formatEventWhen(event: CalendarEventData): string {
+	const start = new Date(event.start);
+	const end = new Date(event.end);
+	const day = DAY.format(start);
+	if (event.allDay) return `${day}, all day`;
+	const sameDay = DAY.format(end) === day;
+	if (sameDay) return `${day}, ${CLOCK.format(start)} – ${CLOCK.format(end)}`;
+	return `${day}, ${CLOCK.format(start)} – ${DAY.format(end)}, ${CLOCK.format(end)}`;
+}