@remit/web-client 0.0.139 → 0.0.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "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

@@ -13,7 +13,9 @@
  * the caret and the sheet, the same shape `MailViewChrome` gives the mailbox and
  * Starred views. The category and the chips narrow the grouped sections
  * themselves, and the phone search takeover reads the same selection, so a
- * filter set on one surface holds on the other.
+ * filter set on one surface holds on the other. Under a query the chips are
+ * terms of that query — see `briefChipFilters` — so what narrows the list is
+ * readable and editable in the search field.
  *
  * Multi-select is the mailbox list's, not a copy of it: the same
  * `ThreadListInteraction` cursor and `useSelection` state, and the same
@@ -39,7 +41,11 @@ import {
 	BriefEmpty,
 	type BriefFilterId,
 	BriefSections,
+	briefChipCategory,
+	briefChipFilters,
 	briefFilterConfig,
+	briefFilterHasTerm,
+	clearBriefFiltersInQuery,
 	FilterPanelProvider,
 	type FilterSheetProps,
 	type FilterSheetSource,
@@ -50,8 +56,10 @@ import {
 	type SearchResult,
 	SelectionTopBar,
 	SpamResultsOffer,
+	setBriefCategoryInQuery,
 	type ThreadRowData,
 	type ThreadSection,
+	toggleBriefFilterInQuery,
 } from "@remit/ui";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -69,6 +77,7 @@ import {
 	useInitialSyncProgress,
 } from "@/hooks/useInitialSyncProgress";
 import { useLabelList } from "@/hooks/useLabels";
+import { useLayoutTier } from "@/hooks/useLayoutTier";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
@@ -89,6 +98,7 @@ import type { ListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
+import { showInlineSearchResults } from "@/lib/search-surface";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { spamOfferForResults } from "@/lib/spam-offer";
 import {
@@ -394,9 +404,11 @@ export function DailyBrief({
 	onTriageContextChange,
 	onDeleteMessages,
 }: DailyBriefProps) {
-	const { searchQuery, searchInput, resultFolderIndex } = useMailContext();
+	const { searchQuery, searchInput, resultFolderIndex, onSearchChange } =
+		useMailContext();
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
+	const tier = useLayoutTier();
 	const wizard = useSelectionWizard();
 	const navigate = useNavigate();
 
@@ -430,14 +442,54 @@ export function DailyBrief({
 	}, []);
 	const clearFilters = useCallback(() => setActiveFilters(new Set()), []);
 
-	// A query owns the pane: the filter panel and the search's own affordance
-	// narrow the same list from the same place, so the panel stands down for as
-	// long as something is being searched. Its state survives, so clearing the
-	// query brings it back with the same category and chips. The header caret is
-	// gone under a query, and a panel left open with nothing to collapse it is
-	// what makes this load-bearing rather than tidy.
 	const searching = searchInput.trim().length > 0;
 
+	// Under a query the chips and the query are one state: a chip writes its term
+	// into the query — `is:unread`, `has:attachment`, `category:newsletter` — and
+	// a term typed by hand ticks its chip. What narrows the rows is then legible
+	// in the field, editable there, and gone when the term is deleted. The
+	// panel's own set survives a search and comes back with it, and carries the
+	// two chips the vocabulary cannot spell (see `briefChipFilters`).
+	const chipFilters = useMemo(
+		() => briefChipFilters({ query: searchInput, ownFilters: activeFilters }),
+		[searchInput, activeFilters],
+	);
+	const chipCategory = useMemo(
+		() =>
+			briefChipCategory({ query: searchInput, ownCategory: selectedCategory }),
+		[searchInput, selectedCategory],
+	);
+
+	const toggleChip = useCallback(
+		(id: BriefFilterId) => {
+			if (!searching || !briefFilterHasTerm(id)) {
+				toggleFilter(id);
+				return;
+			}
+			const next = toggleBriefFilterInQuery(searchInput, id);
+			if (next !== undefined) onSearchChange(next);
+		},
+		[searching, searchInput, onSearchChange, toggleFilter],
+	);
+
+	const selectChipCategory = useCallback(
+		(category: BriefCategoryFilter) => {
+			if (!searching) {
+				setSelectedCategory(category);
+				return;
+			}
+			onSearchChange(setBriefCategoryInQuery(searchInput, category));
+		},
+		[searching, searchInput, onSearchChange],
+	);
+
+	const clearChips = useCallback(() => {
+		setSelectedCategory("all");
+		setSelectedAccountId("all");
+		clearFilters();
+		if (searching) onSearchChange(clearBriefFiltersInQuery(searchInput));
+	}, [searching, searchInput, onSearchChange, clearFilters]);
+
 	// --- Unified threads query ---
 	const {
 		data: threadsData,
@@ -647,11 +699,11 @@ export function DailyBrief({
 			filteredRows
 				.filter(
 					(t) =>
-						(selectedCategory === "all" || t.category === selectedCategory) &&
-						matchesBriefFilters(t, activeFilters),
+						(chipCategory === "all" || t.category === chipCategory) &&
+						matchesBriefFilters(t, chipFilters),
 				)
 				.map((row) => rowToSearchResult(row, resultFolderIndex)),
-		[filteredRows, selectedCategory, activeFilters, resultFolderIndex],
+		[filteredRows, chipCategory, chipFilters, resultFolderIndex],
 	);
 
 	// "Related" (semantic) spans every account here — the brief is the
@@ -688,28 +740,25 @@ export function DailyBrief({
 			filters: preset.filters,
 			sources: preset.sources,
 			sourcesNote: mutedCount > 0 ? `+${mutedCount} muted` : undefined,
-			selectedCategory,
-			activeFilters,
+			selectedCategory: chipCategory,
+			activeFilters: chipFilters,
 			expanded: filterExpanded,
 			onExpandedChange: setFilterExpanded,
 			onSelectCategory: (id: string) =>
-				setSelectedCategory(id as BriefCategoryFilter),
+				selectChipCategory(id as BriefCategoryFilter),
 			onSelectSource: setSelectedAccountId,
-			onToggleFilter: (id: string) => toggleFilter(id as BriefFilterId),
-			onClear: () => {
-				setSelectedCategory("all");
-				setSelectedAccountId("all");
-				clearFilters();
-			},
+			onToggleFilter: (id: string) => toggleChip(id as BriefFilterId),
+			onClear: clearChips,
 		};
 	}, [
 		accountSources,
 		mutedCount,
-		selectedCategory,
-		activeFilters,
+		chipCategory,
+		chipFilters,
 		filterExpanded,
-		toggleFilter,
-		clearFilters,
+		toggleChip,
+		selectChipCategory,
+		clearChips,
 	]);
 
 	// The brief is genuinely empty (caught up) only when nothing is narrowing the
@@ -753,6 +802,18 @@ export function DailyBrief({
 	// rather than opening nothing over a skeleton or an empty state.
 	const showsRows = !isLoading && !isError && !caughtUp;
 
+	// A search does not take the panel down — the chips compose into the query
+	// rather than competing with it. The one window where the brief's own body is
+	// not on screen is the two-engine results panel, which owns the pane while a
+	// first query is still being typed; the caret stands down for exactly that,
+	// on the same answer the header swaps the body on.
+	const resultsPanelOwnsBody = showInlineSearchResults({
+		tier,
+		hasLiveInput: searching,
+		hasCommittedQuery: searchQuery.trim().length > 0,
+		bodyRendersCommittedResults: true,
+	});
+
 	const stateBody = showsRows ? (
 		<div className="flex h-full min-h-0 flex-col">
 			{briefSpamOffer && (
@@ -774,18 +835,17 @@ export function DailyBrief({
 			<div className="min-h-0 flex-1">
 				<BriefSections
 					sections={sections}
-					briefCategory={selectedCategory}
+					briefCategory={chipCategory}
 					Row={MessageRow}
 					selectedThreadId={selectedMessageId}
 					onSelectThread={openRow}
-					onSelectBriefCategory={setSelectedCategory}
+					onSelectBriefCategory={selectChipCategory}
 					sources={accountSources}
 					sourcesNote={mutedCount > 0 ? `+${mutedCount} muted` : undefined}
 					onSelectSource={setSelectedAccountId}
-					activeFilters={activeFilters}
-					onToggleFilter={toggleFilter}
-					onClearFilters={clearFilters}
-					hideChrome={searching}
+					activeFilters={chipFilters}
+					onToggleFilter={toggleChip}
+					onClearFilters={clearChips}
 				/>
 			</div>
 		</div>
@@ -822,7 +882,7 @@ export function DailyBrief({
 	// same pane for the same reason — the caret is in the header, the panel is
 	// above the rows.
 	return (
-		<FilterPanelProvider hasSheet={showsRows && !searching}>
+		<FilterPanelProvider hasSheet={showsRows && !resultsPanelOwnsBody}>
 			<ThreadListInteraction
 				selectedMessageId={selectedMessageId}
 				onOpen={openRow}

package/src/components/mail/MailListHeader.tsx

@@ -45,6 +45,7 @@ import {
 	isConvertible,
 	MakeFilterAction,
 	MobileSearchView,
+	makeFilterBlockedCopy,
 	SearchBar,
 	type SearchCaretRequest,
 	type SearchFieldSuggest,
@@ -368,7 +369,9 @@ export function MailListHeader({
 				},
 				blockedReason: isConvertible(conversion)
 					? undefined
-					: "Add a sender or words to filter on",
+					: makeFilterBlockedCopy(
+							conversion.droppedFacets.map((facet) => facet.label),
+						),
 			}
 		: undefined;
 	// Handed to the bar rather than rendered here: the bar knows whether rows
@@ -484,6 +487,7 @@ export function MailListHeader({
 						aria-label="Close search"
 						className="shrink-0"
 					/>
+					<FilterToggle />
 				</>
 			),
 		}),

package/src/lib/brief-chip-query.test.ts

@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { ThreadRowData } from "@remit/ui";
+import {
+	briefQueryCategory,
+	briefQueryFilters,
+	setBriefCategoryInQuery,
+	toggleBriefFilterInQuery,
+} from "@remit/ui";
+import { matchesSearchTokens } from "./brief.js";
+import { parseSearchTokens } from "./search-tokens.js";
+
+/**
+ * The brief's chips and the token parser read one query, and this checks them
+ * against each other rather than against a second copy of either: a chip may
+ * only read ticked for a facet the parser actually applies, and a term a chip
+ * writes must narrow the rows the parser narrows.
+ *
+ * The spellings here are the ones a hand-typed query carries and a whitespace
+ * splitter got wrong.
+ */
+
+const row = (overrides: Partial<ThreadRowData> = {}): ThreadRowData => ({
+	id: "m1",
+	accountId: "acc_1",
+	fromName: "Odido",
+	fromEmail: "info@odido.example",
+	subject: "Je factuur van juni",
+	snippet: "Snippet",
+	timeLabel: "09:00",
+	isRead: false,
+	hasAttachment: false,
+	starred: false,
+	category: "newsletter",
+	...overrides,
+});
+
+const applies = (query: string, thread: ThreadRowData): boolean =>
+	matchesSearchTokens(thread, parseSearchTokens(query).tokens);
+
+describe("the chips agree with the parser on what a query applies", () => {
+	it("leaves a facet spelled inside a quoted value to that value", () => {
+		const query = 'subject:"a is:unread b"';
+		assert.deepEqual(
+			parseSearchTokens(query).tokens.map((token) => token.type),
+			["subject"],
+		);
+		assert.equal(briefQueryFilters(query).has("unread"), false);
+	});
+
+	it("ticks the chip for a facet whose own value is quoted", () => {
+		const query = 'is:"unread"';
+		assert.deepEqual(
+			parseSearchTokens(query).tokens.map((token) => token.type),
+			["isUnread"],
+		);
+		assert.equal(briefQueryFilters(query).has("unread"), true);
+	});
+
+	it("scopes to the category a quoted value names", () => {
+		const query = 'category:"Newsletter"';
+		assert.equal(briefQueryCategory(query), "newsletter");
+		assert.equal(applies(query, row()), true);
+	});
+});
+
+describe("a term a chip writes narrows the rows", () => {
+	it("hides a read row once Unread is ticked", () => {
+		const query = toggleBriefFilterInQuery("Odido", "unread");
+		assert.ok(query);
+		assert.equal(applies(query, row({ isRead: false })), true);
+		assert.equal(applies(query, row({ isRead: true })), false);
+	});
+
+	// Facet tokens are ANDed, so a category pill that left the previous term in
+	// place matched nothing at all — an empty list one click from a full one.
+	it("keeps a category pill from emptying the list it was picked from", () => {
+		const query = setBriefCategoryInQuery('category:"Newsletter"', "marketing");
+		assert.deepEqual(
+			parseSearchTokens(query).tokens.map((token) => token.type),
+			["category"],
+		);
+		assert.equal(applies(query, row({ category: "marketing" })), true);
+	});
+});

package/src/lib/organize/search-to-rule.test.ts

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { isConvertible } from "@remit/ui";
+import { isConvertible, makeFilterBlockedCopy } from "@remit/ui";
 import { parseSearchTokens, type SearchTokenContext } from "../search-tokens";
 import { convertSearchToRule, searchRuleAccountId } from "./search-to-rule";
 
@@ -123,6 +123,20 @@ describe("convertSearchToRule — nothing left to make a filter from", () => {
 	it("yields a clause once a term rides along with the folder scope", () => {
 		assert.equal(isConvertible(convert("in:archive receipts")), true);
 	});
+
+	// The brief's chips write their terms into the query, so a query can be made
+	// entirely of them. What is in the way is then the facets themselves, and the
+	// reason names them rather than asking for something that was just supplied.
+	it("names the facets a query composed only of chips is made of", () => {
+		const conversion = convert("is:unread category:newsletter");
+		assert.equal(isConvertible(conversion), false);
+		assert.equal(
+			makeFilterBlockedCopy(
+				conversion.droppedFacets.map((facet) => facet.label),
+			),
+			"Unread and Category: Newsletter aren't filter conditions — add a sender or words to filter on",
+		);
+	});
 });
 
 describe("searchRuleAccountId — whose account the filter belongs to", () => {

package/src/lib/search-tokens.ts

@@ -29,9 +29,9 @@
  * that can't actually apply. `category:` resolves the same way against a fixed
  * vocabulary, so `category:nonsense` stays free text too.
  *
- * Token names are case-insensitive. A value containing whitespace is written in
- * double quotes — `in:"Sent Items"` — and an unterminated quote runs to the end
- * of the input, so a value stays readable while it is still being typed.
+ * Token names are case-insensitive. Terms are cut from the query by
+ * `search-query-words.ts` in the kit, which the brief's chips also write and
+ * remove terms with, so a quoted value is one term to both.
  *
  * Pure functions only: no React, no fetch — the name index is injected, not
  * fetched here. `MailListHeader` renders the chips and the callers that issue
@@ -42,6 +42,23 @@
 
 import type { RemitImapMessageCategory } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
+import {
+	quoteSearchTokenValue,
+	type SearchQueryWord,
+	type SearchTermParts,
+	searchTokenTerm,
+	splitSearchTerm,
+	splitSearchWords,
+} from "@remit/ui";
+
+export {
+	quoteSearchTokenValue,
+	type SearchQueryWord,
+	type SearchTermParts,
+	searchTokenTerm,
+	splitSearchTerm,
+	splitSearchWords,
+};
 
 export type SearchToken =
 	| { type: "from"; raw: string; value: string }
@@ -186,89 +203,6 @@ export const searchTokenSpec = (name: string): SearchTokenSpec | undefined =>
 
 const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
-const needsQuotes = (value: string): boolean => /[\s"]/.test(value);
-
-/**
- * A value as it is written in a query: quoted when it carries whitespace, bare
- * otherwise. The inverse of the unquoting the parser does, so a suggestion the
- * user picks parses back to the value it was built from.
- */
-export const quoteSearchTokenValue = (value: string): string =>
-	needsQuotes(value) ? `"${value.replace(/"/g, "")}"` : value;
-
-/** `name:value`, quoted as needed — the text a query carries for one token. */
-export const searchTokenTerm = (name: string, value: string): string =>
-	`${name}:${quoteSearchTokenValue(value)}`;
-
-const unquote = (value: string): string => {
-	if (!value.startsWith('"')) return value;
-	const inner = value.slice(1);
-	return inner.endsWith('"') ? inner.slice(0, -1) : inner;
-};
-
-/** One whitespace-separated term of a query, with where it sits in the input. */
-export interface SearchQueryWord {
-	/** The term exactly as typed, quotes included. */
-	raw: string;
-	/** Index of the term's first character in the query. */
-	start: number;
-	/** Index just past the term's last character. */
-	end: number;
-}
-
-/**
- * Split a query into terms on whitespace, except inside double quotes, so
- * `in:"Sent Items"` is one term. An unterminated quote runs to the end of the
- * input — a half-typed value is still one term, not a broken one.
- */
-export function splitSearchWords(query: string): SearchQueryWord[] {
-	const words: SearchQueryWord[] = [];
-	let start = -1;
-	let quoted = false;
-	for (let i = 0; i < query.length; i++) {
-		const char = query[i] as string;
-		if (char === '"') {
-			quoted = !quoted;
-			if (start < 0) start = i;
-			continue;
-		}
-		if (!quoted && /\s/.test(char)) {
-			if (start >= 0) words.push({ raw: query.slice(start, i), start, end: i });
-			start = -1;
-			continue;
-		}
-		if (start < 0) start = i;
-	}
-	if (start >= 0) {
-		words.push({ raw: query.slice(start), start, end: query.length });
-	}
-	return words;
-}
-
-/** A term split at its first colon: the token name and the value as typed. */
-export interface SearchTermParts {
-	name: string;
-	/** The value with its quotes removed. */
-	value: string;
-	/** The value exactly as typed, quotes included. */
-	rawValue: string;
-}
-
-/**
- * Split `name:value` at the first colon. A term with no colon, or one starting
- * with a colon, is not a token attempt and returns `undefined`.
- */
-export function splitSearchTerm(word: string): SearchTermParts | undefined {
-	const colon = word.indexOf(":");
-	if (colon <= 0) return undefined;
-	const rawValue = word.slice(colon + 1);
-	return {
-		name: word.slice(0, colon).toLowerCase(),
-		value: unquote(rawValue),
-		rawValue,
-	};
-}
-
 function parseDateToken(
 	type: "before" | "after",
 	raw: string,