@remit/web-client 0.0.202 → 0.0.204

package/src/components/mail/MailboxPane.tsx

@@ -33,7 +33,6 @@ import {
 	type SearchResult,
 } from "@remit/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -127,11 +126,13 @@ import {
 	type OpenThreadTarget,
 	type ReplyMode,
 	replyToThread,
+	useCloseThread,
+	useGoToSection,
 	useIsComposing,
 	useIsReplying,
 	useOpenCompose,
 	useOpenReply,
-	useRetainOpenPanels,
+	useOpenThread,
 } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 
@@ -270,8 +271,9 @@ function MailboxPaneProvider({
 	thread,
 	children,
 }: MailboxPaneProps) {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
+	const closeThread = useCloseThread();
+	const goToSection = useGoToSection();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
 	const telemetry = useTelemetry();
@@ -470,26 +472,6 @@ function MailboxPaneProvider({
 	// Esc unwinds one step at a time: an active selection first (handled by the
 	// triage layer), then the open thread — which is a navigation up to the list,
 	// so nothing is left mounted below it.
-	const closeThread = useCallback(() => {
-		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
-	}, [mailboxId, navigate, retainPanels]);
-
-	const handleOpenThread = useCallback(
-		(target: OpenThreadTarget) => {
-			navigate({
-				to: "/mail/$mailboxId/$threadId/$messageId",
-				params: { mailboxId, ...target },
-				search: (prev) => prev,
-				hash: retainPanels,
-			});
-		},
-		[mailboxId, navigate, retainPanels],
-	);
 
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {
@@ -716,13 +698,6 @@ function MailboxPaneProvider({
 		intelligenceRef.current?.open();
 	}, []);
 
-	const goToRoute = useCallback(
-		(to: "/mail/brief" | "/mail/flagged" | "/settings") => {
-			navigate({ to });
-		},
-		[navigate],
-	);
-
 	const mailboxType = isDraftsMailbox
 		? "drafts"
 		: archiveMailboxId === mailboxId
@@ -764,11 +739,11 @@ function MailboxPaneProvider({
 				? () => intelligenceRef.current?.toggle()
 				: undefined,
 			compose: openCompose,
-			goBrief: () => goToRoute("/mail/brief"),
-			goInbox: () => goToRoute("/mail/brief"),
-			goSent: () => goToRoute("/mail/brief"),
-			goFlagged: () => goToRoute("/mail/flagged"),
-			goSettings: () => goToRoute("/settings"),
+			goBrief: () => goToSection("brief"),
+			goInbox: () => goToSection("brief"),
+			goSent: () => goToSection("brief"),
+			goFlagged: () => goToSection("flagged"),
+			goSettings: () => goToSection("settings"),
 		},
 	});
 
@@ -788,7 +763,7 @@ function MailboxPaneProvider({
 		selectedMessageId,
 		selectedThread,
 		conversation,
-		onOpenThread: handleOpenThread,
+		onOpenThread: openThread,
 		threads,
 		isLoading,
 		isError,
@@ -885,8 +860,7 @@ function MailboxList() {
 	const { searchQuery, searchInput, accounts, resultFolderIndex } =
 		useMailContext();
 	const tier = useLayoutTier();
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
 
 	const listTitle = mailboxName ?? "Inbox";
 	const preset = useMemo(() => inboxFilterConfig(), []);
@@ -970,26 +944,15 @@ function MailboxList() {
 				result.threadId ??
 				threads.find((thread) => thread.messageId === result.id)?.threadId;
 			if (!threadId) return;
-			navigate({
-				to: "/mail/$mailboxId/$threadId/$messageId",
-				// Both sections are scoped to this mailbox, so a result's own
-				// mailbox is normally this one; keep reading it off the result so a
-				// row can never open under a mailbox it does not belong to.
-				params: {
-					mailboxId: result.mailboxId ?? mailboxId,
-					threadId,
-					messageId: result.id,
-				},
-				// 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 }),
-				hash: retainPanels,
-			});
+			// Both sections are scoped to this mailbox, so a result's own mailbox is
+			// normally this one; keep reading it off the result so a row can never
+			// open under a mailbox it does not belong to.
+			openThread(
+				{ threadId, messageId: result.id },
+				{ mailboxId: result.mailboxId ?? mailboxId, query: searchInput },
+			);
 		},
-		[mailboxId, navigate, retainPanels, searchInput, threads],
+		[mailboxId, openThread, searchInput, threads],
 	);
 
 	// Drafts keep their own dedicated view (and header); they don't carry the
@@ -997,7 +960,6 @@ function MailboxList() {
 	if (isDraftsMailbox && mailboxAccountId) {
 		return (
 			<DraftsView
-				mailboxId={mailboxId}
 				accountId={mailboxAccountId}
 				selectedMessageId={selectedMessageId}
 				imapThreads={threads}

package/src/components/mail/MessageActionMenu.tsx

@@ -3,7 +3,6 @@ import {
 	threadDetailOperationsListThreadMessagesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import {
 	BadgeCheck,
 	Check,
@@ -35,7 +34,7 @@ import {
 	type ThreadMutationContext,
 	threadListCacheKeys,
 } from "@/lib/thread-list-cache";
-import { useOpenThreadPath, useRetainOpenPanels } from "@/routing";
+import { useCloseThread, useOpenThreadPath } from "@/routing";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface MessageActionMenuProps {
@@ -85,8 +84,7 @@ export const MessageActionMenu = ({
 	onToggleRaw,
 }: MessageActionMenuProps) => {
 	const queryClient = useQueryClient();
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const closeThread = useCloseThread();
 	const { pushError } = useErrorBanners();
 	const selectedMessageId = useOpenThreadPath()?.messageId;
 
@@ -173,14 +171,9 @@ export const MessageActionMenu = ({
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev) => prev,
-				hash: retainPanels,
-			});
+			closeThread();
 		},
-		[selectedMessageId, mailboxId, navigate, retainPanels],
+		[selectedMessageId, closeThread],
 	);
 
 	const { deleteMessages, isPending: isDeleting } = useDeleteMessages({

package/src/components/mail/MessageList.tsx

@@ -13,7 +13,7 @@ import {
 	useSelection,
 	type Verb,
 } from "@remit/ui";
-import { useBlocker, useNavigate } from "@tanstack/react-router";
+import { useBlocker } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Search } from "lucide-react";
 import type { RefObject } from "react";
@@ -52,9 +52,12 @@ import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { listVerbRequest } from "@/lib/list-verb-request";
 import { resolveSelectionAccountScope } from "@/lib/selection-account-scope";
 import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
-import { useSelectionWizard, useWizardStepValue } from "@/lib/wizard-history";
 import type { WizardSelectionMessage } from "@/lib/wizard-selection";
-import { useRetainOpenPanels } from "@/routing";
+import {
+	useOpenThread,
+	useSelectionWizard,
+	useWizardStepValue,
+} from "@/routing";
 import { DeleteConfirmDialog } from "./DeleteConfirmDialog";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import {
@@ -251,8 +254,7 @@ export const MessageList = ({
 	hideHeader = false,
 }: MessageListProps) => {
 	const parentRef = useRef<HTMLDivElement>(null);
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
 	const isDesktop = useIsDesktop();
 	const wizard = useSelectionWizard();
 	const { verb: wizardVerb, start: startWizard, startFromSearch } = wizard;
@@ -655,15 +657,9 @@ export const MessageList = ({
 				(thread) => thread.messageId === messageId,
 			)?.threadId;
 			if (!threadId) return;
-			navigate({
-				to: "/mail/$mailboxId/$threadId/$messageId",
-				params: { mailboxId, threadId, messageId },
-				search: (prev) => prev,
-				hash: retainPanels,
-				replace: options?.replace,
-			});
+			openThread({ threadId, messageId }, { replace: options?.replace });
 		},
-		[navigate, retainPanels, mailboxId, threads],
+		[openThread, threads],
 	);
 
 	// Enter: open the focused row in the reading pane. This is the focus→open

package/src/components/mail/OutboxPane.tsx

@@ -30,7 +30,6 @@ import {
 	useRovingFocus,
 } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import {
 	AlertCircle,
 	AlertTriangle,
@@ -62,7 +61,11 @@ import {
 import { isOutboxListRow, showsLastError } from "@/lib/outbox-status";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { useEditDraft, useRetainOpenPanels } from "@/routing";
+import {
+	useCloseOutboxDraft,
+	useEditDraft,
+	useOpenOutboxDraft,
+} from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Helpers (shared between List, Reading, Phone sub-views)             */
@@ -177,8 +180,8 @@ function OutboxPaneProvider({
 	outboxMessageId: selectedMessageId,
 	children,
 }: OutboxPaneProps) {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openDraft = useOpenOutboxDraft();
+	const closeDraft = useCloseOutboxDraft();
 
 	const { data: outboxResponse, isLoading } = useQuery(
 		outboxOperationsListOutboxMessagesOptions(),
@@ -218,26 +221,6 @@ function OutboxPaneProvider({
 		[messages, selectedMessageId],
 	);
 
-	const handleOpenMessage = useCallback(
-		(outboxMessageId: string) => {
-			navigate({
-				to: "/mail/outbox/draft/$outboxMessageId",
-				params: { outboxMessageId },
-				search: (prev) => prev,
-				hash: retainPanels,
-			});
-		},
-		[navigate, retainPanels],
-	);
-
-	const handleCloseMessage = useCallback(() => {
-		navigate({
-			to: "/mail/outbox",
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
-	}, [navigate, retainPanels]);
-
 	const ctx: OutboxPaneContextValue = {
 		messages,
 		hasQuery,
@@ -245,8 +228,8 @@ function OutboxPaneProvider({
 		isLoading,
 		selectedMessageId,
 		selectedMessage,
-		onOpenMessage: handleOpenMessage,
-		onCloseMessage: handleCloseMessage,
+		onOpenMessage: openDraft,
+		onCloseMessage: closeDraft,
 	};
 
 	return (

package/src/components/mail/SelectionWizardHost.tsx

@@ -70,8 +70,8 @@ import {
 } from "@/lib/organize/rule-model";
 import { searchRuleAccountId } from "@/lib/organize/search-to-rule";
 import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-import { useWizardEntryValue, useWizardStep } from "@/lib/wizard-history";
 import type { WizardSelectionMessage } from "@/lib/wizard-selection";
+import { useWizardEntryValue, useWizardStep } from "@/routing";
 import { organizeRunState } from "./organize-run-state";
 import {
 	retryIntent,

package/src/components/mail/SwipeableMessageRow.tsx

@@ -6,11 +6,10 @@ import {
 	type SwipePeek,
 	type ThreadRowData,
 } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
-import { useRetainOpenPanels } from "@/routing";
+import { useOpenThread } from "@/routing";
 import { MessageListItem } from "./MessageListItem";
 import { useModifierSelect } from "./useModifierSelect";
 
@@ -74,8 +73,7 @@ export const SwipeableMessageRow = ({
 	density,
 }: SwipeableMessageRowProps) => {
 	const [peek, setPeek] = useState<SwipePeek>("none");
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
 
 	const handleAct = useCallback(
 		(side: "leading" | "trailing") => {
@@ -99,17 +97,8 @@ export const SwipeableMessageRow = ({
 	}, [onToggleCheck, thread.messageId]);
 
 	const handleOpen = useCallback(() => {
-		navigate({
-			to: "/mail/$mailboxId/$threadId/$messageId",
-			params: {
-				mailboxId,
-				threadId: thread.threadId,
-				messageId: thread.messageId,
-			},
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
-	}, [navigate, retainPanels, mailboxId, thread.threadId, thread.messageId]);
+		openThread({ threadId: thread.threadId, messageId: thread.messageId });
+	}, [openThread, thread.threadId, thread.messageId]);
 
 	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
 

package/src/hooks/useCurrentMailboxName.ts

@@ -1,10 +1,10 @@
 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 { useLocation, useParams } from "@tanstack/react-router";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
+import { useBrowsedList } from "@/routing";
 
 interface UseCurrentMailboxNameOptions {
 	accounts: RemitImapAccountResponse[];
@@ -27,9 +27,7 @@ interface UseCurrentMailboxNameOptions {
 export const useCurrentMailboxName = ({
 	accounts,
 }: UseCurrentMailboxNameOptions): string | null => {
-	const params = useParams({ strict: false });
-	const location = useLocation();
-	const mailboxId = (params as { mailboxId?: string }).mailboxId;
+	const { list, mailboxId } = useBrowsedList();
 	const { t } = useTranslation("mail", { useSuspense: false });
 	const translator = useCallback(
 		(key: string, fallback: string) => t(key, { defaultValue: fallback }),
@@ -45,7 +43,7 @@ export const useCurrentMailboxName = ({
 		})),
 	});
 
-	if (location.pathname.startsWith("/mail/outbox")) return "Outbox";
+	if (list === "outbox") return "Outbox";
 	if (!mailboxId) return null;
 
 	for (let i = 0; i < accounts.length; i++) {
@@ -74,8 +72,7 @@ export const useCurrentMailboxName = ({
 export const useCurrentMailboxUnseenCount = ({
 	accounts,
 }: UseCurrentMailboxNameOptions): number | null => {
-	const params = useParams({ strict: false });
-	const mailboxId = (params as { mailboxId?: string }).mailboxId;
+	const { mailboxId } = useBrowsedList();
 
 	const queries = useQueries({
 		queries: accounts.map((account) => ({
@@ -107,8 +104,7 @@ export const useCurrentMailboxUnseenCount = ({
 export const useCurrentMailboxMessageCount = ({
 	accounts,
 }: UseCurrentMailboxNameOptions): number => {
-	const params = useParams({ strict: false });
-	const mailboxId = (params as { mailboxId?: string }).mailboxId;
+	const { mailboxId } = useBrowsedList();
 
 	const queries = useQueries({
 		queries: accounts.map((account) => ({

package/src/hooks/useSearchScope.ts

@@ -1,5 +1,4 @@
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { useCallback } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import {
@@ -7,6 +6,7 @@ import {
 	type SearchScopeState,
 	searchScopeForRoute,
 } from "@/lib/search-scope";
+import { useBrowsedList, useSearchEverything } from "@/routing";
 import { useCurrentMailboxName } from "./useCurrentMailboxName";
 
 /**
@@ -22,14 +22,11 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 	scope: SearchScopeState;
 	clearScope: (chipId: string) => void;
 } {
-	const navigate = useNavigate();
+	const searchEverything = useSearchEverything();
 	const { searchInput } = useMailContext();
 	const mailboxName = useCurrentMailboxName({ accounts });
-	// Select the matches, not the scope: a select closing over `mailboxName`
-	// only re-runs on router state changes, so the chip would keep reading the
-	// previous folder until the next navigation.
-	const matches = useRouterState({ select: (s) => s.matches });
-	const scope = searchScopeForRoute(matches, mailboxName);
+	const browsed = useBrowsedList();
+	const scope = searchScopeForRoute(browsed, mailboxName);
 
 	// Takes the chip id the field removed rather than assuming which chip that
 	// was. The bar owns one chip today; keying on the id means a second one
@@ -37,12 +34,9 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 	const clearScope = useCallback(
 		(chipId: string) => {
 			if (chipId !== SEARCH_SCOPE_CHIP_ID) return;
-			navigate({
-				to: "/mail/brief",
-				search: { q: searchInput || undefined },
-			});
+			searchEverything(searchInput);
 		},
-		[navigate, searchInput],
+		[searchEverything, searchInput],
 	);
 
 	return { scope, clearScope };

package/src/hooks/useSearchTokenContext.ts

@@ -1,7 +1,7 @@
-import { useRouterState } from "@tanstack/react-router";
 import { useMailContext } from "@/lib/mail-context";
 import { isScopedRoute } from "@/lib/search-scope";
 import type { SearchTokenContext } from "@/lib/search-tokens";
+import { useBrowsedList } from "@/routing";
 
 /**
  * The one context every search engine parses the query through.
@@ -20,7 +20,8 @@ import type { SearchTokenContext } from "@/lib/search-tokens";
  */
 export function useSearchTokenContext(): SearchTokenContext {
 	const { mailboxNameIndex, accountNameIndex } = useMailContext();
-	const scoped = useRouterState({ select: (s) => isScopedRoute(s.matches) });
+	const browsed = useBrowsedList();
+	const scoped = isScopedRoute(browsed);
 	return {
 		...(scoped ? {} : { mailboxesByName: mailboxNameIndex }),
 		accountsByName: accountNameIndex,

package/src/hooks/useSemanticSearch.ts

@@ -2,11 +2,11 @@ import { semanticSearchOperationsSemanticSearchOptions } from "@remit/api-http-c
 import type { RemitImapSemanticSearchResult } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
 import { useQuery } from "@tanstack/react-query";
-import { useRouterState } from "@tanstack/react-router";
 import { useMailContext } from "@/lib/mail-context";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { semanticMailboxScope } from "@/lib/search-scope";
 import { parseSearchTokens, type SearchToken } from "@/lib/search-tokens";
+import { useBrowsedList } from "@/routing";
 import { useSearchTokenContext } from "./useSearchTokenContext";
 
 /** Cap the "Related" section; the literal "Top matches" is the primary surface. */
@@ -79,7 +79,7 @@ export function useSemanticSearch({
 } {
 	const { searchQuery } = useMailContext();
 	const tokenContext = useSearchTokenContext();
-	const matches = useRouterState({ select: (s) => s.matches });
+	const browsed = useBrowsedList();
 	const normalizedQuery = normalizeSearchQuery(searchQuery);
 	const { freeText, tokens } = parseSearchTokens(normalizedQuery, tokenContext);
 	// `freeText`, not the raw query: a query of nothing but tokens
@@ -105,7 +105,7 @@ export function useSemanticSearch({
 	const inToken = tokens.find((t) => t.type === "in");
 	// The route decides the scope, not the call site — see `semanticMailboxScope`.
 	const effectiveMailboxId = semanticMailboxScope({
-		matches,
+		browsed,
 		callerMailboxId: mailboxId,
 		inTokenMailboxId: inToken?.mailboxId,
 	});

package/src/lib/mail-route.ts

@@ -30,6 +30,16 @@ export type MailListRoute =
 	| { list: "outbox" }
 	| { list: "mailbox"; mailboxId: string | undefined };
 
+/**
+ * The list a caller is on, flattened to the two values a navigation to it — or
+ * a decision about it — needs. Both are primitives, so a caller holding them in
+ * a dependency array settles, and `list` is `undefined` outside the mail shell.
+ */
+export interface BrowsedList {
+	list: MailListRoute["list"] | undefined;
+	mailboxId: string | undefined;
+}
+
 /**
  * The list layout among the matched routes, or `undefined` outside the mail
  * shell.