@remit/web-client 0.0.48 → 0.0.50

package/src/components/mail/FlaggedPane.tsx

@@ -35,7 +35,15 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
+import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import {
+	type TriageContext,
+	useTriageContext,
+	useTriageLayer,
+} from "@/hooks/useTriageLayer";
 import { useMailContext } from "@/lib/mail-context";
 
 /* ------------------------------------------------------------------ */
@@ -47,6 +55,17 @@ 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;
+	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
+	triage: TriageContext;
+	onDeleteMessages: (messageIds: string[]) => void;
+	onMarkMessagesRead: (messageIds: string[]) => void;
+	nextMessageId: string | undefined;
+	previousMessageId: string | undefined;
 }
 
 const FlaggedPaneCtx = createContext<FlaggedPaneContextValue | null>(null);
@@ -96,11 +115,87 @@ 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 triage = useTriageContext();
+
+	// A Flagged selection spans accounts and mailboxes, so the listings these
+	// patch are resolved from each message's own mailbox — the open thread's is
+	// only the fallback.
+	const { deleteMessages } = useDeleteMessages({
+		mailboxId: selectedThread?.mailboxId ?? "",
+		messages: threads,
+		onAfterOptimisticRemove: handleDeselectIfRemoved,
+	});
+	const { toggleReadFor } = useToggleReadFor({
+		mailboxId: selectedThread?.mailboxId ?? "",
+		messages: threads,
+	});
+	const handleMarkMessagesRead = useCallback(
+		(messageIds: string[]) => toggleReadFor(messageIds, true),
+		[toggleReadFor],
+	);
+
+	const focusedThreadId = triage.focusedMessageId;
+	const focusedThread = useMemo(
+		() => threads.find((t) => t.messageId === focusedThreadId),
+		[threads, focusedThreadId],
+	);
+	const triageTarget = focusedThread ?? selectedThread;
+	const triageActions = useThreadActions({ thread: triageTarget });
+
+	const { nextMessageId, previousMessageId } = useTriageLayer({
+		context: triage,
+		orderedIds: triage.orderedIds,
+		selectedMessageId,
+		onClose: handleCloseThread,
+		handlers: {
+			reply: () => actions.requestCompose("reply"),
+			replyAll: () => actions.requestCompose("reply_all"),
+			forward: () => actions.requestCompose("forward"),
+			delete: () => {
+				if (triage.listCommandsRef.current?.requestDelete()) return;
+				triageActions.deleteThread();
+			},
+			toggleStar: triageActions.toggleStar,
+			toggleRead: () => {
+				const ids =
+					triage.selectedIds.length > 0
+						? triage.selectedIds
+						: triageTarget
+							? [triageTarget.messageId]
+							: [];
+				if (ids.length === 0) return;
+				toggleReadFor(ids, !(triageTarget?.isRead ?? false));
+			},
+			goBrief: () => navigate({ to: "/mail" }),
+			goSettings: () => navigate({ to: "/settings" }),
+		},
+	});
+
 	const ctx: FlaggedPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
 		onSelectMessage: handleSelectMessage,
 		onCloseThread: handleCloseThread,
