@remit/web-client 0.0.305 → 0.0.307

package/package.json

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

@@ -1,13 +1,9 @@
 import type { Density } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, within } from "storybook/test";
+import { instancesWithin } from "@/mocks/story-frame/calendar-window";
 import { AgendaView } from "./AgendaView";
-import {
-	calendars,
-	fortnight,
-	instancesWithin,
-	STORY_DATE,
-} from "./calendar-story-fixtures";
+import { calendars, fortnight, STORY_DATE } from "./calendar-story-fixtures";
 import {
 	type CalendarServer,
 	CalendarStory,

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

@@ -1,5 +1,6 @@
 import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 import { CalendarEventPane } from "./CalendarEventPane";
 
 /**
@@ -175,3 +176,25 @@ export const ChangedElsewhere: Story = {
 export const NotWritableYet: Story = {
 	args: { onEdit: undefined, onDelete: undefined },
 };
+
+/**
+ * An event from a subscribed feed. The controls are gone because the feed
+ * owns the event, and the note says so where they would have been.
+ */
+export const FromSubscription: Story = {
+	args: {
+		onEdit: undefined,
+		onDelete: undefined,
+		readOnlyNote:
+			"Read-only: from calendar.google.com. Change it where the feed comes from.",
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByText(
+				"Read-only: from calendar.google.com. Change it where the feed comes from.",
+			),
+		).toBeVisible();
+		await expect(canvas.queryByRole("button", { name: "Edit" })).toBeNull();
+	},
+};

package/src/components/calendar/CalendarEventPane.tsx

@@ -1,6 +1,6 @@
 import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
 import { EventDetail } from "@remit/ui";
-import { AlertCircle, CalendarDays } from "lucide-react";
+import { AlertCircle, CalendarDays, Lock } from "lucide-react";
 import type { ReactNode } from "react";
 import { formatEventWhen } from "@/lib/calendar-format";
 
