@remit/web-client 0.0.166 → 0.0.167

package/src/components/compose/compose-starts-a-second-message.render.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Compose pressed while already composing starts a new message (#719).
+ *
+ * The compose route carries the draft as an optional segment, so pressing
+ * Compose from inside the composer drops that segment and leaves the same route
+ * matched — nothing remounts the form. The reset effect used to bail whenever
+ * the incoming id was absent, so the previous draft's recipients, subject and
+ * body stayed on screen under an address that said new message, and the next
+ * autosave took the create branch and wrote a SECOND draft holding the first
+ * one's content.
+ *
+ * Two properties, one cause: what is on screen, and what is written. The write
+ * is the damaging half — the duplicate outlives the session, in the reader's
+ * drafts.
+ */
+
+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 { createElement, useState } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const DRAFT_ID = "ob-first";
+const AUTOSAVE_DEBOUNCE_MS = 2000;
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const draft = {
+	outboxMessageId: DRAFT_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Lunch on Thursday",
+	textBody: "Does one o'clock work?",
+	status: "draft",
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+(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;
+
+/**
+ * The composer with its draft handed in, and a button that takes it away again
+ * — which is what pressing Compose does to the address it is mounted under.
+ */
+const Composer = () => {
+	const [draftId, setDraftId] = useState<string | undefined>(DRAFT_ID);
+
+	return createElement(
+		"div",
+		null,
+		createElement(
+			"button",
+			{ type: "button", onClick: () => setDraftId(undefined) },
+			"Compose",
+		),
+		createElement(ComposeForm, {
+			mode: "new",
+			account,
+			outboxMessageId: draftId,
+			onDraftCreated: setDraftId,
+			onClose: () => undefined,
+		}),
+	);
+};
+
+const creates = () =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "POST" && call.path.endsWith("/outbox"),
+	);
+
+const mount = async (): Promise<DomHarness> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.method === "POST" && call.path.endsWith("/outbox"))
+			return { ...draft, outboxMessageId: "ob-second" };
+		return draft;
+	});
+
+	const created = createDomHarness();
+	harness = created;
+	created.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(Composer)),
+		}),
+	);
+	await created.flush();
+	await created.wait(50);
+	return created;
+};
+
+const subjectField = (mounted: DomHarness): HTMLInputElement => {
+	const field = mounted.query<HTMLInputElement>("[data-subject-field]");
+	if (!field) throw new Error("the composer has no subject field");
+	return field;
+};
+
+describe("Compose pressed while already composing", () => {
+	it("takes the previous draft's message off the screen", async () => {
+		const mounted = await mount();
+		assert.equal(subjectField(mounted).value, draft.subject);
+		assert.match(mounted.text(), /them@example.com/);
+
+		mounted.click(mounted.byText("button", "Compose"));
+		await mounted.flush();
+		await mounted.wait(20);
+
+		assert.equal(subjectField(mounted).value, "");
+		assert.doesNotMatch(mounted.text(), /them@example.com/);
+	});
+
+	// The half that outlives the session: an autosave from a form still holding
+	// the old content, with no draft to write it to, creates a second one.
+	it("writes no second draft carrying the first one's content", async () => {
+		const mounted = await mount();
+		assert.equal(subjectField(mounted).value, draft.subject);
+
+		mounted.click(mounted.byText("button", "Compose"));
+		await mounted.flush();
+		await mounted.wait(AUTOSAVE_DEBOUNCE_MS + 500);
+
+		assert.deepEqual(
+			creates().map((call) => call.body?.subject),
+			[],
+			"a blank new message has nothing to save, so nothing was written",
+		);
+	});
+});

package/src/components/compose/compose-title.ts

@@ -0,0 +1,10 @@
+/**
+ * What the compose surface calls itself.
+ *
+ * The address says which message is being written, so the heading says the same
+ * thing: a message with nothing saved behind it yet is a new one, and one the
+ * autosave has written is the draft it wrote. The heading changing as the first
+ * save lands is the same moment the action bar says "Draft saved".
+ */
+export const composeSurfaceTitle = (outboxMessageId: string | undefined) =>
+	outboxMessageId ? "Draft" : "New Message";

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

