@remit/web-client 0.0.246 → 0.0.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.246",
+  "version": "0.0.248",
   "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/config-import/ConfigImportWizard.tsx

@@ -565,7 +565,9 @@ export function ConfigImportWizard({ onDone }: ConfigImportWizardProps) {
 					results={sectionResults(report)}
 					message={failed?.message ?? "The import stopped before it finished."}
 					raw={`${failed?.code ?? WRITE_FAILURE_CODE}: ${failed?.message ?? "no message"}`}
-					nothingLanded={!report.applied}
+					// `applied` is the server's answer to what survived: false means the
+					// write was undone whole, and no section may read as landed.
+					undone={!report.applied}
 					onBack={goToFile}
 					onNext={() => runImport("apply", "merge")}
 				/>

package/src/components/config-import/config-import.fixtures.ts

@@ -182,11 +182,11 @@ export const partialImportReport: RemitImapConfigImportReport = report({
 });
 
 /**
- * The same stop with no section written: a store that holds the import in one
- * transaction undoes the earlier writes, so the report carries no landed item
- * and `applied` is false. Warnings go with them.
+ * The same stop on a backend that imports inside one transaction (#1093):
+ * `applied` is false and `items` holds only the rejected entry, because the
+ * rollback emptied the rest. No section may read as landed.
  */
-export const nothingLandedImportReport: RemitImapConfigImportReport = report({
+export const rolledBackImportReport: RemitImapConfigImportReport = report({
 	applied: false,
 	items: [
 		item(

package/src/components/config-import/config-import.stories.tsx

@@ -19,9 +19,9 @@ import {
 	cleanRunReport,
 	dryRunReport,
 	importedAccounts,
-	nothingLandedImportReport,
 	partialImportReport,
 	rejectedReports,
+	rolledBackImportReport,
 } from "./config-import.fixtures";
 import {
 	AccountCredentialsList,
@@ -417,7 +417,6 @@ export const PartiallyLandedImportUnnamed: Story = {
 				results={sectionResults(report)}
 				message={writeFailure(report)?.message ?? ""}
 				raw="import_write_failed: the store refused the write"
-				nothingLanded={!report.applied}
 			/>
 		);
 	},
@@ -430,23 +429,26 @@ export const PartiallyLandedImport: Story = {
 			results={sectionResults(partialImportReport)}
 			message={writeFailure(partialImportReport)?.message ?? ""}
 			raw={`import_write_failed: ${writeFailure(partialImportReport)?.message ?? ""}`}
-			nothingLanded={!partialImportReport.applied}
 		/>
 	),
 };
 
 /**
- * The same stop with no section written — a transaction undid the earlier
- * writes, or the first write was the one that failed. No section may carry a
- * tick, and the screen counts nothing as landed.
+ * The same stop on a transactional backend: nothing landed, and the screen
+ * says the import was undone rather than counting sections (#1093).
  */
-export const NothingLandedImport: Story = {
+export const RolledBackImport: Story = {
 	render: () => (
 		<StepPartialImport
-			results={sectionResults(nothingLandedImportReport)}
-			message={writeFailure(nothingLandedImportReport)?.message ?? ""}
-			raw={`import_write_failed: ${writeFailure(nothingLandedImportReport)?.message ?? ""}`}
-			nothingLanded={!nothingLandedImportReport.applied}
+			results={sectionResults(rolledBackImportReport)}
+			message={
+				writeFailure(rolledBackImportReport)?.message ??
+				"The import stopped before it finished."
+			}
+			raw={`import_write_failed: ${
+				writeFailure(rolledBackImportReport)?.message ?? "no message"
+			}`}
+			undone={!rolledBackImportReport.applied}
 		/>
 	),
 };

package/src/components/config-import/steps.tsx

@@ -704,15 +704,16 @@ export function StepFileRejected({
 }
 
 /**
- * A section nobody can vouch for reads as failed, never as pending: it is
- * finished, and an outcome the reader has to go and check for themselves is
- * not a quiet empty row. Pending is the empty row — nothing from the file went
- * into this section, whether the import never reached it or reached it and
- * wrote none of it — and it is the state that carries no tick.
+ * A section nobody can vouch for reads as failed, never as pending. Pending
+ * says "still coming"; this section is finished and its outcome is unknown,
+ * which is the row the reader has to go and check for themselves. A rolled-
+ * back section is the same answer from the server's side: it is not coming,
+ * because the transaction that wrote it undid itself.
  */
 function resultState(state: SectionResult["state"]) {
 	if (state === "landed") return "ok" as const;
-	if (state === "failed" || state === "unknown") return "failed" as const;
+	if (state === "failed" || state === "unknown" || state === "rolled-back")
+		return "failed" as const;
 	return "pending" as const;
 }
 
@@ -720,7 +721,7 @@ export function StepPartialImport({
 	results,
 	message,
 	raw,
-	nothingLanded,
+	undone,
 	onBack,
 	onNext,
 }: {
@@ -728,8 +729,8 @@ export function StepPartialImport({
 	/** The server's own account of what survived, which only it knows. */
 	message: string;
 	raw: string;
-	/** No section of the file was written — not that the instance is unchanged. */
-	nothingLanded: boolean;
+	/** `report.applied === false`: the import ran in a transaction and wrote nothing, so no section landed. */
+	undone?: boolean;
 } & StepNav) {
 	const landed = results.filter((result) => result.state === "landed").length;
 	const unknown = results.some((result) => result.state === "unknown");
@@ -737,14 +738,10 @@ export function StepPartialImport({
 		<WizardShell
 			steps={IMPORT_STEPS}
 			activeStep={1}
-			title={
-				nothingLanded
-					? "The import stopped, and nothing landed"
-					: "The import stopped part-way"
-			}
+			title="The import stopped part-way"
 			subtitle={
-				nothingLanded
-					? "No section of the file was written."
+				undone
+					? "Nothing was written — the whole import was undone."
 					: unknown
 						? "It did not say how far it got, so check Settings before importing again."
 						: `${landed} of ${results.length} sections landed.`
@@ -755,7 +752,7 @@ export function StepPartialImport({
 						Choose another file
 					</Button>
 					<Button variant="primary" onClick={onNext}>
-						{nothingLanded ? "Try the import again" : "Retry the rest"}
+						Retry the rest
 					</Button>
 				</>
 			}

package/src/components/mail/FlaggedList.tsx

@@ -12,9 +12,16 @@
  * 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.
+ *
+ * The category and attribute chips are query parameters, and the header's
+ * unread count is the server's own (#308). Both used to be computed over the
+ * pages the user happened to have loaded, so a category whose mail sat below
+ * the newest page showed an empty list, and the count grew with every press of
+ * "load more" while being presented as a total.
  */
 import {
 	flaggedFilterConfig,
+	type MessageListFilter,
 	MessageListPane,
 	type SearchResult,
 	type ThreadRowData,
@@ -24,14 +31,21 @@ import { type RefObject, useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
-import { useStarredThreads } from "@/hooks/useStarredThreads";
+import {
+	useStarredTextSearch,
+	useStarredThreads,
+	useStarredUnreadCount,
+} from "@/hooks/useStarredThreads";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import {
 	matchesBriefSearch,
 	matchesSearchTokens,
+	mergeSearchRows,
 	toThreadRowData,
 } from "@/lib/brief";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import { flaggedCriteria } from "@/lib/flagged-criteria";
+import { categoryLabel } from "@/lib/inbox-filters";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { rowToSearchResult } from "@/lib/search-result";
@@ -51,10 +65,8 @@ import {
 	useThreadListSelection,
 } from "./ThreadListInteraction";
 
-const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
-	unread: (t) => !t.isRead,
-	attachment: (t) => t.hasAttachment === true,
-};
+/** One page of the server-filtered text search, merged with the listing below. */
+const TEXT_SEARCH_PAGE_SIZE = 200;
 
 /**
  * The wizard this view's verbs walk, and the one its search entry lands on.
@@ -138,6 +150,26 @@ export function FlaggedList({
 		setActiveFilters(new Set());
 	}, []);
 
+	const { freeText: sq, tokens: queryTokens } = parseSearchTokens(
+		searchQuery.trim().toLowerCase(),
+		tokenContext,
+	);
+
+	// The chips and the tokens together, as query parameters: a category typed as
+	// `category:personal` narrows the request exactly as the chip does.
+	const { criteria, residual: residualTokens } = useMemo(
+		() =>
+			flaggedCriteria(
+				{ category: selectedCategory, attributes: activeFilters },
+				queryTokens,
+			),
+		[selectedCategory, activeFilters, queryTokens],
+	);
+	const textCriteria = useMemo(
+		() => (sq ? { ...criteria, query: sq } : criteria),
+		[criteria, sq],
+	);
+
 	const {
 		threads,
 		isLoading,
@@ -147,27 +179,27 @@ export function FlaggedList({
 		fetchNextPage,
 		hasNextPage,
 		isFetchingNextPage,
-	} = useStarredThreads();
-
-	const { freeText: sq, tokens: queryTokens } = parseSearchTokens(
-		searchQuery.trim().toLowerCase(),
-		tokenContext,
-	);
+	} = useStarredThreads(criteria);
+	const textMatches = useStarredTextSearch(textCriteria, TEXT_SEARCH_PAGE_SIZE);
 
 	const rows = useMemo<ThreadRowData[]>(() => {
-		const predicates = Array.from(activeFilters)
-			.map((id) => FILTER_PREDICATES[id])
-			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
-		return dedupeByThread(threads)
-			.map(toThreadRowData)
-			.filter(
-				(t) =>
-					(selectedCategory === "all" || t.category === selectedCategory) &&
-					predicates.every((p) => p(t)) &&
-					(!sq || matchesBriefSearch(t, sq)) &&
-					matchesSearchTokens(t, queryTokens),
-			);
-	}, [threads, selectedCategory, activeFilters, sq, queryTokens]);
+		const listed = dedupeByThread(threads).map(toThreadRowData);
+		// No free text: the server-filtered listing as it comes.
+		const matched = sq
+			? mergeSearchRows(
+					// The snippet half, over the rows already loaded. It only ever adds
+					// to the server's set — it is never what decides membership.
+					listed.filter((t) => matchesBriefSearch(t, sq)),
+					dedupeByThread(textMatches).map(toThreadRowData),
+				)
+			: listed;
+		// What is left is what no parameter can carry: `before:`, `after:`, `in:`,
+		// `account:`, and a token the chips overruled. The collapse runs last so
+		// the two halves of a text search cannot land one conversation twice.
+		return dedupeByThread(matched).filter((t) =>
+			matchesSearchTokens(t, residualTokens),
+		);
+	}, [threads, textMatches, sq, residualTokens]);
 
 	const openRow = useCallback(
 		(id: string, options?: OpenMessageOptions) => {
@@ -197,10 +229,24 @@ export function FlaggedList({
 		[rows, resultFolderIndex],
 	);
 
-	const unreadCount = useMemo(
-		() => rows.filter((t) => !t.isRead).length,
-		[rows],
-	);
+	// The server's count over the whole collection under the active criteria.
+	// `null` while it is in flight and `null` when it cannot be had, and the
+	// header then shows no number — never a page length dressed as a total.
+	const unreadCount = useStarredUnreadCount(textCriteria) ?? null;
+
+	// An empty list has to say how much was looked at, and the answer comes off
+	// the request. Every chip and every carried token is a column on the row, so
+	// the server answered over the whole collection; a residual token, or the
+	// snippet half of a free-text search, only ever saw the pages loaded so far.
+	const filterLabel = categoryLabel(selectedCategory);
+	const listFilter: MessageListFilter | undefined = filterLabel
+		? {
+				label: filterLabel,
+				reach:
+					residualTokens.length > 0 || sq ? "loaded-pages" : "whole-folder",
+				onClear: clearFilters,
+			}
+		: undefined;
 
 	const listState = isLoading
 		? "loading"
@@ -277,6 +323,10 @@ export function FlaggedList({
 					flatList
 					hideHeader
 					listState={chrome.searchResults ? "ready" : listState}
+					listFilter={listFilter}
+					// Flagged spans accounts and folders, so it is a collection and
+					// never "this mailbox". It names itself.
+					listScopeLabel="Starred"
 					searchQuery={sq ? searchQuery : undefined}
 					errorMessage={isError ? formatErrorMessage(error) : undefined}
 					onRetry={() => refetch()}

package/src/components/mail/MailListHeader.tsx

@@ -95,7 +95,13 @@ import {
 
 export interface MailListHeaderProps {
 	title: string;
-	unreadCount: number;
+	/**
+	 * Unread count beside the title. `null` is the one way to say the number is
+	 * not known, and the header then shows none: a count the server has not
+	 * answered is never replaced by a figure derived from the rows that happen to
+	 * be loaded (#308). Required so a caller that has no number says so.
+	 */
+	unreadCount: number | null;
 	/** The list body (filter sheet / sections / virtualized rows). */
 	children: ReactNode;
 	/**
@@ -442,9 +448,11 @@ export function MailListHeader({
 			),
 			titleMeta: (
 				<>
-					<span className="shrink-0 text-2xs text-fg-subtle">
-						{unreadCount.toLocaleString()} unread
-					</span>
+					{unreadCount === null ? null : (
+						<span className="shrink-0 text-2xs text-fg-subtle">
+							{unreadCount.toLocaleString()} unread
+						</span>
+					)}
 					<FilterToggle />
 					{refreshControl}
 				</>

package/src/components/mail/MailViewChrome.tsx

@@ -30,7 +30,8 @@ import { MailListHeader } from "./MailListHeader";
 
 interface MailViewChromeProps {
 	title: string;
-	unreadCount: number;
+	/** Unread count beside the title; `null` shows no number — see `MailListHeader`. */
+	unreadCount: number | null;
 	preset: FilterPreset;
 	selectedCategory: string;
 	activeFilters: ReadonlySet<string>;

package/src/components/mail/MailboxPane.tsx

@@ -98,6 +98,7 @@ import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
 import type { ConversationTarget } from "@/lib/conversation-target";
 import { dedupeThreadMessages } from "@/lib/dedupe-thread-messages";
 import {
+	categoryLabel,
 	filterReach,
 	hasInboxFilter,
 	type InboxFilterCriteria,
@@ -156,7 +157,8 @@ interface MailboxPaneContextValue {
 	mailboxAccountId: string | undefined;
 	mailboxAccountLoading: boolean;
 	mailboxName: string | null;
-	unreadCount: number;
+	/** The mailbox's unseen total, or null until it resolves — never a page length. */
+	unreadCount: number | null;
 	isDraftsMailbox: boolean;
 	// Rescue-from-Spam: true on the account's Junk/Spam folder, with the
 	// suspected-safe messages `useRescueCandidates` fetched. Drives the rescue
@@ -240,14 +242,6 @@ interface MailboxPaneContextValue {
  *  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 {
@@ -433,7 +427,7 @@ function MailboxPaneProvider({
 	// 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 filterLabel = categoryLabel(filterCategory);
 	const listFilter: MessageListFilter | undefined = filterLabel
 		? {
 				label: filterLabel,
@@ -512,7 +506,7 @@ function MailboxPaneProvider({
 	// 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 unreadCount = useCurrentMailboxUnseenCount({ accounts }) ?? null;
 
 	const toolbarActions = useThreadActions({
 		thread: selectedThread,

package/src/hooks/useStarredThreads.test.ts

@@ -22,6 +22,7 @@ import { renderToString } from "react-dom/server";
 import {
 	starredThreadsQueryKey,
 	useStarredThreads,
+	useStarredUnreadCount,
 } from "./useStarredThreads.js";
 
 interface Page {
@@ -141,3 +142,78 @@ describe("useStarredThreads", () => {
 		assert.deepEqual(threads, []);
 	});
 });
+
+// #308: the chips were a pass over the pages loaded so far, and the header
+// count was their length. Both are the server's answer now.
+describe("starred criteria", () => {
+	test("carries the chips as query parameters", () => {
+		const [params] = starredThreadsQueryKey({
+			category: ["social"],
+			unread: true,
+			attachments: true,
+		}) as [
+			{
+				query?: {
+					starred?: boolean;
+					category?: string[];
+					unread?: boolean;
+					attachments?: boolean;
+				};
+			},
+		];
+		assert.equal(params.query?.starred, true);
+		assert.deepEqual(params.query?.category, ["social"]);
+		assert.equal(params.query?.unread, true);
+		assert.equal(params.query?.attachments, true);
+	});
+
+	test("an unfiltered listing asks for exactly what it asked for before", () => {
+		assert.deepEqual(starredThreadsQueryKey({}), starredThreadsQueryKey());
+	});
+});
+
+describe("useStarredUnreadCount", () => {
+	function renderCount(seed?: { count?: number }): number | undefined {
+		const client = new QueryClient({
+			defaultOptions: { queries: { retry: false } },
+		});
+		if (seed) {
+			client.setQueryData(
+				unifiedThreadOperationsListAllThreadsQueryKey({
+					query: {
+						starred: true,
+						order: "desc",
+						unread: true,
+						count: true,
+						results: false,
+					},
+				}),
+				seed,
+			);
+		}
+
+		let captured: number | undefined;
+		function Capture() {
+			captured = useStarredUnreadCount();
+			return null;
+		}
+		renderToString(
+			createElement(
+				QueryClientProvider,
+				{ client },
+				createElement(Capture),
+			) as never,
+		);
+		return captured;
+	}
+
+	test("reports the server's count", () => {
+		assert.equal(renderCount({ count: 137 }), 137);
+	});
+
+	// A count the server has not answered is no number at all. A page length
+	// dressed as a total is what this replaces.
+	test("reports nothing when the server has not answered", () => {
+		assert.equal(renderCount(), undefined);
+	});
+});

package/src/hooks/useStarredThreads.ts

@@ -8,20 +8,43 @@
  * selection from any other listing reintroduces issue #70 — the INBOX-scoped
  * unified listing cannot see a starred thread filed elsewhere, so its row is
  * clickable but resolves to nothing and no reading pane opens.
+ *
+ * The filters travel as query parameters rather than as a pass over the pages
+ * loaded so far. A starred collection is paged, so a category whose mail sits
+ * below the newest page rendered an empty list however much of it the
+ * collection held (#308); the server answers the predicate over the whole
+ * collection instead, and a page comes back full of matches.
  */
 import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
+import type { InboxFilterParams } from "@/lib/inbox-filters";
+
+/** The criteria the Flagged view narrows its listing by, all server-applied. */
+export interface StarredCriteria extends InboxFilterParams {
+	/** Free text, matched against subject and From over the whole collection. */
+	query?: string;
+	/** Page size, set only by the single-page text search. */
+	limit?: number;
+}
+
+// `starred` and `order` are the view itself, not a criterion, so they are set
+// last: no chip can widen the listing past starred mail or reorder it.
+const starredQuery = (criteria: StarredCriteria) => ({
+	...criteria,
+	starred: true as const,
+	order: "desc" as const,
+});
 
-export const starredThreadsQueryKey = () =>
+export const starredThreadsQueryKey = (criteria: StarredCriteria = {}) =>
 	unifiedThreadOperationsListAllThreadsQueryKey({
-		query: { starred: true, order: "desc" },
+		query: starredQuery(criteria),
 	});
 
 interface StarredThreads {
-	/** Every starred thread across the pages loaded so far, newest first. */
+	/** Every matching starred thread across the pages loaded so far, newest first. */
 	threads: RemitImapThreadMessageResponse[];
 	isLoading: boolean;
 	isError: boolean;
@@ -32,7 +55,9 @@ interface StarredThreads {
 	isFetchingNextPage: boolean;
 }
 
-export function useStarredThreads(): StarredThreads {
+export function useStarredThreads(
+	criteria: StarredCriteria = {},
+): StarredThreads {
 	const {
 		data,
 		isLoading,
@@ -43,12 +68,11 @@ export function useStarredThreads(): StarredThreads {
 		hasNextPage,
 		isFetchingNextPage,
 	} = useInfiniteQuery({
-		queryKey: starredThreadsQueryKey(),
+		queryKey: starredThreadsQueryKey(criteria),
 		queryFn: async ({ pageParam }) => {
 			const { data: page } = await unifiedThreadOperationsListAllThreads({
 				query: {
-					starred: true,
-					order: "desc",
+					...starredQuery(criteria),
 					continuationToken: pageParam,
 				},
 				throwOnError: true,
@@ -76,3 +100,70 @@ export function useStarredThreads(): StarredThreads {
 		isFetchingNextPage,
 	};
 }
+
+/**
+ * The server's own text match over the whole starred collection, as one page.
+ *
+ * The free-text filter has two halves that no single request covers: the server
+ * matches subject and From over every starred message, and the client can also
+ * match a snippet, but only on rows it has already loaded. The server's set is
+ * the filter — it is the half that sees the mail below the newest page — and
+ * the snippet pass complements it (#308). Same shape as the daily brief's
+ * unscoped search, which merges the same two halves.
+ */
+export function useStarredTextSearch(
+	criteria: StarredCriteria,
+	limit: number,
+): RemitImapThreadMessageResponse[] {
+	const text = criteria.query ?? "";
+	const query = { ...starredQuery(criteria), limit };
+	const { data } = useQuery({
+		queryKey: unifiedThreadOperationsListAllThreadsQueryKey({ query }),
+		queryFn: async () => {
+			const { data: page } = await unifiedThreadOperationsListAllThreads({
+				query,
+				throwOnError: true,
+			});
+			return page;
+		},
+		enabled: text.length > 0,
+		staleTime: 30_000,
+	});
+	return useMemo(() => data?.items ?? [], [data]);
+}
+
+/**
+ * How many of the matching starred messages are unread, counted by the server.
+ *
+ * Its own request, so no cursor enters the key and pressing "load more" cannot
+ * move the number — the count is over the whole collection under the active
+ * criteria, which is what the header claims it is. A page-length count grows
+ * with every press and reads as a total, which is the defect this replaces
+ * (#308). `results: false` reads the count alone: no rows are fetched or
+ * enriched to answer it.
+ *
+ * Undefined until the server answers, and undefined when it cannot. The header
+ * shows no number rather than a made-up one.
+ */
+export function useStarredUnreadCount(
+	criteria: StarredCriteria = {},
+): number | undefined {
+	const query = {
+		...starredQuery(criteria),
+		unread: true,
+		count: true,
+		results: false,
+	};
+	const { data } = useQuery({
+		queryKey: unifiedThreadOperationsListAllThreadsQueryKey({ query }),
+		queryFn: async () => {
+			const { data: page } = await unifiedThreadOperationsListAllThreads({
+				query,
+				throwOnError: true,
+			});
+			return page;
+		},
+		staleTime: 60_000,
+	});
+	return data?.count;
+}

package/src/lib/config-import.test.ts

@@ -151,13 +151,13 @@ test("a stopped import splits the write order into landed, failed and never reac
 	assert.equal(byId.get("settings")?.state, "not-attempted");
 });
 
-test("an import the server says wrote nothing marks no section landed, whatever ran before the stop", () => {
-	const results = sectionResults(
+test("a rolled-back import lands nothing, however far the items say it got", () => {
+	// The shape a transactional backend answers with (#1093): `items` holds
+	// only the rejected entry, because the rollback emptied the rest.
+	const rolled = sectionResults(
 		reportOf({
 			applied: false,
-			items: [
-				item("filters", "Receipts", "rejected", "the store refused the write"),
-			],
+			items: [item("filters", "Receipts", "rejected", "the store refused")],
 			errors: [
 				{
 					code: "import_write_failed",
@@ -169,55 +169,71 @@ test("an import the server says wrote nothing marks no section landed, whatever
 		}),
 	);
 
-	const byId = new Map(results.map((result) => [result.section, result]));
-	assert.equal(byId.get("accounts")?.state, "not-landed");
-	assert.match(
-		byId.get("accounts")?.detail ?? "",
-		/Nothing from this section was written/,
+	assert.equal(
+		rolled.some((result) => result.state === "landed"),
+		false,
 	);
-	assert.equal(byId.get("labels")?.state, "not-landed");
+	const byId = new Map(rolled.map((result) => [result.section, result]));
+	assert.equal(byId.get("accounts")?.state, "rolled-back");
+	assert.match(byId.get("accounts")?.detail ?? "", /Nothing was written/);
+	assert.equal(byId.get("labels")?.state, "rolled-back");
 	assert.equal(byId.get("filters")?.state, "failed");
-	assert.equal(byId.get("addressFlags")?.state, "not-attempted");
-	assert.equal(byId.get("settings")?.state, "not-attempted");
-	assert.equal(results.filter((result) => result.state === "landed").length, 0);
+	assert.match(byId.get("filters")?.detail ?? "", /Nothing was written/);
+	assert.equal(byId.get("addressFlags")?.state, "rolled-back");
+	assert.equal(byId.get("settings")?.state, "rolled-back");
 });
 
-test("a first write that fails on a store with no transaction lands nothing either", () => {
-	const results = sectionResults(
+test("item verdicts cannot turn a rolled-back import back into a landed one", () => {
+	// `applied` is the server's own answer, and it outranks the counts: a
+	// report that claims writes while saying nothing was applied still lands
+	// nothing, because "your accounts are in" is the one answer this screen
+	// must never give without the server saying so.
+	const rolled = sectionResults(
 		reportOf({
 			applied: false,
 			items: [
-				item("accounts", "a@example.test", "rejected", "the store refused"),
+				item("accounts", "a@example.test", "created"),
+				item("labels", "Receipts", "created"),
 			],
 			errors: [
 				{
 					code: "import_write_failed",
-					message:
-						"the store refused The items above it were written and remain; the import stopped here.",
-					details: { section: "accounts", key: "a@example.test" },
+					message: "the store refused the write",
+					details: { section: "filters", key: "Receipts" },
 				},
 			],
 		}),
 	);
 
-	const byId = new Map(results.map((result) => [result.section, result]));
-	assert.equal(byId.get("accounts")?.state, "failed");
-	assert.equal(byId.get("labels")?.state, "not-attempted");
-	assert.equal(results.filter((result) => result.state === "landed").length, 0);
+	assert.equal(
+		rolled.some((result) => result.state === "landed"),
+		false,
+	);
+	assert.deepEqual(
+		rolled
+			.filter((result) => result.section !== "filters")
+			.map((result) => result.state),
+		["rolled-back", "rolled-back", "rolled-back", "rolled-back"],
+	);
 });
 
-test("nothing written and no section named is a known outcome, not an unknown one", () => {
-	const results = sectionResults(
+test("a rolled-back import that names no section still says what happened", () => {
+	const rolled = sectionResults(
 		reportOf({
 			applied: false,
 			errors: [{ code: "import_write_failed", message: "the store refused" }],
 		}),
 	);
 
-	assert.deepEqual(
-		[...new Set(results.map((result) => result.state))],
-		["not-landed"],
+	assert.equal(
+		rolled.some((result) => result.state === "landed"),
+		false,
+	);
+	assert.equal(
+		rolled.some((result) => result.state === "unknown"),
+		false,
 	);
+	assert.match(rolled[0].detail, /Nothing was written/);
 });
 
 test("a pending folder names the setting waiting on it, and repeats are folded", () => {

package/src/lib/config-import.ts

@@ -287,9 +287,9 @@ export const writeFailure = (
 
 export type SectionOutcome =
 	| "landed"
-	| "not-landed"
 	| "failed"
 	| "not-attempted"
+	| "rolled-back"
 	| "unknown";
 
 export interface SectionResult {
@@ -299,24 +299,23 @@ export interface SectionResult {
 	detail: string;
 }
 
-const NOT_LANDED_DETAIL = "Nothing from this section was written.";
-
 /**
- * What a stopped import wrote, section by section. The write order is fixed, so
- * the section the failure names splits the document in three: what is before it
- * ran, it did not, and what is after it was never reached.
- *
- * `applied` is the server's answer on whether any of it was written, because
- * only the backend knows whether it had a transaction: false means no section
- * of the file was written, however far the write order got. It does not say
- * why — a transaction undid the earlier writes, or the first one failed — and
- * the report carries no flag that does, so this says what the file put in and
- * never what the instance now holds.
+ * What a stopped import left behind, section by section. The write order is
+ * fixed, so the section the failure names splits the document in three: what is
+ * before it ran, it did not, and what is after it was never reached. The
+ * server's own sentence says whether the earlier writes survived, because only
+ * the backend knows whether it had a transaction.
  *
- * A failure that names no section leaves the split undecidable, and every
+ * A failure that names no section leaves that split undecidable, and every
  * section reads `unknown` rather than `landed`. Telling someone their accounts
  * are in when nothing said so is the one answer this screen must never give:
  * they would stop looking.
+ *
+ * `applied` says so when the import ran in a transaction: `false` means the
+ * write was undone whole, and the item counts — empty precisely because the
+ * rollback emptied them — must not turn sections before the failure back into
+ * `landed`. Every section then reads `rolled-back` except the one the failure
+ * named, which keeps its `failed` row and the server's own sentence.
  */
 export const sectionResults = (
 	report: RemitImapConfigImportReport,
@@ -324,7 +323,6 @@ export const sectionResults = (
 	const failure = writeFailure(report);
 	const named = failure?.details?.section;
 	const failedSection = named ? asSection(named) : undefined;
-	const nothingLanded = !report.applied;
 	const counts = new Map<ImportSection, number>();
 	for (const item of report.items) {
 		if (asVerdict(item.verdict) === "rejected") continue;
@@ -333,20 +331,31 @@ export const sectionResults = (
 		counts.set(section, (counts.get(section) ?? 0) + 1);
 	}
 
-	const everySection = (state: SectionOutcome, detail: string) =>
-		IMPORT_SECTION_ORDER.map((section) => ({
+	if (failure && report.applied === false) {
+		return IMPORT_SECTION_ORDER.map((section) => ({
 			section,
 			title: SECTION_TITLES[section],
-			state,
-			detail,
+			state:
+				section === failedSection
+					? ("failed" as const)
+					: ("rolled-back" as const),
+			detail:
+				section === failedSection
+					? (failure.message ?? "This section could not be written.")
+					: "Nothing was written — the import ran as one transaction and was undone.",
 		}));
+	}
 
 	if (!failedSection) {
-		if (nothingLanded) return everySection("not-landed", NOT_LANDED_DETAIL);
 		const detail = named
 			? `The import stopped in "${named}", which this instance does not recognise, so it cannot say whether this section was written.`
 			: "The import stopped without naming where, so it cannot say whether this section was written. Open Settings to see what is here.";
-		return everySection("unknown", detail);
+		return IMPORT_SECTION_ORDER.map((section) => ({
+			section,
+			title: SECTION_TITLES[section],
+			state: "unknown" as const,
+			detail,
+		}));
 	}
 
 	const failedAt = IMPORT_SECTION_ORDER.indexOf(failedSection);
@@ -369,14 +378,6 @@ export const sectionResults = (
 				detail: "Not attempted — the import stopped before this section.",
 			};
 		}
-		if (nothingLanded) {
-			return {
-				section,
-				title,
-				state: "not-landed" as const,
-				detail: NOT_LANDED_DETAIL,
-			};
-		}
 		const written = counts.get(section) ?? 0;
 		return {
 			section,

package/src/lib/flagged-criteria.test.ts

@@ -0,0 +1,99 @@
+/**
+ * What the Flagged view asks the server for.
+ *
+ * #308: the chips became query parameters, and the tokens that ask for the same
+ * thing have to travel the same way. A token evaluated over the pages loaded so
+ * far reintroduces the defect one control down — the field would show an empty
+ * list for a category whose starred mail sits below the newest page, while the
+ * chip beside it showed the mail.
+ */
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { flaggedCriteria } from "./flagged-criteria.js";
+import type { InboxFilterCriteria } from "./inbox-filters.js";
+import { parseSearchTokens, type SearchToken } from "./search-tokens.js";
+
+const NO_CHIPS: InboxFilterCriteria = {
+	category: "all",
+	attributes: new Set<string>(),
+};
+
+const chips = (
+	category: string,
+	attributes: string[] = [],
+): InboxFilterCriteria => ({ category, attributes: new Set(attributes) });
+
+const tokensOf = (query: string): SearchToken[] =>
+	parseSearchTokens(query, {
+		accountsByName: new Map([["alice", "acc_1"]]),
+		mailboxesByName: new Map([["sent", "mb2"]]),
+	}).tokens;
+
+const criteriaOf = (query: string, filters = NO_CHIPS) =>
+	flaggedCriteria(filters, tokensOf(query)).criteria;
+
+const residualTypes = (query: string, filters = NO_CHIPS) =>
+	flaggedCriteria(filters, tokensOf(query)).residual.map((t) => t.type);
+
+describe("flaggedCriteria", () => {
+	test("a typed token asks for exactly what its chip asks for", () => {
+		assert.deepEqual(
+			criteriaOf("is:unread"),
+			criteriaOf("", chips("all", ["unread"])),
+		);
+		assert.deepEqual(
+			criteriaOf("has:attachment"),
+			criteriaOf("", chips("all", ["attachment"])),
+		);
+		assert.deepEqual(
+			criteriaOf("category:personal"),
+			criteriaOf("", chips("personal")),
+		);
+	});
+
+	test("carries the row criteria as parameters", () => {
+		assert.deepEqual(criteriaOf("is:unread"), { unread: true });
+		assert.deepEqual(criteriaOf("is:read"), { unread: false });
+		assert.deepEqual(criteriaOf("has:attachment"), { attachments: true });
+		assert.deepEqual(criteriaOf("category:social"), { category: ["social"] });
+	});
+
+	test("leaves nothing carried in the residue", () => {
+		assert.deepEqual(
+			residualTypes("is:unread has:attachment category:personal"),
+			[],
+		);
+	});
+
+	// The view is starred mail, so the request always carries `starred`. A token
+	// asking for what the request already asks for is answered, not re-applied.
+	test("answers is:starred from the view itself", () => {
+		assert.deepEqual(residualTypes("is:starred"), []);
+	});
+
+	// No `from`/`subject` parameter on this endpoint: its one text parameter
+	// matches both at once, so these stay a pass over the returned rows rather
+	// than being dropped from a request that never carried them.
+	test("keeps the tokens no parameter carries", () => {
+		assert.deepEqual(residualTypes("from:alice"), ["from"]);
+		assert.deepEqual(residualTypes("before:2026-01-01"), ["before"]);
+		assert.deepEqual(residualTypes("in:sent"), ["in"]);
+		assert.deepEqual(residualTypes("account:alice"), ["account"]);
+	});
+
+	test("the chip wins over a token that contradicts it", () => {
+		const { criteria, residual } = flaggedCriteria(
+			chips("all", ["unread"]),
+			tokensOf("is:read"),
+		);
+		assert.equal(criteria.unread, true);
+		assert.deepEqual(
+			residual.map((t) => t.type),
+			["isRead"],
+		);
+	});
+
+	test("a cleared category sets no category parameter", () => {
+		assert.deepEqual(criteriaOf("", NO_CHIPS), {});
+	});
+});

package/src/lib/flagged-criteria.ts

@@ -0,0 +1,61 @@
+/**
+ * What the Flagged view asks `listAllThreads` for, and what is left over.
+ *
+ * Every criterion the view offers — the category chip, the Unread and Has
+ * attachment chips, and the `category:` / `is:unread` / `is:read` /
+ * `has:attachment` / `is:starred` tokens typed in the field — is a column on
+ * the ThreadMessage row, so all of them travel as query parameters. A criterion
+ * applied over the pages loaded so far is the defect this replaces: a starred
+ * collection is paged, so anything below the newest page was invisible to it
+ * (#308).
+ *
+ * `starred` is the view rather than a criterion: the request always carries it,
+ * which is what makes `is:starred` a carried token instead of residue.
+ *
+ * A chip beats a token where both set the same parameter — a control on screen
+ * beats text in a field — and the overruled token drops to the residue, where
+ * it matches nothing, which is the honest answer to a contradiction.
+ */
+import type {
+	InboxFilterCriteria,
+	InboxFilterParams,
+} from "./inbox-filters.js";
+import { inboxFilterParams } from "./inbox-filters.js";
+import type { SearchToken } from "./search-tokens.js";
+import {
+	type ThreadSearchTokenParamName,
+	threadSearchTokens,
+} from "./thread-search-tokens.js";
+
+/**
+ * The token parameters `listAllThreads` carries. It has no `from` or `subject`
+ * of its own — its one text parameter matches both at once — so those two
+ * tokens stay residue rather than being dropped from a request that never had
+ * them.
+ */
+export const FLAGGED_TOKEN_PARAMS: readonly ThreadSearchTokenParamName[] = [
+	"category",
+	"unread",
+	"starred",
+	"attachments",
+];
+
+export interface FlaggedCriteria {
+	/** What the request narrows by, chips and carried tokens together. */
+	criteria: InboxFilterParams;
+	/** The tokens no parameter carries; apply these over the returned rows. */
+	residual: SearchToken[];
+}
+
+export const flaggedCriteria = (
+	chips: InboxFilterCriteria,
+	tokens: readonly SearchToken[],
+): FlaggedCriteria => {
+	const chipParams = inboxFilterParams(chips);
+	const { params, residual } = threadSearchTokens(
+		tokens,
+		{ ...chipParams, starred: true },
+		FLAGGED_TOKEN_PARAMS,
+	);
+	return { criteria: { ...params, ...chipParams }, residual };
+};

package/src/lib/inbox-filters.ts

@@ -3,20 +3,26 @@ import type {
 	ThreadOperationsSearchThreadsData,
 } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
-import type { FilterReach } from "@remit/ui";
+import { type FilterReach, inboxFilterConfig } from "@remit/ui";
 
 /** The request `threadOperationsSearchThreads` takes, whole. */
 export type ThreadSearchQuery = NonNullable<
 	ThreadOperationsSearchThreadsData["query"]
 >;
 
-/** The parameters the inbox chips set on that request. */
+/**
+ * The parameters the filter chips set on a thread listing.
+ *
+ * Named for the inbox, which had them first, but shared: `listAllThreads` takes
+ * the same four (#308), so the Flagged view sends the chips through this rather
+ * than growing a second translation of the same chip ids.
+ */
 export type InboxFilterParams = Pick<
 	ThreadSearchQuery,
 	"category" | "unread" | "starred" | "attachments"
 >;
 
-/** The chip state the inbox holds: one category, any number of attributes. */
+/** The chip state a filtered list holds: one category, any number of attributes. */
 export interface InboxFilterCriteria {
 	/** A category id, or `"all"` when the category is cleared. */
 	category: string;
@@ -121,3 +127,18 @@ export const sameInboxFilter = (
 	if (!previous) return false;
 	return filterIdentity(previous) === filterIdentity(params);
 };
+
+/**
+ * The label the empty state names an active category filter by, or undefined
+ * when the id names no category — `"all"` is how the category is cleared, not a
+ * category. Read off the preset so the chip and the sentence about it can never
+ * disagree; every list preset draws its categories from the same set.
+ */
+const CATEGORY_LABELS = new Map(
+	inboxFilterConfig()
+		.categories.filter((category) => category.id !== "all")
+		.map((category) => [category.id, category.label]),
+);
+
+export const categoryLabel = (id: string): string | undefined =>
+	CATEGORY_LABELS.get(id);

package/src/lib/starred-rows.ts

@@ -1,5 +1,3 @@
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-
 /**
  * Collapse rows that are the same conversation.
  *
@@ -12,12 +10,19 @@ import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/type
  * 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.
+ *
+ * Generic over anything naming its thread, so the same collapse runs over the
+ * API rows and over the merged display rows a text search produces — two
+ * definitions of "same conversation" is one too many. A row that names no
+ * thread is never merged: there is nothing to say it is the same conversation
+ * as any other.
  */
-export const dedupeByThread = (
-	items: RemitImapThreadMessageResponse[],
-): RemitImapThreadMessageResponse[] => {
+export const dedupeByThread = <T extends { threadId?: string }>(
+	items: T[],
+): T[] => {
 	const seen = new Set<string>();
 	return items.filter((item) => {
+		if (item.threadId === undefined) return true;
 		if (seen.has(item.threadId)) return false;
 		seen.add(item.threadId);
 		return true;

package/src/lib/thread-search-tokens.ts

@@ -33,6 +33,19 @@ export type ThreadSearchTokenParams = Pick<
 	"from" | "subject" | "category" | "unread" | "starred" | "attachments"
 >;
 
+/** A parameter name a listing endpoint accepts. */
+export type ThreadSearchTokenParamName = keyof ThreadSearchTokenParams;
+
+/**
+ * Every parameter `searchThreads` takes, the default set.
+ *
+ * `listAllThreads` takes all of these except `from` and `subject`, so a caller
+ * on that endpoint names its own set and the two tokens come back as residue
+ * rather than being silently dropped from a request that never carried them.
+ */
+export const THREAD_SEARCH_TOKEN_PARAMS: readonly ThreadSearchTokenParamName[] =
+	["from", "subject", "category", "unread", "starred", "attachments"];
+
 export interface ThreadSearchTokens {
 	/** What the tokens add to the request. */
 	params: ThreadSearchTokenParams;
@@ -106,17 +119,32 @@ const isCarried = (
 	}
 };
 
+const narrowTo = (
+	params: ThreadSearchTokenParams,
+	carries: readonly ThreadSearchTokenParamName[],
+): ThreadSearchTokenParams =>
+	Object.fromEntries(
+		Object.entries(params).filter(([name]) =>
+			carries.includes(name as ThreadSearchTokenParamName),
+		),
+	);
+
 /**
- * Split the tokens into the parameters the thread search takes and the residue
+ * Split the tokens into the parameters the thread listing takes and the residue
  * the caller has to apply itself. `chipParams` are the parameters already set
- * by the inbox filter chips, which win where they overlap.
+ * by the filter chips, which win where they overlap; `carries` names the
+ * parameters the endpoint being called actually accepts.
  */
 export function threadSearchTokens(
 	tokens: readonly SearchToken[],
 	chipParams: InboxFilterParams = {},
+	carries: readonly ThreadSearchTokenParamName[] = THREAD_SEARCH_TOKEN_PARAMS,
 ): ThreadSearchTokens {
-	const params = paramsFromTokens(tokens);
-	const request: ThreadSearchTokenParams = { ...params, ...chipParams };
+	const params = narrowTo(paramsFromTokens(tokens), carries);
+	const request: ThreadSearchTokenParams = {
+		...params,
+		...narrowTo(chipParams, carries),
+	};
 	return {
 		params,
 		residual: tokens.filter((token) => !isCarried(request, token)),