@remit/web-client 0.0.143 → 0.0.145

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/DraftsView.tsx

@@ -185,17 +185,6 @@ export function DraftsView({
 	};
 
 	const handleRemitDraftOpen = (outboxMessageId: string) => {
-		// Clear any open IMAP draft first. The route's detailPane only renders
-		// FullCompose when `composeState.isOpen && !selectedThread`; if an IMAP
-		// draft is open (selectedMessageId set) the reading pane would keep
-		// showing ConversationView and compose would never surface (#505).
-		if (selectedMessageId) {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: { selectedMessageId: undefined },
-			});
-		}
 		openCompose({ mode: "new", outboxMessageId });
 	};
 

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

@@ -598,6 +598,16 @@ function MailboxPaneProvider({
 		openCompose({ mode: "new" });
 	}, [openCompose]);
 
+	// A thread opening closes compose. Only a selection arriving counts, so this
+	// cannot close the compose that just cleared one.
+	const previousSelectionRef = useRef(selectedMessageId);
+	useEffect(() => {
+		const previous = previousSelectionRef.current;
+		previousSelectionRef.current = selectedMessageId;
+		if (!selectedMessageId || selectedMessageId === previous) return;
+		closeCompose();
+	}, [selectedMessageId, closeCompose]);
+
 	const deleteOutboxMutation = useMutation({
 		...outboxDetailOperationsDeleteOutboxMessageMutation(),
 		onError: (mutationError) => {
@@ -793,7 +803,7 @@ function MailboxPaneProvider({
 	}, [intelligenceOpen, onToggleIntelligence]);
 
 	const goToRoute = useCallback(
-		(to: "/mail" | "/mail/flagged" | "/settings") => {
+		(to: "/mail/brief" | "/mail/flagged" | "/settings") => {
 			navigate({ to });
 		},
 		[navigate],
@@ -841,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"),
 		},
@@ -1037,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/useComposeTargetMailbox.ts

@@ -0,0 +1,75 @@
+/**
+ * Where a compose started off a mailbox route has to land.
+ *
+ * `FullCompose` is mounted by the mailbox route only, so compose started from
+ * the daily brief, flagged or the outbox has to carry the user to a mailbox
+ * first. The target is the first account's inbox, falling back to its first
+ * mailbox.
+ */
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { buildMailboxRoleMap } from "@/lib/folder-roles";
+
+/**
+ * The mailbox to land on, or why there is none: a folder list still in flight
+ * is a different answer to the user than an account with no folders at all.
+ */
+export type ComposeTarget =
+	| { status: "ready"; mailboxId: string }
+	| { status: "loading" }
+	| { status: "none" };
+
+/**
+ * Accounts resolve in order and an account whose mailbox query is still in
+ * flight blocks rather than being skipped: skipping hands back a later
+ * account's inbox and then silently swaps the target once the earlier query
+ * settles.
+ *
+ * The answer is memoised on the two values it is made of. A fresh object every
+ * render would rebuild `openCompose` on every render of the provider, and a
+ * caller with it in a dependency array then never settles.
+ */
+export function useComposeTarget(
+	accounts: RemitImapAccountResponse[],
+): ComposeTarget {
+	const mailboxQueries = useQueries({
+		queries: accounts.map((account) => ({
+			...mailboxOperationsListMailboxesOptions({
+				path: { accountId: account.accountId },
+			}),
+			staleTime: Infinity,
+		})),
+	});
+
+	let status: ComposeTarget["status"] = "none";
+	let readyMailboxId: string | undefined;
+	for (const [index, account] of accounts.entries()) {
+		const query = mailboxQueries[index];
+		if (!query || query.isPending) {
+			status = "loading";
+			break;
+		}
+		const mailboxes = query.data?.items ?? [];
+		if (mailboxes.length === 0) continue;
+		const roleMap = buildMailboxRoleMap(account.folderAppointments);
+		const inbox = mailboxes.find(
+			(mailbox) => roleMap.get(mailbox.mailboxId) === "inbox",
+		);
+		const mailboxId = (inbox ?? mailboxes[0])?.mailboxId;
+		if (mailboxId) {
+			status = "ready";
+			readyMailboxId = mailboxId;
+			break;
+		}
+	}
+
+	return useMemo(
+		() =>
+			status === "ready" && readyMailboxId
+				? { status: "ready", mailboxId: readyMailboxId }
+				: { status: status === "ready" ? "none" : status },
+		[status, readyMailboxId],
+	);
+}

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

@@ -2,15 +2,15 @@
  * Which routes mount the compose surface.
  *
  * `FullCompose` is mounted by the mailbox route only, so compose started from
- * anywhere else has to carry the user to a mailbox first. Kept apart from
- * `useComposeTarget` so it stays a plain function with no React or API
- * dependencies — both compose entry points resolve routes through this one
- * definition, and a divergent second copy is what left the mobile FAB dead on
- * `/mail/flagged` and on the brief.
+ * anywhere else has to carry the user to a mailbox first — and compose left
+ * open when the user walks off those routes has to close. `ComposeProvider`
+ * decides both from here, and the mail layout binds `c` off the same answer.
+ * A plain function with no React or API dependencies: a divergent second copy
+ * is what left the mobile FAB dead on `/mail/flagged` and on the brief.
  */
 
 /** `/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);
 	});
 });