@remit/web-client 0.0.165 → 0.0.167

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,7 +116,9 @@ import {
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
-	retainOpenPanels,
+	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. */
@@ -264,6 +251,7 @@ function MailboxPaneProvider({
 	children,
 }: MailboxPaneProps) {
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
 	const telemetry = useTelemetry();
@@ -467,9 +455,9 @@ function MailboxPaneProvider({
 			to: "/mail/$mailboxId",
 			params: { mailboxId },
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
-	}, [mailboxId, navigate]);
+	}, [mailboxId, navigate, retainPanels]);
 
 	const handleOpenThread = useCallback(
 		(target: OpenThreadTarget) => {
@@ -477,10 +465,10 @@ function MailboxPaneProvider({
 				to: "/mail/$mailboxId/$threadId/$messageId",
 				params: { mailboxId, ...target },
 				search: (prev) => prev,
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[mailboxId, navigate],
+		[mailboxId, navigate, retainPanels],
 	);
 
 	const handleDeselectIfRemoved = useCallback(
@@ -538,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,
@@ -568,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[] => {
@@ -783,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,
@@ -807,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"),
@@ -816,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.
@@ -883,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),
@@ -942,6 +874,7 @@ function MailboxList() {
 		useMailContext();
 	const tier = useLayoutTier();
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 
 	const listTitle = mailboxName ?? "Inbox";
 	const preset = useMemo(() => inboxFilterConfig(), []);
@@ -1029,10 +962,10 @@ function MailboxList() {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[mailboxId, navigate, searchInput, threads],
+		[mailboxId, navigate, retainPanels, searchInput, threads],
 	);
 
 	// Drafts keep their own dedicated view (and header); they don't carry the
@@ -1136,7 +1069,6 @@ function MailboxReading() {
 		mailboxAccountId,
 		selectedThread,
 		conversation,
-		hasRemitDraftOpen,
 		intelligenceOpen,
 		onToggleIntelligence,
 		toolbarComposeRequest,
@@ -1146,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
@@ -1195,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 (
 		<>
@@ -1226,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={
@@ -1307,7 +1228,6 @@ function MailboxPhone() {
 		onBack,
 		nextThread,
 		previousThread,
-		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
 
@@ -1347,14 +1267,6 @@ function MailboxPhone() {
 		);
 	}
 
-	if (composeState.isOpen) {
-		return (
-			<div className="h-full">
-				<FullCompose />
-			</div>
-		);
-	}
-
 	return <MailboxList />;
 }
 

package/src/components/mail/MessageActionMenu.tsx

@@ -35,7 +35,7 @@ import {
 	type ThreadListSnapshotEntry,
 	threadListCacheKeys,
 } from "@/lib/thread-list-cache";
-import { retainOpenPanels, useOpenThreadPath } from "@/routing";
+import { useOpenThreadPath, useRetainOpenPanels } from "@/routing";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -103,6 +103,7 @@ export const MessageActionMenu = ({
 }: MessageActionMenuProps) => {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const { pushError } = useErrorBanners();
 	const selectedMessageId = useOpenThreadPath()?.messageId;
 
@@ -193,10 +194,10 @@ export const MessageActionMenu = ({
 				to: "/mail/$mailboxId",
 				params: { mailboxId },
 				search: (prev) => prev,
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[selectedMessageId, mailboxId, navigate],
+		[selectedMessageId, mailboxId, navigate, retainPanels],
 	);
 
 	const { deleteMessages, isPending: isDeleting } = useDeleteMessages({

package/src/components/mail/MessageList.tsx

@@ -53,7 +53,7 @@ import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { listVerbRequest } from "@/lib/list-verb-request";
 import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
 import { useSelectionWizard, useWizardStepValue } from "@/lib/wizard-history";
-import { retainOpenPanels } from "@/routing";
+import { useRetainOpenPanels } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import {
 	type EscalatedSelection,
@@ -234,6 +234,7 @@ export const MessageList = ({
 }: MessageListProps) => {
 	const parentRef = useRef<HTMLDivElement>(null);
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const isDesktop = useIsDesktop();
 	const wizard = useSelectionWizard();
 	const { verb: wizardVerb, start: startWizard, startFromSearch } = wizard;
@@ -635,11 +636,11 @@ export const MessageList = ({
 				to: "/mail/$mailboxId/$threadId/$messageId",
 				params: { mailboxId, threadId, messageId },
 				search: (prev) => prev,
-				hash: retainOpenPanels,
+				hash: retainPanels,
 				replace: options?.replace,
 			});
 		},
-		[navigate, mailboxId, threads],
+		[navigate, retainPanels, mailboxId, threads],
 	);
 
 	// Enter: open the focused row in the reading pane. This is the focus→open

package/src/components/mail/OutboxPane.tsx

@@ -48,7 +48,6 @@ import {
 	useMemo,
 	useRef,
 } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { MessageBody } from "@/components/mail/MessageBody";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
@@ -63,7 +62,7 @@ import {
 import { isOutboxListRow, isUnsendableStatus } from "@/lib/outbox-status";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { retainOpenPanels } from "@/routing";
+import { useEditDraft, useRetainOpenPanels } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Helpers (shared between List, Reading, Phone sub-views)             */
@@ -174,6 +173,7 @@ function OutboxPaneProvider({
 	children,
 }: OutboxPaneProps) {
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 
 	const { data: outboxResponse, isLoading } = useQuery(
 		outboxOperationsListOutboxMessagesOptions(),
@@ -219,19 +219,19 @@ function OutboxPaneProvider({
 				to: "/mail/outbox/draft/$outboxMessageId",
 				params: { outboxMessageId },
 				search: (prev) => prev,
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[navigate],
+		[navigate, retainPanels],
 	);
 
 	const handleCloseMessage = useCallback(() => {
 		navigate({
 			to: "/mail/outbox",
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
-	}, [navigate]);
+	}, [navigate, retainPanels]);
 
 	const ctx: OutboxPaneContextValue = {
 		messages,
@@ -265,7 +265,7 @@ function OutboxMessageRow({
 	onSelect,
 }: OutboxMessageRowProps) {
 	const queryClient = useQueryClient();
-	const { openCompose } = useCompose();
+	const editDraft = useEditDraft();
 	const { pushError } = useErrorBanners();
 
 	const invalidateOutbox = useCallback(() => {
@@ -330,12 +330,7 @@ function OutboxMessageRow({
 					: undefined
 			}
 			retrying={retryMutation.isPending}
-			onEdit={() =>
-				openCompose({
-					mode: "new",
-					outboxMessageId: message.outboxMessageId,
-				})
-			}
+			onEdit={() => editDraft(message.outboxMessageId)}
 			onDelete={() =>
 				deleteMutation.mutate({
 					path: { outboxMessageId: message.outboxMessageId },

package/src/components/mail/SwipeableMessageRow.tsx

@@ -10,7 +10,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
-import { retainOpenPanels } from "@/routing";
+import { useRetainOpenPanels } from "@/routing";
 import { MessageListItem } from "./MessageListItem";
 import { useModifierSelect } from "./useModifierSelect";
 
@@ -75,6 +75,7 @@ export const SwipeableMessageRow = ({
 }: SwipeableMessageRowProps) => {
 	const [peek, setPeek] = useState<SwipePeek>("none");
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 
 	const handleAct = useCallback(
 		(side: "leading" | "trailing") => {
@@ -106,9 +107,9 @@ export const SwipeableMessageRow = ({
 				messageId: thread.messageId,
 			},
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
-	}, [navigate, mailboxId, thread.threadId, thread.messageId]);
+	}, [navigate, retainPanels, mailboxId, thread.threadId, thread.messageId]);
 
 	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);