@remit/ui 0.0.101 → 0.0.103

package/src/components/compose-language-setting.tsx

@@ -0,0 +1,106 @@
+import { Star, X } from "lucide-react";
+import {
+	COMPOSE_LANGUAGE_OPTIONS,
+	languageLabel,
+	primaryLanguageSubtag,
+} from "../lib/compose-language.js";
+import { Button } from "./button.js";
+
+export interface ComposeLanguageSettingProps {
+	/** The account's tags, most-used first. The first is the compose default. */
+	value: readonly string[];
+	onChange: (languages: string[]) => void;
+	busy?: boolean;
+}
+
+const addable = (chosen: readonly string[]): string[] => {
+	const taken = new Set(chosen.map(primaryLanguageSubtag));
+	return COMPOSE_LANGUAGE_OPTIONS.map((option) => option.tag)
+		.filter((tag) => !taken.has(tag))
+		.sort((left, right) =>
+			languageLabel(left).localeCompare(languageLabel(right)),
+		);
+};
+
+/**
+ * The account's writing languages. The list is two things at once: the menu the
+ * composer's language chip offers, and the set detection is allowed to choose
+ * inside — which is what keeps detection accurate on one sentence. The first
+ * entry is what a new message opens on.
+ */
+export const ComposeLanguageSetting = ({
+	value,
+	onChange,
+	busy = false,
+}: ComposeLanguageSettingProps) => {
+	const options = addable(value);
+
+	return (
+		<div className="space-y-2" data-testid="compose-language-setting">
+			<ul className="space-y-1">
+				{value.map((tag, index) => (
+					<li
+						key={tag}
+						data-testid={`compose-language-row-${tag}`}
+						className="flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 py-1.5"
+					>
+						<span
+							className="min-w-0 flex-1 truncate text-sm text-fg"
+							lang={tag}
+						>
+							{languageLabel(tag)}
+						</span>
+						{index === 0 ? (
+							<span className="shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+								Default
+							</span>
+						) : (
+							<Button
+								variant="ghost"
+								size="sm"
+								icon={<Star className="size-3.5" />}
+								disabled={busy}
+								aria-label={`Write new messages in ${languageLabel(tag)} by default`}
+								onClick={() =>
+									onChange([tag, ...value.filter((other) => other !== tag)])
+								}
+							>
+								Default
+							</Button>
+						)}
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<X className="size-3.5" />}
+							disabled={busy || value.length === 1}
+							aria-label={`Remove ${languageLabel(tag)}`}
+							onClick={() => onChange(value.filter((other) => other !== tag))}
+						/>
+					</li>
+				))}
+			</ul>
+			<select
+				aria-label="Add a language"
+				value=""
+				disabled={busy || options.length === 0}
+				onChange={(event) => {
+					if (event.target.value === "") return;
+					onChange([...value, event.target.value]);
+				}}
+				className="w-full rounded-md border border-line bg-surface-sunken px-3 py-2 text-sm text-fg outline-none transition-colors focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30"
+			>
+				<option value="">Add a language…</option>
+				{options.map((tag) => (
+					<option key={tag} value={tag}>
+						{languageLabel(tag)}
+					</option>
+				))}
+			</select>
+			<p className="text-xs text-fg-muted">
+				A message is tagged with the language you write it in, picked from this
+				list. Your browser, not this app, decides which dictionaries it
+				spellchecks against — add the language there too to get its underlines.
+			</p>
+		</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/components/plain-text-editor.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { expect, fn, userEvent } from "storybook/test";
+import { ComposeLanguageChip } from "./compose-language-chip.js";
 import { ComposeModeToggle } from "./compose-mode-toggle.js";
 import { PlainTextEditor } from "./plain-text-editor.js";
 
@@ -37,16 +38,25 @@ const Surface = ({
 }) => {
 	const [text, setText] = useState(initial);
 	const [mode, setMode] = useState<"rich" | "plain">("plain");
+	const [language, setLanguage] = useState("nl");
 	return (
 		<PlainTextEditor
 			value={text}
 			onChange={setText}
 			onSubmit={onSubmit}
+			lang={language}
 			trailing={
-				<ComposeModeToggle
-					mode={mode}
-					onToggle={() => setMode(mode === "plain" ? "rich" : "plain")}
-				/>
+				<>
+					<ComposeLanguageChip
+						language={language}
+						languages={["nl", "en", "de"]}
+						onSelect={setLanguage}
+					/>
+					<ComposeModeToggle
+						mode={mode}
+						onToggle={() => setMode(mode === "plain" ? "rich" : "plain")}
+					/>
+				</>
 			}
 		/>
 	);

package/src/components/plain-text-editor.tsx

@@ -20,6 +20,12 @@ export interface PlainTextEditorProps {
 	ariaLabel?: string;
 	/** Pinned to the right of the toolbar strip. The mode toggle rides here. */
 	trailing?: ReactNode;
+	/**
+	 * BCP 47 tag of the language the message is being written in. Firefox picks
+	 * a dictionary from it among the ones the user installed; Chrome and Safari
+	 * ignore it. Every screen reader picks a voice from it.
+	 */
+	lang?: string;
 }
 
 const EMPTY_PASTE_NOTICE =
@@ -58,6 +64,7 @@ export const PlainTextEditor = ({
 	placeholder = "Write your message…",
 	ariaLabel = "Message body",
 	trailing,
+	lang,
 }: PlainTextEditorProps) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const pendingCaret = useRef<number | null>(null);
@@ -141,7 +148,11 @@ export const PlainTextEditor = ({
 					<span className="min-w-0 truncate py-2 text-xs text-fg-muted">
 						Plain text · Markdown
 					</span>
-					{trailing && <div className="ml-auto shrink-0">{trailing}</div>}
+					{trailing && (
+						<div className="ml-auto flex shrink-0 items-center gap-1">
+							{trailing}
+						</div>
+					)}
 				</div>
 			</div>
 			{emptyPaste && (
@@ -166,6 +177,7 @@ export const PlainTextEditor = ({
 				onChange={(event) => onChange(event.target.value)}
 				onKeyDown={handleKeyDown}
 				onPaste={handlePaste}
+				lang={lang}
 				aria-label={ariaLabel}
 				placeholder={placeholder}
 				data-testid="compose-body-plain"

package/src/components/rich-text-editor.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent } from "storybook/test";
 import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
+import { ComposeLanguageChip } from "./compose-language-chip.js";
 import { ComposeModeToggle } from "./compose-mode-toggle.js";
 import { RichTextEditor } from "./rich-text-editor.js";
 
@@ -104,23 +105,37 @@ export const ClickBelowTheText: Story = {
 	},
 };
 
-const modeToggle = <ComposeModeToggle mode="rich" onToggle={() => undefined} />;
-
-/** The toolbar as compose ships it: the formatting cluster, then the mode. */
+/**
+ * The two pinned controls, in the order compose ships them: the chip first, so
+ * one Shift+Tab out of the body still reaches the mode toggle and two reach the
+ * chip.
+ */
+const pinnedControls = (
+	<>
+		<ComposeLanguageChip
+			language="nl"
+			languages={["nl", "en", "de"]}
+			onSelect={() => undefined}
+		/>
+		<ComposeModeToggle mode="rich" onToggle={() => undefined} />
+	</>
+);
+
+/** The toolbar as compose ships it: the formatting cluster, then the two pinned controls. */
 export const ToolbarInRich: Story = {
-	name: "Toolbar with the mode toggle",
-	args: { initialHtml: RICH_DOCUMENT, trailing: modeToggle },
+	name: "Toolbar with the language chip and the mode toggle",
+	args: { initialHtml: RICH_DOCUMENT, lang: "nl", trailing: pinnedControls },
 };
 
 /**
  * At 390 the formatting cluster runs out of room. It scrolls inside its own
- * strip and the toggle stays pinned at the right edge, rather than the cluster
- * pushing the toggle off the screen — which is what a flex child without
- * `min-w-0` does.
+ * strip and both pinned controls stay at the right edge, rather than the
+ * cluster pushing them off the screen — which is what a flex child without
+ * `min-w-0` does. Two letters is what makes room for a second pinned item here.
  */
 export const NarrowToolbar: Story = {
 	name: "Toolbar at 390",
-	args: { initialHtml: RICH_DOCUMENT, trailing: modeToggle },
+	args: { initialHtml: RICH_DOCUMENT, lang: "nl", trailing: pinnedControls },
 	decorators: [
 		(Story) => (
 			<div
@@ -141,13 +156,21 @@ export const NarrowToolbar: Story = {
 		const toggle = canvasElement.querySelector<HTMLElement>(
 			"[data-testid=compose-mode-toggle]",
 		);
-		if (!frame || !cluster || !toggle)
+		const chip = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-language-chip]",
+		);
+		if (!frame || !cluster || !toggle || !chip)
 			throw new Error("the toolbar is not mounted");
 
 		await expect(cluster.scrollWidth).toBeGreaterThan(cluster.clientWidth);
+		const edge = frame.getBoundingClientRect().right + 1;
 		await expect(toggle.getBoundingClientRect().right).toBeLessThanOrEqual(
-			frame.getBoundingClientRect().right + 1,
+			edge,
+		);
+		await expect(chip.getBoundingClientRect().left).toBeGreaterThanOrEqual(
+			frame.getBoundingClientRect().left,
 		);
+		await expect(chip.getBoundingClientRect().right).toBeLessThanOrEqual(edge);
 	},
 };
 
@@ -160,7 +183,8 @@ export const StickyToolbar: Story = {
 	name: "Toolbar over a scrolled body",
 	args: {
 		initialHtml: `${RICH_DOCUMENT}${"<p>Another line of the message.</p>".repeat(30)}`,
-		trailing: modeToggle,
+		lang: "nl",
+		trailing: pinnedControls,
 	},
 	play: async ({ canvasElement }) => {
 		const frame = canvasElement.querySelector<HTMLElement>(

package/src/components/rich-text-editor.tsx

@@ -38,6 +38,12 @@ export interface RichTextEditorProps {
 	ariaLabel?: string;
 	/** Pinned to the right of the toolbar strip. The mode toggle rides here. */
 	trailing?: React.ReactNode;
+	/**
+	 * BCP 47 tag of the language the message is being written in. Firefox picks
+	 * a dictionary from it among the ones the user installed; Chrome and Safari
+	 * ignore it. Every screen reader picks a voice from it.
+	 */
+	lang?: string;
 }
 
 /**
@@ -164,6 +170,7 @@ export const RichTextEditor = ({
 	placeholder = "Write your message…",
 	ariaLabel = "Message body",
 	trailing,
+	lang,
 }: RichTextEditorProps) => (
 	<LexicalComposer
 		initialConfig={{
@@ -185,6 +192,7 @@ export const RichTextEditor = ({
 				<RichTextPlugin
 					contentEditable={
 						<ContentEditable
+							lang={lang}
 							aria-label={ariaLabel}
 							aria-placeholder={placeholder}
 							data-testid="compose-body"

package/src/components/rich-text-toolbar.tsx

@@ -68,9 +68,9 @@ const INITIAL_STATE: ToolbarState = {
 
 export interface RichTextToolbarProps {
 	/**
-	 * Pinned to the right of the strip, outside the part that scrolls. The mode
-	 * toggle rides here, and it is the last element in the toolbar's DOM so one
-	 * Shift+Tab out of the body reaches it.
+	 * Pinned to the right of the strip, outside the part that scrolls. The
+	 * language chip and the mode toggle ride here, in that order, so one
+	 * Shift+Tab out of the body reaches the toggle and two reach the chip.
 	 */
 	trailing?: React.ReactNode;
 }
@@ -212,7 +212,11 @@ export const RichTextToolbar = ({ trailing }: RichTextToolbarProps) => {
 						<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
 					</ToolbarButton>
 				</div>
-				{trailing && <div className="ml-auto shrink-0">{trailing}</div>}
+				{trailing && (
+					<div className="ml-auto flex shrink-0 items-center gap-1">
+						{trailing}
+					</div>
+				)}
 			</div>
 			{linkDraft !== null && (
 				<div className="flex items-center gap-2 border-t border-line px-3 py-1.5">