@remit/ui 0.0.112 → 0.0.114

package/src/components/intelligence-panel.stories.tsx

@@ -15,7 +15,7 @@ const base: IntelligenceData = {
 		dkimDomain: "example.com",
 		summary: "This message was signed by example.com.",
 	},
-	category: { value: "Personal" },
+	category: { value: "personal" },
 	similar: [],
 };
 
@@ -62,7 +62,7 @@ export const SignedButUnrecognised: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Automated" },
+			category: { value: "automated" },
 			authenticity: {
 				verdict: "caution",
 				fromDomain: "serviceupdatebank.atlassian.net",
@@ -88,7 +88,7 @@ export const SignedButLookalikeName: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Transactional" },
+			category: { value: "transactional" },
 			authenticity: {
 				verdict: "caution",
 				fromDomain: "1nfomedics.nl",
@@ -111,7 +111,7 @@ export const Impersonation: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Phishing" },
+			category: { value: "automated" },
 			authenticity: {
 				verdict: "mismatch",
 				fromDomain: "your-bank.example",
@@ -136,7 +136,7 @@ export const UnreadableSender: Story = {
 				firstSeenLabel: "today",
 				addressUnverified: true,
 			},
-			category: { value: "Phishing" },
+			category: { value: "uncategorized" },
 			authenticity: {
 				verdict: "mismatch",
 				fromDomain: "",
@@ -152,13 +152,14 @@ export const WithSimilarMessages: Story = {
 	args: {
 		similarLinkComponent: ({
 			mailboxId,
+			threadId,
 			messageId,
 			className,
 			ariaLabel,
 			children,
 		}) => (
 			<a
-				href={`/mail/${mailboxId}?selectedMessageId=${messageId}`}
+				href={`/mail/${mailboxId}/${threadId}/${messageId}`}
 				className={className}
 				aria-label={ariaLabel}
 			>
@@ -171,6 +172,7 @@ export const WithSimilarMessages: Story = {
 				{
 					id: "msg-1",
 					mailboxId: "mbx-1",
+					threadId: "thr-msg-1",
 					fromName: "Alex Rivera",
 					subject: "Re: Q3 planning notes",
 					timeLabel: "Jan 17",
@@ -179,6 +181,7 @@ export const WithSimilarMessages: Story = {
 				{
 					id: "msg-2",
 					mailboxId: "mbx-1",
+					threadId: "thr-msg-2",
 					fromName: "Billing",
 					subject: "Your invoice is ready",
 					timeLabel: "Yesterday",
@@ -187,6 +190,7 @@ export const WithSimilarMessages: Story = {
 				{
 					id: "msg-3",
 					mailboxId: "mbx-2",
+					threadId: "thr-msg-3",
 					fromName: "",
 					subject: "(No subject)",
 					timeLabel: "Dec 4, 2024",

package/src/components/intelligence-panel.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import type { ReactElement, ReactNode } from "react";
 import { cn } from "../lib/cn.js";
+import { categoryTone, type ThreadCategory } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
@@ -84,6 +85,8 @@ export interface SimilarMessageIntel {
 	id: string;
 	/** Mailbox the message lives in — the route param for opening it. */
 	mailboxId: string;
+	/** Conversation the message belongs to, which is what the reading pane opens. */
+	threadId: string;
 	fromName: string;
 	subject: string;
 	timeLabel: string;
@@ -98,6 +101,7 @@ export interface SimilarMessageIntel {
  */
 export interface SimilarMessageLinkProps {
 	mailboxId: string;
+	threadId: string;
 	messageId: string;
 	className: string;
 	ariaLabel?: string;
@@ -128,7 +132,7 @@ export interface SenderFlagsIntel {
 export interface IntelligenceData {
 	sender: SenderIntel;
 	authenticity: AuthenticityIntel;
-	category: { value: string; overridden?: boolean };
+	category: { value: ThreadCategory; overridden?: boolean };
 	flags?: SenderFlagsIntel;
 	similar: SimilarMessageIntel[];
 }
@@ -395,7 +399,6 @@ export function IntelligencePanel({
 	notSpamPending = false,
 }: IntelligencePanelProps) {
 	const { sender, authenticity, category, flags = {}, similar } = data;
-	const suspicious = authenticity.verdict === "mismatch";
 
 	return (
 		<aside
@@ -430,9 +433,7 @@ export function IntelligencePanel({
 
 			<Section label="Category">
 				<div className="flex items-center gap-2">
-					<Badge tone={suspicious ? "danger" : "neutral"}>
-						{category.value}
-					</Badge>
+					<Badge tone={categoryTone[category.value]}>{category.value}</Badge>
 					{category.overridden && (
 						<span className="text-2xs text-fg-subtle">your override</span>
 					)}
@@ -542,6 +543,7 @@ export function IntelligencePanel({
 										{similarLinkComponent ? (
 											similarLinkComponent({
 												mailboxId: s.mailboxId,
+												threadId: s.threadId,
 												messageId: s.id,
 												className: rowClass,
 												ariaLabel,

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/mobile-reading-pane.render.test.ts

@@ -52,7 +52,7 @@ const intelligence: IntelligenceData = {
 		fromDomain: "example.com",
 		summary: "Verified.",
 	},
-	category: { value: "Personal" },
+	category: { value: "personal" },
 	similar: [],
 };
 

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/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>
+	);
+}

package/src/components/selection-wizard.tsx

@@ -69,6 +69,7 @@ import {
 	scopeLabel,
 } from "./filter-rule.js";
 import type { ClauseEditState } from "./filter-rule-editor.js";
+import { FlowScreen, FlowStepRail } from "./flow-screen.js";
 import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import { Input } from "./input.js";
 import { ProgressBar } from "./progress-bar.js";
@@ -91,21 +92,8 @@ export interface StepRailProps {
 }
 
 export function StepRail({ steps, step }: StepRailProps) {
-	const active = stepIndex(steps, step);
 	return (
-		<ol className="flex items-center gap-1.5" aria-label="Progress">
-			{steps.map((id, i) => (
-				<li key={id} className="flex flex-1 items-center gap-1.5">
-					<span
-						className={cn(
-							"h-1 flex-1 rounded-full transition-colors",
-							i <= active ? "bg-accent" : "bg-surface-sunken",
-						)}
-						aria-current={i === active ? "step" : undefined}
-					/>
-				</li>
-			))}
-		</ol>
+		<FlowStepRail count={steps.length} activeStep={stepIndex(steps, step)} />
 	);
 }
 
@@ -135,61 +123,22 @@ export function WizardScreen({
 	footer,
 	children,
 }: WizardScreenProps) {
-	const active = stepIndex(steps, step);
+	// A modal at every width: full-bleed below 768px it covers the list rather
+	// than sitting beside it, so the list behind must leave the accessibility
+	// tree with it — otherwise the verbs that opened the wizard are still
+	// reachable underneath the screen that replaced them.
 	return (
-		// A modal at every width: full-bleed below 768px it covers the list rather
-		// than sitting beside it, so the list behind must leave the accessibility
-		// tree with it — otherwise the verbs that opened the wizard are still
-		// reachable underneath the screen that replaced them.
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={title}
-			className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6"
+		<FlowScreen
+			title={title}
+			subtitle={subtitle}
+			steps={steps.map(stepLabel)}
+			activeStep={stepIndex(steps, step)}
+			onBack={onBack}
+			onExit={onExit}
+			footer={footer}
 		>
-			<div className="flex min-h-0 w-full flex-1 flex-col bg-canvas md:h-[45rem] md:max-h-[calc(100dvh-3rem)] md:w-[35rem] md:max-w-[calc(100vw-3rem)] md:flex-none md:overflow-hidden md:rounded-xl md:border md:border-line md:shadow-lg">
-				<header className="shrink-0 border-b border-line px-3 pb-2 pt-[calc(0.75rem+env(safe-area-inset-top,0px))] md:pt-3">
-					<div className="flex items-center gap-1">
-						<button
-							type="button"
-							onClick={onBack}
-							aria-label="Back"
-							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
-						>
-							<ArrowLeft className="size-5" />
-						</button>
-						<div className="min-w-0 flex-1 text-center">
-							<h1 className="truncate text-sm font-semibold">{title}</h1>
-							{subtitle && (
-								<p className="truncate text-2xs text-fg-muted">{subtitle}</p>
-							)}
-						</div>
-						<button
-							type="button"
-							onClick={onExit}
-							aria-label="Cancel"
-							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
-						>
-							<X className="size-5" />
-						</button>
-					</div>
-					<div className="space-y-1 px-1 pt-2">
-						<StepRail steps={steps} step={step} />
-						<p className="text-2xs text-fg-subtle">
-							Step {active + 1} of {steps.length} · {stepLabel(steps[active])}
-						</p>
-					</div>
-				</header>
-
-				<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
-					{children}
-				</div>
-
-				<footer className="shrink-0 border-t border-line px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:pb-3">
-					{footer}
-				</footer>
-			</div>
-		</div>
+			{children}
+		</FlowScreen>
 	);
 }
 
@@ -354,7 +303,8 @@ export interface FooterNavProps {
 	onBack: () => void;
 	nextLabel: string;
 	onNext: () => void;
-	nextVariant?: "primary" | "danger";
+	/** `commit` reads as primary without the arrow: it ends the flow. */
+	nextVariant?: "primary" | "commit" | "danger";
 	/** What the step is still missing. Dims the control; never disables it. */
 	blockedReason?: string;
 	/** Continue was pressed while blocked, so the reason is on screen. */
@@ -397,7 +347,7 @@ export function FooterNav({
 					Back
 				</Button>
 				<Button
-					variant={nextVariant}
+					variant={nextVariant === "danger" ? "danger" : "primary"}
 					size="touch"
 					onClick={onNext}
 					aria-describedby={blockedReason ? reasonId : undefined}