@remit/web-client 0.0.125 → 0.0.127

package/harness/index.html

@@ -4,6 +4,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Remit</title>
+    <!--
+      Installability. This is the template the shipped image builds from; the
+      package's top-level index.html is the dev server's and carries the same
+      tags. The two theme colours are the light and dark --canvas tokens from
+      packages/ui/src/tokens.css.
+    -->
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />
+    <link rel="icon" href="/icons/icon-192.png" type="image/png" sizes="192x192" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Remit" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f2e7" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0c1d23" />
     <!--
       Pre-paint theme to avoid a flash-of-wrong-theme on reload. Mirrors
       theme-preference.ts: a stored "remit.theme" of "light"/"dark" wins;

package/index.html

@@ -5,13 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Remit</title>
     <!--
-      Hint the browser to start the TLS handshake to API Gateway in parallel
-      with the JS bundle download. Saves ~150-300ms before the first /config
-      request fires. Hardcoded to the prod API origin; in local dev this
-      preconnect is harmless (it's just a hint and the dev API is proxied
-      through the Vite server).
+      Installability. Keep in sync with harness/index.html, which is the
+      template the shipped image builds from: this one is the dev server's.
+      The two theme colours are the light and dark --canvas tokens from
+      packages/ui/src/tokens.css.
     -->
-    <link rel="preconnect" href="https://cr0f00ych7.execute-api.eu-west-1.amazonaws.com" crossorigin />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />
+    <link rel="icon" href="/icons/icon-192.png" type="image/png" sizes="192x192" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Remit" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f2e7" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0c1d23" />
     <!--
       Pre-paint theme to avoid a flash-of-wrong-theme on reload. Mirrors
       theme-preference.ts: a stored "remit.theme" of "light"/"dark" wins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.125",
+  "version": "0.0.127",
   "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/public/manifest.webmanifest

@@ -0,0 +1,34 @@
+{
+	"id": "/",
+	"name": "Remit",
+	"short_name": "Remit",
+	"description": "An email client you run yourself.",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"lang": "en",
+	"dir": "ltr",
+	"categories": ["productivity"],
+	"background_color": "#f5f5bd",
+	"theme_color": "#0c1d23",
+	"icons": [
+		{
+			"src": "/icons/icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "/icons/icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "/icons/icon-maskable-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}

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/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/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 ?? "",