+		actions,
+		triage,
+		onDeleteMessages: deleteMessages,
+		onMarkMessagesRead: handleMarkMessagesRead,
+		nextMessageId,
+		previousMessageId,
 	};
 
 	return (
@@ -114,11 +209,21 @@ function FlaggedPaneProvider({
 
 /** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
 function FlaggedListSlot() {
-	const { selectedMessageId, onSelectMessage } = useFlaggedPane();
+	const {
+		selectedMessageId,
+		onSelectMessage,
+		triage,
+		onDeleteMessages,
+		onMarkMessagesRead,
+	} = useFlaggedPane();
 	return (
 		<FlaggedList
 			selectedMessageId={selectedMessageId}
 			onSelectMessage={onSelectMessage}
+			commandsRef={triage.listCommandsRef}
+			onTriageContextChange={triage.onTriageContextChange}
+			onDeleteMessages={onDeleteMessages}
+			onMarkMessagesRead={onMarkMessagesRead}
 		/>
 	);
 }
@@ -128,7 +233,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 +249,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 +276,8 @@ function FlaggedReading() {
 						mailboxId={selectedThread.mailboxId}
 						subject={selectedThread.subject}
 						authenticity={selectedThread.authenticity}
+						composeRequest={actions.composeRequest}
+						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />
@@ -181,7 +307,13 @@ function FlaggedIntelligence() {
 
 /** Phone view: ConversationView when a thread is open, else the flat list. */
 function FlaggedPhone() {
-	const { selectedThread, onCloseThread } = useFlaggedPane();
+	const {
+		selectedThread,
+		onCloseThread,
+		onSelectMessage,
+		nextMessageId,
+		previousMessageId,
+	} = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
 	if (selectedThread) {
@@ -194,6 +326,15 @@ function FlaggedPhone() {
 					authenticity={selectedThread.authenticity}
 					onBack={onCloseThread}
 					onOpenIntelligence={onToggleIntelligence}
+					onSwipeNext={
+						nextMessageId ? () => onSelectMessage(nextMessageId) : undefined
+					}
+					onSwipePrevious={
+						previousMessageId
+							? () => onSelectMessage(previousMessageId)
+							: undefined
+					}
+					mobileIntelligenceOpen={intelligenceOpen}
 				/>
 				<Drawer
 					isOpen={intelligenceOpen}

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,10 +90,11 @@ 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 { useTriageContext, useTriageLayer } from "@/hooks/useTriageLayer";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
-import { adjacentMessageId } from "@/lib/adjacent-message";
 import {
 	buildConversationTarget,
 	type ConversationTarget,
@@ -432,32 +432,13 @@ function MailboxPaneProvider({
 		],
 	);
 
-	const [triageFocusedId, setTriageFocusedId] = useState<string | undefined>(
-		undefined,
-	);
-	const [triageSelectedIds, setTriageSelectedIds] = useState<string[]>([]);
-	// The mounted message list publishes its navigation/selection commands here.
-	// Null whenever no list is mounted (reading-only phone view, drafts) — the
-	// keyboard layer then simply has nothing to drive.
-	const listCommandsRef = useRef<MessageListCommands | null>(null);
-	// Whether a message list is mounted and serving commands, and whether it has
-	// a modal that owns the keyboard. Both drive which keys this route claims.
-	const [hasList, setHasList] = useState(false);
-	const [listBlocksKeyboard, setListBlocksKeyboard] = useState(false);
-	const handleTriageContextChange = useCallback(
-		(context: {
-			focusedMessageId: string | undefined;
-			selectedIds: string[];
-			hasList: boolean;
-			blocksKeyboard: boolean;
-		}) => {
-			setTriageFocusedId(context.focusedMessageId);
-			setTriageSelectedIds(context.selectedIds);
-			setHasList(context.hasList);
-			setListBlocksKeyboard(context.blocksKeyboard);
-		},
-		[],
-	);
+	const triage = useTriageContext();
+	const {
+		listCommandsRef,
+		onTriageContextChange: handleTriageContextChange,
+		focusedMessageId: triageFocusedId,
+		selectedIds: triageSelectedIds,
+	} = triage;
 
 	const focusedThread =
 		threads.find((t) => t.messageId === triageFocusedId) ?? selectedThread;
@@ -503,15 +484,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 +497,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 getThreadMessageIds = useThreadMessageIds();
 
-	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 [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();
 
@@ -613,22 +544,19 @@ function MailboxPaneProvider({
 		closeCompose,
 	]);
 
-	// Esc unwinds one step at a time: an active selection first, then the open
-	// thread.
-	const goBack = useCallback(() => {
-		if (listCommandsRef.current?.clearSelection()) return;
-		if (selectedMessageId) {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-				}),
-			});
-		}
-	}, [selectedMessageId, mailboxId, navigate]);
+	// Esc unwinds one step at a time: an active selection first (handled by the
+	// triage layer), then the open thread.
+	const closeThread = useCallback(() => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: (prev: Record<string, unknown>) => ({
+				...prev,
+				selectedMessageId: undefined,
+				selectedThreadId: undefined,
+			}),
+		});
+	}, [mailboxId, navigate]);
 
 	const messageIdsForFocusedThread = useCallback(
 		(thread: typeof focusedThread): string[] => {
@@ -688,15 +616,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;
@@ -710,7 +638,7 @@ function MailboxPaneProvider({
 		if (listCommandsRef.current?.requestDelete()) return;
 		const ids = triageTargetMessageIds();
 		if (ids.length > 0) triageDelete(ids);
-	}, [triageTargetMessageIds, triageDelete]);
+	}, [listCommandsRef, triageTargetMessageIds, triageDelete]);
 
 	const triageMarkJunk = useCallback(() => {
 		if (!junkMailboxId) return;
@@ -798,31 +726,13 @@ function MailboxPaneProvider({
 		!!composeState.outboxMessageId &&
 		!selectedThread;
 
-	useTriageKeyboard({
-		// A modal owns the keyboard outright. Suspending the layer is what keeps a
-		// second Delete press from reaching a delete while the confirmation for
-		// the first one is still on screen.
-		enabled: !composeState.isOpen && !listBlocksKeyboard,
+	const { goBack, nextMessageId, previousMessageId } = useTriageLayer({
+		context: triage,
+		orderedIds: threads.map((t) => t.messageId),
+		selectedMessageId,
+		enabled: !composeState.isOpen,
+		onClose: closeThread,
 		handlers: {
-			// List navigation and selection, registered only while a list is
-			// mounted to serve them. An unregistered action is never
-			// preventDefault-ed, so with no list the browser keeps Enter, Space and
-			// ⌘A — select-all-text in the reading pane still works.
-			...(hasList
-				? {
-						focusNext: () => listCommandsRef.current?.focusNext(),
-						focusPrevious: () => listCommandsRef.current?.focusPrevious(),
-						focusFirst: () => listCommandsRef.current?.focusFirst(),
-						focusLast: () => listCommandsRef.current?.focusLast(),
-						openFocused: () => listCommandsRef.current?.openFocused(),
-						toggleSelect: () => listCommandsRef.current?.toggleSelect(),
-						extendSelectDown: () => listCommandsRef.current?.extendSelectDown(),
-						extendSelectUp: () => listCommandsRef.current?.extendSelectUp(),
-						selectAll: () => listCommandsRef.current?.selectAll(),
-						toggleDensity: () => listCommandsRef.current?.toggleDensity(),
-					}
-				: {}),
-			back: goBack,
 			reply: triageReply,
 			replyAll: triageReplyAll,
 			forward: triageForward,
@@ -848,14 +758,6 @@ function MailboxPaneProvider({
 		bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
 	});
 
-	const orderedMessageIds = threads.map((t) => t.messageId);
-	const nextMessageId =
-		adjacentMessageId(orderedMessageIds, selectedMessageId, "next") ??
-		undefined;
-	const previousMessageId =
-		adjacentMessageId(orderedMessageIds, selectedMessageId, "previous") ??
-		undefined;
-
 	const ctx: MailboxPaneContextValue = {
 		mailboxId,
 		selectedMessageId,
@@ -889,15 +791,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/components/mail/MessageRow.tsx

@@ -18,6 +18,7 @@ import {
 	compactRowClass,
 	type Density,
 	mergeProps,
+	type RowToggleEvent,
 	type ThreadRowData,
 	useLongPress,
 } from "@remit/ui";
@@ -26,6 +27,7 @@ import { Link } from "@tanstack/react-router";
 import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
 import type { SelectionModifiers } from "@/hooks/useSelection";
 import { cn } from "@/lib/utils";
+import { useThreadRowInteraction } from "./ThreadListInteraction";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -85,27 +87,37 @@ export interface MessageRowProps {
 const MessageRowComponent = ({
 	thread,
 	active = false,
-	focused = false,
-	isTabStop = false,
+	focused: focusedProp,
+	isTabStop: isTabStopProp,
 	density = "comfortable",
-	isDesktop = true,
+	isDesktop: isDesktopProp,
 	badge,
-	selection,
+	selection: selectionProp,
 	inListbox = false,
 	linkMailboxId,
 	onClick,
-	onFocusRow,
+	onFocusRow: onFocusRowProp,
 }: MessageRowProps) => {
 	const queryClient = useQueryClient();
 	const messageId = thread.id;
+	// A list that renders its own rows (the brief, Flagged) supplies the cursor
+	// and selection through context; the mailbox list passes them as props.
+	const fromContext = useThreadRowInteraction(messageId);
+	const focused = focusedProp ?? fromContext?.focused ?? false;
+	const isTabStop = isTabStopProp ?? fromContext?.isTabStop ?? false;
+	const selection = selectionProp ?? fromContext?.selection;
+	const onFocusRow = onFocusRowProp ?? fromContext?.onFocusRow;
+	// The cursor and the row must agree on the device: the cursor's multi-select
+	// mode is derived from it, and the row's tap semantics branch on it.
+	const isDesktop = isDesktopProp ?? fromContext?.isDesktop ?? true;
 	const isChecked = selection?.isChecked ?? false;
 	const isMultiSelectMode = selection?.isMultiSelectMode ?? false;
 	const onToggleCheck = selection?.onToggleCheck;
 	const onRowSelect = selection?.onRowSelect;
 	const onLongPress = selection?.onLongPress;
 
-	const handleCheckboxClick = useCallback(
-		(e: MouseEvent) => {
+	const handleToggleCheck = useCallback(
+		(e: RowToggleEvent) => {
 			e.preventDefault();
 			e.stopPropagation();
 			onToggleCheck?.(messageId);
@@ -242,7 +254,7 @@ const MessageRowComponent = ({
 						? {
 								checked: isChecked,
 								alwaysVisible: isMultiSelectMode,
-								onToggle: handleCheckboxClick,
+								onToggle: handleToggleCheck,
 							}
 						: undefined
 				}