@remit/web-client 0.0.107 → 0.0.108

package/package.json

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

@@ -42,8 +42,10 @@ import {
 	type FilterSheetProps,
 	type FilterSheetSource,
 	KeyboardHintBar,
+	partitionSpamResults,
 	type SearchResult,
 	SelectionTopBar,
+	SpamResultsOffer,
 	type ThreadRowData,
 	type ThreadSection,
 } from "@remit/ui";
@@ -81,6 +83,7 @@ import type { ListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
+import { spamOfferForResults } from "@/lib/spam-offer";
 import {
 	type SelectionWizardControl,
 	useSelectionWizard,
@@ -463,6 +466,7 @@ export function DailyBrief({
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
 	const wizard = useSelectionWizard();
+	const navigate = useNavigate();
 
 	const nonMuted = useMemo(
 		() => sortAccountsByCreatedAt(accounts.filter((a) => !a.muted?.value)),
@@ -592,9 +596,33 @@ export function DailyBrief({
 		);
 	}, [threadsData, searchData, selectedAccountId, sq, queryTokens]);
 
+	// The unscoped search reaches every folder, Spam included (see `filteredRows`
+	// above), and the brief is the one global-scope view whose own rows now stand
+	// in for the read-only results panel once the query commits. The panel held
+	// Spam out and offered a way to it instead (`MailListHeader`'s `spamOffer`);
+	// the brief's own body has to do the same, or a committed search surfaces
+	// junk mail inline and drops the way back to it. A bare token query (e.g.
+	// `is:unread`) never reaches the widened endpoint, so there is nothing to
+	// hold out.
+	const { bodyRows, briefSpamOffer } = useMemo(() => {
+		if (!sq) return { bodyRows: filteredRows, briefSpamOffer: undefined };
+		const asResults = filteredRows.map((row) =>
+			rowToSearchResult(row, resultFolderIndex),
+		);
+		const { spam } = partitionSpamResults(asResults);
+		if (spam.length === 0) {
+			return { bodyRows: filteredRows, briefSpamOffer: undefined };
+		}
+		const spamIds = new Set(spam.map((result) => result.id));
+		return {
+			bodyRows: filteredRows.filter((row) => !spamIds.has(row.id)),
+			briefSpamOffer: spamOfferForResults(asResults),
+		};
+	}, [filteredRows, sq, resultFolderIndex]);
+
 	const sections = useMemo<ThreadSection[]>(
-		() => groupBriefSections(filteredRows),
-		[filteredRows],
+		() => groupBriefSections(bodyRows),
+		[bodyRows],
 	);
 
 	const accountSources = useMemo<FilterSheetSource[]>(() => {
@@ -693,10 +721,14 @@ export function DailyBrief({
 	]);
 
 	// The brief is genuinely empty (caught up) only when nothing is narrowing the
-	// view: no account source and no search. When a source/search yields nothing,
-	// the list says so instead, so the narrowing is still visible as the reason.
+	// view: no account source and no search — free text or token. When a
+	// source/search yields nothing, the list says so instead, so the narrowing
+	// is still visible as the reason.
 	const caughtUp =
-		sections.length === 0 && selectedAccountId === "all" && sq.length === 0;
+		sections.length === 0 &&
+		selectedAccountId === "all" &&
+		sq.length === 0 &&
+		queryTokens.length === 0;
 
 	// "Caught up" is a claim about the user's mail, so it may only be made once
 	// the server has confirmed no sync is running (#452). The config snapshot
@@ -752,12 +784,32 @@ export function DailyBrief({
 			briefSkeleton
 		)
 	) : (
-		<BriefListBody
-			sections={sections}
-			briefCategory={selectedCategory}
-			selectedThreadId={selectedMessageId}
-			onSelectThread={onSelectMessage}
-		/>
+		<div className="flex h-full min-h-0 flex-col">
+			{briefSpamOffer && (
+				<SpamResultsOffer
+					count={briefSpamOffer.count}
+					onScopeToSpam={() =>
+						navigate({
+							to: "/mail/$mailboxId",
+							params: { mailboxId: briefSpamOffer.mailboxId },
+							search: {
+								q: searchQuery || undefined,
+								selectedMessageId: undefined,
+								selectedThreadId: undefined,
+							},
+						})
+					}
+				/>
+			)}
+			<div className="min-h-0 flex-1">
+				<BriefListBody
+					sections={sections}
+					briefCategory={selectedCategory}
+					selectedThreadId={selectedMessageId}
+					onSelectThread={onSelectMessage}
+				/>
+			</div>
+		</div>
 	);
 
 	// The cursor and selection wrap the whole pane, not just the list body: the
@@ -785,6 +837,12 @@ export function DailyBrief({
 					relatedResults,
 					relatedLoading,
 					onSelectSearchResult,
+					// The body already narrows to the committed query
+					// (`matchesBriefSearch` + `matchesSearchTokens` + the server `query`,
+					// above), so a committed search is a selectable list here exactly as
+					// it is on the mailbox route (#212) — the two-engine panel stays for
+					// the typing/uncommitted state only.
+					searchResultsInBody: true,
 				}}
 				rows={filteredRows}
 			>

package/src/components/mail/FlaggedList.tsx

@@ -237,6 +237,11 @@ export function FlaggedList({
 			searchResults={searchResults}
 			searchLoading={isLoading}
 			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
+			// A committed search renders in this view's own rows (`rows` already
+			// narrows to the query above), so the multi-select toolbar stays
+			// reachable exactly as it does on the mailbox route (#212). The
+			// two-engine panel stays for the typing/uncommitted state only.
+			searchResultsInBody
 		>
 			<ThreadListInteraction
 				selectedMessageId={selectedMessageId}

package/src/components/mail/MailListHeader.tsx

@@ -129,13 +129,13 @@ export interface MailListHeaderProps {
 	relatedResultsLabel?: string;
 	/**
 	 * The body renders the committed search itself as a selectable list — the
-	 * mailbox route's `MessageList` filters to the search results and hosts the
-	 * multi-select toolbar and the "Select all N matching" escalation (#212).
-	 * When set, a committed query keeps the body on tablet/desktop instead of
-	 * swapping in the read-only two-engine `SearchResults` panel; the panel still
-	 * shows while the query is being typed (uncommitted). Views whose body is not
-	 * a search-result list (the brief, flagged, global search) leave this unset
-	 * and keep the panel for every query.
+	 * mailbox route's `MessageList` and the brief and Starred's own rows filter
+	 * to the search and host the multi-select toolbar and (on the mailbox route)
+	 * the "Select all N matching" escalation (#212). When set, a committed query
+	 * keeps the body on tablet/desktop instead of swapping in the read-only
+	 * two-engine `SearchResults` panel; the panel still shows while the query is
+	 * being typed (uncommitted). A view whose body is not a search-result list
+	 * leaves this unset and keeps the panel for every query.
 	 */
 	searchResultsInBody?: boolean;
 }
@@ -336,12 +336,12 @@ export function MailListHeader({
 	// It belongs to the search, not to any one way of showing it. The affordance
 	// therefore sits in the pane, above whichever body is up — the read-only
 	// results panel, or a list whose own rows narrow to the committed query — and
-	// is mounted on the same condition as the query itself. Rendering it inside the
-	// results panel made it a mailbox's flash: the panel shows while the query is
-	// being typed and hands back to `MessageList` the moment the query commits to
-	// the URL, taking the affordance down with it a few hundred milliseconds after
-	// it appeared, and leaving the brief (which keeps the panel for any query) as
-	// the only place it survived.
+	// is mounted on the same condition as the query itself. Rendering it inside
+	// the results panel made it a mailbox's flash: the panel shows while the query
+	// is being typed and hands back to `MessageList` the moment the query commits
+	// to the URL, taking the affordance down with it a few hundred milliseconds
+	// after it appeared. Mounting it here instead keeps it up through that
+	// hand-back on every view.
 	const searchHadSemanticReach = related.length > 0;
 	const conversion = useMemo(
 		() => convertSearchToRule(parsed, { searchHadSemanticReach }),
@@ -372,10 +372,11 @@ export function MailListHeader({
 	// Tablet + desktop keep the inline toolbar search; while a query is being
 	// typed the list-pane body swaps to the same sectioned results the phone
 	// takeover shows, under the same FilterSheet. A view whose own body renders
-	// the committed search as a selectable list (`searchResultsInBody`, the
-	// mailbox route) keeps the panel only until the query commits to the URL,
-	// then hands back to its `MessageList` so the multi-select toolbar and the
-	// escalation are reachable (#212). Clearing the query restores the normal list.
+	// the committed search as a selectable list (`searchResultsInBody` — the
+	// mailbox route, the brief, Starred) keeps the panel only until the query
+	// commits to the URL, then hands back to its own rows so multi-select (and,
+	// on the mailbox route, the "Select all N matching" escalation) is reachable
+	// (#212). Clearing the query restores the normal list.
 	const showInlineResults = showInlineSearchResults({
 		tier,
 		hasLiveInput: hasQuery,

package/src/components/mail/MailViewChrome.tsx

@@ -54,7 +54,8 @@ interface MailViewChromeProps {
 	/**
 	 * The body renders the committed search as a selectable list itself; see
 	 * `MailListHeader`. The mailbox route sets this so a committed search yields
-	 * its multi-select `MessageList` (#212); flagged leaves it unset.
+	 * its multi-select `MessageList` (#212); Starred sets it for the same reason,
+	 * over its own already query-narrowed rows.
 	 */
 	searchResultsInBody?: boolean;
 }

package/src/lib/search-surface.ts

@@ -13,12 +13,12 @@ import type { LayoutTier } from "@/hooks/useLayoutTier";
  * Phone never swaps: it shows the body and keeps the panel in its full-screen
  * takeover instead, so this only decides tablet/desktop.
  *
- * A view whose body renders committed results itself (`bodyRendersCommittedResults`,
- * the mailbox route) keeps the panel only while the query is still being typed —
- * uncommitted, not yet mirrored to the URL — and hands back to the body the moment
- * the query commits, so the committed search is a selectable list. Every other view
- * (the brief, flagged, global search) leaves the flag off and keeps the panel for
- * any query, committed or not.
+ * A view whose body renders committed results itself (`bodyRendersCommittedResults`
+ * — the mailbox route, the brief, Starred) keeps the panel only while the query is
+ * still being typed — uncommitted, not yet mirrored to the URL — and hands back to
+ * the body the moment the query commits, so the committed search is a selectable
+ * list. A view that leaves the flag off keeps the panel for any query, committed
+ * or not.
  */
 export const showInlineSearchResults = (input: {
 	tier: LayoutTier;