@remit/web-client 0.0.44 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "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/MessageActionMenu.tsx

@@ -1,8 +1,6 @@
 import {
 	messageBulkOperationsUpdateFlagsMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -25,9 +23,18 @@ import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { formatErrorDetail } from "@/components/ui/error-banners";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { setReadOnItems } from "@/hooks/useMarkAsRead";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useToggleTrusted } from "@/hooks/useToggleTrusted";
-import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
+import {
+	cancelThreadListQueries,
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	type ThreadListSnapshotEntry,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -35,13 +42,6 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-/**
- * 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[];
 	data: T;
@@ -49,10 +49,9 @@ interface SnapshotEntry<T> {
 
 interface MarkUnreadContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
+	listPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
-	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+	previousThreadsList: ThreadListSnapshotEntry[];
 }
 
 interface MessageActionMenuProps {
@@ -118,17 +117,11 @@ export const MessageActionMenu = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
-			});
+			const listPrefixes = threadListCacheKeys([mailboxId]);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				cancelThreadListQueries(queryClient, listPrefixes),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -139,18 +132,10 @@ export const MessageActionMenu = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
-				)
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadsListData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
+			const previousThreadsList = snapshotThreadListQueries(
+				queryClient,
+				listPrefixes,
+			);
 
 			queryClient.setQueriesData<ThreadMessagesData>(
 				{ queryKey: threadMessagesPrefix },
@@ -158,37 +143,18 @@ export const MessageActionMenu = ({
 					if (!old) return old;
 					return {
 						...old,
-						items: old.items.map((item) =>
-							targetIds.has(item.messageId)
-								? { ...item, isRead: isReadNext }
-								: item,
-						),
+						items: setReadOnItems(old.items, targetIds, isReadNext),
 					};
 				},
 			);
 
-			const patchListData = (old: unknown) =>
-				patchThreadListCache(old, (items) =>
-					items.map((item) =>
-						targetIds.has(item.messageId)
-							? { ...item, isRead: isReadNext }
-							: item,
-					),
-				);
-
-			queryClient.setQueriesData(
-				{ queryKey: threadsListPrefix },
-				patchListData,
-			);
-			queryClient.setQueriesData(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
+			patchThreadListQueries(queryClient, listPrefixes, (items) =>
+				setReadOnItems(items, targetIds, isReadNext),
 			);
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
+				listPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -198,9 +164,7 @@ export const MessageActionMenu = ({
 				for (const entry of context.previousThreadMessages) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
-				for (const entry of context.previousThreadsList) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
+				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
 			const isReadNext = variables.body.isRead ?? true;
 			pushError({
@@ -214,10 +178,7 @@ export const MessageActionMenu = ({
 			queryClient.invalidateQueries({
 				queryKey: context.threadMessagesPrefix,
 			});
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({
-				queryKey: context.threadsSearchPrefix,
-			});
+			invalidateThreadListQueries(queryClient, context.listPrefixes);
 		},
 	});
 

package/src/components/mail/MessageBody.tsx

@@ -67,10 +67,9 @@ interface MessageBodyProps {
 	 */
 	category?: EmailRenderCategory;
 	/**
-	 * Extra classes for the `.message-body` wrapper. The single-message
-	 * reading view (`MessageDetail`) passes `px-4` here so the body shares
-	 * the header's horizontal inset (#729). `MessageCard` provides its own
-	 * `px-5` inset via the surrounding card and leaves this unset.
+	 * Extra classes for the `.message-body` wrapper. `MessageCard` leaves this
+	 * unset: the kit's `ExpandedMessage` runs the body edge to edge on a phone
+	 * and supplies the desktop inset itself.
 	 */
 	className?: string;
 }

package/src/components/mail/MobileMessageBar.tsx

@@ -1,8 +1,6 @@
 import {
 	messageBulkOperationsUpdateFlagsMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { MobileMessageActionBar, type PopoverMenuItem } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -11,6 +9,10 @@ import { useCallback } from "react";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import {
+	invalidateThreadListQueries,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface MobileMessageBarProps {
@@ -67,14 +69,10 @@ export const MobileMessageBar = ({
 					path: { threadId },
 				}),
 			});
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsListThreadsQueryKey({ path: { mailboxId } }),
-			});
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsSearchThreadsQueryKey({
-					path: { mailboxId },
-				}),
-			});
+			invalidateThreadListQueries(
+				queryClient,
+				threadListCacheKeys([mailboxId]),
+			);
 		},
 	});
 

