@remit/web-client 0.0.113 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.113",
+  "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/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})`;
 }