@remit/web-client 0.0.82 → 0.0.84

package/package.json

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

@@ -28,13 +28,13 @@ import {
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	inboxFilterConfig,
+	type MessageListFilter,
 	ReadingPaneEmpty,
 	type RescueCandidate,
 	type SearchResult,
 	useAppShellLayout,
 } from "@remit/ui";
 import {
-	keepPreviousData,
 	useInfiniteQuery,
 	useMutation,
 	useQueryClient,
@@ -100,13 +100,20 @@ import {
 	type ConversationTarget,
 } from "@/lib/conversation-target";
 import { dedupeThreadMessages } from "@/lib/dedupe-thread-messages";
-import { applyInboxFilters } from "@/lib/inbox-filters";
+import {
+	filterReach,
+	hasInboxFilter,
+	type InboxFilterCriteria,
+	inboxFilterParams,
+	sameInboxFilter,
+} from "@/lib/inbox-filters";
 import { readIntelligencePref } from "@/lib/intelligence-pref";
 import { useMailContext } from "@/lib/mail-context";
 import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
 import {
 	isSearchPending as computeIsSearchPending,
+	resolveOpenThread,
 	resolveSelectedThread,
 } from "@/lib/search-pending";
 import { normalizeSearchQuery } from "@/lib/search-query";
@@ -137,19 +144,25 @@ interface MailboxPaneContextValue {
 	unreadCount: number;
 	isDraftsMailbox: boolean;
 	// Rescue-from-Spam: true on the account's Junk/Spam folder, with the
-	// suspected-safe messages over the loaded pages. Drives the rescue banner
-	// + flow above the spam list.
+	// suspected-safe messages `useRescueCandidates` fetched. Drives the rescue
+	// banner + flow above the spam list.
 	isSpamFolder: boolean;
 	rescueCandidates: RescueCandidate[];
-	// Inbox filter (category + Unread/Flagged/Attachment), applied client-side
-	// over the loaded threads. Owned here so the list, triage and adjacency all
-	// see the same filtered set; the open thread still resolves against the raw
-	// set so a filter never closes the reading pane.
+	// Inbox filter (category + Unread/Flagged/Attachment). The chips are search
+	// parameters: the server returns the filtered page, so `threads` is the
+	// answer to the active predicate over the whole mailbox rather than a
+	// narrowed copy of the loaded window (#306).
 	filterCategory: string;
 	filterAttributes: ReadonlySet<string>;
 	onSelectFilterCategory: (id: string) => void;
 	onToggleFilterAttribute: (id: string) => void;
 	onClearFilters: () => void;
+	/**
+	 * The active category filter as the empty state renders it — its label, the
+	 * way out of it, and how much of the mailbox the request reached. Undefined
+	 * when no category is selected.
+	 */
+	listFilter: MessageListFilter | undefined;
 	intelligenceOpen: boolean;
 	onToggleIntelligence: () => void;
 	/**
@@ -196,6 +209,18 @@ interface MailboxPaneContextValue {
 	previousMessageId: string | undefined;
 }
 
+/** The server's own default page size (`DEFAULT_THREADS_PAGE_SIZE`), sent so the
+ *  filtered path pages like the unfiltered one. */
+const THREADS_PAGE_SIZE = 50;
+
+/** Chip id → the label the empty state names the filter by. `all` is absent:
+ *  it is how the category is cleared, not a category. */
+const CATEGORY_LABELS = new Map(
+	inboxFilterConfig()
+		.categories.filter((category) => category.id !== "all")
+		.map((category) => [category.id, category.label]),
+);
+
 const MailboxPaneCtx = createContext<MailboxPaneContextValue | null>(null);
 
 function useMailboxPane(): MailboxPaneContextValue {
@@ -246,8 +271,31 @@ function MailboxPaneProvider({
 		tokenContext,
 	);
 	const fromToken = searchTokens.find((t) => t.type === "from");
+
+	const [filterCategory, setFilterCategory] = useState("all");
+	const [filterAttributes, setFilterAttributes] = useState<ReadonlySet<string>>(
+		new Set(),
+	);
+	const filterCriteria: InboxFilterCriteria = useMemo(
+		() => ({ category: filterCategory, attributes: filterAttributes }),
+		[filterCategory, filterAttributes],
+	);
+	const filterParams = useMemo(
+		() => inboxFilterParams(filterCriteria),
+		[filterCriteria],
+	);
+
+	// The chips are query parameters, not a browser-side pass over the loaded
+	// pages: a category whose mail sits below the newest page is why the filter
+	// showed an empty inbox at all (#306). `listThreads` takes no filters, so any
+	// active chip routes the listing through `searchThreads` — one predicate, one
+	// query key, so the key and the branch below cannot diverge.
+	const hasServerFilter = hasSearchQuery || hasInboxFilter(filterCriteria);
 	const searchThreadsQuery = {
 		order: "desc" as const,
+		// Explicit: an unspecified limit clamps to THREAD_SEARCH_MAX_LIMIT (500),
+		// so switching paths without it multiplies the page size by ten.
+		limit: THREADS_PAGE_SIZE,
 		...(freeText ? { query: freeText } : {}),
 		...(fromToken ? { from: fromToken.value } : {}),
 		...(searchTokens.some((t) => t.type === "hasAttachment")
@@ -256,9 +304,10 @@ function MailboxPaneProvider({
 		...(searchTokens.some((t) => t.type === "isUnread")
 			? { unread: true }
 			: {}),
+		...filterParams,
 	};
 
-	const queryKey = hasSearchQuery
+	const queryKey = hasServerFilter
 		? threadOperationsSearchThreadsQueryKey({
 				path: { mailboxId },
 				query: searchThreadsQuery,
@@ -280,7 +329,7 @@ function MailboxPaneProvider({
 	} = useInfiniteQuery({
 		queryKey,
 		queryFn: async ({ pageParam }) => {
-			if (hasSearchQuery) {
+			if (hasServerFilter) {
 				const { data } = await threadOperationsSearchThreads({
 					path: { mailboxId },
 					query: {
@@ -300,8 +349,14 @@ function MailboxPaneProvider({
 		},
 		initialPageParam: undefined as string | undefined,
 		getNextPageParam: (lastPage) => lastPage.continuationToken,
-		enabled: hasSearchQuery ? normalizedSearchQuery.length > 0 : true,
-		placeholderData: keepPreviousData,
+		// Previous rows while the next page is in flight, but only under the
+		// filter that fetched them — a chip change restarts the list on the
+		// skeleton rather than showing the old predicate's mail under the new
+		// chip for one round trip.
+		placeholderData: (previousData, previousQuery) =>
+			sameInboxFilter(previousQuery?.queryKey, filterParams)
+				? previousData
+				: undefined,
 	});
 
 	const handleDeselectIfRemoved = useCallback(
@@ -337,21 +392,15 @@ function MailboxPaneProvider({
 			onAfterOptimisticRemove: handleDeselectIfRemoved,
 		});
 
-	const rawThreads = dropDeletedThreads(
+	// The server answered the active predicate, so these rows are the list: the
+	// dedupe spans pages and the deleted drop repeats the server's own
+	// `excludeDeleted`, and neither result changes when another page loads.
+	const threads = dropDeletedThreads(
 		dedupeThreadMessages(
 			threadsData?.pages.flatMap((page) => page.items ?? []) ?? [],
 		),
 	);
 
-	const [filterCategory, setFilterCategory] = useState("all");
-	const [filterAttributes, setFilterAttributes] = useState<ReadonlySet<string>>(
-		new Set(),
-	);
-	const threads = useMemo(
-		() => applyInboxFilters(rawThreads, filterCategory, filterAttributes),
-		[rawThreads, filterCategory, filterAttributes],
-	);
-
 	const onSelectFilterCategory = useCallback((id: string) => {
 		setFilterCategory(id);
 	}, []);
@@ -368,11 +417,36 @@ function MailboxPaneProvider({
 		setFilterAttributes(new Set());
 	}, []);
 
+	// The empty state has to say how much was read, and the reach comes off the
+	// request rather than the call site: the day a chip is answered over a window
+	// instead of the whole mailbox, the sentence changes with it.
+	const filterLabel = CATEGORY_LABELS.get(filterCategory);
+	const listFilter: MessageListFilter | undefined = filterLabel
+		? {
+				label: filterLabel,
+				reach: filterReach(searchThreadsQuery),
+				onClear: onClearFilters,
+			}
+		: undefined;
+
 	const isSearchPending = computeIsSearchPending(searchInput, searchQuery);
-	// Resolve the open thread against the raw set so an active filter never
-	// empties the reading pane on a message the user explicitly opened.
-	const selectedThread = resolveSelectedThread(
-		rawThreads,
+	const listedThread = resolveSelectedThread(
+		threads,
+		selectedMessageId,
+		isSearchPending,
+	);
+	// There is no unfiltered set in the client any more, so a chip the open
+	// message does not match would otherwise close the reading pane under the
+	// user. Snapshot what they opened and let it answer for itself.
+	const [openedThread, setOpenedThread] = useState<
+		RemitImapThreadMessageResponse | undefined
+	>(undefined);
+	useEffect(() => {
+		if (listedThread) setOpenedThread(listedThread);
+	}, [listedThread]);
+	const selectedThread = resolveOpenThread(
+		listedThread,
+		openedThread,
 		selectedMessageId,
 		isSearchPending,
 	);
@@ -444,9 +518,10 @@ function MailboxPaneProvider({
 		onSetIntelligenceOpen,
 	]);
 
-	const mailboxUnseenCount = useCurrentMailboxUnseenCount({ accounts });
-	const unreadCount =
-		mailboxUnseenCount ?? rawThreads.filter((t) => !t.isRead).length;
+	// The mailbox's own unseen total. A count over the loaded pages undercounts
+	// every mailbox larger than one page and creeps upward as the user scrolls,
+	// so there is no fallback: until the mailbox resolves there is no number.
+	const unreadCount = useCurrentMailboxUnseenCount({ accounts }) ?? 0;
 
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
@@ -745,6 +820,7 @@ function MailboxPaneProvider({
 		onSelectFilterCategory,
 		onToggleFilterAttribute,
 		onClearFilters,
+		listFilter,
 		intelligenceOpen,
 		onToggleIntelligence,
 		searchPredicate: hasSearchQuery ? searchThreadsQuery : undefined,
@@ -817,6 +893,7 @@ function MailboxList() {
 		onSelectFilterCategory,
 		onToggleFilterAttribute,
 		onClearFilters,
+		listFilter,
 		searchPredicate,
 	} = useMailboxPane();
 	const { searchQuery, searchInput, accounts, resultFolderIndex } =
@@ -909,6 +986,8 @@ function MailboxList() {
 			isLoadingMore={isLoadingMore}
 			accountId={mailboxAccountId}
 			listTitle={listTitle}
+			listFilter={listFilter}
+			listScopeLabel={listTitle}
 			hideHeader
 			onTriageContextChange={onTriageContextChange}
 			commandsRef={listCommandsRef}

package/src/components/mail/MessageList.tsx

@@ -2,6 +2,8 @@ import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/type
 import {
 	Banner,
 	type Density,
+	type MessageListFilter,
+	MessageListLoadingMore,
 	MessageListPane,
 	SELECTION_SHEET_TEASER_HEIGHT,
 	SelectionSheet,
@@ -123,6 +125,15 @@ interface MessageListProps {
 	 * Optional subtitle (e.g. "3 unread") shown alongside the title.
 	 */
 	listMeta?: string;
+	/**
+	 * The active category filter, when the view has one. The empty state needs
+	 * it to say it is filtered and how much of the collection the request
+	 * reached; without it a narrowed list renders as an empty mailbox, which is
+	 * the shape #315's bug hid behind.
+	 */
+	listFilter?: MessageListFilter;
+	/** Name of the collection being listed, e.g. "Inbox", for the empty state. */
+	listScopeLabel?: string;
 	/**
 	 * Triage-layer context bridge (#429). The roving focus cursor and the
 	 * multi-selection live here; the parent route's global keyboard dispatcher
@@ -179,17 +190,17 @@ const readStoredDensity = (): Density => {
 	return "comfortable";
 };
 
-const SearchResultsHeader = ({
-	query,
-	count,
-}: {
-	query: string;
-	count: number;
-}) => (
+/**
+ * Names what the list is showing. No number: the only figure available here is
+ * the length of the loaded pages, and a page length presented as a result total
+ * contradicts the completeness the filtered empty state states in the same view
+ * (#306). The exact count is #307's.
+ */
+const SearchResultsHeader = ({ query }: { query: string }) => (
 	<div className="flex items-center gap-2 px-3 py-2 border-b border-line bg-surface-sunken/30">
 		<Search className="size-4 text-fg-muted" />
 		<span className="text-sm text-fg-muted">
-			{count} {count === 1 ? "result" : "results"} for &ldquo;{query}&rdquo;
+			Results for &ldquo;{query}&rdquo;
 		</span>
 	</div>
 );
@@ -214,6 +225,8 @@ export const MessageList = ({
 	accountId,
 	listTitle,
 	listMeta,
+	listFilter,
+	listScopeLabel,
 	onTriageContextChange,
 	commandsRef,
 	hideHeader = false,
@@ -1363,7 +1376,7 @@ export const MessageList = ({
 	const virtualBody = (
 		<>
 			{isSearching && searchQuery && (
-				<SearchResultsHeader query={searchQuery} count={threads.length} />
+				<SearchResultsHeader query={searchQuery} />
 			)}
 			<div
 				ref={parentRef}
@@ -1427,11 +1440,7 @@ export const MessageList = ({
 						);
 					})}
 				</div>
-				{isLoadingMore && (
-					<div className="flex justify-center py-4">
-						<div className="h-5 w-5 animate-spin rounded-full border-2 border-fg-muted border-t-transparent" />
-					</div>
-				)}
+				{isLoadingMore && <MessageListLoadingMore />}
 			</div>
 		</>
 	);
@@ -1469,6 +1478,8 @@ export const MessageList = ({
 				flatList
 				listState={listState}
 				searchQuery={isSearching ? searchQuery : undefined}
+				listFilter={listFilter}
+				listScopeLabel={listScopeLabel}
 				errorMessage={errorMessage}
 				onRetry={onRetry}
 				onReportError={handleReportError}

package/src/components/mail/MessageRow.tsx

@@ -187,9 +187,10 @@ const MessageRowComponent = ({
 		onLongPress?.(messageId);
 	}, [onLongPress, messageId]);
 
+	// Threshold comes from useLongPress' default so the plain row and the
+	// swipeable row can't drift apart on timing.
 	const { longPressProps } = useLongPress({
 		onLongPress: handleLongPress,
-		delayMs: 500,
 		accessibilityDescription: isChecked ? "Deselect message" : "Select message",
 	});
 

package/src/hooks/useEscalatedActions.ts

@@ -33,7 +33,14 @@ import {
  *  filters the visible list is searching with, minus pagination/count knobs. */
 export type EscalationSearchQuery = Pick<
 	NonNullable<ThreadOperationsSearchThreadsData["query"]>,
-	"order" | "query" | "subject" | "from" | "unread" | "starred" | "attachments"
+	| "order"
+	| "query"
+	| "subject"
+	| "from"
+	| "unread"
+	| "starred"
+	| "attachments"
+	| "category"
 >;
 
 /**

package/src/lib/inbox-filters.test.ts

@@ -1,106 +1,134 @@
 import assert from "node:assert/strict";
 import { describe, test } from "node:test";
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { applyInboxFilters } from "./inbox-filters.js";
+import {
+	filterReach,
+	hasInboxFilter,
+	type InboxFilterCriteria,
+	inboxFilterParams,
+	sameInboxFilter,
+} from "./inbox-filters.js";
 
-// Only the fields the filter reads, following the fixture idiom in
-// starred-rows.test.ts.
-const thread = (
-	fields: Partial<RemitImapThreadMessageResponse> & { messageId: string },
-): RemitImapThreadMessageResponse =>
-	({ isRead: false, ...fields }) as unknown as RemitImapThreadMessageResponse;
+const criteria = (
+	category: string,
+	attributes: string[] = [],
+): InboxFilterCriteria => ({ category, attributes: new Set(attributes) });
 
-const personal = thread({ messageId: "m1", category: "personal" });
-const unclassified = thread({ messageId: "m2", category: "uncategorized" });
-const preClassification = thread({ messageId: "m3" });
+/** The shape `threadOperationsSearchThreadsQueryKey` produces. */
+const key = (query: Record<string, unknown>): unknown => [
+	{ _id: "threadOperationsSearchThreads", path: { mailboxId: "mb1" }, query },
+];
 
-const ids = (threads: RemitImapThreadMessageResponse[]): string[] =>
-	threads.map((t) => t.messageId);
+describe("hasInboxFilter", () => {
+	test("an untouched chip row narrows nothing", () => {
+		assert.equal(hasInboxFilter(criteria("all")), false);
+	});
 
-describe("applyInboxFilters", () => {
-	test("returns the loaded list when nothing narrows it", () => {
-		const threads = [personal, unclassified, preClassification];
-		assert.deepEqual(applyInboxFilters(threads, "all", new Set()), threads);
+	test("a category or an attribute is a filter", () => {
+		assert.equal(hasInboxFilter(criteria("personal")), true);
+		assert.equal(hasInboxFilter(criteria("all", ["unread"])), true);
 	});
 
-	test("matches a thread whose category is set", () => {
-		assert.deepEqual(
-			ids(applyInboxFilters([personal, unclassified], "personal", new Set())),
-			["m1"],
-		);
+	test("an id that names no category narrows nothing", () => {
+		assert.equal(hasInboxFilter(criteria("nonsense")), false);
 	});
+});
 
-	test("counts a thread with no category as unclassified (#45)", () => {
-		// A pre-classification thread already renders an `uncategorized` badge,
-		// so the Unclassified chip has to find the row the user can see. Reading
-		// the response field raw made that row vanish under its own chip.
-		assert.deepEqual(
-			ids(
-				applyInboxFilters(
-					[personal, unclassified, preClassification],
-					"uncategorized",
-					new Set(),
-				),
-			),
-			["m2", "m3"],
-		);
+describe("inboxFilterParams", () => {
+	test("sends the category to the server instead of filtering here (#306)", () => {
+		assert.deepEqual(inboxFilterParams(criteria("personal")), {
+			category: ["personal"],
+		});
 	});
 
-	test("never lets unclassified mail answer to personal (#45)", () => {
+	test("asks for unclassified mail by name, never as absence (#45)", () => {
+		assert.deepEqual(inboxFilterParams(criteria("uncategorized")), {
+			category: ["uncategorized"],
+		});
+	});
+
+	test("sets no category parameter for `all`", () => {
+		assert.deepEqual(inboxFilterParams(criteria("all")), {});
+	});
+
+	test("maps each attribute chip onto the parameter the API names", () => {
 		assert.deepEqual(
-			applyInboxFilters(
-				[unclassified, preClassification],
-				"personal",
-				new Set(),
-			),
-			[],
+			inboxFilterParams(criteria("all", ["unread", "flagged", "attachment"])),
+			{ unread: true, starred: true, attachments: true },
 		);
 	});
 
-	test("applies attribute predicates alongside a category", () => {
-		const read = thread({
-			messageId: "m4",
-			category: "personal",
-			isRead: true,
+	test("carries a category and its attributes together", () => {
+		assert.deepEqual(inboxFilterParams(criteria("social", ["unread"])), {
+			category: ["social"],
+			unread: true,
 		});
-		assert.deepEqual(
-			ids(applyInboxFilters([personal, read], "personal", new Set(["unread"]))),
-			["m1"],
+	});
+
+	test("ignores an attribute id with no parameter behind it", () => {
+		assert.deepEqual(inboxFilterParams(criteria("all", ["nonsense"])), {});
+	});
+});
+
+describe("filterReach", () => {
+	test("a category is a column on the row, so the whole folder was read", () => {
+		assert.equal(
+			filterReach({ category: ["personal"], unread: true }),
+			"whole-folder",
 		);
 	});
 
-	test("applies attribute predicates without a category", () => {
-		const read = thread({
-			messageId: "m4",
-			category: "newsletter",
-			isRead: true,
-		});
-		assert.deepEqual(
-			ids(applyInboxFilters([personal, read], "all", new Set(["unread"]))),
-			["m1"],
+	test("an unfiltered request still reaches the whole folder", () => {
+		assert.equal(filterReach({ order: "desc" }), "whole-folder");
+	});
+
+	test("an off-row criterion bounds the read, whatever else is set", () => {
+		assert.equal(
+			filterReach({ category: ["personal"], senderTrust: ["unknown"] }),
+			"loaded-pages",
 		);
+		assert.equal(filterReach({ dkimMismatch: true }), "loaded-pages");
+		assert.equal(filterReach({ dkimMismatch: false }), "loaded-pages");
 	});
 
-	test("matches starred and attachment threads", () => {
-		const starred = thread({ messageId: "m5", hasStars: true });
-		const withAttachment = thread({ messageId: "m6", hasAttachment: true });
-		const plain = thread({ messageId: "m7" });
-		const threads = [starred, withAttachment, plain];
-		assert.deepEqual(
-			ids(applyInboxFilters(threads, "all", new Set(["flagged"]))),
-			["m5"],
+	test("an empty trust list bounds nothing", () => {
+		assert.equal(filterReach({ senderTrust: [] }), "whole-folder");
+	});
+});
+
+describe("sameInboxFilter", () => {
+	test("holds across a query the user is still typing", () => {
+		assert.equal(
+			sameInboxFilter(key({ query: "inv", category: ["personal"] }), {
+				category: ["personal"],
+			}),
+			true,
 		);
-		assert.deepEqual(
-			ids(applyInboxFilters(threads, "all", new Set(["attachment"]))),
-			["m6"],
+	});
+
+	test("fails the moment the category changes", () => {
+		assert.equal(
+			sameInboxFilter(key({ category: ["personal"] }), {
+				category: ["social"],
+			}),
+			false,
 		);
 	});
 
-	test("ignores an attribute id with no predicate behind it", () => {
-		const threads = [personal, unclassified];
-		assert.deepEqual(
-			applyInboxFilters(threads, "all", new Set(["nonsense"])),
-			threads,
+	test("fails when a chip is cleared", () => {
+		assert.equal(sameInboxFilter(key({ category: ["personal"] }), {}), false);
+		assert.equal(
+			sameInboxFilter(key({ unread: true }), { category: ["personal"] }),
+			false,
 		);
 	});
+
+	test("holds between the unfiltered listing and an unfiltered search", () => {
+		assert.equal(sameInboxFilter(key({ order: "desc" }), {}), true);
+	});
+
+	test("answers false for a key it cannot read", () => {
+		assert.equal(sameInboxFilter(undefined, {}), false);
+		assert.equal(sameInboxFilter([], {}), false);
+		assert.equal(sameInboxFilter([{ path: { mailboxId: "mb1" } }], {}), false);
+	});
 });

package/src/lib/inbox-filters.ts

@@ -1,44 +1,123 @@
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { toDisplayCategory } from "./display-category.js";
+import type {
+	RemitImapMessageCategory,
+	ThreadOperationsSearchThreadsData,
+} from "@remit/api-http-client/types.gen.ts";
+import { MessageCategory } from "@remit/domain-enums";
+import type { FilterReach } from "@remit/ui";
+
+/** The request `threadOperationsSearchThreads` takes, whole. */
+export type ThreadSearchQuery = NonNullable<
+	ThreadOperationsSearchThreadsData["query"]
+>;
+
+/** The parameters the inbox chips set on that request. */
+export type InboxFilterParams = Pick<
+	ThreadSearchQuery,
+	"category" | "unread" | "starred" | "attachments"
+>;
+
+/** The chip state the inbox holds: one category, any number of attributes. */
+export interface InboxFilterCriteria {
+	/** A category id, or `"all"` when the category is cleared. */
+	category: string;
+	attributes: ReadonlySet<string>;
+}
 
 /**
- * Inbox filter predicates — the inbox preset offers Unread / Starred / Has
- * attachment (never accounts; an inbox is one account already). The `flagged`
- * id is the wire name for IMAP \Flagged; the label is "Starred".
+ * The search parameter each attribute chip sets. `flagged` is the wire name for
+ * IMAP \Flagged, which the API calls `starred`; the label is "Starred".
  */
-const INBOX_FILTER_PREDICATES: Record<
-	string,
-	(t: RemitImapThreadMessageResponse) => boolean
-> = {
-	unread: (t) => !t.isRead,
-	flagged: (t) => t.hasStars === true,
-	attachment: (t) => Boolean(t.hasAttachment),
+const ATTRIBUTE_PARAMS: Record<string, "unread" | "starred" | "attachments"> = {
+	unread: "unread",
+	flagged: "starred",
+	attachment: "attachments",
 };
 
+const CATEGORY_VALUES = new Set<string>(Object.values(MessageCategory));
+
+const isMessageCategory = (id: string): id is RemitImapMessageCategory =>
+	CATEGORY_VALUES.has(id);
+
+/** Whether the chips narrow the list at all — `"all"` and no attributes do not. */
+export const hasInboxFilter = (criteria: InboxFilterCriteria): boolean =>
+	isMessageCategory(criteria.category) || criteria.attributes.size > 0;
+
 /**
- * Narrow the loaded threads to one category and a set of attributes. Applied
- * over the loaded pages until #306 moves the predicate into the query.
+ * The chips as search parameters, so the server returns a page of matches
+ * rather than a page the browser then thins out. A category chip that names no
+ * category — `"all"`, or an id the enum no longer carries — sets no parameter,
+ * and `uncategorized` is a category like any other: the pending state's name,
+ * never the absence of one (issue #45).
  *
- * The category comparison goes through `toDisplayCategory` so the inbox agrees
- * with Starred and the brief, which filter mapped rows. `category` is optional
- * on the response and absent reads as `uncategorized` everywhere else — a
- * pre-classification thread renders an `uncategorized` badge, so a raw
- * comparison made the row you can see vanish under its own chip (#45).
+ * Only the parameters a chip switches on are present, so this merges with the
+ * search tokens (`is:unread`, `has:attachment`) as a union: where a chip and a
+ * token set the same parameter they agree on `true`.
  */
-export function applyInboxFilters(
-	threads: RemitImapThreadMessageResponse[],
-	category: string,
-	attributes: ReadonlySet<string>,
-): RemitImapThreadMessageResponse[] {
-	const predicates = Array.from(attributes)
-		.map((id) => INBOX_FILTER_PREDICATES[id])
-		.filter(
-			(p): p is (t: RemitImapThreadMessageResponse) => boolean => p != null,
-		);
-	if (category === "all" && predicates.length === 0) return threads;
-	return threads.filter(
-		(t) =>
-			(category === "all" || toDisplayCategory(t.category) === category) &&
-			predicates.every((p) => p(t)),
-	);
-}
+export const inboxFilterParams = (
+	criteria: InboxFilterCriteria,
+): InboxFilterParams => {
+	const params: InboxFilterParams = {};
+	if (isMessageCategory(criteria.category)) {
+		params.category = [criteria.category];
+	}
+	for (const id of criteria.attributes) {
+		const param = ATTRIBUTE_PARAMS[id];
+		if (param) params[param] = true;
+	}
+	return params;
+};
+
+/**
+ * How much of the mailbox a request reaches, read off the request itself.
+ *
+ * Every criterion the inbox sends today is a column on the row, so the server
+ * answers with a `where` over the whole mailbox and an empty result means the
+ * folder holds no matching mail. `senderTrust` and `dkimMismatch` are resolved
+ * by enriching a bounded window instead (design D7, D10), so a request carrying
+ * either has only seen the pages it read. Derived rather than declared: the
+ * completeness sentence the empty state renders is true of the query that was
+ * issued, not of the criteria that happen to ship today.
+ */
+export const filterReach = (query: ThreadSearchQuery): FilterReach =>
+	(query.senderTrust?.length ?? 0) > 0 || query.dkimMismatch !== undefined
+		? "loaded-pages"
+		: "whole-folder";
+
+const FILTER_PARAM_NAMES = [
+	"category",
+	"unread",
+	"starred",
+	"attachments",
+] as const;
+
+const filterIdentity = (query: Record<string, unknown> | undefined): string =>
+	JSON.stringify(FILTER_PARAM_NAMES.map((name) => query?.[name] ?? null));
+
+const queryOf = (queryKey: unknown): Record<string, unknown> | undefined => {
+	if (!Array.isArray(queryKey)) return undefined;
+	const [entry] = queryKey;
+	if (typeof entry !== "object" || entry === null) return undefined;
+	const query: unknown = (entry as { query?: unknown }).query;
+	if (typeof query !== "object" || query === null) return undefined;
+	return query as Record<string, unknown>;
+};
+
+/**
+ * Whether a cached list query was fetched under the same filter the request
+ * being made now carries.
+ *
+ * `keepPreviousData` renders the previous key's rows while a new page is in
+ * flight. That is right for a query the user is still typing and wrong the
+ * moment the filter changes: the previous predicate's mail would show under the
+ * new chip for one round trip, which is the failure this correction is about
+ * (design D18). An unrecognized key answers `false`, so the doubtful case
+ * restarts the list rather than rendering rows it cannot vouch for.
+ */
+export const sameInboxFilter = (
+	queryKey: unknown,
+	params: InboxFilterParams,
+): boolean => {
+	const previous = queryOf(queryKey);
+	if (!previous) return false;
+	return filterIdentity(previous) === filterIdentity(params);
+};

package/src/lib/search-pending.test.ts

@@ -10,7 +10,11 @@
 
 import assert from "node:assert";
 import { describe, test } from "node:test";
-import { isSearchPending, resolveSelectedThread } from "./search-pending.ts";
+import {
+	isSearchPending,
+	resolveOpenThread,
+	resolveSelectedThread,
+} from "./search-pending.ts";
 
 describe("isSearchPending (reading-pane suppression guard)", () => {
 	test("no search: both empty — not pending", () => {
@@ -59,3 +63,37 @@ describe("resolveSelectedThread (#623 reading-pane resolution)", () => {
 		assert.equal(selectedThread, undefined);
 	});
 });
+
+describe("resolveOpenThread (#306 filtered list)", () => {
+	const listed = { messageId: "msg-001", subject: "listed" };
+	const snapshot = { messageId: "msg-001", subject: "snapshot" };
+
+	test("prefers the row the list returned", () => {
+		assert.equal(resolveOpenThread(listed, snapshot, "msg-001", false), listed);
+	});
+
+	test("keeps the open thread when a filter pages it out of the list", () => {
+		assert.equal(
+			resolveOpenThread(undefined, snapshot, "msg-001", false),
+			snapshot,
+		);
+	});
+
+	test("drops a snapshot of a message that is no longer selected", () => {
+		assert.equal(
+			resolveOpenThread(undefined, snapshot, "msg-002", false),
+			undefined,
+		);
+		assert.equal(
+			resolveOpenThread(undefined, snapshot, undefined, false),
+			undefined,
+		);
+	});
+
+	test("a pending search still closes the pane (#539)", () => {
+		assert.equal(
+			resolveOpenThread(undefined, snapshot, "msg-001", true),
+			undefined,
+		);
+	});
+});

package/src/lib/search-pending.ts

@@ -22,3 +22,28 @@ export const resolveSelectedThread = <T extends { messageId: string }>(
 	if (pending || !selectedMessageId) return undefined;
 	return threads.find((t) => t.messageId === selectedMessageId);
 };
+
+/**
+ * The thread the reading pane shows, once the list is a server-side query
+ * (#306).
+ *
+ * The list used to hold every loaded row and filter a copy, so an open thread
+ * could always be found again in the unfiltered set. A filtered list is now the
+ * server's answer to one predicate, and a chip the open message does not match
+ * pages it out — so what the user opened is kept as a snapshot and answers for
+ * itself until they open something else. That is a derivation over the user's
+ * own selection, which stays on this side of the boundary.
+ *
+ * The snapshot is ignored while a search debounce is pending, so the pane still
+ * clears the instant a new search starts (#539).
+ */
+export const resolveOpenThread = <T extends { messageId: string }>(
+	listed: T | undefined,
+	opened: T | undefined,
+	selectedMessageId: string | undefined,
+	pending: boolean,
+): T | undefined => {
+	if (listed) return listed;
+	if (pending || !selectedMessageId) return undefined;
+	return opened?.messageId === selectedMessageId ? opened : undefined;
+};