@remit/web-client 0.0.166 → 0.0.168

package/src/components/mail/ConversationView.tsx

@@ -1,14 +1,12 @@
 import {
 	configOperationsGetConfigOptions,
-	messageOperationsDescribeMessageOptions,
 	threadDetailOperationsListThreadMessagesOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
 import { MobileReadingPane } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
-import { InlineCompose } from "@/components/compose/InlineCompose";
+import { ConversationCompose } from "@/components/compose/ConversationCompose";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
@@ -17,6 +15,7 @@ import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
+import { type ReplyMode, useOpenReply, useReplySurface } from "@/routing";
 import { AuthenticityBanner } from "./AuthenticityBanner";
 import { MessageCard } from "./MessageCard";
 
@@ -47,21 +46,6 @@ interface ConversationViewProps {
 	 * list is always visible in the resizable side pane.
 	 */
 	onBack?: () => void;
-	/**
-	 * When set, immediately opens the inline compose in this mode. The
-	 * parent (e.g. the reading-pane toolbar) sets this to wire the
-	 * top-bar reply/reply-all/forward buttons into the inline compose
-	 * that lives inside the conversation. Reset by calling
-	 * `onComposeClose` after the compose opens.
-	 */
-	composeRequest?: ComposeMode | null;
-	/**
-	 * Called once the conversation has acted on `composeRequest` (or
-	 * whenever the inline compose is dismissed). The caller must reset
-	 * `composeRequest` to `null`: a request left standing is read as a fresh
-	 * one on every render.
-	 */
-	onComposeClose?: () => void;
 	/**
 	 * Mobile only: swipe-left handler to open the next message in the list the
 	 * thread was opened from. Omitted at the end of the list so the gesture
@@ -103,8 +87,6 @@ export const ConversationView = ({
 	authenticity,
 	onOpenIntelligence,
 	onBack,
-	composeRequest,
-	onComposeClose,
 	onSwipeNext,
 	onSwipePrevious,
 	mobileIntelligenceOpen,
@@ -240,72 +222,65 @@ export const ConversationView = ({
 		messages,
 	});
 
-	// Compose state for inline reply/forward.
-	// Controlled via the `composeRequest` prop (toolbar wire-up) or
-	// locally via r/a/f keyboard shortcuts.
-	const [composeMode, setComposeMode] = useState<ComposeMode | null>(null);
-
-	// Counts openings rather than tracking the mode: replying from a second
-	// message while compose is already open is the same request again, and the
-	// reader still has to be taken to it.
-	const [composeOpenings, setComposeOpenings] = useState(0);
-	const openCompose = useCallback((mode: ComposeMode) => {
-		setComposeMode(mode);
-		setComposeOpenings((count) => count + 1);
-	}, []);
-
-	// When the toolbar passes a composeRequest, open the inline compose.
-	useEffect(() => {
-		if (composeRequest && composeRequest !== "new") {
-			openCompose(composeRequest);
-			// Notify the parent that the request has been consumed.
-			onComposeClose?.();
-		}
-	}, [composeRequest, onComposeClose, openCompose]);
-
-	// Reply and forward act on the latest turn of the conversation, which is the
-	// last message now that the thread reads oldest first.
-	const { data: latestMessageData } = useQuery({
-		...messageOperationsDescribeMessageOptions({
-			path: { messageId: latestMessage?.messageId ?? "" },
-		}),
-		enabled: !!latestMessage && composeMode !== null,
-	});
+	// The reply is a segment under the message it answers, so what is being
+	// written and which turn it answers are the address's to state. Nothing here
+	// keeps a second opinion about whether a composer is up.
+	const reply = useReplySurface();
+	const openReply = useOpenReply();
+
+	// Which turn a verb aimed at the whole conversation answers: the message the
+	// address names, or the latest turn when it names none. A per-message button
+	// passes its own instead, which the address could not express before this.
+	const answeredMessageId = selectedMessageId ?? latestMessage?.messageId;
+
+	const replyWith = useCallback(
+		(mode: ReplyMode, messageId: string | undefined) => {
+			if (!messageId) return;
+			openReply({ threadId, messageId, mode });
+		},
+		[openReply, threadId],
+	);
 
-	const handleReply = useCallback(() => openCompose("reply"), [openCompose]);
+	const handleReply = useCallback(
+		() => replyWith("reply", answeredMessageId),
+		[replyWith, answeredMessageId],
+	);
 
 	const handleReplyAll = useCallback(
-		() => openCompose("reply_all"),
-		[openCompose],
+		() => replyWith("reply-all", answeredMessageId),
+		[replyWith, answeredMessageId],
 	);
 
 	const handleForward = useCallback(
-		() => openCompose("forward"),
-		[openCompose],
+		() => replyWith("forward", answeredMessageId),
+		[replyWith, answeredMessageId],
 	);
 
-	const handleCloseCompose = useCallback(() => {
-		setComposeMode(null);
-		onComposeClose?.();
-	}, [onComposeClose]);
-
 	// Compose opens at the head of the pane, which from halfway down a long
 	// thread is several screens up: without this, replying looks like nothing
 	// happening. Aligned on its top edge, where the recipients are, and left
 	// alone afterwards — it grows downward as it is written into, so following
 	// its height would pull the rows being typed into off the top.
+	//
+	// Keyed on what is being answered and how, not on the draft under it: the
+	// address gains a draft segment while the reader types, and scrolling there
+	// would move the pane mid-sentence.
 	const composeRef = useRef<HTMLDivElement>(null);
+	const answering =
+		reply?.kind === "reply"
+			? `${reply.mode}:${reply.sourceMessageId}`
+			: undefined;
 	useEffect(() => {
-		if (composeMode === null || composeOpenings === 0) return;
+		if (!answering) return;
 		composeRef.current?.scrollIntoView({
 			behavior: "smooth",
 			block: "start",
 		});
-	}, [composeOpenings, composeMode]);
+	}, [answering]);
 
 	// Register keyboard shortcuts
 	useKeyboardNavigation({
-		enabled: !isLoading && messages.length > 0 && composeMode === null,
+		enabled: !isLoading && messages.length > 0 && reply === undefined,
 		bindings: [
 			{ key: "j", handler: focusNext, preventDefault: true },
 			{ key: "ArrowDown", handler: focusNext, preventDefault: true },
@@ -340,10 +315,22 @@ export const ConversationView = ({
 		);
 	}
 
+	// An address naming a reply over a conversation with nothing in it says so.
+	// The mailbox is shared with other clients, so a thread can empty underneath
+	// the reader between opening it and answering it, and a composer that simply
+	// failed to appear reads as a broken button.
 	if (messages.length === 0) {
 		return (
-			<div className="flex h-full items-center justify-center">
-				<EmptyState message="No messages in this thread" />
+			<div className="flex h-full items-center justify-center p-4">
+				{reply ? (
+					<ErrorState
+						variant="inline"
+						title="There is nothing here to answer"
+						error="This conversation has no messages left. Another mail client may have moved or deleted them."
+					/>
+				) : (
+					<EmptyState message="No messages in this thread" />
+				)}
 			</div>
 		);
 	}
@@ -355,7 +342,8 @@ export const ConversationView = ({
 	// its own px-5 inset (matches the AppShell ReadingPane geometry). On mobile
 	// each expanded card owns a per-message action bar. Its reply verbs are
 	// wired whatever the account's SMTP state: compose is where an account that
-	// cannot send says so.
+	// cannot send says so. A card's verb answers that card's message, which is
+	// the turn the address then names.
 	const renderMessages = (mobile: boolean) => (
 		<div data-testid="conversation-messages">
 			{orderedMessages.map((message, index) => (
@@ -376,9 +364,17 @@ export const ConversationView = ({
 						}
 						accountId={mailboxAccountId}
 						mobile={mobile}
-						onReply={mobile ? handleReply : undefined}
-						onReplyAll={mobile ? handleReplyAll : undefined}
-						onForward={mobile ? handleForward : undefined}
+						onReply={
+							mobile ? () => replyWith("reply", message.messageId) : undefined
+						}
+						onReplyAll={
+							mobile
+								? () => replyWith("reply-all", message.messageId)
+								: undefined
+						}
+						onForward={
+							mobile ? () => replyWith("forward", message.messageId) : undefined
+						}
 					/>
 				</div>
 			))}
@@ -389,14 +385,23 @@ export const ConversationView = ({
 	// is what the reader came back for, and it is not something to go looking
 	// for under a thread. It scrolls with the conversation rather than floating
 	// over it, so the pane has one scrollbar whether or not a reply is open.
-	const compose = composeMode !== null && (
+	//
+	// A segment naming no mode is a hand-typed address, and it says so where the
+	// composer would have been rather than opening nothing: the conversation
+	// behind it is still open and still readable.
+	const compose = reply && (
 		<div ref={composeRef}>
-			<InlineCompose
-				mode={composeMode}
-				account={activeAccount}
-				sourceMessage={latestMessageData}
-				onClose={handleCloseCompose}
-			/>
+			{reply.kind === "reply" ? (
+				<ConversationCompose surface={reply} />
+			) : (
+				<div className="border-b border-line bg-canvas p-4">
+					<ErrorState
+						variant="inline"
+						title="That is not a way to answer a message"
+						error={`"${reply.segment}" is not reply, reply-all or forward.`}
+					/>
+				</div>
+			)}
 		</div>
 	);
 

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/FlaggedPane.tsx

@@ -55,6 +55,10 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
+	useIsComposing,
+	useIsReplying,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 
@@ -81,6 +85,11 @@ interface FlaggedPaneContextValue {
 	 * account — Flagged spans accounts, so there is no route mailbox to key by.
 	 */
 	actions: ThreadActions;
+	/**
+	 * Answer the conversation the address has open. Absent when it names none,
+	 * which is what the toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
@@ -210,15 +219,47 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
 
+	// The toolbar answers the conversation on screen; the keyboard answers the
+	// row the cursor is on, which may be one the address has not opened yet.
+	// Both are one navigation, because the mode and the message it answers are
+	// segments of the same address — there is no open-it-first step for the
+	// answering half to be dropped from.
+	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const openReply = useOpenReply();
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!triageTarget) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: triageTarget.threadId,
+				messageId: triageTarget.messageId,
+				mode,
+			});
+	}, [openReply, triageTarget]);
+
 	const { nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: triage.orderedIds,
 		selectedMessageId,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: handleCloseThread,
 		handlers: {
-			reply: () => actions.requestCompose("reply"),
-			replyAll: () => actions.requestCompose("reply_all"),
-			forward: () => actions.requestCompose("forward"),
+			reply: () => replyToFocusedThread?.("reply"),
+			replyAll: () => replyToFocusedThread?.("reply-all"),
+			forward: () => replyToFocusedThread?.("forward"),
 			// The list takes any verb aimed at its selection and opens the wizard
 			// on it, so a shortcut can never reach a bulk action the bar would have
 			// reviewed. What comes back here is a verb aimed at the bare cursor.
@@ -258,6 +299,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,
+		onReply: replyToOpenThread,
 		triage,
 		onDeleteMessages: deleteMessages,
 		handleDeselectIfRemoved,
@@ -292,7 +334,7 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { conversation, actions } = useFlaggedPane();
+	const { conversation, actions, onReply } = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
 	// reading pane is mounted but the rail is not, so "enabled" would promise an
@@ -308,13 +350,9 @@ function FlaggedReading() {
 				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
 				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? () => actions.requestCompose("reply") : undefined}
-				onReplyAll={
-					hasThread ? () => actions.requestCompose("reply_all") : undefined
-				}
-				onForward={
-					hasThread ? () => actions.requestCompose("forward") : undefined
-				}
+				onReply={onReply ? () => onReply("reply") : undefined}
+				onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+				onForward={onReply ? () => onReply("forward") : undefined}
 				onDelete={hasThread ? actions.deleteThread : undefined}
 				onToggleStar={hasThread ? actions.toggleStar : undefined}
 				isStarred={actions.isStarred}
@@ -336,8 +374,6 @@ function FlaggedReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
-						composeRequest={actions.composeRequest}
-						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />