@remit/web-client 0.0.144 → 0.0.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "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": {

package/src/components/compose/ComposeForm.tsx

@@ -10,8 +10,10 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import {
 	ComposeActionBar,
+	ComposeBodySkeleton,
 	ComposeFormShell,
 	ComposeHeader,
+	type ComposeSendState,
 	ComposeSubjectField,
 	composeHeaderSummary,
 	defaultComposeLanguages,
@@ -19,6 +21,7 @@ import {
 	modeOfDraft,
 	QuotedText,
 	type RichTextValue,
+	SMTP_MISSING_MESSAGE,
 	sanitizeQuotedHtml,
 	unwrapLanguage,
 	wrapWithLanguage,
@@ -51,13 +54,6 @@ const LazyComposeBody = lazy(() =>
 	import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })),
 );
 
-const ComposeBodyFallback = () => (
-	<div className="min-h-[120px] px-3 py-2">
-		<div className="h-8 mb-2 rounded bg-surface-sunken animate-pulse" />
-		<div className="min-h-[80px] rounded bg-surface-sunken/50 animate-pulse" />
-	</div>
-);
-
 import { useIsDesktop } from "../../hooks/useMediaQuery.js";
 import { useVisualViewport } from "../../hooks/useVisualViewport.js";
 import type { ComposeMode } from "./ComposeProvider";
@@ -183,6 +179,11 @@ const outgoingBody = (
 				: undefined,
 });
 
