@remit/ui 0.0.113 → 0.0.115

package/src/components/event-quick-entry.tsx

@@ -0,0 +1,159 @@
+import { AlertTriangle, Info, Wand2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import type { PhraseParse } from "../lib/event-phrase.js";
+
+export interface EventQuickEntryProps {
+	value: string;
+	onChange: (value: string) => void;
+	/** The reading of `value`, recomputed by the caller on every keystroke. */
+	parse: PhraseParse;
+	/** Commits the reading to the form. */
+	onCommit: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+interface ReadingProps {
+	label: string;
+	value: string;
+	source: string;
+}
+
+function Reading({ label, value, source }: ReadingProps) {
+	return (
+		<div className="flex min-w-0 items-baseline gap-1.5">
+			<span className="shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+				{label}
+			</span>
+			<span className="truncate text-xs font-medium text-fg">{value}</span>
+			{source !== "" && (
+				<span className="shrink-0 rounded-xs bg-accent-2-soft px-1 text-2xs text-accent-2">
+					{source}
+				</span>
+			)}
+		</div>
+	);
+}
+
+/**
+ * Typing is the fastest way to make an event, so the field takes a sentence.
+ * What it does with the sentence is on screen while you type: every reading is
+ * shown next to the words it was taken from, and anything the reader filled in
+ * or could not settle is said out loud. Correcting the machine happens before
+ * the event exists, not after it is on the grid.
+ */
+export function EventQuickEntry({
+	value,
+	onChange,
+	parse,
+	onCommit,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: EventQuickEntryProps) {
+	const hasReading = value.trim() !== "";
+	const endTime =
+		parse.startTime === ""
+			? ""
+			: ` – ${clockAfter(parse.startTime, parse.durationMinutes)}`;
+
+	return (
+		<div className={cn("flex flex-col gap-2", className)}>
+			<div
+				className={cn(
+					"flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30",
+					touch ? "min-h-11" : "h-9",
+				)}
+			>
+				<Wand2 className="size-4 shrink-0 text-fg-subtle" aria-hidden />
+				<input
+					value={value}
+					aria-label="Describe the event"
+					placeholder={placeholder}
+					onChange={(e) => onChange(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") onCommit();
+					}}
+					className="min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle"
+				/>
+			</div>
+
+			{hasReading && (
+				<div className="flex flex-col gap-1 rounded-md border border-line bg-surface px-2.5 py-2">
+					<Reading
+						label="What"
+						value={parse.title === "" ? "—" : parse.title}
+						source=""
+					/>
+					<Reading
+						label="When"
+						value={`${formatDay(parse.date)}${
+							parse.startTime === "" ? "" : ` ${parse.startTime}${endTime}`
+						}`}
+						source={[parse.dateText, parse.startTimeText]
+							.filter((part) => part !== "")
+							.join(" ")}
+					/>
+					{parse.durationText !== "" && (
+						<Reading
+							label="Long"
+							value={formatDuration(parse.durationMinutes)}
+							source={parse.durationText}
+						/>
+					)}
+					{parse.attendees.length > 0 && (
+						<Reading
+							label="Who"
+							value={parse.attendees.join(", ")}
+							source={parse.attendeesText}
+						/>
+					)}
+					{parse.assumptions.map((note) => (
+						<p
+							key={note}
+							className="flex items-center gap-1.5 text-2xs text-fg-subtle"
+						>
+							<Info className="size-3 shrink-0" aria-hidden />
+							{note}
+						</p>
+					))}
+					{parse.unresolved.map((note) => (
+						<p
+							key={note}
+							className="flex items-center gap-1.5 text-2xs text-warning"
+						>
+							<AlertTriangle className="size-3 shrink-0" aria-hidden />
+							{note}
+						</p>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function clockAfter(clock: string, minutes: number): string {
+	const [hours, mins] = clock.split(":").map(Number);
+	const total = (hours * 60 + mins + minutes) % 1440;
+	return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(
+		total % 60,
+	).padStart(2, "0")}`;
+}
+
+function formatDay(iso: string): string {
+	if (iso === "") return "—";
+	const [year, month, day] = iso.split("-").map(Number);
+	return new Date(year, month - 1, day).toLocaleDateString("en-GB", {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+	});
+}
+
+function formatDuration(minutes: number): string {
+	if (minutes === 0) return "—";
+	if (minutes % 60 === 0) return `${minutes / 60}h`;
+	if (minutes < 60) return `${minutes}m`;
+	return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}

package/src/components/event-suggestion-card.render.test.ts

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { EventSuggestion } from "./calendar-types.js";
+import { EventSuggestionCard } from "./event-suggestion-card.js";
+
+const suggestion: EventSuggestion = {
+	id: "s1",
+	title: "Stay in Lisbon",
+	start: "2026-06-19",
+	end: "2026-06-23",
+	allDay: true,
+	location: "Alfama, Lisbon",
+	threadId: "thr_airbnb",
+	threadSubject: "Your reservation in Lisbon is confirmed",
+	sender: "Airbnb",
+	confidence: 0.94,
+	ambiguity: "",
+	suggestedCalendarId: "c5",
+	timeZone: "Europe/Lisbon",
+	zoneCertainty: "explicit",
+};
+
+const render = (overrides: Partial<EventSuggestion>) =>
+	renderToString(
+		createElement(EventSuggestionCard, {
+			suggestion: { ...suggestion, ...overrides },
+			whenText: "Friday 19 June – Monday 22 June",
+			onAdd: () => undefined,
+			onReview: () => undefined,
+			onDismiss: () => undefined,
+			onOpenThread: () => undefined,
+		}),
+	);
+
+describe("EventSuggestionCard", () => {
+	it("says it is a suggestion and not an event", () => {
+		const html = render({});
+		assert.match(html, /Suggested from mail/);
+		assert.match(html, /border-dashed/);
+	});
+
+	it("puts the reading into words rather than a percentage", () => {
+		assert.match(render({}), /Read cleanly/);
+		assert.match(render({ confidence: 0.7 }), /Read with gaps/);
+		assert.match(render({ confidence: 0.2 }), /Barely read/);
+	});
+
+	it("names what it could not settle", () => {
+		assert.match(
+			render({ ambiguity: "Two Tuesdays fit." }),
+			/Two Tuesdays fit\./,
+		);
+	});
+
+	it("credits the mail it was read out of", () => {
+		assert.match(render({}), /Airbnb/);
+		assert.match(render({}), /Your reservation in Lisbon is confirmed/);
+	});
+
+	it("needs a person to press Add", () => {
+		assert.match(render({}), />Add</);
+	});
+});

package/src/components/event-suggestion-card.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { EventSuggestion } from "./calendar-types.js";
+import { EventSuggestionCard } from "./event-suggestion-card.js";
+
+/**
+ * What the reader found in a mail, waiting for a person. It sits on a dashed
+ * card off the grid: a suggestion is never a provisional event that someone has
+ * to notice and take back off the calendar.
+ */
+const meta: Meta<typeof EventSuggestionCard> = {
+	title: "Calendar/Suggestion card",
+	component: EventSuggestionCard,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="max-w-sm">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof EventSuggestionCard>;
+
+const base: EventSuggestion = {
+	id: "s1",
+	title: "Stay in Lisbon",
+	start: "2026-06-19",
+	end: "2026-06-23",
+	allDay: true,
+	location: "Alfama, Lisbon",
+	threadId: "thr_airbnb",
+	threadSubject: "Your reservation in Lisbon is confirmed",
+	sender: "Airbnb",
+	confidence: 0.94,
+	ambiguity: "",
+	suggestedCalendarId: "c5",
+	timeZone: "Europe/Lisbon",
+	zoneCertainty: "explicit",
+};
+
+const handlers = {
+	onAdd: () => {},
+	onReview: () => {},
+	onDismiss: () => {},
+	onOpenThread: () => {},
+};
+
+/** A booking mail that gave every field it needed to. */
+export const ReadCleanly: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={base}
+			whenText="Friday 19 June – Monday 22 June"
+			{...handlers}
+		/>
+	),
+};
+
+/** What it could not settle is named, not smoothed over. */
+export const WithAmbiguity: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={{
+				...base,
+				id: "s2",
+				title: "Analytics pilot — first call",
+				allDay: false,
+				location: "",
+				threadSubject: "Following up: analytics pilot proposal",
+				sender: "Erik Wahlberg",
+				confidence: 0.38,
+				ambiguity:
+					'Asked for "some time Tuesday" and named no hour. Two Tuesdays fit.',
+			}}
+			whenText="Tuesday 16 June · 09:00 – 10:00"
+			{...handlers}
+		/>
+	),
+};
+
+/** The same card sized for a phone sheet. */
+export const Touch: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={base}
+			whenText="Friday 19 June – Monday 22 June"
+			touch
+			{...handlers}
+		/>
+	),
+};

package/src/components/event-suggestion-card.tsx

@@ -0,0 +1,116 @@
+import { AlertTriangle, Mail, Plus, SlidersHorizontal, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import type { EventSuggestion } from "./calendar-types.js";
+
+export interface EventSuggestionCardProps {
+	suggestion: EventSuggestion;
+	/** Already formatted by the caller. */
+	whenText: string;
+	onAdd: () => void;
+	onReview: () => void;
+	onDismiss: () => void;
+	onOpenThread: () => void;
+	touch?: boolean;
+	className?: string;
+}
+
+/** Words for a number, so the card never shows a false 87%. */
+function confidenceText(confidence: number): string {
+	if (confidence >= 0.85) return "Read cleanly";
+	if (confidence >= 0.6) return "Read with gaps";
+	return "Barely read";
+}
+
+/**
+ * A candidate, and unmistakably not an event. It lives off the grid, on a
+ * dashed card, and only a person pressing Add puts anything on the calendar —
+ * a machine reading of a mail never becomes a provisional block that someone
+ * has to notice and remove.
+ */
+export function EventSuggestionCard({
+	suggestion,
+	whenText,
+	onAdd,
+	onReview,
+	onDismiss,
+	onOpenThread,
+	touch,
+	className,
+}: EventSuggestionCardProps) {
+	return (
+		<div
+			className={cn(
+				"flex flex-col gap-2 rounded-lg border border-dashed border-line-strong bg-surface-sunken p-3",
+				className,
+			)}
+		>
+			<div className="flex items-start gap-2">
+				<span className="min-w-0 flex-1">
+					<span className="block text-2xs uppercase tracking-wider text-fg-subtle">
+						Suggested from mail · {confidenceText(suggestion.confidence)}
+					</span>
+					<span className="block truncate text-sm font-medium text-fg">
+						{suggestion.title}
+					</span>
+					<span className="block text-xs text-fg-muted">{whenText}</span>
+					{suggestion.location !== "" && (
+						<span className="block truncate text-xs text-fg-muted">
+							{suggestion.location}
+						</span>
+					)}
+				</span>
+				<button
+					type="button"
+					aria-label="Dismiss suggestion"
+					onClick={onDismiss}
+					className={cn(
+						"flex shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none hover:bg-surface hover:text-fg focus-visible:ring-2 focus-visible:ring-ring",
+						touch ? "size-11" : "size-7",
+					)}
+				>
+					<X className="size-4" />
+				</button>
+			</div>
+
+			{suggestion.ambiguity !== "" && (
+				<p className="flex items-start gap-1.5 text-2xs text-warning">
+					<AlertTriangle className="mt-0.5 size-3 shrink-0" aria-hidden />
+					{suggestion.ambiguity}
+				</p>
+			)}
+
+			<button
+				type="button"
+				onClick={onOpenThread}
+				className="flex w-full min-w-0 items-center gap-1.5 rounded-sm text-left text-2xs text-accent-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+			>
+				<Mail className="size-3 shrink-0" />
+				<span className="truncate">
+					{suggestion.sender} — {suggestion.threadSubject}
+				</span>
+			</button>
+
+			<div className="flex items-center gap-2">
+				<Button
+					variant="primary"
+					size={touch ? "md" : "sm"}
+					icon={<Plus className="size-3.5" />}
+					onClick={onAdd}
+					className={touch ? "min-h-11 flex-1" : ""}
+				>
+					Add
+				</Button>
+				<Button
+					variant="secondary"
+					size={touch ? "md" : "sm"}
+					icon={<SlidersHorizontal className="size-3.5" />}
+					onClick={onReview}
+					className={touch ? "min-h-11" : ""}
+				>
+					Change first
+				</Button>
+			</div>
+		</div>
+	);
+}

package/src/components/flow-screen.tsx

@@ -0,0 +1,169 @@
+/**
+ * The full-screen flow chrome: a fixed header carrying back and cancel, one
+ * scrolling body, and a fixed footer in the thumb zone. Every multi-decision
+ * surface on a phone is this shape, so there is one implementation of it.
+ */
+
+import { ArrowLeft, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface FlowStepRailProps {
+	/** How many steps the flow walks. */
+	count: number;
+	/** Zero-based index of the step on screen. */
+	activeStep: number;
+}
+
+export function FlowStepRail({ count, activeStep }: FlowStepRailProps) {
+	return (
+		<ol className="flex items-center gap-1.5" aria-label="Progress">
+			{Array.from({ length: count }, (_, i) => (
+				<li
+					// biome-ignore lint/suspicious/noArrayIndexKey: a rail segment is its position
+					key={i}
+					className="flex flex-1 items-center gap-1.5"
+				>
+					<span
+						className={cn(
+							"h-1 flex-1 rounded-full transition-colors",
+							i <= activeStep ? "bg-accent" : "bg-surface-sunken",
+						)}
+						aria-current={i === activeStep ? "step" : undefined}
+					/>
+				</li>
+			))}
+		</ol>
+	);
+}
+
+export interface FlowScreenProps {
+	title: string;
+	subtitle?: string;
+	/** The step labels in order. One label means one page and no rail. */
+	steps: readonly string[];
+	activeStep: number;
+	onBack: () => void;
+	onExit: () => void;
+	/** Omitted where the screen is read rather than answered. */
+	footer?: ReactNode;
+	children: ReactNode;
+	/**
+	 * `scroll` pads the body and scrolls it. `fill` hands the whole region to a
+	 * child that carries its own header and scrolling.
+	 */
+	bodyFit?: "scroll" | "fill";
+	/**
+	 * `viewport` covers the window and becomes a centred modal from 768px up.
+	 * `container` fills the nearest positioned ancestor and stays full-bleed,
+	 * for a surface that is already sized to a phone.
+	 */
+	anchor?: "viewport" | "container";
+}
+
+/**
+ * The body is the only scrolling region, so back and the footer's controls
+ * never leave the screen. The screen covers what opened it, which is why it
+ * takes the accessibility tree with it.
+ */
+export function FlowScreen({
+	title,
+	subtitle,
+	steps,
+	activeStep,
+	onBack,
+	onExit,
+	footer,
+	children,
+	anchor = "viewport",
+	bodyFit = "scroll",
+}: FlowScreenProps) {
+	const contained = anchor === "container";
+	return (
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			className={cn(
+				"z-50 flex flex-col font-sans text-fg",
+				contained
+					? "absolute inset-0"
+					: "fixed inset-0 md:items-center md:justify-center md:bg-black/40 md:p-6",
+			)}
+		>
+			<div
+				className={cn(
+					"flex min-h-0 w-full flex-1 flex-col bg-canvas",
+					!contained &&
+						"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={cn(
+						"shrink-0 border-b border-line px-3 pb-2",
+						contained
+							? "pt-3"
+							: "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>
+					{steps.length > 1 && (
+						<div className="space-y-1 px-1 pt-2">
+							<FlowStepRail count={steps.length} activeStep={activeStep} />
+							<p className="text-2xs text-fg-subtle">
+								Step {activeStep + 1} of {steps.length} · {steps[activeStep]}
+							</p>
+						</div>
+					)}
+				</header>
+
+				<div
+					className={cn(
+						"min-h-0 flex-1",
+						bodyFit === "fill"
+							? "overflow-hidden"
+							: "overflow-y-auto px-4 py-4",
+					)}
+				>
+					{children}
+				</div>
+
+				{footer && (
+					<footer
+						className={cn(
+							"shrink-0 border-t border-line px-4 py-3",
+							contained
+								? ""
+								: "pb-[max(0.75rem,env(safe-area-inset-bottom))] md:pb-3",
+						)}
+					>
+						{footer}
+					</footer>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -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

@@ -85,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;
@@ -99,6 +101,7 @@ export interface SimilarMessageIntel {
  */
 export interface SimilarMessageLinkProps {
 	mailboxId: string;
+	threadId: string;
 	messageId: string;
 	className: string;
 	ariaLabel?: string;
@@ -540,6 +543,7 @@ export function IntelligencePanel({
 										{similarLinkComponent ? (
 											similarLinkComponent({
 												mailboxId: s.mailboxId,
+												threadId: s.threadId,
 												messageId: s.id,
 												className: rowClass,
 												ariaLabel,

package/src/components/isolated-email-frame.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useMatchMedia } from "../lib/use-match-media.js";
 import { buildEmailSrcDoc, type EmailFrameVariant } from "./email-frame-css.js";
 
 export interface IsolatedEmailFrameProps {
@@ -86,24 +87,6 @@ export const computeFitScale = (
 	return Math.max(MIN_SCALE, containerWidth / contentWidth);
 };
 
-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;
-};
-
 /** Named (non-character) keys worth replaying: moving around and closing. */
 const FORWARDED_NAMED_KEYS = new Set([
 	"Enter",