@remit/ui 0.0.20 → 0.0.22

package/package.json

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

package/src/components/mobile-search-view.render.test.ts

@@ -42,8 +42,7 @@ describe("MobileSearchView search scope", () => {
 		const html = renderToString(
 			createElement(MobileSearchView, {
 				...base,
-				scope: { kind: "global" as const },
-				onScopeToSpam: noop,
+				scope: { kind: "global" as const, onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -56,7 +55,6 @@ describe("MobileSearchView search scope", () => {
 			createElement(MobileSearchView, {
 				...base,
 				scope: { kind: "folder" as const, role: "inbox" as const },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -64,15 +62,14 @@ describe("MobileSearchView search scope", () => {
 		assert.doesNotMatch(html, /Archive/);
 	});
 
-	it("passes a caller-supplied spam total through", () => {
+	it("counts the spam it held out, on the phone tier too", () => {
 		const html = renderToString(
 			createElement(MobileSearchView, {
 				...base,
-				scope: { kind: "global" as const },
-				spamMatchCount: 42,
-				onScopeToSpam: noop,
+				scope: { kind: "global" as const, onScopeToSpam: noop },
 			}),
 		);
-		assert.match(html, />42</);
+		assert.match(html, /from Spam/);
+		assert.match(html, /Go to Spam/);
 	});
 });

package/src/components/mobile-search-view.stories.tsx

@@ -156,8 +156,6 @@ function Harness({
 	sections,
 	preset,
 	scope,
-	spamMatchCount,
-	onScopeToSpam,
 }: {
 	initialValue?: string;
 	initialChips?: SearchChip[];
@@ -165,8 +163,6 @@ function Harness({
 	sections?: SearchResultSection[];
 	preset: Preset;
 	scope?: SearchScope;
-	spamMatchCount?: number;
-	onScopeToSpam?: () => void;
 }) {
 	const [value, setValue] = useState(initialValue);
 	const [chips, setChips] = useState<SearchChip[]>(initialChips);
@@ -240,8 +236,6 @@ function Harness({
 			loading={loading}
 			onSelectResult={setOpened}
 			scope={scope}
-			spamMatchCount={spamMatchCount}
-			onScopeToSpam={onScopeToSpam}
 		/>
 	);
 }
@@ -343,8 +337,7 @@ export const GlobalAcrossFolders: Story = {
 		<Harness
 			initialValue="invoice"
 			sections={acrossFoldersSections}
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			preset="brief"
 		/>
 	),
@@ -362,7 +355,6 @@ export const ScopedToInbox: Story = {
 			initialChips={[{ id: "in:inbox", label: "in:inbox" }]}
 			sections={acrossFoldersSections}
 			scope={{ kind: "folder", role: "inbox" }}
-			onScopeToSpam={() => {}}
 			preset="inbox"
 		/>
 	),
@@ -377,8 +369,25 @@ export const GlobalOnlySpamMatches: Story = {
 		<Harness
 			initialValue="invoice"
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
+			preset="brief"
+		/>
+	),
+};
+
+/**
+ * The same rows under a starred search. Starring spans folders, so the rows
+ * keep their provenance labels, and the spam among them stays in the list — the
+ * user starred it themselves, so there is nothing to hold back and no offer to
+ * make.
+ */
+export const StarredCollection: Story = {
+	render: () => (
+		<Harness
+			initialValue="invoice"
+			initialChips={[{ id: "is:starred", label: "is:starred" }]}
+			sections={acrossFoldersSections}
+			scope={{ kind: "collection" }}
 			preset="brief"
 		/>
 	),

package/src/components/mobile-search-view.tsx

@@ -46,10 +46,6 @@ export interface MobileSearchViewProps {
 	onRemoveChip?: (id: string) => void;
 	/** What the search covers; see `SearchResultsProps`. Defaults to global. */
 	scope?: SearchScope;
-	/** Total spam matches found; see `SearchResultsProps`. */
-	spamMatchCount?: number;
-	/** Scope the search to Spam; see `SearchResultsProps`. */
-	onScopeToSpam?: () => void;
 }
 
 /**
@@ -81,8 +77,6 @@ export function MobileSearchView({
 	chips,
 	onRemoveChip,
 	scope,
-	spamMatchCount,
-	onScopeToSpam,
 }: MobileSearchViewProps) {
 	const body = (
 		<SearchResults
@@ -94,8 +88,6 @@ export function MobileSearchView({
 			onSelectResult={onSelectResult}
 			tokens={tokens}
 			scope={scope}
-			spamMatchCount={spamMatchCount}
-			onScopeToSpam={onScopeToSpam}
 		/>
 	);
 

package/src/components/search-results.render.test.ts

@@ -114,8 +114,7 @@ describe("SearchResults spam handling", () => {
 			createElement(SearchResults, {
 				value: "invoice",
 				sections: mixed,
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -130,8 +129,7 @@ describe("SearchResults spam handling", () => {
 				sections: [
 					{ id: "results", label: "Results", results: [archivedResult] },
 				],
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /from Spam/);
@@ -142,8 +140,7 @@ describe("SearchResults spam handling", () => {
 			createElement(SearchResults, {
 				value: "invoice",
 				sections: [{ id: "results", label: "Results", results: [spamResult] }],
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.match(html, /No matches for/);
@@ -156,7 +153,6 @@ describe("SearchResults spam handling", () => {
 				value: "invoice",
 				sections: mixed,
 				scope: { kind: "folder", role: "inbox" },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -170,7 +166,6 @@ describe("SearchResults spam handling", () => {
 				value: "invoice",
 				sections: mixed,
 				scope: { kind: "folder", role: "junk" },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.match(html, /unknown-vendor/);
@@ -187,19 +182,6 @@ describe("SearchResults spam handling", () => {
 		);
 		assert.doesNotMatch(html, /from Spam/);
 	});
-
-	it("prefers a caller-supplied total over the rows held out of this page", () => {
-		const html = renderToString(
-			createElement(SearchResults, {
-				value: "invoice",
-				sections: mixed,
-				scope: { kind: "global" },
-				spamMatchCount: 42,
-				onScopeToSpam: noop,
-			}),
-		);
-		assert.match(html, />42</);
-	});
 });
 
 describe("SearchResults provenance labels", () => {
@@ -268,3 +250,86 @@ describe("SearchResults provenance labels", () => {
 		assert.doesNotMatch(html, /Important/);
 	});
 });
+
+describe("SearchResults scoped to a collection", () => {
+	const spamRow: SearchResult = {
+		id: "s1",
+		sender: "billing@unknown-vendor.test",
+		subject: "URGENT invoice attached",
+		snippet: "Wire the amount below.",
+		date: "Feb 11",
+		folder: { role: "junk" },
+	};
+	const archivedRow: SearchResult = {
+		...result,
+		id: "a1",
+		folder: { role: "archive" },
+	};
+	const collectionSections: SearchResultSection[] = [
+		{ id: "results", label: "Results", results: [archivedRow, spamRow] },
+	];
+
+	it("keeps a starred spam match in the list", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "collection" },
+			}),
+		);
+		assert.match(html, /billing@unknown-vendor\.test/);
+		assert.doesNotMatch(html, /from Spam/);
+	});
+
+	it("still names the folder each row came from", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "collection" },
+			}),
+		);
+		assert.match(html, /Archive/);
+		assert.match(html, /Spam/);
+	});
+
+	it("holds the same spam row out when the search is scoped to a folder", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "folder", role: "inbox" },
+			}),
+		);
+		assert.doesNotMatch(html, /billing@unknown-vendor\.test/);
+	});
+});
+
+describe("SearchResults spam count", () => {
+	const spamIn = (id: string): SearchResult => ({
+		id,
+		sender: "spammer",
+		subject: "Offer",
+		snippet: "",
+		date: "",
+		folder: { role: "junk" },
+	});
+
+	it("counts every held-out row, not just one account's", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: [
+					{
+						id: "results",
+						label: "Results",
+						results: [result, spamIn("a1"), spamIn("b1"), spamIn("b2")],
+					},
+				],
+				scope: { kind: "global", onScopeToSpam: noop },
+			}),
+		);
+		assert.match(html, />3</);
+		assert.match(html, /results from Spam/);
+	});
+});

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

@@ -190,8 +190,7 @@ export const GlobalAcrossFolders: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{ id: "top", label: "Top matches", results: globalTopMatches },
 				{ id: "related", label: "Related", results: related },
@@ -209,8 +208,7 @@ export const GlobalWithoutSpamMatches: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{
 					id: "top",
@@ -234,8 +232,7 @@ export const GlobalAccountWithoutSpamFolder: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{ id: "top", label: "Top matches", results: crossFolderMatches },
 			]}
@@ -252,8 +249,7 @@ export const GlobalOnlySpamMatches: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
 		/>
 	),
@@ -273,7 +269,6 @@ export const ScopedToInbox: Story = {
 		<Harness
 			value="invoice"
 			scope={{ kind: "folder", role: "inbox" }}
-			onScopeToSpam={() => {}}
 			sections={[
 				{ id: "top", label: "Top matches", results: globalTopMatches },
 				{ id: "related", label: "Related", results: related },
@@ -293,7 +288,6 @@ export const ScopedToSpam: Story = {
 		<Harness
 			value="invoice"
 			scope={{ kind: "folder", role: "junk" }}
-			onScopeToSpam={() => {}}
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
 		/>
 	),
@@ -343,3 +337,23 @@ export const WithFilterTokens: Story = {
 		/>
 	),
 };
+
+/**
+ * Starred search (`is:starred` in the bar), given the same rows as the global
+ * story. Starring is not a folder: the rows come from all over, so each keeps
+ * its provenance label, and the two Spam matches stay in the list rather than
+ * being held out. The user starred them; holding their own mail back from them
+ * would be the surprising behaviour, and there is no offer because nothing was
+ * taken away.
+ */
+export const StarredCollection: Story = {
+	render: () => (
+		<Harness
+			value="invoice"
+			scope={{ kind: "collection" }}
+			sections={[
+				{ id: "top", label: "Top matches", results: globalTopMatches },
+			]}
+		/>
+	),
+};

package/src/components/search-results.tsx

@@ -18,12 +18,22 @@ export interface SearchResultSection {
 }
 
 /**
- * What the search currently covers. `global` is the unscoped search the daily
- * brief runs — every account, every folder, no chip in the bar. `folder` is a
- * search the sidebar narrowed to one place, which the bar shows as a chip.
+ * What the search currently covers.
+ *
+ * - `global` — the unscoped search the daily brief runs: every account, every
+ *   folder, no chip in the bar. It is the only scope that holds spam out, so it
+ *   is the only one that carries a way back to it: without `onScopeToSpam` there
+ *   is nowhere to send the user and no offer is made.
+ * - `folder` — narrowed to one place by the sidebar, which the bar shows as a
+ *   chip.
+ * - `collection` — narrowed by something that is not a folder, `is:starred`
+ *   being the one that exists. It still spans folders, so rows carry their
+ *   provenance; and because the narrowing is the user's own (they starred the
+ *   mail), spam is not held back from them.
  */
 export type SearchScope =
-	| { kind: "global" }
+	| { kind: "global"; onScopeToSpam?: () => void }
+	| { kind: "collection" }
 	| { kind: "folder"; role?: FolderRole };
 
 const GLOBAL_SCOPE: SearchScope = { kind: "global" };
@@ -74,17 +84,6 @@ export interface SearchResultsProps {
 	tokens?: { label: string; onRemove: () => void }[];
 	/** What the search covers. Defaults to the unscoped, global search. */
 	scope?: SearchScope;
-	/**
-	 * Total spam matches the search found, for when the app knows more than the
-	 * rows on this page. Defaults to the number of spam rows held out of
-	 * {@link sections}.
-	 */
-	spamMatchCount?: number;
-	/**
-	 * Scope the search to Spam. Without it there is no offer, so an app that has
-	 * nowhere to navigate simply never makes one.
-	 */
-	onScopeToSpam?: () => void;
 }
 
 /**
@@ -177,12 +176,15 @@ function CollapsibleResultSection({
  *
  * - **Global** — spam rows are held out of the sections and offered instead, as
  *   a count with a way into a Spam-scoped search.
- * - **Scoped to anything else** — spam rows are held out and nothing is offered.
- *   A scoped search shows its own scope and no more.
+ * - **Scoped to a folder** — spam rows are held out and nothing is offered. A
+ *   scoped search shows its own scope and no more.
  * - **Scoped to Spam** — ordinary rows, rendered normally, no offer.
+ * - **A collection** (`is:starred`) — ordinary rows, spam included. The user
+ *   picked this mail out by hand; there is nothing to protect them from.
  *
- * Provenance labels follow the same logic: only a global search names the
- * folder each row came from, because a scoped one would repeat itself.
+ * Provenance labels follow whether the search reaches more than one folder: a
+ * global or collection search names the folder each row came from, a
+ * folder-scoped one would only repeat its own chip.
  */
 export function SearchResults({
 	value,
@@ -193,8 +195,6 @@ export function SearchResults({
 	onSelectResult,
 	tokens,
 	scope = GLOBAL_SCOPE,
-	spamMatchCount,
-	onScopeToSpam,
 }: SearchResultsProps) {
 	const hasQuery = value.trim().length > 0;
 
@@ -249,11 +249,17 @@ export function SearchResults({
 		);
 	}
 
-	const spamScoped = isSpamScope(scope);
 	const isGlobal = scope.kind === "global";
+	// Only a folder search holds spam back. Scoped to Spam there is nothing to
+	// hold back, and a collection is the user's own selection of mail rather than
+	// a place, so a starred spam message stays where the user put it.
+	const spamInline = isSpamScope(scope) || scope.kind === "collection";
+	// A search that reaches more than one folder names the folder each row came
+	// from; one confined to a single folder would repeat its own chip.
+	const spansFolders = isGlobal || scope.kind === "collection";
 
 	const partitioned = (sections ?? []).map((section) => {
-		if (spamScoped) return { section, spam: [] as SearchResult[] };
+		if (spamInline) return { section, spam: [] as SearchResult[] };
 		const { kept, spam } = partitionSpamResults(section.results);
 		return { section: { ...section, results: kept }, spam };
 	});
@@ -263,12 +269,15 @@ export function SearchResults({
 		(total, entry) => total + entry.spam.length,
 		0,
 	);
-	const spamCount = spamMatchCount ?? heldOutSpamCount;
-	const spamOffer = isGlobal &&
-		spamCount > 0 &&
-		onScopeToSpam !== undefined && (
-			<SpamResultsOffer count={spamCount} onScopeToSpam={onScopeToSpam} />
-		);
+	const spamOffer =
+		scope.kind === "global" &&
+		heldOutSpamCount > 0 &&
+		scope.onScopeToSpam !== undefined ? (
+			<SpamResultsOffer
+				count={heldOutSpamCount}
+				onScopeToSpam={scope.onScopeToSpam}
+			/>
+		) : undefined;
 
 	const hasResults = visibleSections.some(
 		(section) => section.results.length > 0,
@@ -302,7 +311,7 @@ export function SearchResults({
 						key={section.id}
 						section={section}
 						query={value}
-						showFolder={isGlobal}
+						showFolder={spansFolders}
 						onSelectResult={onSelectResult}
 					/>
 				))}

package/src/components/self-update-confirm-dialog.tsx

@@ -0,0 +1,86 @@
+import { Download, ExternalLink } from "lucide-react";
+import { Button, ButtonLink } from "./button.js";
+import { Dialog } from "./dialog.js";
+import { formatReleaseDate, type ReleaseInfo } from "./self-update.js";
+
+export interface SelfUpdateConfirmDialogProps {
+	open: boolean;
+	currentVersion: string;
+	release: ReleaseInfo;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+const consequences = [
+	"Remit restarts. Mail stops loading for about a minute and this page will lose its connection while that happens.",
+	"Nothing is sent, deleted or moved. Your mail stays at your provider.",
+	"If the new version does not come back up, the version you are running now is restored automatically.",
+];
+
+/**
+ * Consent before the server replaces itself. Reflects what will happen in the
+ * user's terms, in the order they will feel it, and leaves the way back open
+ * until the moment they commit.
+ */
+export function SelfUpdateConfirmDialog({
+	open,
+	currentVersion,
+	release,
+	onClose,
+	onConfirm,
+}: SelfUpdateConfirmDialogProps) {
+	if (!open) return null;
+
+	return (
+		<Dialog open onClose={onClose} title={`Install Remit ${release.version}`}>
+			<div className="flex max-h-[80vh] flex-col">
+				<header className="space-y-1 border-b border-line px-4 py-3">
+					<h3 className="text-sm font-semibold text-fg">
+						Install Remit {release.version}?
+					</h3>
+					<p className="text-xs text-fg-muted">
+						You are on {currentVersion}. {release.version} was released{" "}
+						{formatReleaseDate(release.releasedAt)}.
+					</p>
+				</header>
+
+				<div className="flex-1 space-y-3 overflow-auto px-4 py-3">
+					<p className="text-sm text-fg-muted">{release.summary}</p>
+					<ul className="space-y-2">
+						{consequences.map((line) => (
+							<li key={line} className="flex gap-2 text-sm text-fg-muted">
+								<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-subtle" />
+								<span>{line}</span>
+							</li>
+						))}
+					</ul>
+					<p className="text-xs text-fg-subtle">
+						Good moment for this: when you are not waiting on a message.
+					</p>
+				</div>
+
+				<footer className="flex flex-wrap items-center justify-end gap-2 border-t border-line px-4 py-3">
+					<Button variant="ghost" size="sm" onClick={onClose}>
+						Not now
+					</Button>
+					<ButtonLink
+						variant="secondary"
+						size="sm"
+						external
+						href={release.releaseNotesUrl}
+						icon={<ExternalLink className="size-3.5" />}
+					>
+						Release notes
+					</ButtonLink>
+					<Button
+						size="sm"
+						icon={<Download className="size-3.5" />}
+						onClick={onConfirm}
+					>
+						Install and restart
+					</Button>
+				</footer>
+			</div>
+		</Dialog>
+	);
+}

package/src/components/self-update-dot.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export interface UpdateAvailableDotProps {
+	/** The icon or control the hint is attached to. */
+	children?: ReactNode;
+	show: boolean;
+	/** Read out to assistive tech in place of the bare dot. */
+	label?: string;
+}
+
+/**
+ * The only place an available update is allowed to reach outside settings: a
+ * dot on the way there. It carries no count, no copy and no action, so it can
+ * never grow into a prompt over someone's mail.
+ */
+export function UpdateAvailableDot({
+	children,
+	show,
+	label = "Update available",
+}: UpdateAvailableDotProps) {
+	return (
+		<span className="relative inline-flex">
+			{children}
+			{show && (
+				<>
+					<span className="absolute -right-1 -top-1 size-2 rounded-full bg-accent-2" />
+					<span className="sr-only">{label}</span>
+				</>
+			)}
+		</span>
+	);
+}