@remit/web-client 0.0.124 → 0.0.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.124",
+  "version": "0.0.126",
   "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/BriefPane.tsx

@@ -58,7 +58,10 @@ interface BriefPaneContextValue {
 	/** The conversation to open — the loaded thread, or a tapped "Related" hit. */
 	conversation: ConversationTarget | undefined;
 	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
-	onSelectSearchResult: (result: SearchResult) => void;
+	onSelectSearchResult: (
+		result: SearchResult,
+		options?: OpenMessageOptions,
+	) => void;
 	onCloseThread: () => void;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
@@ -136,9 +139,10 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 	);
 
 	const handleSelectSearchResult = useCallback(
-		(result: SearchResult) => {
+		(result: SearchResult, options?: OpenMessageOptions) => {
 			navigate({
 				to: "/mail",
+				replace: options?.replace,
 				search: (prev) => ({
 					...prev,
 					// Commit the active query with the selection so the debounced

package/src/components/mail/DailyBrief.tsx

@@ -373,7 +373,10 @@ interface DailyBriefProps {
 	 * Opens a search result. A semantic "Related" hit carries its thread + mailbox
 	 * so it opens even when its message isn't in the loaded brief list.
 	 */
-	onSelectSearchResult?: (result: SearchResult) => void;
+	onSelectSearchResult?: (
+		result: SearchResult,
+		options?: OpenMessageOptions,
+	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
 	commandsRef?: RefObject<MessageListCommands | null>;
 	/** Cursor / selection / display order, reported up to the triage layer. */
@@ -561,6 +564,29 @@ export function DailyBrief({
 		[bodyRows],
 	);
 
+	// A committed query puts rows the widened cross-folder search found into the
+	// body, and those messages are in folders the brief itself never loads. The
+	// reading pane resolves a bare `selectedMessageId` against the brief's own
+	// thread list, so such a row opens nothing; it goes through the search path
+	// instead, which carries the thread and mailbox the conversation is fetched
+	// by (#635).
+	const openRow = useCallback(
+		(id: string, options?: OpenMessageOptions) => {
+			const row = sq
+				? bodyRows.find((candidate) => candidate.id === id)
+				: undefined;
+			if (row?.threadId && row.mailboxId && onSelectSearchResult) {
+				onSelectSearchResult(
+					rowToSearchResult(row, resultFolderIndex),
+					options,
+				);
+				return;
+			}
+			onSelectMessage?.(id, options);
+		},
+		[sq, bodyRows, resultFolderIndex, onSelectSearchResult, onSelectMessage],
+	);
+
 	const accountSources = useMemo<FilterSheetSource[]>(() => {
 		if (nonMuted.length <= 1) return [];
 		return [
@@ -750,7 +776,7 @@ export function DailyBrief({
 					briefCategory={selectedCategory}
 					Row={MessageRow}
 					selectedThreadId={selectedMessageId}
-					onSelectThread={onSelectMessage}
+					onSelectThread={openRow}
 					onSelectBriefCategory={setSelectedCategory}
 					sources={accountSources}
 					sourcesNote={mutedCount > 0 ? `+${mutedCount} muted` : undefined}
@@ -798,7 +824,7 @@ export function DailyBrief({
 		<FilterPanelProvider hasSheet={showsRows && !searching}>
 			<ThreadListInteraction
 				selectedMessageId={selectedMessageId}
-				onOpen={(id, options) => onSelectMessage?.(id, options)}
+				onOpen={openRow}
 				onDeleteMessages={onDeleteMessages}
 				onSelectionVerb={wizard.start}
 				wizardOpen={wizard.isOpen}

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

@@ -30,9 +30,15 @@ const mount = (
 		disabledHint?: string;
 		onMove?: (destinationMailboxId: string) => void;
 		viewportWidth?: number;
+		orientation?: "portrait" | "landscape";
+		pointer?: "coarse" | "fine";
 	} = {},
 ): DomHarness => {
-	harness = createDomHarness({ viewportWidth: options.viewportWidth });
+	harness = createDomHarness({
+		viewportWidth: options.viewportWidth,
+		orientation: options.orientation,
+		pointer: options.pointer,
+	});
 	if (options.mailboxes) {
 		harness.queryClient.setQueryData(
 			mailboxOperationsListMailboxesQueryKey({
@@ -171,6 +177,35 @@ describe("MoveToTrigger", () => {
 		);
 	});
 
+	it("opens a dialog on a tablet held upright, which is 1024px wide", () => {
+		// Regression: the desktop gate was a bare width, and a large tablet in
+		// portrait is exactly 1024px — it got the desktop popover on a touch
+		// screen with no room for it.
+		const dom = mount({
+			mailboxes: FOLDERS,
+			viewportWidth: 1024,
+			orientation: "portrait",
+			pointer: "coarse",
+		});
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
+			"dialog",
+		);
+	});
+
+	it("opens a popover on the same tablet turned sideways", () => {
+		const dom = mount({
+			mailboxes: FOLDERS,
+			viewportWidth: 1024,
+			orientation: "landscape",
+			pointer: "coarse",
+		});
+		assert.notEqual(
+			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
+			"dialog",
+		);
+	});
+
 	it("asks for the folder list only once the picker is opened", () => {
 		const dom = mount();
 		assert.equal(dom.queryAll("[role=treeitem]").length, 0);

package/src/hooks/useLayoutTier.test.ts

@@ -1,23 +1,79 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { isSinglePaneTier, resolveLayoutTier } from "./useLayoutTier";
+import {
+	isSinglePaneTier,
+	resolveLayoutTier,
+	type ViewportProfile,
+} from "./useLayoutTier";
+
+const mouse = (width: number): ViewportProfile => ({
+	width,
+	orientation: "landscape",
+	pointer: "fine",
+});
+
+const tabletHeldUpright = (width: number): ViewportProfile => ({
+	width,
+	orientation: "portrait",
+	pointer: "coarse",
+});
 
 describe("resolveLayoutTier breakpoints (#784)", () => {
 	it("is phone below 768", () => {
-		assert.equal(resolveLayoutTier(767), "phone");
-		assert.equal(resolveLayoutTier(390), "phone");
-		assert.equal(resolveLayoutTier(0), "phone");
+		assert.equal(resolveLayoutTier(mouse(767)), "phone");
+		assert.equal(resolveLayoutTier(mouse(390)), "phone");
+		assert.equal(resolveLayoutTier(mouse(0)), "phone");
 	});
 
 	it("is tablet from 768 up to 1023", () => {
-		assert.equal(resolveLayoutTier(768), "tablet");
-		assert.equal(resolveLayoutTier(900), "tablet");
-		assert.equal(resolveLayoutTier(1023), "tablet");
+		assert.equal(resolveLayoutTier(mouse(768)), "tablet");
+		assert.equal(resolveLayoutTier(mouse(900)), "tablet");
+		assert.equal(resolveLayoutTier(mouse(1023)), "tablet");
 	});
 
 	it("is desktop from 1024 up", () => {
-		assert.equal(resolveLayoutTier(1024), "desktop");
-		assert.equal(resolveLayoutTier(1440), "desktop");
+		assert.equal(resolveLayoutTier(mouse(1024)), "desktop");
+		assert.equal(resolveLayoutTier(mouse(1440)), "desktop");
+	});
+});
+
+describe("a touch screen held upright is never desktop", () => {
+	// Regression: a large tablet is exactly 1024px wide in portrait, so a width
+	// threshold alone handed it the four-pane desktop shell. Turned sideways
+	// the same device is a desktop surface, and a tall monitor always is.
+	it("is tablet at 1024px in portrait on a touch screen", () => {
+		assert.equal(resolveLayoutTier(tabletHeldUpright(1024)), "tablet");
+	});
+
+	it("is tablet at wider portrait touch widths too", () => {
+		assert.equal(resolveLayoutTier(tabletHeldUpright(1366)), "tablet");
+	});
+
+	it("is desktop at 1024px on the same device turned sideways", () => {
+		assert.equal(
+			resolveLayoutTier({
+				width: 1024,
+				orientation: "landscape",
+				pointer: "coarse",
+			}),
+			"desktop",
+		);
+	});
+
+	it("is desktop on a portrait monitor, which has a fine pointer", () => {
+		assert.equal(
+			resolveLayoutTier({
+				width: 1200,
+				orientation: "portrait",
+				pointer: "fine",
+			}),
+			"desktop",
+		);
+	});
+
+	it("keeps the phone/tablet split on width alone", () => {
+		assert.equal(resolveLayoutTier(tabletHeldUpright(767)), "phone");
+		assert.equal(resolveLayoutTier(tabletHeldUpright(768)), "tablet");
 	});
 });
 
@@ -39,10 +95,14 @@ describe("isSinglePaneTier — compose surface must mount below desktop", () =>
 	});
 
 	it("treats every below-desktop width as single-pane via resolveLayoutTier", () => {
-		assert.equal(isSinglePaneTier(resolveLayoutTier(390)), true);
-		assert.equal(isSinglePaneTier(resolveLayoutTier(768)), true);
-		assert.equal(isSinglePaneTier(resolveLayoutTier(1023)), true);
-		assert.equal(isSinglePaneTier(resolveLayoutTier(1024)), false);
+		assert.equal(isSinglePaneTier(resolveLayoutTier(mouse(390))), true);
+		assert.equal(isSinglePaneTier(resolveLayoutTier(mouse(768))), true);
+		assert.equal(isSinglePaneTier(resolveLayoutTier(mouse(1023))), true);
+		assert.equal(isSinglePaneTier(resolveLayoutTier(mouse(1024))), false);
+		assert.equal(
+			isSinglePaneTier(resolveLayoutTier(tabletHeldUpright(1024))),
+			true,
+		);
 	});
 });
 
@@ -53,21 +113,32 @@ describe("exactly one search field is mounted at every width", () => {
 	// `isSinglePaneTier`, so they are each other's complement by construction —
 	// if either is rewritten to its own expression this fails. Two mounted
 	// fields compete for "/" and for focus (#59); zero leaves no way to search.
-	const mountsTopBarField = (width: number): boolean =>
-		!isSinglePaneTier(resolveLayoutTier(width));
-	const mountsHeaderField = (width: number): boolean =>
-		isSinglePaneTier(resolveLayoutTier(width));
+	const mountsTopBarField = (viewport: ViewportProfile): boolean =>
+		!isSinglePaneTier(resolveLayoutTier(viewport));
+	const mountsHeaderField = (viewport: ViewportProfile): boolean =>
+		isSinglePaneTier(resolveLayoutTier(viewport));
 
-	for (const width of [0, 390, 767, 768, 1023, 1024, 1440]) {
-		it(`mounts one field at ${width}px`, () => {
+	for (const viewport of [
+		mouse(0),
+		mouse(390),
+		mouse(767),
+		mouse(768),
+		mouse(1023),
+		mouse(1024),
+		mouse(1440),
+		tabletHeldUpright(1024),
+	]) {
+		it(`mounts one field at ${viewport.width}px ${viewport.orientation}/${viewport.pointer}`, () => {
 			const fields =
-				Number(mountsTopBarField(width)) + Number(mountsHeaderField(width));
-			assert.equal(fields, 1, `${width}px mounts ${fields} search fields`);
+				Number(mountsTopBarField(viewport)) +
+				Number(mountsHeaderField(viewport));
+			assert.equal(fields, 1, `${viewport.width}px mounts ${fields} fields`);
 		});
 	}
 
 	it("puts the field in the top bar only from desktop up", () => {
-		assert.equal(mountsTopBarField(1023), false);
-		assert.equal(mountsTopBarField(1024), true);
+		assert.equal(mountsTopBarField(mouse(1023)), false);
+		assert.equal(mountsTopBarField(mouse(1024)), true);
+		assert.equal(mountsTopBarField(tabletHeldUpright(1024)), false);
 	});
 });

package/src/hooks/useLayoutTier.ts

@@ -1,32 +1,45 @@
+import { DESKTOP_MEDIA_QUERY, DESKTOP_MIN_WIDTH } from "@remit/ui";
 import { useMediaQuery } from "./useMediaQuery";
 
 /**
  * Responsive layout tiers for the mail shell:
  *   - `phone`   (< 768px)        single pane: list → reading swaps in place.
- *   - `tablet`  (768–1023px)     two panes: list + reading, nav rail is drawer-backed.
- *   - `desktop` (>= 1024px)      full four-pane shell (nav · list · reading · pane 4).
+ *   - `tablet`  (768–1023px, or any width on a touch screen held upright)
+ *                                single pane, nav rail is drawer-backed.
+ *   - `desktop` (>= 1024px, not portrait-on-touch)
+ *                                full four-pane shell (nav · list · reading · pane 4).
  *
  * Pane 4 (intelligence) is desktop-only; `useIsDesktop` stays the pane-4 gate.
  */
 export type LayoutTier = "phone" | "tablet" | "desktop";
 
 export const TABLET_MIN_WIDTH = 768;
-export const DESKTOP_MIN_WIDTH = 1024;
 
-/** Pure breakpoint resolution, so the tier logic is testable without a DOM. */
-export const resolveLayoutTier = (width: number): LayoutTier => {
-	if (width >= DESKTOP_MIN_WIDTH) return "desktop";
+export interface ViewportProfile {
+	width: number;
+	orientation: "portrait" | "landscape";
+	pointer: "coarse" | "fine";
+}
+
+/** Pure tier resolution, so the logic is testable without a DOM. */
+export const resolveLayoutTier = ({
+	width,
+	orientation,
+	pointer,
+}: ViewportProfile): LayoutTier => {
+	const heldUpright = orientation === "portrait" && pointer === "coarse";
+	if (width >= DESKTOP_MIN_WIDTH && !heldUpright) return "desktop";
 	if (width >= TABLET_MIN_WIDTH) return "tablet";
 	return "phone";
 };
 
 /**
  * Whether the mail shell shows a SINGLE pane (no reading pane) at this tier.
- * AppShellSlotted mounts the reading pane only at desktop (≥1024px), so both
- * phone AND tablet are single-pane: the one pane swaps in place between the
- * list, an open thread, and the compose surface. Compose therefore must mount
- * via the single-pane view at tablet too — keying the pane choice off "phone"
- * alone left tablet with no compose surface ("c" / FAB opened nothing).
+ * AppShellSlotted mounts the reading pane only at desktop, so both phone AND
+ * tablet are single-pane: the one pane swaps in place between the list, an
+ * open thread, and the compose surface. Compose therefore must mount via the
+ * single-pane view at tablet too — keying the pane choice off "phone" alone
+ * left tablet with no compose surface ("c" / FAB opened nothing).
  */
 export const isSinglePaneTier = (tier: LayoutTier): boolean =>
 	tier !== "desktop";
@@ -37,7 +50,7 @@ export const isSinglePaneTier = (tier: LayoutTier): boolean =>
  */
 export const useLayoutTier = (): LayoutTier => {
 	const isTabletUp = useMediaQuery(`(min-width: ${TABLET_MIN_WIDTH}px)`);
-	const isDesktop = useMediaQuery(`(min-width: ${DESKTOP_MIN_WIDTH}px)`);
+	const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
 	if (isDesktop) return "desktop";
 	if (isTabletUp) return "tablet";
 	return "phone";

package/src/hooks/useMediaQuery.ts

@@ -1,12 +1,12 @@
+import { DESKTOP_MEDIA_QUERY } from "@remit/ui";
 import { useEffect, useState } from "react";
 
 /**
  * Subscribes to a CSS media query and returns its current `matches` value.
  * SSR-safe: returns `false` on the server / initial render before hydration.
  *
- * Common breakpoint shortcuts (mobile-first):
- *   useMediaQuery("(min-width: 768px)")  // Tailwind md and up
- *   useMediaQuery("(min-width: 1024px)") // Tailwind lg and up
+ * Layout breakpoints are exported by `@remit/ui` alongside the Tailwind
+ * variants they mirror — pass those, not a hand-written width.
  */
 export const useMediaQuery = (query: string): boolean => {
 	const [matches, setMatches] = useState(() => {
@@ -28,12 +28,13 @@ export const useMediaQuery = (query: string): boolean => {
 };
 
 /**
- * True at desktop widths (Tailwind `lg:` and up, ≥1024px). Below this the app
- * renders the single-pane mobile layout: tablet portrait (768px) and phones
- * both fall under here, so they get the stacked list → reading flow with
- * drawer chrome instead of the cramped three-pane desktop grid (#682).
+ * True at desktop (Tailwind `lg:` and up): at least 1024px wide and not a
+ * touch screen held upright. Everything else renders the single-pane mobile
+ * layout — phones, narrow tablets, and a large tablet in portrait, which is
+ * 1024px wide but has no room for the three-pane desktop grid (#682).
  *
- * The CSS-gated mobile chrome (Drawer, ComposeFab) uses `lg:hidden` to match
- * this boundary — keep them in sync if the breakpoint changes.
+ * The CSS-gated mobile chrome (Drawer, ComposeFab) uses `lg:hidden`, and the
+ * `lg` variant is redefined in `@remit/ui`'s token sheet with the same
+ * condition — change `DESKTOP_MEDIA_QUERY` and both move together.
  */
-export const useIsDesktop = (): boolean => useMediaQuery("(min-width: 1024px)");
+export const useIsDesktop = (): boolean => useMediaQuery(DESKTOP_MEDIA_QUERY);

package/src/lib/brief.ts

@@ -56,6 +56,7 @@ export function toThreadRowData(
 		id: thread.messageId,
 		accountId: thread.accountId,
 		mailboxId: thread.mailboxId,
+		threadId: thread.threadId,
 		fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
 		fromEmail: thread.fromEmail ?? "",
 		subject: thread.subject ?? "(No subject)",

package/src/lib/desktop-breakpoint.test.ts

@@ -0,0 +1,84 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+import { DESKTOP_MEDIA_QUERY } from "@remit/ui";
+import { compile } from "tailwindcss";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const entryStylesheets = {
+	app: resolve(here, "../index.css"),
+	workbench: resolve(here, "../../../workbench/.storybook/tailwind.css"),
+};
+
+const loadStylesheet = async (id: string, base: string) => {
+	const require = createRequire(resolve(base, "resolve-from-here.js"));
+	const path =
+		id.startsWith(".") || id.startsWith("/")
+			? resolve(base, id)
+			: resolveCssExport(require, id);
+	return { path, base: dirname(path), content: await readFile(path, "utf8") };
+};
+
+const resolveCssExport = (require: NodeRequire, id: string): string => {
+	const direct = tryResolve(require, id);
+	if (direct?.endsWith(".css")) return direct;
+	return require.resolve(`${id}/index.css`);
+};
+
+const tryResolve = (require: NodeRequire, id: string): string | undefined => {
+	try {
+		return require.resolve(id);
+	} catch {
+		return undefined;
+	}
+};
+
+/**
+ * The media condition Tailwind wraps a utility in, read back off the compiled
+ * stylesheet. Building one candidate at a time keeps a single rule inside the
+ * block, so the prelude immediately precedes it.
+ */
+const compiledMediaConditionFor = async (
+	stylesheet: string,
+	utility: string,
+): Promise<string> => {
+	const compiler = await compile(await readFile(stylesheet, "utf8"), {
+		base: dirname(stylesheet),
+		loadStylesheet,
+	});
+	const css = compiler.build([utility]);
+	const escaped = utility.replace(/:/g, "\\\\:");
+	const match = css.match(
+		new RegExp(`@media ([^\\n{]+?)\\s*\\{\\s*\\.${escaped}\\s*\\{`),
+	);
+	assert.ok(match, `${utility} emitted no media-wrapped rule in ${stylesheet}`);
+	return match[1];
+};
+
+describe("the lg variant and the desktop hooks gate on the same condition", () => {
+	// Regression: the desktop gate used to be a bare 1024px width, so a large
+	// tablet in portrait — exactly 1024px wide — got the four-pane desktop
+	// shell. Two systems encode the gate: DESKTOP_MEDIA_QUERY drives the JS
+	// hooks, and Tailwind's `lg` variant (redefined in @remit/ui's token sheet)
+	// drives the CSS chrome. If either moves alone the app splits in half.
+	for (const [name, stylesheet] of Object.entries(entryStylesheets)) {
+		it(`compiles lg:hidden in the ${name} stylesheet to DESKTOP_MEDIA_QUERY`, async () => {
+			assert.equal(
+				await compiledMediaConditionFor(stylesheet, "lg:hidden"),
+				DESKTOP_MEDIA_QUERY,
+			);
+		});
+	}
+
+	it("excludes a coarse pointer held upright", () => {
+		assert.match(DESKTOP_MEDIA_QUERY, /min-width: 1024px/);
+		assert.match(
+			DESKTOP_MEDIA_QUERY,
+			/not \(\(orientation: portrait\) and \(pointer: coarse\)\)/,
+		);
+	});
+});

package/src/lib/search-result.ts

@@ -73,6 +73,7 @@ export function rowToSearchResult(
 		date: row.timeLabel,
 		unread: !row.isRead,
 		flagged: row.starred === true,
+		...(row.threadId ? { threadId: row.threadId } : {}),
 		...(row.mailboxId ? { mailboxId: row.mailboxId } : {}),
 		...(folder ? { folder } : {}),
 	};

package/src/test-support/dom.ts

@@ -9,10 +9,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import {
-	DEFAULT_VIEWPORT_WIDTH,
-	setViewportWidth,
-} from "../../test-support/dom-env.mjs";
+import { DEFAULT_VIEWPORT, setViewport } from "../../test-support/dom-env.mjs";
 import { ErrorBannerProvider } from "../components/ui/ErrorBannerProvider";
 
 export interface DomHarness {
@@ -46,10 +43,17 @@ export interface DomHarness {
 export interface DomOptions {
 	/** Width `matchMedia` answers against — jsdom has no layout of its own. */
 	viewportWidth?: number;
+	/** Screen posture `matchMedia` answers against — jsdom has no device. */
+	orientation?: "portrait" | "landscape";
+	pointer?: "coarse" | "fine";
 }
 
 export const createDomHarness = (options: DomOptions = {}): DomHarness => {
-	setViewportWidth(options.viewportWidth ?? DEFAULT_VIEWPORT_WIDTH);
+	setViewport({
+		width: options.viewportWidth ?? DEFAULT_VIEWPORT.width,
+		orientation: options.orientation ?? DEFAULT_VIEWPORT.orientation,
+		pointer: options.pointer ?? DEFAULT_VIEWPORT.pointer,
+	});
 	// The test loader transpiles remit-ui's `.tsx` with the classic JSX runtime,
 	// which reads a global `React`. Vite uses the automatic runtime, so this
 	// shim exists only for the test harness.
@@ -106,7 +110,7 @@ export const createDomHarness = (options: DomOptions = {}): DomHarness => {
 			// which otherwise holds the test process open for its full gcTime.
 			queryClient.clear();
 			container.remove();
-			setViewportWidth(DEFAULT_VIEWPORT_WIDTH);
+			setViewport(DEFAULT_VIEWPORT);
 		},
 		html: () => container.innerHTML,
 		text: () => container.textContent ?? "",