@remit/web-client 0.0.290 → 0.0.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.290",
+  "version": "0.0.292",
   "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.stories.tsx

@@ -130,3 +130,22 @@ export const Conflicted: Story = {
 			"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 span on the form runs into something already booked, named before Save. */
+export const Clashing: Story = {
+	args: {
+		clashes: [
+			{
+				id: "evt_board",
+				label: "Board prep, Wed 10 June, 10:30 – 11:00",
+			},
+			{
+				id: "evt_vendor",
+				label: "Vendor call, Wed 10 June, 11:00 – 12:00",
+			},
+		],
+	},
+};
+
+/** Checked, and clear. Silence here would read as "not checked". */
+export const Clear: Story = { args: { clashes: [] } };

package/src/components/calendar/CalendarComposePane.tsx

@@ -1,4 +1,6 @@
 import {
+	type CalendarClash,
+	CalendarClashStrip,
 	type CalendarDescriptor,
 	type EventDraft,
 	EventEditor,
@@ -44,6 +46,11 @@ export interface CalendarComposePaneProps {
 	 * part of its address and the patch has no field for it.
 	 */
 	calendarEditable?: boolean;
+	/**
+	 * What the span on the form runs into. Undefined while there is nothing to
+	 * check or the answer has not landed, which draws no strip at all.
+	 */
+	clashes?: CalendarClash[];
 	onSave: () => void;
 	onCancel: () => void;
 }
@@ -59,6 +66,7 @@ export function CalendarComposePane({
 	isSaving,
 	repeatEditable = true,
 	calendarEditable = true,
+	clashes,
 	onSave,
 	onCancel,
 }: CalendarComposePaneProps) {
@@ -75,16 +83,28 @@ export function CalendarComposePane({
 				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>
+					problem === "" && clashes === undefined ? undefined : (
+						<div className="space-y-2">
+							{problem !== "" && (
+								<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>
+							)}
+							{clashes !== undefined && (
+								<CalendarClashStrip
+									clashes={clashes}
+									clearText="Nothing else is booked at this time."
+								/>
+							)}
 						</div>
 					)
 				}

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -10,6 +10,7 @@ import {
 	type CalendarWriteOutcome,
 	calendarInstanceId,
 	draftFromEvent,
+	emptyDraft,
 	patchFromDrafts,
 	rruleFromIcalData,
 	type ScopedWrite,
@@ -19,6 +20,7 @@ import {
 	useCalendarEvent,
 	useCalendars,
 	useCalendarWrites,
+	useDraftClashes,
 } from "@/hooks/calendar";
 import { useCalendarData } from "@/hooks/useCalendarData";
 import { formatEventWhen } from "@/lib/calendar-format";
@@ -77,6 +79,10 @@ export function OpenCalendarEvent({
 	>(undefined);
 	const [draft, setDraft] = useState<EventDraft | undefined>(undefined);
 	const [problem, setProblem] = useState("");
+	const clashes = useDraftClashes(
+		draft ?? emptyDraft("", ""),
+		calendarObjectId,
+	);
 
 	const stored = resource ? textFromIcalData(resource.icalData) : undefined;
 	const rrule = resource ? rruleFromIcalData(resource.icalData) : "";
@@ -182,6 +188,7 @@ export function OpenCalendarEvent({
 				isSaving={isWriting}
 				repeatEditable={editing.scope === undefined || editing.scope === "all"}
 				calendarEditable={false}
+				clashes={clashes}
 				onSave={saveEdit}
 				onCancel={() => {
 					setEditing(undefined);

package/src/components/calendar/WriteCalendarEvent.tsx

@@ -8,6 +8,7 @@ import {
 	UNZONED_CALENDAR,
 	useCalendars,
 	useCalendarWrites,
+	useDraftClashes,
 } from "@/hooks/calendar";
 import { useCalendarAddress } from "@/routing";
 
@@ -42,6 +43,8 @@ export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
 		};
 	});
 
+	const clashes = useDraftClashes(draft);
+
 	// The default calendar is provisioned by the listing itself, so the picker
 	// has one the moment the calendars arrive rather than making the reader
 	// choose before they can type anything.
@@ -88,6 +91,7 @@ export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
 			problem={problem}
 			saveLabel="Add"
 			isSaving={isWriting}
+			clashes={clashes}
 			onSave={save}
 			onCancel={onClose}
 		/>

package/src/components/settings/CalendarCreateCard.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarCreateCard } from "./CalendarCreateCard";
+
+/** Settings › Calendars: adding a calendar, and the server refusing one. */
+const meta: Meta<typeof CalendarCreateCard> = {
+	title: "Playground/Shipped/Settings/Calendars/New calendar",
+	component: CalendarCreateCard,
+	parameters: { layout: "padded" },
+	args: {
+		isBusy: false,
+		problem: "",
+		onCreate: () => Promise.resolve(true),
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarCreateCard>;
+
+export const Empty: Story = {};
+
+/** The create is out. */
+export const Adding: Story = { args: { isBusy: true } };
+
+/** The address is already taken, said in the server's words. */
+export const AddressTaken: Story = {
+	args: {
+		problem:
+			'"work" already addresses a calendar on this account — pick another',
+	},
+};
+
+/** The same card on the dark theme. */
+export const Dark: Story = { parameters: { theme: "dark" } };

package/src/components/settings/CalendarCreateCard.tsx

@@ -0,0 +1,149 @@
+/**
+ * Settings › Calendars: adding a calendar.
+ *
+ * The address is the collection's identity and the path a CalDAV client
+ * bookmarks, so it is asked for rather than hidden. It follows the name until
+ * the reader edits it, and the server decides whether it is free — a taken one
+ * comes back in the server's words where the button is.
+ */
+import {
+	Banner,
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardTitle,
+	Input,
+} from "@remit/ui";
+import { Plus } from "lucide-react";
+import { useId, useState } from "react";
+import type { CalendarDetails } from "@/components/settings/CalendarDetailsForm";
+import { TimeZoneSelect } from "@/components/settings/TimeZoneSelect";
+import { UNZONED_CALENDAR } from "@/hooks/calendar";
+import { calendarUrlSegmentFor } from "@/lib/calendar-collection-copy";
+
+export interface NewCalendar extends CalendarDetails {
+	urlSegment: string;
+}
+
+export interface CalendarCreateCardProps {
+	isBusy: boolean;
+	/** The server's words for the last create it turned down; empty when none. */
+	problem: string;
+	/** Resolves true once the server has the calendar, so the form can clear. */
+	onCreate: (calendar: NewCalendar) => Promise<boolean>;
+}
+
+export function CalendarCreateCard({
+	isBusy,
+	problem,
+	onCreate,
+}: CalendarCreateCardProps) {
+	const [displayName, setDisplayName] = useState("");
+	const [typedSegment, setTypedSegment] = useState<string | undefined>(
+		undefined,
+	);
+	const [timezone, setTimezone] = useState(UNZONED_CALENDAR);
+	const titleId = useId();
+	const nameId = useId();
+	const segmentId = useId();
+	const zoneId = useId();
+
+	const urlSegment = typedSegment ?? calendarUrlSegmentFor(displayName);
+	const ready = displayName.trim() !== "" && urlSegment.trim() !== "";
+
+	return (
+		<Card className="max-w-xl" role="region" aria-labelledby={titleId}>
+			<CardHeader>
+				<CardTitle id={titleId}>New calendar</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<form
+					className="space-y-3"
+					onSubmit={(event) => {
+						event.preventDefault();
+						if (!ready) return;
+						void onCreate({
+							displayName: displayName.trim(),
+							urlSegment: urlSegment.trim(),
+							timezone,
+						}).then((created) => {
+							if (!created) return;
+							setDisplayName("");
+							setTypedSegment(undefined);
+							setTimezone(UNZONED_CALENDAR);
+						});
+					}}
+				>
+					<div className="grid gap-3 sm:grid-cols-2">
+						<div className="space-y-1">
+							<label
+								htmlFor={nameId}
+								className="text-xs font-medium text-fg-muted"
+							>
+								Name
+							</label>
+							<Input
+								id={nameId}
+								value={displayName}
+								maxLength={140}
+								disabled={isBusy}
+								onChange={(event) => setDisplayName(event.target.value)}
+							/>
+						</div>
+						<div className="space-y-1">
+							<label
+								htmlFor={segmentId}
+								className="text-xs font-medium text-fg-muted"
+							>
+								Address
+							</label>
+							<Input
+								id={segmentId}
+								value={urlSegment}
+								maxLength={64}
+								disabled={isBusy}
+								onChange={(event) => setTypedSegment(event.target.value)}
+							/>
+						</div>
+						<div className="space-y-1 sm:col-span-2">
+							<label
+								htmlFor={zoneId}
+								className="text-xs font-medium text-fg-muted"
+							>
+								Time zone
+							</label>
+							<TimeZoneSelect
+								id={zoneId}
+								value={timezone}
+								disabled={isBusy}
+								onChange={setTimezone}
+							/>
+						</div>
+					</div>
+					<p className="text-xs text-fg-muted">
+						The address names the calendar for CalDAV clients and cannot be
+						changed later. The name and zone can.
+					</p>
+
+					{problem !== "" && (
+						<Banner tone="danger" variant="soft">
+							<p className="font-medium">The calendar was not added.</p>
+							<p className="mt-0.5 break-words">{problem}</p>
+						</Banner>
+					)}
+
+					<Button
+						type="submit"
+						variant="primary"
+						size="sm"
+						disabled={isBusy || !ready}
+						icon={<Plus className="size-3.5" />}
+					>
+						{isBusy ? "Adding…" : "Add calendar"}
+					</Button>
+				</form>
+			</CardBody>
+		</Card>
+	);
+}

package/src/components/settings/CalendarDetailsForm.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarDetailsForm } from "./CalendarDetailsForm";
+
+/**
+ * Settings › Calendars: one calendar's name and zone, and deleting it. Every
+ * state the server can leave the form in, including its refusal to delete the
+ * default calendar.
+ */
+const meta: Meta<typeof CalendarDetailsForm> = {
+	title: "Playground/Shipped/Settings/Calendars/Calendar details",
+	component: CalendarDetailsForm,
+	parameters: { layout: "padded" },
+	args: {
+		calendarName: "Work",
+		timezone: "Europe/Amsterdam",
+		isBusy: false,
+		problem: "",
+		onSave: () => undefined,
+		onDelete: () => undefined,
+	},
+	render: (args) => (
+		<div className="max-w-xl">
+			<CalendarDetailsForm {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarDetailsForm>;
+
+export const Default: Story = {};
+
+/** No zone of its own, which reads as UTC. */
+export const Unzoned: Story = { args: { timezone: "" } };
+
+/** A save or delete is out; every control waits. */
+export const Busy: Story = { args: { isBusy: true } };
+
+/** The server refused to delete the default calendar, in its own words. */
+export const DeleteRefused: Story = {
+	args: {
+		calendarName: "Default",
+		problem:
+			'"default" is the calendar this account files events into and cannot be removed',
+	},
+};
+
+/** Deleting asks first, because every event in the calendar goes with it. */
+export const DeleteConfirm: Story = {
+	play: async ({ canvasElement }) => {
+		const buttons = [...canvasElement.querySelectorAll("button")];
+		buttons.find((button) => button.textContent === "Delete calendar")?.click();
+	},
+};
+
+/** The same form on the dark theme. */
+export const Dark: Story = { parameters: { theme: "dark" } };

package/src/components/settings/CalendarDetailsForm.tsx

@@ -0,0 +1,136 @@
+/**
+ * Settings › Calendars: one calendar's name and zone, and deleting it.
+ *
+ * Presentational. The draft starts from what the server holds and the parent
+ * remounts it when that changes, so a saved rename reads back from the listing
+ * rather than from what was typed. A delete always asks first: the calendar
+ * goes with every event in it, and nothing on this page can tell an empty one
+ * from a full one without reading all of its time.
+ */
+import { Banner, Button, ConfirmDialog, Input } from "@remit/ui";
+import { Save, Trash2 } from "lucide-react";
+import { useId, useState } from "react";
+import { TimeZoneSelect } from "@/components/settings/TimeZoneSelect";
+import { deleteCalendarConfirmCopy } from "@/lib/calendar-collection-copy";
+
+export interface CalendarDetails {
+	displayName: string;
+	timezone: string;
+}
+
+export interface CalendarDetailsFormProps {
+	/** What the server holds now. */
+	calendarName: string;
+	timezone: string;
+	isBusy: boolean;
+	/** The server's words for the last write it turned down; empty when none. */
+	problem: string;
+	onSave: (details: CalendarDetails) => void;
+	onDelete: () => void;
+}
+
+export function CalendarDetailsForm({
+	calendarName,
+	timezone,
+	isBusy,
+	problem,
+	onSave,
+	onDelete,
+}: CalendarDetailsFormProps) {
+	const [displayName, setDisplayName] = useState(calendarName);
+	const [zone, setZone] = useState(timezone);
+	const [confirming, setConfirming] = useState(false);
+	const nameId = useId();
+	const zoneId = useId();
+
+	const trimmed = displayName.trim();
+	const changed = trimmed !== calendarName || zone !== timezone;
+	const copy = deleteCalendarConfirmCopy(calendarName);
+
+	return (
+		<>
+			<form
+				className="space-y-3"
+				onSubmit={(event) => {
+					event.preventDefault();
+					if (!changed || trimmed === "") return;
+					onSave({ displayName: trimmed, timezone: zone });
+				}}
+			>
+				<div className="grid gap-3 sm:grid-cols-2">
+					<div className="space-y-1">
+						<label
+							htmlFor={nameId}
+							className="text-xs font-medium text-fg-muted"
+						>
+							Name
+						</label>
+						<Input
+							id={nameId}
+							value={displayName}
+							maxLength={140}
+							disabled={isBusy}
+							onChange={(event) => setDisplayName(event.target.value)}
+						/>
+					</div>
+					<div className="space-y-1">
+						<label
+							htmlFor={zoneId}
+							className="text-xs font-medium text-fg-muted"
+						>
+							Time zone
+						</label>
+						<TimeZoneSelect
+							id={zoneId}
+							value={zone}
+							disabled={isBusy}
+							onChange={setZone}
+						/>
+					</div>
+				</div>
+
+				{problem !== "" && (
+					<Banner tone="danger" variant="soft">
+						<p className="font-medium">{calendarName} was not changed.</p>
+						<p className="mt-0.5 break-words">{problem}</p>
+					</Banner>
+				)}
+
+				<div className="flex flex-wrap gap-2">
+					<Button
+						type="submit"
+						variant="secondary"
+						size="sm"
+						disabled={isBusy || !changed || trimmed === ""}
+						icon={<Save className="size-3.5" />}
+					>
+						Save changes
+					</Button>
+					<Button
+						type="button"
+						variant="danger"
+						size="sm"
+						disabled={isBusy}
+						icon={<Trash2 className="size-3.5" />}
+						onClick={() => setConfirming(true)}
+					>
+						Delete calendar
+					</Button>
+				</div>
+			</form>
+
+			<ConfirmDialog
+				isOpen={confirming}
+				title={copy.title}
+				description={copy.description}
+				confirmLabel="Delete calendar"
+				destructive
+				onConfirm={() => {
+					setConfirming(false);
+					onDelete();
+				}}
+				onCancel={() => setConfirming(false)}
+			/>
+		</>
+	);
+}

package/src/components/settings/CalendarFeedCard.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarDetailsForm } from "./CalendarDetailsForm";
 import { CalendarFeedCard } from "./CalendarFeedCard";
 
 /**
@@ -132,3 +133,20 @@ export const Unreadable: Story = {
 		},
 	},
 };
+
+/** The whole card as the settings page draws it: details above the address. */
+export const WithDetails: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+		details: (
+			<CalendarDetailsForm
+				calendarName="Work"
+				timezone="Europe/Amsterdam"
+				isBusy={false}
+				problem=""
+				onSave={() => undefined}
+				onDelete={() => undefined}
+			/>
+		),
+	},
+};

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);
+					}}
+				/>
+			}
+		/>
+	);
+}