@remit/web-client 0.0.166 → 0.0.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.166",
+  "version": "0.0.168",
   "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;
@@ -120,7 +140,7 @@ const getReplyAddresses = (
 		displayName: a.displayName,
 	}));
 
-	if (mode !== "reply_all") return { to, cc: [] };
+	if (mode !== "reply-all") return { to, cc: [] };
 
 	const myEmailLower = myEmail?.toLowerCase();
 	const toEmails = new Set(to.map((a) => a.email.toLowerCase()));
@@ -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,76 @@ 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);
+	/**
+	 * Whether the document on screen came from a draft the server already held.
+	 * A reply carries the message it answers whether it is being started or being
+	 * resumed, so this is what separates the two: the source seeds a reply that
+	 * has nothing behind it, and leaves a saved one holding the recipients and
+	 * the subject the reader edited.
+	 */
+	const resumedDraftRef = useRef(outboxMessageId !== undefined);
 
-	// 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).
+	//
+	// "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.
 	//
-	// 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.
+	// 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;
+		resumedDraftRef.current = outboxMessageId !== undefined;
+		// 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 +424,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: [],
 	}));
 
@@ -432,9 +482,10 @@ export const ComposeForm = ({
 	}, [draftData, draftLoaded]);
 
 	useEffect(() => {
+		if (resumedDraftRef.current) return;
 		if (!sourceMessage) return;
 
-		if (mode === "reply" || mode === "reply_all") {
+		if (mode === "reply" || mode === "reply-all") {
 			const { to, cc } = getReplyAddresses(sourceMessage, mode, account?.email);
 			setToAddresses(to);
 			setCcAddresses(cc);
@@ -452,7 +503,7 @@ export const ComposeForm = ({
 	// to an empty quote when nothing renderable exists (the user can still
 	// attribute the reply manually).
 	const isQuoting =
-		mode === "reply" || mode === "reply_all" || mode === "forward";
+		mode === "reply" || mode === "reply-all" || mode === "forward";
 	const { data: sourceBody } = useMessageBodyContent({
 		messageId: sourceMessage?.message.messageId,
 		bodyParts: sourceMessage?.bodyParts,
@@ -475,9 +526,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 +634,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 +667,7 @@ export const ComposeForm = ({
 	}, [
 		selectedAccountId,
 		outboxMessageId,
+		openDocumentId,
 		draftLoaded,
 		toAddresses,
 		ccAddresses,
@@ -627,7 +689,7 @@ export const ComposeForm = ({
 				stopAutoSave();
 
 				const replyData =
-					sourceMessage && (mode === "reply" || mode === "reply_all")
+					sourceMessage && (mode === "reply" || mode === "reply-all")
 						? getReferences(sourceMessage)
 						: {};
 

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,25 @@ 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;
-}
-
+import type { ReplyMode } from "@/routing";
+
+/**
+ * What a composer opened on. The three ways to answer a message are the path
+ * segment `$mode` verbatim, so the address and the form say one word each
+ * rather than translating between two vocabularies.
+ */
+export type ComposeMode = ReplyMode | "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 +38,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 +46,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 +83,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/ConversationCompose.tsx

@@ -0,0 +1,57 @@
+import {
+	configOperationsGetConfigOptions,
+	messageOperationsDescribeMessageOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import {
+	type ReplyAddress,
+	useAdoptReplyDraft,
+	useCloseReply,
+} from "@/routing";
+import { ComposeForm } from "./ComposeForm";
+
+/**
+ * The answer to a message, as the top block of the conversation it answers.
+ *
+ * It takes no height of its own: it is as tall as what has been written in it
+ * and pushes the thread down as that grows, so the pane keeps the one scrollbar
+ * it had before the reply opened. A height here would give the pane a second
+ * one, with the caret in the inner track.
+ *
+ * Mode, source and draft are all segments of the address, so the surface is on
+ * screen because the path says so and is writing to what the path names. The
+ * conversation renders it because it belongs inside the thread and because the
+ * phone has no reading `Outlet` for a route to fill.
+ */
+export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
+	const adoptCreatedDraft = useAdoptReplyDraft();
+	const closeReply = useCloseReply();
+
+	const { data: sourceMessage } = useQuery({
+		...messageOperationsDescribeMessageOptions({
+			path: { messageId: surface.sourceMessageId },
+		}),
+	});
+
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	return (
+		<div className="border-b border-line bg-canvas">
+			{/* 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. */}
+			<ComposeForm
+				layout="flow"
+				mode={surface.mode}
+				account={config?.accounts?.[0]}
+				sourceMessage={sourceMessage}
+				outboxMessageId={surface.outboxMessageId}
+				onDraftCreated={adoptCreatedDraft}
+				onClose={closeReply}
+			/>
+		</div>
+	);
+};

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