@remit/ui 0.0.101 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "type": "module",
   "files": [
     "src"
@@ -32,6 +32,7 @@
     "@react-types/shared": "^3.36.0",
     "clsx": "^2",
     "dompurify": "^3.4.7",
+    "franc-min": "^6.2.0",
     "lexical": "0.49.0",
     "lucide-react": "^0.468",
     "react-aria": "^3.50.0",

package/src/components/button.tsx

@@ -2,6 +2,7 @@ import type {
 	AnchorHTMLAttributes,
 	ButtonHTMLAttributes,
 	ReactNode,
+	Ref,
 } from "react";
 import { cn } from "../lib/cn.js";
 
@@ -13,6 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	size?: Size;
 	/** Optional leading icon (lucide-react element). */
 	icon?: ReactNode;
+	ref?: Ref<HTMLButtonElement>;
 }
 
 const base =
@@ -41,11 +43,13 @@ export function Button({
 	icon,
 	className,
 	children,
+	ref,
 	...props
 }: ButtonProps) {
 	return (
 		<button
 			type="button"
+			ref={ref}
 			className={cn(base, variants[variant], sizes[size], className)}
 			{...props}
 		>

package/src/components/compose-language-chip.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { ComposeLanguageChip } from "./compose-language-chip.js";
+
+const LANGUAGES = ["nl", "en", "de"];
+
+const CHROME_HELP =
+	"Chrome checks every language you add under Settings, then Languages. Adding one there checks it alongside the others.";
+const SAFARI_HELP =
+	"macOS decides this under Keyboard, then Text Input, then Spelling. Automatic by Language covers every language enabled there.";
+const FIREFOX_HELP =
+	"Firefox uses this setting. Right-click the message to add a dictionary for it.";
+
+const Chip = ({
+	initial = "nl",
+	helpText,
+}: {
+	initial?: string;
+	helpText?: string;
+}) => {
+	const [language, setLanguage] = useState(initial);
+	return (
+		<div className="flex w-[360px] justify-end rounded-md border border-line bg-canvas p-2">
+			<ComposeLanguageChip
+				language={language}
+				languages={LANGUAGES}
+				onSelect={setLanguage}
+				helpText={helpText}
+			/>
+		</div>
+	);
+};
+
+/**
+ * The language control at the right of the compose toolbar. Two letters, the
+ * language in full to a screen reader, and a menu of the account's languages
+ * over one sentence naming the browser setting that actually fixes spelling.
+ *
+ * The sentence is the only part of this feature that fixes anything for a
+ * Chrome or Safari user, and it says whose setting it is.
+ */
+const meta: Meta<typeof Chip> = {
+	title: "Mail/ComposeLanguageChip",
+	component: Chip,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Closed: Story = {
+	name: "The chip",
+	args: {},
+};
+
+const openMenu = async (canvasElement: HTMLElement): Promise<void> => {
+	await userEvent.click(
+		within(canvasElement).getByRole("button", {
+			name: /^Message language:/,
+		}),
+	);
+};
+
+export const MenuOnChrome: Story = {
+	name: "Open, on Chrome",
+	args: { helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(CHROME_HELP);
+	},
+};
+
+export const MenuOnSafari: Story = {
+	name: "Open, on Safari",
+	args: { helpText: SAFARI_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(SAFARI_HELP);
+	},
+};
+
+export const MenuOnFirefox: Story = {
+	name: "Open, on Firefox",
+	args: { helpText: FIREFOX_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(FIREFOX_HELP);
+	},
+};
+
+/**
+ * Each row is a radio: the current language is the checked one, and every row
+ * carries its own `lang`, so a screen reader reads `Nederlands` in Dutch rather
+ * than sounding it out in the reader's own voice.
+ */
+export const MenuMarksTheCurrentLanguage: Story = {
+	name: "The current language is checked",
+	args: { initial: "de", helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		const canvas = within(canvasElement);
+
+		await expect(
+			canvas.getByRole("menuitemradio", { name: /Deutsch/ }),
+		).toHaveAttribute("aria-checked", "true");
+		await expect(
+			canvas.getByRole("menuitemradio", { name: /Nederlands/ }),
+		).toHaveAttribute("aria-checked", "false");
+	},
+};
+
+/** Escape leaves without changing anything, and hands focus back to the chip. */
+export const EscapeReturnsFocus: Story = {
+	name: "Escape closes and returns focus",
+	args: { helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await userEvent.keyboard("{Escape}");
+
+		await expect(
+			within(canvasElement).queryByTestId("compose-language-menu"),
+		).toBeNull();
+		const chip = within(canvasElement).getByRole("button", {
+			name: /^Message language:/,
+		});
+		await expect(chip).toHaveFocus();
+		await expect(chip).toHaveTextContent("NL");
+	},
+};

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

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import {
+	browserSpellcheckHelp,
+	languageChipLabel,
+	languageLabel,
+} from "../lib/compose-language.js";
+import { rovingNextIndex } from "../lib/roving-focus.js";
+import { Button } from "./button.js";
+
+export interface ComposeLanguageChipProps {
+	/** The BCP 47 tag the message is currently being written in. */
+	language: string;
+	/** The account's configured tags — the menu, and detection's candidate set. */
+	languages: readonly string[];
+	onSelect: (tag: string) => void;
+	/**
+	 * The sentence naming where the browser keeps its dictionary setting.
+	 * Derived from the user agent when absent.
+	 */
+	helpText?: string;
+}
+
+/**
+ * The language control at the right of the compose toolbar: two letters, the
+ * language in full to a screen reader, and a menu of the account's languages.
+ *
+ * Nothing here claims to change spellchecking. In Chrome and Safari the
+ * underlines do not move — only the sentence at the foot of the menu names the
+ * setting that does, and it names it as the browser's, not the app's.
+ */
+export const ComposeLanguageChip = ({
+	language,
+	languages,
+	onSelect,
+	helpText,
+}: ComposeLanguageChipProps) => {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const menuRef = useRef<HTMLDivElement>(null);
+	const menuId = useId();
+
+	const close = useCallback((returnFocus: boolean) => {
+		setOpen(false);
+		if (returnFocus) triggerRef.current?.focus();
+	}, []);
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointer = (event: MouseEvent) => {
+			if (containerRef.current?.contains(event.target as Node)) return;
+			setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointer);
+		return () => document.removeEventListener("mousedown", onPointer);
+	}, [open]);
+
+	// The menu takes focus as it opens, so Escape and the arrow keys have
+	// somewhere to land and the caret does not stay behind in the message.
+	useEffect(() => {
+		if (!open) return;
+		const current = menuRef.current?.querySelector<HTMLElement>(
+			'[aria-checked="true"]',
+		);
+		const first = menuRef.current?.querySelector<HTMLElement>(
+			'[role="menuitemradio"]',
+		);
+		(current ?? first)?.focus();
+	}, [open]);
+
+	const onMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(true);
+			return;
+		}
+		const items = [
+			...(menuRef.current?.querySelectorAll<HTMLElement>(
+				'[role="menuitemradio"]',
+			) ?? []),
+		];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		const next = rovingNextIndex(event.key, index, items.length);
+		if (next === null) return;
+		event.preventDefault();
+		items[next]?.focus();
+	};
+
+	const pick = (tag: string) => {
+		onSelect(tag);
+		close(true);
+	};
+
+	return (
+		<div ref={containerRef} className="relative">
+			<Button
+				ref={triggerRef}
+				variant="ghost"
+				size="md"
+				aria-label={`Message language: ${languageLabel(language)}`}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				aria-controls={open ? menuId : undefined}
+				onClick={() => setOpen((value) => !value)}
+				data-testid="compose-language-chip"
+				data-language={language}
+				className="min-h-11 min-w-11 shrink-0 px-2 font-medium"
+			>
+				{languageChipLabel(language)}
+			</Button>
+			{open && (
+				<div
+					ref={menuRef}
+					id={menuId}
+					role="menu"
+					aria-label="Message language"
+					onKeyDown={onMenuKeyDown}
+					data-testid="compose-language-menu"
+					className="absolute right-0 top-full z-50 mt-1 flex max-h-[60dvh] min-w-56 flex-col overflow-y-auto overscroll-contain rounded-md border border-line bg-surface py-1 shadow-lg"
+				>
+					{languages.map((tag) => (
+						<button
+							key={tag}
+							type="button"
+							role="menuitemradio"
+							aria-checked={tag === language}
+							lang={tag}
+							onClick={() => pick(tag)}
+							className={cn(
+								"flex min-h-11 items-center justify-between gap-3 px-4 py-2.5 text-left text-sm text-fg transition-colors hover:bg-surface-sunken",
+								tag === language && "bg-accent-2-soft",
+							)}
+						>
+							{languageLabel(tag)}
+							<span className="shrink-0 text-xs text-fg-subtle">
+								{languageChipLabel(tag)}
+							</span>
+						</button>
+					))}
+					<p
+						data-testid="compose-language-help"
+						className="border-t border-line px-4 pb-1 pt-2 text-xs text-fg-muted"
+					>
+						{helpText ?? browserSpellcheckHelp(navigator.userAgent)}
+					</p>
+				</div>
+			)}
+		</div>
+	);
+};

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { ComposeLanguageSetting } from "./compose-language-setting.js";
+
+const Setting = ({ initial = ["nl", "en"] }: { initial?: string[] }) => {
+	const [languages, setLanguages] = useState(initial);
+	return (
+		<div className="w-[420px] rounded-md border border-line bg-canvas p-4">
+			<ComposeLanguageSetting value={languages} onChange={setLanguages} />
+		</div>
+	);
+};
+
+/**
+ * The account's writing languages, in settings. One list doing two jobs: the
+ * menu the composer's chip offers, and the set detection chooses inside — which
+ * is what keeps detection accurate on a single sentence.
+ */
+const meta: Meta<typeof Setting> = {
+	title: "Settings/ComposeLanguages",
+	component: Setting,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Setting>;
+
+export const TwoLanguages: Story = {
+	name: "Two configured languages",
+	args: {},
+};
+
+/** The last language cannot be removed: an empty list is a chip with no menu. */
+export const OneLanguageCannotBeEmptied: Story = {
+	name: "The last language stays",
+	args: { initial: ["nl"] },
+	play: async ({ canvasElement }) => {
+		await expect(
+			within(canvasElement).getByRole("button", { name: "Remove Nederlands" }),
+		).toBeDisabled();
+	},
+};
+
+export const AddingALanguage: Story = {
+	name: "Adding one from the list",
+	args: { initial: ["nl"] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.selectOptions(
+			canvas.getByRole("combobox", { name: "Add a language" }),
+			"de",
+		);
+		await expect(canvas.getByTestId("compose-language-row-de")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Remove Nederlands" }),
+		).toBeEnabled();
+	},
+};
+
+/** The first entry is what a new message opens on, and it can be moved. */
+export const ChangingTheDefault: Story = {
+	name: "Promoting a language to the default",
+	args: { initial: ["nl", "en", "de"] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			canvas.getByRole("button", {
+				name: "Write new messages in English by default",
+			}),
+		);
+
+		const rows = canvasElement.querySelectorAll(
+			"[data-testid^=compose-language-row-]",
+		);
+		await expect(rows[0]).toHaveAttribute(
+			"data-testid",
+			"compose-language-row-en",
+		);
+		await expect(rows[0]).toHaveTextContent("Default");
+	},
+};

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/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>(