@remit/web-client 0.0.48 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "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": {
@@ -97,8 +97,6 @@
     "@aws-sdk/client-dynamodb": "*",
     "@aws-sdk/client-sqs": "*",
     "@aws-sdk/lib-dynamodb": "*",
-    "@types/nodemailer": "*",
-    "nodemailer": "^9.0.3",
     "@playwright/test": "1.58.2",
     "@remit/drizzle-service": "*",
     "@remit/electrodb-entities": "*",
@@ -107,11 +105,15 @@
     "@tailwindcss/vite": "^4",
     "@tanstack/router-generator": "^1",
     "@tanstack/router-plugin": "^1",
+    "@types/jsdom": "^28.0.3",
+    "@types/nodemailer": "*",
     "@types/pngjs": "^6.0.5",
     "@vitejs/plugin-react": "^4",
     "electrodb": "*",
     "esbuild": "*",
     "expect-env": "*",
+    "jsdom": "^29.1.1",
+    "nodemailer": "^9.0.3",
     "pngjs": "^5",
     "react": "^19",
     "react-dom": "^19.2.4",

package/src/components/mail/BriefPane.tsx

@@ -33,6 +33,14 @@ 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 { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useToggleReadFor } from "@/hooks/useMarkAsRead";
+import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import {
+	type TriageContext,
+	useTriageContext,
+	useTriageLayer,
+} from "@/hooks/useTriageLayer";
 import {
 	buildConversationTarget,
 	type ConversationTarget,
@@ -51,6 +59,17 @@ 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;
+	/** 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 BriefPaneCtx = createContext<BriefPaneContextValue | null>(null);
@@ -136,6 +155,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",
@@ -148,6 +189,63 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		});
 	}, [navigate]);
 
+	const triage = useTriageContext();
+
+	// A brief 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 briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
+	const { deleteMessages } = useDeleteMessages({
+		mailboxId: selectedThread?.mailboxId ?? "",
+		messages: briefThreads,
+		onAfterOptimisticRemove: handleDeselectIfRemoved,
+	});
+	const { toggleReadFor } = useToggleReadFor({
+		mailboxId: selectedThread?.mailboxId ?? "",
+		messages: briefThreads,
+	});
+	const handleMarkMessagesRead = useCallback(
+		(messageIds: string[]) => toggleReadFor(messageIds, true),
+		[toggleReadFor],
+	);
+
+	const focusedThreadId = triage.focusedMessageId;
+	const focusedThread = useMemo(
+		() => threadsData?.items.find((t) => t.messageId === focusedThreadId),
+		[threadsData, 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));
+			},
+			goFlagged: () => navigate({ to: "/mail/flagged" }),
+			goSettings: () => navigate({ to: "/settings" }),
+		},
+	});
+
 	const ctx: BriefPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
@@ -155,6 +253,12 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		onSelectMessage: handleSelectMessage,
 		onSelectSearchResult: handleSelectSearchResult,
 		onCloseThread: handleCloseThread,
+		actions,
+		triage,
+		onDeleteMessages: deleteMessages,
+		onMarkMessagesRead: handleMarkMessagesRead,
+		nextMessageId,
+		previousMessageId,
 	};
 
 	return <BriefPaneCtx.Provider value={ctx}>{children}</BriefPaneCtx.Provider>;
@@ -168,8 +272,14 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
  * Daily brief list. Mount in the `list` slot of `AppShellSlotted`.
  */
 function BriefList() {
-	const { selectedMessageId, onSelectMessage, onSelectSearchResult } =
-		useBriefPane();
+	const {
+		selectedMessageId,
+		onSelectMessage,
+		onSelectSearchResult,
+		triage,
+		onDeleteMessages,
+		onMarkMessagesRead,
+	} = useBriefPane();
 	const { accounts } = useMailContext();
 
 	return (
@@ -178,6 +288,10 @@ function BriefList() {
 			selectedMessageId={selectedMessageId}
 			onSelectMessage={onSelectMessage}
 			onSelectSearchResult={onSelectSearchResult}
+			commandsRef={triage.listCommandsRef}
+			onTriageContextChange={triage.onTriageContextChange}
+			onDeleteMessages={onDeleteMessages}
+			onMarkMessagesRead={onMarkMessagesRead}
 		/>
 	);
 }
@@ -187,7 +301,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 +317,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 +345,8 @@ function BriefReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
+						composeRequest={actions.composeRequest}
+						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />
@@ -250,6 +385,8 @@ function BriefPhone() {
 		onSelectMessage,
 		onSelectSearchResult,
 		onCloseThread,
+		nextMessageId,
+		previousMessageId,
 	} = useBriefPane();
 	const { accounts, intelligenceOpen, onToggleIntelligence } = useMailContext();
 
@@ -264,6 +401,15 @@ function BriefPhone() {
 					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
 					onOpenIntelligence={onToggleIntelligence}
+					onSwipeNext={
+						nextMessageId ? () => onSelectMessage(nextMessageId) : undefined
+					}
+					onSwipePrevious={
+						previousMessageId
+							? () => onSelectMessage(previousMessageId)
+							: undefined
+					}
+					mobileIntelligenceOpen={intelligenceOpen}
 				/>
 				<Drawer
 					isOpen={intelligenceOpen}

package/src/components/mail/DailyBrief.tsx

@@ -34,10 +34,11 @@ import {
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { AlertCircle, RefreshCw, Sparkles } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { type RefObject, useCallback, useMemo, useState } from "react";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useSemanticSearch } from "@/hooks/useSemanticSearch";
+import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { sortAccountsByCreatedAt } from "@/lib/account-order";
 import {
 	groupBriefSections,
@@ -51,7 +52,12 @@ import { useMailContext } from "@/lib/mail-context";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { MailListHeader } from "./MailListHeader";
+import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
+import {
+	ThreadListInteraction,
+	ThreadListSelectionBar,
+} from "./ThreadListInteraction";
 
 /* The brief's attribute chips as predicates (mirrors the kit `briefFilterChips`
    ids) so the phone search takeover narrows results the same way the list does. */
@@ -134,6 +140,12 @@ interface DailyBriefProps {
 	 * so it opens even when its message isn't in the loaded brief list.
 	 */
 	onSelectSearchResult?: (result: SearchResult) => void;
+	/** Where the list publishes the commands the keyboard layer drives. */
+	commandsRef?: RefObject<MessageListCommands | null>;
+	/** Cursor / selection / display order, reported up to the triage layer. */
+	onTriageContextChange?: (context: TriageContextUpdate) => void;
+	onDeleteMessages?: (messageIds: string[]) => void;
+	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 
 export function DailyBrief({
@@ -141,6 +153,10 @@ export function DailyBrief({
 	selectedMessageId,
 	onSelectMessage,
 	onSelectSearchResult,
+	commandsRef,
+	onTriageContextChange,
+	onDeleteMessages,
+	onMarkMessagesRead,
 }: DailyBriefProps) {
 	const { searchQuery, resultFolderIndex } = useMailContext();
 	const tokenContext = useSearchTokenContext();
@@ -405,17 +421,33 @@ export function DailyBrief({
 			<p className="text-xs text-fg-subtle">Nothing needs attention.</p>
 		</div>
 	) : (
-		<BriefSections
-			sections={sections}
-			Row={MessageRow}
-			briefCategory={selectedCategory}
-			onSelectBriefCategory={setSelectedCategory}
-			sources={accountSources}
-			sourcesNote={mutedCount > 0 ? `+${mutedCount} muted` : undefined}
-			onSelectSource={setSelectedAccountId}
-			selectedThreadId={selectedMessageId}
-			onSelectThread={onSelectMessage}
-		/>
+		<ThreadListInteraction
+			selectedMessageId={selectedMessageId}
+			onOpen={(id) => onSelectMessage?.(id)}
+			onDeleteMessages={onDeleteMessages}
+			commandsRef={commandsRef}
+			onTriageContextChange={onTriageContextChange}
+		>
+			<div className="flex h-full min-h-0 flex-col">
+				{onDeleteMessages ? (
+					<ThreadListSelectionBar onMarkAsRead={onMarkMessagesRead} />
+				) : null}
+				<div className="min-h-0 flex-1">
+					<BriefSections
+						sections={sections}
+						Row={MessageRow}
+						manageFocus={false}
+						briefCategory={selectedCategory}
+						onSelectBriefCategory={setSelectedCategory}
+						sources={accountSources}
+						sourcesNote={mutedCount > 0 ? `+${mutedCount} muted` : undefined}
+						onSelectSource={setSelectedAccountId}
+						selectedThreadId={selectedMessageId}
+						onSelectThread={onSelectMessage}
+					/>
+				</div>
+			</div>
+		</ThreadListInteraction>
 	);
 
 	return (

package/src/components/mail/FlaggedList.tsx

@@ -15,16 +15,15 @@
  */
 import {
 	flaggedFilterConfig,
-	LIST_ROW_SELECTOR,
 	MessageListPane,
 	type ThreadRowData,
-	useRovingFocus,
 } from "@remit/ui";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { type RefObject, useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
+import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import {
 	matchesBriefSearch,
 	matchesSearchTokens,
@@ -36,7 +35,12 @@ import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { dedupeByThread } from "@/lib/starred-rows";
 import { MailViewChrome } from "./MailViewChrome";
+import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
+import {
+	ThreadListInteraction,
+	ThreadListSelectionBar,
+} from "./ThreadListInteraction";
 
 const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
 	unread: (t) => !t.isRead,
@@ -46,19 +50,26 @@ const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
 interface FlaggedListProps {
 	selectedMessageId?: string;
 	onSelectMessage?: (id: string) => void;
+	/** Where the list publishes the commands the keyboard layer drives. */
+	commandsRef?: RefObject<MessageListCommands | null>;
+	/** Cursor / selection / display order, reported up to the triage layer. */
+	onTriageContextChange?: (context: TriageContextUpdate) => void;
+	onDeleteMessages?: (messageIds: string[]) => void;
+	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 
 export function FlaggedList({
 	selectedMessageId,
 	onSelectMessage,
+	commandsRef,
+	onTriageContextChange,
+	onDeleteMessages,
+	onMarkMessagesRead,
 }: FlaggedListProps) {
 	const { searchQuery, resultFolderIndex } = useMailContext();
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
 
-	const listRef = useRef<HTMLDivElement>(null);
-	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
-
 	const [selectedCategory, setSelectedCategory] = useState("all");
 	const [activeFilters, setActiveFilters] = useState<ReadonlySet<string>>(
 		new Set(),
@@ -135,28 +146,41 @@ export function FlaggedList({
 	}, []);
 
 	const listBody = (
-		<div ref={listRef} className="flex-1 overflow-y-auto">
-			<div className="divide-y divide-line">
-				{rows.map((thread) => (
-					<MessageRow
-						key={thread.id}
-						thread={thread}
-						active={thread.id === selectedMessageId}
-						onClick={() => onSelectMessage?.(thread.id)}
-					/>
-				))}
+		<ThreadListInteraction
+			selectedMessageId={selectedMessageId}
+			onOpen={(id) => onSelectMessage?.(id)}
+			onDeleteMessages={onDeleteMessages}
+			commandsRef={commandsRef}
+			onTriageContextChange={onTriageContextChange}
+		>
+			<div className="flex h-full min-h-0 flex-col">
+				{onDeleteMessages ? (
+					<ThreadListSelectionBar onMarkAsRead={onMarkMessagesRead} />
+				) : null}
+				<div className="flex-1 overflow-y-auto">
+					<div className="divide-y divide-line">
+						{rows.map((thread) => (
+							<MessageRow
+								key={thread.id}
+								thread={thread}
+								active={thread.id === selectedMessageId}
+								onClick={() => onSelectMessage?.(thread.id)}
+							/>
+						))}
+					</div>
+					{hasNextPage ? (
+						<button
+							type="button"
+							className="w-full py-3 text-sm text-muted hover:text-fg disabled:opacity-50"
+							onClick={() => fetchNextPage()}
+							disabled={isFetchingNextPage}
+						>
+							{isFetchingNextPage ? "Loading…" : "Load more"}
+						</button>
+					) : null}
+				</div>
 			</div>
-			{hasNextPage ? (
-				<button
-					type="button"
-					className="w-full py-3 text-sm text-muted hover:text-fg disabled:opacity-50"
-					onClick={() => fetchNextPage()}
-					disabled={isFetchingNextPage}
-				>
-					{isFetchingNextPage ? "Loading…" : "Load more"}
-				</button>
-			) : null}
-		</div>
+		</ThreadListInteraction>
 	);
 
 	return (