+type SendReadiness =
+	| { status: "sending" }
+	| { status: "blocked"; reason: string }
+	| { status: "ready"; accountId: string };
+
 const isFormEmpty = (
 	toAddresses: AddressEntry[],
 	ccAddresses: AddressEntry[],
@@ -201,6 +202,7 @@ const isFormEmpty = (
 // ---------------------------------------------------------------------------
 
 interface WiredComposeHeaderProps {
+	documentGeneration: number;
 	selectedAccountId?: string;
 	onAccountChange: (account: RemitImapAccountResponse) => void;
 	toAddresses: AddressEntry[];
@@ -218,6 +220,7 @@ interface WiredComposeHeaderProps {
 }
 
 const WiredComposeHeader = ({
+	documentGeneration,
 	selectedAccountId,
 	onAccountChange,
 	toAddresses,
@@ -235,10 +238,17 @@ const WiredComposeHeader = ({
 }: WiredComposeHeaderProps) => {
 	const isDesktop = useIsDesktop();
 	const { isKeyboardOpen } = useVisualViewport();
+	// What the user asked to see belongs to the document being written, not to
+	// the keyboard. Tying it to the keyboard collapsed the rows again the moment
+	// one came back up — over the recipient field being typed into, which took
+	// the keyboard down with it and started the cycle over.
+	const [expandedFor, setExpandedFor] = useState<number | undefined>(undefined);
+	const expanded = expandedFor === documentGeneration;
 
 	return (
 		<ComposeHeader
-			collapsed={!isDesktop && isKeyboardOpen}
+			collapsed={!isDesktop && isKeyboardOpen && !expanded}
+			onExpand={() => setExpandedFor(documentGeneration)}
 			summary={composeHeaderSummary({
 				to: toAddresses,
 				cc: ccAddresses,
@@ -305,6 +315,7 @@ export const ComposeForm = ({
 		account?.accountId,
 	);
 	const [draftLoaded, setDraftLoaded] = useState(false);
+	const smtpConfigureRef = useRef<HTMLButtonElement>(null);
 	const prevOutboxMessageIdRef = useRef<string | undefined>(outboxMessageId);
 
 	// Reset form when the user switches to a different draft (outboxMessageId
@@ -523,14 +534,33 @@ export const ComposeForm = ({
 	);
 
 	// 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
+	// editor's own Cmd+Enter goes straight to `attemptSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
 	const sendInFlightRef = useRef(false);
 	const [isSending, setIsSending] = useState(false);
-	const canSend =
-		toAddresses.length > 0 &&
-		!!selectedAccountId &&
-		!selectedAccountMissingSmtp;
+	// Every refusal carries the sentence that explains it. Send is never a
+	// no-op: the state it reads has no way to be blocked without a reason. A
+	// ready state carries the account the message goes out from, so the send
+	// path has no condition of its own left to refuse on in silence.
+	const sendReadiness = useMemo<SendReadiness>(() => {
+		if (isSending) return { status: "sending" };
+		if (!selectedAccountId) {
+			return { status: "blocked", reason: "Choose an account to send from." };
+		}
+		if (selectedAccountMissingSmtp) {
+			return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
+		}
+		if (toAddresses.length === 0) {
+			return { status: "blocked", reason: "Add at least one recipient." };
+		}
+		return { status: "ready", accountId: selectedAccountId };
+	}, [
+		isSending,
+		selectedAccountId,
+		selectedAccountMissingSmtp,
+		toAddresses.length,
+	]);
+	const sendState: ComposeSendState = sendReadiness;
 
 	useEffect(() => {
 		if (!selectedAccountId) return;
@@ -573,103 +603,106 @@ export const ComposeForm = ({
 		saveDraft,
 	]);
 
-	const handleSend = useCallback(async () => {
-		if (sendInFlightRef.current) return;
-		if (!selectedAccountId || toAddresses.length === 0) return;
-
-		sendInFlightRef.current = true;
-		setIsSending(true);
-		try {
-			stopAutoSave();
-
-			const replyData =
-				sourceMessage && (mode === "reply" || mode === "reply_all")
-					? getReferences(sourceMessage)
-					: {};
-
-			const { htmlBody, textBody } = outgoingBody(
-				bodyMode,
-				body,
-				composeLanguage,
-			);
-			const createdThisAttempt = !outboxMessageId;
-
-			// The debounce dropped above may have been holding the last two seconds
-			// of typing, and an existing entry would otherwise go out as the server
-			// last saw it (#674). What is on screen is written first, and a write
-			// that fails stops the send rather than transmitting the older copy.
-			const flushed = await saveImmediately({
-				accountId: selectedAccountId,
-				toAddresses: toAddresses.map((a) => a.email),
-				ccAddresses:
-					ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
-				bccAddresses:
-					bccAddresses.length > 0
-						? bccAddresses.map((a) => a.email)
-						: undefined,
-				subject: subject || undefined,
-				textBody,
-				htmlBody,
-				...replyData,
-			});
-
-			if (flushed.outcome === "failed") {
-				pushError({
-					title: "Couldn't send message",
-					detail:
-						formatErrorDetail(flushed.error) ??
-						"Saving the message failed, so nothing was sent. Try again.",
-					error: flushed.error,
+	const handleSend = useCallback(
+		async (accountId: string) => {
+			if (sendInFlightRef.current) return;
+
+			sendInFlightRef.current = true;
+			setIsSending(true);
+			try {
+				stopAutoSave();
+
+				const replyData =
+					sourceMessage && (mode === "reply" || mode === "reply_all")
+						? getReferences(sourceMessage)
+						: {};
+
+				const { htmlBody, textBody } = outgoingBody(
+					bodyMode,
+					body,
+					composeLanguage,
+				);
+				const createdThisAttempt = !outboxMessageId;
+
+				// The debounce dropped above may have been holding the last two seconds
+				// of typing, and an existing entry would otherwise go out as the server
+				// last saw it (#674). What is on screen is written first, and a write
+				// that fails stops the send rather than transmitting the older copy.
+				const flushed = await saveImmediately({
+					accountId,
+					toAddresses: toAddresses.map((a) => a.email),
+					ccAddresses:
+						ccAddresses.length > 0
+							? ccAddresses.map((a) => a.email)
+							: undefined,
+					bccAddresses:
+						bccAddresses.length > 0
+							? bccAddresses.map((a) => a.email)
+							: undefined,
+					subject: subject || undefined,
+					textBody,
+					htmlBody,
+					...replyData,
 				});
-				return;
-			}
 
-			const messageId = flushed.outboxMessageId;
-
-			const sent = await sendMutation
-				.mutateAsync({
-					path: { outboxMessageId: messageId },
-				})
-				.catch((error: unknown) => {
+				if (flushed.outcome === "failed") {
 					pushError({
 						title: "Couldn't send message",
 						detail:
-							formatErrorDetail(error) ??
-							(createdThisAttempt
-								? "The draft was saved but the send request failed. Try again from the Outbox."
-								: "The send request failed. Try again."),
-						error,
+							formatErrorDetail(flushed.error) ??
+							"Saving the message failed, so nothing was sent. Try again.",
+						error: flushed.error,
 					});
-					return null;
-				});
-			if (sent === null) return;
-
-			stopAutoSave(messageId);
-			startSendPolling(messageId);
-			onClose();
-		} finally {
-			sendInFlightRef.current = false;
-			setIsSending(false);
-		}
-	}, [
-		selectedAccountId,
-		toAddresses,
-		ccAddresses,
-		bccAddresses,
-		subject,
-		body,
-		bodyMode,
-		composeLanguage,
-		mode,
-		sourceMessage,
-		outboxMessageId,
-		saveImmediately,
-		sendMutation,
-		stopAutoSave,
-		startSendPolling,
-		pushError,
-		onClose,
-	]);
+					return;
+				}
+
+				const messageId = flushed.outboxMessageId;
+
+				const sent = await sendMutation
+					.mutateAsync({
+						path: { outboxMessageId: messageId },
+					})
+					.catch((error: unknown) => {
+						pushError({
+							title: "Couldn't send message",
+							detail:
+								formatErrorDetail(error) ??
+								(createdThisAttempt
+									? "The draft was saved but the send request failed. Try again from the Outbox."
+									: "The send request failed. Try again."),
+							error,
+						});
+						return null;
+					});
+				if (sent === null) return;
+
+				stopAutoSave(messageId);
+				startSendPolling(messageId);
+				onClose();
+			} finally {
+				sendInFlightRef.current = false;
+				setIsSending(false);
+			}
+		},
+		[
+			toAddresses,
+			ccAddresses,
+			bccAddresses,
+			subject,
+			body,
+			bodyMode,
+			composeLanguage,
+			mode,
+			sourceMessage,
+			outboxMessageId,
+			saveImmediately,
+			sendMutation,
+			stopAutoSave,
+			startSendPolling,
+			pushError,
+			onClose,
+		],
+	);
 
 	const handleDiscard = useCallback(() => {
 		stopAutoSave(outboxMessageId);
@@ -681,6 +714,27 @@ export const ComposeForm = ({
 		onClose();
 	}, [stopAutoSave, outboxMessageId, deleteMutation, onClose]);
 
+	// The refusal is announced first and moved to second. Focus alone carried
+	// nothing to a screen reader — the banner above was already on screen, so
+	// the press read as the button doing nothing.
+	const reportBlocked = useCallback(
+		(reason: string) => {
+			pushError({ title: "Can't send yet", detail: reason });
+			if (reason !== SMTP_MISSING_MESSAGE) return;
+			smtpConfigureRef.current?.focus();
+		},
+		[pushError],
+	);
+
+	const attemptSend = useCallback(() => {
+		if (sendReadiness.status === "sending") return;
+		if (sendReadiness.status === "blocked") {
+			reportBlocked(sendReadiness.reason);
+			return;
+		}
+		void handleSend(sendReadiness.accountId);
+	}, [sendReadiness, reportBlocked, handleSend]);
+
 	const handleAccountChange = useCallback(
 		(acct: RemitImapAccountResponse) => {
 			setSelectedAccountId(acct.accountId);
@@ -693,11 +747,15 @@ export const ComposeForm = ({
 		<ComposeFormShell
 			banner={
 				selectedAccount && selectedAccountMissingSmtp ? (
-					<ComposeSmtpMissingBanner accountId={selectedAccount.accountId} />
+					<ComposeSmtpMissingBanner
+						accountId={selectedAccount.accountId}
+						configureRef={smtpConfigureRef}
+					/>
 				) : undefined
 			}
 			header={
 				<WiredComposeHeader
+					documentGeneration={documentGeneration}
 					selectedAccountId={selectedAccountId}
 					onAccountChange={handleAccountChange}
 					toAddresses={toAddresses}
@@ -725,24 +783,15 @@ export const ComposeForm = ({
 			}
 			actionBar={
 				<ComposeActionBar
-					onSend={handleSend}
+					send={sendState}
+					onSend={attemptSend}
+					onBlocked={reportBlocked}
 					onDiscard={handleDiscard}
-					sending={isSending}
-					canSend={canSend}
 					saveStatus={saveStatus}
-					unavailableReason={
-						selectedAccountMissingSmtp ? "SMTP not configured" : undefined
-					}
-					onUnavailable={(reason) =>
-						pushError({
-							title: "Can't send yet",
-							detail: reason,
-						})
-					}
 				/>
 			}
 		>
-			<Suspense fallback={<ComposeBodyFallback />}>
+			<Suspense fallback={<ComposeBodySkeleton />}>
 				<LazyComposeBody
 					key={documentGeneration}
 					mode={bodyMode}
@@ -750,8 +799,8 @@ export const ComposeForm = ({
 					initialHtml={initialHtml}
 					initialText={initialText}
 					onChange={setBody}
-					onSubmit={handleSend}
-					autoFocus={mode === "new"}
+					onSubmit={attemptSend}
+					initialCaret={mode === "new" ? "start" : undefined}
 					onConversionError={pushError}
 					languages={accountLanguages}
 					initialLanguage={draftLanguage}

package/src/components/compose/ComposeSmtpMissingBanner.tsx

@@ -1,18 +1,22 @@
 import { ComposeSmtpMissingBanner as Banner } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
+import type { Ref } from "react";
 
 interface ComposeSmtpMissingBannerProps {
 	accountId: string;
+	configureRef?: Ref<HTMLButtonElement>;
 }
 
 /** Sends "Configure SMTP" to the account's settings panel. */
 export const ComposeSmtpMissingBanner = ({
 	accountId,
+	configureRef,
 }: ComposeSmtpMissingBannerProps) => {
 	const navigate = useNavigate();
 
 	return (
 		<Banner
+			configureRef={configureRef}
 			onConfigure={() => {
 				navigate({
 					to: "/settings/accounts",

package/src/components/compose/mobile-header-stays-expanded.render.test.ts

@@ -0,0 +1,182 @@
+/**
+ * PR #701 review: the phone header collapsed itself again the moment the
+ * software keyboard came back up.
+ *
+ * Tapping the collapsed line blurs whatever had focus, so the keyboard goes
+ * down and the rows appear — but only because the keyboard is down. Reaching
+ * for To puts it back up, and the header that had reset itself on the way down
+ * collapses over the field being typed into: the input unmounts mid-word, the
+ * keyboard drops with it, and the rows come back to start the loop again.
+ *
+ * What is revealed belongs to the document being written, not to the keyboard,
+ * so the keyboard going up and down over it changes nothing.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { act, createElement, useEffect } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const PHONE = {
+	viewportWidth: 390,
+	orientation: "portrait",
+	pointer: "coarse",
+} as const;
+/** Shrinkage the hook reads as a software keyboard, with room to spare. */
+const KEYBOARD_HEIGHT = 300;
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+interface VisualViewportStub {
+	height: number;
+	addEventListener: (type: string, listener: () => void) => void;
+	removeEventListener: (type: string, listener: () => void) => void;
+}
+
+const listeners = new Set<() => void>();
+
+const viewport: VisualViewportStub = {
+	height: 0,
+	addEventListener: (_type, listener) => {
+		listeners.add(listener);
+	},
+	removeEventListener: (_type, listener) => {
+		listeners.delete(listener);
+	},
+};
+
+const setKeyboard = (open: boolean): void => {
+	const full = globalThis.window.innerHeight;
+	viewport.height = open ? full - KEYBOARD_HEIGHT : full;
+	act(() => {
+		for (const listener of [...listeners]) listener();
+	});
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	listeners.clear();
+	Reflect.deleteProperty(globalThis.window, "visualViewport");
+});
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+const Opened = () => {
+	const { state, openCompose } = useCompose();
+
+	useEffect(() => {
+		openCompose({ mode: "new", account });
+	}, [openCompose]);
+
+	if (!state.isOpen) return null;
+
+	return createElement(ComposeForm, {
+		mode: "new",
+		account,
+		onClose: () => {},
+	});
+};
+
+const mount = async (): Promise<void> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		return { items: [] };
+	});
+
+	Object.defineProperty(globalThis.window, "visualViewport", {
+		configurable: true,
+		value: viewport,
+	});
+	viewport.height = globalThis.window.innerHeight - KEYBOARD_HEIGHT;
+
+	harness = createDomHarness(PHONE);
+	harness.renderApp(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(
+				ComposeProvider,
+				null,
+				createElement(Opened, null),
+			),
+		}),
+	);
+	await harness.flush();
+	await harness.wait(50);
+};
+
+const collapsedBar = (): HTMLElement | null =>
+	harness?.query('[data-testid="compose-header-collapsed"]') ?? null;
+
+const recipientInput = (): HTMLElement | null =>
+	harness?.query("#address-field-To") ?? null;
+
+describe("the phone compose header and the software keyboard", () => {
+	it("keeps the recipient rows once they are asked for", async () => {
+		await mount();
+
+		const collapsed = collapsedBar();
+		assert.ok(
+			collapsed,
+			"the header stands on one line while the keyboard is up",
+		);
+		assert.equal(recipientInput(), null);
+
+		harness?.click(collapsed);
+		await harness?.flush();
+		assert.ok(recipientInput(), "the rows came back on the tap");
+
+		// The tap took focus off the body, so the keyboard goes down; reaching for
+		// To puts it straight back up.
+		setKeyboard(false);
+		await harness?.flush();
+		setKeyboard(true);
+		await harness?.flush();
+
+		assert.ok(
+			recipientInput(),
+			"the recipient field survived the keyboard coming back",
+		);
+		assert.equal(
+			collapsedBar(),
+			null,
+			"the header did not collapse over the field being typed into",
+		);
+	});
+});