@@ -23,11 +23,11 @@ import {
 	createRouter,
 	RouterContextProvider,
 } from "@tanstack/react-router";
-import { act, createElement, useEffect } from "react";
+import { act, createElement } 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";
+import { ComposeProvider } from "./ComposeProvider";
 
 const ACCOUNT_ID = "acc-1";
 const PHONE = {
@@ -97,21 +97,13 @@ const testRouter = (): AnyRouter =>
 		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, {
+const Opened = () =>
+	createElement(ComposeForm, {
 		mode: "new",
 		account,
+		onDraftCreated: () => {},
 		onClose: () => {},
 	});
-};
 
 const mount = async (): Promise<void> => {
 	http = mockFetch(async (call) => {

package/src/components/layout/ComposeFab.tsx

@@ -1,33 +1,24 @@
 import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
-import { useCallback } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { locationOpensDetail } from "@/lib/mail-route";
+import { useOpenCompose } from "@/routing";
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
  *
  * Layout follows Material 3: 56×56 surface, 16px from the right and
- * bottom edges (plus the iOS safe-area inset). Hidden when any of:
+ * bottom edges (plus the iOS safe-area inset). Hidden when either:
  *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
  *     `/mail` shell also stops mounting the FAB above that width; the
  *     `lg:hidden` class covers the pre-hydration frame.
- *   - The compose surface is already open.
- *   - The user is reading a thread — the single pane is the conversation, and
- *     its reply bar is under this corner. Every list says so in its path.
- *   - The user is off `/mail`, which is every route with no mail in it.
+ *   - The single pane has something open — a conversation, or compose itself.
+ *     Every list says so in its path.
  */
 export const ComposeFab = () => {
-	const { state, openCompose } = useCompose();
+	const compose = useOpenCompose();
 	const location = useLocation();
-	const compose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
 
-	const isReadingThread = locationOpensDetail(location.pathname);
-
-	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
-		return null;
+	if (locationOpensDetail(location.pathname)) return null;
 
 	return (
 		<button

package/src/components/layout/MailShell.tsx

@@ -1,6 +1,8 @@
 import { AppShellSlotted } from "@remit/ui";
 import { createContext, type ReactNode, useContext } from "react";
+import { FullCompose } from "@/components/compose/FullCompose";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+import { useIsComposing } from "@/routing";
 
 /**
  * The chrome every list shares, published by the `/mail` layout and consumed by
@@ -53,6 +55,11 @@ export interface MailShellProps {
  * Below the reading boundary the shell is one pane and takes `phone`, which
  * swaps between the list and whatever is open in place. Above it the panes sit
  * side by side and the reading and intelligence slots are filled.
+ *
+ * Compose is the one surface the single pane cannot take from the `Outlet`,
+ * because at this width there is no reading slot to fill. It is read off the
+ * address here rather than in each list's phone view, so the four lists cannot
+ * disagree about it.
  */
 export function MailShell({
 	phone,
@@ -62,6 +69,7 @@ export function MailShell({
 	hasThread = false,
 }: MailShellProps) {
 	const chrome = useContext(MailShellCtx);
+	const isComposing = useIsComposing();
 	if (!chrome) return <AppShellSkeleton />;
 
 	const shared = {
@@ -78,7 +86,7 @@ export function MailShell({
 		return (
 			<AppShellSlotted
 				{...shared}
-				list={phone}
+				list={isComposing ? <FullCompose /> : phone}
 				intelligenceOpen={chrome.intelligenceOpen}
 			/>
 		);

package/src/components/layout/MailTopBar.tsx

@@ -9,14 +9,14 @@
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { RefreshButton, ShellTopBar, shortcutHintForAction } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
+import { useOpenCompose } from "@/routing";
 
 interface MailTopBarProps {
 	accounts: RemitImapAccountResponse[];
@@ -26,10 +26,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
 	const navigate = useNavigate();
-	const { openCompose } = useCompose();
-	const compose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
+	const compose = useOpenCompose();
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
 		scope.kind === "scoped"

package/src/components/mail/DraftsView.tsx

@@ -5,8 +5,8 @@
  * \Drafts special-use folder (issue #505):
  *
  *   1. "Not yet sent (Remit)" — outbox rows with status === "draft" belonging
- *      to the account that owns the open \Drafts mailbox. Clicking a row opens
- *      compose pre-filled via openCompose({ mode: "new", outboxMessageId }).
+ *      to the account that owns the open \Drafts mailbox. Clicking a row names
+ *      the draft and navigates to the folder's compose route.
  *
  *   2. "On the server" — IMAP \Drafts thread rows already loaded for the
  *      mailbox. Clicking a row opens the normal reading pane (read-only;
@@ -39,9 +39,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { FileText, Inbox, Trash2 } from "lucide-react";
 import { useMemo } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
+
 import { groupDraftSections } from "@/lib/drafts";
-import { useRetainOpenPanels } from "@/routing";
+import {
+	useComposeDraftId,
+	useEditDraft,
+	useRetainOpenPanels,
+} from "@/routing";
 import { NavMenuButton } from "./NavMenuButton";
 
 // ---------------------------------------------------------------------------
@@ -154,7 +158,8 @@ export function DraftsView({
 	title,
 	unreadCount,
 }: DraftsViewProps) {
-	const { openCompose, state: composeState } = useCompose();
+	const openDraftId = useComposeDraftId();
+	const editDraft = useEditDraft();
 	const navigate = useNavigate();
 	const retainPanels = useRetainOpenPanels();
 	const queryClient = useQueryClient();
@@ -186,10 +191,6 @@ export function DraftsView({
 		deleteMutation.mutate({ path: { outboxMessageId } });
 	};
 
-	const handleRemitDraftOpen = (outboxMessageId: string) => {
-		openCompose({ mode: "new", outboxMessageId });
-	};
-
 	const handleImapDraftOpen = (messageId: string) => {
 		const threadId = imapThreads.find(
 			(thread) => thread.messageId === messageId,
@@ -246,11 +247,8 @@ export function DraftsView({
 											<RemitDraftRow
 												key={thread.id}
 												row={thread}
-												isSelected={
-													composeState.isOpen &&
-													thread.id === composeState.outboxMessageId
-												}
-												onOpen={handleRemitDraftOpen}
+												isSelected={thread.id === openDraftId}
+												onOpen={editDraft}
 												onDelete={handleRemitDraftDelete}
 												isDeleting={deleteMutation.isPending}
 											/>

package/src/components/mail/MailboxPane.tsx

@@ -16,8 +16,6 @@
  * On phone, use `<MailboxPane.Phone />` instead of the slot sub-views.
  */
 import {
-	outboxDetailOperationsDeleteOutboxMessageMutation,
-	outboxOperationsListOutboxMessagesQueryKey,
 	threadOperationsListThreadsQueryKey,
 	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
@@ -35,11 +33,7 @@ import {
 	type SearchResult,
 	useAppShellLayout,
 } from "@remit/ui";
-import {
-	useInfiniteQuery,
-	useMutation,
-	useQueryClient,
-} from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
@@ -53,8 +47,6 @@ import {
 	useState,
 } from "react";
 import type { ComposeMode } from "@/components/compose/ComposeProvider";
-import { useCompose } from "@/components/compose/ComposeProvider";
-import { FullCompose } from "@/components/compose/FullCompose";
 import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
@@ -66,8 +58,6 @@ import {
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { PullToRefresh } from "@/components/mail/PullToRefresh";
 import { SpamRescue } from "@/components/mail/SpamRescue";
-import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
-import { buildMutationErrorBanner } from "@/components/ui/error-banners";
 import {
 	useArchiveMailbox,
 	useDraftsMailbox,
@@ -83,7 +73,6 @@ import {
 } from "@/hooks/useDeleteMessages";
 import type { EscalationSearchQuery } from "@/hooks/useEscalatedActions";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
-import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
@@ -127,6 +116,8 @@ import {
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	useIsComposing,
+	useOpenCompose,
 	useRetainOpenPanels,
 } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
@@ -215,11 +206,7 @@ interface MailboxPaneContextValue {
 	onClearComposeRequest: () => void;
 	onToolbarDelete: () => void;
 	onToolbarStar: () => void;
-	onToolbarDiscardDraft: () => void;
 	onToolbarMove: (destMailboxId: string) => void;
-	composeState: ReturnType<typeof useCompose>["state"];
-	closeCompose: () => void;
-	hasRemitDraftOpen: boolean;
 	// Phone actions
 	onBack: () => void;
 	/** The rows either side of the open one — the phone's swipe gestures. */
@@ -539,9 +526,6 @@ function MailboxPaneProvider({
 	// so there is no fallback: until the mailbox resolves there is no number.
 	const unreadCount = useCurrentMailboxUnseenCount({ accounts }) ?? 0;
 
-	const queryClient = useQueryClient();
-	const { pushError } = useErrorBanners();
-
 	const toolbarActions = useThreadActions({
 		thread: selectedThread,
 		mailboxId,
@@ -569,48 +553,8 @@ function MailboxPaneProvider({
 		setToolbarComposeRequest("forward");
 	}, [setToolbarComposeRequest]);
 
-	const { state: composeState, openCompose, closeCompose } = useCompose();
-
-	const handleNewCompose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
-
-	// A thread opening closes compose. Only a selection arriving counts, so this
-	// cannot close the compose that just cleared one.
-	const previousSelectionRef = useRef(selectedMessageId);
-	useEffect(() => {
-		const previous = previousSelectionRef.current;
-		previousSelectionRef.current = selectedMessageId;
-		if (!selectedMessageId || selectedMessageId === previous) return;
-		closeCompose();
-	}, [selectedMessageId, closeCompose]);
-
-	const deleteOutboxMutation = useMutation({
-		...outboxDetailOperationsDeleteOutboxMessageMutation(),
-		onError: (mutationError) => {
-			pushError(
-				buildMutationErrorBanner(
-					"Couldn't discard draft",
-					"The draft wasn't deleted.",
-					mutationError,
-				),
-			);
-		},
-	});
-	const handleToolbarDiscardDraft = useCallback(() => {
-		const outboxMessageId = composeState.outboxMessageId;
-		if (!outboxMessageId) return;
-		deleteOutboxMutation.mutate({ path: { outboxMessageId } });
-		queryClient.invalidateQueries({
-			queryKey: outboxOperationsListOutboxMessagesQueryKey(),
-		});
-		closeCompose();
-	}, [
-		composeState.outboxMessageId,
-		deleteOutboxMutation,
-		queryClient,
-		closeCompose,
-	]);
+	const isComposing = useIsComposing();
+	const openCompose = useOpenCompose();
 
 	const messageIdsForFocusedThread = useCallback(
 		(thread: typeof focusedThread): string[] => {
@@ -784,17 +728,13 @@ function MailboxPaneProvider({
 		}
 	}, [normalizedSearchQuery, mailboxType, telemetry]);
 
-	const hasRemitDraftOpen =
-		isDraftsMailbox &&
-		composeState.isOpen &&
-		!!composeState.outboxMessageId &&
-		!selectedThread;
-
 	const { goBack, nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: threads.map((t) => t.messageId),
 		selectedMessageId,
-		enabled: !composeState.isOpen,
+		// The list stays mounted under the compose surface, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed.
+		enabled: !isComposing,
 		onClose: closeThread,
 		handlers: {
 			reply: triageReply,
@@ -808,7 +748,7 @@ function MailboxPaneProvider({
 			vipSender: triageVip,
 			markJunk: triageMarkJunk,
 			toggleIntelligence: selectedThread ? onToggleIntelligence : undefined,
-			compose: handleNewCompose,
+			compose: openCompose,
 			goBrief: () => goToRoute("/mail/brief"),
 			goInbox: () => goToRoute("/mail/brief"),
 			goSent: () => goToRoute("/mail/brief"),
@@ -817,11 +757,6 @@ function MailboxPaneProvider({
 		},
 	});
 
-	useKeyboardNavigation({
-		enabled: composeState.isOpen,
-		bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
-	});
-
 	// The swipe gestures open a whole conversation, so the adjacent row has to
 	// name its thread. This folder's own listing is where that is looked up, so a
 	// row it does not hold offers no gesture rather than a tap that goes nowhere.
@@ -884,11 +819,7 @@ function MailboxPaneProvider({
 		onClearComposeRequest: toolbarActions.clearComposeRequest,
 		onToolbarDelete: toolbarActions.deleteThread,
 		onToolbarStar: toolbarActions.toggleStar,
-		onToolbarDiscardDraft: handleToolbarDiscardDraft,
 		onToolbarMove: toolbarActions.moveThread,
-		composeState,
-		closeCompose,
-		hasRemitDraftOpen,
 		onBack: goBack,
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
@@ -1138,7 +1069,6 @@ function MailboxReading() {
 		mailboxAccountId,
 		selectedThread,
 		conversation,
-		hasRemitDraftOpen,
 		intelligenceOpen,
 		onToggleIntelligence,
 		toolbarComposeRequest,
@@ -1148,9 +1078,7 @@ function MailboxReading() {
 		onClearComposeRequest,
 		onToolbarDelete,
 		onToolbarStar,
-		onToolbarDiscardDraft,
 		onToolbarMove,
-		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
 	// Which surface intelligence has here: the rail between 1280 and up, the
@@ -1197,25 +1125,22 @@ function MailboxReading() {
 	const intelligenceShowing =
 		hasThread && (railFits ? intelligenceOpen : drawerOpen);
 
-	const detailPane =
-		composeState.isOpen && !conversation ? (
-			<FullCompose />
-		) : conversation ? (
-			<ConversationView
-				threadId={conversation.threadId}
-				mailboxId={conversation.mailboxId}
-				subject={conversation.subject}
-				selectedMessageId={conversation.messageId}
-				authenticity={conversation.authenticity}
-				onOpenIntelligence={
-					conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
-				}
-				composeRequest={toolbarComposeRequest}
-				onComposeClose={onClearComposeRequest}
-			/>
-		) : (
-			<ReadingPaneEmpty />
-		);
+	const detailPane = conversation ? (
+		<ConversationView
+			threadId={conversation.threadId}
+			mailboxId={conversation.mailboxId}
+			subject={conversation.subject}
+			selectedMessageId={conversation.messageId}
+			authenticity={conversation.authenticity}
+			onOpenIntelligence={
+				conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
+			}
+			composeRequest={toolbarComposeRequest}
+			onComposeClose={onClearComposeRequest}
+		/>
+	) : (
+		<ReadingPaneEmpty />
+	);
 
 	return (
 		<>
@@ -1228,14 +1153,8 @@ function MailboxReading() {
 					onReply={hasThread ? onToolbarReply : undefined}
 					onReplyAll={hasThread ? onToolbarReplyAll : undefined}
 					onForward={hasThread ? onToolbarForward : undefined}
-					canDelete={hasThread || hasRemitDraftOpen}
-					onDelete={
-						hasThread
-							? onToolbarDelete
-							: hasRemitDraftOpen
-								? onToolbarDiscardDraft
-								: undefined
-					}
+					canDelete={hasThread}
+					onDelete={hasThread ? onToolbarDelete : undefined}
 					onToggleStar={hasThread ? onToolbarStar : undefined}
 					isStarred={selectedThread?.hasStars}
 					moveContext={
@@ -1309,7 +1228,6 @@ function MailboxPhone() {
 		onBack,
 		nextThread,
 		previousThread,
-		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
 
@@ -1349,14 +1267,6 @@ function MailboxPhone() {
 		);
 	}
 
-	if (composeState.isOpen) {
-		return (
-			<div className="h-full">
-				<FullCompose />
-			</div>
-		);
-	}
-
 	return <MailboxList />;
 }