@remit/web-client 0.0.153 → 0.0.155

package/src/components/mail/FlaggedPane.tsx

@@ -6,15 +6,19 @@
  * reading / phone slots. The list itself is a FLAT inbox of starred mail (see
  * `FlaggedList`), not the sectioned brief.
  *
- * The selection resolves from the starred listing, the same query that produced
- * the rows. The unified listing is INBOX-scoped, so resolving against it left
- * every starred thread filed elsewhere — Sent, an archive folder, anything past
- * the inbox window — visible in the list but impossible to open (issue #70).
+ * The row prefers the starred listing, the same query that produced the rows,
+ * and falls back to resolving the thread on its own when the address names
+ * one the listing doesn't hold. The unified listing is INBOX-scoped, so
+ * resolving against it left every starred thread filed elsewhere — Sent, an
+ * archive folder, anything past the inbox window — visible in the list but
+ * impossible to open (issue #70).
  *
- *   <FlaggedPane selectedMessageId={...}>
- *     <AppShellSlotted
+ * Usage in the list layout route:
+ *
+ *   <FlaggedPane thread={useOpenThreadPath()}>
+ *     <MailShell
  *       list={<FlaggedPane.List />}
- *       reading={<FlaggedPane.Reading />}
+ *       reading={<Outlet />}
  *     />
  *   </FlaggedPane>
  *
@@ -40,22 +44,34 @@ import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import { useThreadRow } from "@/hooks/useThreadRow";
 import {
 	type TriageContext,
 	useTriageContext,
 	useTriageLayer,
 } from "@/hooks/useTriageLayer";
+import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
+import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
 /* ------------------------------------------------------------------ */
 
 interface FlaggedPaneContextValue {
+	/** The row the reader pointed at, which is the one the list highlights. */
 	selectedMessageId: string | undefined;
 	selectedThread: RemitImapThreadMessageResponse | undefined;
-	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
+	/** The conversation the pane shows, or none when the address names no thread. */
+	conversation: ConversationTarget | undefined;
+	onOpenThread: (
+		target: OpenThreadTarget,
+		options?: OpenMessageOptions,
+	) => void;
 	onCloseThread: () => void;
+	/** The rows either side of the open one — the phone's swipe gestures. */
+	nextThread: OpenThreadTarget | undefined;
+	previousThread: OpenThreadTarget | undefined;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
 	 * account — Flagged spans accounts, so there is no route mailbox to key by.
@@ -64,8 +80,6 @@ interface FlaggedPaneContextValue {
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
-	nextMessageId: string | undefined;
-	previousMessageId: string | undefined;
 	/**
 	 * Deselects the open message when it's the one a mutation just removed
 	 * from view — wired into every mutation that can take the open message out
@@ -88,39 +102,65 @@ function useFlaggedPane(): FlaggedPaneContextValue {
 /* ------------------------------------------------------------------ */
 
 interface FlaggedPaneProps {
-	selectedMessageId: string | undefined;
+	/** The open conversation, as the address states it. */
+	thread: OpenThreadPath | undefined;
 	children: ReactNode;
 }
 
-function FlaggedPaneProvider({
-	selectedMessageId,
-	children,
-}: FlaggedPaneProps) {
+function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const navigate = useNavigate();
+	const { searchInput } = useMailContext();
+	const threadId = thread?.threadId;
+	const pointedAtMessageId = thread?.messageId;
 
 	const { threads } = useStarredThreads();
 
-	const selectedThread = useMemo(() => {
-		if (!selectedMessageId) return undefined;
-		return threads.find((t) => t.messageId === selectedMessageId);
-	}, [threads, selectedMessageId]);
+	// The row the starred listing itself holds, preferred because a mutation
+	// patches it in place. A thread reached from a cold address is in no listing
+	// here and answers for itself — the folder it is filed in is the thread's own
+	// data, so Starred spanning folders costs the URL nothing.
+	const listedThread = useMemo(() => {
+		if (!threadId) return undefined;
+		return (
+			threads.find((t) => t.messageId === pointedAtMessageId) ??
+			threads.find((t) => t.threadId === threadId)
+		);
+	}, [threads, threadId, pointedAtMessageId]);
+	const ownRow = useThreadRow(threadId, pointedAtMessageId);
+	const selectedThread = listedThread ?? ownRow;
+
+	const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
 
-	const handleSelectMessage = useCallback(
-		(id: string, options?: OpenMessageOptions) => {
+	const conversation = useMemo<ConversationTarget | undefined>(() => {
+		if (!threadId) return undefined;
+		return {
+			threadId,
+			mailboxId: selectedThread?.mailboxId ?? "",
+			subject: selectedThread?.subject,
+			messageId: selectedMessageId,
+			authenticity: selectedThread?.authenticity,
+		};
+	}, [threadId, selectedThread, selectedMessageId]);
+
+	const handleOpenThread = useCallback(
+		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail/flagged",
-				search: (prev) => ({ ...prev, selectedMessageId: id }),
+				to: "/mail/flagged/$threadId/$messageId",
+				params: target,
 				replace: options?.replace,
+				// Commit the active query with the open so the debounced q-mirror —
+				// which walks back up to the list when the query goes active — is
+				// already satisfied and leaves the conversation alone. The *live*
+				// `searchInput`: a row can be tapped before the debounce settles, when
+				// the committed query is still empty.
+				search: (prev) => ({ ...prev, q: searchInput || undefined }),
 			});
 		},
-		[navigate],
+		[navigate, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/flagged",
-			search: (prev) => ({ ...prev, selectedMessageId: undefined }),
-		});
+		navigate({ to: "/mail/flagged", search: (prev) => prev });
 	}, [navigate]);
 
 	const handleDeselectIfRemoved = useCallback(
@@ -187,16 +227,29 @@ function FlaggedPaneProvider({
 		},
 	});
 
+	// The swipe gestures open a whole conversation, so the adjacent row has to
+	// name its thread. The starred listing is where that is looked up, so a row
+	// it does not hold offers no gesture rather than a tap that goes nowhere.
+	const adjacentThread = useCallback(
+		(messageId: string | undefined): OpenThreadTarget | undefined => {
+			if (!messageId) return undefined;
+			const row = threads.find((t) => t.messageId === messageId);
+			return row ? { threadId: row.threadId, messageId } : undefined;
+		},
+		[threads],
+	);
+
 	const ctx: FlaggedPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
-		onSelectMessage: handleSelectMessage,
+		conversation,
+		onOpenThread: handleOpenThread,
 		onCloseThread: handleCloseThread,
+		nextThread: adjacentThread(nextMessageId),
+		previousThread: adjacentThread(previousMessageId),
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		nextMessageId,
-		previousMessageId,
 		handleDeselectIfRemoved,
 	};
 
@@ -211,12 +264,12 @@ function FlaggedPaneProvider({
 
 /** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
 function FlaggedListSlot() {
-	const { selectedMessageId, onSelectMessage, triage, onDeleteMessages } =
+	const { selectedMessageId, onOpenThread, triage, onDeleteMessages } =
 		useFlaggedPane();
 	return (
 		<FlaggedList
 			selectedMessageId={selectedMessageId}
-			onSelectMessage={onSelectMessage}
+			onOpenThread={onOpenThread}
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
@@ -229,13 +282,13 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { selectedThread, actions } = useFlaggedPane();
+	const { conversation, actions } = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
 	// reading pane is mounted but the rail is not, so "enabled" would promise an
 	// open that cannot happen.
 	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
-	const hasThread = Boolean(selectedThread);
+	const hasThread = Boolean(conversation);
 	const canToggleIntelligence = railFits && hasThread;
 
 	return (
@@ -266,12 +319,13 @@ function FlaggedReading() {
 				}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
-				{selectedThread ? (
+				{conversation ? (
 					<ConversationView
-						threadId={selectedThread.threadId}
-						mailboxId={selectedThread.mailboxId}
-						subject={selectedThread.subject}
-						authenticity={selectedThread.authenticity}
+						threadId={conversation.threadId}
+						mailboxId={conversation.mailboxId}
+						subject={conversation.subject}
+						selectedMessageId={conversation.messageId}
+						authenticity={conversation.authenticity}
 						composeRequest={actions.composeRequest}
 						onComposeClose={actions.clearComposeRequest}
 					/>
@@ -306,31 +360,29 @@ function FlaggedIntelligence() {
 function FlaggedPhone() {
 	const {
 		selectedThread,
+		conversation,
 		onCloseThread,
-		onSelectMessage,
-		nextMessageId,
-		previousMessageId,
+		onOpenThread,
+		nextThread,
+		previousThread,
 		handleDeselectIfRemoved,
 	} = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
-	if (selectedThread) {
+	if (conversation) {
 		return (
 			<>
 				<ConversationView
-					threadId={selectedThread.threadId}
-					mailboxId={selectedThread.mailboxId}
-					subject={selectedThread.subject}
-					authenticity={selectedThread.authenticity}
+					threadId={conversation.threadId}
+					mailboxId={conversation.mailboxId}
+					subject={conversation.subject}
+					selectedMessageId={conversation.messageId}
+					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
 					onOpenIntelligence={onToggleIntelligence}
-					onSwipeNext={
-						nextMessageId ? () => onSelectMessage(nextMessageId) : undefined
-					}
+					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
-						previousMessageId
-							? () => onSelectMessage(previousMessageId)
-							: undefined
+						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
 					mobileIntelligenceOpen={intelligenceOpen}
 				/>

package/src/components/mail/MailSidebarAdapter.tsx

@@ -258,7 +258,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/flagged"
-					search={{ q: undefined, selectedMessageId: undefined }}
+					search={{ q: undefined }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}

package/src/components/mail/MessageActionMenu.tsx

@@ -4,7 +4,7 @@ import {
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	BadgeCheck,
 	Check,
@@ -104,15 +104,7 @@ export const MessageActionMenu = ({
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 	const { pushError } = useErrorBanners();
-	// Which message the address has open. The brief and a folder say so in their
-	// path; the flagged list, still to move, says so in `?selectedMessageId=`.
-	const openThread = useOpenThreadPath();
-	const { selectedMessageId: selectedFromQuery } = useSearch({
-		strict: false,
-	}) as {
-		selectedMessageId?: string;
-	};
-	const selectedMessageId = openThread?.messageId ?? selectedFromQuery;
+	const selectedMessageId = useOpenThreadPath()?.messageId;
 
 	const { mutate: updateFlags, isPending: isUpdatingFlags } = useMutation({
 		...messageBulkOperationsUpdateFlagsMutation(),

package/src/components/mail/MessageList.tsx

@@ -243,7 +243,7 @@ export const MessageList = ({
 	const { pushError } = useErrorBanners();
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
-	// from the open thread (`selectedMessageId` in the URL). j/k move this
+	// from the open thread (the message segment in the path). j/k move this
 	// cursor; Enter opens the focused row → sets selected, and on desktop the
 	// reading pane follows the cursor of its own accord (see the follow-focus
 	// wiring below). It seeds from the open thread so opening a message also

package/src/components/ui/ErrorBanner.tsx

@@ -1,12 +1,16 @@
 import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import type { ErrorBannerSeverity } from "./error-banners.js";
+import type {
+	ErrorBannerAction,
+	ErrorBannerSeverity,
+} from "./error-banners.js";
 
 interface ErrorBannerProps {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	onDismiss: (id: string) => void;
 }
 
@@ -51,6 +55,7 @@ export const ErrorBanner = ({
 	severity,
 	title,
 	detail,
+	action,
 	onDismiss,
 }: ErrorBannerProps) => {
 	const styles = SEVERITY_STYLES[severity];
@@ -77,6 +82,16 @@ export const ErrorBanner = ({
 				{detail && (
 					<p className="mt-0.5 text-xs text-fg-muted break-words">{detail}</p>
 				)}
+				{action && (
+					<a
+						href={action.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="mt-1 inline-block text-xs font-medium text-accent-2 underline underline-offset-2"
+					>
+						{action.label}
+					</a>
+				)}
 			</div>
 			<button
 				type="button"

package/src/components/ui/ErrorBannerStack.tsx

@@ -25,6 +25,7 @@ export const ErrorBannerStack = ({
 						severity={entry.severity}
 						title={entry.title}
 						detail={entry.detail}
+						action={entry.action}
 						onDismiss={onDismiss}
 					/>
 				))}

package/src/components/ui/error-banners.ts

@@ -1,10 +1,20 @@
 export type ErrorBannerSeverity = "error" | "warning" | "info";
 
+/**
+ * A way out of the banner. A failure the user cannot act on is still theirs to
+ * report, and a link they have to assemble themselves is one nobody follows.
+ */
+export interface ErrorBannerAction {
+	label: string;
+	href: string;
+}
+
 export interface ErrorBannerEntry {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	createdAt: number;
 }
 
@@ -12,6 +22,7 @@ export interface PushErrorInput {
 	severity?: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	/**
 	 * The error being reported, when there is one. Pass it: a banner is a soft
 	 * surface, and `pushError` uses this to refuse errors that are not soft —
@@ -116,5 +127,6 @@ export const buildEntry = (
 	severity: input.severity ?? "error",
 	title: input.title,
 	detail: input.detail,
+	action: input.action,
 	createdAt: now,
 });

package/src/hooks/search-mirror-detail.render.test.ts

@@ -1,5 +1,5 @@
 /**
- * Where the search mirror writes, now that the brief's open thread is a path
+ * Where the search mirror writes, now that a list's open thread is a path
  * segment (#718).
  *
  * Mirroring `q` used to be one navigation with one destination, because the
@@ -8,9 +8,12 @@
  * walking up to the list — while every other write has to keep the address it
  * found, or clearing the search would shut the conversation being read.
  *
- * Driven through a real router over the brief's real route shape, because the
+ * Driven through a real router over each list's real route shape, because the
  * whole question is what the router resolves a destination to from a thread
- * route. Reasoning about `to: "."` is not evidence.
+ * route under it. Reasoning about `to: "."` is not evidence. The brief and the
+ * flagged list share this exact shape — a flat/sectioned list with a
+ * `$threadId/$messageId` pair below it — so the two are driven through the
+ * same cases rather than one covering for the other.
  */
 
 import assert from "node:assert/strict";
@@ -45,14 +48,18 @@ afterEach(() => {
 const THREAD_ID = "th-1";
 const MESSAGE_ID = "msg-1";
 
-const mailContext = (input: string, committed: string): MailContextValue => ({
+const mailContext = (
+	input: string,
+	committed: string,
+	searchViewKey: string,
+): MailContextValue => ({
 	accounts: [],
 	mailboxNameIndex: new Map(),
 	accountNameIndex: new Map(),
 	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
 	searchQuery: committed,
 	searchInput: input,
-	searchViewKey: "/mail/brief",
+	searchViewKey,
 	onSearchChange: () => {},
 	onSearchClear: () => {},
 	onSearchClearQuery: () => {},
@@ -61,11 +68,15 @@ const mailContext = (input: string, committed: string): MailContextValue => ({
 	onSetIntelligenceOpen: () => {},
 });
 
+type ListPath = "/mail/brief" | "/mail/flagged";
+
 /**
- * The brief's shape: the list is a layout route and the thread and message are
- * segments under it, so a write from the list has a matched child to lose.
+ * Both lists' shape: the list is a layout route and the thread and message
+ * are segments under it, so a write from the list has a matched child to
+ * lose.
  */
-const routerAt = (href: string): AnyRouter => {
+const routerAt = (listPath: ListPath, href: string): AnyRouter => {
+	const listSegment = listPath.slice("/mail".length);
 	const rootRoute = createRootRoute({ component: Outlet });
 	const passthrough = (search: Record<string, unknown>) => search;
 	const mailRoute = createRoute({
@@ -74,17 +85,17 @@ const routerAt = (href: string): AnyRouter => {
 		validateSearch: passthrough,
 		component: Outlet,
 	});
-	const briefRoute = createRoute({
+	const listRoute = createRoute({
 		getParentRoute: () => mailRoute,
-		path: "/brief",
+		path: listSegment,
 		validateSearch: passthrough,
 		component: () => {
-			useSearchMirror({ to: "/mail/brief" });
+			useSearchMirror({ to: listPath });
 			return createElement(Outlet);
 		},
 	});
 	const threadRoute = createRoute({
-		getParentRoute: () => briefRoute,
+		getParentRoute: () => listRoute,
 		path: "/$threadId",
 		component: Outlet,
 	});
@@ -95,7 +106,7 @@ const routerAt = (href: string): AnyRouter => {
 	});
 	const routeTree = rootRoute.addChildren([
 		mailRoute.addChildren([
-			briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+			listRoute.addChildren([threadRoute.addChildren([messageRoute])]),
 		]),
 	]);
 	return createRouter({
@@ -108,6 +119,7 @@ const mount = async (
 	router: AnyRouter,
 	input: string,
 	committed: string,
+	searchViewKey: string,
 ): Promise<DomHarness> => {
 	const created = createDomHarness();
 	harness = created;
@@ -115,7 +127,7 @@ const mount = async (
 	created.renderApp(
 		createElement(
 			MailContext.Provider,
-			{ value: mailContext(input, committed) },
+			{ value: mailContext(input, committed, searchViewKey) },
 			createElement(RouterProvider, { router }),
 		),
 	);
@@ -124,58 +136,62 @@ const mount = async (
 	return created;
 };
 
-const threadHref = `/mail/brief/${THREAD_ID}/${MESSAGE_ID}`;
+const LIST_PATHS: ListPath[] = ["/mail/brief", "/mail/flagged"];
 
-describe("mirroring a query that goes active", () => {
-	it("walks up to the list, so no thread stays matched behind the results", async () => {
-		const router = routerAt(threadHref);
-		await mount(router, "invoice", "invoice");
+for (const listPath of LIST_PATHS) {
+	const threadHref = `${listPath}/${THREAD_ID}/${MESSAGE_ID}`;
 
-		assert.equal(router.history.location.pathname, "/mail/brief");
-		assert.match(router.history.location.search, /q=invoice/);
-	});
+	describe(`mirroring a query that goes active (${listPath})`, () => {
+		it("walks up to the list, so no thread stays matched behind the results", async () => {
+			const router = routerAt(listPath, threadHref);
+			await mount(router, "invoice", "invoice", listPath);
 
-	it("closes the pane from a bare thread address too", async () => {
-		const router = routerAt(`/mail/brief/${THREAD_ID}`);
-		await mount(router, "invoice", "invoice");
+			assert.equal(router.history.location.pathname, listPath);
+			assert.match(router.history.location.search, /q=invoice/);
+		});
 
-		assert.equal(router.history.location.pathname, "/mail/brief");
-	});
+		it("closes the pane from a bare thread address too", async () => {
+			const router = routerAt(listPath, `${listPath}/${THREAD_ID}`);
+			await mount(router, "invoice", "invoice", listPath);
+
+			assert.equal(router.history.location.pathname, listPath);
+		});
 
-	it("replaces rather than pushes, so Back is not a search step", async () => {
-		const router = routerAt(threadHref);
-		const before = router.history.length;
-		await mount(router, "invoice", "invoice");
+		it("replaces rather than pushes, so Back is not a search step", async () => {
+			const router = routerAt(listPath, threadHref);
+			const before = router.history.length;
+			await mount(router, "invoice", "invoice", listPath);
 
-		assert.equal(router.history.length, before);
+			assert.equal(router.history.length, before);
+		});
 	});
-});
 
-describe("mirroring a cleared query", () => {
-	it("keeps the conversation open — dropping the search is not closing it", async () => {
-		const router = routerAt(`${threadHref}?q=invoice`);
-		await mount(router, "", "");
+	describe(`mirroring a cleared query (${listPath})`, () => {
+		it("keeps the conversation open — dropping the search is not closing it", async () => {
+			const router = routerAt(listPath, `${threadHref}?q=invoice`);
+			await mount(router, "", "", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.equal(router.history.location.search.includes("q="), false);
-	});
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.equal(router.history.location.search.includes("q="), false);
+		});
 
-	it("leaves the address alone when there is nothing to write", async () => {
-		const router = routerAt(`${threadHref}?q=invoice`);
-		await mount(router, "invoice", "invoice");
+		it("leaves the address alone when there is nothing to write", async () => {
+			const router = routerAt(listPath, `${threadHref}?q=invoice`);
+			await mount(router, "invoice", "invoice", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.match(router.history.location.search, /q=invoice/);
-	});
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.match(router.history.location.search, /q=invoice/);
+		});
 
-	it("waits for the debounce rather than writing the previous query", async () => {
-		const router = routerAt(threadHref);
-		await mount(router, "invo", "");
+		it("waits for the debounce rather than writing the previous query", async () => {
+			const router = routerAt(listPath, threadHref);
+			await mount(router, "invo", "", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.equal(router.history.location.search.includes("q="), false);
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.equal(router.history.location.search.includes("q="), false);
+		});
 	});
-});
+}
 
 /**
  * The other half of why a typed query survives an opened thread: the field
@@ -185,9 +201,12 @@ describe("mirroring a cleared query", () => {
  * Read off the matches the router resolved for a real address, so the ids under
  * test are the ones path segments produce rather than ids written out here.
  */
-describe("the view key of an open brief thread", () => {
-	const viewKeyAt = async (href: string): Promise<string> => {
-		const router = routerAt(href);
+describe("the view key of an open thread", () => {
+	const viewKeyAt = async (
+		listPath: ListPath,
+		href: string,
+	): Promise<string> => {
+		const router = routerAt(listPath, href);
 		await router.load();
 		return mailViewKey(
 			router.state.matches.map((match: { routeId: string }) => ({
@@ -196,10 +215,15 @@ describe("the view key of an open brief thread", () => {
 		);
 	};
 
-	it("is the brief's own, thread and message segments alike", async () => {
-		const list = await viewKeyAt("/mail/brief");
-		assert.notEqual(list, "", "the brief resolves to a view key at all");
-		assert.equal(await viewKeyAt(`/mail/brief/${THREAD_ID}`), list);
-		assert.equal(await viewKeyAt(threadHref), list);
-	});
+	for (const listPath of LIST_PATHS) {
+		it(`is the list's own, thread and message segments alike (${listPath})`, async () => {
+			const list = await viewKeyAt(listPath, listPath);
+			assert.notEqual(list, "", "the list resolves to a view key at all");
+			assert.equal(await viewKeyAt(listPath, `${listPath}/${THREAD_ID}`), list);
+			assert.equal(
+				await viewKeyAt(listPath, `${listPath}/${THREAD_ID}/${MESSAGE_ID}`),
+				list,
+			);
+		});
+	}
 });