@remit/web-client 0.0.291 → 0.0.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.291",
+  "version": "0.0.293",
   "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/onboarding/OnboardingWizard.flow.test.ts

@@ -169,6 +169,51 @@ describe("OnboardingWizard — the first-run path", () => {
 		assert.equal(imapHostField(dom).value, "imap.fastmail.com");
 	});
 
+	it("picks the Gmail preset from a Gmail address and locks both hosts", async () => {
+		const dom = start();
+		await walkToServers(dom, "alice@gmail.com");
+
+		const provider = dom.query<HTMLSelectElement>("#provider-select");
+		assert.ok(provider);
+		assert.equal(provider.value, "gmail");
+		const imap = imapHostField(dom);
+		const smtp = dom.query<HTMLInputElement>(
+			'input[placeholder="smtp.example.com"]',
+		);
+		assert.ok(smtp, "expected the SMTP host field");
+		assert.equal(imap.value, "imap.gmail.com");
+		assert.equal(smtp.value, "smtp.gmail.com");
+		assert.equal(imap.readOnly, true);
+		assert.equal(smtp.readOnly, true);
+		const security = [
+			...dom.document.querySelectorAll<HTMLSelectElement>("fieldset select"),
+		];
+		assert.deepEqual(
+			security.map((select) => [select.value, select.disabled]),
+			[
+				["tls", true],
+				["starttls", true],
+			],
+		);
+		assert.match(dom.text(), /2-Step Verification/);
+		assert.match(dom.text(), /create an app password/);
+		const link = dom.byText("a", "Get an app password");
+		assert.equal(
+			link.getAttribute("href"),
+			"https://support.google.com/accounts/answer/185833",
+		);
+	});
+
+	it("offers no Gmail sign-in on the connector step", () => {
+		const dom = start();
+		clickText(dom, "Add your first account");
+		assert.match(dom.text(), /How does this account connect/);
+		assert.doesNotMatch(
+			dom.text(),
+			/Gmail|Sign in with Google|No app passwords/,
+		);
+	});
+
 	it("falls back to a guess for a domain nobody has heard of", async () => {
 		const dom = start();
 		await walkToServers(dom, "alice@unheard-of.example");

package/src/components/onboarding/OnboardingWizard.tsx

@@ -257,7 +257,7 @@ function StepConnector({
 				</>
 			}
 		>
-			<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
 				<ConnectorTile
 					name="IMAP / SMTP"
 					description="Any mail provider — Fastmail, iCloud, your own server."
@@ -265,12 +265,6 @@ function StepConnector({
 					selected={selected === "imap"}
 					onSelect={() => setSelected("imap")}
 				/>
-				<ConnectorTile
-					name="Gmail"
-					description="Sign in with Google. No app passwords."
-					icon={<AtSign className="size-5" />}
-					comingSoon
-				/>
 				<ConnectorTile
 					name="Outlook / Microsoft 365"
 					description="Sign in with Microsoft. Works with Outlook.com and work accounts."
@@ -588,7 +582,7 @@ function StepAddress({
 	);
 }
 
-function StepServers({
+export function StepServers({
 	email,
 	imapConfig,
 	smtpConfig,

package/src/components/onboarding/onboarding-servers.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { getPresetById } from "@/lib/provider-presets";
+import { StepServers } from "./OnboardingWizard";
+
+const gmail = getPresetById("gmail");
+if (!gmail) throw new Error("the gmail preset is missing");
+
+const meta: Meta<typeof StepServers> = {
+	title: "Playground/Shipped/Onboarding/Servers",
+	component: StepServers,
+	parameters: { layout: "fullscreen" },
+	args: {
+		email: "alice@gmail.com",
+		imapConfig: gmail.imap,
+		smtpConfig: gmail.smtp,
+		discovered: true,
+		onContinue: () => {},
+		onBack: () => {},
+		onChange: () => {},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof StepServers>;
+
+export const GmailPreset: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByLabelText("Provider")).toHaveValue("gmail");
+		await expect(canvas.getByDisplayValue("imap.gmail.com")).toHaveAttribute(
+			"readonly",
+		);
+		await expect(canvas.getByDisplayValue("smtp.gmail.com")).toHaveAttribute(
+			"readonly",
+		);
+		for (const security of canvas.getAllByLabelText("Security")) {
+			await expect(security).toBeDisabled();
+		}
+		await expect(canvas.getByText(/2-Step Verification/)).toBeVisible();
+		await expect(
+			canvas.getByRole("link", { name: "Get an app password" }),
+		).toHaveAttribute("href", gmail.passwordHelp.url);
+	},
+};
+
+export const GmailPresetPhone: Story = {
+	globals: { viewport: { value: "mobile" } },
+};

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