package/src/hooks/useEscalatedActions.test.ts

@@ -0,0 +1,36 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { threadListCacheKeys } from "@/lib/thread-list-cache";
+import { mailboxesTouchedBy } from "./useEscalatedActions.js";
+
+describe("mailboxesTouchedBy", () => {
+	test("a delete or mark-read run touches only the mailbox it ran over", () => {
+		assert.deepStrictEqual(mailboxesTouchedBy({ kind: "delete" }, "mb1"), [
+			"mb1",
+		]);
+		assert.deepStrictEqual(mailboxesTouchedBy({ kind: "markRead" }, "mb1"), [
+			"mb1",
+		]);
+	});
+
+	test("a move run also touches the destination", () => {
+		assert.deepStrictEqual(
+			mailboxesTouchedBy({ kind: "move", destinationMailboxId: "mb2" }, "mb1"),
+			["mb1", "mb2"],
+		);
+	});
+
+	test("its cache keys reach the unified listing the daily brief reads", () => {
+		const keys = threadListCacheKeys(
+			mailboxesTouchedBy({ kind: "delete" }, "mb1"),
+		);
+		assert.ok(
+			keys.some(
+				(key) =>
+					JSON.stringify(key) ===
+					JSON.stringify(unifiedThreadOperationsListAllThreadsQueryKey()),
+			),
+		);
+	});
+});

package/src/hooks/useEscalatedActions.ts

