@remit/web-client 0.0.238 → 0.0.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.238",
+  "version": "0.0.240",
   "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/settings/CalendarFeedCard.render.test.ts

@@ -0,0 +1,154 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { CalendarFeedState } from "@/hooks/calendar/useCalendarFeed";
+import { CalendarFeedCard } from "./CalendarFeedCard";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`. Vite uses the automatic runtime,
+// so this shim only exists for the SSR test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const CREATED = Date.parse("2026-05-04T09:12:00Z");
+const ROTATED = Date.parse("2026-08-19T16:40:00Z");
+const ADDRESS = "webcal://mail.example.com/feeds/calendar/token-here.ics";
+
+const render = (
+	state: CalendarFeedState,
+	overrides: {
+		mintedUrl?: string;
+		isBusy?: boolean;
+		actionError?: unknown;
+	} = {},
+) =>
+	renderToString(
+		createElement(CalendarFeedCard, {
+			calendarName: "Work",
+			state,
+			mintedUrl: overrides.mintedUrl ?? "",
+			isBusy: overrides.isBusy ?? false,
+			actionError: overrides.actionError,
+			onMint: () => undefined,
+			onRevoke: () => undefined,
+			onDismissMinted: () => undefined,
+			onRetry: () => undefined,
+		}) as never,
+	);
+
+describe("CalendarFeedCard", () => {
+	it("names the calendar in every state", () => {
+		assert.match(render({ status: "loading" }), /Work/);
+	});
+
+	it("offers to create an address when the calendar is not shared", () => {
+		const html = render({ status: "absent" });
+		assert.match(html, /Create subscription address/);
+		assert.doesNotMatch(html, /Stop sharing/);
+	});
+
+	it("says the address is the credential before one exists", () => {
+		assert.match(
+			render({ status: "absent" }),
+			/the address is the credential/i,
+		);
+	});
+
+	it("shows when a shared address was created, and offers both takebacks", () => {
+		const html = render({
+			status: "active",
+			createdAt: CREATED,
+			rotatedAt: 0,
+		});
+		assert.match(html, /shared/);
+		assert.match(html, /Address created/);
+		assert.doesNotMatch(html, /last replaced/);
+		assert.match(html, /Replace address/);
+		assert.match(html, /Stop sharing/);
+	});
+
+	it("names the last replacement once the address has been rotated", () => {
+		const html = render({
+			status: "active",
+			createdAt: CREATED,
+			rotatedAt: ROTATED,
+		});
+		assert.match(html, /last replaced/);
+	});
+
+	/**
+	 * The whole point of the state: a shared calendar shows no address, because
+	 * only a hash of it is stored. A card that could re-display it would mean the
+	 * server had kept the secret.
+	 */
+	it("never shows an address for a feed it merely knows exists", () => {
+		const html = render({
+			status: "active",
+			createdAt: CREATED,
+			rotatedAt: 0,
+		});
+		assert.doesNotMatch(html, /webcal:\/\//);
+	});
+
+	it("shows a minted address once, with a copy control and both warnings", () => {
+		const html = render(
+			{ status: "active", createdAt: CREATED, rotatedAt: 0 },
+			{ mintedUrl: ADDRESS },
+		);
+		assert.match(html, /webcal:\/\/mail\.example\.com/);
+		assert.match(html, /Copy address/);
+		assert.match(html, /shown once and cannot be read back/);
+		assert.match(html, /Anyone holding this address can read every event/);
+	});
+
+	it("states a refused write where the control is, rather than going quiet", () => {
+		const html = render(
+			{ status: "absent" },
+			{ actionError: new Error("Calendar not found") },
+		);
+		assert.match(html, /was not changed/);
+		assert.match(html, /Calendar not found/);
+	});
+
+	/**
+	 * A read the server refused is not "not shared". Drawing the create button
+	 * for it would tell the reader their calendar is private while it may be
+	 * subscribed to right now.
+	 */
+	it("keeps a failed read distinct from a calendar that is not shared", () => {
+		const html = render({
+			status: "unreadable",
+			error: new Error("Service unavailable"),
+		});
+		assert.match(html, /Couldn.{0,6}t read whether Work is shared/);
+		assert.match(html, /Service unavailable/);
+		assert.doesNotMatch(html, /Create subscription address/);
+	});
+
+	it("disables the create control while a write is in flight", () => {
+		const html = render({ status: "absent" }, { isBusy: true });
+		assert.match(html, /disabled/);
+		assert.match(html, /Creating…/);
+	});
+
+	/**
+	 * The mint's invalidate() re-reads the feed, and that read passes back
+	 * through "loading" before it settles as "active". A skeleton drawn over
+	 * the address already on screen carries a name that is a substring of the
+	 * address input's own label, so the two collide under one accessible name.
+	 */
+	it("does not draw the loading skeleton over an address just minted", () => {
+		const html = render({ status: "loading" }, { mintedUrl: ADDRESS });
+		assert.match(html, /webcal:\/\/mail\.example\.com/);
+		assert.doesNotMatch(html, /Loading the subscription address/);
+	});
+
+	it("does not draw a read failure over an address just minted", () => {
+		const html = render(
+			{ status: "unreadable", error: new Error("Service unavailable") },
+			{ mintedUrl: ADDRESS },
+		);
+		assert.match(html, /webcal:\/\/mail\.example\.com/);
+		assert.doesNotMatch(html, /Couldn.{0,6}t read whether/);
+	});
+});

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

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarFeedCard } from "./CalendarFeedCard";
+
+/**
+ * Settings › Calendars: the per-calendar subscription address (#1067). Every
+ * state the server can put the control in, including the one moment the address
+ * is legible and the two confirmations that take it away.
+ */
+const meta: Meta<typeof CalendarFeedCard> = {
+	title: "Flows/Settings Calendars/Subscription address",
+	component: CalendarFeedCard,
+	parameters: { layout: "padded" },
+	args: {
+		calendarName: "Work",
+		mintedUrl: "",
+		isBusy: false,
+		actionError: undefined,
+		onMint: () => undefined,
+		onRevoke: () => undefined,
+		onDismissMinted: () => undefined,
+		onRetry: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarFeedCard>;
+
+const CREATED = Date.parse("2026-05-04T09:12:00Z");
+const ROTATED = Date.parse("2026-08-19T16:40:00Z");
+
+const ADDRESS =
+	"webcal://mail.example.com/feeds/calendar/9Xq2mB7tK1vHs4dLpZ0rY6wJfN3aC8eQuIoT5gRbVkE.ics";
+
+/** The read is still out — no control has an answer to draw yet. */
+export const Loading: Story = {
+	args: { state: { status: "loading" } },
+};
+
+/** Not shared. The one control creates the address, and says what it is. */
+export const NotShared: Story = {
+	args: { state: { status: "absent" } },
+};
+
+/** The create is in flight. */
+export const Creating: Story = {
+	args: { state: { status: "absent" }, isBusy: true },
+};
+
+/** Shared, on an address that has never been replaced. */
+export const Shared: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+	},
+};
+
+/** Shared, on the dark theme. */
+export const SharedDark: Story = {
+	name: "Shared (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+	},
+};
+
+/** Shared on an address that has been replaced since it was first created. */
+export const SharedAfterRotation: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: ROTATED },
+	},
+};
+
+/**
+ * The one moment the address is readable: straight after the write that minted
+ * it. It is not stored in the clear, so nothing can show it again.
+ */
+export const AddressShownOnce: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+		mintedUrl: ADDRESS,
+	},
+};
+
+/** The same, on the dark theme. */
+export const AddressShownOnceDark: Story = {
+	name: "Address shown once (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+		mintedUrl: ADDRESS,
+	},
+};
+
+/** Replacing the address warns that the current one stops working. */
+export const RotateConfirm: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+	},
+	play: async ({ canvasElement }) => {
+		const buttons = [...canvasElement.querySelectorAll("button")];
+		buttons.find((button) => button.textContent === "Replace address")?.click();
+	},
+};
+
+/** Revoking says the address stops working immediately. */
+export const RevokeConfirm: Story = {
+	args: {
+		state: { status: "active", createdAt: CREATED, rotatedAt: 0 },
+	},
+	play: async ({ canvasElement }) => {
+		const buttons = [...canvasElement.querySelectorAll("button")];
+		buttons.find((button) => button.textContent === "Stop sharing")?.click();
+	},
+};
+
+/** The write was refused. The card says so where the button is. */
+export const WriteRefused: Story = {
+	args: {
+		state: { status: "absent" },
+		actionError: new Error("Calendar not found"),
+	},
+};
+
+/**
+ * The read itself failed. Not drawn as "not shared": a calendar the server
+ * would not answer for may well be shared with somebody right now.
+ */
+export const Unreadable: Story = {
+	args: {
+		state: {
+			status: "unreadable",
+			error: new Error("Service unavailable"),
+		},
+	},
+};

package/src/components/settings/CalendarFeedCard.tsx

@@ -0,0 +1,282 @@
+/**
+ * Settings › Calendars: one calendar's secret subscription address (#1067).
+ *
+ * Presentational. Every state the server can put this control in is drawn —
+ * the read still out, the read refused, not shared, shared, and the one moment
+ * the address is legible — because a control that renders nothing for one of
+ * them is indistinguishable from a calendar that cannot be shared at all.
+ */
+import {
+	Badge,
+	Banner,
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardTitle,
+	ConfirmDialog,
+} from "@remit/ui";
+import { Check, Copy, Link2, RefreshCw, Trash2 } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { ErrorState, formatErrorMessage } from "@/components/ui/ErrorState";
+import type { CalendarFeedState } from "@/hooks/calendar/useCalendarFeed";
+import {
+	revokeFeedConfirmCopy,
+	rotateFeedConfirmCopy,
+} from "@/lib/calendar-feed-copy";
+import { formatDatePreset } from "@/lib/format";
+
+export interface CalendarFeedCardProps {
+	calendarName: string;
+	state: CalendarFeedState;
+	/** The address just minted, shown once. Empty at every other moment. */
+	mintedUrl: string;
+	isBusy: boolean;
+	/** A create, rotate or revoke the server turned down. */
+	actionError: unknown;
+	onMint: () => void;
+	onRevoke: () => void;
+	onDismissMinted: () => void;
+	onRetry: () => void;
+}
+
+type Pending = "none" | "rotate" | "revoke";
+
+function MintedAddress({
+	calendarName,
+	url,
+	onDismiss,
+}: {
+	calendarName: string;
+	url: string;
+	onDismiss: () => void;
+}) {
+	const [copied, setCopied] = useState(false);
+	const [copyFailed, setCopyFailed] = useState(false);
+	const revert = useRef(0);
+
+	useEffect(() => () => window.clearTimeout(revert.current), []);
+
+	const copy = () => {
+		navigator.clipboard
+			.writeText(url)
+			.then(() => {
+				setCopyFailed(false);
+				setCopied(true);
+				revert.current = window.setTimeout(() => setCopied(false), 2000);
+			})
+			.catch(() => setCopyFailed(true));
+	};
+
+	return (
+		<div className="mt-3 space-y-2 rounded-sm border border-accent-2/40 bg-accent-2/10 px-3 py-2.5">
+			<p className="text-sm font-medium text-fg">
+				Subscribe with this address. It is shown once and cannot be read back.
+			</p>
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+				<input
+					readOnly
+					value={url}
+					aria-label={`Subscription address for ${calendarName}`}
+					onFocus={(event) => event.currentTarget.select()}
+					className="min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 py-1.5 font-mono text-xs text-fg"
+				/>
+				<Button
+					variant="primary"
+					size="sm"
+					icon={
+						copied ? (
+							<Check className="size-3.5" />
+						) : (
+							<Copy className="size-3.5" />
+						)
+					}
+					onClick={copy}
+				>
+					{copied ? "Copied" : "Copy address"}
+				</Button>
+			</div>
+			{copyFailed && (
+				<Banner tone="warning" variant="soft">
+					The address could not be copied to the clipboard. Select it above and
+					copy it by hand before leaving this page.
+				</Banner>
+			)}
+			<p className="text-xs text-fg-muted">
+				Anyone holding this address can read every event in this calendar,
+				without signing in. Rotate it if it reaches the wrong person.
+			</p>
+			<Button variant="ghost" size="sm" onClick={onDismiss}>
+				I've saved it
+			</Button>
+		</div>
+	);
+}
+
+function ActiveFeed({
+	createdAt,
+	rotatedAt,
+	isBusy,
+	onRotate,
+	onRevoke,
+}: {
+	createdAt: number;
+	rotatedAt: number;
+	isBusy: boolean;
+	onRotate: () => void;
+	onRevoke: () => void;
+}) {
+	return (
+		<div className="space-y-2">
+			<div className="flex flex-wrap items-center gap-2">
+				<Badge tone="positive">shared</Badge>
+				<span className="text-xs text-fg-muted">
+					Address created {formatDatePreset(createdAt, "medium")}
+					{rotatedAt > 0
+						? `, last replaced ${formatDatePreset(rotatedAt, "medium")}`
+						: ""}
+				</span>
+			</div>
+			<p className="text-sm text-fg-muted">
+				The address itself is not stored in readable form, so it cannot be shown
+				again. Replace it if you no longer know where it went.
+			</p>
+			<div className="flex flex-wrap gap-2">
+				<Button
+					variant="secondary"
+					size="sm"
+					disabled={isBusy}
+					icon={<RefreshCw className="size-3.5" />}
+					onClick={onRotate}
+				>
+					Replace address
+				</Button>
+				<Button
+					variant="danger"
+					size="sm"
+					disabled={isBusy}
+					icon={<Trash2 className="size-3.5" />}
+					onClick={onRevoke}
+				>
+					Stop sharing
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export function CalendarFeedCard({
+	calendarName,
+	state,
+	mintedUrl,
+	isBusy,
+	actionError,
+	onMint,
+	onRevoke,
+	onDismissMinted,
+	onRetry,
+}: CalendarFeedCardProps) {
+	const [pending, setPending] = useState<Pending>("none");
+	const titleId = useId();
+
+	const confirm = () => {
+		const action = pending;
+		setPending("none");
+		if (action === "rotate") onMint();
+		if (action === "revoke") onRevoke();
+	};
+
+	const copy =
+		pending === "revoke"
+			? revokeFeedConfirmCopy(calendarName)
+			: rotateFeedConfirmCopy(calendarName);
+
+	return (
+		// Named region: the settings page draws one of these per calendar, and every
+		// control in them is worded identically, so the calendar's name is the only
+		// thing telling two cards apart.
+		<Card className="max-w-xl" role="region" aria-labelledby={titleId}>
+			<CardHeader>
+				<CardTitle id={titleId}>{calendarName}</CardTitle>
+			</CardHeader>
+			<CardBody>
+				{state.status === "loading" && mintedUrl === "" && (
+					// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on a loading skeleton is what assistive tech has to go on
+					<div
+						className="h-12 animate-pulse rounded-sm bg-surface-sunken"
+						aria-busy="true"
+						aria-label={`Loading the subscription address for ${calendarName}`}
+					/>
+				)}
+
+				{state.status === "unreadable" && mintedUrl === "" && (
+					<ErrorState
+						variant="inline"
+						title={`Couldn't read whether ${calendarName} is shared`}
+						error={state.error}
+						onRetry={onRetry}
+					/>
+				)}
+
+				{state.status === "absent" && mintedUrl === "" && (
+					<div className="space-y-2">
+						<p className="text-sm text-fg-muted">
+							Give this calendar a secret address and Apple Calendar, Google
+							Calendar, Outlook and Thunderbird can subscribe to it read-only.
+							Nobody signs in — the address is the credential, so treat it like
+							a password.
+						</p>
+						<Button
+							variant="primary"
+							size="sm"
+							disabled={isBusy}
+							icon={<Link2 className="size-3.5" />}
+							onClick={onMint}
+						>
+							{isBusy ? "Creating…" : "Create subscription address"}
+						</Button>
+					</div>
+				)}
+
+				{state.status === "active" && (
+					<ActiveFeed
+						createdAt={state.createdAt}
+						rotatedAt={state.rotatedAt}
+						isBusy={isBusy}
+						onRotate={() => setPending("rotate")}
+						onRevoke={() => setPending("revoke")}
+					/>
+				)}
+
+				{actionError !== undefined && actionError !== null && (
+					<Banner tone="danger" variant="soft" className="mt-3">
+						<p className="font-medium">
+							The subscription address for {calendarName} was not changed.
+						</p>
+						<p className="mt-0.5 break-words">
+							{formatErrorMessage(actionError)}
+						</p>
+					</Banner>
+				)}
+
+				{mintedUrl !== "" && (
+					<MintedAddress
+						calendarName={calendarName}
+						url={mintedUrl}
+						onDismiss={onDismissMinted}
+					/>
+				)}
+			</CardBody>
+
+			<ConfirmDialog
+				isOpen={pending !== "none"}
+				title={copy.title}
+				description={copy.description}
+				confirmLabel={pending === "revoke" ? "Stop sharing" : "Replace address"}
+				destructive
+				onConfirm={confirm}
+				onCancel={() => setPending("none")}
+			/>
+		</Card>
+	);
+}

package/src/components/settings/CalendarFeedPanel.tsx

@@ -0,0 +1,34 @@
+/**
+ * One calendar's subscription address, wired to the server (#1067).
+ *
+ * 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 { CalendarFeedCard } from "@/components/settings/CalendarFeedCard";
+import { useCalendarFeed } from "@/hooks/calendar/useCalendarFeed";
+
+export interface CalendarFeedPanelProps {
+	calendarId: string;
+	calendarName: string;
+}
+
+export function CalendarFeedPanel({
+	calendarId,
+	calendarName,
+}: CalendarFeedPanelProps) {
+	const feed = useCalendarFeed(calendarId);
+
+	return (
+		<CalendarFeedCard
+			calendarName={calendarName}
+			state={feed.state}
+			mintedUrl={feed.mintedUrl}
+			isBusy={feed.isBusy}
+			actionError={feed.actionError}
+			onMint={feed.mint}
+			onRevoke={feed.revoke}
+			onDismissMinted={feed.dismissMinted}
+			onRetry={feed.retry}
+		/>
+	);
+}