@remit/web-client 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.8",
+  "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/components/mail/FlaggedList.tsx

@@ -1,21 +1,25 @@
 /**
  * FlaggedList — a FLAT, cross-account inbox of starred mail.
  *
- * Reads the same unified GET /threads source as the daily brief, keeps only
- * starred rows (`toThreadRowData(...).starred`), and renders them as one
- * continuous list (no category sections). The shared `MailViewChrome` owns the
- * `MailHeader` + filter expando; the kit `MessageListPane` (flat, no
- * `briefFilters`) owns the loading / empty / error chrome and keyboard hints,
- * with a consumer-supplied `listBody` so the real rows render at every width.
+ * Reads GET /threads with `starred=true`, which is served by the `byStarred`
+ * index and returns every starred thread in the config across all non-muted
+ * mailboxes, paged. Starredness is decided server-side from `hasStars`; the
+ * client neither re-filters nor caps the set, so a starred thread outside the
+ * newest inbox page still appears. Rendered as one continuous list (no category
+ * sections). The shared `MailViewChrome` owns the `MailHeader` + filter
+ * expando; the kit `MessageListPane` (flat, no `briefFilters`) owns the loading
+ * / empty / error chrome and keyboard hints, with a consumer-supplied
+ * `listBody` so the real rows render at every width.
  */
-import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
 import {
 	ComfortableRow,
 	flaggedFilterConfig,
 	MessageListPane,
 	type ThreadRowData,
 } from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
@@ -28,6 +32,7 @@ import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
+import { dedupeByThread } from "@/lib/starred-rows";
 import { MailViewChrome } from "./MailViewChrome";
 
 const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
@@ -72,8 +77,26 @@ export function FlaggedList({
 		isError,
 		error,
 		refetch,
-	} = useQuery({
-		...unifiedThreadOperationsListAllThreadsOptions(),
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	} = useInfiniteQuery({
+		queryKey: unifiedThreadOperationsListAllThreadsQueryKey({
+			query: { starred: true, order: "desc" },
+		}),
+		queryFn: async ({ pageParam }) => {
+			const { data } = await unifiedThreadOperationsListAllThreads({
+				query: {
+					starred: true,
+					order: "desc",
+					continuationToken: pageParam,
+				},
+				throwOnError: true,
+			});
+			return data;
+		},
+		initialPageParam: undefined as string | undefined,
+		getNextPageParam: (lastPage) => lastPage.continuationToken,
 		staleTime: 60_000,
 	});
 
@@ -86,9 +109,10 @@ export function FlaggedList({
 		const predicates = Array.from(activeFilters)
 			.map((id) => FILTER_PREDICATES[id])
 			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
-		return (threadsData?.items ?? [])
+		return dedupeByThread(
+			(threadsData?.pages ?? []).flatMap((page) => page.items ?? []),
+		)
 			.map(toThreadRowData)
-			.filter((t) => t.starred === true)
 			.filter(
 				(t) =>
 					(selectedCategory === "all" || t.category === selectedCategory) &&
@@ -132,6 +156,16 @@ export function FlaggedList({
 					/>
 				))}
 			</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>
 	);
 

package/src/components/mail/SwipeableMessageRow.tsx

@@ -50,8 +50,7 @@ const toThreadRowData = (
 		timeLabel: formatEmailDate(thread.sentDate),
 		isRead: thread.isRead,
 		hasAttachment: thread.hasAttachment,
-		starred:
-			thread.star != null && thread.star !== "none" && thread.hasStars === true,
+		starred: thread.hasStars === true,
 		trust: thread.senderTrust,
 		category: toDisplayCategory(thread.category),
 		suspicious,

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

package/src/lib/drafts.ts

@@ -64,8 +64,7 @@ export function toImapDraftRowData(
 		timeLabel: formatEmailDate(thread.sentDate),
 		isRead: thread.isRead,
 		hasAttachment: thread.hasAttachment,
-		starred:
-			thread.star != null && thread.star !== "none" && thread.hasStars === true,
+		starred: thread.hasStars === true,
 	};
 }
 

package/src/lib/starred-rows.test.ts

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { dedupeByThread } from "./starred-rows.js";
+
+// The starred listing returns one row per mailbox. The same mail filed in two
+// folders is two rows sharing a threadId, both starred server-side, so a
+// conversation would otherwise render twice.
+
+const row = (
+	threadId: string,
+	messageId: string,
+	mailboxId: string,
+): RemitImapThreadMessageResponse =>
+	({
+		threadId,
+		messageId,
+		mailboxId,
+	}) as unknown as RemitImapThreadMessageResponse;
+
+describe("dedupeByThread", () => {
+	test("collapses two copies of one conversation to a single row", () => {
+		const result = dedupeByThread([
+			row("t1", "m-inbox", "inbox"),
+			row("t1", "m-archive", "archive"),
+		]);
+
+		assert.deepEqual(
+			result.map((r) => r.messageId),
+			["m-inbox"],
+		);
+	});
+
+	test("keeps the first row, which is the newest under descending order", () => {
+		const result = dedupeByThread([
+			row("t1", "m-newest", "inbox"),
+			row("t1", "m-older", "archive"),
+		]);
+
+		assert.equal(result[0]?.messageId, "m-newest");
+	});
+
+	test("leaves distinct conversations alone and preserves order", () => {
+		const result = dedupeByThread([
+			row("t1", "m1", "inbox"),
+			row("t2", "m2", "inbox"),
+			row("t3", "m3", "inbox"),
+		]);
+
+		assert.deepEqual(
+			result.map((r) => r.threadId),
+			["t1", "t2", "t3"],
+		);
+	});
+
+	test("collapses copies that arrived on different pages", () => {
+		const pageOne = [row("t1", "m1", "inbox"), row("t2", "m2", "inbox")];
+		const pageTwo = [row("t2", "m2-copy", "archive"), row("t3", "m3", "inbox")];
+
+		const result = dedupeByThread([...pageOne, ...pageTwo]);
+
+		assert.deepEqual(
+			result.map((r) => r.threadId),
+			["t1", "t2", "t3"],
+		);
+	});
+
+	test("an empty list stays empty", () => {
+		assert.deepEqual(dedupeByThread([]), []);
+	});
+});

package/src/lib/starred-rows.ts

@@ -0,0 +1,25 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+
+/**
+ * Collapse rows that are the same conversation.
+ *
+ * A message's identity includes its mailbox, so the same mail filed in two
+ * folders is two rows carrying the same server-side star. The starred scope
+ * already excludes the folder that causes this wholesale (Gmail's All Mail),
+ * but an ordinary copy in a user folder still produces a pair.
+ *
+ * Deduping over the accumulated pages rather than inside one keeps a
+ * conversation single even when its copies straddle a page boundary — a single
+ * page cannot know what earlier pages already showed. The first row wins, which
+ * is the newest under the server's descending order.
+ */
+export const dedupeByThread = (
+	items: RemitImapThreadMessageResponse[],
+): RemitImapThreadMessageResponse[] => {
+	const seen = new Set<string>();
+	return items.filter((item) => {
+		if (seen.has(item.threadId)) return false;
+		seen.add(item.threadId);
+		return true;
+	});
+};