@remit/web-client 0.0.231 → 0.0.233

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

@@ -1,25 +1,115 @@
+import type { CalendarDescriptor, EventDraft } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
 import { CalendarComposePane } from "./CalendarComposePane";
 
 /**
- * `/calendar/{view}/{date}/new`. The address is real and the editor is not
- * written yet, so the pane says which it is and offers the way back — the one
- * thing worse than an unfinished surface is one that looks finished and does
- * nothing.
+ * `/calendar/{view}/{date}/new`, and the same form reopened over an event being
+ * edited.
+ *
+ * It holds no draft of its own, so a story drives it with local state and gets
+ * the surface the app renders. What the stories are for is what the markup
+ * cannot answer: whether a refusal reads as something to fix rather than as
+ * something broken, and whether an edit scoped to one occurrence makes clear
+ * that the rule is not up for changing.
  */
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "cal_work",
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "cal_home",
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Personal",
+		color: "cal-4",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Roadmap review",
+	date: "2026-06-10",
+	startTime: "10:00",
+	endTime: "11:30",
+	allDay: false,
+	calendarId: "cal_work",
+	location: "Room Zuid",
+	guests: "",
+	notes: "",
+	repeat: "",
+};
+
 const meta: Meta<typeof CalendarComposePane> = {
 	title: "App/Calendar/Compose pane",
 	component: CalendarComposePane,
 	parameters: { layout: "fullscreen" },
-	args: { onClose: () => {} },
-	render: (args) => (
-		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
-			<CalendarComposePane {...args} />
-		</div>
-	),
+	args: {
+		title: "New event",
+		subtitle: "2026-06-10",
+		calendars,
+		draft,
+		problem: "",
+		saveLabel: "Add",
+		isSaving: false,
+		onSave: () => {},
+		onCancel: () => {},
+	},
+	render: function Render(args) {
+		const [current, setCurrent] = useState(args.draft);
+		return (
+			<div className="h-dvh max-w-2xl border-l border-line bg-canvas">
+				<CalendarComposePane {...args} draft={current} onChange={setCurrent} />
+			</div>
+		);
+	},
 };
 export default meta;
 
 type Story = StoryObj<typeof CalendarComposePane>;
 
-export const NotBuiltYet: Story = {};
+export const NewEvent: Story = {};
+
+/** A refusal says what was wrong and what to do, where the reader is looking. */
+export const Refused: Story = {
+	args: {
+		draft: { ...draft, title: "" },
+		problem: "Give the event a title before saving it.",
+	},
+};
+
+/** The write is out; the button says so rather than looking unpressed. */
+export const Saving: Story = { args: { isSaving: true } };
+
+/**
+ * Editing one morning of a series. The rule belongs to the series, so it reads
+ * back rather than offering itself for change.
+ */
+export const EditingOneOccurrence: Story = {
+	args: {
+		title: "Edit event",
+		subtitle: "This occurrence only",
+		saveLabel: "Save",
+		repeatEditable: false,
+		draft: {
+			...draft,
+			title: "Standup",
+			startTime: "09:15",
+			endTime: "09:30",
+			repeat: "Every weekday, 09:15",
+		},
+	},
+};
+
+/** The version on screen was replaced elsewhere. Nothing is overwritten. */
+export const Conflicted: Story = {
+	args: {
+		title: "Edit event",
+		saveLabel: "Save",
+		problem:
+			"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.",
+	},
+};

package/src/components/calendar/CalendarComposePane.tsx

