@remit/ui 0.0.102 → 0.0.103

package/src/components/compose-header.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import {
+	type AddressEntry,
+	ComposeAddressField,
+} from "./compose-address-field.js";
+import { ComposeHeader, composeHeaderSummary } from "./compose-header.js";
+import { ComposeSubjectField } from "./compose-subject-field.js";
+
+const FromRow = ({ email }: { email: string }) => (
+	<div className="flex items-start gap-2">
+		{/* biome-ignore lint/a11y/noLabelWithoutControl: decorative label for a read-only value, not a form control */}
+		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">From:</label>
+		<div className="text-sm py-1.5">{email}</div>
+	</div>
+);
+
+/**
+ * Who the message is going to and what it is about. Cc and Bcc are not there
+ * until they are asked for — the common message has one recipient line, and
+ * three empty ones push the writing surface off a phone.
+ */
+const meta: Meta<typeof ComposeHeader> = {
+	title: "Mail/ComposeHeader",
+	component: ComposeHeader,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeHeader>;
+
+const Harness = ({
+	initialTo = [],
+	initialCc,
+	initialBcc,
+	initialSubject = "",
+	collapsed = false,
+}: {
+	initialTo?: AddressEntry[];
+	initialCc?: AddressEntry[];
+	initialBcc?: AddressEntry[];
+	initialSubject?: string;
+	collapsed?: boolean;
+}) => {
+	const [to, setTo] = useState(initialTo);
+	const [cc, setCc] = useState(initialCc ?? []);
+	const [bcc, setBcc] = useState(initialBcc ?? []);
+	const [showCc, setShowCc] = useState(initialCc !== undefined);
+	const [showBcc, setShowBcc] = useState(initialBcc !== undefined);
+	const [subject, setSubject] = useState(initialSubject);
+
+	return (
+		<div className="w-[560px] border border-line bg-surface">
+			<ComposeHeader
+				collapsed={collapsed}
+				summary={composeHeaderSummary({ to, cc, bcc, subject })}
+				from={<FromRow email="alice@northwind.example" />}
+				to={
+					<ComposeAddressField
+						label="To"
+						addresses={to}
+						onChange={setTo}
+						placeholder="Recipients"
+					/>
+				}
+				cc={
+					showCc ? (
+						<ComposeAddressField label="Cc" addresses={cc} onChange={setCc} />
+					) : undefined
+				}
+				bcc={
+					showBcc ? (
+						<ComposeAddressField
+							label="Bcc"
+							addresses={bcc}
+							onChange={setBcc}
+						/>
+					) : undefined
+				}
+				subject={<ComposeSubjectField value={subject} onChange={setSubject} />}
+				onShowCc={() => setShowCc(true)}
+				onShowBcc={() => setShowBcc(true)}
+			/>
+		</div>
+	);
+};
+
+export const NewMessage: Story = {
+	name: "New message — nothing filled in",
+	render: () => <Harness />,
+};
+
+export const Reply: Story = {
+	render: () => (
+		<Harness
+			initialTo={[{ email: "ada@northwind.example", displayName: "Ada" }]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+export const CcAndBccRevealed: Story = {
+	render: () => (
+		<Harness
+			initialTo={[{ email: "ada@northwind.example", displayName: "Ada" }]}
+			initialCc={[{ email: "grace@northwind.example" }]}
+			initialBcc={[]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+/**
+ * The software keyboard is up on a phone. The header gives its space to the
+ * writing surface and keeps one line of what is already filled in.
+ */
+export const Collapsed: Story = {
+	render: () => (
+		<Harness
+			collapsed
+			initialTo={[
+				{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+			]}
+			initialCc={[{ email: "grace@northwind.example" }]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+/** Collapsed before anything is typed: an ellipsis, not an empty bar. */
+export const CollapsedAndEmpty: Story = {
+	render: () => <Harness collapsed />,
+};
+
+export const RevealingCcLeavesBccOnOffer: Story = {
+	render: () => <Harness />,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.queryByLabelText("Cc:")).not.toBeInTheDocument();
+		await userEvent.click(canvas.getByRole("button", { name: "Cc" }));
+		await expect(canvas.getByLabelText("Cc:")).toBeVisible();
+		await expect(canvas.queryByLabelText("Bcc:")).not.toBeInTheDocument();
+		await userEvent.click(canvas.getByRole("button", { name: "Bcc" }));
+		await expect(canvas.getByLabelText("Bcc:")).toBeVisible();
+	},
+};

package/src/components/compose-header.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import type { AddressEntry } from "./compose-address-field.js";
+
+export interface ComposeHeaderProps {
+	/**
+	 * The software keyboard is up on a phone and the recipient rows would eat
+	 * the writing surface. The header collapses to one line of what is already
+	 * filled in.
+	 */
+	collapsed?: boolean;
+	/** One line of what the collapsed header stands in for. */
+	summary?: string;
+	from: ReactNode;
+	to: ReactNode;
+	/** Present once the field has been revealed; absent leaves the reveal button. */
+	cc?: ReactNode;
+	bcc?: ReactNode;
+	subject: ReactNode;
+	onShowCc: () => void;
+	onShowBcc: () => void;
+}
+
+const RevealButton = ({
+	label,
+	onClick,
+}: {
+	label: string;
+	onClick: () => void;
+}) => (
+	<button
+		type="button"
+		onClick={onClick}
+		className="text-xs text-fg-muted hover:text-fg transition-colors"
+	>
+		{label}
+	</button>
+);
+
+export const composeHeaderSummary = ({
+	to,
+	cc,
+	bcc,
+	subject,
+}: {
+	to: readonly AddressEntry[];
+	cc: readonly AddressEntry[];
+	bcc: readonly AddressEntry[];
+	subject: string;
+}): string => {
+	const chips: string[] = [];
+	if (to.length > 0)
+		chips.push(`To: ${to.map((a) => a.displayName ?? a.email).join(", ")}`);
+	if (cc.length > 0) chips.push(`Cc: ${cc.length}`);
+	if (bcc.length > 0) chips.push(`Bcc: ${bcc.length}`);
+	if (subject) chips.push(subject);
+	return chips.join(" · ");
+};
+
+/**
+ * Who the message is going to and what it is about. The fields are slots: the
+ * app fills them with the wired address and account controls, a story with
+ * static ones, and both get the same layout, the same Cc/Bcc reveal and the
+ * same collapsed line.
+ */
+export const ComposeHeader = ({
+	collapsed = false,
+	summary = "",
+	from,
+	to,
+	cc,
+	bcc,
+	subject,
+	onShowCc,
+	onShowBcc,
+}: ComposeHeaderProps) => {
+	if (collapsed) {
+		return (
+			<div
+				className="flex items-center gap-2 px-3 py-1.5 border-b border-line overflow-hidden"
+				data-testid="compose-header-collapsed"
+			>
+				<span className="truncate text-xs text-fg-muted">{summary || "…"}</span>
+				<span className="shrink-0 inline-flex items-center justify-center rounded bg-surface-sunken px-1.5 py-0.5 text-2xs text-fg-muted">
+					…
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-1 px-3 py-2 border-b border-line">
+			{from}
+			{to}
+			{cc ?? (
+				<div className="flex gap-2 pl-14">
+					<RevealButton label="Cc" onClick={onShowCc} />
+					<RevealButton label="Bcc" onClick={onShowBcc} />
+				</div>
+			)}
+			{cc && !bcc && (
+				<div className="pl-14">
+					<RevealButton label="Bcc" onClick={onShowBcc} />
+				</div>
+			)}
+			{bcc}
+			{subject}
+		</div>
+	);
+};

package/src/components/compose-mode-toggle.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import {
+	type ComposeBodyMode,
+	ComposeModeToggle,
+} from "./compose-mode-toggle.js";
+
+/**
+ * The control that swaps the writing surface. It reads "Plain text" in both
+ * states — the label names the mode it offers, and `aria-pressed` carries
+ * which one is up, so the control never changes under the finger.
+ */
+const meta: Meta<typeof ComposeModeToggle> = {
+	title: "Mail/ComposeModeToggle",
+	component: ComposeModeToggle,
+	parameters: { layout: "centered" },
+	args: { onToggle: () => undefined },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeModeToggle>;
+
+export const RichText: Story = {
+	name: "Rich text — plain text on offer",
+	args: { mode: "rich" },
+};
+
+export const PlainText: Story = {
+	name: "Plain text — the mode is on",
+	args: { mode: "plain" },
+};
+
+const Harness = ({ start }: { start: ComposeBodyMode }) => {
+	const [mode, setMode] = useState<ComposeBodyMode>(start);
+	return (
+		<ComposeModeToggle
+			mode={mode}
+			onToggle={() => setMode(mode === "plain" ? "rich" : "plain")}
+		/>
+	);
+};
+
+export const PressedStateFollowsTheMode: Story = {
+	render: () => <Harness start="rich" />,
+	play: async ({ canvasElement }) => {
+		const toggle = within(canvasElement).getByTestId("compose-mode-toggle");
+		await expect(toggle).toHaveAttribute("aria-pressed", "false");
+		await userEvent.click(toggle);
+		await expect(toggle).toHaveAttribute("aria-pressed", "true");
+		await expect(toggle).toHaveTextContent("Plain text");
+	},
+};

package/src/components/compose-smtp-missing-banner.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { ComposeSmtpMissingBanner } from "./compose-smtp-missing-banner.js";
+
+/**
+ * The selected account has no SMTP host. Send stays pressable and explains
+ * itself; this says the same thing before the user reaches for it, and carries
+ * the way out rather than leaving them to find Settings.
+ */
+const meta: Meta<typeof ComposeSmtpMissingBanner> = {
+	title: "Mail/ComposeSmtpMissingBanner",
+	component: ComposeSmtpMissingBanner,
+	parameters: { layout: "padded" },
+	args: { onConfigure: () => undefined },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeSmtpMissingBanner>;
+
+export const Default: Story = {};
+
+export const TheWayOutIsReachable: Story = {
+	args: { onConfigure: fn() },
+	play: async ({ args, canvasElement }) => {
+		await userEvent.click(
+			within(canvasElement).getByRole("button", { name: /Configure SMTP/ }),
+		);
+		await expect(args.onConfigure).toHaveBeenCalled();
+	},
+};

package/src/components/compose-smtp-missing-banner.tsx

@@ -0,0 +1,39 @@
+import { AlertTriangle, ArrowRight } from "lucide-react";
+
+export interface ComposeSmtpMissingBannerProps {
+	onConfigure: () => void;
+}
+
+/**
+ * Non-dismissible banner shown above the compose form when the selected
+ * account has no SMTP host configured. Pairs with a Send button that explains
+ * rather than disables, so the user has a single, factual account of why
+ * nothing will leave. See issue #196.
+ */
+export const ComposeSmtpMissingBanner = ({
+	onConfigure,
+}: ComposeSmtpMissingBannerProps) => (
+	<div
+		role="alert"
+		data-testid="compose-smtp-missing-banner"
+		className="flex items-start gap-3 border-b border-warning/50 bg-warning/10 px-3 py-2"
+	>
+		<AlertTriangle
+			className="size-5 shrink-0 mt-0.5 text-warning"
+			aria-hidden="true"
+		/>
+		<div className="flex-1 min-w-0">
+			<p className="text-sm font-medium text-warning">
+				This account can't send mail until SMTP is configured.
+			</p>
+			<button
+				type="button"
+				onClick={onConfigure}
+				className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-warning hover:underline"
+			>
+				Configure SMTP
+				<ArrowRight className="size-3" aria-hidden="true" />
+			</button>
+		</div>
+	</div>
+);

package/src/components/compose-subject-field.tsx

@@ -0,0 +1,22 @@
+export interface ComposeSubjectFieldProps {
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export const ComposeSubjectField = ({
+	value,
+	onChange,
+}: ComposeSubjectFieldProps) => (
+	<div className="flex items-start gap-2">
+		{/* biome-ignore lint/a11y/noLabelWithoutControl: label is visually adjacent to the sibling input; static id risks duplicates */}
+		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">Subj:</label>
+		<input
+			type="text"
+			value={value}
+			onChange={(e) => onChange(e.target.value)}
+			className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
+			placeholder="Subject"
+			data-subject-field
+		/>
+	</div>
+);

package/src/components/confirm-dialog.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConfirmDialog } from "./confirm-dialog.js";
+
+const meta: Meta<typeof ConfirmDialog> = {
+	title: "Primitives/ConfirmDialog",
+	component: ConfirmDialog,
+	parameters: { layout: "centered" },
+	args: {
+		isOpen: true,
+		title: "Move 3,412 messages to Trash?",
+		description: "You can restore them from Trash later.",
+		confirmLabel: "Move to Trash",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+/**
+ * A single corner tap on the bar's delete icon used to fall straight through
+ * to a delete with nothing in between — this is what now sits in the way.
+ * Wording says "Move … to Trash", not "Delete": the operation is reversible
+ * (IMAP delete moves to Trash), and the confirmation copy says so rather than
+ * reading as final.
+ */
+export const Default: Story = {};
+
+export const OneMessage: Story = {
+	args: {
+		title: "Move 1 message to Trash?",
+	},
+};
+
+/** The mutation is in flight: the confirm button disables rather than
+ *  allowing a second concurrent delete request. */
+export const Busy: Story = {
+	args: {
+		isBusy: true,
+	},
+};
+
+/** A non-destructive confirmation (no `destructive`) uses the accent
+ *  affirmative styling instead of danger. */
+export const NonDestructive: Story = {
+	args: {
+		title: "Archive 12 messages?",
+		description: undefined,
+		confirmLabel: "Archive",
+		destructive: false,
+	},
+};

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface ConfirmDialogProps {
+	isOpen: boolean;
+	title: string;
+	/** Optional supporting line under the title. */
+	description?: string;
+	confirmLabel: string;
+	cancelLabel?: string;
+	/** Style the confirm button as a destructive action. */
+	destructive?: boolean;
+	/** Disable the confirm button (e.g. while a mutation is in flight). */
+	isBusy?: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+/**
+ * Minimal accessible confirmation dialog. No existing Dialog/ConfirmDialog
+ * primitive ships in the web client (only the bespoke KeyboardShortcutsModal
+ * and SlidePanel), so this is a small reusable one matching their Tailwind +
+ * overlay conventions. Esc cancels, the backdrop cancels, Cancel is focused on
+ * open, and the confirm/cancel pair is the only focusable content so the focus
+ * stays within the dialog.
+ */
+export const ConfirmDialog = ({
+	isOpen,
+	title,
+	description,
+	confirmLabel,
+	cancelLabel = "Cancel",
+	destructive = false,
+	isBusy = false,
+	onConfirm,
+	onCancel,
+}: ConfirmDialogProps) => {
+	const cancelRef = useRef<HTMLButtonElement>(null);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				event.stopImmediatePropagation();
+				onCancel();
+			}
+		},
+		[onCancel],
+	);
+
+	useEffect(() => {
+		if (!isOpen) return;
+		// Capture phase so Esc closes the dialog before any list-level Esc
+		// handler (e.g. clearSelection) also fires on the same keystroke.
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
+	}, [isOpen, handleKeyDown]);
+
+	// Whoever opened the dialog gets the focus back when it closes. Without this
+	// a cancelled confirmation drops focus to the body, and the control the user
+	// was on — the compose mode toggle, a row's delete button — is gone from
+	// under the keyboard.
+	useEffect(() => {
+		if (!isOpen) return;
+		const opener =
+			document.activeElement instanceof HTMLElement
+				? document.activeElement
+				: null;
+		cancelRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	return (
+		// Above every other overlay, the mobile compose sheet included: a
+		// confirmation is the decision blocking whatever is under it, and a drawer
+		// portalled to the body at the same level would cover it.
+		<div className="fixed inset-0 z-[60] flex items-center justify-center">
+			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
+			    dialog itself must stay in the accessibility tree, and an
+			    aria-hidden ancestor would take it out. */}
+			<div
+				className="absolute inset-0 bg-canvas/80 backdrop-blur-sm"
+				aria-hidden="true"
+				onClick={onCancel}
+			/>
+
+			{/* Dialog */}
+			<div
+				role="dialog"
+				aria-modal="true"
+				aria-label={title}
+				className={cn(
+					"relative z-10 w-full max-w-sm",
+					"bg-surface border border-line rounded-sm shadow-lg",
+					"p-6",
+				)}
+				onClick={(e) => e.stopPropagation()}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<h2 className="text-lg font-semibold">{title}</h2>
+				{description && (
+					<p className="mt-2 text-sm text-fg-muted">{description}</p>
+				)}
+
+				<div className="mt-6 flex items-center justify-end gap-2">
+					<button
+						ref={cancelRef}
+						type="button"
+						onClick={onCancel}
+						className={cn(
+							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
+							"border border-line hover:bg-surface-raised",
+						)}
+					>
+						{cancelLabel}
+					</button>
+					<button
+						type="button"
+						onClick={onConfirm}
+						disabled={isBusy}
+						className={cn(
+							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
+							destructive
+								? "bg-danger text-canvas hover:bg-danger/90"
+								: "bg-accent text-accent-fg hover:bg-accent-hover",
+							"disabled:opacity-50 disabled:cursor-not-allowed",
+						)}
+					>
+						{confirmLabel}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/index.ts

@@ -130,16 +130,38 @@ export {
 	type ComposeActionBarProps,
 	type ComposeSaveStatus,
 } from "./components/compose-action-bar.js";
+export {
+	type AddressEntry,
+	ComposeAddressField,
+	type ComposeAddressFieldProps,
+} from "./components/compose-address-field.js";
 export {
 	ComposeFormShell,
 	type ComposeFormShellProps,
 	type ComposeMode,
 	composeModeLabels,
 } from "./components/compose-form-shell.js";
+export {
+	ComposeHeader,
+	type ComposeHeaderProps,
+	composeHeaderSummary,
+} from "./components/compose-header.js";
 export {
 	ComposeLanguageSetting,
 	type ComposeLanguageSettingProps,
 } from "./components/compose-language-setting.js";
+export {
+	ComposeSmtpMissingBanner,
+	type ComposeSmtpMissingBannerProps,
+} from "./components/compose-smtp-missing-banner.js";
+export {
+	ComposeSubjectField,
+	type ComposeSubjectFieldProps,
+} from "./components/compose-subject-field.js";
+export {
+	ConfirmDialog,
+	type ConfirmDialogProps,
+} from "./components/confirm-dialog.js";
 export {
 	DangerZoneSection,
 	type DangerZoneSectionProps,
@@ -674,6 +696,7 @@ export {
 	unwrapLanguage,
 	wrapWithLanguage,
 } from "./lib/compose-language.js";
+export { modeOfDraft } from "./lib/compose-mode.js";
 export { generateLayoutClampCSS } from "./lib/email-layout-clamp.js";
 export {
 	classifyEmailRenderTreatment,