@remit/web-client 0.0.107 → 0.0.109

package/package.json

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

@@ -1,6 +1,5 @@
 import { Avatar } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
-import { LogOut, Settings } from "lucide-react";
+import { LogOut } from "lucide-react";
 import {
 	DropdownMenu,
 	DropdownMenuItem,
@@ -14,7 +13,6 @@ interface AccountMenuViewProps {
 }
 
 const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
-	const navigate = useNavigate();
 	const displayName = email ?? "Account";
 
 	return (
@@ -36,11 +34,6 @@ const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
 					<DropdownMenuSeparator />
 				</>
 			)}
-			<DropdownMenuItem onClick={() => navigate({ to: "/settings/accounts" })}>
-				<Settings className="size-4" />
-				Settings
-			</DropdownMenuItem>
-			<DropdownMenuSeparator />
 			<DropdownMenuItem onClick={onSignOut}>
 				<LogOut className="size-4" />
 				Sign out

package/src/components/layout/MailTopBar.tsx

@@ -1,15 +1,16 @@
 /**
  * MailTopBar — the app's one search surface and its global actions.
  *
- * Mounted by the `/mail` shell over the list, the reading pane and the
- * intelligence rail, starting on the list's left edge. It is the app's search,
- * not the list's: the list header drops its own field wherever this bar is
- * mounted, so exactly one search input exists on the page and the "/" shortcut
- * has one target.
+ * Mounted by the `/mail` shell across the top of the whole layout — the nav
+ * column, the list, the reading pane and the intelligence rail. It is the app's
+ * search, not the list's: the list header drops its own field wherever this bar
+ * is mounted, so exactly one search input exists on the page and the "/"
+ * shortcut has one target.
  *
  * The actions here are the ones that belong to the app rather than to whatever
- * is currently listed or open — compose, bug report, account. Reply, delete,
- * move and the rest stay on the reading pane's own toolbar, under this bar.
+ * is currently listed or open — the nav toggle, compose, bug report, settings,
+ * account. Reply, delete, move and the rest stay on the reading pane's own
+ * toolbar, under this bar.
  *
  * The field carries one chip: the scope of the view the user navigated into
  * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
@@ -19,8 +20,9 @@
  * sections instead, where the text is not repeated.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AppTopBar, Button, SearchBar } from "@remit/ui";
-import { SquarePen } from "lucide-react";
+import { AppTopBar, Button, NavToggleButton, SearchBar } from "@remit/ui";
+import { useNavigate } from "@tanstack/react-router";
+import { Settings, SquarePen } from "lucide-react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { BugReportButton } from "@/components/ui/BugReportButton";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
@@ -42,6 +44,7 @@ interface MailTopBarProps {
 export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
+	const navigate = useNavigate();
 	const compose = useGlobalCompose(accounts);
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
@@ -55,6 +58,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 
 	return (
 		<AppTopBar
+			leading={<NavToggleButton />}
 			search={
 				<SearchBar
 					value={searchInput}
@@ -64,7 +68,6 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 					chips={chips}
 					onRemoveChip={clearScope}
 					placeholder={placeholder}
-					size="lg"
 				/>
 			}
 			actions={
@@ -78,6 +81,14 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 						onClick={compose}
 					/>
 					<BugReportButton />
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Settings className="size-4" />}
+						title="Settings"
+						aria-label="Settings"
+						onClick={() => navigate({ to: "/settings/accounts" })}
+					/>
 					<AccountMenu />
 				</>
 			}

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

@@ -41,6 +41,7 @@
 import {
 	Button,
 	type FilterSheetProps,
+	FilterToggle,
 	isConvertible,
 	MakeFilterAction,
 	MobileSearchView,
@@ -129,13 +130,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 +337,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 +373,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,
@@ -434,9 +436,12 @@ export function MailListHeader({
 				/>
 			),
 			titleMeta: (
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{unreadCount.toLocaleString()} unread
-				</span>
+				<>
+					<span className="shrink-0 text-2xs text-fg-subtle">
+						{unreadCount.toLocaleString()} unread
+					</span>
+					{!hasQuery && <FilterToggle />}
+				</>
 			),
 			searchSlot: ownsSearch && !searchExpanded && (
 				<Button
@@ -487,6 +492,7 @@ export function MailListHeader({
 			chromeResults,
 			makeFilterAction,
 			searchConversion,
+			hasQuery,
 		],
 	);
 

package/src/components/mail/MailViewChrome.tsx

@@ -18,12 +18,13 @@
  * surface and the section headers flatten correctly when filtered).
  */
 import {
+	FilterPanelProvider,
 	type FilterPreset,
 	FilterSheet,
 	type FilterSheetProps,
 	type SearchResult,
 } from "@remit/ui";
-import { type ReactNode, useState } from "react";
+import type { ReactNode } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { MailListHeader } from "./MailListHeader";
 
@@ -54,7 +55,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;
 }
@@ -80,7 +82,6 @@ export function MailViewChrome({
 	relatedResultsLabel,
 	searchResultsInBody,
 }: MailViewChromeProps) {
-	const [expanded, setExpanded] = useState(false);
 	// A query owns the pane: the filter chrome and the search's own affordance
 	// narrow the same list from the same place, so the filter sheet stands down
 	// for as long as something is being searched. Its state survives — clearing
@@ -94,8 +95,6 @@ export function MailViewChrome({
 		sources: preset.sources,
 		selectedCategory,
 		activeFilters,
-		expanded,
-		onExpandedChange: setExpanded,
 		onSelectCategory,
 		onSelectSource,
 		onToggleFilter,
@@ -103,26 +102,28 @@ export function MailViewChrome({
 	};
 
 	return (
-		<MailListHeader
-			title={title}
-			unreadCount={unreadCount}
-			footer={footer}
-			searchFilter={filterConfig}
-			searchResults={searchResults}
-			searchLoading={searchLoading}
-			relatedResults={relatedResults}
-			relatedLoading={relatedLoading}
-			onSelectSearchResult={onSelectSearchResult}
-			searchResultsLabel={searchResultsLabel}
-			relatedResultsLabel={relatedResultsLabel}
-			searchResultsInBody={searchResultsInBody}
-		>
-			{/* One shell either way: the children's parent must not change when a
-			    query starts, or everything under it — including the header's own
-			    search field — remounts mid-keystroke. */}
-			<FilterSheet {...filterConfig} hideChrome={searching}>
-				{children}
-			</FilterSheet>
-		</MailListHeader>
+		<FilterPanelProvider>
+			<MailListHeader
+				title={title}
+				unreadCount={unreadCount}
+				footer={footer}
+				searchFilter={filterConfig}
+				searchResults={searchResults}
+				searchLoading={searchLoading}
+				relatedResults={relatedResults}
+				relatedLoading={relatedLoading}
+				onSelectSearchResult={onSelectSearchResult}
+				searchResultsLabel={searchResultsLabel}
+				relatedResultsLabel={relatedResultsLabel}
+				searchResultsInBody={searchResultsInBody}
+			>
+				{/* One shell either way: the children's parent must not change when a
+				    query starts, or everything under it — including the header's own
+				    search field — remounts mid-keystroke. */}
+				<FilterSheet {...filterConfig} hideChrome={searching}>
+					{children}
+				</FilterSheet>
+			</MailListHeader>
+		</FilterPanelProvider>
 	);
 }

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;