@@ -1,34 +1,94 @@
-import { CalendarPlus } from "lucide-react";
+import {
+	type CalendarDescriptor,
+	type EventDraft,
+	EventEditor,
+	EventEditorPane,
+} from "@remit/ui";
+import { AlertCircle } from "lucide-react";
 
 /**
- * Writing a new event.
+ * Writing an event, and editing one.
  *
- * A sibling of the open event rather than a child, so navigating here unmatches
- * whatever the calendar had open in the same transition and a composer over an
- * open event cannot be addressed — the move `compose` makes over a thread.
+ * Presentational, like the pane it sits beside: it holds no draft of its own
+ * and saves nothing. The route owns the draft and the write, so this renders
+ * the same form whichever of the two the address named.
  *
- * The editor itself needs somewhere to save to, so it arrives with the calendar
- * API. The route says that rather than rendering an empty pane.
+ * Guests are left out because the calendar store has nowhere to put them yet,
+ * which is the kit's default. A field that takes names and drops them is worse
+ * than no field: the reader only finds out afterwards, from an event with
+ * nobody on it.
  */
 export interface CalendarComposePaneProps {
-	onClose: () => void;
+	/** What the pane is doing: "New event", "Edit event". */
+	title: string;
+	/** The one line of context the title cannot carry — which day, which series. */
+	subtitle?: string;
+	calendars: CalendarDescriptor[];
+	draft: EventDraft;
+	onChange: (draft: EventDraft) => void;
+	/**
+	 * Why the last save did not happen, in the words the reader needs: what was
+	 * refused and what to do about it. Empty when nothing has been refused.
+	 */
+	problem: string;
+	saveLabel: string;
+	isSaving: boolean;
+	/**
+	 * The rule belongs to the series rather than to one morning of it, so an
+	 * edit scoped to a single occurrence reads it back instead of offering it.
+	 */
+	repeatEditable?: boolean;
+	/**
+	 * Whether the event can still be sent to a different calendar. Writing one
+	 * chooses; editing one cannot, because the collection a resource lives in is
+	 * part of its address and the patch has no field for it.
+	 */
+	calendarEditable?: boolean;
+	onSave: () => void;
+	onCancel: () => void;
 }
 
