@remit/web-client 0.0.141 → 0.0.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.141",
+  "version": "0.0.143",
   "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/mail/IntelligencePane.tsx

@@ -1,11 +1,11 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
+	DialogBackdrop,
 	IntelligencePanel,
 	type IntelligenceQuickActions,
 	type SimilarMessageLinkComponent,
 	type SimilarState,
 } from "@remit/ui";
-import { Link } from "@tanstack/react-router";
 import { Sparkles } from "lucide-react";
 import { useCallback, useState } from "react";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
@@ -14,6 +14,7 @@ import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
 import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
 import { useTelemetry } from "@/lib/telemetry-context";
+import { NavLink } from "@/routing";
 
 export interface IntelligencePaneProps {
 	onClose: () => void;
@@ -154,19 +155,17 @@ function ReclassifyDialog({
 }) {
 	if (!isOpen) return null;
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			aria-hidden="true"
-			onClick={onCancel}
-		>
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<DialogBackdrop
+				label="Dismiss reclassify sender"
+				onDismiss={onCancel}
+				className="backdrop-blur-sm"
+			/>
 			<div
 				role="dialog"
 				aria-modal="true"
 				aria-label="Reclassify sender"
 				className="relative z-10 w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg"
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<h2 className="text-lg font-semibold">Reclassify this sender</h2>
 				<p className="mt-2 text-sm text-fg-muted">
@@ -316,15 +315,16 @@ function WiredPanel({
 		ariaLabel,
 		children,
 	}) => (
-		<Link
+		<NavLink
 			to="/mail/$mailboxId"
 			params={{ mailboxId: rowMailboxId }}
 			search={(prev) => ({ ...prev, selectedMessageId: messageId })}
+			variant="row"
 			className={className}
 			aria-label={ariaLabel}
 		>
 			{children}
-		</Link>
+		</NavLink>
 	);
 
 	if (!data) {

package/src/components/mail/MailNav.tsx

@@ -10,11 +10,11 @@
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { useAppShellLayout } from "@remit/ui";
-import { Link } from "@tanstack/react-router";
 import { LogOut, Settings } from "lucide-react";
 import { AccountSession } from "@/auth/AccountSession";
 import { MailSidebarAdapter } from "@/components/mail/MailSidebarAdapter";
 import { BugReportButton } from "@/components/ui/BugReportButton";
+import { NavLink } from "@/routing";
 
 interface MailNavProps {
 	accounts: RemitImapAccountResponse[];
@@ -39,14 +39,10 @@ export function MailNav({ accounts, onMailboxSelect }: MailNavProps) {
 				/>
 			</div>
 			<div className="border-t border-line px-2 py-2">
-				<Link
-					to="/settings/accounts"
-					onClick={onMailboxSelect}
-					className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
-				>
+				<NavLink to="/settings/accounts" onClick={onMailboxSelect}>
 					<Settings className="size-4 shrink-0" />
 					<span className="flex-1 truncate text-left">Settings</span>
-				</Link>
+				</NavLink>
 				<BugReportButton />
 				<AccountSession>
 					{({ signOut }) => (

package/src/components/mail/MailSidebarAdapter.tsx

@@ -10,12 +10,7 @@ import type {
 import type { NavAccount, NavLinkComponent, NavMailboxRole } from "@remit/ui";
 import { NavSidebar } from "@remit/ui";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-	Link,
-	useLocation,
-	useNavigate,
-	useParams,
-} from "@tanstack/react-router";
+import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -30,6 +25,7 @@ import {
 	removeSavedSearch,
 	saveSearch,
 } from "@/lib/saved-searches";
+import { NavLink } from "@/routing";
 
 interface MailSidebarAdapterProps {
 	accounts: RemitImapAccountResponse[];
@@ -232,21 +228,24 @@ export function MailSidebarAdapter({
 	}) => {
 		if (navId === "brief") {
 			return (
-				<Link
+				<NavLink
 					to="/mail"
 					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 }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}
 					title={title}
 				>
 					{children}
-				</Link>
+				</NavLink>
 			);
 		}
 		if (navId === "outbox") {
 			return (
-				<Link
+				<NavLink
 					to="/mail/outbox"
 					search={{ q: undefined, selectedOutboxMessageId: undefined }}
 					onClick={() => onClick?.()}
@@ -255,12 +254,12 @@ export function MailSidebarAdapter({
 					title={title}
 				>
 					{children}
-				</Link>
+				</NavLink>
 			);
 		}
 		if (navId === "flagged") {
 			return (
-				<Link
+				<NavLink
 					to="/mail/flagged"
 					search={{ q: undefined, selectedMessageId: undefined }}
 					onClick={() => onClick?.()}
@@ -269,12 +268,12 @@ export function MailSidebarAdapter({
 					title={title}
 				>
 					{children}
-				</Link>
+				</NavLink>
 			);
 		}
 		if (navId === "settings") {
 			return (
-				<Link
+				<NavLink
 					to="/settings/accounts"
 					onClick={() => onClick?.()}
 					className={className}
@@ -282,11 +281,11 @@ export function MailSidebarAdapter({
 					title={title}
 				>
 					{children}
-				</Link>
+				</NavLink>
 			);
 		}
 		return (
-			<Link
+			<NavLink
 				to="/mail/$mailboxId"
 				params={{ mailboxId: navId }}
 				// Drop any stale search query / selected message when switching mailbox.
@@ -300,7 +299,7 @@ export function MailSidebarAdapter({
 				title={title}
 			>
 				{children}
-			</Link>
+			</NavLink>
 		);
 	};
 

package/src/components/mail/MessageRow.tsx

@@ -25,17 +25,12 @@ import {
 	useLongPress,
 } from "@remit/ui";
 import { useQueryClient } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
 import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
 import { cn } from "@/lib/utils";
+import { NavLink } from "@/routing";
 import { useThreadRowInteraction } from "./ThreadListInteraction";
 import { useModifierSelect } from "./useModifierSelect";
 
-interface MailboxLinkSearch {
-	selectedMessageId?: string;
-	q?: string;
-}
-
 export interface MessageRowSelection {
 	isChecked: boolean;
 	onToggleCheck: (messageId: string) => void;
@@ -254,18 +249,16 @@ const MessageRowComponent = ({
 	}
 
 	return (
-		<Link
+		<NavLink
 			to="/mail/$mailboxId"
 			params={{ mailboxId: linkMailboxId }}
-			search={(prev: MailboxLinkSearch) => ({
-				...prev,
-				selectedMessageId: messageId,
-			})}
+			search={(prev) => ({ ...prev, selectedMessageId: messageId })}
+			variant="row"
 			{...interactionProps}
 			className={className}
 		>
 			{body}
-		</Link>
+		</NavLink>
 	);
 };
 

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,4 +1,4 @@
-import { Kbd, KEY_HINT_GROUPS } from "@remit/ui";
+import { DialogBackdrop, Kbd, KEY_HINT_GROUPS } from "@remit/ui";
 import { X } from "lucide-react";
 import { Fragment, useCallback, useEffect } from "react";
 import { cn } from "@/lib/utils";
@@ -37,29 +37,23 @@ export const KeyboardShortcutsModal = ({
 	if (!isOpen) return null;
 
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			role="dialog"
-			aria-modal="true"
-			aria-label="Keyboard shortcuts"
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-		>
-			{/* Backdrop */}
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<DialogBackdrop
+				label="Dismiss keyboard shortcuts"
+				onDismiss={onClose}
+				className="backdrop-blur-sm"
+			/>
 
 			{/* Modal */}
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: stops event propagation from the modal content; keyboard is handled by the outer wrapper */}
 			<div
+				role="dialog"
+				aria-modal="true"
+				aria-label="Keyboard shortcuts"
 				className={cn(
 					"relative z-10 max-h-[85vh] w-full max-w-2xl overflow-y-auto",
 					"rounded-lg border border-line bg-surface shadow-lg",
 					"p-6",
 				)}
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => {
-					if (e.key !== "Escape") e.stopPropagation();
-				}}
 			>
 				{/* Header */}
 				<div className="mb-6 flex items-center justify-between">

package/src/routing/fragment.ts

@@ -0,0 +1,35 @@
+import { useLocation } from "@tanstack/react-router";
+import { z } from "zod";
+
+/**
+ * The fragment tier carries panel visibility and nothing else — no identity, no
+ * payload, no selection. A panel qualifies only when its own copy is
+ * independent of in-memory data, so a cold load of the URL reproduces it
+ * exactly.
+ */
+export const panelFragments = [
+	"intelligence",
+	"nav",
+	"shortcuts",
+	"filters",
+] as const;
+
+export type PanelFragment = (typeof panelFragments)[number];
+
+const panelFragmentSchema = z.enum(panelFragments);
+
+/**
+ * A hand-edited or stale URL is a normal thing to receive, so an unrecognised
+ * fragment reads as "no panel open" instead of throwing.
+ */
+export function parsePanelFragment(hash: string): PanelFragment | undefined {
+	const parsed = panelFragmentSchema.safeParse(hash);
+	return parsed.success ? parsed.data : undefined;
+}
+
+/** The panel the URL currently asks for, if any. */
+export function useOpenPanel(): PanelFragment | undefined {
+	return useLocation({
+		select: (location) => parsePanelFragment(location.hash),
+	});
+}

package/src/routing/index.ts

@@ -0,0 +1,7 @@
+export {
+	type PanelFragment,
+	panelFragments,
+	parsePanelFragment,
+	useOpenPanel,
+} from "./fragment";
+export { NavLink, type NavLinkProps } from "./nav-link";

package/src/routing/nav-link.tsx

@@ -0,0 +1,58 @@
+import { NavLinkSurface } from "@remit/ui";
+import type {
+	AnyRouter,
+	CreateLinkProps,
+	LinkComponentProps,
+	RegisteredRouter,
+} from "@tanstack/react-router";
+import { createLink } from "@tanstack/react-router";
+import type { ReactElement } from "react";
+import type { PanelFragment } from "./fragment";
+
+const RouterNavLink = createLink(NavLinkSurface);
+
+/**
+ * The router's own link props, minus the raw `hash`: the fragment tier is a
+ * closed union of panel names, so `fragment` is the only way to write it.
+ */
+export type NavLinkProps<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TFrom extends string = string,
+	TTo extends string | undefined = undefined,
+	TMaskFrom extends string = TFrom,
+	TMaskTo extends string = "",
+> = LinkComponentProps<
+	typeof NavLinkSurface,
+	TRouter,
+	TFrom,
+	TTo,
+	TMaskFrom,
+	TMaskTo
+> & {
+	fragment?: PanelFragment;
+	/**
+	 * Closed off rather than omitted: `Omit` over these props is a mapped type,
+	 * and the router's `to` / `params` / `search` inference cannot see through
+	 * one.
+	 */
+	hash?: never;
+};
+
+/**
+ * The application's only navigation link. `createLink` keeps the router's `to` /
+ * `params` / `search` inference, so a route that does not exist or a param set
+ * that does not match it fails to compile instead of rendering a blank pane.
+ */
+export function NavLink<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string = string,
+	const TTo extends string | undefined = undefined,
+	const TMaskFrom extends string = TFrom,
+	const TMaskTo extends string = "",
+>(props: NavLinkProps<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): ReactElement;
+export function NavLink({
+	fragment,
+	...props
+}: CreateLinkProps & { fragment?: PanelFragment }): ReactElement {
+	return <RouterNavLink {...props} hash={fragment} />;
+}