@remit/web-client 0.0.137 → 0.0.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {
@@ -29,7 +29,7 @@
     "build:dist": "npm run generate:routes && node --import tsx harness/build.mjs",
     "preview": "vite preview",
     "test:typecheck": "npm run generate:routes && tsgo --noEmit && tsgo --noEmit -p tsconfig.node.json",
-    "test:run": "node --import tsx --import ./test-support/register.mjs --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-exclude='src/test-support/**' --test-coverage-lines=86 --test 'src/**/*.test.ts'",
+    "test:run": "TSX_TSCONFIG_PATH=./tsconfig.test.json node --import tsx --import ./test-support/register.mjs --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-exclude='src/test-support/**' --test-coverage-lines=86 --test 'src/**/*.test.ts'",
     "test": "npm run test:typecheck && npm run test:run"
   },
   "peerDependencies": {

package/src/components/compose/AddressField.tsx

@@ -1,19 +1,10 @@
 import { addressOperationsSearchAddressesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	AddressTag,
-	type Suggestion,
-	SuggestList,
-	useSuggestList,
-} from "@remit/ui";
+import { type AddressEntry, ComposeAddressField } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 
-export interface AddressEntry {
-	email: string;
-	displayName?: string;
-}
+export type { AddressEntry };
 
 interface AddressFieldProps {
 	label: string;
@@ -22,199 +13,40 @@ interface AddressFieldProps {
 	placeholder?: string;
 }
 
-/** Beyond Enter, the keys that take the highlighted suggestion in a chips field. */
-const ACCEPT_KEYS = ["Tab", ","] as const;
-
-const isValidEmail = (value: string): boolean =>
-	/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
-
-const parseEmailInput = (value: string): AddressEntry | undefined => {
-	const trimmed = value.trim();
-	if (!trimmed) return undefined;
-
-	const angleMatch = trimmed.match(/^(.+?)\s*<([^>]+)>$/);
-	if (angleMatch) {
-		const displayName = angleMatch[1].trim();
-		const email = angleMatch[2].trim();
-		if (isValidEmail(email)) return { email, displayName };
-	}
-
-	if (isValidEmail(trimmed)) return { email: trimmed };
-	return undefined;
-};
-
+/** Looks the account's known correspondents up for the field to offer. */
 export const AddressField = ({
 	label,
 	addresses,
 	onChange,
 	placeholder,
 }: AddressFieldProps) => {
-	const [inputValue, setInputValue] = useState("");
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	const debouncedQuery = useDebouncedValue(inputValue, 200);
+	const [query, setQuery] = useState("");
+	const debouncedQuery = useDebouncedValue(query, 200);
 
-	const { data: suggestionsData } = useQuery({
+	const { data } = useQuery({
 		...addressOperationsSearchAddressesOptions({
 			query: { q: debouncedQuery, limit: 8 },
 		}),
 		enabled: debouncedQuery.length >= 2,
 	});
 
-	const suggestions = suggestionsData?.items ?? [];
-	const existingEmails = new Set(addresses.map((a) => a.email.toLowerCase()));
-	const filteredSuggestions =
-		inputValue.length >= 2
-			? suggestions.filter(
-					(s) => !existingEmails.has(s.normalizedEmail.toLowerCase()),
-				)
-			: [];
-
-	const addAddress = useCallback(
-		(entry: AddressEntry) => {
-			if (existingEmails.has(entry.email.toLowerCase())) return;
-			onChange([...addresses, entry]);
-			setInputValue("");
-		},
-		[addresses, existingEmails, onChange],
-	);
-
-	const removeAddress = useCallback(
-		(index: number) => {
-			onChange(addresses.filter((_, i) => i !== index));
-		},
-		[addresses, onChange],
-	);
-
-	const selectSuggestion = useCallback(
-		(suggestion: RemitImapAddressResponse) => {
-			addAddress({
-				email: suggestion.normalizedEmail,
-				displayName: suggestion.displayName,
-			});
-			inputRef.current?.focus();
-		},
-		[addAddress],
-	);
-
-	const commitInput = useCallback(() => {
-		const entry = parseEmailInput(inputValue);
-		if (entry) {
-			addAddress(entry);
-		}
-	}, [inputValue, addAddress]);
-
-	// The open state, the highlight, and the arrow/Enter/Escape handling are the
-	// app's one typeahead behaviour, shared with the filter-rule value field.
-	const suggest = useSuggestList({
-		count: filteredSuggestions.length,
-		acceptKeys: ACCEPT_KEYS,
-		onAccept: (index) => selectSuggestion(filteredSuggestions[index]),
-	});
-
-	const options = useMemo<Suggestion[]>(
+	const suggestions = useMemo<AddressEntry[]>(
 		() =>
-			filteredSuggestions.map((suggestion) => ({
-				value: suggestion.normalizedEmail,
-				label: suggestion.displayName ?? suggestion.normalizedEmail,
-				...(suggestion.displayName ? { hint: suggestion.normalizedEmail } : {}),
+			(data?.items ?? []).map((item) => ({
+				email: item.normalizedEmail,
+				displayName: item.displayName,
 			})),
-		[filteredSuggestions],
+		[data],
 	);
 
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent<HTMLInputElement>) => {
-			if (e.key === "Backspace" && inputValue === "" && addresses.length > 0) {
-				removeAddress(addresses.length - 1);
-				return;
-			}
-
-			if (suggest.handleKeyDown(e)) return;
-
-			if (e.key === "Enter" || e.key === "Tab" || e.key === ",") {
-				if (inputValue.trim()) {
-					e.preventDefault();
-					commitInput();
-				}
-			}
-		},
-		[
-			inputValue,
-			addresses.length,
-			removeAddress,
-			suggest.handleKeyDown,
-			commitInput,
-		],
-	);
-
-	const handleBlur = useCallback(() => {
-		setTimeout(() => {
-			commitInput();
-			suggest.dismiss();
-		}, 150);
-	}, [commitInput, suggest.dismiss]);
-
 	return (
-		<div className="relative">
-			<div className="flex items-start gap-2">
-				<label
-					htmlFor={`address-field-${label}`}
-					className="text-sm text-fg-muted shrink-0 w-12 pt-1.5"
-				>
-					{label}:
-				</label>
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: click-to-focus wrapper for the address input; keyboard is forwarded to the inner input */}
-				<div
-					className="flex-1 flex flex-wrap items-center gap-1 min-h-[36px] px-2 py-1 border rounded-md bg-canvas cursor-text"
-					onClick={() => inputRef.current?.focus()}
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") inputRef.current?.focus();
-					}}
-				>
-					{addresses.map((addr, i) => (
-						<AddressTag
-							key={addr.email}
-							email={addr.email}
-							displayName={addr.displayName}
-							onRemove={() => removeAddress(i)}
-						/>
-					))}
-					<input
-						ref={inputRef}
-						id={`address-field-${label}`}
-						type="text"
-						value={inputValue}
-						onChange={(e) => {
-							suggest.reopen();
-							setInputValue(e.target.value);
-						}}
-						onKeyDown={handleKeyDown}
-						onBlur={handleBlur}
-						placeholder={addresses.length === 0 ? placeholder : ""}
-						className="flex-1 min-w-[120px] bg-transparent outline-none text-sm py-0.5"
-						autoComplete="off"
-						{...suggest.comboboxProps}
-					/>
-				</div>
-			</div>
-
-			{suggest.open && (
-				<SuggestList
-					id={suggest.listId}
-					suggestions={options}
-					activeIndex={suggest.activeIndex}
-					optionId={suggest.optionId}
-					onPick={(option) => {
-						const picked = filteredSuggestions.find(
-							(suggestion) => suggestion.normalizedEmail === option.value,
-						);
-						if (picked) selectSuggestion(picked);
-					}}
-					onHighlight={suggest.setActiveIndex}
-					label={`${label} suggestions`}
-					className="absolute left-12 right-0 z-50 mt-1 max-h-[200px] shadow-lg"
-				/>
-			)}
-		</div>
+		<ComposeAddressField
+			label={label}
+			addresses={addresses}
+			onChange={onChange}
+			placeholder={placeholder}
+			suggestions={suggestions}
+			onQueryChange={setQuery}
+		/>
 	);
 };

package/src/components/compose/ComposeForm.tsx

@@ -11,10 +11,17 @@ import type {
 import {
 	ComposeActionBar,
 	ComposeFormShell,
+	ComposeHeader,
+	ComposeSubjectField,
+	composeHeaderSummary,
+	defaultComposeLanguages,
 	EMPTY_RICH_TEXT,
+	modeOfDraft,
 	QuotedText,
 	type RichTextValue,
 	sanitizeQuotedHtml,
+	unwrapLanguage,
+	wrapWithLanguage,
 } from "@remit/ui";
 import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -23,6 +30,7 @@ import {
 	Suspense,
 	useCallback,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -38,10 +46,9 @@ import {
 import type { AddressEntry } from "./AddressField";
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
-import { modeOfDraft } from "./compose-mode";
 
 const LazyComposeBody = lazy(() =>
-	import("./ComposeBody.js").then((m) => ({ default: m.ComposeBody })),
+	import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })),
 );
 
 const ComposeBodyFallback = () => (
@@ -56,7 +63,6 @@ import { useVisualViewport } from "../../hooks/useVisualViewport.js";
 import type { ComposeMode } from "./ComposeProvider";
 import { useCompose } from "./ComposeProvider";
 import { FromSelector } from "./FromSelector";
-import { SubjectField } from "./SubjectField";
 
 interface ComposeFormProps {
 	mode: ComposeMode;
@@ -166,9 +172,15 @@ const getReferences = (
 const outgoingBody = (
 	bodyMode: ComposeBodyMode,
 	body: RichTextValue,
+	language: string,
 ): { textBody: string | undefined; htmlBody: string | undefined } => ({
 	textBody: body.text || undefined,
-	htmlBody: bodyMode === "plain" ? "" : body.html || undefined,
+	htmlBody:
+		bodyMode === "plain"
+			? ""
+			: body.html
+				? wrapWithLanguage(body.html, language)
+				: undefined,
 });
 
 const isFormEmpty = (
@@ -185,10 +197,10 @@ const isFormEmpty = (
 	body.text.trim() === "";
 
 // ---------------------------------------------------------------------------
-// ComposeHeader — collapsed on mobile when the software keyboard is open
+// WiredComposeHeader — the shared header, with the app's fields in its slots
 // ---------------------------------------------------------------------------
 
-interface ComposeHeaderProps {
+interface WiredComposeHeaderProps {
 	selectedAccountId?: string;
 	onAccountChange: (account: RemitImapAccountResponse) => void;
 	toAddresses: AddressEntry[];
@@ -205,7 +217,7 @@ interface ComposeHeaderProps {
 	setSubject: (v: string) => void;
 }
 
-const ComposeHeader = ({
+const WiredComposeHeader = ({
 	selectedAccountId,
 	onAccountChange,
 	toAddresses,
@@ -220,93 +232,55 @@ const ComposeHeader = ({
 	setShowBcc,
 	subject,
 	setSubject,
-}: ComposeHeaderProps) => {
+}: WiredComposeHeaderProps) => {
 	const isDesktop = useIsDesktop();
 	const { isKeyboardOpen } = useVisualViewport();
-	const collapsed = !isDesktop && isKeyboardOpen;
-
-	if (collapsed) {
-		// Compact single-line summary when the keyboard eats vertical space
-		const chips: string[] = [];
-		if (toAddresses.length > 0)
-			chips.push(
-				`To: ${toAddresses.map((a) => a.displayName ?? a.email).join(", ")}`,
-			);
-		if (ccAddresses.length > 0) chips.push(`Cc: ${ccAddresses.length}`);
-		if (bccAddresses.length > 0) chips.push(`Bcc: ${bccAddresses.length}`);
-		if (subject) chips.push(subject);
-
-		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">
-					{chips.length > 0 ? chips.join(" · ") : "…"}
-				</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">
-			<FromSelector
-				selectedAccountId={selectedAccountId}
-				onSelect={onAccountChange}
-			/>
-			<AddressField
-				label="To"
-				addresses={toAddresses}
-				onChange={setToAddresses}
-				placeholder="Recipients"
-			/>
-			{showCc ? (
-				<AddressField
-					label="Cc"
-					addresses={ccAddresses}
-					onChange={setCcAddresses}
+		<ComposeHeader
+			collapsed={!isDesktop && isKeyboardOpen}
+			summary={composeHeaderSummary({
+				to: toAddresses,
+				cc: ccAddresses,
+				bcc: bccAddresses,
+				subject,
+			})}
+			from={
+				<FromSelector
+					selectedAccountId={selectedAccountId}
+					onSelect={onAccountChange}
 				/>
-			) : (
-				<div className="flex gap-2 pl-14">
-					<button
-						type="button"
-						onClick={() => setShowCc(true)}
-						className="text-xs text-fg-muted hover:text-fg transition-colors"
-					>
-						Cc
-					</button>
-					<button
-						type="button"
-						onClick={() => setShowBcc(true)}
-						className="text-xs text-fg-muted hover:text-fg transition-colors"
-					>
-						Bcc
-					</button>
-				</div>
-			)}
-			{showCc && !showBcc && (
-				<div className="pl-14">
-					<button
-						type="button"
-						onClick={() => setShowBcc(true)}
-						className="text-xs text-fg-muted hover:text-fg transition-colors"
-					>
-						Bcc
-					</button>
-				</div>
-			)}
-			{showBcc && (
+			}
+			to={
 				<AddressField
-					label="Bcc"
-					addresses={bccAddresses}
-					onChange={setBccAddresses}
+					label="To"
+					addresses={toAddresses}
+					onChange={setToAddresses}
+					placeholder="Recipients"
 				/>
-			)}
-			<SubjectField value={subject} onChange={setSubject} />
-		</div>
+			}
+			cc={
+				showCc ? (
+					<AddressField
+						label="Cc"
+						addresses={ccAddresses}
+						onChange={setCcAddresses}
+					/>
+				) : undefined
+			}
+			bcc={
+				showBcc ? (
+					<AddressField
+						label="Bcc"
+						addresses={bccAddresses}
+						onChange={setBccAddresses}
+					/>
+				) : undefined
+			}
+			subject={<ComposeSubjectField value={subject} onChange={setSubject} />}
+			onShowCc={() => setShowCc(true)}
+			onShowBcc={() => setShowBcc(true)}
+		/>
 	);
 };
 
@@ -356,6 +330,7 @@ export const ComposeForm = ({
 		setInitialHtml("");
 		setInitialText("");
 		setBodyMode("rich");
+		setDraftLanguage(undefined);
 		setBody(EMPTY_RICH_TEXT);
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
@@ -372,6 +347,11 @@ export const ComposeForm = ({
 	);
 	const [initialText, setInitialText] = useState(signature.plainText);
 	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
+	// What the body is tagged with on the way out. The composer owns the value —
+	// it is the surface that has the text detection reads — and reports it here,
+	// because this is where a draft is written and where a send is assembled.
+	const [composeLanguage, setComposeLanguage] = useState("en");
+	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
 		html: buildInitialHtml(signature.plainText),
 		text: signature.plainText,
@@ -414,9 +394,15 @@ export const ComposeForm = ({
 		// is read off that rather than a field of its own. A rich draft comes back
 		// from its HTML — reading its text into one paragraph, as this did, brought
 		// a formatted message back flattened.
-		const loadedHtml = draftData.htmlBody ?? "";
+		// A rich draft carries its language in the `<div lang>` it was stored
+		// under; the editor reopens on what is inside that, so a reopened draft
+		// does not gain a second wrapper on its next autosave. A plain draft has
+		// no HTML to have carried one, and comes back on the account default.
+		const stored = unwrapLanguage(draftData.htmlBody ?? "");
+		const loadedHtml = stored.html;
 		const loadedText = draftData.textBody ?? "";
 		setBodyMode(modeOfDraft(draftData.htmlBody));
+		setDraftLanguage(stored.language ?? undefined);
 		setInitialHtml(loadedHtml);
 		setInitialText(loadedText);
 		setBody({ html: loadedHtml, text: loadedText, formatting: [] });
@@ -525,6 +511,17 @@ export const ComposeForm = ({
 		? accountIsMissingSmtp(selectedAccount)
 		: false;
 
+	// An account that has never been to the language setting falls back to what
+	// the browser already knows the user reads, which is an ordered answer.
+	const configured = selectedAccount?.composeLanguages;
+	const accountLanguages = useMemo(
+		() =>
+			configured && configured.length > 0
+				? configured
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
 	// The action bar refuses a second press while one is in flight, but the
 	// editor's own Cmd+Enter goes straight to `handleSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
@@ -545,7 +542,11 @@ export const ComposeForm = ({
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
 
-		const { htmlBody, textBody } = outgoingBody(bodyMode, body);
+		const { htmlBody, textBody } = outgoingBody(
+			bodyMode,
+			body,
+			composeLanguage,
+		);
 
 		saveDraft({
 			accountId: selectedAccountId,
@@ -568,6 +569,7 @@ export const ComposeForm = ({
 		subject,
 		body,
 		bodyMode,
+		composeLanguage,
 		saveDraft,
 	]);
 
@@ -585,7 +587,11 @@ export const ComposeForm = ({
 					? getReferences(sourceMessage)
 					: {};
 
-			const { htmlBody, textBody } = outgoingBody(bodyMode, body);
+			const { htmlBody, textBody } = outgoingBody(
+				bodyMode,
+				body,
+				composeLanguage,
+			);
 			const createdThisAttempt = !outboxMessageId;
 
 			// The debounce dropped above may have been holding the last two seconds
@@ -653,6 +659,7 @@ export const ComposeForm = ({
 		subject,
 		body,
 		bodyMode,
+		composeLanguage,
 		mode,
 		sourceMessage,
 		outboxMessageId,
@@ -690,7 +697,7 @@ export const ComposeForm = ({
 				) : undefined
 			}
 			header={
-				<ComposeHeader
+				<WiredComposeHeader
 					selectedAccountId={selectedAccountId}
 					onAccountChange={handleAccountChange}
 					toAddresses={toAddresses}
@@ -746,6 +753,9 @@ export const ComposeForm = ({
 					onSubmit={handleSend}
 					autoFocus={mode === "new"}
 					onConversionError={pushError}
+					languages={accountLanguages}
+					initialLanguage={draftLanguage}
+					onLanguageChange={setComposeLanguage}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/ComposeSmtpMissingBanner.tsx

@@ -1,49 +1,24 @@
+import { ComposeSmtpMissingBanner as Banner } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { AlertTriangle, ArrowRight } from "lucide-react";
 
 interface ComposeSmtpMissingBannerProps {
 	accountId: string;
 }
 
-/**
- * Non-dismissible banner shown above the compose form when the selected
- * account has no SMTP host configured. Pairs with disabling the Send
- * button so the user has a single, factual explanation of why sending
- * is blocked. See issue #196.
- */
+/** Sends "Configure SMTP" to the account's settings panel. */
 export const ComposeSmtpMissingBanner = ({
 	accountId,
 }: ComposeSmtpMissingBannerProps) => {
 	const navigate = useNavigate();
 
 	return (
-		<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={() => {
-						navigate({
-							to: "/settings/accounts",
-							search: { editAccountId: accountId, focusSmtp: true },
-						});
-					}}
-					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>
+		<Banner
+			onConfigure={() => {
+				navigate({
+					to: "/settings/accounts",
+					search: { editAccountId: accountId, focusSmtp: true },
+				});
+			}}
+		/>
 	);
 };

package/src/components/compose/MobileComposeSheet.tsx

@@ -1,8 +1,8 @@
 import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ConfirmDialog } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useRef, useState } from "react";
 import { Drawer } from "vaul";
-import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { ComposeForm } from "./ComposeForm";
 import { useCompose } from "./ComposeProvider";

package/src/components/mail/MessageList.tsx

@@ -1,6 +1,7 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Banner,
+	ConfirmDialog,
 	type Density,
 	deriveIsMultiSelectMode,
 	type MessageListFilter,
@@ -17,7 +18,6 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { Search } from "lucide-react";
 import type { RefObject } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useJunkMailbox } from "@/hooks/useArchiveMailbox";