@remit/web-client 0.0.144 → 0.0.146

package/src/components/layout/MailShell.tsx

@@ -0,0 +1,98 @@
+import { AppShellSlotted } from "@remit/ui";
+import { createContext, type ReactNode, useContext } from "react";
+import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+
+/**
+ * The chrome every list shares, published by the `/mail` layout and consumed by
+ * the list route that mounts the shell.
+ *
+ * It lives in a module reached only through the `@/` alias for the same reason
+ * `lib/mail-context.ts` does: the generated route tree imports route files
+ * relatively, so a context declared inside one of them can resolve to a second
+ * module instance and hand the consumer an empty default.
+ */
+export interface MailShellChrome {
+	/**
+	 * Below the reading boundary (phone AND tablet) the shell shows one pane, so
+	 * the list route mounts its phone view instead of the slotted panes.
+	 */
+	isSinglePane: boolean;
+	isLoading: boolean;
+	intelligenceOpen: boolean;
+	nav: ReactNode;
+	topBar: ReactNode;
+	overlay: ReactNode;
+	navOpen: boolean;
+	onOpenNav: () => void;
+	onCloseNav: () => void;
+}
+
+const MailShellCtx = createContext<MailShellChrome | null>(null);
+
+export const MailShellProvider = ({
+	chrome,
+	children,
+}: {
+	chrome: MailShellChrome;
+	children: ReactNode;
+}) => <MailShellCtx.Provider value={chrome}>{children}</MailShellCtx.Provider>;
+
+export interface MailShellProps {
+	/** The single pane, list and open thread both, below the reading boundary. */
+	phone: ReactNode;
+	list: ReactNode;
+	reading: ReactNode;
+	intelligence?: ReactNode;
+	/** Whether the reading pane has a thread — the intelligence rail needs one. */
+	hasThread?: boolean;
+}
+
+/**
+ * The shell a list route mounts around its own panes.
+ *
+ * Below the reading boundary the shell is one pane and takes `phone`, which
+ * swaps between the list and whatever is open in place. Above it the panes sit
+ * side by side and the reading and intelligence slots are filled.
+ */
+export function MailShell({
+	phone,
+	list,
+	reading,
+	intelligence,
+	hasThread = false,
+}: MailShellProps) {
+	const chrome = useContext(MailShellCtx);
+	if (!chrome) return <AppShellSkeleton />;
+
+	const shared = {
+		nav: chrome.nav,
+		overlay: chrome.overlay,
+		skeleton: <AppShellSkeleton />,
+		isLoading: chrome.isLoading,
+		navOpen: chrome.navOpen,
+		onOpenNav: chrome.onOpenNav,
+		onCloseNav: chrome.onCloseNav,
+	};
+
+	if (chrome.isSinglePane) {
+		return (
+			<AppShellSlotted
+				{...shared}
+				list={phone}
+				intelligenceOpen={chrome.intelligenceOpen}
+			/>
+		);
+	}
+
+	return (
+		<AppShellSlotted
+			{...shared}
+			topBar={chrome.topBar}
+			list={list}
+			reading={reading}
+			intelligence={intelligence}
+			intelligenceOpen={chrome.intelligenceOpen}
+			hasThread={hasThread}
+		/>
+	);
+}

package/src/components/mail/BriefPane.tsx