@@ -76,6 +76,11 @@ export interface CalendarEventPaneProps {
 	 * when the last one did.
 	 */
 	problem?: string;
+	/**
+	 * Why this event cannot be changed here, stated where Edit and Delete would
+	 * be. Empty for an event the reader can change.
+	 */
+	readOnlyNote?: string;
 	onEdit?: () => void;
 	onDelete?: () => void;
 	onClose: () => void;
@@ -87,6 +92,7 @@ export function CalendarEventPane({
 	isOccurrence,
 	absence = NOT_IN_VIEW,
 	problem = "",
+	readOnlyNote = "",
 	onEdit,
 	onDelete,
 	onClose,
@@ -129,6 +135,12 @@ export function CalendarEventPane({
 					One occurrence of a repeating event
 				</p>
 			)}
+			{readOnlyNote !== "" && (
+				<p className="flex shrink-0 items-start gap-2 border-b border-line bg-surface-sunken px-row-inset py-2 text-sm text-fg-muted">
+					<Lock className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+					<span className="min-w-0 flex-1 break-words">{readOnlyNote}</span>
+				</p>
+			)}
 			{problem !== "" && (
 				<div
 					role="alert"

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
+import { instancesWithin } from "@/mocks/story-frame/calendar-window";
 import { useOpenCalendarEvent } from "@/routing";
 import {
 	calendars,
 	fortnight,
-	instancesWithin,
 	ROADMAP_OBJECT,
 	roadmapResource,
 	STANDUP_OBJECT,

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -38,6 +38,7 @@ import { useCalendarData } from "@/hooks/useCalendarData";
 import { formatEventWhen } from "@/lib/calendar-format";
 import { calendarEventReportHref } from "@/lib/calendar-report";
 import type { CalendarSearch } from "@/lib/calendar-route";
+import { subscriptionReadOnlyNote } from "@/lib/calendar-subscription";
 import { useCalendarAddress, useCalendarNavigation } from "@/routing";
 
 /**
@@ -113,7 +114,7 @@ export function OpenCalendarEvent({
 }: OpenCalendarEventProps) {
 	const { view, date, calendarIds } = useCalendarAddress();
 	const { events, isLoading } = useCalendarData({ view, date, calendarIds });
-	const { calendars, timeZoneByCalendarId } = useCalendars();
+	const { calendars, collections, timeZoneByCalendarId } = useCalendars();
 	const { closeEvent } = useCalendarNavigation();
 	const { updateEvent, deleteEvent, isWriting } = useCalendarWrites();
 
@@ -178,7 +179,8 @@ export function OpenCalendarEvent({
 		recurrenceId !== "";
 	// Until the resource is read there is no etag, and a write with no etag is a
 	// write that can silently overwrite somebody.
-	const writable = event !== undefined && resource !== undefined;
+	const writable =
+		event !== undefined && resource !== undefined && !calendar?.readOnly;
 
 	const settle = (outcome: CalendarWriteOutcome, done: () => void) => {
 		if (outcome.kind === "written") {
@@ -340,6 +342,15 @@ export function OpenCalendarEvent({
 				}
 			}
 			calendar={calendar}
+			readOnlyNote={
+				calendar?.readOnly
+					? subscriptionReadOnlyNote(
+							collections.find(
+								(collection) => collection.calendarId === calendar.id,
+							)?.subscriptionUrl ?? "",
+						)
+					: ""
+			}
 			isOccurrence={recurrenceId !== undefined}
 			absence={absenceOf(search, seriesOnly && isLoading)}
 			problem={problem}

package/src/components/calendar/WriteCalendarEvent.tsx

@@ -30,7 +30,8 @@ export interface WriteCalendarEventProps {
 export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
 	const { date } = useCalendarAddress();
 	const seed = useCalendarComposeSeed();
-	const { calendars, timeZoneByCalendarId } = useCalendars();
+	const { calendars: held, timeZoneByCalendarId } = useCalendars();
+	const calendars = held.filter((calendar) => !calendar.readOnly);
 	const { createEvent, isWriting } = useCalendarWrites();
 	const [problem, setProblem] = useState("");
 	const [draft, setDraft] = useState<EventDraft>(() => {

package/src/components/calendar/calendar-app.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import {
+	calendars,
+	fortnight,
+	ROADMAP_OBJECT,
+	roadmapResource,
+	STANDUP_OBJECT,
+	STANDUP_RECURRENCE,
+	STORY_DATE,
+	STORY_WEEK,
+	standupResource,
+} from "./calendar-story-fixtures";
+
+const world = mailWorld({
+	calendars,
+	calendarEvents: fortnight,
+	calendarResources: [roadmapResource, standupResource],
+});
+const desktop = { viewport: { value: "desktop", isRotated: false } };
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const meta = {
+	title: "Playground/Shipped/Calendar/App",
+	component: AppStory,
+	args: { url: STORY_WEEK },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+	globals: desktop,
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+export const Week: Story = {
+	play: async () => {
+		await expect(
+			(await page().findAllByText("Roadmap review"))[0],
+		).toBeVisible();
+		await expect(
+			(await page().findAllByRole("link", { name: "Calendar" }))[0],
+		).toBeVisible();
+	},
+};
+
+export const Empty: Story = {
+	parameters: { msw: { handlers: mailHandlers(mailWorld()) } },
+	play: async () => {
+		await expect(
+			(await page().findAllByRole("link", { name: "Calendar" }))[0],
+		).toBeVisible();
+		await expect(page().queryByText("Roadmap review")).toBeNull();
+	},
+};
+
+export const OpenEvent: Story = {
+	args: { url: `${STORY_WEEK}/${ROADMAP_OBJECT}` },
+	play: async () => {
+		await expect(await page().findByText("Room Zuid")).toBeVisible();
+		await expect(
+			await page().findByRole("button", { name: "Edit" }),
+		).toBeVisible();
+	},
+};
+
+export const RecurrenceScope: Story = {
+	args: { url: `${STORY_WEEK}/${STANDUP_OBJECT}/${STANDUP_RECURRENCE}` },
+	play: async () => {
+		await userEvent.click(await page().findByRole("button", { name: "Edit" }));
+		await expect(
+			await page().findByText("What should the change apply to?"),
+		).toBeVisible();
+	},
+};
+
+export const NewEvent: Story = {
+	args: { url: `${STORY_WEEK}/new` },
+	play: async () => {
+		await expect(await page().findByLabelText("Date")).toHaveValue(STORY_DATE);
+		await expect(page().getByLabelText("Title")).toHaveValue("");
+		await expect(
+			await page().findByRole("radio", { name: "Northwind" }),
+		).toBeChecked();
+	},
+};
+
+export const PhoneNewEvent: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}/new` },
+	globals: phone,
+	play: async () => {
+		await expect(await page().findByLabelText("Date")).toHaveValue(STORY_DATE);
+		await expect(page().getByLabelText("Title")).toHaveValue("");
+	},
+};
+
+export const PhoneDay: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}` },
+	globals: phone,
+	play: async () => {
+		await expect(
+			(await page().findAllByText("Roadmap review"))[0],
+		).toBeVisible();
+	},
+};
+
+export const PhoneEvent: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}/${ROADMAP_OBJECT}` },
+	globals: phone,
+	play: async () => {
+		await expect(await page().findByText("Room Zuid")).toBeVisible();
+	},
+};

package/src/components/calendar/calendar-story-fixtures.ts

@@ -116,23 +116,3 @@ export const standupResource = {
 		"END:VCALENDAR",
 	].join("\r\n"),
 } as RemitImapCalendarEventResponse;
-
-/**
- * The occurrences inside the window a request asked for.
- *
- * The panes read a week at a time and hold several weeks at once, so a server
- * that answered every window with the same list would draw each day's events
- * once per window it appears in.
- */
-export const instancesWithin = (
-	url: URL,
-	instances: readonly RemitImapCalendarEventInstance[],
-): RemitImapCalendarEventInstance[] => {
-	const from = Date.parse(url.searchParams.get("from") ?? "");
-	const to = Date.parse(url.searchParams.get("to") ?? "");
-	if (Number.isNaN(from) || Number.isNaN(to)) return [...instances];
-	return instances.filter((instance) => {
-		const start = Date.parse(instance.start);
-		return start >= from && start < to;
-	});
-};

package/src/components/calendar/pending-suggestions.render.test.ts

@@ -35,6 +35,11 @@ const calendars = [
 		source: "Default",
 		timezone: "Europe/Amsterdam",
 		syncSequence: 1,
+		subscriptionUrl: "",
+		subscriptionEnabled: false,
+		subscriptionCheckedAt: 0,
+		subscriptionFetchedAt: 0,
+		subscriptionError: "",
 		createdAt: 0,
 		updatedAt: 0,
 	},

package/src/components/mail/DraftsView.tsx

@@ -32,6 +32,7 @@ import {
 	ComfortableRowTextContent,
 	cn,
 	comfortableRowClass,
+	PaneHeader,
 	type ThreadRowData,
 	type ThreadSection,
 } from "@remit/ui";
@@ -194,18 +195,13 @@ export function DraftsView({
 
 	return (
 		<section className="flex h-full w-full flex-col bg-surface">
-			{/* List datum bar */}
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					{title}
-				</h1>
+			<PaneHeader title={title} leading={<NavMenuButton />}>
 				{(unreadCount ?? 0) > 0 && (
 					<span className="shrink-0 text-2xs text-fg-subtle tabular-nums">
 						{unreadCount} unread
 					</span>
 				)}
-			</header>
+			</PaneHeader>
 
 			{/* Scrollable body */}
 			<div className="flex-1 overflow-y-auto">

package/src/components/mail/OutboxPane.tsx

@@ -26,6 +26,7 @@ import {
 	cn,
 	LIST_ROW_SELECTOR,
 	OutboxRow,
+	PaneHeader,
 	ReadingPaneEmpty,
 	useRovingFocus,
 } from "@remit/ui";
@@ -458,18 +459,7 @@ function OutboxList() {
 
 	return (
 		<div className="h-full flex flex-col bg-canvas">
-			{/* List datum bar (40px, the shared `--spacing-pane-header`): keeps
-			    the bottom hairline on the same y as the mailbox view so the grid
-			    line stays continuous across nav → outbox (no staircase, #422). */}
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					Outbox
-				</h1>
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{messages.length} {messages.length === 1 ? "message" : "messages"}
-				</span>
-			</header>
+			<OutboxListHeader count={messages.length} />
 			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow
@@ -484,6 +474,16 @@ function OutboxList() {
 	);
 }
 
+function OutboxListHeader({ count }: { count: number }) {
+	return (
+		<PaneHeader title="Outbox" leading={<NavMenuButton />}>
+			<span className="shrink-0 text-2xs text-fg-subtle">
+				{count} {count === 1 ? "message" : "messages"}
+			</span>
+		</PaneHeader>
+	);
+}
+
 /**
  * Outbox reading pane. Mount in the `reading` slot of `AppShellSlotted`.
  * Only rendered ≥ 1024px.
@@ -496,7 +496,7 @@ function OutboxReading() {
 			{/* Detail datum bar (40px): outbox has no message-action toolbar,
 			    but the datum bar must be present so its bottom hairline lines
 			    up with the list pane's, keeping the grid continuous (#422). */}
-			<header className="flex h-pane-header shrink-0 items-center border-b border-line px-3" />
+			<PaneHeader />
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{selectedMessage ? (
 					<OutboxMessageDetail message={selectedMessage} />
@@ -556,15 +556,7 @@ function OutboxPhone() {
 
 	return (
 		<div className="h-full flex flex-col bg-canvas">
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					Outbox
-				</h1>
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{messages.length} {messages.length === 1 ? "message" : "messages"}
-				</span>
-			</header>
+			<OutboxListHeader count={messages.length} />
 			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow

package/src/components/settings/CalendarSettingsPanel.tsx

@@ -2,7 +2,7 @@
  * 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 { type ReactNode, useState } from "react";
 import { CalendarDetailsForm } from "@/components/settings/CalendarDetailsForm";
 import { CalendarFeedPanel } from "@/components/settings/CalendarFeedPanel";
 import {
@@ -14,12 +14,15 @@ export interface CalendarSettingsPanelProps {
 	calendarId: string;
 	calendarName: string;
 	timezone: string;
+	/** Where a subscribed calendar comes from, drawn above its details. */
+	subscription?: ReactNode;
 }
 
 export function CalendarSettingsPanel({
 	calendarId,
 	calendarName,
 	timezone,
+	subscription,
 }: CalendarSettingsPanelProps) {
 	const { updateCalendar, deleteCalendar, isWriting } =
 		useCalendarCollectionWrites();
@@ -33,21 +36,24 @@ export function CalendarSettingsPanel({
 			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);
-					}}
-				/>
+				<>
+					{subscription}
+					<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/CalendarSubscribeCard.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { CalendarSubscribeCard } from "./CalendarSubscribeCard";
+
+/**
+ * Settings › Calendars: subscribing to another calendar's read-only iCal
+ * address (#1261). The server reads the feed before creating anything, so a
+ * refusal means nothing was added.
+ */
+const meta: Meta<typeof CalendarSubscribeCard> = {
+	title: "Playground/Shipped/Settings/Calendars/Subscribe to a calendar",
+	component: CalendarSubscribeCard,
+	parameters: { layout: "padded" },
+	args: {
+		isBusy: false,
+		error: undefined,
+		onSubscribe: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarSubscribeCard>;
+
+/** Empty: the button waits for a name and an address. */
+export const Empty: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByRole("button", { name: "Subscribe" }),
+		).toBeDisabled();
+	},
+};
+
+/** Filled in and sent. */
+export const Filled: Story = {
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await userEvent.type(
+			canvas.getByLabelText("Calendar name"),
+			"Harbour rota",
+		);
+		await userEvent.type(
+			canvas.getByLabelText("Calendar address"),
+			"webcal://calendar.example/harbour/basic.ics",
+		);
+		await userEvent.click(canvas.getByRole("button", { name: "Subscribe" }));
+		await expect(args.onSubscribe).toHaveBeenCalledWith(
+			{
+				displayName: "Harbour rota",
+				url: "webcal://calendar.example/harbour/basic.ics",
+			},
+			expect.any(Function),
+		);
+	},
+};
+
+/** The feed is being read. */
+export const Subscribing: Story = {
+	args: { isBusy: true },
+};
+
+/** The feed could not be read, so no calendar was made. */
+export const Refused: Story = {
+	args: {
+		error: {
+			code: "subscription_unreachable",
+			message: "the calendar was not created: the feed answered HTTP 404",
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("alert")).toHaveTextContent(
+			"The calendar was not added.",
+		);
+	},
+};
+
+/** Refused, on the dark theme. */
+export const RefusedDark: Story = {
+	name: "Refused (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		error: {
+			code: "subscription_unreachable",
+			message:
+				"the calendar was not created: the feed could not be reached (ENOTFOUND)",
+		},
+	},
+};

package/src/components/settings/CalendarSubscribeCard.tsx

@@ -0,0 +1,115 @@
+/**
+ * Settings › Calendars: subscribe a new calendar to a read-only iCalendar
+ * address (issue #1261).
+ *
+ * Presentational. The server reads the feed before it creates anything, so a
+ * refusal here means nothing was added, and the banner says so in those words.
+ */
+import {
+	Banner,
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardTitle,
+	Input,
+} from "@remit/ui";
+import { CalendarPlus } from "lucide-react";
+import { type FormEvent, useId, useState } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+
+export interface CalendarSubscribeCardProps {
+	isBusy: boolean;
+	/** The subscribe the server turned down. */
+	error: unknown;
+	onSubscribe: (
+		request: { displayName: string; url: string },
+		onDone: () => void,
+	) => void;
+}
+
+export const SUBSCRIBE_TITLE = "Subscribe to a calendar";
+
+export function CalendarSubscribeCard({
+	isBusy,
+	error,
+	onSubscribe,
+}: CalendarSubscribeCardProps) {
+	const titleId = useId();
+	const nameId = useId();
+	const urlId = useId();
+	const [displayName, setDisplayName] = useState("");
+	const [url, setUrl] = useState("");
+	const ready = displayName.trim() !== "" && url.trim() !== "";
+
+	const submit = (event: FormEvent) => {
+		event.preventDefault();
+		if (!ready) return;
+		onSubscribe({ displayName, url }, () => {
+			setDisplayName("");
+			setUrl("");
+		});
+	};
+
+	return (
+		<Card className="max-w-xl" role="region" aria-labelledby={titleId}>
+			<CardHeader>
+				<CardTitle id={titleId}>{SUBSCRIBE_TITLE}</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<form className="space-y-3" onSubmit={submit}>
+					<p className="text-sm text-fg-muted">
+						Paste the secret iCal address from Google Calendar, a published
+						Outlook calendar or any other feed. It shows here read-only and
+						refreshes on its own.
+					</p>
+					<div className="space-y-1">
+						<label htmlFor={nameId} className="text-sm font-medium text-fg">
+							Calendar name
+						</label>
+						<Input
+							id={nameId}
+							value={displayName}
+							onChange={(event) => setDisplayName(event.target.value)}
+							placeholder="Team rota"
+							autoComplete="off"
+						/>
+					</div>
+					<div className="space-y-1">
+						<label htmlFor={urlId} className="text-sm font-medium text-fg">
+							Calendar address
+						</label>
+						<Input
+							id={urlId}
+							value={url}
+							onChange={(event) => setUrl(event.target.value)}
+							placeholder="https://calendar.google.com/calendar/ical/…/basic.ics"
+							autoComplete="off"
+							spellCheck={false}
+							inputMode="url"
+						/>
+						<p className="text-xs text-fg-muted">
+							For Google Calendar the address is the password to the calendar.
+							Reader never shows it in full again.
+						</p>
+					</div>
+					<Button
+						type="submit"
+						variant="primary"
+						size="sm"
+						disabled={!ready || isBusy}
+						icon={<CalendarPlus className="size-3.5" />}
+					>
+						{isBusy ? "Subscribing…" : "Subscribe"}
+					</Button>
+					{error !== undefined && error !== null && (
+						<Banner tone="danger" variant="soft">
+							<p className="font-medium">The calendar was not added.</p>
+							<p className="mt-0.5 break-words">{formatErrorMessage(error)}</p>
+						</Banner>
+					)}
+				</form>
+			</CardBody>
+		</Card>
+	);
+}

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

@@ -0,0 +1,77 @@
+import { Card, CardBody } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { CalendarSubscriptionStatus } from "./CalendarSubscriptionStatus";
+
+/**
+ * Settings › Calendars: a calendar subscribed to a feed (#1261). The address is
+ * never drawn in full, since for Google it is the whole credential; its host
+ * is enough to recognise it.
+ */
+const meta: Meta<typeof CalendarSubscriptionStatus> = {
+	title: "Playground/Shipped/Settings/Calendars/Subscribed calendar",
+	component: CalendarSubscriptionStatus,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<Card className="max-w-xl">
+				<CardBody>
+					<Story />
+				</CardBody>
+			</Card>
+		),
+	],
+	args: {
+		calendarName: "Harbour rota",
+		subscriptionUrl:
+			"https://calendar.google.com/calendar/ical/harbour%40example.com/private-5f1c0ffee/basic.ics",
+		enabled: true,
+		fetchedAt: Date.parse("2026-09-25T08:15:00Z"),
+		error: "",
+		isBusy: false,
+		actionError: undefined,
+		onSetEnabled: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarSubscriptionStatus>;
+
+/** Refreshing on schedule. Only the host is named. */
+export const Live: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByText(/Read-only, from calendar\.google\.com/),
+		).toBeVisible();
+		await expect(canvasElement.textContent).not.toContain("private-5f1c0ffee");
+	},
+};
+
+/** The last refresh failed. The events already stored stay. */
+export const Failing: Story = {
+	args: { error: "the feed answered HTTP 404" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("alert")).toHaveTextContent(
+			"the feed answered HTTP 404",
+		);
+	},
+};
+
+/** Updates paused. Nothing was removed. */
+export const Paused: Story = {
+	args: { enabled: false },
+};
+
+/** Paused, on the dark theme. */
+export const PausedDark: Story = {
+	name: "Paused (dark)",
+	parameters: { theme: "dark" },
+	args: { enabled: false, error: "the feed answered HTTP 410" },
+};
+
+/** Never fetched successfully yet. */
+export const NeverFetched: Story = {
+	args: { fetchedAt: 0 },
+};

package/src/components/settings/CalendarSubscriptionStatus.tsx

@@ -0,0 +1,88 @@
+/**
+ * Settings › Calendars: where a subscribed calendar comes from, when it was
+ * last read, why it was not, and the switch that stops its refresh
+ * (issue #1261).
+ *
+ * The address itself is not drawn. For a Google feed it is the whole
+ * credential, so only its host is named.
+ */
+import { Badge, Banner, Button } from "@remit/ui";
+import { Pause, Play } from "lucide-react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { subscriptionHostOf } from "@/lib/calendar-subscription";
+import { formatDatePreset } from "@/lib/format";
+
+export interface CalendarSubscriptionStatusProps {
+	calendarName: string;
+	subscriptionUrl: string;
+	enabled: boolean;
+	fetchedAt: number;
+	error: string;
+	isBusy: boolean;
+	/** A pause or resume the server turned down. */
+	actionError: unknown;
+	onSetEnabled: (enabled: boolean) => void;
+}
+
+export function CalendarSubscriptionStatus({
+	calendarName,
+	subscriptionUrl,
+	enabled,
+	fetchedAt,
+	error,
+	isBusy,
+	actionError,
+	onSetEnabled,
+}: CalendarSubscriptionStatusProps) {
+	return (
+		<div className="mb-4 space-y-2">
+			<div className="flex flex-wrap items-center gap-2">
+				<Badge tone={enabled ? "positive" : "neutral"}>
+					{enabled ? "subscribed" : "paused"}
+				</Badge>
+				<span className="text-xs text-fg-muted">
+					Read-only, from {subscriptionHostOf(subscriptionUrl)}
+					{fetchedAt > 0
+						? `. Last updated ${formatDatePreset(fetchedAt, "medium")}`
+						: ""}
+				</span>
+			</div>
+			{error !== "" && (
+				<Banner tone="warning" variant="soft">
+					<p className="font-medium">{calendarName} was not refreshed.</p>
+					<p className="mt-0.5 break-words">{error}</p>
+				</Banner>
+			)}
+			<p className="text-sm text-fg-muted">
+				{enabled
+					? "Events are read from the feed on a schedule and cannot be edited here."
+					: "Updates are paused. The events already here stay until you resume or remove the calendar."}
+			</p>
+			<Button
+				variant="secondary"
+				size="sm"
+				disabled={isBusy}
+				icon={
+					enabled ? (
+						<Pause className="size-3.5" />
+					) : (
+						<Play className="size-3.5" />
+					)
+				}
+				onClick={() => onSetEnabled(!enabled)}
+			>
+				{enabled ? "Pause updates" : "Resume updates"}
+			</Button>
+			{actionError !== undefined && actionError !== null && (
+				<Banner tone="danger" variant="soft">
+					<p className="font-medium">
+						Updates for {calendarName} were not changed.
+					</p>
+					<p className="mt-0.5 break-words">
+						{formatErrorMessage(actionError)}
+					</p>
+				</Banner>
+			)}
+		</div>
+	);
+}

package/src/hooks/calendar/instance.ts

@@ -163,6 +163,13 @@ export function toCalendarDescriptor(
 		accountLabel: "",
 		name: calendar.displayName,
 		color: COLORS[calendar.color] ?? "cal-1",
+		...(calendar.source === "Subscribed"
+			? {
+					readOnly: true,
+					sync: calendar.subscriptionEnabled ? "live" : "paused",
+					syncError: calendar.subscriptionError,
+				}
+			: {}),
 	};
 }
 

package/src/hooks/calendar/useCalendarSubscriptions.ts

@@ -0,0 +1,103 @@
+/**
+ * Subscribing a new calendar to a read-only iCalendar URL, and turning an
+ * existing subscription's refresh off and on (issue #1261).
+ *
+ * The server fetches the feed before it creates anything, so a refused
+ * subscribe leaves no calendar behind and its reason is what the form states.
+ * A 401 is not among the statuses owned here: a lapsed session escalates the
+ * way it does everywhere else.
+ */
+import {
+	calendarDetailOperationsUpdateCalendarMutation,
+	calendarOperationsCreateCalendarMutation,
+	calendarOperationsListCalendarsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { softErrorStatuses } from "@/lib/error-classifier";
+import { useInvalidateCalendarReads } from "./useCalendarWrites";
+
+const SUBSCRIPTION_WRITE_META = softErrorStatuses(400, 404);
+
+export interface CalendarSubscribeRequest {
+	displayName: string;
+	url: string;
+}
+
+export interface CalendarSubscriptionControls {
+	subscribe: (request: CalendarSubscribeRequest, onDone: () => void) => void;
+	isSubscribing: boolean;
+	subscribeError: unknown;
+	setEnabled: (calendarId: string, enabled: boolean) => void;
+	togglingCalendarId: string;
+	/** The last pause or resume the server turned down, and whose it was. */
+	toggleFailure: { calendarId: string; error: unknown };
+}
+
+const urlSegmentFor = (): string =>
+	`subscribed-${crypto.randomUUID().slice(0, 8)}`;
+
+export function useCalendarSubscriptions(): CalendarSubscriptionControls {
+	const queryClient = useQueryClient();
+	const invalidateReads = useInvalidateCalendarReads();
+	const invalidate = () => {
+		void queryClient.invalidateQueries({
+			queryKey: calendarOperationsListCalendarsQueryKey(),
+		});
+		invalidateReads();
+	};
+
+	const create = useMutation({
+		...calendarOperationsCreateCalendarMutation(),
+		meta: SUBSCRIPTION_WRITE_META,
+		onSuccess: invalidate,
+	});
+
+	const toggle = useMutation({
+		...calendarDetailOperationsUpdateCalendarMutation(),
+		meta: SUBSCRIPTION_WRITE_META,
+		onSuccess: invalidate,
+	});
+
+	const { mutate: createCalendar } = create;
+	const subscribe = useCallback(
+		(request: CalendarSubscribeRequest, onDone: () => void) => {
+			createCalendar(
+				{
+					body: {
+						urlSegment: urlSegmentFor(),
+						displayName: request.displayName.trim(),
+						subscriptionUrl: request.url.trim(),
+					},
+				},
+				{ onSuccess: onDone },
+			);
+		},
+		[createCalendar],
+	);
+
+	const { mutate: updateCalendar } = toggle;
+	const setEnabled = useCallback(
+		(calendarId: string, enabled: boolean) => {
+			updateCalendar({
+				path: { calendarId },
+				body: { subscriptionEnabled: enabled },
+			});
+		},
+		[updateCalendar],
+	);
+
+	return {
+		subscribe,
+		isSubscribing: create.isPending,
+		subscribeError: create.error,
+		setEnabled,
+		togglingCalendarId: toggle.isPending
+			? (toggle.variables?.path.calendarId ?? "")
+			: "",
+		toggleFailure: {
+			calendarId: toggle.variables?.path.calendarId ?? "",
+			error: toggle.error,
+		},
+	};
+}

package/src/hooks/calendar/useCalendars.ts

@@ -8,6 +8,7 @@
  * indistinguishable from a week with nothing in it.
  */
 import { calendarOperationsListCalendarsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapCalendarResponse } from "@remit/api-http-client/types.gen.ts";
 import type { CalendarColorId, CalendarDescriptor } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -15,6 +16,8 @@ import { toCalendarDescriptor } from "./instance";
 
 export interface CalendarsResult {
 	calendars: CalendarDescriptor[];
+	/** The collections as the API returned them, for a surface that manages them. */
+	collections: RemitImapCalendarResponse[];
 	colorByCalendarId: Record<string, CalendarColorId>;
 	/** The zone each collection's floating times are read in. */
 	timeZoneByCalendarId: Record<string, string>;
@@ -39,6 +42,7 @@ export function useCalendars(): CalendarsResult {
 		const calendars = items.map(toCalendarDescriptor);
 		return {
 			calendars,
+			collections: items,
 			colorByCalendarId: Object.fromEntries(
 				calendars.map((calendar) => [calendar.id, calendar.color]),
 			),

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

@@ -57,6 +57,11 @@ const calendars = [
 		source: "Default",
 		timezone: "Europe/Amsterdam",
 		syncSequence: 1,
+		subscriptionUrl: "",
+		subscriptionEnabled: false,
+		subscriptionCheckedAt: 0,
+		subscriptionFetchedAt: 0,
+		subscriptionError: "",
 		createdAt: 0,
 		updatedAt: 0,
 	},

package/src/lib/calendar-subscription.ts

@@ -0,0 +1,11 @@
+/**
+ * Where a subscribed calendar's events come from, named by host alone. For a
+ * Google feed the full address is the credential, so no surface draws it.
+ */
+export const subscriptionHostOf = (subscriptionUrl: string): string =>
+	URL.canParse(subscriptionUrl)
+		? new URL(subscriptionUrl).host
+		: "an iCalendar feed";
+
+export const subscriptionReadOnlyNote = (subscriptionUrl: string): string =>
+	`Read-only: from ${subscriptionHostOf(subscriptionUrl)}. Change it where the feed comes from.`;

package/src/mocks/story-frame/calendar-window.ts

@@ -0,0 +1,21 @@
+import type { RemitImapCalendarEventInstance } from "@remit/api-http-client/types.gen.ts";
+
+/**
+ * The occurrences inside the window a request asked for.
+ *
+ * The panes read a week at a time and hold several weeks at once, so a server
+ * that answered every window with the same list would draw each day's events
+ * once per window it appears in.
+ */
+export const instancesWithin = (
+	url: URL,
+	instances: readonly RemitImapCalendarEventInstance[],
+): RemitImapCalendarEventInstance[] => {
+	const from = Date.parse(url.searchParams.get("from") ?? "");
+	const to = Date.parse(url.searchParams.get("to") ?? "");
+	if (Number.isNaN(from) || Number.isNaN(to)) return [...instances];
+	return instances.filter((instance) => {
+		const start = Date.parse(instance.start);
+		return start >= from && start < to;
+	});
+};

package/src/mocks/story-frame/mail-handlers.ts

@@ -2,6 +2,7 @@ import type {
 	AccountDetailOperationsUpdateAccountResponse,
 	AddressDetailOperationsUpdateAddressResponse,
 	AddressOperationsSearchAddressesResponse,
+	CalendarEventDetailOperationsGetCalendarEventResponse,
 	CalendarEventOperationsListCalendarEventsResponse,
 	CalendarOperationsListCalendarsResponse,
 	CalendarSuggestionOperationsListCalendarSuggestionsResponse,
@@ -35,6 +36,7 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import { type HttpHandler, HttpResponse, http } from "msw";
 import { makeConfig } from "@/test-support/fixtures";
+import { instancesWithin } from "./calendar-window";
 import type { MailWorld } from "./mail-world";
 
 const API = "/api";
@@ -487,13 +489,29 @@ export const mailHandlers = (
 			return new HttpResponse(null, { status: 204 });
 		}),
 		http.get(`${API}/calendars`, () =>
-			HttpResponse.json<CalendarOperationsListCalendarsResponse>({ items: [] }),
+			HttpResponse.json<CalendarOperationsListCalendarsResponse>({
+				items: world.calendars,
+			}),
 		),
-		http.get(`${API}/calendar-events`, () =>
+		http.get(`${API}/calendar-events`, ({ request }) =>
 			HttpResponse.json<CalendarEventOperationsListCalendarEventsResponse>({
-				items: [],
+				items: instancesWithin(new URL(request.url), world.calendarEvents),
 			}),
 		),
+		http.get(`${API}/calendar-events/:calendarObjectId`, ({ params }) => {
+			const resource = world.calendarResources.find(
+				(candidate) =>
+					candidate.calendarObjectId === String(params.calendarObjectId),
+			);
+			if (!resource)
+				return HttpResponse.json(
+					{ status: 404, message: "Calendar event not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<CalendarEventDetailOperationsGetCalendarEventResponse>(
+				resource,
+			);
+		}),
 		http.get(`${API}/calendar-suggestions`, () =>
 			HttpResponse.json<CalendarSuggestionOperationsListCalendarSuggestionsResponse>(
 				{ items: [] },

package/src/mocks/story-frame/mail-world.ts

@@ -1,6 +1,9 @@
 import type {
 	RemitImapAccountResponse,
 	RemitImapAddressResponse,
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarEventResponse,
+	RemitImapCalendarResponse,
 	RemitImapCanonicalMailboxRole,
 	RemitImapMailboxResponse,
 	RemitImapMessageCategory,
@@ -27,6 +30,9 @@ export interface MailWorld {
 	addresses: RemitImapAddressResponse[];
 	systemUpdate: RemitImapSystemUpdateResponse;
 	bodies: Record<string, string>;
+	calendars: RemitImapCalendarResponse[];
+	calendarEvents: RemitImapCalendarEventInstance[];
+	calendarResources: RemitImapCalendarEventResponse[];
 }
 
 export const MINUTE = 60_000;
@@ -429,5 +435,8 @@ export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 		run: null,
 	},
 	bodies: {},
+	calendars: [],
+	calendarEvents: [],
+	calendarResources: [],
 	...overrides,
 });

package/src/routes/settings/calendars.tsx

@@ -3,7 +3,10 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { CalendarCreateCard } from "@/components/settings/CalendarCreateCard";
 import { CalendarSettingsPanel } from "@/components/settings/CalendarSettingsPanel";
+import { CalendarSubscribeCard } from "@/components/settings/CalendarSubscribeCard";
+import { CalendarSubscriptionStatus } from "@/components/settings/CalendarSubscriptionStatus";
 import { useCalendarCollectionWrites } from "@/hooks/calendar/useCalendarCollectionWrites";
+import { useCalendarSubscriptions } from "@/hooks/calendar/useCalendarSubscriptions";
 import { useCalendars } from "@/hooks/calendar/useCalendars";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
@@ -34,13 +37,19 @@ const calendarsHelp = (
 			looked up later. Replacing it breaks every subscription built on the old
 			one, which is how a shared address is taken back.
 		</p>
+		<p>
+			Subscribing works the other way round: paste another calendar's iCal
+			address and its events show here, read-only, refreshed on a schedule.
+		</p>
 	</div>
 );
 
 function CalendarsSettings() {
 	const navigate = useNavigate();
 	const [helpOpen, setHelpOpen] = useState(true);
-	const { calendars, timeZoneByCalendarId, isLoading } = useCalendars();
+	const { calendars, collections, timeZoneByCalendarId, isLoading } =
+		useCalendars();
+	const subscriptions = useCalendarSubscriptions();
 	const { createCalendar, isWriting } = useCalendarCollectionWrites();
 	const [createProblem, setCreateProblem] = useState("");
 
@@ -49,7 +58,7 @@ function CalendarsSettings() {
 			items={SETTINGS_NAV_ITEMS}
 			activeId="calendars"
 			title="Calendars"
-			description="Add, rename and delete calendars, and share one with any client that can subscribe to a URL."
+			description="Add, rename and delete calendars, subscribe to a calendar feed, and share one with any client that can subscribe to a URL."
 			help={calendarsHelp}
 			helpOpen={helpOpen}
 			onToggleHelp={() => setHelpOpen((open) => !open)}
@@ -68,14 +77,44 @@ function CalendarsSettings() {
 				/>
 			) : (
 				<div className="space-y-4">
-					{calendars.map((calendar) => (
-						<CalendarSettingsPanel
-							key={calendar.id}
-							calendarId={calendar.id}
-							calendarName={calendar.name}
-							timezone={timeZoneByCalendarId[calendar.id] ?? ""}
-						/>
-					))}
+					{calendars.map((calendar) => {
+						const collection = collections.find(
+							(candidate) => candidate.calendarId === calendar.id,
+						);
+						return (
+							<CalendarSettingsPanel
+								key={calendar.id}
+								calendarId={calendar.id}
+								calendarName={calendar.name}
+								timezone={timeZoneByCalendarId[calendar.id] ?? ""}
+								subscription={
+									collection?.source === "Subscribed" && (
+										<CalendarSubscriptionStatus
+											calendarName={collection.displayName}
+											subscriptionUrl={collection.subscriptionUrl}
+											enabled={collection.subscriptionEnabled}
+											fetchedAt={collection.subscriptionFetchedAt}
+											error={collection.subscriptionError}
+											isBusy={subscriptions.togglingCalendarId === calendar.id}
+											actionError={
+												subscriptions.toggleFailure.calendarId === calendar.id
+													? subscriptions.toggleFailure.error
+													: undefined
+											}
+											onSetEnabled={(enabled) =>
+												subscriptions.setEnabled(calendar.id, enabled)
+											}
+										/>
+									)
+								}
+							/>
+						);
+					})}
+					<CalendarSubscribeCard
+						isBusy={subscriptions.isSubscribing}
+						error={subscriptions.subscribeError}
+						onSubscribe={subscriptions.subscribe}
+					/>
 					<CalendarCreateCard
 						isBusy={isWriting}
 						problem={createProblem}