@remit/ui 0.0.113 → 0.0.115

package/src/components/message-list-pane.render.test.ts

@@ -93,13 +93,13 @@ describe("MessageListPane", () => {
 				listState: "ready",
 				listBody: createElement(
 					"a",
-					{ href: "/mail/inbox?selectedMessageId=t1" },
+					{ href: "/mail/inbox/thr-t1/t1" },
 					"Q3 planning notes",
 				),
 			}),
 		);
 		// The consumer's anchor row is rendered on the mobile/touch path…
-		assert.match(html, /href="\/mail\/inbox\?selectedMessageId=t1"/);
+		assert.match(html, /href="\/mail\/inbox\/thr-t1\/t1"/);
 		// …and the built-in TouchListBody mock fallback is NOT substituted.
 		assert.doesNotMatch(html, /Pull to refresh/);
 	});

package/src/components/message-list-pane.stories.tsx

@@ -229,7 +229,7 @@ export const CustomListBody: Story = {
 					s.threads.map((t) => (
 						<a
 							key={t.id}
-							href={`?selectedMessageId=${t.id}`}
+							href={`/mail/mbx-1/thr-${t.id}/${t.id}`}
 							className="flex items-center gap-3 px-4 py-3 hover:bg-surface-sunken"
 						>
 							<span className="font-medium text-sm">{t.fromName}</span>

package/src/components/nav-sidebar.tsx

@@ -4,6 +4,7 @@ import {
 	Archive,
 	BellOff,
 	BookmarkPlus,
+	CalendarDays,
 	ChevronDown,
 	ChevronRight,
 	FileText,
@@ -558,6 +559,12 @@ export interface NavSidebarProps
 	 * fall back to programmatic buttons (static stories / AppShell preview).
 	 */
 	linkComponent?: NavLinkComponent;
+	/**
+	 * Whether the calendar destination sits under the daily brief. It is
+	 * "hidden" until the app has a route behind it — the prototype turns it on,
+	 * the shipping nav does not offer an entry that leads nowhere.
+	 */
+	calendarNav?: "hidden" | "shown";
 	/** Every saved query, most recently saved first. See `SavedSearchesGroup`. */
 	savedSearches?: string[];
 	/**
@@ -577,6 +584,7 @@ export function NavSidebar({
 	onSelectNav,
 	variant = "desktop",
 	linkComponent,
+	calendarNav = "hidden",
 	savedSearches = [],
 	saveableQuery,
 	onSelectSavedSearch,
@@ -604,6 +612,18 @@ export function NavSidebar({
 				onClick={() => onSelectNav?.("brief")}
 			/>
 
+			{calendarNav === "shown" && (
+				<NavItem
+					navId="calendar"
+					linkComponent={linkComponent}
+					icon={<CalendarDays className="size-4" />}
+					label="Calendar"
+					ariaLabel="Calendar"
+					active={selectedNavId === "calendar"}
+					onClick={() => onSelectNav?.("calendar")}
+				/>
+			)}
+
 			<NavItem
 				navId="flagged"
 				linkComponent={linkComponent}

package/src/components/popover-menu.tsx

@@ -1,8 +1,139 @@
 import { EllipsisVertical } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import type { CSSProperties, Ref, RefObject } from "react";
+import {
+	type ReactNode,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 
+/** Viewport-relative bounding box of whatever a menu opens against. */
+export interface PopoverMenuAnchor {
+	readonly left: number;
+	readonly right: number;
+	readonly top: number;
+	readonly bottom: number;
+}
+
+const ANCHOR_GAP_PX = 4;
+const VIEWPORT_MARGIN_PX = 8;
+
+/**
+ * Where the panel lands: below the anchor and aligned to whichever edge
+ * `align` names, pulled back onto the screen on every side it would
+ * otherwise cross. A panel too tall for the space below flips above the
+ * anchor instead of running past the bottom edge.
+ */
+function clampToViewport(
+	anchor: PopoverMenuAnchor,
+	panel: { width: number; height: number },
+	align: "start" | "end",
+): { left: number; top: number } {
+	const maxLeft = Math.max(
+		VIEWPORT_MARGIN_PX,
+		window.innerWidth - panel.width - VIEWPORT_MARGIN_PX,
+	);
+	const preferredLeft =
+		align === "end" ? anchor.right - panel.width : anchor.left;
+	const left = Math.min(Math.max(preferredLeft, VIEWPORT_MARGIN_PX), maxLeft);
+
+	const below = anchor.bottom + ANCHOR_GAP_PX;
+	const above = anchor.top - ANCHOR_GAP_PX - panel.height;
+	const fitsBelow =
+		below + panel.height <= window.innerHeight - VIEWPORT_MARGIN_PX;
+	const top = fitsBelow || above < VIEWPORT_MARGIN_PX ? below : above;
+
+	return { left, top };
+}
+
+/**
+ * Measures the anchor and the panel's own size, then keeps the panel's fixed
+ * position clamped to the viewport for as long as it is open — reset on every
+ * resize and on scroll anywhere in the ancestor chain, since a fixed position
+ * does not follow a scrolled anchor on its own.
+ */
+function useAnchoredPlacement(
+	panelRef: RefObject<HTMLElement | null>,
+	open: boolean,
+	align: "start" | "end",
+	getAnchor: () => PopoverMenuAnchor | null,
+): CSSProperties | null {
+	const [style, setStyle] = useState<CSSProperties | null>(null);
+	const getAnchorRef = useRef(getAnchor);
+	getAnchorRef.current = getAnchor;
+
+	useLayoutEffect(() => {
+		if (!open) {
+			setStyle(null);
+			return;
+		}
+		const place = () => {
+			const panel = panelRef.current;
+			const anchor = getAnchorRef.current();
+			if (!panel || !anchor) return;
+			// `.width`/`.height` over the rect's own edges: a `getBoundingClientRect`
+			// stand-in in a test carries the edges without the derived pair.
+			const rect = panel.getBoundingClientRect();
+			const size = {
+				width: rect.right - rect.left,
+				height: rect.bottom - rect.top,
+			};
+			const placement = clampToViewport(anchor, size, align);
+			setStyle((previous) =>
+				previous?.left === placement.left && previous.top === placement.top
+					? previous
+					: { position: "fixed", left: placement.left, top: placement.top },
+			);
+		};
+		place();
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [open, align, panelRef]);
+
+	return style;
+}
+
+export interface PopoverMenuPortalProps {
+	open: boolean;
+	align?: "start" | "end";
+	getAnchor: () => PopoverMenuAnchor | null;
+	panelRef: RefObject<HTMLElement | null>;
+	children: ReactNode;
+}
+
+/**
+ * Carries a menu panel out of the DOM subtree it opened from and into the
+ * document body, positioned at a fixed, viewport-clamped point. A panel left
+ * in place is clipped by the first scrolling ancestor between it and the
+ * page — the compose body, a card, anything with its own `overflow` — no
+ * matter how high its `z-index` climbs; escaping that ancestor takes leaving
+ * its DOM subtree, which only a portal does.
+ */
+export function PopoverMenuPortal({
+	open,
+	align = "start",
+	getAnchor,
+	panelRef,
+	children,
+}: PopoverMenuPortalProps) {
+	const style = useAnchoredPlacement(panelRef, open, align, getAnchor);
+	if (!open) return null;
+	return createPortal(
+		<div style={style ?? { position: "fixed", visibility: "hidden" }}>
+			{children}
+		</div>,
+		document.body,
+	);
+}
+
 export interface PopoverMenuItem {
 	/** Stable key, also the accessible text of the row. */
 	key: string;
@@ -11,6 +142,83 @@ export interface PopoverMenuItem {
 	onSelect: () => void;
 }
 
+export interface PopoverMenuPanelProps {
+	label?: string;
+	children: ReactNode;
+	className?: string;
+	ref?: Ref<HTMLDivElement>;
+	onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+	"data-testid"?: string;
+}
+
+/**
+ * The menu itself, without a trigger: the surface, the scrolling and the
+ * rounding every dropdown in the kit shares. A menu that hangs off a button
+ * gets it through {@link PopoverMenu}; one anchored to something else — the
+ * misspelt word under the pointer — positions this and keeps the same chrome.
+ */
+export function PopoverMenuPanel({
+	label,
+	children,
+	className,
+	ref,
+	onKeyDown,
+	"data-testid": testId,
+}: PopoverMenuPanelProps) {
+	return (
+		<div
+			ref={ref}
+			role="menu"
+			aria-label={label}
+			tabIndex={-1}
+			onKeyDown={onKeyDown}
+			data-testid={testId}
+			className={cn(
+				"z-50 flex max-h-[60dvh] min-w-44 flex-col overflow-y-auto overscroll-contain rounded-md border border-line bg-surface py-1 shadow-lg outline-none",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export interface PopoverMenuRowProps {
+	label: string;
+	icon?: ReactNode;
+	onSelect: () => void;
+	className?: string;
+	lang?: string;
+	"data-testid"?: string;
+}
+
+/** One selectable row of a menu panel, at the kit's touch height. */
+export function PopoverMenuRow({
+	label,
+	icon,
+	onSelect,
+	className,
+	lang,
+	"data-testid": testId,
+}: PopoverMenuRowProps) {
+	return (
+		<button
+			type="button"
+			role="menuitem"
+			lang={lang}
+			onClick={onSelect}
+			data-testid={testId}
+			className={cn(
+				"flex min-h-11 items-center gap-3 px-4 py-2.5 text-left text-sm text-fg transition-colors hover:bg-surface-sunken",
+				className,
+			)}
+		>
+			{icon && <span className="shrink-0 text-fg-subtle">{icon}</span>}
+			{label}
+		</button>
+	);
+}
+
 export interface PopoverMenuProps {
 	/** Accessible label for the trigger button. */
 	triggerLabel: string;
@@ -65,16 +273,18 @@ export function PopoverMenu({
 }: PopoverMenuProps) {
 	const [open, setOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
+	const panelRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		if (!open) return;
 		const onPointer = (event: MouseEvent) => {
+			const target = event.target as Node;
 			if (
-				containerRef.current &&
-				!containerRef.current.contains(event.target as Node)
-			) {
-				setOpen(false);
-			}
+				containerRef.current?.contains(target) ||
+				panelRef.current?.contains(target)
+			)
+				return;
+			setOpen(false);
 		};
 		const onKey = (event: KeyboardEvent) => {
 			if (event.key === "Escape") setOpen(false);
@@ -108,34 +318,27 @@ export function PopoverMenu({
 			>
 				{triggerText}
 			</Button>
-			{open && (
-				<div
-					role="menu"
-					className={cn(
-						"absolute top-full z-50 mt-1 flex max-h-[60dvh] min-w-44 flex-col overflow-y-auto overscroll-contain rounded-md border border-line bg-surface py-1 shadow-lg",
-						align === "end" ? "right-0" : "left-0",
-					)}
-				>
+			<PopoverMenuPortal
+				open={open}
+				align={align}
+				panelRef={panelRef}
+				getAnchor={() => containerRef.current?.getBoundingClientRect() ?? null}
+			>
+				<PopoverMenuPanel ref={panelRef}>
 					{items.map((item) => (
-						<button
+						<PopoverMenuRow
 							key={item.key}
-							type="button"
-							role="menuitem"
-							onClick={() => {
+							label={item.label}
+							icon={item.icon}
+							onSelect={() => {
 								setOpen(false);
 								item.onSelect();
 							}}
-							className="flex min-h-11 items-center gap-3 px-4 py-2.5 text-left text-sm text-fg transition-colors hover:bg-surface-sunken"
-						>
-							{item.icon && (
-								<span className="shrink-0 text-fg-subtle">{item.icon}</span>
-							)}
-							{item.label}
-						</button>
+						/>
 					))}
 					{children}
-				</div>
-			)}
+				</PopoverMenuPanel>
+			</PopoverMenuPortal>
 		</div>
 	);
 }

package/src/components/pull-to-refresh.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
-import { useEffect, useState } from "react";
 import ReactPullToRefresh from "react-simple-pull-to-refresh";
 import { DESKTOP_MEDIA_QUERY } from "../lib/layout-breakpoints.js";
+import { useMatchMedia } from "../lib/use-match-media.js";
 
 export interface PullToRefreshProps {
 	children: ReactElement;
@@ -9,24 +9,6 @@ export interface PullToRefreshProps {
 	isRefreshing?: boolean;
 }
 
-const useMatchMedia = (query: string): boolean => {
-	const [matches, setMatches] = useState(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return false;
-		return window.matchMedia(query).matches;
-	});
-
-	useEffect(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return;
-		const mql = window.matchMedia(query);
-		setMatches(mql.matches);
-		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
-		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
-	}, [query]);
-
-	return matches;
-};
-
 /**
  * Wraps a scrollable list with a pull-to-refresh gesture on mobile. Below the
  * desktop breakpoint (Tailwind `lg`) a downward pull at the top of the list

package/src/components/recurrence-scope-prompt.render.test.ts

@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { RecurrenceScopePrompt } from "./recurrence-scope-prompt.js";
+
+const render = (touch = false) =>
+	renderToString(
+		createElement(RecurrenceScopePrompt, {
+			title: "Standup",
+			ruleText: "Every weekday, 09:15",
+			instanceText: "Wednesday 10 June",
+			onChoose: () => undefined,
+			onCancel: () => undefined,
+			touch,
+		}),
+	);
+
+describe("RecurrenceScopePrompt", () => {
+	it("offers all three scopes", () => {
+		const html = render();
+		assert.match(html, /This event/);
+		assert.match(html, /This and everything after/);
+		assert.match(html, /The whole series/);
+	});
+
+	it("states the rule and the instance that was clicked", () => {
+		const html = render();
+		assert.match(html, /Every weekday, 09:15/);
+		assert.match(html, /Wednesday 10 June/);
+	});
+
+	it("grows the choices for a thumb", () => {
+		assert.match(render(true), /min-h-11/);
+	});
+});

package/src/components/recurrence-scope-prompt.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RecurrenceScopePrompt } from "./recurrence-scope-prompt.js";
+
+/**
+ * The scope question, asked before the form opens. Editing one instance and
+ * editing the rule are different acts, so the choice is made while the change
+ * is still an intention.
+ */
+const meta: Meta<typeof RecurrenceScopePrompt> = {
+	title: "Calendar/Recurrence scope",
+	component: RecurrenceScopePrompt,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof RecurrenceScopePrompt>;
+
+export const Desktop: Story = {
+	render: () => (
+		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
+			<RecurrenceScopePrompt
+				title="Standup"
+				ruleText="Every weekday, 09:15"
+				instanceText="Wednesday 10 June"
+				onChoose={() => {}}
+				onCancel={() => {}}
+			/>
+		</div>
+	),
+};
+
+/** The same question with thumb-sized targets. */
+export const Touch: Story = {
+	render: () => (
+		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
+			<RecurrenceScopePrompt
+				title="Standup"
+				ruleText="Every weekday, 09:15"
+				instanceText="Wednesday 10 June"
+				onChoose={() => {}}
+				onCancel={() => {}}
+				touch
+			/>
+		</div>
+	),
+};

package/src/components/recurrence-scope-prompt.tsx

@@ -0,0 +1,84 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import type { RecurrenceScope } from "./calendar-types.js";
+
+export interface RecurrenceScopePromptProps {
+	/** The series being edited, e.g. "Standup". */
+	title: string;
+	/** The rule in words, e.g. "Every weekday, 09:15". */
+	ruleText: string;
+	/** The instance that was clicked, already formatted. */
+	instanceText: string;
+	onChoose: (scope: RecurrenceScope) => void;
+	onCancel: () => void;
+	touch?: boolean;
+	className?: string;
+}
+
+const choices: { scope: RecurrenceScope; label: string; note: string }[] = [
+	{
+		scope: "this",
+		label: "This event",
+		note: "Leaves the rest of the series alone",
+	},
+	{
+		scope: "following",
+		label: "This and everything after",
+		note: "Splits the series here",
+	},
+	{ scope: "all", label: "The whole series", note: "Rewrites the rule itself" },
+];
+
+/**
+ * The scope question, asked first. A series is one object with one rule, and
+ * which instances an edit reaches changes what the edit means — so it is
+ * settled before the form opens, not confirmed on the way out when the change
+ * has already been typed.
+ */
+export function RecurrenceScopePrompt({
+	title,
+	ruleText,
+	instanceText,
+	onChoose,
+	onCancel,
+	touch,
+	className,
+}: RecurrenceScopePromptProps) {
+	return (
+		<div className={cn("flex flex-col gap-3", className)}>
+			<div>
+				<h2 className="text-md font-semibold text-fg">{title} repeats</h2>
+				<p className="text-xs text-fg-muted">{ruleText}</p>
+				<p className="text-xs text-fg-subtle">You clicked {instanceText}.</p>
+			</div>
+
+			<p className="text-sm text-fg">What should the change apply to?</p>
+
+			<div className="flex flex-col gap-1.5">
+				{choices.map((choice) => (
+					<button
+						key={choice.scope}
+						type="button"
+						onClick={() => onChoose(choice.scope)}
+						className={cn(
+							"flex flex-col rounded-md border border-line bg-surface px-3 py-2 text-left outline-none transition-colors hover:border-line-strong hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring",
+							touch && "min-h-11 justify-center",
+						)}
+					>
+						<span className="text-sm font-medium text-fg">{choice.label}</span>
+						<span className="text-2xs text-fg-subtle">{choice.note}</span>
+					</button>
+				))}
+			</div>
+
+			<Button
+				variant="ghost"
+				size={touch ? "md" : "sm"}
+				onClick={onCancel}
+				className={cn("self-start", touch && "min-h-11")}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}