@remit/web-client 0.0.302 → 0.0.304

package/package.json

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

@@ -104,6 +104,57 @@ export const NotOnThisWeek: Story = {
 	args: { event: undefined, calendar: undefined },
 };
 
+/** Looking for the day an event the view does not hold falls on. */
+export const Finding: Story = {
+	args: { event: undefined, calendar: undefined, absence: { kind: "Finding" } },
+};
+
+/** The address names a resource none of the reader's calendars holds. */
+export const Deleted: Story = {
+	args: { event: undefined, calendar: undefined, absence: { kind: "Deleted" } },
+};
+
+/** A series that falls on no day in its first year or the coming one. */
+export const NoOccurrenceFound: Story = {
+	args: {
+		event: undefined,
+		calendar: undefined,
+		absence: { kind: "NoOccurrenceFound" },
+	},
+};
+
+/** The session ended during the look-up; the way back in is on the pane. */
+export const SignedOut: Story = {
+	args: {
+		event: undefined,
+		calendar: undefined,
+		absence: {
+			kind: "SignedOut",
+			signIn: (
+				<button
+					type="button"
+					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg"
+				>
+					Sign in again
+				</button>
+			),
+		},
+	},
+};
+
+/** The look-up failed, with the server's reason and a way to report it. */
+export const LookupFailed: Story = {
+	args: {
+		event: undefined,
+		calendar: undefined,
+		absence: {
+			kind: "Failed",
+			reason: "Internal server error (HTTP 500)",
+			reportHref: "https://github.com/remit-mail/reader/issues/new",
+		},
+	},
+};
+
 /**
  * The event was replaced somewhere else — over CalDAV, or in another tab —
  * between it being read and the write going out. Nothing was overwritten, and

package/src/components/calendar/CalendarEventPane.tsx

@@ -1,8 +1,61 @@
 import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
 import { EventDetail } from "@remit/ui";
 import { AlertCircle, CalendarDays } from "lucide-react";
+import type { ReactNode } from "react";
 import { formatEventWhen } from "@/lib/calendar-format";
 
+export type CalendarEventAbsence =
+	| { kind: "NotInView" }
+	| { kind: "Finding" }
+	| { kind: "Deleted" }
+	| { kind: "NoOccurrenceFound" }
+	| { kind: "SignedOut"; signIn: ReactNode }
+	| { kind: "Failed"; reason: string; reportHref: string };
+
+const NOT_IN_VIEW: CalendarEventAbsence = { kind: "NotInView" };
+
+const LINK =
+	"rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring";
+
+function absenceText(absence: CalendarEventAbsence): {
+	title: string;
+	detail: string;
+} {
+	switch (absence.kind) {
+		case "Finding":
+			return {
+				title: "Finding the event",
+				detail: "Looking for the day it falls on.",
+			};
+		case "Deleted":
+			return {
+				title: "This event was deleted",
+				detail: "None of your calendars holds it any more.",
+			};
+		case "NoOccurrenceFound":
+			return {
+				title: "No occurrence in its first year or the coming year",
+				detail:
+					"Its repeat rule, or the days taken out of it, leave it no day in either.",
+			};
+		case "SignedOut":
+			return {
+				title: "Your session has ended",
+				detail: "Sign in again to open this event.",
+			};
+		case "Failed":
+			return {
+				title: "The event couldn't be looked up",
+				detail: absence.reason,
+			};
+		case "NotInView":
+			return {
+				title: "That event isn't on this week",
+				detail: "The address names an event the calendar doesn't have here.",
+			};
+	}
+}
+
 /**
  * The event the address has open.
  *
@@ -17,6 +70,7 @@ export interface CalendarEventPaneProps {
 	calendar: CalendarDescriptor | undefined;
 	/** Whether the address names one occurrence rather than the series. */
 	isOccurrence: boolean;
