@remit/web-client 0.0.202 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.202",
+  "version": "0.0.203",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeSmtpMissingBanner.tsx

@@ -1,6 +1,6 @@
 import { ComposeSmtpMissingBanner as Banner } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
 import type { Ref } from "react";
+import { useConfigureAccountSmtp } from "@/routing";
 
 interface ComposeSmtpMissingBannerProps {
 	accountId: string;
@@ -12,16 +12,13 @@ export const ComposeSmtpMissingBanner = ({
 	accountId,
 	configureRef,
 }: ComposeSmtpMissingBannerProps) => {
-	const navigate = useNavigate();
+	const configureSmtp = useConfigureAccountSmtp();
 
 	return (
 		<Banner
 			configureRef={configureRef}
 			onConfigure={() => {
-				navigate({
-					to: "/settings/accounts",
-					search: { editAccountId: accountId, focusSmtp: true },
-				});
+				configureSmtp(accountId);
 			}}
 		/>
 	);

package/src/components/layout/ComposeFab.tsx

@@ -1,7 +1,5 @@
-import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
-import { locationOpensDetail } from "@/lib/mail-route";
-import { useOpenCompose } from "@/routing";
+import { useOpenCompose, useOpensDetail } from "@/routing";
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
@@ -16,9 +14,9 @@ import { useOpenCompose } from "@/routing";
  */
 export const ComposeFab = () => {
 	const compose = useOpenCompose();
-	const location = useLocation();
+	const opensDetail = useOpensDetail();
 
-	if (locationOpensDetail(location.pathname)) return null;
+	if (opensDetail) return null;
 
 	return (
 		<button

package/src/components/layout/MailTopBar.tsx

@@ -8,7 +8,6 @@
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { RefreshButton, ShellTopBar, shortcutHintForAction } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
 import { useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
@@ -16,7 +15,7 @@ import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
-import { useOpenCompose } from "@/routing";
+import { useGoToSection, useOpenCompose } from "@/routing";
 
 interface MailTopBarProps {
 	accounts: RemitImapAccountResponse[];
@@ -25,7 +24,7 @@ interface MailTopBarProps {
 export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
-	const navigate = useNavigate();
+	const goToSection = useGoToSection();
 	const compose = useOpenCompose();
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
@@ -59,7 +58,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 			}}
 			onCompose={compose}
 			onReportBug={openBugReport}
-			onOpenSettings={() => navigate({ to: "/settings/accounts" })}
+			onOpenSettings={() => goToSection("accounts")}
 			composeShortcut={shortcutHintForAction("compose")}
 			refreshControl={
 				<RefreshButton

package/src/components/mail/BriefPane.tsx

@@ -16,7 +16,6 @@ import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-cl
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { ReadingPaneEmpty } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -48,10 +47,12 @@ import {
 	type OpenThreadTarget,
 	type ReplyMode,
 	replyToThread,
+	useCloseThread,
+	useGoToSection,
 	useIsComposing,
 	useIsReplying,
 	useOpenReply,
-	useRetainOpenPanels,
+	useOpenThread,
 } from "@/routing";
 
 /* ------------------------------------------------------------------ */
@@ -113,8 +114,9 @@ interface BriefPaneProps {
 }
 
 function BriefPaneProvider({ thread, children }: BriefPaneProps) {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
+	const closeThread = useCloseThread();
+	const goToSection = useGoToSection();
 	const { searchInput } = useMailContext();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
@@ -155,37 +157,18 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 
 	const handleOpenThread = useCallback(
 		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
-			navigate({
-				to: "/mail/brief/$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 }),
-				hash: retainPanels,
-			});
+			openThread(target, { replace: options?.replace, query: searchInput });
 		},
-		[navigate, retainPanels, searchInput],
+		[openThread, searchInput],
 	);
 
-	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/brief",
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
-	}, [navigate, retainPanels]);
-
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
-			handleCloseThread();
+			closeThread();
 		},
-		[selectedMessageId, handleCloseThread],
+		[selectedMessageId, closeThread],
 	);
 
 	const actions = useThreadActions({
@@ -247,7 +230,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		// would otherwise fire at the message behind whatever is being typed — or
 		// answer a row the cursor moved to while a reply was open.
 		enabled: !isComposing && !isReplying,
-		onClose: handleCloseThread,
+		onClose: closeThread,
 		handlers: {
 			reply: () => replyToFocusedThread?.("reply"),
 			replyAll: () => replyToFocusedThread?.("reply-all"),
@@ -265,8 +248,8 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 				if (!triageTarget) return;
 				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
 			},
-			goFlagged: () => navigate({ to: "/mail/flagged" }),
-			goSettings: () => navigate({ to: "/settings" }),
+			goFlagged: () => goToSection("flagged"),
+			goSettings: () => goToSection("settings"),
 		},
 	});
 
@@ -287,7 +270,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		selectedThread,
 		conversation,
 		onOpenThread: handleOpenThread,
-		onCloseThread: handleCloseThread,
+		onCloseThread: closeThread,
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,

package/src/components/mail/DailyBrief.tsx

@@ -63,7 +63,6 @@ import {
 	toggleBriefFilterInQuery,
 } from "@remit/ui";
 import { useQueries, useQuery } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import { AlertCircle, RefreshCw } from "lucide-react";
 import {
 	type ReactNode,
@@ -103,12 +102,14 @@ import { showInlineSearchResults } from "@/lib/search-surface";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { resolveSelectionAccountScope } from "@/lib/selection-account-scope";
 import { spamOfferForResults } from "@/lib/spam-offer";
+import { wizardSelectionFrom } from "@/lib/wizard-selection";
 import {
+	type OpenThreadTarget,
 	type SelectionWizardControl,
+	useGoToSection,
+	useScopeSearchToMailbox,
 	useSelectionWizard,
-} from "@/lib/wizard-history";
-import { wizardSelectionFrom } from "@/lib/wizard-selection";
-import type { OpenThreadTarget } from "@/routing";
+} from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
@@ -160,14 +161,14 @@ interface ErrorBannerProps {
 }
 
 const ErrorBanner = ({ accountEmail }: ErrorBannerProps) => {
-	const navigate = useNavigate();
+	const goToSection = useGoToSection();
 	return (
 		<div className="flex items-center gap-2 px-row-inset py-2 border-b border-line bg-danger-soft/40 text-xs text-danger">
 			<AlertCircle className="size-3.5 shrink-0" />
 			<span className="flex-1 truncate">{accountEmail} can't connect</span>
 			<button
 				type="button"
-				onClick={() => navigate({ to: "/settings/accounts" })}
+				onClick={() => goToSection("accounts")}
 				className="shrink-0 underline text-danger hover:opacity-80"
 			>
 				Reconnect
@@ -398,7 +399,7 @@ export function DailyBrief({
 	const isDesktop = useIsDesktop();
 	const tier = useLayoutTier();
 	const wizard = useSelectionWizard();
-	const navigate = useNavigate();
+	const scopeSearchToMailbox = useScopeSearchToMailbox();
 
 	const nonMuted = useMemo(
 		() => sortAccountsByCreatedAt(accounts.filter((a) => !a.muted?.value)),
@@ -811,11 +812,7 @@ export function DailyBrief({
 				<SpamResultsOffer
 					count={briefSpamOffer.count}
 					onScopeToSpam={() =>
-						navigate({
-							to: "/mail/$mailboxId",
-							params: { mailboxId: briefSpamOffer.mailboxId },
-							search: { q: searchQuery || undefined },
-						})
+						scopeSearchToMailbox(briefSpamOffer.mailboxId, searchQuery)
 					}
 				/>
 			)}

package/src/components/mail/DraftsView.tsx

@@ -36,16 +36,11 @@ import {
 	type ThreadSection,
 } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import { FileText, Inbox, Trash2 } from "lucide-react";
 import { useMemo } from "react";
 
 import { groupDraftSections } from "@/lib/drafts";
-import {
-	useComposeDraftId,
-	useEditDraft,
-	useRetainOpenPanels,
-} from "@/routing";
+import { useComposeDraftId, useEditDraft, useOpenThread } from "@/routing";
 import { NavMenuButton } from "./NavMenuButton";
 
 // ---------------------------------------------------------------------------
@@ -136,8 +131,6 @@ const ImapDraftRow = ({ row, isSelected, onOpen }: ImapDraftRowProps) => {
 // ---------------------------------------------------------------------------
 
 interface DraftsViewProps {
-	/** The mailbox id for the \Drafts mailbox being viewed. */
-	mailboxId: string;
 	/** The accountId that owns this \Drafts mailbox. */
 	accountId: string;
 	/** The currently selected message id (reading pane). */
@@ -151,7 +144,6 @@ interface DraftsViewProps {
 }
 
 export function DraftsView({
-	mailboxId,
 	accountId,
 	selectedMessageId,
 	imapThreads,
@@ -160,8 +152,7 @@ export function DraftsView({
 }: DraftsViewProps) {
 	const openDraftId = useComposeDraftId();
 	const editDraft = useEditDraft();
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
 	const queryClient = useQueryClient();
 
 	// Fetch the full outbox list — both sources are already fetched by the
@@ -196,12 +187,7 @@ export function DraftsView({
 			(thread) => thread.messageId === messageId,
 		)?.threadId;
 		if (!threadId) return;
-		navigate({
-			to: "/mail/$mailboxId/$threadId/$messageId",
-			params: { mailboxId, threadId, messageId },
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
+		openThread({ threadId, messageId });
 	};
 
 	const isEmpty = sections.length === 0;

package/src/components/mail/FlaggedList.tsx

@@ -37,9 +37,9 @@ import { useMailContext } from "@/lib/mail-context";
 import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { dedupeByThread } from "@/lib/starred-rows";
-import { useSelectionWizard } from "@/lib/wizard-history";
 import { wizardSelectionFrom } from "@/lib/wizard-selection";
 import type { OpenThreadTarget } from "@/routing";
+import { useSelectionWizard } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";

package/src/components/mail/FlaggedPane.tsx

@@ -26,7 +26,6 @@
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { ReadingPaneEmpty } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -59,10 +58,12 @@ import {
 	type OpenThreadTarget,
 	type ReplyMode,
 	replyToThread,
+	useCloseThread,
+	useGoToSection,
 	useIsComposing,
 	useIsReplying,
 	useOpenReply,
-	useRetainOpenPanels,
+	useOpenThread,
 } from "@/routing";
 
 /* ------------------------------------------------------------------ */
@@ -124,8 +125,9 @@ interface FlaggedPaneProps {
 }
 
 function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
+	const openThread = useOpenThread();
+	const closeThread = useCloseThread();
+	const goToSection = useGoToSection();
 	const { searchInput } = useMailContext();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
@@ -161,37 +163,18 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 
 	const handleOpenThread = useCallback(
 		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
-			navigate({
-				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 }),
-				hash: retainPanels,
-			});
+			openThread(target, { replace: options?.replace, query: searchInput });
 		},
-		[navigate, retainPanels, searchInput],
+		[openThread, searchInput],
 	);
 
-	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/flagged",
-			search: (prev) => prev,
-			hash: retainPanels,
-		});
-	}, [navigate, retainPanels]);
-
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
-			handleCloseThread();
+			closeThread();
 		},
-		[selectedMessageId, handleCloseThread],
+		[selectedMessageId, closeThread],
 	);
 
 	const actions = useThreadActions({
@@ -253,7 +236,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		// would otherwise fire at the message behind whatever is being typed — or
 		// answer a row the cursor moved to while a reply was open.
 		enabled: !isComposing && !isReplying,
-		onClose: handleCloseThread,
+		onClose: closeThread,
 		handlers: {
 			reply: () => replyToFocusedThread?.("reply"),
 			replyAll: () => replyToFocusedThread?.("reply-all"),
@@ -271,8 +254,8 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 				if (!triageTarget) return;
 				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
 			},
-			goBrief: () => navigate({ to: "/mail/brief" }),
-			goSettings: () => navigate({ to: "/settings" }),
+			goBrief: () => goToSection("brief"),
+			goSettings: () => goToSection("settings"),
 		},
 	});
 
@@ -293,7 +276,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		selectedThread,
 		conversation,
 		onOpenThread: handleOpenThread,
-		onCloseThread: handleCloseThread,
+		onCloseThread: closeThread,
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,

package/src/components/mail/MailListHeader.tsx

@@ -58,7 +58,6 @@ import {
 	useAppShellLayout,
 	useSuggestList,
 } from "@remit/ui";
-import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { Menu, Search, X } from "lucide-react";
 import {
 	type ReactNode,
@@ -88,7 +87,11 @@ import {
 	searchTokenLabel,
 } from "@/lib/search-tokens";
 import { spamOfferForResults } from "@/lib/spam-offer";
-import { useOpenWizard } from "@/lib/wizard-history";
+import {
+	useBrowsedList,
+	useOpenWizard,
+	useScopeSearchToMailbox,
+} from "@/routing";
 
 export interface MailListHeaderProps {
 	title: string;
@@ -176,7 +179,7 @@ export function MailListHeader({
 		searchViewKey,
 	} = useMailContext();
 	const tokenContext = useSearchTokenContext();
-	const navigate = useNavigate();
+	const scopeSearchToMailbox = useScopeSearchToMailbox();
 	const layout = useAppShellLayout();
 	const tier = useLayoutTier();
 	const [searchOpen, setSearchOpen] = useState(false);
@@ -301,10 +304,10 @@ export function MailListHeader({
 	// The mailbox's appointed role is what lets a search scoped to Spam show its
 	// rows rather than drop them.
 	const { scope } = useSearchScope(accounts);
-	const matches = useRouterState({ select: (s) => s.matches });
-	const scopedMailboxId = routeMailboxId(matches);
+	const browsed = useBrowsedList();
+	const scopedMailboxId = routeMailboxId(browsed);
 	const routeScope = resultsScopeForRoute(
-		matches,
+		browsed,
 		scope,
 		scopedMailboxId ? resultFolderIndex.get(scopedMailboxId)?.role : undefined,
 	);
@@ -320,11 +323,7 @@ export function MailListHeader({
 		? {
 				kind: "global",
 				onScopeToSpam: () =>
-					navigate({
-						to: "/mail/$mailboxId",
-						params: { mailboxId: spamOffer.mailboxId },
-						search: { q: searchQuery || undefined },
-					}),
+					scopeSearchToMailbox(spamOffer.mailboxId, searchQuery),
 			}
 		: routeScope;
 

package/src/components/mail/MailSidebarAdapter.tsx

@@ -10,7 +10,6 @@ import type {
 import type { NavAccount, NavLinkComponent, NavMailboxRole } from "@remit/ui";
 import { NavSidebar } from "@remit/ui";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -25,7 +24,7 @@ import {
 	removeSavedSearch,
 	saveSearch,
 } from "@/lib/saved-searches";
-import { NavLink } from "@/routing";
+import { NavLink, useSearchEverything, useSelectedNavId } from "@/routing";
 
 interface MailSidebarAdapterProps {
 	accounts: RemitImapAccountResponse[];
@@ -112,26 +111,6 @@ function toNavMailbox(
 	};
 }
 
-/**
- * Resolves the currently selected nav ID from the active route so the kit
- * component can highlight the right item.
- *   - /mail/outbox → "outbox"
- *   - /mail/flagged → "flagged"
- *   - /mail/brief → "brief"
- *   - /mail/$mailboxId → mailboxId
- */
-function useSelectedNavId(): string {
-	const location = useLocation();
-	const params = useParams({ strict: false }) as { mailboxId?: 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;
-	return "";
-}
-
 /**
  * Pane 1 of the 4-pane shell. Data bridge that fetches mailboxes per account,
  * maps them onto the kit's NavAccount shape, and renders each entry as a real
@@ -144,7 +123,7 @@ export function MailSidebarAdapter({
 	variant = "desktop",
 }: MailSidebarAdapterProps) {
 	const queryClient = useQueryClient();
-	const navigate = useNavigate();
+	const searchEverything = useSearchEverything();
 	const selectedNavId = useSelectedNavId();
 	const { searchInput, onSearchChange } = useMailContext();
 	const [savedSearches, setSavedSearches] = useState(loadSavedSearches);
@@ -341,10 +320,10 @@ export function MailSidebarAdapter({
 	const handleSelectSavedSearch = useCallback(
 		(query: string) => {
 			onSearchChange(query);
-			navigate({ to: "/mail/brief", search: { q: query } });
+			searchEverything(query);
 			onMailboxSelect?.();
 		},
-		[onSearchChange, navigate, onMailboxSelect],
+		[onSearchChange, searchEverything, onMailboxSelect],
 	);
 
 	return (