@remit/web-client 0.0.112 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "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/layout/MailTopBar.tsx

@@ -1,41 +1,20 @@
 /**
- * MailTopBar — the app's one search surface and its global actions.
+ * MailTopBar — the `/mail` shell's top bar, wired to the app.
  *
- * Mounted by the `/mail` shell across the top of the whole layout — the nav
- * column, the list, the reading pane and the intelligence rail. It is the app's
- * search, not the list's: the list header drops its own field wherever this bar
- * is mounted, so exactly one search input exists on the page and the "/"
- * shortcut has one target.
- *
- * The actions here are the ones that belong to the app rather than to whatever
- * is currently listed or open — the nav toggle, compose, bug report, settings,
- * account. Reply, delete, move and the rest stay on the reading pane's own
- * toolbar, under this bar.
- *
- * The field carries one chip: the scope of the view the user navigated into
- * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
- * searches everything. Typed `in:`/`from:` terms are not chipped here — they
- * are already visible as the text the user typed, and chipping them would show
- * the same term twice in one field; they render as chips over the result
- * sections instead, where the text is not repeated.
+ * The bar itself is `ShellTopBar` in the kit. This supplies what the kit cannot
+ * know: the search scope the route carries, the app's routes, its keymap and
+ * its signed-in session. Which actions the bar carries, in what order and with
+ * what wording is not decided here.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AppTopBar, Button, NavToggleButton, SearchBar } from "@remit/ui";
+import { ShellTopBar } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { Settings, SquarePen } from "lucide-react";
 import { AccountMenu } from "@/auth/AccountMenu";
-import { BugReportButton } from "@/components/ui/BugReportButton";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
 import { useSearchScope } from "@/hooks/useSearchScope";
-import { tooltipForAction } from "@/lib/keymap";
+import { openBugReport } from "@/lib/bug-report";
+import { shortcutHintForAction } from "@/lib/keymap";
 import { useMailContext } from "@/lib/mail-context";
-import type { SearchScopeState } from "@/lib/search-scope";
-
-const SEARCH_PLACEHOLDER: Record<SearchScopeState["kind"], string> = {
-	global: "Search all mail",
-	pending: "Search mail",
-	scoped: "Search this folder",
-};
 
 interface MailTopBarProps {
 	accounts: RemitImapAccountResponse[];
@@ -51,47 +30,23 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 		scope.kind === "scoped"
 			? [{ id: scope.chip.id, label: scope.chip.label, tone: "scope" as const }]
 			: undefined;
-	// Only the brief may claim to search all mail. A mailbox route whose name has
-	// not loaded yet has no chip to show but is already narrowed, so it gets the
-	// neutral wording rather than a placeholder that asserts the wrong scope.
-	const placeholder = SEARCH_PLACEHOLDER[scope.kind];
 
 	return (
-		<AppTopBar
-			leading={<NavToggleButton />}
-			search={
-				<SearchBar
-					value={searchInput}
-					onChange={onSearchChange}
-					onClear={onSearchClear}
-					onClearQuery={onSearchClearQuery}
-					chips={chips}
-					onRemoveChip={clearScope}
-					placeholder={placeholder}
-				/>
-			}
-			actions={
-				<>
-					<Button
-						variant="ghost"
-						size="sm"
-						icon={<SquarePen className="size-4" />}
-						title={`Compose ${tooltipForAction("compose")}`}
-						aria-label="Compose"
-						onClick={compose}
-					/>
-					<BugReportButton />
-					<Button
-						variant="ghost"
-						size="sm"
-						icon={<Settings className="size-4" />}
-						title="Settings"
-						aria-label="Settings"
-						onClick={() => navigate({ to: "/settings/accounts" })}
-					/>
-					<AccountMenu />
-				</>
-			}
+		<ShellTopBar
+			search={{
+				value: searchInput,
+				scope: scope.kind,
+				chips,
+				onChange: onSearchChange,
+				onClear: onSearchClear,
+				onClearQuery: onSearchClearQuery,
+				onRemoveChip: clearScope,
+			}}
+			onCompose={compose}
+			onReportBug={openBugReport}
+			onOpenSettings={() => navigate({ to: "/settings/accounts" })}
+			composeShortcut={shortcutHintForAction("compose")}
+			account={<AccountMenu />}
 		/>
 	);
 }

package/src/components/mail/MailNav.tsx

@@ -47,7 +47,7 @@ export function MailNav({ accounts, onMailboxSelect }: MailNavProps) {
 					<Settings className="size-4 shrink-0" />
 					<span className="flex-1 truncate text-left">Settings</span>
 				</Link>
-				<BugReportButton variant="drawer" />
+				<BugReportButton />
 				<AccountSession>
 					{({ signOut }) => (
 						<button

package/src/components/mail/SwipeableMessageRow.render.test.ts

@@ -0,0 +1,110 @@
+/**
+ * The touch row is not an anchor (#116).
+ *
+ * An `<a href>` is what the OS long-press callout and the link context menu
+ * fire on, and they raced the row's own long-press-to-select gesture. Nothing
+ * an anchor buys — middle-click, open in new tab, copy link address — exists
+ * without a mouse, and the swipe row is the touch row.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { SwipeableMessageRow } from "./SwipeableMessageRow";
+
+const PHONE_WIDTH = 390;
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const thread = {
+	threadMessageId: "tm-1",
+	threadId: "th-1",
+	messageId: "msg-1",
+	accountId: "acc-1",
+	accountConfigId: "acc-1",
+	mailboxId: "mbx-1",
+	subject: "Q3 planning notes",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	snippet: "Notes from the planning session.",
+	sentDate: 0,
+	isRead: false,
+	hasAttachment: false,
+	hasStars: false,
+	star: "None",
+	isDeleted: false,
+	senderTrust: "unknown",
+	createdAt: 0,
+	updatedAt: 0,
+} as unknown as RemitImapThreadMessageResponse;
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+const renderRow = (): DomHarness => {
+	const created = createDomHarness({ viewportWidth: PHONE_WIDTH });
+	created.render(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(SwipeableMessageRow, {
+				thread,
+				mailboxId: "mbx-1",
+				isSelected: false,
+				isChecked: false,
+				onToggleCheck: () => undefined,
+				onRowSelect: () => false,
+				isMultiSelectMode: false,
+				onLongPress: () => undefined,
+				isDesktop: false,
+				onDelete: () => undefined,
+				onToggleRead: () => undefined,
+			}),
+		}),
+	);
+	return created;
+};
+
+describe("SwipeableMessageRow — the touch row's open affordance", () => {
+	it("renders no anchor at all", () => {
+		harness = renderRow();
+
+		assert.equal(harness.queryAll("a").length, 0);
+	});
+
+	it("opens through a button carrying the row marker", () => {
+		harness = renderRow();
+
+		const row = harness.query("button[data-message-row]");
+		assert.ok(row, "the row's open affordance is not a button");
+		assert.match(row.textContent ?? "", /Q3 planning notes/);
+	});
+});

package/src/components/mail/SwipeableMessageRow.tsx

@@ -6,12 +6,11 @@ import {
 	type SwipePeek,
 	type ThreadRowData,
 } from "@remit/ui";
-import { Link } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";
-import { useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -78,6 +77,7 @@ export const SwipeableMessageRow = ({
 	density,
 }: SwipeableMessageRowProps) => {
 	const [peek, setPeek] = useState<SwipePeek>("none");
+	const navigate = useNavigate();
 
 	const handleAct = useCallback(
 		(side: "leading" | "trailing") => {
@@ -100,10 +100,16 @@ export const SwipeableMessageRow = ({
 		onToggleCheck(thread.messageId);
 	}, [onToggleCheck, thread.messageId]);
 
-	// The swipe row is the layout tier's row, not the input device's: a mouse at
-	// a narrow width still gets it, and a shift or cmd click on it belongs to
-	// selection rather than to the anchor's own new-window/new-tab gesture.
-	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
+	const handleOpen = useCallback(() => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: (prev: MailboxLinkSearch) => ({
+				...prev,
+				selectedMessageId: thread.messageId,
+			}),
+		});
+	}, [navigate, mailboxId, thread.messageId]);
 
 	if (isDesktop || isMultiSelectMode) {
 		return (
@@ -135,28 +141,8 @@ export const SwipeableMessageRow = ({
 			onPeek={setPeek}
 			onToggleCheck={handleToggleCheck}
 			onLongPress={handleLongPress}
-			onOpen={() => undefined}
+			onOpen={handleOpen}
 			onAct={handleAct}
-			linkComponent={({ onOpenClick, children, ...rowProps }) => (
-				<Link
-					{...rowProps}
-					to="/mail/$mailboxId"
-					params={{ mailboxId }}
-					search={(prev: MailboxLinkSearch) => ({
-						...prev,
-						selectedMessageId: thread.messageId,
-					})}
-					data-message-row
-					onMouseDown={modifierSelect.onMouseDown}
-					onContextMenu={modifierSelect.onContextMenu}
-					onClick={(e) => {
-						if (modifierSelect.claimClick(e)) return;
-						onOpenClick(e);
-					}}
-				>
-					{children}
-				</Link>
-			)}
 		/>
 	);
 };

package/src/components/ui/BugReportButton.tsx

@@ -1,45 +1,20 @@
-import { Button } from "@remit/ui";
 import { Bug } from "lucide-react";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-
-interface BugReportButtonProps {
-	/**
-	 * `icon` (default) is the compact ghost icon button used in the desktop
-	 * message toolbar. `drawer` renders a full-width labeled row to sit beside
-	 * Settings in the mobile drawer footer, where an icon-only control would be
-	 * unreachable/ambiguous (#685).
-	 */
-	variant?: "icon" | "drawer";
-}
-
-const openBugReport = () => {
-	const ctx = buildBugReportContext();
-	const url = buildGitHubIssueUrl(ctx);
-	window.open(url, "_blank", "noopener,noreferrer");
-};
-
-export function BugReportButton({ variant = "icon" }: BugReportButtonProps) {
-	if (variant === "drawer") {
-		return (
-			<button
-				type="button"
-				onClick={openBugReport}
-				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"
-			>
-				<Bug className="size-4 shrink-0" />
-				<span className="flex-1 truncate text-left">Report a bug</span>
-			</button>
-		);
-	}
+import { openBugReport } from "@/lib/bug-report";
 
+/**
+ * The mobile drawer's bug-report row — a full-width labeled control beside
+ * Settings, where an icon-only button would be unreachable and ambiguous
+ * (#685). Above the drawer, the shell's top bar carries this action.
+ */
+export function BugReportButton() {
 	return (
-		<Button
-			variant="ghost"
-			size="sm"
-			icon={<Bug className="size-4" />}
-			title="Report a bug"
-			aria-label="Report a bug"
+		<button
+			type="button"
 			onClick={openBugReport}
-		/>
+			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"
+		>
+			<Bug className="size-4 shrink-0" />
+			<span className="flex-1 truncate text-left">Report a bug</span>
+		</button>
 	);
 }

package/src/lib/bug-report.ts

@@ -310,3 +310,8 @@ export function buildGitHubIssueUrl(ctx: BugReportContext): string {
 
 	return issueUrl(withoutComponentStack, overrides);
 }
+
+export function openBugReport(): void {
+	const url = buildGitHubIssueUrl(buildBugReportContext());
+	window.open(url, "_blank", "noopener,noreferrer");
+}

package/src/lib/keymap.test.ts

@@ -1,6 +1,11 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
-import { KEY_HINT_GROUPS, keysForAction, tooltipForAction } from "./keymap.ts";
+import {
+	KEY_HINT_GROUPS,
+	keysForAction,
+	shortcutHintForAction,
+	tooltipForAction,
+} from "./keymap.ts";
 
 describe("keymap module", () => {
 	test("exposes the documented groups in reading order", () => {
@@ -35,6 +40,20 @@ describe("keymap module", () => {
 		assert.strictEqual(tooltipForAction("compose"), "(c)");
 	});
 
+	test("shortcutHintForAction renders the binding without the parens", () => {
+		assert.strictEqual(shortcutHintForAction("reply"), "r");
+		assert.strictEqual(shortcutHintForAction("goBrief"), "g then b");
+		assert.strictEqual(shortcutHintForAction("compose"), "c");
+	});
+
+	test("an action with no binding gets no hint and no empty parens", () => {
+		const unbound = "totallyMissing" as Parameters<
+			typeof shortcutHintForAction
+		>[0];
+		assert.strictEqual(shortcutHintForAction(unbound), "");
+		assert.strictEqual(tooltipForAction(unbound), "");
+	});
+
 	test("every hint's action is a non-empty key list", () => {
 		for (const group of KEY_HINT_GROUPS) {
 			for (const hint of group.hints) {

package/src/lib/keymap.ts

@@ -188,14 +188,23 @@ export function keysForAction(action: TriageAction): string[] | undefined {
 }
 
 /**
- * Render an action's binding as a compact tooltip suffix, e.g. "(r)" or
- * "(g then b)". Returns "" when the action has no hint.
+ * Render an action's binding as it reads to a user, e.g. "r" or "g then b".
+ * Returns "" when the action has no hint.
  */
-export function tooltipForAction(action: TriageAction): string {
+export function shortcutHintForAction(action: TriageAction): string {
 	const keys = keysForAction(action);
 	if (!keys || keys.length === 0) return "";
-	if (keys.length === 1) return `(${keys[0]})`;
+	if (keys.length === 1) return keys[0] ?? "";
 	// Sequence (go-to) keys read as "g then b"; modifier combos as "⌘N".
-	if (keys[0] === "g") return `(${keys.join(" then ")})`;
-	return `(${keys.join("")})`;
+	if (keys[0] === "g") return keys.join(" then ");
+	return keys.join("");
+}
+
+/**
+ * Render an action's binding as a compact tooltip suffix, e.g. "(r)" or
+ * "(g then b)". Returns "" when the action has no hint.
+ */
+export function tooltipForAction(action: TriageAction): string {
+	const hint = shortcutHintForAction(action);
+	return hint === "" ? "" : `(${hint})`;
 }