@remit/ui 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "src"

package/src/components/app-top-bar.stories.tsx

@@ -51,7 +51,25 @@ const Actions = () => (
 
 const SCOPE: SearchChip = { id: "in:spam", label: "in:spam", tone: "scope" };
 
-const Bar = ({ initialChips = [] }: { initialChips?: SearchChip[] }) => {
+/**
+ * The placeholders the app pairs with each scope state. Only the unscoped brief
+ * may claim to search all mail; a scoped view says so, and a mailbox route
+ * whose name has not loaded yet gets neutral wording rather than a placeholder
+ * asserting the wrong scope.
+ */
+const PLACEHOLDER = {
+	global: "Search all mail",
+	pending: "Search mail",
+	scoped: "Search this folder",
+} as const;
+
+const Bar = ({
+	initialChips = [],
+	placeholder = PLACEHOLDER.global,
+}: {
+	initialChips?: SearchChip[];
+	placeholder?: string;
+}) => {
 	const [chips, setChips] = useState<SearchChip[]>(initialChips);
 	const [value, setValue] = useState("");
 	return (
@@ -71,7 +89,7 @@ const Bar = ({ initialChips = [] }: { initialChips?: SearchChip[] }) => {
 					}}
 					onClearQuery={() => setValue("")}
 					globalFocusKey={false}
-					placeholder="Search all mail"
+					placeholder={placeholder}
 				/>
 			}
 		/>
@@ -96,24 +114,67 @@ const WithPanes = ({ children }: { children: React.ReactNode }) => (
 	</div>
 );
 
-/** The daily brief's state: search unscoped, nothing narrowing it. */
+/**
+ * The daily brief's state: search unscoped, nothing narrowing it. No chip, and
+ * the only placeholder allowed to claim it searches all mail — which it now
+ * genuinely does, across every folder of every account.
+ */
 export const Unscoped: Story = {
 	render: () => <Bar />,
 };
 
 /**
  * A narrowing scope in the bar, tinted to mark it as the view the user is in
- * rather than a filter they typed. Removing it widens the search again.
+ * rather than a filter they typed. Removing it widens the search again — a
+ * navigation back to the brief, not an edit of the text, because the chip
+ * mirrors the route.
+ *
+ * The placeholder narrows with the chip. A scoped bar reading "Search all mail"
+ * is a state the app never produces.
  */
 export const Scoped: Story = {
-	render: () => <Bar initialChips={[SCOPE]} />,
+	render: () => <Bar initialChips={[SCOPE]} placeholder={PLACEHOLDER.scoped} />,
+};
+
+/**
+ * The third scope state: a mailbox route whose name has not resolved yet. The
+ * list underneath is already narrowed, so the bar must not claim to search
+ * everything — but a chip reading a raw uuid is worse than no chip, so it shows
+ * none and falls back to neutral wording until the name arrives.
+ */
+export const ScopePending: Story = {
+	render: () => <Bar placeholder={PLACEHOLDER.pending} />,
+};
+
+/**
+ * The virtual collections scope the bar too, and their chips read as whatever
+ * describes the collection. Flagged is a marker on the mail rather than a
+ * place, so it chips `is:starred`; the outbox is a place mail sits in and keeps
+ * the `in:` form.
+ */
+export const ScopedToFlagged: Story = {
+	render: () => (
+		<Bar
+			initialChips={[{ id: "is:starred", label: "is:starred", tone: "scope" }]}
+			placeholder={PLACEHOLDER.scoped}
+		/>
+	),
+};
+
+export const ScopedToOutbox: Story = {
+	render: () => (
+		<Bar
+			initialChips={[{ id: "in:outbox", label: "in:outbox", tone: "scope" }]}
+			placeholder={PLACEHOLDER.scoped}
+		/>
+	),
 };
 
 /** The arrangement: one bar over the nav, the list, and the message pane. */
 export const OverTheLayout: Story = {
 	render: () => (
 		<WithPanes>
-			<Bar initialChips={[SCOPE]} />
+			<Bar initialChips={[SCOPE]} placeholder={PLACEHOLDER.scoped} />
 		</WithPanes>
 	),
 };

package/src/components/mail-header.stories.tsx

@@ -59,6 +59,7 @@ function MailScreen({
 	initialExpanded = false,
 	initialSearchOpen = false,
 	initialSearchValue = "",
+	showSearch = true,
 }: {
 	title: string;
 	unreadCount: number;
@@ -66,6 +67,7 @@ function MailScreen({
 	initialExpanded?: boolean;
 	initialSearchOpen?: boolean;
 	initialSearchValue?: string;
+	showSearch?: boolean;
 }) {
 	const [searchValue, setSearchValue] = useState(initialSearchValue);
 	const [searchOpen, setSearchOpen] = useState(initialSearchOpen);
@@ -85,6 +87,7 @@ function MailScreen({
 				title={title}
 				unreadCount={unreadCount}
 				isDesktop={false}
+				showSearch={showSearch}
 				onMenuClick={() => undefined}
 				searchValue={searchValue}
 				onSearchChange={setSearchValue}
@@ -188,6 +191,43 @@ export const InboxFilterExpanded: Story = {
 	),
 };
 
+/**
+ * `showSearch={false}` — the header on desktop, where the app's top bar owns
+ * the search field for the whole shell. Title and unread count only: no
+ * magnifier, nothing to expand. Two search inputs on one page would compete
+ * for focus and for the "/" shortcut, so the header yields.
+ *
+ * This is what a desktop mail pane renders. Every story below it is the
+ * below-desktop case, where there is no top bar and the header keeps its own
+ * compact field.
+ */
+export const SearchOwnedByTopBar: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+			showSearch={false}
+		/>
+	),
+};
+
+/**
+ * The same header for a mailbox rather than the brief — still no search
+ * affordance, because whether the header owns one is a property of the layout,
+ * not of which list is under it.
+ */
+export const SearchOwnedByTopBarInbox: Story = {
+	render: () => (
+		<MailScreen
+			title="Inbox"
+			unreadCount={42}
+			preset={inboxFilterConfig()}
+			showSearch={false}
+		/>
+	),
+};
+
 /** Mobile search collapsed to a magnifier in the header top row. */
 export const MobileSearchCollapsed: Story = {
 	render: () => (

package/src/components/search-results.stories.tsx

@@ -72,6 +72,44 @@ const resultSections: SearchResultSection[] = [
 	{ id: "related", label: "Related", results: related },
 ];
 
+/**
+ * Matches from outside the inbox — Archive, Sent, Spam and a custom folder.
+ * These are the rows an unscoped search returns that an INBOX-only one could
+ * not, so they only ever appear under the brief's sections.
+ */
+const crossFolderMatches: SearchResult[] = [
+	{
+		id: "x1",
+		sender: "Mollie",
+		subject: "Invoice 2026-02 — archived",
+		snippet: "Filed to Archive last month; payment already settled.",
+		date: "Feb 24",
+		category: { label: "Receipt", tone: "positive" },
+	},
+	{
+		id: "x2",
+		sender: "me",
+		subject: "Re: invoice query",
+		snippet: "Sent — attaching the invoice you asked for.",
+		date: "Feb 18",
+	},
+	{
+		id: "x3",
+		sender: "billing@unknown-vendor.test",
+		subject: "URGENT invoice attached",
+		snippet: "Marked as spam, but it is the invoice the user is looking for.",
+		date: "Feb 11",
+		category: { label: "Spam", tone: "warning" },
+	},
+	{
+		id: "x4",
+		sender: "Accountant",
+		subject: "Invoices for the quarter",
+		snippet: "Filed under Projects/Bookkeeping.",
+		date: "Jan 30",
+	},
+];
+
 const emptySections: SearchResultSection[] = [
 	{ id: "top", label: "Top matches", results: [] },
 ];
@@ -111,6 +149,50 @@ export const Idle: Story = {
 	render: () => <Harness value="" recentSearches={recentSearches} />,
 };
 
+/**
+ * The daily brief's unscoped search: no scope chip in the bar, and the literal
+ * section carries matches from every folder — Archive, Sent, Spam and custom
+ * folders alongside the inbox. Before the listing behind it took a search mode
+ * it could only ever return inbox mail, so this section was silently narrower
+ * than the bar promised.
+ *
+ * The rows themselves do not say which folder they came from; the sections are
+ * ordered newest first regardless of where each message is filed.
+ */
+export const UnscopedAcrossFolders: Story = {
+	render: () => (
+		<Harness
+			value="invoice"
+			sections={[
+				{
+					id: "top",
+					label: "Top matches",
+					results: [...topMatches, ...crossFolderMatches],
+				},
+				{ id: "related", label: "Related", results: related },
+			]}
+		/>
+	),
+};
+
+/**
+ * A scoped view (a mailbox route, its `in:` chip in the bar). Both sections are
+ * scoped to that folder and take the kit's default labels — the semantic
+ * section used to run unscoped here under an "Everywhere" heading, which
+ * contradicted the chip the same bar was showing.
+ */
+export const ScopedToOneFolder: Story = {
+	render: () => (
+		<Harness
+			value="invoice"
+			sections={[
+				{ id: "top", label: "Top matches", results: topMatches.slice(0, 2) },
+				{ id: "related", label: "Related", results: related.slice(0, 1) },
+			]}
+		/>
+	),
+};
+
 /** Typed filter tokens (`from:`, `has:attachment`, …) render as removable chips above the sections. */
 export const WithFilterTokens: Story = {
 	render: () => (