@remit/web-client 0.0.313 → 0.0.314

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.313",
+  "version": "0.0.314",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/calendar/CalendarComposePane.tsx

@@ -6,7 +6,7 @@ import {
 	EventEditor,
 	EventEditorPane,
 } from "@remit/ui";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, AlertTriangle } from "lucide-react";
 
 /**
  * Writing an event, and editing one.
@@ -25,6 +25,7 @@ export interface CalendarComposePaneProps {
 	title: string;
 	/** The one line of context the title cannot carry — which day, which series. */
 	subtitle?: string;
+	notice?: string;
 	calendars: CalendarDescriptor[];
 	draft: EventDraft;
 	onChange: (draft: EventDraft) => void;
@@ -58,6 +59,7 @@ export interface CalendarComposePaneProps {
 export function CalendarComposePane({
 	title,
 	subtitle,
+	notice = "",
 	calendars,
 	draft,
 	onChange,
@@ -83,8 +85,19 @@ export function CalendarComposePane({
 				onSave={onSave}
 				onCancel={onCancel}
 				header={
-					problem === "" && clashes === undefined ? undefined : (
+					problem === "" &&
+					notice === "" &&
+					clashes === undefined ? undefined : (
 						<div className="space-y-2">
+							{notice !== "" && (
+								<p className="flex items-start gap-2 rounded-md border border-warning/40 bg-warning-soft px-3 py-2 text-sm text-fg">
+									<AlertTriangle
+										className="mt-0.5 size-4 shrink-0 text-warning"
+										aria-hidden="true"
+									/>
+									<span className="min-w-0 flex-1 break-words">{notice}</span>
+								</p>
+							)}
 							{problem !== "" && (
 								<div
 									role="alert"

package/src/components/calendar/CalendarWaiting.tsx

@@ -28,6 +28,7 @@ export interface CalendarWaitingProps {
 	/** Why nothing can be added yet, with the way past it; holds Add. */
 	addBlocked?: ReactNode;
 	onAdd: (suggestionId: string) => void;
+	onChangeFirst?: (suggestionId: string) => void;
 	onDismiss: (suggestionId: string) => void;
 }
 
@@ -38,6 +39,7 @@ export function CalendarWaiting({
 	reportHref,
 	addBlocked,
 	onAdd,
+	onChangeFirst,
 	onDismiss,
 }: CalendarWaitingProps) {
 	const top = suggestions[0];
@@ -83,6 +85,7 @@ export function CalendarWaiting({
 						suggestion={top.suggestion}
 						whenText={top.whenText}
 						onAdd={() => onAdd(top.suggestion.id)}
+						onReview={onChangeFirst && (() => onChangeFirst(top.suggestion.id))}
 						onDismiss={() => onDismiss(top.suggestion.id)}
 						addLabel="Add to calendar"
 						busy={busy}

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

@@ -0,0 +1,182 @@
+import type { RemitImapCalendarSuggestionResponse } from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { useCalendarNavigation, useChangingSuggestionId } from "@/routing";
+import { ChangeCalendarSuggestion } from "./ChangeCalendarSuggestion";
+import { calendars, STORY_WEEK } from "./calendar-story-fixtures";
+import {
+	type CalendarServer,
+	CalendarStory,
+	json,
+} from "./calendar-story-server";
+import { PendingSuggestions } from "./PendingSuggestions";
+
+const SUGGESTION = "cccccccc-cccc-4ccc-8ccc-cccccccccccc";
+
+const suggestion = (
+	overrides: Partial<RemitImapCalendarSuggestionResponse> = {},
+): RemitImapCalendarSuggestionResponse => ({
+	suggestionId: SUGGESTION,
+	accountConfigId: "cfg-1",
+	messageId: "msg-1",
+	bodyPartId: "part-1",
+	icalUid: "uid-kickoff",
+	sequence: 0,
+	method: "Request",
+	source: "IcalendarPart",
+	state: "Pending",
+	summary: "Billing migration kickoff",
+	dtStart: "2026-06-11T14:00:00+02:00",
+	dtEnd: "2026-06-11T15:00:00+02:00",
+	allDay: false,
+	location: "Room Noord",
+	organizer: "priya@example.invalid",
+	zoneCertainty: "Explicit",
+	acceptedCalendarObjectId: "",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+const serverWith =
+	(pending: RemitImapCalendarSuggestionResponse[]): CalendarServer =>
+	(request) => {
+		const url = new URL(request.url);
+		if (url.pathname.endsWith("/calendars")) return json({ items: calendars });
+		if (url.pathname.endsWith("/calendar-suggestions"))
+			return json({ items: pending });
+		if (url.pathname.endsWith("/accept"))
+			return json({ ...pending[0], state: "Accepted" });
+		return json({ items: [] });
+	};
+
+function WaitingThenEditor() {
+	const { changeSuggestionFirst, closeEvent } = useCalendarNavigation();
+	const changing = useChangingSuggestionId();
+	return (
+		<div className="flex h-dvh bg-canvas">
+			<PendingSuggestions onChangeFirst={changeSuggestionFirst} />
+			<div className="min-w-0 flex-1 border-l border-line">
+				{changing !== undefined && (
+					<ChangeCalendarSuggestion
+						suggestionId={changing}
+						onClose={closeEvent}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function Editor({
+	pending,
+	openedFrom = "address",
+}: {
+	pending: RemitImapCalendarSuggestionResponse[];
+	openedFrom?: "address" | "card";
+}) {
+	if (openedFrom === "card")
+		return (
+			<CalendarStory
+				entry={STORY_WEEK}
+				server={serverWith(pending)}
+				pane={<WaitingThenEditor />}
+			/>
+		);
+	return (
+		<div className="h-dvh max-w-2xl border-l border-line bg-canvas">
+			<CalendarStory
+				entry={`${STORY_WEEK}/suggestion/${SUGGESTION}`}
+				server={serverWith(pending)}
+				pane={
+					<ChangeCalendarSuggestion
+						suggestionId={SUGGESTION}
+						onClose={() => undefined}
+					/>
+				}
+			/>
+		</div>
+	);
+}
+
+const meta: Meta<typeof Editor> = {
+	title: "Playground/Shipped/Calendar/Change a suggestion first",
+	component: Editor,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Editor>;
+
+export const SeededFromTheMail: Story = {
+	args: { pending: [suggestion()] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByLabelText("Title")).toHaveValue(
+			"Billing migration kickoff",
+		);
+		await expect(canvas.getByLabelText("Location")).toHaveValue("Room Noord");
+		await expect(canvas.getByLabelText("Date")).toHaveValue("2026-06-11");
+		await expect(canvas.getByRole("button", { name: "Add" })).toBeVisible();
+	},
+};
+
+export const ZoneNobodyCouldPlace: Story = {
+	args: {
+		pending: [
+			suggestion({
+				dtStart: "2026-06-11T09:00:00+00:00",
+				dtEnd: "2026-06-11T10:00:00+00:00",
+				zoneCertainty: "Ambiguous",
+			}),
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByLabelText("Start time")).toHaveValue(
+			"09:00",
+		);
+		await expect(
+			canvas.getByText(/named a time zone nothing could resolve/),
+		).toBeVisible();
+	},
+};
+
+export const NoLongerWaiting: Story = {
+	args: { pending: [] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/no longer waiting on you/),
+		).toBeVisible();
+	},
+};
+
+export const SaysWhatIsMissing: Story = {
+	args: { pending: [suggestion()] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const title = await canvas.findByLabelText("Title");
+		await userEvent.clear(title);
+		await userEvent.click(canvas.getByRole("button", { name: "Add" }));
+		await expect(await canvas.findByRole("alert")).toHaveTextContent(
+			"Give the event a title",
+		);
+	},
+};
+
+export const OpenedFromTheWaitingCard: Story = {
+	args: { pending: [suggestion()], openedFrom: "card" },
+	globals: { viewport: { value: "desktop" } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Change first" }),
+		);
+		await expect(await canvas.findByLabelText("Title")).toHaveValue(
+			"Billing migration kickoff",
+		);
+		await expect(canvas.getByLabelText("Location")).toHaveValue("Room Noord");
+		await expect(canvas.getByLabelText("Date")).toHaveValue("2026-06-11");
+	},
+};

package/src/components/calendar/ChangeCalendarSuggestion.tsx

@@ -0,0 +1,159 @@
+import type { RemitImapCalendarSuggestionResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	CalendarFailureNote,
+	type EventDraft,
+	EventEditorPane,
+} from "@remit/ui";
+import { useEffect, useState } from "react";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
+import { EmptyState } from "@/components/ui/EmptyState";
+import {
+	acceptEditedInputFromDrafts,
+	anchorZoneFor,
+	deviceTimeZone,
+	draftFromSuggestion,
+	UNZONED_CALENDAR,
+	useCalendarSuggestionAnswers,
+	useCalendars,
+	useDraftClashes,
+	usePendingCalendarSuggestion,
+} from "@/hooks/calendar";
+import { calendarReportHref } from "@/lib/calendar-report";
+import { suggestionWhen } from "@/lib/calendar-suggestion";
+
+const TITLE = "Add from mail";
+
+const AMBIGUOUS_NOTICE =
+	"The invitation named a time zone nothing could resolve. The time below is as the mail wrote it — check it before adding.";
+
+export interface ChangeCalendarSuggestionProps {
+	suggestionId: string;
+	onClose: () => void;
+}
+
+export function ChangeCalendarSuggestion({
+	suggestionId,
+	onClose,
+}: ChangeCalendarSuggestionProps) {
+	const {
+		suggestion: pending,
+		isLoading,
+		error,
+	} = usePendingCalendarSuggestion(suggestionId);
+	const found = pending ?? undefined;
+	const [held, setHeld] = useState<
+		RemitImapCalendarSuggestionResponse | undefined
+	>(undefined);
+	if (found !== undefined && held === undefined) setHeld(found);
+	const suggestion = held ?? found;
+
+	if (suggestion !== undefined)
+		return (
+			<SuggestionEditor
+				key={suggestion.suggestionId}
+				suggestion={suggestion}
+				onClose={onClose}
+			/>
+		);
+
+	if (error !== null) {
+		const text = "Couldn't read what your mail is waiting on.";
+		return (
+			<EventEditorPane title={TITLE} onClose={onClose}>
+				<CalendarFailureNote
+					text={`${text} Close this and try again.`}
+					reportHref={calendarReportHref(text)}
+					className="m-row-inset"
+				/>
+			</EventEditorPane>
+		);
+	}
+
+	return (
+		<EventEditorPane title={TITLE} onClose={onClose}>
+			<EmptyState
+				message={
+					isLoading
+						? "Reading the suggestion…"
+						: "This suggestion is no longer waiting on you. It was answered, or a later message replaced it."
+				}
+			/>
+		</EventEditorPane>
+	);
+}
+
+interface SuggestionEditorProps {
+	suggestion: RemitImapCalendarSuggestionResponse;
+	onClose: () => void;
+}
+
+function SuggestionEditor({ suggestion, onClose }: SuggestionEditorProps) {
+	const {
+		calendars: held,
+		defaultCalendarId,
+		timeZoneByCalendarId,
+	} = useCalendars();
+	const calendars = held.filter((calendar) => !calendar.readOnly);
+	const answers = useCalendarSuggestionAnswers();
+	const [seed] = useState<EventDraft>(() =>
+		draftFromSuggestion(suggestion, "", deviceTimeZone()),
+	);
+	const [draft, setDraft] = useState<EventDraft>(seed);
+	const [problem, setProblem] = useState("");
+	const clashes = useDraftClashes(draft);
+
+	const initialCalendarId = calendars.some(
+		(calendar) => calendar.id === defaultCalendarId,
+	)
+		? defaultCalendarId
+		: (calendars[0]?.id ?? "");
+	useEffect(() => {
+		if (initialCalendarId === "") return;
+		setDraft((current) =>
+			current.calendarId === ""
+				? { ...current, calendarId: initialCalendarId }
+				: current,
+		);
+	}, [initialCalendarId]);
+
+	const save = () => {
+		const built = acceptEditedInputFromDrafts(suggestion, seed, draft, {
+			clock: deviceTimeZone(),
+			anchor: anchorZoneFor(
+				timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
+			),
+		});
+		if (!built.ok) {
+			setProblem(built.problem);
+			return;
+		}
+		setProblem("");
+		void answers
+			.acceptEdited(suggestion.suggestionId, built.input)
+			.then((answer) => {
+				if (answer.kind === "answered") {
+					onClose();
+					return;
+				}
+				setProblem(`Couldn't add this to your calendar: ${answer.message}`);
+			});
+	};
+
+	return (
+		<CalendarComposePane
+			title={TITLE}
+			subtitle={suggestionWhen(suggestion)}
+			notice={suggestion.zoneCertainty === "Ambiguous" ? AMBIGUOUS_NOTICE : ""}
+			calendars={calendars}
+			draft={draft}
+			onChange={setDraft}
+			problem={problem}
+			saveLabel="Add"
+			isSaving={answers.isAnswering}
+			repeatEditable={false}
+			clashes={clashes}
+			onSave={save}
+			onCancel={onClose}
+		/>
+	);
+}

package/src/components/calendar/PendingSuggestions.tsx

@@ -7,7 +7,11 @@ import {
 	usePendingCalendarSuggestions,
 } from "@/hooks/calendar";
 import { calendarReportHref } from "@/lib/calendar-report";
-import { suggestionWhen, toEventSuggestion } from "@/lib/calendar-suggestion";
+import {
+	suggestionDate,
+	suggestionWhen,
+	toEventSuggestion,
+} from "@/lib/calendar-suggestion";
 import { calendarUnavailable, calendarWriteGate } from "./CalendarUnavailable";
 import { CalendarWaiting } from "./CalendarWaiting";
 
@@ -19,7 +23,11 @@ const refusal = (what: string, answer: SuggestionAnswer): string =>
  * through it. Nothing is drawn when nothing is waiting: an empty column beside
  * the grid is width the week could have had.
  */
-export function PendingSuggestions() {
+export interface PendingSuggestionsProps {
+	onChangeFirst: (suggestionId: string, date: string) => void;
+}
+
+export function PendingSuggestions({ onChangeFirst }: PendingSuggestionsProps) {
 	const { suggestions, error } = usePendingCalendarSuggestions();
 	const calendars = useCalendars();
 	const { defaultCalendarId } = calendars;
@@ -45,6 +53,23 @@ export function PendingSuggestions() {
 		readFailure || failure || "pending invitations could not be answered",
 	);
 
+	const changeFirst = (suggestionId: string) => {
+		const suggestion = suggestions.find(
+			(candidate) => candidate.suggestionId === suggestionId,
+		);
+		if (suggestion) onChangeFirst(suggestionId, suggestionDate(suggestion));
+	};
+	const unplaced = (suggestionId: string): boolean => {
+		const suggestion = suggestions.find(
+			(candidate) => candidate.suggestionId === suggestionId,
+		);
+		return (
+			suggestion?.zoneCertainty === "Ambiguous" &&
+			suggestion.method !== "Cancel"
+		);
+	};
+	const topIsCancellation = suggestions[0]?.method === "Cancel";
+
 	const answer = (what: string, request: () => Promise<SuggestionAnswer>) => {
 		setFailure("");
 		void request().then((result) => setFailure(refusal(what, result)));
@@ -57,11 +82,16 @@ export function PendingSuggestions() {
 			failure={readFailure || failure}
 			reportHref={reportHref}
 			addBlocked={calendarUnavailable(calendarWriteGate(calendars), reportHref)}
-			onAdd={(suggestionId) =>
+			onAdd={(suggestionId) => {
+				if (unplaced(suggestionId)) {
+					changeFirst(suggestionId);
+					return;
+				}
 				answer("add this to your calendar", () =>
 					answers.accept(suggestionId, defaultCalendarId),
-				)
-			}
+				);
+			}}
+			onChangeFirst={topIsCancellation ? undefined : changeFirst}
 			onDismiss={(suggestionId) =>
 				answer("dismiss this", () => answers.dismiss(suggestionId, false))
 			}

package/src/components/calendar/calendar-story-server.tsx

@@ -84,6 +84,11 @@ function storyRouter(
 				path: "new",
 				component: leaf,
 			}),
+			createRoute({
+				getParentRoute: () => viewRoute,
+				path: "suggestion/$suggestionId",
+				component: leaf,
+			}),
 			eventRoute.addChildren([
 				createRoute({
 					getParentRoute: () => eventRoute,