@remit/web-client 0.0.291 → 0.0.293

package/src/components/settings/CalendarFeedCard.tsx

@@ -17,7 +17,7 @@ import {
 	ConfirmDialog,
 } from "@remit/ui";
 import { Check, Copy, Link2, RefreshCw, Trash2 } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
+import { type ReactNode, useEffect, useId, useRef, useState } from "react";
 import { ErrorState, formatErrorMessage } from "@/components/ui/ErrorState";
 import type { CalendarFeedState } from "@/hooks/calendar/useCalendarFeed";
 import {
@@ -28,6 +28,8 @@ import { formatDatePreset } from "@/lib/format";
 
 export interface CalendarFeedCardProps {
 	calendarName: string;
+	/** The calendar's own settings, drawn above its subscription address. */
+	details?: ReactNode;
 	state: CalendarFeedState;
 	/** The address just minted, shown once. Empty at every other moment. */
 	mintedUrl: string;
@@ -167,6 +169,7 @@ function ActiveFeed({
 
 export function CalendarFeedCard({
 	calendarName,
+	details,
 	state,
 	mintedUrl,
 	isBusy,
@@ -200,6 +203,9 @@ export function CalendarFeedCard({
 				<CardTitle id={titleId}>{calendarName}</CardTitle>
 			</CardHeader>
 			<CardBody>
+				{details && (
+					<div className="mb-4 border-b border-line pb-4">{details}</div>
+				)}
 				{state.status === "loading" && mintedUrl === "" && (
 					// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on a loading skeleton is what assistive tech has to go on
 					<div

package/src/components/settings/CalendarFeedPanel.tsx

@@ -4,23 +4,27 @@
  * A component rather than a loop body in the settings route: each calendar
  * reads and writes its own feed, and a hook cannot be called per iteration.
  */
+import type { ReactNode } from "react";
 import { CalendarFeedCard } from "@/components/settings/CalendarFeedCard";
 import { useCalendarFeed } from "@/hooks/calendar/useCalendarFeed";
 
 export interface CalendarFeedPanelProps {
 	calendarId: string;
 	calendarName: string;
+	details?: ReactNode;
 }
 
 export function CalendarFeedPanel({
 	calendarId,
 	calendarName,
+	details,
 }: CalendarFeedPanelProps) {
 	const feed = useCalendarFeed(calendarId);
 
 	return (
 		<CalendarFeedCard
 			calendarName={calendarName}
+			details={details}
 			state={feed.state}
 			mintedUrl={feed.mintedUrl}
 			isBusy={feed.isBusy}

package/src/components/settings/CalendarSettingsPanel.tsx

@@ -0,0 +1,54 @@
+/**
+ * One calendar on the settings page: its name and zone, deleting it, and its
+ * subscription address, wired to the server.
+ */
+import { useState } from "react";
+import { CalendarDetailsForm } from "@/components/settings/CalendarDetailsForm";
+import { CalendarFeedPanel } from "@/components/settings/CalendarFeedPanel";
+import {
+	type CalendarCollectionOutcome,
+	useCalendarCollectionWrites,
+} from "@/hooks/calendar/useCalendarCollectionWrites";
+
+export interface CalendarSettingsPanelProps {
+	calendarId: string;
+	calendarName: string;
+	timezone: string;
+}
+
+export function CalendarSettingsPanel({
+	calendarId,
+	calendarName,
+	timezone,
+}: CalendarSettingsPanelProps) {
+	const { updateCalendar, deleteCalendar, isWriting } =
+		useCalendarCollectionWrites();
+	const [problem, setProblem] = useState("");
+
+	const settle = (outcome: CalendarCollectionOutcome) =>
+		setProblem(outcome.kind === "refused" ? outcome.message : "");
+
+	return (
+		<CalendarFeedPanel
+			calendarId={calendarId}
+			calendarName={calendarName}
+			details={
+				<CalendarDetailsForm
+					key={`${calendarName}\u0000${timezone}`}
+					calendarName={calendarName}
+					timezone={timezone}
+					isBusy={isWriting}
+					problem={problem}
+					onSave={(details) => {
+						setProblem("");
+						void updateCalendar(calendarId, details).then(settle);
+					}}
+					onDelete={() => {
+						setProblem("");
+						void deleteCalendar(calendarId).then(settle);
+					}}
+				/>
+			}
+		/>
+	);
+}

package/src/components/settings/TimeZoneSelect.tsx

@@ -0,0 +1,43 @@
+import { Select } from "@remit/ui";
+import { UNZONED_CALENDAR } from "@/hooks/calendar";
+
+/**
+ * The zone a calendar's floating times are read in. The empty choice is how
+ * the API spells "no zone", which reads as UTC — there is no IANA name for UTC
+ * the server accepts, so it is offered as its own option rather than as a zone.
+ */
+export interface TimeZoneSelectProps {
+	id: string;
+	value: string;
+	disabled?: boolean;
+	onChange: (timeZone: string) => void;
+}
+
+const ZONES = Intl.supportedValuesOf("timeZone");
+
+export function TimeZoneSelect({
+	id,
+	value,
+	disabled,
+	onChange,
+}: TimeZoneSelectProps) {
+	const zones =
+		value === UNZONED_CALENDAR || ZONES.includes(value)
+			? ZONES
+			: [value, ...ZONES];
+	return (
+		<Select
+			id={id}
+			value={value}
+			disabled={disabled}
+			onChange={(event) => onChange(event.target.value)}
+		>
+			<option value={UNZONED_CALENDAR}>None (read as UTC)</option>
+			{zones.map((zone) => (
+				<option key={zone} value={zone}>
+					{zone}
+				</option>
+			))}
+		</Select>
+	);
+}

package/src/components/settings/calendar-collection-cards.render.test.ts

@@ -0,0 +1,149 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { CalendarClash, EventDraft } from "@remit/ui";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
+import { CalendarCreateCard } from "./CalendarCreateCard";
+import { CalendarDetailsForm } from "./CalendarDetailsForm";
+import { CalendarFeedCard } from "./CalendarFeedCard";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+const details = (problem = "", timezone = "Europe/Amsterdam") =>
+	renderToString(
+		createElement(CalendarDetailsForm, {
+			calendarName: "Work",
+			timezone,
+			isBusy: false,
+			problem,
+			onSave: () => undefined,
+			onDelete: () => undefined,
+		}) as never,
+	);
+
+describe("CalendarDetailsForm", () => {
+	it("offers the name, the zone, a save and a delete", () => {
+		const html = details();
+		assert.match(html, /value="Work"/);
+		assert.match(html, /Europe\/Amsterdam/);
+		assert.match(html, /Save changes/);
+		assert.match(html, /Delete calendar/);
+	});
+
+	it("offers no zone as its own choice, read as UTC", () => {
+		assert.match(details("", ""), /None \(read as UTC\)/);
+	});
+
+	it("keeps a zone the list does not hold rather than dropping it", () => {
+		assert.match(details("", "Mars/Olympus"), /Mars\/Olympus/);
+	});
+
+	it("states a refusal in the server's words", () => {
+		const html = details("cannot be removed");
+		assert.match(html, /role="alert"/);
+		assert.match(html.replaceAll("<!-- -->", ""), /Work was not changed/);
+		assert.match(html, /cannot be removed/);
+	});
+});
+
+describe("CalendarCreateCard", () => {
+	const create = (problem = "") =>
+		renderToString(
+			createElement(CalendarCreateCard, {
+				isBusy: false,
+				problem,
+				onCreate: () => Promise.resolve(true),
+			}) as never,
+		);
+
+	it("asks for a name, an address and a zone", () => {
+		const html = create();
+		assert.match(html, /New calendar/);
+		assert.match(html, />Name</);
+		assert.match(html, />Address</);
+		assert.match(html, />Time zone</);
+		assert.match(html, /Add calendar/);
+	});
+
+	it("states a refused create where the button is", () => {
+		const html = create("already addresses a calendar");
+		assert.match(html, /The calendar was not added/);
+		assert.match(html, /already addresses a calendar/);
+	});
+});
+
+describe("CalendarFeedCard with details", () => {
+	it("draws the calendar's settings above its address", () => {
+		const html = renderToString(
+			createElement(CalendarFeedCard, {
+				calendarName: "Work",
+				details: createElement("p", null, "calendar details here"),
+				state: { status: "absent" },
+				mintedUrl: "",
+				isBusy: false,
+				actionError: undefined,
+				onMint: () => undefined,
+				onRevoke: () => undefined,
+				onDismissMinted: () => undefined,
+				onRetry: () => undefined,
+			}) as never,
+		);
+		assert.ok(
+			html.indexOf("calendar details here") <
+				html.indexOf("Create subscription address"),
+		);
+	});
+});
+
+describe("CalendarComposePane clashes", () => {
+	const draft: EventDraft = {
+		title: "Roadmap review",
+		date: "2026-06-10",
+		endDate: "2026-06-10",
+		startTime: "10:00",
+		endTime: "11:00",
+		allDay: false,
+		calendarId: "cal_work",
+		location: "",
+		guests: "",
+		notes: "",
+		repeat: "",
+	};
+	const pane = (clashes: CalendarClash[] | undefined) =>
+		renderToString(
+			createElement(CalendarComposePane, {
+				title: "New event",
+				calendars: [],
+				draft,
+				onChange: () => undefined,
+				problem: "",
+				saveLabel: "Add",
+				isSaving: false,
+				clashes,
+				onSave: () => undefined,
+				onCancel: () => undefined,
+			}) as never,
+		);
+
+	it("names what the span runs into", () => {
+		const html = pane([{ id: "a", label: "Board prep, Wed 10 June" }]);
+		assert.match(
+			html,
+			/This clashes with something you have already agreed to/,
+		);
+		assert.match(html, /Board prep, Wed 10 June/);
+	});
+
+	it("says a checked span is clear", () => {
+		assert.match(pane([]), /Nothing else is booked at this time/);
+	});
+
+	it("draws nothing before there is an answer", () => {
+		const html = pane(undefined);
+		assert.doesNotMatch(html, /Nothing else is booked/);
+		assert.doesNotMatch(html, /This clashes/);
+	});
+});

package/src/hooks/calendar/calendar-collections.render.test.ts

@@ -0,0 +1,259 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { CalendarClash, EventDraft } from "@remit/ui";
+import { act, createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "../../test-support/http";
+import {
+	type CalendarCollectionOutcome,
+	type CalendarCollectionWrites,
+	useCalendarCollectionWrites,
+} from "./useCalendarCollectionWrites";
+import { useCalendars } from "./useCalendars";
+import { useDraftClashes } from "./useDraftClashes";
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let writes: CalendarCollectionWrites | undefined;
+let clashes: CalendarClash[] | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	writes = undefined;
+	clashes = undefined;
+});
+
+const calendars: RemitImapCalendarResponse[] = [
+	{
+		calendarId: WORK,
+		accountConfigId: "cfg-1",
+		urlSegment: "work",
+		displayName: "Work",
+		color: "Cal1",
+		componentSet: "VeventOnly",
+		source: "UserCreated",
+		timezone: "",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	} as RemitImapCalendarResponse,
+];
+
+const instance = (
+	over: Partial<RemitImapCalendarEventInstance>,
+): RemitImapCalendarEventInstance =>
+	({
+		calendarId: WORK,
+		calendarObjectId: "obj-1",
+		recurrenceId: "",
+		icalUid: "uid-1",
+		summary: "Board prep",
+		start: "2026-06-10T10:30:00+00:00",
+		end: "2026-06-10T11:00:00+00:00",
+		allDay: false,
+		status: "Confirmed",
+		transparency: "Opaque",
+		zoneCertainty: "Explicit",
+		etag: "etag-1",
+		hasRecurrence: false,
+		...over,
+	}) as RemitImapCalendarEventInstance;
+
+const draft = (over: Partial<EventDraft>): EventDraft => ({
+	title: "Roadmap review",
+	date: "2026-06-10",
+	endDate: "2026-06-10",
+	startTime: "10:00",
+	endTime: "11:00",
+	allDay: false,
+	calendarId: WORK,
+	location: "",
+	guests: "",
+	notes: "",
+	repeat: "",
+	...over,
+});
+
+const settle = async () => {
+	await harness?.flush();
+	await harness?.wait(20);
+	await harness?.flush();
+};
+
+const serve = (respond: (call: HttpCall) => unknown) => {
+	http = mockFetch((call) =>
+		call.path.endsWith("/calendars") && call.method === "GET"
+			? { items: calendars }
+			: respond(call),
+	);
+	harness = createDomHarness();
+};
+
+function WritesProbe() {
+	useCalendars();
+	writes = useCalendarCollectionWrites();
+	return null;
+}
+
+const write = async (
+	run: (writes: CalendarCollectionWrites) => Promise<CalendarCollectionOutcome>,
+): Promise<CalendarCollectionOutcome> => {
+	const held = writes;
+	if (!held) throw new Error("the writes are not mounted");
+	let outcome: CalendarCollectionOutcome | undefined;
+	await act(async () => {
+		outcome = await run(held);
+	});
+	await settle();
+	if (!outcome) throw new Error("the write returned nothing");
+	return outcome;
+};
+
+const listingReads = (): number =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "GET" && call.path.endsWith("/calendars"),
+	).length;
+
+describe("managing a calendar collection", () => {
+	it("creates one and reads the listing back", async () => {
+		serve(() => calendars[0]);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+		const before = listingReads();
+
+		const outcome = await write((writes) =>
+			writes.createCalendar({ displayName: "Harbour", urlSegment: "harbour" }),
+		);
+
+		assert.deepEqual(outcome, { kind: "written" });
+		const posted = (http?.calls ?? []).find((call) => call.method === "POST");
+		assert.equal(posted?.body?.urlSegment, "harbour");
+		assert.ok(listingReads() > before, "the listing has to be read again");
+	});
+
+	it("renames and rezones one through a patch", async () => {
+		serve(() => calendars[0]);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+
+		await write((writes) =>
+			writes.updateCalendar(WORK, {
+				displayName: "Works",
+				timezone: "Europe/Lisbon",
+			}),
+		);
+
+		const patched = (http?.calls ?? []).find((call) => call.method === "PATCH");
+		assert.equal(patched?.path.endsWith(`/calendars/${WORK}`), true);
+		assert.equal(patched?.body?.timezone, "Europe/Lisbon");
+	});
+
+	it("hands back the server's words when it refuses a delete", async () => {
+		serve((call) =>
+			call.method === "DELETE"
+				? httpError(400, '"default" cannot be removed')
+				: calendars[0],
+		);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+
+		const outcome = await write((writes) => writes.deleteCalendar(WORK));
+		assert.equal(outcome.kind, "refused");
+		assert.match(
+			outcome.kind === "refused" ? outcome.message : "",
+			/cannot be removed/,
+		);
+	});
+});
+
+function ClashProbe({
+	of,
+	editing = "",
+}: {
+	of: EventDraft;
+	editing?: string;
+}) {
+	clashes = useDraftClashes(of, editing);
+	return null;
+}
+
+const clashesFor = async (
+	of: EventDraft,
+	items: RemitImapCalendarEventInstance[],
+	editing = "",
+): Promise<CalendarClash[] | undefined> => {
+	serve(() => ({ items }));
+	harness?.renderApp(createElement(ClashProbe, { of, editing }));
+	await settle();
+	return clashes;
+};
+
+describe("the clashes a draft runs into", () => {
+	it("names an event the span overlaps", async () => {
+		const found = await clashesFor(draft({}), [instance({})]);
+		assert.equal(found?.length, 1);
+		assert.match(found?.[0]?.label ?? "", /^Board prep, /);
+	});
+
+	it("finds none for a span in a free slot", async () => {
+		const found = await clashesFor(
+			draft({ startTime: "14:00", endTime: "15:00" }),
+			[instance({})],
+		);
+		assert.deepEqual(found, []);
+	});
+
+	it("never counts the event being edited against itself", async () => {
+		const found = await clashesFor(draft({}), [instance({})], "obj-1");
+		assert.deepEqual(found, []);
+	});
+
+	it("checks a multi-day span through its last day", async () => {
+		const found = await clashesFor(
+			draft({
+				endDate: "2026-06-16",
+				startTime: "09:00",
+				endTime: "17:00",
+			}),
+			[
+				instance({
+					start: "2026-06-15T12:00:00+00:00",
+					end: "2026-06-15T13:00:00+00:00",
+				}),
+			],
+		);
+		assert.equal(found?.length, 1);
+		const read = http?.to("/calendar-events")[0]?.url ?? "";
+		assert.ok(
+			read.includes(`to=${encodeURIComponent("2026-06-22")}`),
+			"the read has to cover the week of the last day",
+		);
+	});
+
+	it("checks nothing when the end is not after the start", async () => {
+		const found = await clashesFor(
+			draft({ startTime: "10:00", endTime: "10:00" }),
+			[instance({})],
+		);
+		assert.equal(found, undefined);
+	});
+
+	it("checks nothing for an all-day draft", async () => {
+		const found = await clashesFor(draft({ allDay: true }), [instance({})]);
+		assert.equal(found, undefined);
+	});
+});

package/src/hooks/calendar/index.ts

@@ -57,6 +57,11 @@ export {
 	useCalendarSelection,
 	useDrawnEvents,
 } from "./selection";
+export {
+	type CalendarCollectionOutcome,
+	type CalendarCollectionWrites,
+	useCalendarCollectionWrites,
+} from "./useCalendarCollectionWrites";
 export {
 	type CalendarEventResource,
 	useCalendarEvent,
@@ -82,6 +87,7 @@ export {
 	useCalendarWrites,
 	useInvalidateCalendarReads,
 } from "./useCalendarWrites";
+export { useDraftClashes } from "./useDraftClashes";
 export {
 	addDays,
 	type CalendarWindow,