@remit/web-client 0.0.288 → 0.0.290

package/package.json

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

@@ -1,47 +1,6 @@
-import { Avatar } from "@remit/ui";
-import { LogOut } from "lucide-react";
-import {
-	DropdownMenu,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-} from "@/components/ui/DropdownMenu";
+import { AccountMenu as AccountMenuView } from "@remit/ui";
 import { AccountSession } from "./AccountSession";
 
-interface AccountMenuViewProps {
-	email: string | null;
-	onSignOut: () => void;
-}
-
-const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
-	const displayName = email ?? "Account";
-
-	return (
-		<DropdownMenu
-			trigger={
-				<Avatar name={displayName} email={email ?? undefined} size="sm" />
-			}
-			align="right"
-		>
-			{email && (
-				<>
-					<div
-						className="px-3 py-2 text-xs text-fg-muted truncate"
-						title={email}
-						data-testid="account-menu-email"
-					>
-						{email}
-					</div>
-					<DropdownMenuSeparator />
-				</>
-			)}
-			<DropdownMenuItem onClick={onSignOut}>
-				<LogOut className="size-4" />
-				Sign out
-			</DropdownMenuItem>
-		</DropdownMenu>
-	);
-};
-
 export const AccountMenu = () => (
 	<AccountSession>
 		{({ email, signOut }) => (

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

@@ -111,11 +111,13 @@ function Workspace({
 	events,
 	isLoading,
 	error,
+	touch,
 }: {
 	initialView: CalendarViewId;
 	events: CalendarEventData[];
 	isLoading?: boolean;
 	error?: unknown;
+	touch?: boolean;
 }) {
 	const [view, setView] = useState<CalendarViewId>(initialView);
 	const [density, setDensity] = useState<Density>("comfortable");
@@ -146,6 +148,7 @@ function Workspace({
 			onChangeDensity={setDensity}
 			onSelectEvent={setSelected}
 			onPickSlot={() => undefined}
+			touch={touch}
 		/>
 	);
 }
@@ -169,6 +172,12 @@ export const Week: Story = {};
 
 export const Day: Story = { args: { initialView: "day" } };
 
+/** A phone: two rows of thumb-sized controls, and no year on the ladder. */
+export const Phone: Story = {
+	args: { touch: true },
+	globals: { viewport: { value: "mobile" } },
+};
+
 /** Nothing scheduled is still a grid, never a "nothing here" surface. */
 export const EmptyWeek: Story = { args: { events: [] } };
 

package/src/components/calendar/CalendarWorkspace.tsx

@@ -7,10 +7,11 @@ import {
 	type CalendarViewId,
 	CalendarViewSwitch,
 	type Density,
-	segmentClassName,
+	Segmented,
+	type SegmentOption,
 } from "@remit/ui";
 import { Loader2 } from "lucide-react";
-import { type ReactNode, useId, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
 import { ErrorState } from "@/components/ui/ErrorState";
@@ -30,9 +31,11 @@ import {
  * rather than of this component's state.
  */
 
-const DENSITY_OPTIONS: { value: Density; label: string }[] = [
-	{ value: "comfortable", label: "Detail" },
-	{ value: "compact", label: "Glance" },
+const PHONE_VIEWS: CalendarViewId[] = ["month", "week", "day", "agenda"];
+
+const DENSITY_OPTIONS: SegmentOption<Density>[] = [
+	{ value: "comfortable", label: "Detail", shortLabel: "Detail" },
+	{ value: "compact", label: "Glance", shortLabel: "Glance" },
 ];
 
 export interface CalendarWorkspaceProps {
@@ -68,11 +71,16 @@ export interface CalendarWorkspaceProps {
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
 	onStep: (direction: -1 | 1) => void;
+	/**
+	 * A phone: the toolbar splits into two rows of thumb-sized controls, because
+	 * one row of them is wider than the screen and pushes the grid off it.
+	 */
+	touch?: boolean;
 }
 
 /**
  * The range the toolbar names before the grid has measured one, and the whole
- * answer at a zoom that draws no grid.
+ * answer for a week and at a zoom that draws no grid.
  */
 function fallbackRangeTitle(view: CalendarViewId, date: string): string {
 	const instant = new Date(`${date}T00:00:00`);
@@ -80,6 +88,17 @@ function fallbackRangeTitle(view: CalendarViewId, date: string): string {
 		return new Intl.DateTimeFormat(undefined, { year: "numeric" }).format(
 			instant,
 		);
+	if (view === "week") {
+		const monday = new Date(instant);
+		monday.setDate(instant.getDate() - ((instant.getDay() + 6) % 7));
+		const sunday = new Date(monday);
+		sunday.setDate(monday.getDate() + 6);
+		return new Intl.DateTimeFormat(undefined, {
+			day: "numeric",
+			month: "short",
+			year: "numeric",
+		}).formatRange(monday, sunday);
+	}
 	if (view === "day")
 		return new Intl.DateTimeFormat(undefined, {
 			weekday: "short",
@@ -112,53 +131,67 @@ export function CalendarWorkspace({
 	onSelectEvent,
 	onPickSlot,
 	onStep,
+	touch = false,
 }: CalendarWorkspaceProps) {
-	const densityGroup = useId();
-	// The grid computes the range it drew, which is the only honest title for a
-	// week — it knows where the week starts. Held against the address it was
-	// measured for, so leaving a view does not carry its title into the next one.
+	// Held against the address it was measured for, so leaving a view does not
+	// carry its title into the next one.
 	const [measured, setMeasured] = useState({ key: "", title: "" });
 	const addressKey = `${view}/${date}`;
 	const title =
-		measured.key === addressKey
+		view !== "week" && measured.key === addressKey
 			? measured.title
 			: fallbackRangeTitle(view, date);
 
+	const dateNav = (
+		<CalendarDateNav
+			title={title}
+			onPrev={() => onStep(-1)}
+			onNext={() => onStep(1)}
+			onToday={onToday}
+			touch={touch}
+		/>
+	);
+	const densitySwitch = (
+		<Segmented
+			ariaLabel="Calendar density"
+			options={DENSITY_OPTIONS}
+			value={density}
+			onChange={onChangeDensity}
+			touch={touch}
+			className="shrink-0"
+		/>
+	);
+
 	return (
 		<div className="flex h-full min-h-0 flex-col bg-surface">
-			<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
-				{/* Below the nav pane the sidebar is a slide-over with nothing to open
-				    it: the calendar is a whole surface of its own, so without this
-				    the reader has no way back to their mail. */}
-				<NavMenuButton />
-				<CalendarDateNav
-					title={title}
-					onPrev={() => onStep(-1)}
-					onNext={() => onStep(1)}
-					onToday={onToday}
-				>
-					<fieldset className="inline-flex items-center gap-0.5">
-						<legend className="sr-only">Calendar density</legend>
-						{DENSITY_OPTIONS.map((option) => (
-							<label
-								key={option.value}
-								className={`${segmentClassName(density === option.value)} h-7 text-xs`}
-							>
-								<input
-									type="radio"
-									name={densityGroup}
-									value={option.value}
-									checked={density === option.value}
-									onChange={() => onChangeDensity(option.value)}
-									className="sr-only"
-								/>
-								{option.label}
-							</label>
-						))}
-					</fieldset>
+			{touch ? (
+				<div className="flex shrink-0 flex-col gap-1 border-b border-line px-2 pb-1">
+					<div className="flex min-w-0 items-center gap-1">
+						<NavMenuButton />
+						<div className="min-w-0 flex-1">{dateNav}</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<CalendarViewSwitch
+							value={view}
+							onChange={onChangeView}
+							views={PHONE_VIEWS}
+							touch
+							className="flex-1"
+						/>
+						{densitySwitch}
+					</div>
+				</div>
+			) : (
+				<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
+					{/* Below the nav pane the sidebar is a slide-over with nothing to open
+					    it: the calendar is a whole surface of its own, so without this
+					    the reader has no way back to their mail. */}
+					<NavMenuButton />
+					<div className="min-w-0 flex-1">{dateNav}</div>
+					{densitySwitch}
 					<CalendarViewSwitch value={view} onChange={onChangeView} />
-				</CalendarDateNav>
-			</div>
+				</div>
+			)}
 
 			{/* The strip rolls its own range, so it answers for its own days: the
 			    week this pane read is not what it is drawing, and gating it on that

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -156,6 +156,30 @@ describe("the toolbar", () => {
 		assert.ok(render("year").includes("2026"));
 	});
 
+	it("names a week that runs over a year end by both of its years", () => {
+		const html = renderQuietly(
+			createElement(CalendarWorkspace, {
+				...workspaceProps("week", []),
+				date: "2025-12-31",
+			}),
+		);
+		const title = /<h2[^>]*>([^<]*)<\/h2>/.exec(html)?.[1] ?? "";
+		assert.match(title, /2025/, `"${title}" lost the year the week starts in`);
+		assert.match(title, /2026/, `"${title}" lost the year the week ends in`);
+	});
+
+	it("leaves the year off the ladder on a phone", () => {
+		const html = renderQuietly(
+			createElement(CalendarWorkspace, {
+				...workspaceProps("week"),
+				touch: true,
+			}),
+		);
+		assert.equal(html.includes(">Year<"), false);
+		assert.equal(html.includes(">Y<"), false);
+		assert.ok(html.includes(">W<"), "the phone ladder did not render");
+	});
+
 	it("carries the density control, which the address never names", () => {
 		const html = render("week");
 		assert.ok(html.includes("Calendar density"));

package/src/components/ui/AppVersion.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AppVersion } from "./AppVersion";
+
+const meta: Meta<typeof AppVersion> = {
+	title: "Playground/Shipped/Settings/Advanced/AppVersion",
+	component: AppVersion,
+	parameters: { layout: "padded" },
+	args: {
+		sha: "a1b2c3d",
+		commitUrl: "https://github.com/remit-mail/reader/commit/a1b2c3d4e5f6",
+		buildTime: "2024-06-12T10:30:00.000Z",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof AppVersion>;
+
+export const Default: Story = {};
+
+export const DevBuild: Story = {
+	args: { sha: "dev", commitUrl: undefined },
+};
+
+export const InAboutSection: Story = {
+	render: (args) => (
+		<div className="mt-4 max-w-sm border-t border-line pt-4">
+			<p className="mb-1 text-sm font-medium text-fg">About</p>
+			<AppVersion {...args} />
+		</div>
+	),
+};

package/src/components/ui/BugReportButton.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BugReportButton } from "./BugReportButton";
+
+const meta: Meta<typeof BugReportButton> = {
+	title: "Playground/Shipped/Mail/Nav/BugReportButton",
+	component: BugReportButton,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof BugReportButton>;
+
+export const Default: Story = {
+	render: () => (
+		<div className="w-64">
+			<BugReportButton />
+		</div>
+	),
+};

package/src/components/ui/FatalErrorOverlay.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import type { FatalError } from "@/lib/fatal-error";
+import { FatalErrorScreen } from "./FatalErrorOverlay";
+
+const meta: Meta<typeof FatalErrorScreen> = {
+	title: "Playground/Shipped/App/FatalErrorOverlay",
+	component: FatalErrorScreen,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof FatalErrorScreen>;
+
+const fatal = (overrides: Partial<FatalError>): FatalError => ({
+	error: new Error(overrides.message),
+	message: "",
+	correlationId: "a1b2c3d4-5678-90ab-cdef-1234567890ab",
+	at: Date.UTC(2024, 5, 12, 10, 30),
+	recoverable: true,
+	...overrides,
+});
+
+export const RecoverableTransient: Story = {
+	args: {
+		fatal: fatal({
+			message: "Request failed with status 500",
+			recoverable: true,
+		}),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("button", { name: "Retry" })).toBeVisible();
+		await expect(
+			canvas.queryByRole("link", { name: "Go to inbox" }),
+		).toBeNull();
+	},
+};
+
+export const DeterministicFatal: Story = {
+	args: {
+		fatal: fatal({
+			message: "date value is not finite in DateTimeFormat format()",
+			correlationId: "def45678-90ab-cdef-1234-567890abcdef",
+			recoverable: false,
+		}),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByRole("link", { name: "Go to inbox" }),
+		).toBeVisible();
+		await expect(canvas.queryByRole("button", { name: "Retry" })).toBeNull();
+	},
+};

package/src/routes/calendar/$view.$date.tsx

@@ -14,7 +14,12 @@
  * week instead of on an error.
  */
 import type { CalendarSlotPick } from "@remit/ui";
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Navigate,
+	Outlet,
+	redirect,
+} from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { AgendaView } from "@/components/calendar/AgendaView";
 import { CalendarComposeSeedProvider } from "@/components/calendar/CalendarComposeSeed";
@@ -22,6 +27,7 @@ import { CalendarShell } from "@/components/calendar/CalendarShell";
 import { CalendarWorkspace } from "@/components/calendar/CalendarWorkspace";
 import { calendarInstanceId, deviceTimeZone } from "@/hooks/calendar";
 import { useCalendarData } from "@/hooks/useCalendarData";
+import { useLayoutTier } from "@/hooks/useLayoutTier";
 import {
 	readCalendarDensity,
 	writeCalendarDensity,
@@ -56,6 +62,21 @@ export const Route = createFileRoute("/calendar/$view/$date")({
 });
 
 function CalendarViewLayout() {
+	const { view, date } = useCalendarAddress();
+	const isPhone = useLayoutTier() === "phone";
+	if (isPhone && view === "year")
+		return (
+			<Navigate
+				to="/calendar/$view/$date"
+				params={{ view: "month", date }}
+				search={true}
+				replace
+			/>
+		);
+	return <CalendarView isPhone={isPhone} />;
+}
+
+function CalendarView({ isPhone }: { isPhone: boolean }) {
 	const { view, date, calendarIds } = useCalendarAddress();
 	// The strip fetches the days it holds a week at a time and draws none of
 	// this, so at that zoom the layout asks for nothing: the address rewrites on
@@ -121,6 +142,7 @@ function CalendarViewLayout() {
 			onChangeDensity={changeDensity}
 			onSelectEvent={selectEvent}
 			onPickSlot={pickSlot}
+			touch={isPhone}
 		/>
 	);