+	absence?: CalendarEventAbsence;
 	/**
 	 * A write that did not happen, stated where the reader is looking. Empty
 	 * when the last one did.
@@ -31,28 +85,39 @@ export function CalendarEventPane({
 	event,
 	calendar,
 	isOccurrence,
+	absence = NOT_IN_VIEW,
 	problem = "",
 	onEdit,
 	onDelete,
 	onClose,
 }: CalendarEventPaneProps) {
 	if (!event || !calendar) {
+		const { title, detail } = absenceText(absence);
+		const loud = absence.kind === "Failed" || absence.kind === "SignedOut";
 		return (
-			<div className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center">
+			<div
+				role={loud ? "alert" : undefined}
+				className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center"
+			>
 				<CalendarDays className="size-8 text-fg-subtle" aria-hidden="true" />
-				<p className="text-sm font-medium text-fg">
-					That event isn't on this week
-				</p>
-				<p className="max-w-xs text-sm text-fg-muted">
-					The address names an event the calendar doesn't have here.
-				</p>
-				<button
-					type="button"
-					onClick={onClose}
-					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
-				>
-					Back to the calendar
-				</button>
+				<p className="text-sm font-medium text-fg">{title}</p>
+				<p className="max-w-xs break-words text-sm text-fg-muted">{detail}</p>
+				<div className="flex flex-wrap items-center justify-center gap-2">
+					{absence.kind === "SignedOut" && absence.signIn}
+					{absence.kind === "Failed" && (
+						<a
+							href={absence.reportHref}
+							target="_blank"
+							rel="noreferrer"
+							className={LINK}
+						>
+							Report an issue
+						</a>
+					)}
+					<button type="button" onClick={onClose} className={LINK}>
+						Back to the calendar
+					</button>
+				</div>
 			</div>
 		);
 	}

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
+import { useOpenCalendarEvent } from "@/routing";
 import {
 	calendars,
 	fortnight,
@@ -44,6 +45,17 @@ const answering = (
 	};
 };
 
+/** The pane with its props read off the address, as the app's routes hand them. */
+function FromAddress() {
+	const opened = useOpenCalendarEvent();
+	return (
+		<OpenCalendarEvent
+			calendarObjectId={opened?.calendarObjectId ?? ""}
+			recurrenceId={opened?.recurrenceId}
+		/>
+	);
+}
+
 function Opened({
 	calendarObjectId,
 	recurrenceId,
@@ -59,16 +71,7 @@ function Opened({
 			: `${STORY_WEEK}/${calendarObjectId}/${recurrenceId}`;
 	return (
 		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
-			<CalendarStory
-				entry={address}
-				server={server}
-				pane={
-					<OpenCalendarEvent
-						calendarObjectId={calendarObjectId}
-						recurrenceId={recurrenceId}
-					/>
-				}
-			/>
+			<CalendarStory entry={address} server={server} pane={<FromAddress />} />
 		</div>
 	);
 }
@@ -130,6 +133,121 @@ export const RecurringScopePrompt: Story = {
 	},
 };
 
+/**
+ * A series opened by its plain address lands on an occurrence, so an edit asks
+ * which occurrences it means exactly as it does from one.
+ */
+export const SeriesFromItsPlainAddress: Story = {
+	args: { calendarObjectId: STANDUP_OBJECT },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("One occurrence of a repeating event"),
+		).toBeVisible();
+		await userEvent.click(await canvas.findByRole("button", { name: "Edit" }));
+		await expect(
+			await canvas.findByRole("button", { name: /The whole series/ }),
+		).toBeVisible();
+	},
+};
+
+/** A series that no longer falls on any day says so instead of drawing nothing. */
+export const SeriesWithNoOccurrences: Story = {
+	args: {
+		calendarObjectId: STANDUP_OBJECT,
+		server: answering((request) =>
+			new URL(request.url).pathname.endsWith("/calendar-events")
+				? json({ items: [] })
+				: undefined,
+		),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(
+				"No occurrence in its first year or the coming year",
+			),
+		).toBeVisible();
+	},
+};
+
+/**
+ * A week the standup is not on, and the look-up for it answered by `lookUp`:
+ * the listing for the one resource, and the resource read with no calendar.
+ */
+const lookingUp =
+	(lookUp: (url: URL) => Response): CalendarServer =>
+	(request) => {
+		const url = new URL(request.url);
+		if (url.searchParams.has("calendarObjectId")) return lookUp(url);
+		if (url.pathname.endsWith("/calendar-events"))
+			return json({
+				items: instancesWithin(
+					url,
+					fortnight.filter(
+						(instance) => instance.calendarObjectId !== STANDUP_OBJECT,
+					),
+				),
+			});
+		if (
+			url.pathname.includes(STANDUP_OBJECT) &&
+			!url.searchParams.has("calendarId")
+		)
+			return lookUp(url);
+		return answering()(request);
+	};
+
+/** A resource none of the reader's calendars holds any more. */
+export const SeriesDeleted: Story = {
+	args: {
+		calendarObjectId: STANDUP_OBJECT,
+		server: lookingUp((url) =>
+			url.pathname.endsWith("/calendar-events")
+				? json({ items: [] })
+				: json({ message: "no event on this account" }, 404),
+		),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("This event was deleted"),
+		).toBeVisible();
+	},
+};
+
+/** A failed look-up says why and offers a report, never "not on this week". */
+export const LookupFailed: Story = {
+	args: {
+		calendarObjectId: STANDUP_OBJECT,
+		server: lookingUp(() =>
+			json({ message: "The calendar store is unavailable." }, 500),
+		),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("The event couldn't be looked up"),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("link", { name: "Report an issue" }),
+		).toBeVisible();
+	},
+};
+
+/** A session that ended during the look-up is said as such. */
+export const SignedOutDuringLookup: Story = {
+	args: {
+		calendarObjectId: STANDUP_OBJECT,
+		server: lookingUp(() => json({ message: "Session expired." }, 401)),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Your session has ended"),
+		).toBeVisible();
+	},
+};
+
 /**
  * Somebody replaced the event between it being read and the delete going out —
  * over CalDAV, or in another tab. Nothing was removed, and the pane says so

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -3,10 +3,16 @@ import {
 	type RecurrenceScope,
 	RecurrenceScopePrompt,
 } from "@remit/ui";
+import { Navigate } from "@tanstack/react-router";
 import { useState } from "react";
+import { useAuthProvider } from "@/auth/provider";
 import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
-import { CalendarEventPane } from "@/components/calendar/CalendarEventPane";
 import {
+	type CalendarEventAbsence,
+	CalendarEventPane,
+} from "@/components/calendar/CalendarEventPane";
+import {
+	type CalendarJumpSearch,
 	type CalendarWriteOutcome,
 	calendarInstanceId,
 	deviceTimeZone,
@@ -17,17 +23,21 @@ import {
 	patchFromDrafts,
 	rruleFromIcalData,
 	type ScopedWrite,
+	seriesOccurrenceOf,
 	storedAnchorZone,
 	textFromIcalData,
 	textFromRrule,
 	UNZONED_CALENDAR,
 	useCalendarEvent,
+	useCalendarJump,
 	useCalendars,
 	useCalendarWrites,
 	useDraftClashes,
 } from "@/hooks/calendar";
 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 { useCalendarAddress, useCalendarNavigation } from "@/routing";
 
 /**
@@ -55,12 +65,54 @@ const CONFLICT =
 
 type Intent = "edit" | "delete";
 
+function SignInAgain() {
+	const { Account } = useAuthProvider();
+	return (
+		<Account>
+			{({ signOut }) => (
+				<button
+					type="button"
+					onClick={() => signOut()}
+					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					Sign in again
+				</button>
+			)}
+		</Account>
+	);
+}
+
+const absenceOf = (
+	search: CalendarJumpSearch,
+	loading: boolean,
+): CalendarEventAbsence => {
+	switch (search.kind) {
+		case "Deleted":
+		case "NoOccurrenceFound":
+			return { kind: search.kind };
+		case "SignedOut":
+			return { kind: "SignedOut", signIn: <SignInAgain /> };
+		case "Failed":
+			return {
+				kind: "Failed",
+				reason: search.reason,
+				reportHref: calendarEventReportHref(
+					`opening an event failed: ${search.reason}`,
+				),
+			};
+		case "Searching":
+			return { kind: "Finding" };
+		default:
+			return { kind: loading ? "Finding" : "NotInView" };
+	}
+};
+
 export function OpenCalendarEvent({
 	calendarObjectId,
 	recurrenceId,
 }: OpenCalendarEventProps) {
 	const { view, date, calendarIds } = useCalendarAddress();
-	const { events } = useCalendarData({ view, date, calendarIds });
+	const { events, isLoading } = useCalendarData({ view, date, calendarIds });
 	const { calendars, timeZoneByCalendarId } = useCalendars();
 	const { closeEvent } = useCalendarNavigation();
 	const { updateEvent, deleteEvent, isWriting } = useCalendarWrites();
@@ -69,6 +121,14 @@ export function OpenCalendarEvent({
 		(candidate) =>
 			candidate.id === calendarInstanceId(calendarObjectId, recurrenceId ?? ""),
 	);
+	const seriesOnly = recurrenceId === undefined && event === undefined;
+	const occurrence = seriesOnly
+		? seriesOccurrenceOf(events, calendarObjectId, new Date().toISOString())
+		: undefined;
+	const search = useCalendarJump(
+		calendarObjectId,
+		seriesOnly && !isLoading && occurrence === undefined,
+	);
 	const calendar = calendars.find(
 		(candidate) => candidate.id === event?.calendarId,
 	);
@@ -175,6 +235,59 @@ export function OpenCalendarEvent({
 		);
 	};
 
+	if (occurrence) {
+		return (
+			<Navigate
+				to="/calendar/$view/$date/$calendarObjectId/$recurrenceId"
+				params={{
+					view,
+					date,
+					calendarObjectId,
+					recurrenceId: occurrence.recurrenceId,
+				}}
+				search={true}
+				hash={true}
+				replace
+			/>
+		);
+	}
+
+	const jump = search.kind === "Found" ? search.jump : undefined;
+	const hidden =
+		jump !== undefined &&
+		calendarIds.length > 0 &&
+		!calendarIds.includes(jump.calendarId);
+	if (jump && (jump.date !== date || hidden)) {
+		const shown = hidden
+			? (previous: CalendarSearch) => ({
+					...previous,
+					calendarId: [...calendarIds, jump.calendarId],
+				})
+			: true;
+		return jump.recurrenceId === "" ? (
+			<Navigate
+				to="/calendar/$view/$date/$calendarObjectId"
+				params={{ view, date: jump.date, calendarObjectId }}
+				search={shown}
+				hash={true}
+				replace
+			/>
+		) : (
+			<Navigate
+				to="/calendar/$view/$date/$calendarObjectId/$recurrenceId"
+				params={{
+					view,
+					date: jump.date,
+					calendarObjectId,
+					recurrenceId: jump.recurrenceId,
+				}}
+				search={shown}
+				hash={true}
+				replace
+			/>
+		);
+	}
+
 	if (asking !== undefined && event) {
 		return (
 			<div className="flex h-full flex-col justify-center bg-surface px-row-inset">
@@ -228,6 +341,7 @@ export function OpenCalendarEvent({
 			}
 			calendar={calendar}
 			isOccurrence={recurrenceId !== undefined}
+			absence={absenceOf(search, seriesOnly && isLoading)}
 			problem={problem}
 			onEdit={
 				writable

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

@@ -106,6 +106,7 @@ export const standupResource = {
 	calendarObjectId: STANDUP_OBJECT,
 	resourceName: "standup.ics",
 	icalUid: "uid-standup",
+	dtStart: "2026-06-10T09:15:00+02:00",
 	icalData: [
 		"BEGIN:VCALENDAR",
 		"BEGIN:VEVENT",