@remit/web-client 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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/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/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;
+	});
+};