@remit/web-client 0.0.201 → 0.0.203

package/src/lib/search-scope.test.ts

@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
+	type BrowsedList,
 	MAIL_BRIEF_ROUTE_ID,
 	MAIL_FLAGGED_ROUTE_ID,
 	MAIL_MAILBOX_ROUTE_ID,
@@ -15,18 +16,28 @@ import {
 	semanticMailboxScope,
 } from "./search-scope";
 
-const matches = (routeId: string) => [{ routeId: "/mail" }, { routeId }];
+const listFor: Record<string, BrowsedList["list"]> = {
+	[MAIL_BRIEF_ROUTE_ID]: "brief",
+	[MAIL_FLAGGED_ROUTE_ID]: "flagged",
+	[MAIL_OUTBOX_ROUTE_ID]: "outbox",
+	[MAIL_MAILBOX_ROUTE_ID]: "mailbox",
+};
+
+const browsing = (routeId: string): BrowsedList => ({
+	list: listFor[routeId],
+	mailboxId: undefined,
+});
 
 describe("searchScopeForRoute", () => {
 	it("gives the daily brief no scope — it is the global view", () => {
-		assert.deepEqual(searchScopeForRoute(matches(MAIL_BRIEF_ROUTE_ID)), {
+		assert.deepEqual(searchScopeForRoute(browsing(MAIL_BRIEF_ROUTE_ID)), {
 			kind: "global",
 		});
 	});
 
 	it("scopes a mailbox route to its sidebar label", () => {
 		assert.deepEqual(
-			searchScopeForRoute(matches(MAIL_MAILBOX_ROUTE_ID), "Spam"),
+			searchScopeForRoute(browsing(MAIL_MAILBOX_ROUTE_ID), "Spam"),
 			{
 				kind: "scoped",
 				chip: { id: SEARCH_SCOPE_CHIP_ID, label: "in:spam" },
@@ -39,23 +50,23 @@ describe("searchScopeForRoute", () => {
 		// uuid is worse than no chip, but the field must not claim to search
 		// everything either.
 		assert.deepEqual(
-			searchScopeForRoute(matches(MAIL_MAILBOX_ROUTE_ID), null),
+			searchScopeForRoute(browsing(MAIL_MAILBOX_ROUTE_ID), null),
 			{ kind: "pending" },
 		);
 	});
 
 	it("scopes the starred view", () => {
-		const scope = searchScopeForRoute(matches(MAIL_FLAGGED_ROUTE_ID));
+		const scope = searchScopeForRoute(browsing(MAIL_FLAGGED_ROUTE_ID));
 		assert.equal(scope.kind === "scoped" && scope.chip.label, "is:starred");
 	});
 
 	it("scopes the outbox", () => {
-		const scope = searchScopeForRoute(matches(MAIL_OUTBOX_ROUTE_ID));
+		const scope = searchScopeForRoute(browsing(MAIL_OUTBOX_ROUTE_ID));
 		assert.equal(scope.kind === "scoped" && scope.chip.label, "in:outbox");
 	});
 
 	it("prefers the virtual views over a lingering mailbox name", () => {
-		const scope = searchScopeForRoute(matches(MAIL_OUTBOX_ROUTE_ID), "Spam");
+		const scope = searchScopeForRoute(browsing(MAIL_OUTBOX_ROUTE_ID), "Spam");
 		assert.equal(scope.kind === "scoped" && scope.chip.label, "in:outbox");
 	});
 });
@@ -70,12 +81,12 @@ describe("isScopedRoute", () => {
 		MAIL_OUTBOX_ROUTE_ID,
 	]) {
 		it(`${routeId} carries a scope`, () => {
-			assert.equal(isScopedRoute(matches(routeId)), true);
+			assert.equal(isScopedRoute(browsing(routeId)), true);
 		});
 	}
 
 	it("the daily brief carries none", () => {
-		assert.equal(isScopedRoute(matches(MAIL_BRIEF_ROUTE_ID)), false);
+		assert.equal(isScopedRoute(browsing(MAIL_BRIEF_ROUTE_ID)), false);
 	});
 
 	it("agrees with the chip on every route", () => {
@@ -85,9 +96,9 @@ describe("isScopedRoute", () => {
 			MAIL_FLAGGED_ROUTE_ID,
 			MAIL_OUTBOX_ROUTE_ID,
 		]) {
-			const scope = searchScopeForRoute(matches(routeId), "Spam");
+			const scope = searchScopeForRoute(browsing(routeId), "Spam");
 			assert.equal(
-				isScopedRoute(matches(routeId)),
+				isScopedRoute(browsing(routeId)),
 				scope.kind === "scoped",
 				`${routeId} disagrees about whether it has a scope`,
 			);
@@ -109,14 +120,14 @@ describe("scopeLabelForMailboxName", () => {
 // respects it. The semantic engine used to run unscoped inside a mailbox under
 // an "Everywhere" heading, contradicting the `in:` chip the same bar showed.
 describe("semanticMailboxScope — a chip binds every engine on the route", () => {
-	const mailbox = (mailboxId: string) => [
-		{ routeId: "/mail" },
-		{ routeId: MAIL_MAILBOX_ROUTE_ID, params: { mailboxId } },
-	];
+	const mailbox = (mailboxId: string): BrowsedList => ({
+		list: "mailbox",
+		mailboxId,
+	});
 
 	it("pins a mailbox route to its own mailbox", () => {
 		assert.equal(
-			semanticMailboxScope({ matches: mailbox("mbx-spam") }),
+			semanticMailboxScope({ browsed: mailbox("mbx-spam") }),
 			"mbx-spam",
 		);
 	});
@@ -124,7 +135,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 	it("a mailbox route ignores a caller asking for somewhere else", () => {
 		assert.equal(
 			semanticMailboxScope({
-				matches: mailbox("mbx-spam"),
+				browsed: mailbox("mbx-spam"),
 				callerMailboxId: "mbx-archive",
 			}),
 			"mbx-spam",
@@ -134,7 +145,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 	it("a mailbox route ignores a typed in: term", () => {
 		assert.equal(
 			semanticMailboxScope({
-				matches: mailbox("mbx-spam"),
+				browsed: mailbox("mbx-spam"),
 				inTokenMailboxId: "mbx-archive",
 			}),
 			"mbx-spam",
@@ -142,7 +153,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 	});
 
 	it("a mailbox route never widens to global", () => {
-		const scope = semanticMailboxScope({ matches: mailbox("mbx-spam") });
+		const scope = semanticMailboxScope({ browsed: mailbox("mbx-spam") });
 		assert.notEqual(scope, undefined, "a scoped route must carry a scope");
 	});
 
@@ -153,7 +164,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 		it(`${routeId} never honours a typed in: term`, () => {
 			assert.equal(
 				semanticMailboxScope({
-					matches: matches(routeId),
+					browsed: browsing(routeId),
 					inTokenMailboxId: "mbx-archive",
 				}),
 				undefined,
@@ -163,7 +174,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 
 	it("the daily brief is global — no route scope, no chip", () => {
 		assert.equal(
-			semanticMailboxScope({ matches: matches(MAIL_BRIEF_ROUTE_ID) }),
+			semanticMailboxScope({ browsed: browsing(MAIL_BRIEF_ROUTE_ID) }),
 			undefined,
 		);
 	});
@@ -171,7 +182,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 	it("the daily brief is the one route a typed in: narrows", () => {
 		assert.equal(
 			semanticMailboxScope({
-				matches: matches(MAIL_BRIEF_ROUTE_ID),
+				browsed: browsing(MAIL_BRIEF_ROUTE_ID),
 				inTokenMailboxId: "mbx-archive",
 			}),
 			"mbx-archive",
@@ -183,14 +194,14 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 		// time: on a scoped route the resolved scope is either the route's own
 		// mailbox, or nothing that came from the typed query.
 		const scoped = [
-			{ matches: mailbox("mbx-spam"), expected: "mbx-spam" },
-			{ matches: matches(MAIL_FLAGGED_ROUTE_ID), expected: undefined },
-			{ matches: matches(MAIL_OUTBOX_ROUTE_ID), expected: undefined },
+			{ browsed: mailbox("mbx-spam"), expected: "mbx-spam" },
+			{ browsed: browsing(MAIL_FLAGGED_ROUTE_ID), expected: undefined },
+			{ browsed: browsing(MAIL_OUTBOX_ROUTE_ID), expected: undefined },
 		];
-		for (const { matches: m, expected } of scoped) {
+		for (const { browsed: m, expected } of scoped) {
 			assert.equal(isScopedRoute(m), true);
 			assert.equal(
-				semanticMailboxScope({ matches: m, inTokenMailboxId: "mbx-elsewhere" }),
+				semanticMailboxScope({ browsed: m, inTokenMailboxId: "mbx-elsewhere" }),
 				expected,
 			);
 		}
@@ -200,7 +211,7 @@ describe("semanticMailboxScope — a chip binds every engine on the route", () =
 describe("resultsScopeForRoute", () => {
 	it("passes the global search through as global", () => {
 		assert.deepEqual(
-			resultsScopeForRoute(matches(MAIL_BRIEF_ROUTE_ID), { kind: "global" }),
+			resultsScopeForRoute(browsing(MAIL_BRIEF_ROUTE_ID), { kind: "global" }),
 			{
 				kind: "global",
 			},
@@ -209,7 +220,9 @@ describe("resultsScopeForRoute", () => {
 
 	it("treats a mailbox whose name has not loaded as a folder, not global", () => {
 		assert.deepEqual(
-			resultsScopeForRoute(matches(MAIL_MAILBOX_ROUTE_ID), { kind: "pending" }),
+			resultsScopeForRoute(browsing(MAIL_MAILBOX_ROUTE_ID), {
+				kind: "pending",
+			}),
 			{
 				kind: "folder",
 			},
@@ -219,7 +232,7 @@ describe("resultsScopeForRoute", () => {
 	it("carries the mailbox's role so a Spam search shows its rows", () => {
 		assert.deepEqual(
 			resultsScopeForRoute(
-				matches(MAIL_MAILBOX_ROUTE_ID),
+				browsing(MAIL_MAILBOX_ROUTE_ID),
 				{
 					kind: "scoped",
 					chip: { id: SEARCH_SCOPE_CHIP_ID, label: "in:spam" },
@@ -232,7 +245,7 @@ describe("resultsScopeForRoute", () => {
 
 	it("calls starred a collection, so its spam is not dropped", () => {
 		assert.deepEqual(
-			resultsScopeForRoute(matches(MAIL_FLAGGED_ROUTE_ID), {
+			resultsScopeForRoute(browsing(MAIL_FLAGGED_ROUTE_ID), {
 				kind: "scoped",
 				chip: { id: SEARCH_SCOPE_CHIP_ID, label: "is:starred" },
 			}),
@@ -242,7 +255,7 @@ describe("resultsScopeForRoute", () => {
 
 	it("keeps the outbox a folder — it is one queue, and never holds spam", () => {
 		assert.deepEqual(
-			resultsScopeForRoute(matches(MAIL_OUTBOX_ROUTE_ID), {
+			resultsScopeForRoute(browsing(MAIL_OUTBOX_ROUTE_ID), {
 				kind: "scoped",
 				chip: { id: SEARCH_SCOPE_CHIP_ID, label: "in:outbox" },
 			}),

package/src/lib/search-scope.ts

@@ -22,7 +22,7 @@
  * Pure functions only. `useSearchScope` binds these to the router.
  */
 import type { FolderRole, SearchScope as ResultsScope } from "@remit/ui";
-import { type MailRouteMatch, mailListRoute } from "./mail-route";
+import type { BrowsedList } from "./mail-route";
 
 /**
  * Chip id of the scope chip. The top bar owns exactly one, so a fixed id is
@@ -64,19 +64,15 @@ export function scopeLabelForMailboxName(name: string): string {
  * These carry a scope; the daily brief (and any route not recognized here) does
  * not.
  */
-export function isScopedRoute(matches: readonly MailRouteMatch[]): boolean {
-	const route = mailListRoute(matches);
-	return route !== undefined && route.list !== "brief";
+export function isScopedRoute(browsed: BrowsedList): boolean {
+	return browsed.list !== undefined && browsed.list !== "brief";
 }
 
 /**
  * The mailbox id carried by a mailbox route, or `undefined` on any other route.
  */
-export function routeMailboxId(
-	matches: readonly MailRouteMatch[],
-): string | undefined {
-	const route = mailListRoute(matches);
-	return route?.list === "mailbox" ? route.mailboxId : undefined;
+export function routeMailboxId(browsed: BrowsedList): string | undefined {
+	return browsed.list === "mailbox" ? browsed.mailboxId : undefined;
 }
 
 /**
@@ -98,13 +94,13 @@ export function routeMailboxId(
  *    it, which is the one place `useSearchTokenContext` resolves that term.
  */
 export function semanticMailboxScope(args: {
-	matches: readonly MailRouteMatch[];
+	browsed: BrowsedList;
 	callerMailboxId?: string;
 	inTokenMailboxId?: string;
 }): string | undefined {
-	const fromRoute = routeMailboxId(args.matches);
+	const fromRoute = routeMailboxId(args.browsed);
 	if (fromRoute) return fromRoute;
-	if (isScopedRoute(args.matches)) return args.callerMailboxId;
+	if (isScopedRoute(args.browsed)) return args.callerMailboxId;
 	return args.callerMailboxId ?? args.inTokenMailboxId;
 }
 
@@ -117,23 +113,22 @@ export function semanticMailboxScope(args: {
  * either, because the list underneath is already narrowed.
  */
 export function searchScopeForRoute(
-	matches: readonly MailRouteMatch[],
+	browsed: BrowsedList,
 	mailboxName?: string | null,
 ): SearchScopeState {
-	const route = mailListRoute(matches);
-	if (route?.list === "flagged") {
+	if (browsed.list === "flagged") {
 		return {
 			kind: "scoped",
 			chip: { id: SEARCH_SCOPE_CHIP_ID, label: "is:starred" },
 		};
 	}
-	if (route?.list === "outbox") {
+	if (browsed.list === "outbox") {
 		return {
 			kind: "scoped",
 			chip: { id: SEARCH_SCOPE_CHIP_ID, label: "in:outbox" },
 		};
 	}
-	if (route?.list === "mailbox") {
+	if (browsed.list === "mailbox") {
 		if (!mailboxName) return { kind: "pending" };
 		return {
 			kind: "scoped",
@@ -164,11 +159,11 @@ export function searchScopeForRoute(
  * folder nobody appointed carries no role.
  */
 export function resultsScopeForRoute(
-	matches: readonly MailRouteMatch[],
+	browsed: BrowsedList,
 	state: SearchScopeState,
 	role?: FolderRole,
 ): ResultsScope {
 	if (state.kind === "global") return { kind: "global" };
-	if (mailListRoute(matches)?.list === "flagged") return { kind: "collection" };
+	if (browsed.list === "flagged") return { kind: "collection" };
 	return { kind: "folder", ...(role ? { role } : {}) };
 }

package/src/lib/search-view.test.ts

@@ -165,7 +165,7 @@ describe("shouldMirrorQuery", () => {
 interface Shell {
 	/** The view the address names, which is what a render reads. */
 	viewKey: string;
-	/** The view the text in the field was typed in (`hooks/useSearchField.ts`). */
+	/** The view the text in the field was typed in (`routing/search-field.ts`). */
 	typedInView: string;
 	/** The path of the list whose mirror is running. */
 	listPath: string;

package/src/lib/search-view.ts

@@ -13,7 +13,7 @@
  * "Every view change" is the move the reader made, not every render that
  * notices one. Text typed once the address already names the destination was
  * typed in the destination, so it is that view's query and survives
- * (`hooks/useSearchField.ts`).
+ * (`routing/search-field.ts`).
  */
 import { locationIsOnList } from "./mail-route";
 
@@ -82,7 +82,7 @@ export interface MirrorDecision {
  * the mirror fight a query arriving by URL — that arrives mid-debounce, where
  * the first rule already refuses, and by the time the debounce settles the
  * field has been re-seeded from the address it landed on
- * (`hooks/useSearchField.ts`).
+ * (`routing/search-field.ts`).
  */
 export function shouldMirrorQuery({
 	searchInput,

package/src/routes/mail/$mailboxId.tsx

@@ -11,9 +11,8 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { MailShell } from "@/components/layout/MailShell";
 import { MailboxPane } from "@/components/mail/MailboxPane";
-import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { mailboxSearchSchema } from "@/lib/mail-search";
-import { useOpenThreadPath } from "@/routing";
+import { useOpenThreadPath, useSearchMirror } from "@/routing";
 
 function MailboxLayout() {
 	const { mailboxId } = Route.useParams();

package/src/routes/mail/brief.tsx

@@ -15,9 +15,8 @@ import {
 import { MailShell } from "@/components/layout/MailShell";
 import { BriefPane } from "@/components/mail/BriefPane";
 import { ErrorState } from "@/components/ui/ErrorState";
-import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { briefSearchSchema } from "@/lib/mail-search";
-import { useOpenThreadPath } from "@/routing";
+import { useOpenThreadPath, useSearchMirror } from "@/routing";
 
 const BriefError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">

package/src/routes/mail/flagged.tsx

@@ -14,9 +14,8 @@ import {
 import { MailShell } from "@/components/layout/MailShell";
 import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { ErrorState } from "@/components/ui/ErrorState";
-import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { flaggedSearchSchema } from "@/lib/mail-search";
-import { useOpenThreadPath } from "@/routing";
+import { useOpenThreadPath, useSearchMirror } from "@/routing";
 
 const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">

package/src/routes/mail/outbox.tsx

@@ -8,9 +8,8 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { MailShell } from "@/components/layout/MailShell";
 import { OutboxPane } from "@/components/mail/OutboxPane";
-import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { outboxSearchSchema } from "@/lib/mail-search";
-import { useOutboxDraftId } from "@/routing";
+import { useOutboxDraftId, useSearchMirror } from "@/routing";
 
 function OutboxLayout() {
 	const outboxMessageId = useOutboxDraftId();

package/src/routes/mail.tsx

@@ -23,14 +23,18 @@ import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
 import { useRailPanels } from "@/hooks/useRailPanels";
 import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
-import { useSearchField } from "@/hooks/useSearchField";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
 import { MailContext } from "@/lib/mail-context";
 import { MailFreshnessProvider } from "@/lib/mail-freshness";
 import { mailListRoute } from "@/lib/mail-route";
 import { buildAccountNameIndex } from "@/lib/search-token-index";
-import { wizardEntryValue, wizardStepValue } from "@/lib/wizard-history";
-import { useIsComposing, useOpenCompose } from "@/routing";
+import {
+	useIsComposing,
+	useOpenCompose,
+	useSearchField,
+	wizardEntryValue,
+	wizardStepValue,
+} from "@/routing";
 import "@/lib/client";
 
 // `MailContext` / `useMailContext` live in `@/lib/mail-context` so the provider

package/src/routing/browsed-list.ts

@@ -1,17 +1,24 @@
-import { useParams, useRouterState } from "@tanstack/react-router";
-import { type MailListRoute, mailListRoute } from "@/lib/mail-route";
+import {
+	useLocation,
+	useNavigate,
+	useParams,
+	useRouterState,
+} from "@tanstack/react-router";
+import { useCallback } from "react";
+import {
+	type BrowsedList,
+	locationOpensDetail,
+	mailListRoute,
+} from "@/lib/mail-route";
+import { useRetainOpenPanels } from "./fragment";
 
-export interface BrowsedList {
-	list: MailListRoute["list"] | undefined;
-	mailboxId: string | undefined;
-}
+export type { BrowsedList };
 
 /**
  * The list the address is browsing, as the two values a navigation to it needs.
  *
- * Both are primitives, so a caller holding them in a dependency array settles.
- * Every surface a list can open — compose, a reply — reads the same answer, so
- * the four lists cannot disagree about which one is underneath.
+ * Every surface a list can open — compose, a reply, a conversation — reads the
+ * same answer, so the four lists cannot disagree about which one is underneath.
  */
 export function useBrowsedList(): BrowsedList {
 	const list = useRouterState({
@@ -20,3 +27,47 @@ export function useBrowsedList(): BrowsedList {
 	const mailbox = useParams({ from: "/mail/$mailboxId", shouldThrow: false });
 	return { list, mailboxId: mailbox?.mailboxId };
 }
+
+/**
+ * Whether the address names something the list has open below it — a
+ * conversation, a draft, the compose surface.
+ *
+ * Answers off the pathname, which is what says where the reader is going while
+ * the destination mounts; see `locationOpensDetail`.
+ */
+export function useOpensDetail(): boolean {
+	const { pathname } = useLocation();
+	return locationOpensDetail(pathname);
+}
+
+/**
+ * Back up to the list, leaving whatever it had open.
+ *
+ * A push, like the open was: leaving is a move the reader makes, and Back is how
+ * they undo it. Every branch lands somewhere real — the brief is the fallback,
+ * because a list this cannot name still has to put them on one rather than
+ * strand them inside a surface they just dismissed.
+ */
+export function useNavigateToBrowsedList(): () => void {
+	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
+	const { list, mailboxId } = useBrowsedList();
+
+	return useCallback(() => {
+		const search = (prev: Record<string, unknown>) => prev;
+		const hash = retainPanels;
+		if (list === "flagged") {
+			navigate({ to: "/mail/flagged", search, hash });
+			return;
+		}
+		if (list === "outbox") {
+			navigate({ to: "/mail/outbox", search, hash });
+			return;
+		}
+		if (list === "mailbox" && mailboxId) {
+			navigate({ to: "/mail/$mailboxId", params: { mailboxId }, search, hash });
+			return;
+		}
+		navigate({ to: "/mail/brief", search, hash });
+	}, [navigate, retainPanels, list, mailboxId]);
+}

package/src/routing/compose.ts

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { useCallback } from "react";
-import { useBrowsedList } from "./browsed-list";
+import { useBrowsedList, useNavigateToBrowsedList } from "./browsed-list";
 import { useRetainOpenPanels } from "./fragment";
 
 /**
@@ -176,30 +176,5 @@ export function useAdoptComposeDraft(): (outboxMessageId: string) => void {
  * return and strand them inside a surface they just dismissed.
  */
 export function useCloseCompose(): () => void {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
-	const { list, mailboxId } = useBrowsedList();
-
-	return useCallback(() => {
-		const search = (prev: Record<string, unknown>) => prev;
-		const hash = retainPanels;
-		if (list === "flagged") {
-			navigate({ to: "/mail/flagged", search, hash });
-			return;
-		}
-		if (list === "outbox") {
-			navigate({ to: "/mail/outbox", search, hash });
-			return;
-		}
-		if (list === "mailbox" && mailboxId) {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search,
-				hash,
-			});
-			return;
-		}
-		navigate({ to: "/mail/brief", search, hash });
-	}, [navigate, retainPanels, list, mailboxId]);
+	return useNavigateToBrowsedList();
 }

package/src/routing/index.ts

@@ -1,3 +1,8 @@
+export {
+	type BrowsedList,
+	useBrowsedList,
+	useOpensDetail,
+} from "./browsed-list";
 export {
 	useAdoptComposeDraft,
 	useCloseCompose,
@@ -20,12 +25,20 @@ export {
 	useSetOpenPanels,
 } from "./fragment";
 export { NavLink, type NavLinkProps } from "./nav-link";
+export { useSelectedNavId } from "./nav-selection";
 export {
+	type OpenThreadOptions,
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	useCloseThread,
+	useOpenThread,
 	useOpenThreadPath,
 } from "./open-thread";
-export { useOutboxDraftId } from "./outbox-draft";
+export {
+	useCloseOutboxDraft,
+	useOpenOutboxDraft,
+	useOutboxDraftId,
+} from "./outbox-draft";
 export {
 	type ReplyAddress,
 	type ReplyMode,
@@ -39,3 +52,29 @@ export {
 	useOpenReply,
 	useReplySurface,
 } from "./reply";
+export { type SearchField, useSearchField } from "./search-field";
+export { type SearchMirrorTarget, useSearchMirror } from "./search-mirror";
+export {
+	useScopeSearchToMailbox,
+	useSearchEverything,
+} from "./search-navigation";
+export {
+	type AppSection,
+	useConfigureAccountSmtp,
+	useGoToSection,
+} from "./sections";
+export {
+	ownedHistoryEntries,
+	type SelectionWizardControl,
+	useOpenWizard,
+	useSelectionWizard,
+	useWizardEntryValue,
+	useWizardStep,
+	useWizardStepValue,
+	type WizardEntry,
+	type WizardStepNavigation,
+	wizardEntryFromParam,
+	wizardEntryValue,
+	wizardStepFromParam,
+	wizardStepValue,
+} from "./wizard-history";

package/src/routing/nav-selection.ts

@@ -0,0 +1,24 @@
+import { useLocation, useParams } from "@tanstack/react-router";
+import { locationIsOnList } from "@/lib/mail-route";
+
+/**
+ * The nav entry the address selects, or `""` where none does.
+ *
+ *   - `/settings/*` → "settings"
+ *   - `/mail/outbox`, `/mail/flagged`, `/mail/brief` → that list
+ *   - `/mail/$mailboxId` → the mailbox id, which is what the sidebar keys on
+ *
+ * Read off the pathname rather than the matches: the router commits the new
+ * location before it swaps them, so the entry the reader just tapped highlights
+ * on the tap instead of when its list finishes loading.
+ */
+export function useSelectedNavId(): string {
+	const { pathname } = useLocation();
+	const mailbox = useParams({ from: "/mail/$mailboxId", shouldThrow: false });
+
+	if (locationIsOnList(pathname, "/settings")) return "settings";
+	if (locationIsOnList(pathname, "/mail/outbox")) return "outbox";
+	if (locationIsOnList(pathname, "/mail/flagged")) return "flagged";
+	if (locationIsOnList(pathname, "/mail/brief")) return "brief";
+	return mailbox?.mailboxId ?? "";
+}