@remit/web-client 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "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

@@ -14,7 +14,11 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty, type SearchResult } from "@remit/ui";
+import {
+	ReadingPaneEmpty,
+	type SearchResult,
+	useAppShellLayout,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
@@ -184,14 +188,20 @@ function BriefList() {
  */
 function BriefReading() {
 	const { conversation } = useBriefPane();
-	const { onToggleIntelligence } = useMailContext();
+	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
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const hasThread = Boolean(conversation);
+	const canToggleIntelligence = railFits && hasThread;
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
-				hasThread={Boolean(conversation)}
-				intelligenceOpen={false}
-				showIntelligenceToggle={false}
+				hasThread={hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
@@ -211,6 +221,24 @@ function BriefReading() {
 	);
 }
 
+/**
+ * Intelligence pane: IntelligencePane for the thread open in the brief.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function BriefIntelligence() {
+	const { selectedThread } = useBriefPane();
+	const { onToggleIntelligence } = useMailContext();
+
+	return (
+		<IntelligencePane
+			onClose={onToggleIntelligence}
+			thread={selectedThread}
+			mailboxId={selectedThread?.mailboxId}
+			accountId={selectedThread?.accountId}
+		/>
+	);
+}
+
 /**
  * Phone view: ConversationView when thread is open, or the DailyBrief list.
  */
@@ -272,6 +300,7 @@ function BriefPhone() {
 const BriefPane = Object.assign(BriefPaneProvider, {
 	List: BriefList,
 	Reading: BriefReading,
+	Intelligence: BriefIntelligence,
 	Phone: BriefPhone,
 });
 

package/src/components/mail/FlaggedPane.tsx

@@ -17,7 +17,7 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty } from "@remit/ui";
+import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
@@ -128,14 +128,20 @@ function FlaggedListSlot() {
  */
 function FlaggedReading() {
 	const { selectedThread } = useFlaggedPane();
-	const { onToggleIntelligence } = useMailContext();
+	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
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const hasThread = Boolean(selectedThread);
+	const canToggleIntelligence = railFits && hasThread;
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
-				hasThread={Boolean(selectedThread)}
-				intelligenceOpen={false}
-				showIntelligenceToggle={false}
+				hasThread={hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
@@ -154,6 +160,24 @@ function FlaggedReading() {
 	);
 }
 
+/**
+ * Intelligence pane: IntelligencePane for the open thread.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function FlaggedIntelligence() {
+	const { selectedThread } = useFlaggedPane();
+	const { onToggleIntelligence } = useMailContext();
+
+	return (
+		<IntelligencePane
+			onClose={onToggleIntelligence}
+			thread={selectedThread}
+			mailboxId={selectedThread?.mailboxId}
+			accountId={selectedThread?.accountId}
+		/>
+	);
+}
+
 /** Phone view: ConversationView when a thread is open, else the flat list. */
 function FlaggedPhone() {
 	const { selectedThread, onCloseThread } = useFlaggedPane();
@@ -200,6 +224,7 @@ function FlaggedPhone() {
 const FlaggedPane = Object.assign(FlaggedPaneProvider, {
 	List: FlaggedListSlot,
 	Reading: FlaggedReading,
+	Intelligence: FlaggedIntelligence,
 	Phone: FlaggedPhone,
 });
 

package/src/components/mail/MailboxPane.tsx

@@ -32,6 +32,7 @@ import {
 	ReadingPaneEmpty,
 	type RescueCandidate,
 	type SearchResult,
+	useAppShellLayout,
 } from "@remit/ui";
 import {
 	keepPreviousData,
@@ -43,6 +44,7 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
+	type RefObject,
 	useCallback,
 	useContext,
 	useEffect,
@@ -57,7 +59,10 @@ import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
-import { MessageList } from "@/components/mail/MessageList";
+import {
+	MessageList,
+	type MessageListCommands,
+} from "@/components/mail/MessageList";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { PullToRefresh } from "@/components/mail/PullToRefresh";
 import { SpamRescue } from "@/components/mail/SpamRescue";
@@ -175,7 +180,6 @@ interface MailboxPaneContextValue {
 	onSelectFilterCategory: (id: string) => void;
 	onToggleFilterAttribute: (id: string) => void;
 	onClearFilters: () => void;
-	showIntelligence: boolean;
 	intelligenceOpen: boolean;
 	onToggleIntelligence: () => void;
 	// List actions
@@ -189,7 +193,11 @@ interface MailboxPaneContextValue {
 	onTriageContextChange: (ctx: {
 		focusedMessageId: string | undefined;
 		selectedIds: string[];
+		hasList: boolean;
+		blocksKeyboard: boolean;
 	}) => void;
+	/** Where the list publishes the commands the keyboard layer drives. */
+	listCommandsRef: RefObject<MessageListCommands | null>;
 	onRetry: () => void;
 	// Toolbar / reading pane actions
 	toolbarComposeRequest: ComposeMode | null;
@@ -418,13 +426,25 @@ function MailboxPaneProvider({
 		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);
 		},
 		[],
 	);
@@ -583,7 +603,10 @@ 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",
@@ -670,7 +693,11 @@ function MailboxPaneProvider({
 		return messageIdsForFocusedThread(focusedThread);
 	}, [triageSelectedIds, messageIdsForFocusedThread, focusedThread]);
 
+	// Prefer the list's delete: it confirms the move to Trash and then places the
+	// cursor on a surviving row. Falls back to the reading pane's message when no
+	// list is mounted or nothing in it is targeted.
 	const triageDeleteAction = useCallback(() => {
+		if (listCommandsRef.current?.requestDelete()) return;
 		const ids = triageTargetMessageIds();
 		if (ids.length > 0) triageDelete(ids);
 	}, [triageTargetMessageIds, triageDelete]);
@@ -755,17 +782,36 @@ function MailboxPaneProvider({
 		}
 	}, [normalizedSearchQuery, mailboxType, telemetry]);
 
-	const hasThread = Boolean(selectedThread);
 	const hasRemitDraftOpen =
 		isDraftsMailbox &&
 		composeState.isOpen &&
 		!!composeState.outboxMessageId &&
 		!selectedThread;
-	const showIntelligence = isDesktop && intelligenceOpen && hasThread;
 
 	useTriageKeyboard({
-		enabled: !composeState.isOpen,
+		// 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,
 		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,
@@ -820,7 +866,6 @@ function MailboxPaneProvider({
 		onSelectFilterCategory,
 		onToggleFilterAttribute,
 		onClearFilters,
-		showIntelligence,
 		intelligenceOpen,
 		onToggleIntelligence,
 		onDeleteMessages: handleDeleteMessages,
@@ -831,6 +876,7 @@ function MailboxPaneProvider({
 		hasMore: hasNextPage,
 		isLoadingMore: isFetchingNextPage,
 		onTriageContextChange: handleTriageContextChange,
+		listCommandsRef,
 		onRetry: () => refetch(),
 		toolbarComposeRequest,
 		onToolbarReply: handleToolbarReply,
@@ -884,6 +930,7 @@ function MailboxList() {
 		isSpamFolder,
 		rescueCandidates,
 		onTriageContextChange,
+		listCommandsRef,
 		onRetry,
 		filterCategory,
 		filterAttributes,
@@ -973,6 +1020,7 @@ function MailboxList() {
 			listTitle={listTitle}
 			hideHeader
 			onTriageContextChange={onTriageContextChange}
+			commandsRef={listCommandsRef}
 		/>
 	);
 
@@ -1030,7 +1078,7 @@ function MailboxReading() {
 		selectedThread,
 		conversation,
 		hasRemitDraftOpen,
-		showIntelligence,
+		intelligenceOpen,
 		onToggleIntelligence,
 		toolbarComposeRequest,
 		onToolbarReply,
@@ -1043,9 +1091,12 @@ function MailboxReading() {
 		onToolbarMove,
 		composeState,
 	} = useMailboxPane();
-	const tier = useLayoutTier();
-	const isDesktop = tier === "desktop";
+	// 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
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const hasThread = Boolean(conversation);
+	const canToggleIntelligence = railFits && hasThread;
 
 	const detailPane =
 		composeState.isOpen && !conversation ? (
@@ -1073,8 +1124,8 @@ function MailboxReading() {
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
 				hasThread={hasThread}
-				intelligenceOpen={showIntelligence}
-				showIntelligenceToggle={isDesktop && hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 				onReply={hasThread ? onToolbarReply : undefined}
 				onReplyAll={hasThread ? onToolbarReplyAll : undefined}