@@ -1,8 +1,4 @@
-import {
-	mailboxOperationsListMailboxesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import {
 	messageBulkOperationsDeleteMessages,
 	messageBulkOperationsMoveMessages,
@@ -28,6 +24,10 @@ import {
 	runChunkedAction,
 	runPredicateAction,
 } from "@/lib/bulk-actions";
+import {
+	invalidateThreadListQueries,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 /** The predicate a search-scoped run re-issues on every page — the same
  *  filters the visible list is searching with, minus pagination/count knobs. */
@@ -102,6 +102,18 @@ export interface UseEscalatedActionsResult {
 	) => Promise<BulkRunOutcome>;
 }
 
+/**
+ * The mailboxes whose cached listings a bulk run affects: the mailbox it ran
+ * over, plus a move's destination, which gains the messages the source loses.
+ */
+export const mailboxesTouchedBy = (
+	action: EscalatedAction,
+	mailboxId: string,
+): string[] =>
+	action.kind === "move"
+		? [mailboxId, action.destinationMailboxId]
+		: [mailboxId];
+
 export const useEscalatedActions = ({
 	mailboxId,
 	accountId,
@@ -182,21 +194,10 @@ export const useEscalatedActions = ({
 
 	const invalidateAfterRun = useCallback(
 		(action: EscalatedAction) => {
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsListThreadsQueryKey({ path: { mailboxId } }),
-			});
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsSearchThreadsQueryKey({
-					path: { mailboxId },
-				}),
-			});
-			if (action.kind === "move") {
-				queryClient.invalidateQueries({
-					queryKey: threadOperationsListThreadsQueryKey({
-						path: { mailboxId: action.destinationMailboxId },
-					}),
-				});
-			}
+			invalidateThreadListQueries(
+				queryClient,
+				threadListCacheKeys(mailboxesTouchedBy(action, mailboxId)),
+			);
 			if (accountId) {
 				queryClient.invalidateQueries({
 					queryKey: mailboxOperationsListMailboxesQueryKey({

package/src/hooks/useMoveMessages.ts

@@ -80,10 +80,14 @@ export const useMoveMessages = ({
 						path: { threadId },
 					})
 				: [];
-			// The source mailbox's lists plus the unified cross-account listing that
-			// backs the daily brief — moving from the brief has to remove the row
-			// there too, not only from the per-mailbox lists (#140, part of #149).
-			const listPrefixes = threadListCacheKeys([mailboxId]);
+			// The source and destination mailboxes' lists plus the unified
+			// cross-account listing that backs the daily brief — moving from the
+			// brief has to remove the row there too, not only from the per-mailbox
+			// lists (#140, part of #149).
+			const listPrefixes = threadListCacheKeys([
+				mailboxId,
+				variables.body.destinationMailboxId,
+			]);
 
 			// Only cancel the thread-messages query when we actually have a
 			// threadId — passing an empty queryKey here would match every

package/src/lib/thread-list-cache.test.ts

@@ -5,7 +5,15 @@ import {
 	threadOperationsSearchThreadsQueryKey,
 	unifiedThreadOperationsListAllThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { threadListCacheKeys } from "./thread-list-cache.js";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { QueryClient } from "@tanstack/react-query";
+import {
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	threadListCacheKeys,
+} from "./thread-list-cache.js";
 
 describe("threadListCacheKeys", () => {
 	test("resolves each mailbox's list and search caches plus the unified one", () => {
@@ -42,3 +50,98 @@ describe("threadListCacheKeys", () => {
 		assert.strictEqual(keys.length, 3);
 	});
 });
+
+const thread = (
+	overrides: Partial<RemitImapThreadMessageResponse> & { messageId: string },
+): RemitImapThreadMessageResponse =>
+	({
+		threadId: "t1",
+		threadMessageId: `tm-${overrides.messageId}`,
+		mailboxId: "mb1",
+		subject: "s",
+		fromName: "n",
+		fromEmail: "e",
+		sentDate: "2025-01-01T00:00:00Z",
+		snippet: "",
+		hasAttachment: false,
+		hasStars: false,
+		isRead: false,
+		...overrides,
+	}) as RemitImapThreadMessageResponse;
+
+/** The single-shot page the daily brief and Flagged cache under the unified key. */
+const briefKey = unifiedThreadOperationsListAllThreadsQueryKey();
+
+/** The brief's search variant caches under the same key plus query options. */
+const briefSearchKey = unifiedThreadOperationsListAllThreadsQueryKey({
+	query: { query: "invoice", limit: 50 },
+});
+
+/** The infinite shape a mailbox list caches. */
+const mailboxKey = threadOperationsListThreadsQueryKey({
+	path: { mailboxId: "mb1" },
+	query: { order: "desc" },
+});
+
+const seed = () => {
+	const queryClient = new QueryClient();
+	queryClient.setQueryData(briefKey, { items: [thread({ messageId: "m1" })] });
+	queryClient.setQueryData(briefSearchKey, {
+		items: [thread({ messageId: "m1" })],
+	});
+	queryClient.setQueryData(mailboxKey, {
+		pages: [{ items: [thread({ messageId: "m1" })] }],
+		pageParams: [undefined],
+	});
+	return queryClient;
+};
+
+const briefItems = (queryClient: QueryClient, key: readonly unknown[]) =>
+	queryClient.getQueryData<{ items: RemitImapThreadMessageResponse[] }>(key)
+		?.items ?? [];
+
+describe("mutating from the daily brief", () => {
+	test("patches the unified listing the brief reads, not only the mailbox list", () => {
+		const queryClient = seed();
+		patchThreadListQueries(queryClient, threadListCacheKeys(["mb1"]), (items) =>
+			items.map((item) => ({ ...item, isRead: true })),
+		);
+		assert.strictEqual(briefItems(queryClient, briefKey)[0].isRead, true);
+		assert.strictEqual(briefItems(queryClient, briefSearchKey)[0].isRead, true);
+		const pages = queryClient.getQueryData<{
+			pages: Array<{ items: RemitImapThreadMessageResponse[] }>;
+		}>(mailboxKey);
+		assert.strictEqual(pages?.pages[0].items[0].isRead, true);
+	});
+
+	test("removes a deleted row from the brief's page", () => {
+		const queryClient = seed();
+		patchThreadListQueries(queryClient, threadListCacheKeys(["mb1"]), (items) =>
+			items.filter((item) => item.messageId !== "m1"),
+		);
+		assert.deepStrictEqual(briefItems(queryClient, briefKey), []);
+	});
+
+	test("restores the brief's page when the mutation fails", () => {
+		const queryClient = seed();
+		const prefixes = threadListCacheKeys(["mb1"]);
+		const snapshot = snapshotThreadListQueries(queryClient, prefixes);
+		patchThreadListQueries(queryClient, prefixes, () => []);
+		restoreThreadListQueries(queryClient, snapshot);
+		assert.strictEqual(briefItems(queryClient, briefKey).length, 1);
+		assert.strictEqual(briefItems(queryClient, briefSearchKey).length, 1);
+	});
+
+	test("invalidates the brief's listing so the next read refetches", () => {
+		const queryClient = seed();
+		invalidateThreadListQueries(queryClient, threadListCacheKeys(["mb1"]));
+		assert.strictEqual(
+			queryClient.getQueryState(briefKey)?.isInvalidated,
+			true,
+		);
+		assert.strictEqual(
+			queryClient.getQueryState(mailboxKey)?.isInvalidated,
+			true,
+		);
+	});
+});