@remit/web-client 0.0.48 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "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/mail/BriefPane.tsx

@@ -33,6 +33,7 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { DailyBrief } from "@/components/mail/DailyBrief";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
 import {
 	buildConversationTarget,
 	type ConversationTarget,
@@ -51,6 +52,11 @@ interface BriefPaneContextValue {
 	onSelectMessage: (id: string) => void;
 	onSelectSearchResult: (result: SearchResult) => void;
 	onCloseThread: () => void;
+	/**
+	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
+	 * account — the brief spans accounts, so there is no route mailbox to key by.
+	 */
+	actions: ThreadActions;
 }
 
 const BriefPaneCtx = createContext<BriefPaneContextValue | null>(null);
@@ -136,6 +142,28 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		[navigate, searchInput],
 	);
 
+	const handleDeselectIfRemoved = useCallback(
+		(removedIds: string[]) => {
+			if (!selectedMessageId) return;
+			if (!removedIds.includes(selectedMessageId)) return;
+			navigate({
+				to: "/mail",
+				search: (prev) => ({
+					...prev,
+					selectedMessageId: undefined,
+					selectedThreadId: undefined,
+					selectedMailboxId: undefined,
+				}),
+			});
+		},
+		[selectedMessageId, navigate],
+	);
+
+	const actions = useThreadActions({
+		thread: selectedThread,
+		onAfterOptimisticRemove: handleDeselectIfRemoved,
+	});
+
 	const handleCloseThread = useCallback(() => {
 		navigate({
 			to: "/mail",
@@ -155,6 +183,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		onSelectMessage: handleSelectMessage,
 		onSelectSearchResult: handleSelectSearchResult,
 		onCloseThread: handleCloseThread,
+		actions,
 	};
 
 	return <BriefPaneCtx.Provider value={ctx}>{children}</BriefPaneCtx.Provider>;
@@ -187,7 +216,7 @@ function BriefList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function BriefReading() {
-	const { conversation } = useBriefPane();
+	const { conversation, actions } = useBriefPane();
 	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
@@ -203,6 +232,25 @@ function BriefReading() {
 				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
+				}
+				onDelete={hasThread ? actions.deleteThread : undefined}
+				onToggleStar={hasThread ? actions.toggleStar : undefined}
+				isStarred={actions.isStarred}
+				moveContext={
+					hasThread && actions.accountId && actions.mailboxId
+						? {
+								accountId: actions.accountId,
+								currentMailboxId: actions.mailboxId,
+								onMove: actions.moveThread,
+							}
+						: undefined
+				}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{conversation ? (
@@ -212,6 +260,8 @@ function BriefReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
+						composeRequest={actions.composeRequest}
+						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />

package/src/components/mail/FlaggedPane.tsx

@@ -36,6 +36,7 @@ import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
+import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
 import { useMailContext } from "@/lib/mail-context";
 
 /* ------------------------------------------------------------------ */
@@ -47,6 +48,11 @@ interface FlaggedPaneContextValue {
 	selectedThread: RemitImapThreadMessageResponse | undefined;
 	onSelectMessage: (id: string) => void;
 	onCloseThread: () => void;
+	/**
+	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
+	 * account — Flagged spans accounts, so there is no route mailbox to key by.
+	 */
+	actions: ThreadActions;
 }
 
 const FlaggedPaneCtx = createContext<FlaggedPaneContextValue | null>(null);
@@ -96,11 +102,26 @@ function FlaggedPaneProvider({
 		});
 	}, [navigate]);
 
+	const handleDeselectIfRemoved = useCallback(
+		(removedIds: string[]) => {
+			if (!selectedMessageId) return;
+			if (!removedIds.includes(selectedMessageId)) return;
+			handleCloseThread();
+		},
+		[selectedMessageId, handleCloseThread],
+	);
+
+	const actions = useThreadActions({
+		thread: selectedThread,
+		onAfterOptimisticRemove: handleDeselectIfRemoved,
+	});
+
 	const ctx: FlaggedPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
 		onSelectMessage: handleSelectMessage,
 		onCloseThread: handleCloseThread,
+		actions,
 	};
 
 	return (
@@ -128,7 +149,7 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { selectedThread } = useFlaggedPane();
+	const { selectedThread, actions } = 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
@@ -144,6 +165,25 @@ 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
+				}
+				onDelete={hasThread ? actions.deleteThread : undefined}
+				onToggleStar={hasThread ? actions.toggleStar : undefined}
+				isStarred={actions.isStarred}
+				moveContext={
+					hasThread && actions.accountId && actions.mailboxId
+						? {
+								accountId: actions.accountId,
+								currentMailboxId: actions.mailboxId,
+								onMove: actions.moveThread,
+							}
+						: undefined
+				}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{selectedThread ? (
@@ -152,6 +192,8 @@ function FlaggedReading() {
 						mailboxId={selectedThread.mailboxId}
 						subject={selectedThread.subject}
 						authenticity={selectedThread.authenticity}
+						composeRequest={actions.composeRequest}
+						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />

package/src/components/mail/MailboxPane.tsx

@@ -18,7 +18,6 @@
 import {
 	outboxDetailOperationsDeleteOutboxMessageMutation,
 	outboxOperationsListOutboxMessagesQueryKey,
-	threadDetailOperationsListThreadMessagesQueryKey,
 	threadOperationsListThreadsQueryKey,
 	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
@@ -91,6 +90,8 @@ import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useRescueCandidates } from "@/hooks/useRescueCandidates";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useSemanticSearch } from "@/hooks/useSemanticSearch";
+import { useThreadActions } from "@/hooks/useThreadActions";
+import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
 import { useToggleStar } from "@/hooks/useToggleStar";
 import { useTriageKeyboard } from "@/hooks/useTriageKeyboard";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
@@ -503,15 +504,9 @@ function MailboxPaneProvider({
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
 
-	const { deleteMessages: toolbarDelete } = useDeleteMessages({
+	const toolbarActions = useThreadActions({
+		thread: selectedThread,
 		mailboxId,
-		threadId: selectedThread?.threadId,
-		onAfterOptimisticRemove: handleDeselectIfRemoved,
-	});
-
-	const { moveMessages: toolbarMove } = useMoveMessages({
-		mailboxId,
-		threadId: selectedThread?.threadId,
 		accountId: mailboxAccountId,
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
 	});
@@ -522,63 +517,19 @@ function MailboxPaneProvider({
 
 	const { archiveMailboxId } = useArchiveMailbox(mailboxAccountId);
 
-	// Get thread message ids from cache; fall back to representative message id.
-	const getThreadMessageIds = useCallback(
-		(thread: RemitImapThreadMessageResponse) => {
-			const threadKey = threadDetailOperationsListThreadMessagesQueryKey({
-				path: { threadId: thread.threadId },
-			});
-			const cached = queryClient.getQueriesData<{
-				items: { messageId: string }[];
-			}>({ queryKey: threadKey });
-			const ids = cached.flatMap(
-				([, data]) => data?.items.map((m) => m.messageId) ?? [],
-			);
-			return ids.length > 0 ? ids : [thread.messageId];
-		},
-		[queryClient],
-	);
-
-	const handleToolbarDelete = useCallback(() => {
-		if (!selectedThread) return;
-		const messageIds = getThreadMessageIds(selectedThread);
-		toolbarDelete(messageIds);
-	}, [selectedThread, getThreadMessageIds, toolbarDelete]);
-
-	const handleToolbarMove = useCallback(
-		(destMailboxId: string) => {
-			if (!selectedThread) return;
-			const messageIds = getThreadMessageIds(selectedThread);
-			toolbarMove(messageIds, destMailboxId);
-		},
-		[selectedThread, getThreadMessageIds, toolbarMove],
-	);
-
-	const { toggleStar: toolbarToggleStar } = useToggleStar({
-		threadId: selectedThread?.threadId ?? "",
-		mailboxId,
-	});
-
-	const handleToolbarStar = useCallback(() => {
-		if (!selectedThread) return;
-		toolbarToggleStar(selectedThread.messageId, selectedThread.hasStars);
-	}, [selectedThread, toolbarToggleStar]);
+	const getThreadMessageIds = useThreadMessageIds();
 
-	const [toolbarComposeRequest, setToolbarComposeRequest] =
-		useState<ComposeMode | null>(null);
+	const { requestCompose: setToolbarComposeRequest } = toolbarActions;
 
 	const handleToolbarReply = useCallback(() => {
 		setToolbarComposeRequest("reply");
-	}, []);
+	}, [setToolbarComposeRequest]);
 	const handleToolbarReplyAll = useCallback(() => {
 		setToolbarComposeRequest("reply_all");
-	}, []);
+	}, [setToolbarComposeRequest]);
 	const handleToolbarForward = useCallback(() => {
 		setToolbarComposeRequest("forward");
-	}, []);
-	const handleClearComposeRequest = useCallback(() => {
-		setToolbarComposeRequest(null);
-	}, []);
+	}, [setToolbarComposeRequest]);
 
 	const { state: composeState, openCompose, closeCompose } = useCompose();
 
@@ -688,15 +639,15 @@ function MailboxPaneProvider({
 	const triageReply = useCallback(() => {
 		if (ensureFocusedOpen()) return;
 		if (selectedThread) setToolbarComposeRequest("reply");
-	}, [ensureFocusedOpen, selectedThread]);
+	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
 	const triageReplyAll = useCallback(() => {
 		if (ensureFocusedOpen()) return;
 		if (selectedThread) setToolbarComposeRequest("reply_all");
-	}, [ensureFocusedOpen, selectedThread]);
+	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
 	const triageForward = useCallback(() => {
 		if (ensureFocusedOpen()) return;
 		if (selectedThread) setToolbarComposeRequest("forward");
-	}, [ensureFocusedOpen, selectedThread]);
+	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
 
 	const triageTargetMessageIds = useCallback((): string[] => {
 		if (triageSelectedIds.length > 0) return triageSelectedIds;
@@ -889,15 +840,15 @@ function MailboxPaneProvider({
 		onTriageContextChange: handleTriageContextChange,
 		listCommandsRef,
 		onRetry: () => refetch(),
-		toolbarComposeRequest,
+		toolbarComposeRequest: toolbarActions.composeRequest,
 		onToolbarReply: handleToolbarReply,
 		onToolbarReplyAll: handleToolbarReplyAll,
 		onToolbarForward: handleToolbarForward,
-		onClearComposeRequest: handleClearComposeRequest,
-		onToolbarDelete: handleToolbarDelete,
-		onToolbarStar: handleToolbarStar,
+		onClearComposeRequest: toolbarActions.clearComposeRequest,
+		onToolbarDelete: toolbarActions.deleteThread,
+		onToolbarStar: toolbarActions.toggleStar,
 		onToolbarDiscardDraft: handleToolbarDiscardDraft,
-		onToolbarMove: handleToolbarMove,
+		onToolbarMove: toolbarActions.moveThread,
 		composeState,
 		closeCompose,
 		hasRemitDraftOpen,

package/src/hooks/useThreadActions.ts

@@ -0,0 +1,101 @@
+/**
+ * useThreadActions — the reading pane's verbs for one open thread.
+ *
+ * Delete, move, star and the compose requests (reply / reply-all / forward),
+ * over the same mutation hooks the mailbox list uses. The mailbox view keys
+ * them by its route; the brief and Flagged are cross-account, so they key by
+ * the open thread's own `mailboxId` / `accountConfigId` (#149).
+ */
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useCallback, useState } from "react";
+import type { ComposeMode } from "@/components/compose/ComposeProvider";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useMoveMessages } from "@/hooks/useMoveMessages";
+import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
+import { useToggleStar } from "@/hooks/useToggleStar";
+
+interface UseThreadActionsOptions {
+	thread: RemitImapThreadMessageResponse | undefined;
+	/** Mailbox whose listings the mutations patch. Defaults to the thread's own. */
+	mailboxId?: string;
+	/** Account the move picker offers folders from. Defaults to the thread's own. */
+	accountId?: string;
+	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+}
+
+export interface ThreadActions {
+	mailboxId: string | undefined;
+	accountId: string | undefined;
+	isStarred: boolean | undefined;
+	deleteThread: () => void;
+	moveThread: (destinationMailboxId: string) => void;
+	toggleStar: () => void;
+	composeRequest: ComposeMode | null;
+	requestCompose: (mode: ComposeMode) => void;
+	clearComposeRequest: () => void;
+}
+
+export const useThreadActions = ({
+	thread,
+	mailboxId,
+	accountId,
+	onAfterOptimisticRemove,
+}: UseThreadActionsOptions): ThreadActions => {
+	const resolvedMailboxId = mailboxId ?? thread?.mailboxId;
+	const resolvedAccountId = accountId ?? thread?.accountConfigId;
+	const threadMessageIds = useThreadMessageIds();
+
+	const { deleteMessages } = useDeleteMessages({
+		mailboxId: resolvedMailboxId ?? "",
+		threadId: thread?.threadId,
+		accountId: resolvedAccountId,
+		onAfterOptimisticRemove,
+	});
+
+	const { moveMessages } = useMoveMessages({
+		mailboxId: resolvedMailboxId ?? "",
+		threadId: thread?.threadId,
+		accountId: resolvedAccountId,
+		onAfterOptimisticRemove,
+	});
+
+	const { toggleStar: toggleStarFor } = useToggleStar({
+		threadId: thread?.threadId ?? "",
+		mailboxId: resolvedMailboxId ?? "",
+	});
+
+	const deleteThread = useCallback(() => {
+		if (!thread) return;
+		deleteMessages(threadMessageIds(thread));
+	}, [thread, threadMessageIds, deleteMessages]);
+
+	const moveThread = useCallback(
+		(destinationMailboxId: string) => {
+			if (!thread) return;
+			moveMessages(threadMessageIds(thread), destinationMailboxId);
+		},
+		[thread, threadMessageIds, moveMessages],
+	);
+
+	const toggleStar = useCallback(() => {
+		if (!thread) return;
+		toggleStarFor(thread.messageId, thread.hasStars);
+	}, [thread, toggleStarFor]);
+
+	const [composeRequest, setComposeRequest] = useState<ComposeMode | null>(
+		null,
+	);
+	const clearComposeRequest = useCallback(() => setComposeRequest(null), []);
+
+	return {
+		mailboxId: resolvedMailboxId,
+		accountId: resolvedAccountId,
+		isStarred: thread?.hasStars,
+		deleteThread,
+		moveThread,
+		toggleStar,
+		composeRequest,
+		requestCompose: setComposeRequest,
+		clearComposeRequest,
+	};
+};

package/src/hooks/useThreadMessageIds.ts

@@ -0,0 +1,33 @@
+import { threadDetailOperationsListThreadMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+/**
+ * Every message id in a thread, read from the cached thread-messages listing.
+ *
+ * A toolbar verb acts on the whole conversation, not the one row that
+ * represents it in a list. When the conversation has not been opened yet its
+ * messages are not cached, and the representative message id is the best the
+ * caller can do.
+ */
+export const useThreadMessageIds = (): ((
+	thread: RemitImapThreadMessageResponse,
+) => string[]) => {
+	const queryClient = useQueryClient();
+	return useCallback(
+		(thread: RemitImapThreadMessageResponse) => {
+			const threadKey = threadDetailOperationsListThreadMessagesQueryKey({
+				path: { threadId: thread.threadId },
+			});
+			const cached = queryClient.getQueriesData<{
+				items: { messageId: string }[];
+			}>({ queryKey: threadKey });
+			const ids = cached.flatMap(
+				([, data]) => data?.items.map((m) => m.messageId) ?? [],
+			);
+			return ids.length > 0 ? ids : [thread.messageId];
+		},
+		[queryClient],
+	);
+};