@remit/web-client 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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/auth/better-auth-config.ts

@@ -1,4 +1,5 @@
 import { createAuthClient } from "better-auth/react";
+import { taggedFetch } from "../lib/network-error";
 import { getRuntimeConfig } from "../runtime-config";
 
 /**
@@ -51,7 +52,9 @@ const decodeExp = (token: string): number => {
 };
 
 const requestToken = async (): Promise<string | null> => {
-	const res = await fetch("/api/auth/token", { credentials: "include" });
+	const res = await taggedFetch("/api/auth/token", {
+		credentials: "include",
+	});
 	if (!res.ok) return null;
 	const body: unknown = await res.json();
 	if (

package/src/components/compose/ComposeForm.tsx

@@ -419,6 +419,7 @@ export const ComposeForm = ({
 		pushError({
 			title: "Couldn't save draft",
 			detail: formatErrorDetail(saveError) ?? "Saving the draft failed.",
+			error: saveError,
 		});
 	}, [saveError, pushError]);
 
@@ -541,6 +542,7 @@ export const ComposeForm = ({
 					pushError({
 						title: "Couldn't send message",
 						detail: formatErrorDetail(error) ?? "Saving the draft failed.",
+						error,
 					});
 					return null;
 				});
@@ -562,6 +564,7 @@ export const ComposeForm = ({
 						(createdThisAttempt
 							? "The draft was saved but the send request failed. Try again from the Outbox."
 							: "The send request failed. Try again."),
+					error,
 				});
 				return null;
 			});

package/src/components/mail/IntelligencePane.tsx

@@ -313,15 +313,17 @@ function WiredPanel({
 		[updateFlags],
 	);
 
-	// Per-sender flag toggles are always wired. They stay active even before the
-	// address record resolves: `updateFlags` surfaces feedback when `addressId`
-	// is missing rather than letting the button look active but do nothing.
+	// Every per-sender flag toggle PATCHes the sender's address row, so none of
+	// them can be serviced until that row resolves. Leave them unwired until it
+	// does: the panel renders an unwired quick action as disabled, so the flow is
+	// never reachable in a state where a click can only fail (issue #51).
+	const canUpdateFlags = addressId !== undefined;
 	const actions: IntelligenceQuickActions = {
-		onToggleVip: handleToggleVip,
-		onToggleMute: handleToggleMute,
-		onToggleBlock: handleToggleBlock,
-		onToggleUnsubscribe: handleToggleUnsubscribe,
-		onReclassify: () => setReclassifyOpen(true),
+		onToggleVip: canUpdateFlags ? handleToggleVip : undefined,
+		onToggleMute: canUpdateFlags ? handleToggleMute : undefined,
+		onToggleBlock: canUpdateFlags ? handleToggleBlock : undefined,
+		onToggleUnsubscribe: canUpdateFlags ? handleToggleUnsubscribe : undefined,
+		onReclassify: canUpdateFlags ? () => setReclassifyOpen(true) : undefined,
 		onNotSpam: spamAction === "notSpam" ? handleNotSpam : undefined,
 		onMarkSpam: spamAction === "markSpam" ? handleMarkSpam : undefined,
 	};

package/src/components/mail/MailboxPane.tsx

@@ -43,6 +43,7 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
+	type RefObject,
 	useCallback,
 	useContext,
 	useEffect,
@@ -57,7 +58,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";
@@ -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]);
@@ -764,8 +791,29 @@ function MailboxPaneProvider({
 	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,
@@ -831,6 +879,7 @@ function MailboxPaneProvider({
 		hasMore: hasNextPage,
 		isLoadingMore: isFetchingNextPage,
 		onTriageContextChange: handleTriageContextChange,
+		listCommandsRef,
 		onRetry: () => refetch(),
 		toolbarComposeRequest,
 		onToolbarReply: handleToolbarReply,
@@ -884,6 +933,7 @@ function MailboxList() {
 		isSpamFolder,
 		rescueCandidates,
 		onTriageContextChange,
+		listCommandsRef,
 		onRetry,
 		filterCategory,
 		filterAttributes,
@@ -973,6 +1023,7 @@ function MailboxList() {
 			listTitle={listTitle}
 			hideHeader
 			onTriageContextChange={onTriageContextChange}
+			commandsRef={listCommandsRef}
 		/>
 	);
 

package/src/components/mail/MessageActionMenu.tsx

@@ -27,6 +27,7 @@ import { formatErrorDetail } from "@/components/ui/error-banners";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -34,15 +35,12 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-interface ThreadsListPage {
-	items: RemitImapThreadMessageResponse[];
-	[key: string]: unknown;
-}
-
-interface ThreadsListData {
-	pages: ThreadsListPage[];
-	pageParams: Array<string | undefined>;
-}
+/**
+ * Either shape a thread list/search query caches — the infinite mailbox list
+ * or a single-shot page. `setQueriesData` matches by key prefix, so the
+ * optimistic updater sees both.
+ */
+type ThreadsListData = ThreadListCache;
 
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
@@ -169,26 +167,20 @@ export const MessageActionMenu = ({
 				},
 			);
 
-			const patchListData = (old: ThreadsListData | undefined) => {
-				if (!old) return old;
-				return {
-					...old,
-					pages: old.pages.map((page) => ({
-						...page,
-						items: page.items.map((item) =>
-							targetIds.has(item.messageId)
-								? { ...item, isRead: isReadNext }
-								: item,
-						),
-					})),
-				};
-			};
+			const patchListData = (old: unknown) =>
+				patchThreadListCache(old, (items) =>
+					items.map((item) =>
+						targetIds.has(item.messageId)
+							? { ...item, isRead: isReadNext }
+							: item,
+					),
+				);
 
-			queryClient.setQueriesData<ThreadsListData>(
+			queryClient.setQueriesData(
 				{ queryKey: threadsListPrefix },
 				patchListData,
 			);
-			queryClient.setQueriesData<ThreadsListData>(
+			queryClient.setQueriesData(
 				{ queryKey: threadsSearchPrefix },
 				patchListData,
 			);
@@ -214,6 +206,7 @@ export const MessageActionMenu = ({
 			pushError({
 				title: isReadNext ? "Couldn't mark as read" : "Couldn't mark as unread",
 				detail: formatErrorDetail(err),
+				error: err,
 			});
 		},
 		onSettled: (_data, _err, _vars, context) => {

package/src/components/mail/MessageDetail.tsx

@@ -74,6 +74,7 @@ export const MessageDetail = ({ messageId }: MessageDetailProps) => {
 			pushError({
 				title: "Couldn't mark message as read",
 				detail: formatErrorDetail(error),
+				error,
 			});
 		},
 	});