@@ -132,7 +132,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 	const handleSelectMessage = useCallback(
 		(id: string, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail",
+				to: "/mail/brief",
 				search: (prev) => ({
 					...prev,
 					selectedMessageId: id,
@@ -148,12 +148,12 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 	const handleSelectSearchResult = useCallback(
 		(result: SearchResult, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail",
+				to: "/mail/brief",
 				replace: options?.replace,
 				search: (prev) => ({
 					...prev,
 					// Commit the active query with the selection so the debounced
-					// q-mirror (mail.tsx) — which strips the selection when the query
+					// q-mirror (`useSearchMirror`) — which strips the selection when the query
 					// goes active — is already satisfied and leaves the opened result
 					// alone. Use the *live* `searchInput`: the row can be tapped before
 					// the debounce settles, when the committed query is still empty.
@@ -172,7 +172,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
 			navigate({
-				to: "/mail",
+				to: "/mail/brief",
 				search: (prev) => ({
 					...prev,
 					selectedMessageId: undefined,
@@ -191,7 +191,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 
 	const handleCloseThread = useCallback(() => {
 		navigate({
-			to: "/mail",
+			to: "/mail/brief",
 			search: (prev) => ({
 				...prev,
 				selectedMessageId: undefined,

package/src/components/mail/FlaggedPane.tsx

@@ -182,7 +182,7 @@ function FlaggedPaneProvider({
 				if (!triageTarget) return;
 				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
 			},
-			goBrief: () => navigate({ to: "/mail" }),
+			goBrief: () => navigate({ to: "/mail/brief" }),
 			goSettings: () => navigate({ to: "/settings" }),
 		},
 	});

package/src/components/mail/MailSidebarAdapter.tsx

@@ -117,8 +117,8 @@ function toNavMailbox(
  * component can highlight the right item.
  *   - /mail/outbox → "outbox"
  *   - /mail/flagged → "flagged"
+ *   - /mail/brief → "brief"
  *   - /mail/$mailboxId → mailboxId
- *   - /mail (daily brief) → "brief"
  */
 function useSelectedNavId(): string {
 	const location = useLocation();
@@ -127,9 +127,8 @@ function useSelectedNavId(): string {
 	if (location.pathname.startsWith("/settings")) return "settings";
 	if (location.pathname.startsWith("/mail/outbox")) return "outbox";
 	if (location.pathname.startsWith("/mail/flagged")) return "flagged";
+	if (location.pathname.startsWith("/mail/brief")) return "brief";
 	if (params.mailboxId) return params.mailboxId;
-	if (location.pathname === "/mail" || location.pathname === "/mail/")
-		return "brief";
 	return "";
 }
 
@@ -229,11 +228,9 @@ export function MailSidebarAdapter({
 		if (navId === "brief") {
 			return (
 				<NavLink
-					to="/mail"
+					to="/mail/brief"
 					search={{ q: undefined, selectedMessageId: undefined }}
-					// Every other mail list lives under /mail, so the default prefix
-					// match would leave the brief marked current on all of them.
-					activeOptions={{ exact: true, includeSearch: false }}
+					activeOptions={{ includeSearch: false }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}
@@ -344,7 +341,7 @@ export function MailSidebarAdapter({
 		(query: string) => {
 			onSearchChange(query);
 			navigate({
-				to: "/mail",
+				to: "/mail/brief",
 				search: { q: query, selectedMessageId: undefined },
 			});
 			onMailboxSelect?.();

package/src/components/mail/MailboxPane.tsx

@@ -803,7 +803,7 @@ function MailboxPaneProvider({
 	}, [intelligenceOpen, onToggleIntelligence]);
 
 	const goToRoute = useCallback(
-		(to: "/mail" | "/mail/flagged" | "/settings") => {
+		(to: "/mail/brief" | "/mail/flagged" | "/settings") => {
 			navigate({ to });
 		},
 		[navigate],
@@ -851,9 +851,9 @@ function MailboxPaneProvider({
 			markJunk: triageMarkJunk,
 			toggleIntelligence: selectedThread ? onToggleIntelligence : undefined,
 			compose: handleNewCompose,
-			goBrief: () => goToRoute("/mail"),
-			goInbox: () => goToRoute("/mail"),
-			goSent: () => goToRoute("/mail"),
+			goBrief: () => goToRoute("/mail/brief"),
+			goInbox: () => goToRoute("/mail/brief"),
+			goSent: () => goToRoute("/mail/brief"),
 			goFlagged: () => goToRoute("/mail/flagged"),
 			goSettings: () => goToRoute("/settings"),
 		},
@@ -1047,7 +1047,7 @@ function MailboxList() {
 				search: (prev: Record<string, unknown>) => ({
 					...prev,
 					// Commit the active query alongside the selection. The debounced
-					// q-mirror (mail.tsx) strips the selection whenever it sees the
+					// q-mirror (`useSearchMirror`) strips the selection whenever it sees the
 					// query go active; the row can be tapped before the debounce settles
 					// (it shows in the still-unfiltered list), so use the *live*
 					// `searchInput` here — committing `q` makes the mirror a no-op and

package/src/components/ui/FatalErrorOverlay.tsx

@@ -12,7 +12,10 @@ import {
 	subscribeFatalError,
 } from "@/lib/fatal-error";
 
-/** Safe route to escape a deterministically-crashing page. `/` redirects here. */
+/**
+ * Safe route to escape a deterministically-crashing page. It names no list, so
+ * it redirects on to the brief.
+ */
 const SAFE_ROUTE = "/mail";
 
 /**

package/src/hooks/useSearchMirror.ts

@@ -0,0 +1,93 @@
+import { useNavigate, useRouterState, useSearch } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
+import { useMailContext } from "@/lib/mail-context";
+import { shouldMirrorQuery } from "@/lib/search-view";
+
+/**
+ * The list the mirror writes to. Each list calls the hook with its own route,
+ * so the query lands on the list rather than on whatever is open below it.
+ */
+export type SearchMirrorTarget =
+	| { to: "/mail/brief" | "/mail/flagged" | "/mail/outbox" }
+	| { to: "/mail/$mailboxId"; params: { mailboxId: string } };
+
+/**
+ * Mirrors the settled search into the URL so links are shareable and a refresh
+ * restores the query.
+ *
+ * Within a view this is one-directional — the URL is not read back into state,
+ * so there is no sync loop — and it writes only once the debounce agrees with
+ * the field, so a query arriving by URL is never overwritten mid-debounce, and
+ * the query the user just left behind is never written onto the view they landed
+ * on (`shouldMirrorQuery`).
+ *
+ * It also writes only while the reader is still on this list. A list stays
+ * mounted, effects and all, until the list they navigated to is ready to paint,
+ * and by then the address is already the new one — so a debounce settling in
+ * that window would fire a navigation to *this* list, superseding the load in
+ * flight and replacing the entry the reader had just pushed. They would click
+ * Inbox and land back on the brief.
+ *
+ * When a query *goes* active it also strips the selection so the reading pane
+ * closes (#539): an open message from the pre-search list is not meaningful in
+ * the search result set. Only on that transition though — tapping a search
+ * result commits the same `q` with the selection, so when `prev.q` already
+ * equals the query the result was opened under it (not a pre-search leftover)
+ * and must survive. The strip otherwise raced the tap: the row shows before the
+ * debounce settles, so this mirror can land just after the open and close it
+ * again.
+ */
+export function useSearchMirror(target: SearchMirrorTarget): void {
+	const navigate = useNavigate();
+	const { searchInput, searchQuery: committedQuery } = useMailContext();
+	const { q: urlQuery = "" } = useSearch({ from: "/mail" });
+	const pathname = useRouterState({ select: (s) => s.location.pathname });
+
+	// Read at effect time rather than depended on: the URL is what the mirror
+	// compares against, not what re-triggers it.
+	const urlQueryRef = useRef(urlQuery);
+	urlQueryRef.current = urlQuery;
+
+	const { to } = target;
+	const mailboxId = "params" in target ? target.params.mailboxId : undefined;
+	const listPath = mailboxId ? `/mail/${mailboxId}` : to;
+
+	useEffect(() => {
+		const mayWrite = shouldMirrorQuery({
+			searchInput,
+			committedQuery,
+			urlQuery: urlQueryRef.current,
+			pathname,
+			listPath,
+		});
+		if (!mayWrite) return;
+		const search = (prev: Record<string, unknown>) => {
+			const queryAlreadyActive = prev.q === committedQuery;
+			return {
+				...prev,
+				q: committedQuery || undefined,
+				...(committedQuery && !queryAlreadyActive
+					? {
+							selectedMessageId: undefined,
+							selectedThreadId: undefined,
+							selectedMailboxId: undefined,
+						}
+					: {}),
+			};
+		};
+		if (to === "/mail/$mailboxId") {
+			if (!mailboxId) return;
+			navigate({ to, params: { mailboxId }, search, replace: true });
+			return;
+		}
+		navigate({ to, search, replace: true });
+	}, [
+		searchInput,
+		committedQuery,
+		navigate,
+		to,
+		mailboxId,
+		listPath,
+		pathname,
+	]);
+}

package/src/hooks/useSearchScope.ts

@@ -38,7 +38,7 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 		(chipId: string) => {
 			if (chipId !== SEARCH_SCOPE_CHIP_ID) return;
 			navigate({
-				to: "/mail",
+				to: "/mail/brief",
 				search: { q: searchInput || undefined, selectedMessageId: undefined },
 			});
 		},

package/src/lib/compose-routes.test.ts

@@ -15,11 +15,12 @@ describe("hostsComposeSurface", () => {
 	});
 
 	it("is false for the virtual views, which mount no surface", () => {
+		assert.equal(hostsComposeSurface("/mail/brief"), false);
 		assert.equal(hostsComposeSurface("/mail/outbox"), false);
 		assert.equal(hostsComposeSurface("/mail/flagged"), false);
 	});
 
-	it("is false for the daily brief, which is /mail itself", () => {
+	it("is false for /mail itself, which only redirects to the brief", () => {
 		assert.equal(hostsComposeSurface("/mail"), false);
 		assert.equal(hostsComposeSurface("/mail/"), false);
 	});
@@ -34,6 +35,7 @@ describe("hostsComposeSurface", () => {
 		assert.equal(hostsComposeSurface("/mail/outbox-2024"), true);
 		assert.equal(hostsComposeSurface("/mail/flagged-archive"), true);
 		assert.equal(hostsComposeSurface("/mail/outboxes"), true);
+		assert.equal(hostsComposeSurface("/mail/briefing"), true);
 	});
 
 	it("ignores a query string or hash on the path", () => {

package/src/lib/compose-routes.ts

@@ -10,7 +10,7 @@
  */
 
 /** `/mail/<segment>` values that name a view rather than a mailbox. */
-const VIRTUAL_MAIL_VIEWS = new Set(["outbox", "flagged"]);
+const VIRTUAL_MAIL_VIEWS = new Set(["brief", "outbox", "flagged"]);
 
 /**
  * True for `/mail/<id>` where `<id>` is a real mailbox.

package/src/lib/mail-route.test.ts

@@ -1,80 +1,180 @@
 /**
- * Regression: the /mail shell must mount the MAILBOX pane (MessageList →
- * SwipeableMessageRow → `a[href*=selectedMessageId]`) on /mail/$mailboxId,
- * NOT the brief pane. The first slotted-shell cut keyed brief detection off
- * the parent /mail layout's matched pathname ("/mail"), which is present on
- * EVERY child route — so every mailbox rendered the unified DailyBrief and
- * the message-row anchors disappeared (e2e sync-flow + smoke both failed on
- * `a[href*='selectedMessageId']`). These tests pin detection to each leaf
- * route's own routeId so that can't regress.
+ * Three contracts, each of which has already cost a regression.
+ *
+ * The list is read off a matched route id, never the parent /mail layout's
+ * pathname: that pathname is "/mail" on every child route, and keying off it
+ * routed every mailbox through the brief pane, so the message-row anchors
+ * vanished.
+ *
+ * The view key of a list equals the view key of anything nested under it. A
+ * thread is a child route of the list it was opened from, so a key that moved
+ * when the thread opened would tell `lib/search-view.ts` the reader had left
+ * the view — and the query they had just typed would be re-seeded from the URL
+ * and disappear the moment they opened a hit.
+ *
+ * And "am I the current list" is answered by the pathname, not by the matches,
+ * because the matches lag a navigation by as long as the destination takes to
+ * mount.
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
-	isBriefRoute,
-	isFlaggedRoute,
-	isMailboxRoute,
-	isOutboxRoute,
+	locationIsOnList,
+	MAIL_BRIEF_ROUTE_ID,
+	MAIL_FLAGGED_ROUTE_ID,
+	MAIL_MAILBOX_ROUTE_ID,
+	MAIL_OUTBOX_ROUTE_ID,
 	type MailRouteMatch,
+	mailListRoute,
+	mailViewKey,
 } from "./mail-route.js";
 
-/** Matches as TanStack Router reports them: parent /mail layout + the leaf. */
-const briefMatches: MailRouteMatch[] = [
+/** Matches as TanStack Router reports them: outermost first, leaf last. */
+const matches = (
+	routeIds: readonly string[],
+	params?: Record<string, string>,
+): MailRouteMatch[] => [
 	{ routeId: "__root__" },
 	{ routeId: "/mail" },
-	{ routeId: "/mail/" },
-];
-const mailboxMatches: MailRouteMatch[] = [
-	{ routeId: "__root__" },
-	{ routeId: "/mail" },
-	{ routeId: "/mail/$mailboxId" },
-];
-const outboxMatches: MailRouteMatch[] = [
-	{ routeId: "__root__" },
-	{ routeId: "/mail" },
-	{ routeId: "/mail/outbox" },
-];
-const flaggedMatches: MailRouteMatch[] = [
-	{ routeId: "__root__" },
-	{ routeId: "/mail" },
-	{ routeId: "/mail/flagged" },
+	...routeIds.map((routeId) => ({ routeId, ...(params ? { params } : {}) })),
 ];
 
-describe("mail route pane detection", () => {
-	it("classifies the brief index route as brief only", () => {
-		assert.equal(isBriefRoute(briefMatches), true);
-		assert.equal(isMailboxRoute(briefMatches), false);
-		assert.equal(isOutboxRoute(briefMatches), false);
+const brief = matches([MAIL_BRIEF_ROUTE_ID]);
+const flagged = matches([MAIL_FLAGGED_ROUTE_ID]);
+const outbox = matches([MAIL_OUTBOX_ROUTE_ID]);
+const mailbox = matches([MAIL_MAILBOX_ROUTE_ID], { mailboxId: "inbox-1" });
+
+describe("mailListRoute", () => {
+	it("names each of the four lists", () => {
+		assert.deepEqual(mailListRoute(brief), { list: "brief" });
+		assert.deepEqual(mailListRoute(flagged), { list: "flagged" });
+		assert.deepEqual(mailListRoute(outbox), { list: "outbox" });
+		assert.deepEqual(mailListRoute(mailbox), {
+			list: "mailbox",
+			mailboxId: "inbox-1",
+		});
+		assert.deepEqual(mailListRoute(matches([MAIL_MAILBOX_ROUTE_ID])), {
+			list: "mailbox",
+			mailboxId: undefined,
+		});
+	});
+
+	it("never reads the parent /mail layout as a list", () => {
+		assert.equal(mailListRoute(matches([])), undefined);
+		assert.equal(mailListRoute([{ routeId: "__root__" }]), undefined);
+	});
+
+	it("names the list a thread was opened from, not the thread", () => {
+		assert.deepEqual(
+			mailListRoute(
+				matches([MAIL_BRIEF_ROUTE_ID, `${MAIL_BRIEF_ROUTE_ID}/$threadId`]),
+			),
+			{ list: "brief" },
+		);
+		assert.deepEqual(
+			mailListRoute(
+				matches([MAIL_MAILBOX_ROUTE_ID, `${MAIL_MAILBOX_ROUTE_ID}/$threadId`], {
+					mailboxId: "inbox-1",
+				}),
+			),
+			{ list: "mailbox", mailboxId: "inbox-1" },
+		);
+	});
+});
+
+describe("mailViewKey", () => {
+	it("gives the four lists four distinct keys", () => {
+		const keys = [brief, flagged, outbox, mailbox].map(mailViewKey);
+		assert.equal(new Set(keys).size, 4);
 	});
 
-	it("classifies a mailbox route as mailbox, NOT brief (the regression)", () => {
-		// The bug: the parent /mail layout match made isBriefRoute true here,
-		// routing the mailbox through the brief pane and dropping message rows.
-		assert.equal(isBriefRoute(mailboxMatches), false);
-		assert.equal(isMailboxRoute(mailboxMatches), true);
-		assert.equal(isOutboxRoute(mailboxMatches), false);
+	it("distinguishes two mailboxes", () => {
+		assert.notEqual(
+			mailViewKey(matches([MAIL_MAILBOX_ROUTE_ID], { mailboxId: "inbox-1" })),
+			mailViewKey(matches([MAIL_MAILBOX_ROUTE_ID], { mailboxId: "archive-1" })),
+		);
 	});
 
-	it("classifies the outbox route as outbox only", () => {
-		assert.equal(isBriefRoute(outboxMatches), false);
-		assert.equal(isMailboxRoute(outboxMatches), false);
-		assert.equal(isOutboxRoute(outboxMatches), true);
+	it("is empty outside the mail shell", () => {
+		assert.equal(mailViewKey([{ routeId: "__root__" }]), "");
 	});
 
-	it("classifies the flagged route as flagged only", () => {
-		assert.equal(isFlaggedRoute(flaggedMatches), true);
-		assert.equal(isBriefRoute(flaggedMatches), false);
-		assert.equal(isMailboxRoute(flaggedMatches), false);
-		assert.equal(isOutboxRoute(flaggedMatches), false);
+	it("is empty on a mailbox route whose param has not resolved", () => {
+		assert.equal(mailViewKey(matches([MAIL_MAILBOX_ROUTE_ID])), "");
 	});
 
-	it("never treats the parent /mail layout match as the brief route", () => {
-		// Every child route carries the parent /mail layout match. Brief
-		// detection must ignore it entirely.
-		const parentOnly: MailRouteMatch[] = [
-			{ routeId: "__root__" },
-			{ routeId: "/mail" },
+	// The trap: opening a thread must not read as leaving the list, or the
+	// search field re-seeds and the typed query is gone.
+	it("gives a list and its open thread the same key", () => {
+		const lists: [readonly string[], Record<string, string> | undefined][] = [
+			[[MAIL_BRIEF_ROUTE_ID], undefined],
+			[[MAIL_FLAGGED_ROUTE_ID], undefined],
+			[[MAIL_OUTBOX_ROUTE_ID], undefined],
+			[[MAIL_MAILBOX_ROUTE_ID], { mailboxId: "inbox-1" }],
 		];
-		assert.equal(isBriefRoute(parentOnly), false);
+
+		for (const [routeIds, params] of lists) {
+			const list = routeIds[0];
+			const thread = `${list}/$threadId`;
+			const message = `${thread}/$messageId`;
+			assert.equal(
+				mailViewKey(matches([list, thread], params)),
+				mailViewKey(matches([list], params)),
+				`${list} changes view key when a thread opens`,
+			);
+			assert.equal(
+				mailViewKey(matches([list, thread, message], params)),
+				mailViewKey(matches([list], params)),
+				`${list} changes view key when a message expands`,
+			);
+		}
+	});
+
+	it("gives a list and its reading-pane index child the same key", () => {
+		assert.equal(
+			mailViewKey(matches([MAIL_BRIEF_ROUTE_ID, `${MAIL_BRIEF_ROUTE_ID}/`])),
+			mailViewKey(brief),
+		);
+	});
+});
+
+/**
+ * The router commits the new location before it swaps the matches, so a list on
+ * its way off the screen sees its own matches under the destination's address.
+ * Anything that acts on "am I the current list" has to ask the pathname.
+ */
+describe("locationIsOnList", () => {
+	it("is true on the list itself", () => {
+		assert.equal(locationIsOnList("/mail/brief", "/mail/brief"), true);
+		assert.equal(locationIsOnList("/mail/inbox-1", "/mail/inbox-1"), true);
+	});
+
+	it("is true for anything the list has open below it", () => {
+		assert.equal(
+			locationIsOnList("/mail/brief/thread-1/message-1", "/mail/brief"),
+			true,
+		);
+		assert.equal(locationIsOnList("/mail/brief/", "/mail/brief"), true);
+		assert.equal(
+			locationIsOnList("/mail/inbox-1/compose", "/mail/inbox-1"),
+			true,
+		);
+	});
+
+	it("is false once the address names another list", () => {
+		assert.equal(locationIsOnList("/mail/inbox-1", "/mail/brief"), false);
+		assert.equal(locationIsOnList("/mail/brief", "/mail/inbox-1"), false);
+		assert.equal(locationIsOnList("/mail/archive-1", "/mail/inbox-1"), false);
+		assert.equal(locationIsOnList("/mail/flagged", "/mail/brief"), false);
+	});
+
+	it("is false outside the mail shell", () => {
+		assert.equal(locationIsOnList("/settings/accounts", "/mail/brief"), false);
+		assert.equal(locationIsOnList("/onboarding", "/mail/brief"), false);
+	});
+
+	it("compares whole segments, so a folder may be named after a list", () => {
+		assert.equal(locationIsOnList("/mail/briefing", "/mail/brief"), false);
+		assert.equal(locationIsOnList("/mail/outbox-2024", "/mail/outbox"), false);
 	});
 });