@remit/web-client 0.0.166 → 0.0.167

package/package.json

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

@@ -18,7 +18,6 @@ import {
 	ComposeSubjectField,
 	composeHeaderSummary,
 	defaultComposeLanguages,
-	EMPTY_RICH_TEXT,
 	modeOfDraft,
 	QuotedText,
 	type RichTextValue,
@@ -66,6 +65,15 @@ interface ComposeFormProps {
 	mode: ComposeMode;
 	account?: RemitImapAccountResponse;
 	sourceMessage?: RemitImapDescribeMessageResponse;
+	/**
+	 * The draft this composer writes to. Absent until there is one, and owned by
+	 * whoever mounted the form — the address for the compose route, the inline
+	 * composer's own state for a reply. A composer that read it from somewhere
+	 * shared would open on the last draft any other composer touched.
+	 */
+	outboxMessageId?: string;
+	/** The draft the first autosave created, for the owner to record. */
+	onDraftCreated: (outboxMessageId: string) => void;
 	onClose: () => void;
 	onAccountChange?: (account: RemitImapAccountResponse) => void;
 	/**
@@ -94,6 +102,18 @@ const buildInitialHtml = (signaturePlainText: string): string => {
 	return `<p></p><p>-- </p>${textToHtml(signaturePlainText)}`;
 };
 
+/**
+ * The document a new message opens on. One definition, because a form that
+ * starts a second message without remounting has to open on the same thing the
+ * first one did.
+ */
+const freshDocument = (
+	signaturePlainText: string,
+): { html: string; text: string } => ({
+	html: buildInitialHtml(signaturePlainText),
+	text: signaturePlainText,
+});
+
 const buildReplySubject = (subject?: string): string => {
 	if (!subject) return "Re: ";
 	if (/^re:\s/i.test(subject)) return subject;
@@ -306,13 +326,14 @@ export const ComposeForm = ({
 	mode,
 	account,
 	sourceMessage,
+	outboxMessageId,
+	onDraftCreated,
 	onClose,
 	onAccountChange,
 	layout = "fill",
 }: ComposeFormProps) => {
-	const { state, setOutboxMessageId, startSendPolling } = useCompose();
+	const { startSendPolling } = useCompose();
 	const { pushError } = useErrorBanners();
-	const { outboxMessageId } = state;
 
 	const [toAddresses, setToAddresses] = useState<AddressEntry[]>([]);
 	const [ccAddresses, setCcAddresses] = useState<AddressEntry[]>([]);
@@ -324,46 +345,67 @@ export const ComposeForm = ({
 		account?.accountId,
 	);
 	const [draftLoaded, setDraftLoaded] = useState(false);
+	/**
+	 * The document the fields on screen belong to. It trails `outboxMessageId`
+	 * for one commit whenever the document changes, and autosave has to sit that
+	 * commit out — the fields still hold the message that has just been left.
+	 */
+	const [openDocumentId, setOpenDocumentId] = useState(outboxMessageId);
 	const smtpConfigureRef = useRef<HTMLButtonElement>(null);
 	const prevOutboxMessageIdRef = useRef<string | undefined>(outboxMessageId);
 
-	// Reset form when the user switches to a different draft (outboxMessageId
-	// changes while compose is already open). Without this, the previous draft's
-	// fields stay visible and the new draft never loads because draftLoaded
-	// remains true from the prior session (#536).
+	// The document this form is on changed under it, so it starts again: another
+	// draft, or no draft at all. Without this the previous one's fields stay on
+	// screen and the new one never loads, because `draftLoaded` is still true
+	// from the session before (#536).
 	//
-	// A first autosave also sets the id, from nothing to the draft it just
-	// created. That is this session's own content arriving back, not a switch to
-	// somebody else's document, and blanking the form there would throw away
-	// whatever is being typed.
+	// "No draft at all" is Compose pressed while already composing — the address
+	// drops the draft segment and the same route stays matched, so nothing
+	// remounts the form. Leaving it alone there showed the old message under an
+	// address that said new one, and the next autosave took the create branch
+	// and wrote a second draft holding the first one's content.
+	//
+	// The one change that is not a different document is the first autosave
+	// adopting the id it just created. That is this session's own content coming
+	// back, and blanking the form there would throw away what is being typed.
 	useEffect(() => {
 		const previous = prevOutboxMessageIdRef.current;
 		if (previous === outboxMessageId) return;
 		prevOutboxMessageIdRef.current = outboxMessageId;
-		if (!outboxMessageId || previous === undefined) return;
+		if (previous === undefined) return;
+		// A draft brings its own body along in a moment; a new message opens on
+		// the signature, the same document a fresh mount would have started on.
+		const opening = outboxMessageId
+			? { html: "", text: "" }
+			: freshDocument(signatureRef.current);
 		setToAddresses([]);
 		setCcAddresses([]);
 		setBccAddresses([]);
 		setSubject("");
 		setShowCc(false);
 		setShowBcc(false);
-		setInitialHtml("");
-		setInitialText("");
+		setInitialHtml(opening.html);
+		setInitialText(opening.text);
 		setBodyMode("rich");
 		setDraftLanguage(undefined);
-		setBody(EMPTY_RICH_TEXT);
+		setBody({ ...opening, formatting: [] });
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
+		setOpenDocumentId(outboxMessageId);
 	}, [outboxMessageId]);
 
 	const { signature } = useSignature(selectedAccountId);
+	// Read when a new message starts, never depended on: a signature arriving is
+	// not a reason to reopen the document somebody is typing in.
+	const signatureRef = useRef(signature.plainText);
+	signatureRef.current = signature.plainText;
 	// The editor reads its document once, so this is the document it opens on,
 	// not the live value, and it is remounted when the generation changes. Only
 	// loading a different document bumps that — remounting mid-compose would take
 	// the caret, the focus and the undo history with it.
 	const [documentGeneration, setDocumentGeneration] = useState(0);
-	const [initialHtml, setInitialHtml] = useState(() =>
-		buildInitialHtml(signature.plainText),
+	const [initialHtml, setInitialHtml] = useState(
+		() => freshDocument(signature.plainText).html,
 	);
 	const [initialText, setInitialText] = useState(signature.plainText);
 	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
@@ -373,8 +415,7 @@ export const ComposeForm = ({
 	const [composeLanguage, setComposeLanguage] = useState("en");
 	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
-		html: buildInitialHtml(signature.plainText),
-		text: signature.plainText,
+		...freshDocument(signature.plainText),
 		formatting: [],
 	}));
 
@@ -475,9 +516,14 @@ export const ComposeForm = ({
 	const adoptCreatedDraft = useCallback(
 		(createdId: string) => {
 			setDraftLoaded(true);
-			setOutboxMessageId(createdId);
+			// What is on screen is what was just written, so the fields belong to
+			// the new draft the moment it exists — before the id has travelled out
+			// through the address and back. Waiting for that would hold the next
+			// autosave, and the last thing typed before a pause would not be saved.
+			setOpenDocumentId(createdId);
+			onDraftCreated(createdId);
 		},
-		[setOutboxMessageId],
+		[onDraftCreated],
 	);
 
 	const { saveStatus, saveError, saveDraft, saveImmediately, stopAutoSave } =
@@ -578,10 +624,15 @@ export const ComposeForm = ({
 
 	useEffect(() => {
 		if (!selectedAccountId) return;
-		// Don't autosave while a draft is still being loaded. The fields are mid-
-		// population when opening an existing draft, or have just been blanked for
-		// a draft switch (#535/#536). Saving now would either write the previous
-		// draft's content to the new outboxMessageId or create a spurious duplicate.
+		// Don't autosave a document the fields are no longer on. They trail the
+		// address by a commit whenever it changes, so writing here sends the
+		// message just left to whatever the address now names — the previous
+		// draft's content onto the next draft, or, with no draft named at all, a
+		// spurious second one holding it (#535/#536).
+		if (openDocumentId !== undefined && openDocumentId !== outboxMessageId)
+			return;
+		// Nor one still arriving: opening an existing draft leaves the fields
+		// mid-population until the read lands.
 		if (outboxMessageId && !draftLoaded) return;
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
@@ -606,6 +657,7 @@ export const ComposeForm = ({
 	}, [
 		selectedAccountId,
 		outboxMessageId,
+		openDocumentId,
 		draftLoaded,
 		toAddresses,
 		ccAddresses,

package/src/components/compose/ComposeProvider.tsx

@@ -1,14 +1,8 @@
 import {
-	configOperationsGetConfigOptions,
 	outboxDetailOperationsGetOutboxMessageOptions,
 	outboxOperationsListOutboxMessagesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type {
-	RemitImapAccountResponse,
-	RemitImapDescribeMessageResponse,
-} from "@remit/api-http-client/types.gen.ts";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import {
 	createContext,
 	useCallback,
@@ -18,27 +12,19 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
-import { useComposeTarget } from "@/hooks/useComposeTargetMailbox";
-import { hostsComposeSurface } from "@/lib/compose-routes";
-import { locationOpensDetail } from "@/lib/mail-route";
-export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
 
-export interface ComposeState {
-	isOpen: boolean;
-	mode: ComposeMode;
-	account?: RemitImapAccountResponse;
-	sourceMessage?: RemitImapDescribeMessageResponse;
-	threadId?: string;
-	mailboxId?: string;
-	outboxMessageId?: string;
-}
+export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
 
+/**
+ * A message on its way out outlives the composer that wrote it: the surface
+ * closes on Send and the outbox row is still queued. So the watch sits above
+ * every composer, and is the only thing here.
+ *
+ * Which draft is being written, and whether a composer is on screen at all, are
+ * the address's answers — `useComposeDraftId` and `useIsComposing`. A second
+ * copy here is what let a reply's draft turn up in the next new message.
+ */
 interface ComposeContextValue {
-	state: ComposeState;
-	openCompose: (params: Omit<ComposeState, "isOpen">) => void;
-	closeCompose: () => void;
-	setOutboxMessageId: (id: string) => void;
 	startSendPolling: (outboxMessageId: string) => void;
 }
 
@@ -46,11 +32,6 @@ const ComposeContext = createContext<ComposeContextValue | undefined>(
 	undefined,
 );
 
-const INITIAL_STATE: ComposeState = {
-	isOpen: false,
-	mode: "new",
-};
-
 const POLL_INTERVAL_MS = 2000;
 const MAX_POLL_DURATION_MS = 60_000;
 
@@ -59,26 +40,11 @@ export const ComposeProvider = ({
 }: {
 	children: React.ReactNode;
 }) => {
-	const [state, setState] = useState<ComposeState>(INITIAL_STATE);
 	const [pollingMessageId, setPollingMessageId] = useState<
 		string | undefined
 	>();
 	const startedAtRef = useRef(0);
 	const queryClient = useQueryClient();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const routeParams = useParams({ strict: false, shouldThrow: false });
-	const { pushError } = useErrorBanners();
-	// Compose is a mail action, so its target only has to be known under `/mail`.
-	// Resolving it from the root otherwise costs `/settings` and `/onboarding` a
-	// config fetch plus a folder list per account for a button they never show.
-	const underMail = location.pathname.startsWith("/mail");
-	const { data: config } = useQuery({
-		...configOperationsGetConfigOptions(),
-		staleTime: Infinity,
-		enabled: underMail,
-	});
-	const target = useComposeTarget(underMail ? (config?.accounts ?? []) : []);
 
 	const { data: polledMessage } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
@@ -111,89 +77,12 @@ export const ComposeProvider = ({
 		}
 	}, [polledMessage, pollingMessageId, queryClient]);
 
-	// Opening compose also puts the surface on screen: only a mailbox route
-	// mounts `FullCompose`, and only with no thread in the pane it takes over.
-	const openCompose = useCallback(
-		(params: Omit<ComposeState, "isOpen">) => {
-			// Every list names its open conversation in the path, so leaving one is a
-			// navigation up to the list.
-			const threadMailboxId = locationOpensDetail(location.pathname)
-				? routeParams?.mailboxId
-				: undefined;
-			if (!hostsComposeSurface(location.pathname)) {
-				if (target.status === "loading") {
-					pushError({
-						severity: "info",
-						title: "Not ready to write yet",
-						detail:
-							"Your folders are still loading. Try Compose again in a moment.",
-					});
-					return;
-				}
-				if (target.status === "none") {
-					pushError({
-						title: "Nowhere to write from",
-						detail:
-							"No account has a folder to open the message in. Check the account's folders in Settings, then try again.",
-					});
-					return;
-				}
-				setState({ ...params, isOpen: true });
-				navigate({
-					to: "/mail/$mailboxId",
-					params: { mailboxId: target.mailboxId },
-				});
-				return;
-			}
-			setState({ ...params, isOpen: true });
-			if (!threadMailboxId) return;
-			// A push, so Back reopens the message.
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId: threadMailboxId },
-				search: (prev) => prev,
-			});
-		},
-		[navigate, location.pathname, routeParams?.mailboxId, target, pushError],
-	);
-
-	const closeCompose = useCallback(() => {
-		setState(INITIAL_STATE);
-	}, []);
-
-	// Leaving the routes that mount the surface closes it, so nothing is left
-	// open behind a view that cannot show it — which is how it used to reappear
-	// unannounced on the next mailbox. Only a *change* of route counts: opening
-	// compose navigates, and on the frame before that navigation lands the
-	// pathname is still the one compose was started from.
-	const previousPathnameRef = useRef(location.pathname);
-	useEffect(() => {
-		const previous = previousPathnameRef.current;
-		previousPathnameRef.current = location.pathname;
-		if (location.pathname === previous) return;
-		if (hostsComposeSurface(location.pathname)) return;
-		setState((current) => (current.isOpen ? INITIAL_STATE : current));
-	}, [location.pathname]);
-
-	const setOutboxMessageId = useCallback((id: string) => {
-		setState((prev) => ({ ...prev, outboxMessageId: id }));
-	}, []);
-
 	const startSendPolling = useCallback((outboxMessageId: string) => {
 		startedAtRef.current = Date.now();
 		setPollingMessageId(outboxMessageId);
 	}, []);
 
-	const value = useMemo(
-		() => ({
-			state,
-			openCompose,
-			closeCompose,
-			setOutboxMessageId,
-			startSendPolling,
-		}),
-		[state, openCompose, closeCompose, setOutboxMessageId, startSendPolling],
-	);
+	const value = useMemo(() => ({ startSendPolling }), [startSendPolling]);
 
 	return (
 		<ComposeContext.Provider value={value}>{children}</ComposeContext.Provider>

package/src/components/compose/FullCompose.tsx

@@ -2,20 +2,26 @@ import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tansta
 import { useQuery } from "@tanstack/react-query";
 import { X } from "lucide-react";
 import { ErrorState } from "@/components/ui/ErrorState";
+import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
+import {
+	useAdoptComposeDraft,
+	useCloseCompose,
+	useComposeDraftId,
+} from "@/routing";
 import { ComposeForm } from "./ComposeForm";
-import { useCompose } from "./ComposeProvider";
+import { composeSurfaceTitle } from "./compose-title";
 import { MobileComposeSheet } from "./MobileComposeSheet";
 
-const MODE_LABELS: Record<string, string> = {
-	reply: "Reply",
-	reply_all: "Reply All",
-	forward: "Forward",
-	new: "New Message",
-};
-
+/**
+ * The compose surface, mounted by the compose route and by nothing else. It is
+ * on screen because the address says so, and writing to the draft the address
+ * names — so there is no flag to consult and nothing to be out of step with.
+ */
 export const FullCompose = () => {
-	const { state, closeCompose } = useCompose();
+	const outboxMessageId = useComposeDraftId();
+	const adoptCreatedDraft = useAdoptComposeDraft();
+	const closeCompose = useCloseCompose();
 	const isDesktop = useIsDesktop();
 	const {
 		isError: isConfigError,
@@ -26,16 +32,18 @@ export const FullCompose = () => {
 		staleTime: Infinity,
 	});
 
-	if (!isDesktop) return <MobileComposeSheet />;
-
-	if (!state.isOpen) return null;
+	useKeyboardNavigation({
+		bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
+	});
 
-	const title = MODE_LABELS[state.mode] ?? "New Message";
+	if (!isDesktop) return <MobileComposeSheet />;
 
 	const header = (
 		<header className="flex items-center justify-between gap-2 px-4 py-3 border-b border-line shrink-0">
 			<div className="flex items-center gap-2 min-w-0">
-				<h2 className="text-lg font-semibold truncate">{title}</h2>
+				<h2 className="text-lg font-semibold truncate">
+					{composeSurfaceTitle(outboxMessageId)}
+				</h2>
 			</div>
 			<button
 				type="button"
@@ -69,11 +77,14 @@ export const FullCompose = () => {
 		<div className="flex h-full min-h-0 flex-col bg-canvas">
 			{header}
 			<div className="min-h-0 flex-1 overflow-hidden">
+				{/* No key on the draft: the first autosave writes the id it created
+				    into the address, and remounting the form on that would take the
+				    caret out of the sentence being typed. Switching to a different
+				    draft is the form's own `outboxMessageId` effect. */}
 				<ComposeForm
-					key={state.outboxMessageId ?? "new"}
-					mode={state.mode}
-					account={state.account}
-					sourceMessage={state.sourceMessage}
+					mode="new"
+					outboxMessageId={outboxMessageId}
+					onDraftCreated={adoptCreatedDraft}
 					onClose={closeCompose}
 				/>
 			</div>

package/src/components/compose/InlineCompose.tsx

@@ -2,6 +2,7 @@ import type {
 	RemitImapAccountResponse,
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import { useState } from "react";
 import { ComposeForm } from "./ComposeForm";
 import type { ComposeMode } from "./ComposeProvider";
 
@@ -24,14 +25,23 @@ export const InlineCompose = ({
 	account,
 	sourceMessage,
 	onClose,
-}: InlineComposeProps) => (
-	<div className="border-b border-line bg-canvas">
-		<ComposeForm
-			layout="flow"
-			mode={mode}
-			account={account}
-			sourceMessage={sourceMessage}
-			onClose={onClose}
-		/>
-	</div>
-);
+}: InlineComposeProps) => {
+	// The reply's draft lives and dies with the reply. It is not addressable yet
+	// — that is the `$mode` child route (#720) — so it is held here, where the
+	// composer is, rather than anywhere a later composer could read it back.
+	const [outboxMessageId, setOutboxMessageId] = useState<string>();
+
+	return (
+		<div className="border-b border-line bg-canvas">
+			<ComposeForm
+				layout="flow"
+				mode={mode}
+				account={account}
+				sourceMessage={sourceMessage}
+				outboxMessageId={outboxMessageId}
+				onDraftCreated={setOutboxMessageId}
+				onClose={onClose}
+			/>
+		</div>
+	);
+};

package/src/components/compose/MobileComposeSheet.tsx

@@ -4,15 +4,13 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback, useRef, useState } from "react";
 import { Drawer } from "vaul";
 import { ErrorState } from "@/components/ui/ErrorState";
+import {
+	useAdoptComposeDraft,
+	useCloseCompose,
+	useComposeDraftId,
+} from "@/routing";
 import { ComposeForm } from "./ComposeForm";
-import { useCompose } from "./ComposeProvider";
-
-const MODE_LABELS: Record<string, string> = {
-	reply: "Reply",
-	reply_all: "Reply All",
-	forward: "Forward",
-	new: "New Message",
-};
+import { composeSurfaceTitle } from "./compose-title";
 
 /**
  * Returns true when the draft has meaningful content (subject or body
@@ -40,7 +38,9 @@ const useIsDraftDirty = (): (() => boolean) => {
 };
 
 export const MobileComposeSheet = () => {
-	const { state, closeCompose } = useCompose();
+	const outboxMessageId = useComposeDraftId();
+	const adoptCreatedDraft = useAdoptComposeDraft();
+	const closeCompose = useCloseCompose();
 	const isDraftDirty = useIsDraftDirty();
 	const [showConfirm, setShowConfirm] = useState(false);
 
@@ -75,13 +75,9 @@ export const MobileComposeSheet = () => {
 		setShowConfirm(false);
 	}, []);
 
-	if (!state.isOpen) return null;
-
-	const title = MODE_LABELS[state.mode] ?? "New Message";
-
 	return (
 		<Drawer.Root
-			open={state.isOpen}
+			open
 			onOpenChange={handleOpenChange}
 			// Don't auto-dismiss on drag when dirty — we intercept via onOpenChange
 		>
@@ -94,7 +90,7 @@ export const MobileComposeSheet = () => {
 					<Drawer.Handle className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />
 
 					<Drawer.Title className="px-4 py-2 text-base font-semibold border-b border-line">
-						{title}
+						{composeSurfaceTitle(outboxMessageId)}
 					</Drawer.Title>
 
 					{isConfigError ? (
@@ -110,9 +106,9 @@ export const MobileComposeSheet = () => {
 					) : (
 						<div className="flex-1 overflow-hidden">
 							<ComposeForm
-								mode={state.mode}
-								account={state.account}
-								sourceMessage={state.sourceMessage}
+								mode="new"
+								outboxMessageId={outboxMessageId}
+								onDraftCreated={adoptCreatedDraft}
 								onClose={closeCompose}
 							/>
 						</div>

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -37,11 +37,11 @@ import {
 	createRouter,
 	RouterContextProvider,
 } from "@tanstack/react-router";
-import { createElement, useEffect } from "react";
+import { createElement, useState } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
 import { ComposeForm } from "./ComposeForm";
-import { ComposeProvider, useCompose } from "./ComposeProvider";
+import { ComposeProvider } from "./ComposeProvider";
 
 const ACCOUNT_ID = "acc-1";
 const OUTBOX_MESSAGE_ID = "ob-604";
@@ -108,19 +108,17 @@ const patchesAfterTheSend = (): number => {
 		.length;
 };
 
+// The draft the composer is on is its owner's to hand it — the address for the
+// compose route, local state for an inline reply. Here it is the test's.
 const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
-	const { state, openCompose } = useCompose();
-
-	useEffect(() => {
-		openCompose({ mode: "reply", account, sourceMessage, outboxMessageId });
-	}, [openCompose, outboxMessageId]);
-
-	if (!state.isOpen) return null;
+	const [draftId, setDraftId] = useState(outboxMessageId);
 
 	return createElement(ComposeForm, {
 		mode: "reply",
 		account,
 		sourceMessage,
+		outboxMessageId: draftId,
+		onDraftCreated: setDraftId,
 		onClose: () => {
 			closed += 1;
 		},