@remit/web-client 0.0.230 → 0.0.232

package/src/components/calendar/CalendarWorkspace.stories.tsx

@@ -0,0 +1,219 @@
+import {
+	type CalendarColorId,
+	type CalendarEventData,
+	type CalendarViewId,
+	type Density,
+	NavSidebar,
+} from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { CalendarWorkspace } from "./CalendarWorkspace";
+
+/**
+ * The calendar pane the `/calendar/{view}/{date}` route mounts, at every state
+ * the shipping shell can be in.
+ *
+ * It is presentational: the toolbar's moves leave through callbacks and the
+ * route turns each one into an address, so a story can drive them with local
+ * state and get the same surface the app renders. What the stories are for is
+ * what the markup cannot answer — how a week reads once a day is full, and
+ * whether a zoom that is not drawn yet reads as unfinished rather than empty.
+ */
+const TIME_ZONE = "Europe/Amsterdam";
+const DATE = "2026-06-10";
+const NOW = `${DATE}T09:30:00+02:00`;
+
+const WORK = "cal_work";
+const TEAM = "cal_team";
+const HOME = "cal_home";
+
+const colorByCalendarId: Record<string, CalendarColorId> = {
+	[WORK]: "cal-1",
+	[TEAM]: "cal-6",
+	[HOME]: "cal-4",
+};
+
+const template: CalendarEventData = {
+	id: "",
+	calendarId: WORK,
+	title: "",
+	start: "",
+	end: "",
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: TIME_ZONE,
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const at = (
+	id: string,
+	title: string,
+	day: string,
+	from: string,
+	to: string,
+	over: Partial<CalendarEventData> = {},
+): CalendarEventData => ({
+	...template,
+	...over,
+	id,
+	title,
+	start: `2026-06-${day}T${from}:00+02:00`,
+	end: `2026-06-${day}T${to}:00+02:00`,
+});
+
+const week: CalendarEventData[] = [
+	at("standup-mon", "Standup", "08", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("roadmap", "Roadmap review", "08", "11:00", "12:00", {
+		calendarId: TEAM,
+	}),
+	at("standup-tue", "Standup", "09", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("supplier", "Supplier call", "09", "14:00", "15:00", {
+		calendarId: TEAM,
+		zoneCertainty: "ambiguous",
+	}),
+	at("standup-wed", "Standup", "10", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("design", "Design review", "10", "10:00", "12:00", {
+		calendarId: TEAM,
+	}),
+	at("dentist", "Dentist", "10", "11:00", "12:00", {
+		calendarId: HOME,
+		location: "Kerkstraat 4",
+	}),
+	at("one-to-one", "One to one", "11", "15:00", "16:00"),
+	at("retro", "Retro", "12", "16:00", "17:00", { calendarId: TEAM }),
+	at("climbing", "Climbing", "13", "10:00", "12:00", { calendarId: HOME }),
+];
+
+/** The shell drives view and date through the router; a story drives its own. */
+function Workspace({
+	initialView,
+	events,
+	isLoading,
+	error,
+}: {
+	initialView: CalendarViewId;
+	events: CalendarEventData[];
+	isLoading?: boolean;
+	error?: unknown;
+}) {
+	const [view, setView] = useState<CalendarViewId>(initialView);
+	const [density, setDensity] = useState<Density>("comfortable");
+	const [selected, setSelected] = useState("");
+	return (
+		<CalendarWorkspace
+			view={view}
+			date={DATE}
+			events={events}
+			colorByCalendarId={colorByCalendarId}
+			isLoading={isLoading}
+			error={error}
+			onRetry={() => undefined}
+			density={density}
+			selectedEventId={selected}
+			timeZone={TIME_ZONE}
+			now={NOW}
+			onChangeView={setView}
+			onToday={() => undefined}
+			onStep={() => undefined}
+			onChangeDensity={setDensity}
+			onSelectEvent={setSelected}
+			onPickSlot={() => undefined}
+		/>
+	);
+}
+
+const meta: Meta<typeof Workspace> = {
+	title: "App/Calendar/Workspace",
+	component: Workspace,
+	parameters: { layout: "fullscreen" },
+	args: { initialView: "week", events: week },
+	render: (args) => (
+		<div className="h-dvh bg-canvas">
+			<Workspace {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof Workspace>;
+
+export const Week: Story = {};
+
+export const Day: Story = { args: { initialView: "day" } };
+
+/** Nothing scheduled is still a grid, never a "nothing here" surface. */
+export const EmptyWeek: Story = { args: { events: [] } };
+
+/** The first read of a week, before the server has answered. */
+export const Loading: Story = { args: { events: [], isLoading: true } };
+
+/**
+ * The read was refused. This is the state an empty grid must never be confused
+ * with: a week drawn blank because the request failed reads as a week with
+ * nothing in it, and the reader plans their day around it.
+ */
+export const CouldNotLoad: Story = {
+	args: {
+		events: [],
+		error: new Error("The window has to be shorter than a year."),
+	},
+};
+
+/**
+ * The three zooms that are named but not drawn yet. Each says what it is
+ * waiting on, so the route is addressable without pretending to be finished.
+ */
+export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
+
+export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
+
+export const AgendaNotBuiltYet: Story = { args: { initialView: "agenda" } };
+
+/**
+ * The calendar beside the nav it is reached from. The entry sits under the
+ * daily brief, which is where the shipping sidebar puts it.
+ */
+export const WithTheNav: Story = {
+	render: (args) => (
+		<div className="flex h-dvh bg-canvas">
+			<div className="w-64 shrink-0">
+				<NavSidebar
+					accounts={[
+						{
+							id: "acct_work",
+							label: "Work",
+							email: "work@example.invalid",
+							mailboxes: [
+								{ id: "mb_inbox", name: "Inbox", role: "inbox", unseen: 3 },
+								{ id: "mb_sent", name: "Sent", role: "sent" },
+							],
+						},
+					]}
+					selectedNavId="calendar"
+					calendarNav="shown"
+				/>
+			</div>
+			<div className="min-w-0 flex-1">
+				<Workspace {...args} />
+			</div>
+		</div>
+	),
+};

package/src/components/calendar/CalendarWorkspace.tsx

@@ -0,0 +1,192 @@
+import {
+	type CalendarColorId,
+	CalendarDateNav,
+	type CalendarEventData,
+	CalendarGrid,
+	type CalendarSlotPick,
+	type CalendarViewId,
+	CalendarViewSwitch,
+	type Density,
+	segmentClassName,
+} from "@remit/ui";
+import { Loader2 } from "lucide-react";
+import { useId, useState } from "react";
+import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
+import { NavMenuButton } from "@/components/mail/NavMenuButton";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { calendarViewMountsGrid } from "@/lib/calendar-route";
+
+/**
+ * The calendar's own pane: the toolbar that moves it and whatever the current
+ * zoom draws.
+ *
+ * Presentational, like everything in `@remit/ui` it is built from. It holds no
+ * events, reads no clock and knows no router: prev, next, today and the zoom
+ * switch all leave through callbacks, and the route turns each one into an
+ * address. That is what keeps "which view" and "which day" facts of the URL
+ * rather than of this component's state.
+ */
+
+const DENSITY_OPTIONS: { value: Density; label: string }[] = [
+	{ value: "comfortable", label: "Detail" },
+	{ value: "compact", label: "Glance" },
+];
+
+export interface CalendarWorkspaceProps {
+	view: CalendarViewId;
+	/** The day the view is centred on, `YYYY-MM-DD`. */
+	date: string;
+	events: CalendarEventData[];
+	colorByCalendarId: Record<string, CalendarColorId>;
+	/** The first read of this window is still out; the grid has nothing yet. */
+	isLoading?: boolean;
+	/**
+	 * A refusal the calendar states in place of the grid. A week drawn empty
+	 * because the read failed is indistinguishable from a week with nothing in
+	 * it, which is the one thing this must never look like.
+	 */
+	error?: unknown;
+	onRetry?: () => void;
+	density: Density;
+	/** The event the reading pane has open, empty for none. */
+	selectedEventId: string;
+	timeZone: string;
+	/** The instant the grid calls now. */
+	now: string;
+	onChangeView: (view: CalendarViewId) => void;
+	onToday: () => void;
+	onChangeDensity: (density: Density) => void;
+	onSelectEvent: (eventId: string) => void;
+	onPickSlot: (pick: CalendarSlotPick) => void;
+	onStep: (direction: -1 | 1) => void;
+}
+
+/**
+ * The range the toolbar names before the grid has measured one, and the whole
+ * answer at a zoom that draws no grid.
+ */
+function fallbackRangeTitle(view: CalendarViewId, date: string): string {
+	const instant = new Date(`${date}T00:00:00`);
+	if (view === "year")
+		return new Intl.DateTimeFormat(undefined, { year: "numeric" }).format(
+			instant,
+		);
+	if (view === "day")
+		return new Intl.DateTimeFormat(undefined, {
+			weekday: "short",
+			day: "numeric",
+			month: "long",
+			year: "numeric",
+		}).format(instant);
+	return new Intl.DateTimeFormat(undefined, {
+		month: "long",
+		year: "numeric",
+	}).format(instant);
+}
+
+export function CalendarWorkspace({
+	view,
+	date,
+	events,
+	colorByCalendarId,
+	isLoading = false,
+	error,
+	onRetry,
+	density,
+	selectedEventId,
+	timeZone,
+	now,
+	onChangeView,
+	onToday,
+	onChangeDensity,
+	onSelectEvent,
+	onPickSlot,
+	onStep,
+}: CalendarWorkspaceProps) {
+	const densityGroup = useId();
+	// The grid computes the range it drew, which is the only honest title for a
+	// week — it knows where the week starts. Held against the address it was
+	// measured for, so leaving a view does not carry its title into the next one.
+	const [measured, setMeasured] = useState({ key: "", title: "" });
+	const addressKey = `${view}/${date}`;
+	const title =
+		measured.key === addressKey
+			? measured.title
+			: fallbackRangeTitle(view, date);
+
+	return (
+		<div className="flex h-full min-h-0 flex-col bg-surface">
+			<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
+				{/* Below the nav pane the sidebar is a slide-over with nothing to open
+				    it: the calendar is a whole surface of its own, so without this
+				    the reader has no way back to their mail. */}
+				<NavMenuButton />
+				<CalendarDateNav
+					title={title}
+					onPrev={() => onStep(-1)}
+					onNext={() => onStep(1)}
+					onToday={onToday}
+				>
+					<fieldset className="inline-flex items-center gap-0.5">
+						<legend className="sr-only">Calendar density</legend>
+						{DENSITY_OPTIONS.map((option) => (
+							<label
+								key={option.value}
+								className={`${segmentClassName(density === option.value)} h-7 text-xs`}
+							>
+								<input
+									type="radio"
+									name={densityGroup}
+									value={option.value}
+									checked={density === option.value}
+									onChange={() => onChangeDensity(option.value)}
+									className="sr-only"
+								/>
+								{option.label}
+							</label>
+						))}
+					</fieldset>
+					<CalendarViewSwitch value={view} onChange={onChangeView} />
+				</CalendarDateNav>
+			</div>
+
+			<div className="min-h-0 flex-1">
+				{error !== undefined && error !== null ? (
+					<div className="flex h-full items-center justify-center">
+						<ErrorState
+							title="Couldn't load this week"
+							error={error}
+							onRetry={onRetry}
+						/>
+					</div>
+				) : isLoading ? (
+					<div
+						role="status"
+						aria-label="Loading the calendar"
+						className="flex h-full items-center justify-center bg-surface"
+					>
+						<Loader2 className="size-6 animate-spin text-fg-subtle" />
+					</div>
+				) : calendarViewMountsGrid(view) ? (
+					<CalendarGrid
+						view={view}
+						date={date}
+						events={events}
+						colorByCalendarId={colorByCalendarId}
+						density={density}
+						selectedEventId={selectedEventId}
+						timeZone={timeZone}
+						now={now}
+						onSelectEvent={onSelectEvent}
+						onPickSlot={onPickSlot}
+						onRangeChange={(measuredTitle) =>
+							setMeasured({ key: addressKey, title: measuredTitle })
+						}
+					/>
+				) : (
+					<CalendarViewPlaceholder view={view} />
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -0,0 +1,221 @@
+import {
+	type EventDraft,
+	type RecurrenceScope,
+	RecurrenceScopePrompt,
+} from "@remit/ui";
+import { useState } from "react";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
+import { CalendarEventPane } from "@/components/calendar/CalendarEventPane";
+import {
+	type CalendarWriteOutcome,
+	calendarInstanceId,
+	draftFromEvent,
+	patchFromDrafts,
+	rruleFromIcalData,
+	type ScopedWrite,
+	textFromIcalData,
+	textFromRrule,
+	UNZONED_CALENDAR,
+	useCalendarEvent,
+	useCalendars,
+	useCalendarWrites,
+} from "@/hooks/calendar";
+import { useCalendarData } from "@/hooks/useCalendarData";
+import { formatEventWhen } from "@/lib/calendar-format";
+import { useCalendarAddress, useCalendarNavigation } from "@/routing";
+
+/**
+ * The event the address names, resolved — and everything a reader can do to it.
+ *
+ * The two event routes differ only in what the address says, so the lookup, the
+ * scope question and the way back live here once rather than in each of them.
+ *
+ * An edit or a delete on a repeating event asks which occurrences it means
+ * before the form opens, not on the way out: which instances it reaches changes
+ * what the change is, so it is settled while it can still be answered.
+ *
+ * Every write carries the etag of the version on screen. A 412 means somebody
+ * replaced the event in between, and it is said out loud rather than resolved
+ * by overwriting them.
+ */
+export interface OpenCalendarEventProps {
+	calendarObjectId: string;
+	/** One occurrence of a series, absent on the series itself. */
+	recurrenceId?: string;
+}
+
+const CONFLICT =
+	"This event changed somewhere else — over CalDAV, or in another tab. Nothing was saved. Close it and open it again to see the version that's stored now.";
+
+type Intent = "edit" | "delete";
+
+export function OpenCalendarEvent({
+	calendarObjectId,
+	recurrenceId,
+}: OpenCalendarEventProps) {
+	const { view, date, calendarIds } = useCalendarAddress();
+	const { events } = useCalendarData({ view, date, calendarIds });
+	const { calendars, timeZoneByCalendarId } = useCalendars();
+	const { closeEvent } = useCalendarNavigation();
+	const { updateEvent, deleteEvent, isWriting } = useCalendarWrites();
+
+	const event = events.find(
+		(candidate) =>
+			candidate.id === calendarInstanceId(calendarObjectId, recurrenceId ?? ""),
+	);
+	const calendar = calendars.find(
+		(candidate) => candidate.id === event?.calendarId,
+	);
+	const { resource } = useCalendarEvent(
+		calendarObjectId,
+		event?.calendarId ?? "",
+	);
+
+	const [asking, setAsking] = useState<Intent | undefined>(undefined);
+	const [editing, setEditing] = useState<
+		{ before: EventDraft; scope: RecurrenceScope | undefined } | undefined
+	>(undefined);
+	const [draft, setDraft] = useState<EventDraft | undefined>(undefined);
+	const [problem, setProblem] = useState("");
+
+	const stored = resource ? textFromIcalData(resource.icalData) : undefined;
+	const rrule = resource ? rruleFromIcalData(resource.icalData) : "";
+	const startTime = event && !event.allDay ? event.start.slice(11, 16) : "";
+	const repeat =
+		rrule === "" ? "" : (textFromRrule(rrule, startTime) ?? "Repeats");
+
+	// Scoping needs the occurrence to anchor at, so it is offered only where the
+	// address names one. A series opened by itself has one honest answer, which
+	// is the whole of it.
+	const canScope =
+		event !== undefined &&
+		event.seriesId !== "" &&
+		recurrenceId !== undefined &&
+		recurrenceId !== "";
+	// Until the resource is read there is no etag, and a write with no etag is a
+	// write that can silently overwrite somebody.
+	const writable = event !== undefined && resource !== undefined;
+
+	const settle = (outcome: CalendarWriteOutcome, done: () => void) => {
+		if (outcome.kind === "written") {
+			setProblem("");
+			done();
+			return;
+		}
+		setProblem(outcome.kind === "conflict" ? CONFLICT : outcome.message);
+	};
+
+	const write = (scope: RecurrenceScope | undefined): ScopedWrite => ({
+		calendarObjectId,
+		calendarId: event?.calendarId ?? "",
+		recurrenceId: recurrenceId ?? "",
+		scope,
+		etag: resource?.etag ?? "",
+	});
+
+	const startEdit = (scope: RecurrenceScope | undefined) => {
+		if (!event) return;
+		const before = draftFromEvent(event, {
+			repeat,
+			location: stored?.location ?? "",
+			notes: stored?.description ?? "",
+		});
+		setAsking(undefined);
+		setEditing({ before, scope });
+		setDraft(before);
+		setProblem("");
+	};
+
+	const removeEvent = (scope: RecurrenceScope | undefined) => {
+		setAsking(undefined);
+		void deleteEvent(write(scope)).then((outcome) =>
+			settle(outcome, closeEvent),
+		);
+	};
+
+	const saveEdit = () => {
+		if (!editing || !draft) return;
+		const patch = patchFromDrafts(
+			editing.before,
+			draft,
+			timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
+		);
+		if (!patch.ok) {
+			setProblem(patch.problem);
+			return;
+		}
+		void updateEvent(write(editing.scope), patch.patch).then((outcome) =>
+			settle(outcome, () => {
+				setEditing(undefined);
+				setDraft(undefined);
+			}),
+		);
+	};
+
+	if (asking !== undefined && event) {
+		return (
+			<div className="flex h-full flex-col justify-center bg-surface px-row-inset">
+				<RecurrenceScopePrompt
+					className="mx-auto w-full max-w-md"
+					title={event.title}
+					ruleText={repeat === "" ? "It repeats" : repeat}
+					instanceText={formatEventWhen(event)}
+					onChoose={asking === "edit" ? startEdit : removeEvent}
+					onCancel={() => setAsking(undefined)}
+				/>
+			</div>
+		);
+	}
+
+	if (editing && draft) {
+		return (
+			<CalendarComposePane
+				title="Edit event"
+				subtitle={
+					editing.scope === "this" ? "This occurrence only" : draft.date
+				}
+				calendars={calendars}
+				draft={draft}
+				onChange={setDraft}
+				problem={problem}
+				saveLabel="Save"
+				isSaving={isWriting}
+				repeatEditable={editing.scope === undefined || editing.scope === "all"}
+				calendarEditable={false}
+				onSave={saveEdit}
+				onCancel={() => {
+					setEditing(undefined);
+					setDraft(undefined);
+					setProblem("");
+				}}
+			/>
+		);
+	}
+
+	return (
+		<CalendarEventPane
+			event={
+				event && {
+					...event,
+					location: stored?.location ?? "",
+					notes: stored?.description ?? "",
+					recurrenceRule: repeat,
+				}
+			}
+			calendar={calendar}
+			isOccurrence={recurrenceId !== undefined}
+			problem={problem}
+			onEdit={
+				writable
+					? () => (canScope ? setAsking("edit") : startEdit(undefined))
+					: undefined
+			}
+			onDelete={
+				writable
+					? () => (canScope ? setAsking("delete") : removeEvent(undefined))
+					: undefined
+			}
+			onClose={closeEvent}
+		/>
+	);
+}