-export function CalendarComposePane({ onClose }: CalendarComposePaneProps) {
+export function CalendarComposePane({
+	title,
+	subtitle,
+	calendars,
+	draft,
+	onChange,
+	problem,
+	saveLabel,
+	isSaving,
+	repeatEditable = true,
+	calendarEditable = true,
+	onSave,
+	onCancel,
+}: CalendarComposePaneProps) {
 	return (
-		<div className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center">
-			<CalendarPlus className="size-8 text-fg-subtle" aria-hidden="true" />
-			<p className="text-sm font-medium text-fg">Not built yet</p>
-			<p className="max-w-xs text-sm text-fg-muted">
-				Writing an event arrives with the calendar API.
-			</p>
-			<button
-				type="button"
-				onClick={onClose}
-				className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
-			>
-				Back to the calendar
-			</button>
-		</div>
+		<EventEditorPane title={title} subtitle={subtitle} onClose={onCancel}>
+			<EventEditor
+				draft={draft}
+				onChange={onChange}
+				calendars={calendars}
+				layout="pane"
+				repeatEditable={repeatEditable}
+				calendarEditable={calendarEditable}
+				saveLabel={isSaving ? "Saving…" : saveLabel}
+				onSave={onSave}
+				onCancel={onCancel}
+				header={
+					problem === "" ? undefined : (
+						<div
+							role="alert"
+							className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm"
+						>
+							<AlertCircle
+								className="mt-0.5 size-4 shrink-0 text-danger"
+								aria-hidden="true"
+							/>
+							<p className="min-w-0 flex-1 break-words text-fg">{problem}</p>
+						</div>
+					)
+				}
+			/>
+		</EventEditorPane>
 	);
 }

package/src/components/calendar/CalendarComposeSeed.tsx

@@ -0,0 +1,35 @@
+import type { CalendarSlotPick } from "@remit/ui";
+import { createContext, type ReactNode, useContext } from "react";
+
+/**
+ * The slot a reader dragged out of the grid, handed to the composer the click
+ * opened.
+ *
+ * It is not in the address on purpose. What a half-written event says is not a
+ * fact about where the reader is, and a link to a composer pre-filled with
+ * somebody else's Tuesday afternoon is not an address worth being able to send.
+ * The composer opened without one starts on the day the calendar is showing.
+ *
+ * It lives in a module reached through the `@/` alias for the same reason
+ * `CalendarShell`'s context does: the generated route tree imports route files
+ * relatively, so a context declared inside one resolves to a second module
+ * instance and hands the consumer an empty default.
+ */
+const CalendarComposeSeedCtx = createContext<CalendarSlotPick | undefined>(
+	undefined,
+);
+
+export const CalendarComposeSeedProvider = ({
+	pick,
+	children,
+}: {
+	pick: CalendarSlotPick | undefined;
+	children?: ReactNode;
+}) => (
+	<CalendarComposeSeedCtx.Provider value={pick}>
+		{children}
+	</CalendarComposeSeedCtx.Provider>
+);
+
+export const useCalendarComposeSeed = (): CalendarSlotPick | undefined =>
+	useContext(CalendarComposeSeedCtx);

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

@@ -47,7 +47,15 @@ const meta: Meta<typeof CalendarEventPane> = {
 	title: "App/Calendar/Event pane",
 	component: CalendarEventPane,
 	parameters: { layout: "fullscreen" },
-	args: { event, calendar, isOccurrence: false, onClose: () => {} },
+	args: {
+		event,
+		calendar,
+		isOccurrence: false,
+		problem: "",
+		onEdit: () => {},
+		onDelete: () => {},
+		onClose: () => {},
+	},
 	render: (args) => (
 		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
 			<CalendarEventPane {...args} />
@@ -79,3 +87,24 @@ export const Occurrence: Story = {
 export const NotOnThisWeek: Story = {
 	args: { event: undefined, calendar: undefined },
 };
+
+/**
+ * The event was replaced somewhere else — over CalDAV, or in another tab —
+ * between it being read and the write going out. Nothing was overwritten, and
+ * the pane says so where the reader is looking rather than anywhere else.
+ */
+export const ChangedElsewhere: Story = {
+	args: {
+		problem:
+			"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.",
+	},
+};
+
+/**
+ * The resource has not been read yet, so there is no version to write against.
+ * The controls stay off until there is: a write with no etag is one that can
+ * quietly overwrite somebody.
+ */
+export const NotWritableYet: Story = {
+	args: { onEdit: undefined, onDelete: undefined },
+};

package/src/components/calendar/CalendarEventPane.tsx

@@ -1,16 +1,15 @@
 import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
 import { EventDetail } from "@remit/ui";
-import { CalendarDays } from "lucide-react";
+import { AlertCircle, CalendarDays } from "lucide-react";
 import { formatEventWhen } from "@/lib/calendar-format";
 
 /**
  * The event the address has open.
  *
  * Presentational, like the workspace beside it: the route resolves the event
- * and turns closing into a navigation, so this renders what it is handed and
- * nothing else. Editing and deleting arrive with the calendar API, and until
- * then the header offers neither — a control that leads nowhere is worse than
- * no control.
+ * and turns closing, editing and deleting into things it does, so this renders
+ * what it is handed and nothing else. Each control appears only when the route
+ * gave it somewhere to go — a control that leads nowhere is worse than none.
  */
 export interface CalendarEventPaneProps {
 	/** Absent when the address names an event the calendar does not have. */
@@ -18,6 +17,13 @@ export interface CalendarEventPaneProps {
 	calendar: CalendarDescriptor | undefined;
 	/** Whether the address names one occurrence rather than the series. */
 	isOccurrence: boolean;
+	/**
+	 * A write that did not happen, stated where the reader is looking. Empty
+	 * when the last one did.
+	 */
+	problem?: string;
+	onEdit?: () => void;
+	onDelete?: () => void;
 	onClose: () => void;
 }
 
@@ -25,6 +31,9 @@ export function CalendarEventPane({
 	event,
 	calendar,
 	isOccurrence,
+	problem = "",
+	onEdit,
+	onDelete,
 	onClose,
 }: CalendarEventPaneProps) {
 	if (!event || !calendar) {
@@ -55,10 +64,24 @@ export function CalendarEventPane({
 					One occurrence of a repeating event
 				</p>
 			)}
+			{problem !== "" && (
+				<div
+					role="alert"
+					className="flex shrink-0 items-start gap-2 border-b border-danger/40 bg-danger-soft px-row-inset py-2 text-sm"
+				>
+					<AlertCircle
+						className="mt-0.5 size-4 shrink-0 text-danger"
+						aria-hidden="true"
+					/>
+					<p className="min-w-0 flex-1 break-words text-fg">{problem}</p>
+				</div>
+			)}
 			<EventDetail
 				event={event}
 				calendar={calendar}
 				whenText={formatEventWhen(event)}
+				onEdit={onEdit}
+				onDelete={onDelete}
 				onClose={onClose}
 				className="min-h-0 flex-1"
 			/>

package/src/components/calendar/CalendarViewPlaceholder.tsx

@@ -4,14 +4,13 @@ import { CalendarRange } from "lucide-react";
 /**
  * A zoom level that is named but not drawn yet.
  *
- * The ladder is five steps and three of them arrive later, so the route stays
+ * The ladder is five steps and two of them arrive later, so the route stays
  * addressable and says what it is waiting on. A view that silently rendered
  * nothing would be indistinguishable from a week with nothing in it.
  */
 const WAITING_ON: Record<string, string> = {
 	year: "The year grid arrives with the rest of the zoom ladder.",
 	month: "The month grid arrives with the rest of the zoom ladder.",
-	agenda: "The agenda arrives with the scrolling day strip.",
 };
 
 export interface CalendarViewPlaceholderProps {
@@ -29,8 +28,8 @@ export function CalendarViewPlaceholder({
 			<CalendarRange className="size-8 text-fg-subtle" aria-hidden="true" />
 			<p className="text-sm font-medium text-fg">Not built yet</p>
 			<p className="max-w-xs text-sm text-fg-muted">
-				{WAITING_ON[view] ?? "This view arrives in a later stage."} Week and Day
-				work now.
+				{WAITING_ON[view] ?? "This view arrives in a later stage."} Week, Day
+				and Agenda work now.
 			</p>
 		</div>
 	);

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

@@ -18,6 +18,9 @@ import { CalendarWorkspace } from "./CalendarWorkspace";
  * 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.
+ *
+ * The strip is a slot rather than something this pane builds, so it is storied
+ * under App/Calendar/Agenda and stood in for here.
  */
 const TIME_ZONE = "Europe/Amsterdam";
 const DATE = "2026-06-10";
@@ -106,9 +109,13 @@ const week: CalendarEventData[] = [
 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");
@@ -119,6 +126,16 @@ function Workspace({
 			date={DATE}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
+			// The strip loads its own days and is storied on its own; here it
+			// stands in for whatever the route mounts at that zoom.
+			agenda={
+				<div className="p-4 text-sm text-fg-muted">
+					The strip, which App/Calendar/Agenda has to itself.
+				</div>
+			}
+			isLoading={isLoading}
+			error={error}
+			onRetry={() => undefined}
 			density={density}
 			selectedEventId={selected}
 			timeZone={TIME_ZONE}
@@ -155,6 +172,21 @@ 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.
@@ -163,7 +195,8 @@ export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
 
 export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
 
-export const AgendaNotBuiltYet: Story = { args: { initialView: "agenda" } };
+/** The zoom that mounts the strip instead of the grid. */
+export const Agenda: Story = { args: { initialView: "agenda" } };
 
 /**
  * The calendar beside the nav it is reached from. The entry sits under the

package/src/components/calendar/CalendarWorkspace.tsx

@@ -9,10 +9,15 @@ import {
 	type Density,
 	segmentClassName,
 } from "@remit/ui";
-import { useId, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { type ReactNode, useId, useState } from "react";
 import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
-import { calendarViewMountsGrid } from "@/lib/calendar-route";
+import { ErrorState } from "@/components/ui/ErrorState";
+import {
+	calendarViewMountsAgenda,
+	calendarViewMountsGrid,
+} from "@/lib/calendar-route";
 
 /**
  * The calendar's own pane: the toolbar that moves it and whatever the current
@@ -36,6 +41,21 @@ export interface CalendarWorkspaceProps {
 	date: string;
 	events: CalendarEventData[];
 	colorByCalendarId: Record<string, CalendarColorId>;
+	/**
+	 * The strip, at the one zoom that draws it. A slot rather than something
+	 * built here because it loads its own days over a rolling range, and this
+	 * pane holds no events and knows no router.
+	 */
+	agenda: ReactNode;
+	/** 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;
@@ -78,6 +98,10 @@ export function CalendarWorkspace({
 	date,
 	events,
 	colorByCalendarId,
+	agenda,
+	isLoading = false,
+	error,
+	onRetry,
 	density,
 	selectedEventId,
 	timeZone,
@@ -136,27 +160,51 @@ export function CalendarWorkspace({
 				</CalendarDateNav>
 			</div>
 
-			<div className="min-h-0 flex-1">
-				{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>
+			{/* The strip rolls its own range, so it answers for its own days: the
+			    week this pane read is not what it is drawing, and gating it on that
+			    read would blank a strip that has everything it needs. It also
+			    scrolls itself, so it gets a column to fill rather than a box. */}
+			{calendarViewMountsAgenda(view) ? (
+				<div className="flex min-h-0 flex-1 flex-col">{agenda}</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>
 	);
 }