@remit/web-client 0.0.9 → 0.0.10

package/package.json

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

@@ -163,7 +163,7 @@ export const ConversationView = ({
 	} = useQuery({
 		...threadDetailOperationsListThreadMessagesOptions({
 			path: { threadId },
-			query: { order: "desc", mailboxId },
+			query: { order: "desc" },
 		}),
 	});
 
@@ -266,6 +266,7 @@ export const ConversationView = ({
 	} = useToggleStar({
 		threadId,
 		mailboxId,
+		messages,
 	});
 
 	// Compose state for inline reply/forward.

package/src/hooks/useMarkAsRead.test.ts

@@ -1,7 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { selectMessagesToMarkRead } from "./useMarkAsRead.js";
+import {
+	resolveMailboxesForMessages,
+	selectMessagesToMarkRead,
+} from "./useMarkAsRead.js";
 
 const make = (
 	overrides: Partial<RemitImapThreadMessageResponse> & {
@@ -163,3 +166,52 @@ describe("selectMessagesToMarkRead", () => {
 		assert.deepStrictEqual(got, ["m-older"]);
 	});
 });
+
+describe("resolveMailboxesForMessages", () => {
+	const messages = [
+		make({
+			messageId: "m-received",
+			threadMessageId: "tm1",
+			isRead: false,
+			mailboxId: "mb-inbox",
+		}),
+		make({
+			messageId: "m-sent",
+			threadMessageId: "tm2",
+			isRead: false,
+			mailboxId: "mb-sent",
+		}),
+	];
+
+	test("names every mailbox the batch touches, not the browsed one", () => {
+		const got = resolveMailboxesForMessages(
+			["m-received", "m-sent"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual([...got].sort(), ["mb-inbox", "mb-sent"]);
+	});
+
+	test("marking only the sent reply leaves the browsed mailbox alone", () => {
+		const got = resolveMailboxesForMessages(["m-sent"], messages, "mb-inbox");
+		assert.deepStrictEqual(got, ["mb-sent"]);
+	});
+
+	test("names each mailbox once however many messages it holds", () => {
+		const got = resolveMailboxesForMessages(
+			["m-received", "m-received"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual(got, ["mb-inbox"]);
+	});
+
+	test("falls back to the browsed mailbox for an unknown message", () => {
+		const got = resolveMailboxesForMessages(
+			["m-elsewhere"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual(got, ["mb-inbox"]);
+	});
+});

package/src/hooks/useMarkAsRead.ts

@@ -41,12 +41,35 @@ interface SnapshotEntry<T> {
 
 interface MarkAsReadContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
+	threadsListPrefixes: ReadonlyArray<readonly unknown[]>;
+	threadsSearchPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
 	previousThreadsList: SnapshotEntry<ThreadsListData>[];
 }
 
+/**
+ * The mailboxes whose cached listings a batch of message mutations affects.
+ *
+ * A conversation spans mailboxes (#46), so marking a thread read can touch a
+ * received message in INBOX and the user's own reply in Sent at once, and each
+ * one's lists live under its own mailbox key. Falls back to the browsed mailbox
+ * for ids the thread's messages do not cover.
+ */
+export const resolveMailboxesForMessages = (
+	messageIds: Iterable<string>,
+	messages: RemitImapThreadMessageResponse[],
+	fallbackMailboxId: string,
+): string[] => {
+	const byMessageId = new Map(
+		messages.map((message) => [message.messageId, message.mailboxId]),
+	);
+	const mailboxIds = new Set<string>();
+	for (const messageId of messageIds) {
+		mailboxIds.add(byMessageId.get(messageId) ?? fallbackMailboxId);
+	}
+	return [...mailboxIds];
+};
+
 const setReadOnItems = (
 	items: RemitImapThreadMessageResponse[],
 	messageIds: Set<string>,
@@ -101,17 +124,26 @@ export const useMarkAsRead = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
-			});
+			const affectedMailboxIds = resolveMailboxesForMessages(
+				messageIds,
+				messages,
+				mailboxId,
+			);
+			const threadsListPrefixes = affectedMailboxIds.map((id) =>
+				threadOperationsListThreadsQueryKey({ path: { mailboxId: id } }),
+			);
+			const threadsSearchPrefixes = affectedMailboxIds.map((id) =>
+				threadOperationsSearchThreadsQueryKey({ path: { mailboxId: id } }),
+			);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				...threadsListPrefixes.map((queryKey) =>
+					queryClient.cancelQueries({ queryKey }),
+				),
+				...threadsSearchPrefixes.map((queryKey) =>
+					queryClient.cancelQueries({ queryKey }),
+				),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -122,12 +154,12 @@ export const useMarkAsRead = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
+			const previousThreadsList = [
+				...threadsListPrefixes,
+				...threadsSearchPrefixes,
+			]
+				.flatMap((queryKey) =>
+					queryClient.getQueriesData<ThreadsListData>({ queryKey }),
 				)
 				.filter(
 					(entry): entry is [readonly unknown[], ThreadsListData] =>
@@ -157,19 +189,20 @@ export const useMarkAsRead = ({
 				};
 			};
 
-			queryClient.setQueriesData<ThreadsListData>(
-				{ queryKey: threadsListPrefix },
-				patchListData,
-			);
-			queryClient.setQueriesData<ThreadsListData>(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
-			);
+			for (const queryKey of [
+				...threadsListPrefixes,
+				...threadsSearchPrefixes,
+			]) {
+				queryClient.setQueriesData<ThreadsListData>(
+					{ queryKey },
+					patchListData,
+				);
+			}
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
+				threadsListPrefixes,
+				threadsSearchPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -203,8 +236,12 @@ export const useMarkAsRead = ({
 		onSettled: (_data, _err, _vars, context) => {
 			if (!context) return;
 			queryClient.invalidateQueries({ queryKey: context.threadMessagesPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			for (const queryKey of [
+				...context.threadsListPrefixes,
+				...context.threadsSearchPrefixes,
+			]) {
+				queryClient.invalidateQueries({ queryKey });
+			}
 			// Refresh the sidebar mailbox list so the unread badge picks up the
 			// next backend `unseenCount` (which is owned by IMAP sync).
 			if (accountId) {

package/src/hooks/useToggleStar.test.ts

@@ -1,7 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { toggleStarsInItems } from "./useToggleStar.js";
+import {
+	resolveMailboxForMessage,
+	toggleStarsInItems,
+} from "./useToggleStar.js";
 
 const make = (
 	messageId: string,
@@ -55,3 +58,38 @@ describe("toggleStarsInItems", () => {
 		);
 	});
 });
+
+describe("resolveMailboxForMessage", () => {
+	const messages = [
+		{ ...make("m-received", false), mailboxId: "mb-inbox" },
+		{ ...make("m-sent", false), mailboxId: "mb-sent" },
+	];
+
+	test("starring a sent reply patches the sent mailbox, not the browsed one", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-sent", messages, "mb-inbox"),
+			"mb-sent",
+		);
+	});
+
+	test("starring a message in the browsed mailbox is unchanged", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-received", messages, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+
+	test("falls back to the browsed mailbox when the thread is unknown", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-sent", undefined, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+
+	test("falls back to the browsed mailbox for a message not in the thread", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-elsewhere", messages, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+});

package/src/hooks/useToggleStar.ts

@@ -12,9 +12,35 @@ import { formatErrorDetail } from "@/components/ui/error-banners";
 
 interface UseToggleStarOptions {
 	threadId: string;
+	/**
+	 * The mailbox whose lists to patch when the starred message is not in
+	 * `messages` — the browsed mailbox, which is where a list row lives.
+	 */
 	mailboxId: string;
+	/**
+	 * The thread's messages, when the caller has them. A conversation spans
+	 * mailboxes (#46), so the lists to patch are the ones for the mailbox the
+	 * starred message is actually in, not the one being browsed.
+	 */
+	messages?: RemitImapThreadMessageResponse[];
 }
 
+/**
+ * The mailbox whose cached listings a mutation on `messageId` affects.
+ *
+ * The message's own mailbox, falling back to the browsed one when the thread's
+ * messages are unknown or do not contain it. Starring a reply in Sent from a
+ * conversation opened in INBOX has to patch Sent's lists; INBOX's do not hold
+ * that message and patching them changes nothing.
+ */
+export const resolveMailboxForMessage = (
+	messageId: string,
+	messages: RemitImapThreadMessageResponse[] | undefined,
+	fallbackMailboxId: string,
+): string =>
+	messages?.find((message) => message.messageId === messageId)?.mailboxId ??
+	fallbackMailboxId;
+
 interface ThreadMessagesData {
 	items: RemitImapThreadMessageResponse[];
 	[key: string]: unknown;
@@ -57,6 +83,7 @@ export const toggleStarsInItems = (
 export const useToggleStar = ({
 	threadId,
 	mailboxId,
+	messages,
 }: UseToggleStarOptions) => {
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
@@ -75,11 +102,16 @@ export const useToggleStar = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
+			const affectedMailboxId = resolveMailboxForMessage(
+				messageId,
+				messages,
+				mailboxId,
+			);
 			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
+				path: { mailboxId: affectedMailboxId },
 			});
 			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
+				path: { mailboxId: affectedMailboxId },
 			});
 			// The unified cross-account listing backs the daily brief and the
 			// Starred mailbox, so a star toggled from an inbox has to land there