@remit/web-client 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.7",
+  "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/hooks/useStaleAccountSync.test.ts

@@ -7,7 +7,9 @@ import {
 	__resetStaleAccountSyncGuard,
 	handleBackgroundSyncFailure,
 	hasPollIntervalElapsed,
+	MIN_POLL_INTERVAL_MS,
 	POLL_INTERVAL_MS,
+	resolvePollIntervalMs,
 	STALENESS_THRESHOLD_MS,
 	selectPollableAccountIds,
 	selectStaleAccountIds,
@@ -104,6 +106,35 @@ describe("POLL_INTERVAL_MS", () => {
 	});
 });
 
+describe("resolvePollIntervalMs", () => {
+	// This poll shares POST /sync with the refresh control, and that endpoint's
+	// triggers skip the server's per-mailbox freshness gate
+	// (MAILBOX_FRESHNESS_MS in imap-worker's sync-mailboxes fan-out). A timer is
+	// not a person: without this floor, configuring a sub-window interval turns
+	// every tick into a full folder-by-folder re-enumeration for every open
+	// account, which is exactly the fan-out storm the gate prevents. The floor
+	// is what stops a config value from reintroducing it.
+	test("never returns less than the server's freshness window", () => {
+		assert.equal(resolvePollIntervalMs("10"), MIN_POLL_INTERVAL_MS);
+		assert.equal(resolvePollIntervalMs("59"), MIN_POLL_INTERVAL_MS);
+	});
+
+	test("matches the freshness window the fan-out gate uses", () => {
+		// Keep in step with MAILBOX_FRESHNESS_MS in
+		// packages/imap-worker/src/handlers/sync-mailboxes.ts.
+		assert.equal(MIN_POLL_INTERVAL_MS, 60_000);
+	});
+
+	test("honours a configured interval above the floor", () => {
+		assert.equal(resolvePollIntervalMs("900"), 900_000);
+	});
+
+	test("falls back to the default when unset or unparseable", () => {
+		assert.equal(resolvePollIntervalMs(undefined), 5 * 60 * 1000);
+		assert.equal(resolvePollIntervalMs("not-a-number"), 5 * 60 * 1000);
+	});
+});
+
 describe("hasPollIntervalElapsed", () => {
 	test("is false immediately after a poll", () => {
 		assert.equal(hasPollIntervalElapsed(NOW, NOW, 60_000), false);

package/src/hooks/useStaleAccountSync.ts

@@ -25,16 +25,42 @@ const parsePositiveIntSeconds = (
 	return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
 };
 
+/**
+ * Floor for the poll interval, matching `MAILBOX_FRESHNESS_MS` in the
+ * imap-worker's sync-mailboxes fan-out.
+ *
+ * This poll uses POST /sync, the same endpoint as a person pressing refresh,
+ * and that endpoint's triggers skip the server's per-mailbox freshness gate.
+ * A timer is not a person: polling faster than the gate's own window would
+ * make every tick a full folder-by-folder re-enumeration for every open
+ * account — the fan-out storm the gate exists to prevent, reintroduced by a
+ * config value. `mailboxPollIntervalSeconds` can lengthen the interval, never
+ * shorten it past this: below the window there is nothing to gain, since no
+ * mailbox can have become stale in the meantime.
+ */
+export const MIN_POLL_INTERVAL_MS = 60 * 1000;
+
+/**
+ * Resolve the configured poll interval, never returning less than
+ * {@link MIN_POLL_INTERVAL_MS}.
+ */
+export const resolvePollIntervalMs = (
+	configuredSeconds: string | undefined,
+): number =>
+	Math.max(
+		parsePositiveIntSeconds(configuredSeconds, DEFAULT_POLL_INTERVAL_SECONDS) *
+			1000,
+		MIN_POLL_INTERVAL_MS,
+	);
+
 /**
  * Client-side online-poll interval (#1251): while an account's mail is open,
  * the tab re-triggers the same sync the pull-to-refresh path uses on this
  * cadence — the replacement for the server's removed "online tier".
  */
-export const POLL_INTERVAL_MS =
-	parsePositiveIntSeconds(
-		getRuntimeConfig().mailboxPollIntervalSeconds,
-		DEFAULT_POLL_INTERVAL_SECONDS,
-	) * 1000;
+export const POLL_INTERVAL_MS = resolvePollIntervalMs(
+	getRuntimeConfig().mailboxPollIntervalSeconds,
+);
 
 /**
  * Bounded concurrency for the per-poll fan-out across open accounts —

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;
+	});
+};