@remit/web-client 0.0.324 → 0.0.326

package/src/components/config-import/steps.viewport.test.ts

@@ -1,216 +0,0 @@
-/**
- * A report longer than the screen still leaves the reader somewhere to press.
- *
- * On a 1512×827 laptop the dry run of a real configuration drew taller than the
- * viewport. The wizard sat in a fixed box with nothing scrolling, so "Import n
- * changes" was rendered below the fold with no way to reach it and the import
- * could not be finished at all (#1021).
- *
- * The shape that fixes it is structural, and structure is what this file holds:
- * the growable part of a step lives in its own scroll box, the title and the
- * footer actions sit outside that box, and the shell is capped to the viewport
- * so nothing can push the footer off it. jsdom has no layout engine, so the
- * pixels are pinned by the "long report, short viewport" Storybook stories
- * instead — what is asserted here is the arrangement those stories depend on,
- * which is the part a refactor silently takes away.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { createElement } from "react";
-import type { ReportSection } from "../../lib/config-import";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import type { ImportedAccount } from "./steps";
-import { StepCredentialsOverview, StepDryRunReport } from "./steps";
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-const LONG_REPORT: ReportSection[] = [
-	{
-		id: "accounts",
-		title: "Accounts",
-		entries: Array.from({ length: 40 }, (_, index) => ({
-			id: `accounts-${index}`,
-			label: `mailbox-${index}@example.test`,
-			verdict: "created" as const,
-		})),
-	},
-	{
-		id: "filters",
-		title: "Rules & filters",
-		entries: Array.from({ length: 40 }, (_, index) => ({
-			id: `filters-${index}`,
-			label: `Rule ${index}`,
-			verdict: "skipped" as const,
-			reason: "The folder this rule files into is not here yet.",
-		})),
-	},
-];
-
-const MANY_ACCOUNTS: ImportedAccount[] = Array.from(
-	{ length: 30 },
-	(_, index) => ({
-		accountId: `acct-${index}`,
-		address: `mailbox-${index}@example.test`,
-		displayName: `Mailbox ${index}`,
-		connector: "imap" as const,
-		server: "imap.example.test",
-		state: "needed" as const,
-	}),
-);
-
-const classes = (element: Element): string[] =>
-	(element.getAttribute("class") ?? "").split(/\s+/).filter(Boolean);
-
-const shellOf = (mounted: DomHarness): Element => {
-	const body = mounted.query("[data-testid=wizard-body]");
-	assert.ok(body, "the step renders a wizard body region");
-	const shell = body.closest("div.h-dvh");
-	assert.ok(shell, "the wizard body sits inside the shell root");
-	return shell;
-};
-
-const FOCUSABLE =
-	'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
-
-describe("a wizard step longer than the viewport (#1021)", () => {
-	it("puts the whole report inside the scroll box and the footer outside it", () => {
-		harness = createDomHarness({ viewportWidth: 1512 });
-		harness.render(
-			createElement(StepDryRunReport, {
-				sections: LONG_REPORT,
-				fileName: "reader-config.example.json",
-			}),
-		);
-
-		const body = harness.query("[data-testid=wizard-body]");
-		const footer = harness.query("[data-testid=wizard-footer]");
-		assert.ok(body && footer);
-
-		// The rail above the card renders a list item per step, so the count is
-		// the assertion: all 80 report rows are inside the scroll box, and a row
-		// left outside it would show up as a shortfall here.
-		assert.equal(
-			body.querySelectorAll("li").length,
-			80,
-			"every report row grows inside the scroll box",
-		);
-
-		assert.ok(
-			!body.contains(footer),
-			"the footer sits outside the scroll box, so the report cannot scroll it away",
-		);
-		const primary = harness.byText("button", "Import");
-		assert.ok(
-			footer.contains(primary),
-			"the primary action lives in the footer",
-		);
-	});
-
-	it("scrolls the body and never the shell", () => {
-		harness = createDomHarness({ viewportWidth: 1512 });
-		harness.render(
-			createElement(StepDryRunReport, {
-				sections: LONG_REPORT,
-				fileName: "reader-config.example.json",
-			}),
-		);
-
-		const body = harness.query("[data-testid=wizard-body]");
-		assert.ok(body);
-		const bodyClasses = classes(body);
-		assert.ok(
-			bodyClasses.includes("overflow-y-auto"),
-			"the body region is the scrolling element",
-		);
-		assert.ok(
-			bodyClasses.includes("min-h-0"),
-			"the body region can shrink below its content, or it never scrolls",
-		);
-
-		const shell = shellOf(harness);
-		assert.ok(
-			classes(shell).includes("overflow-hidden"),
-			"the shell root does not scroll — the footer would ride out of view with it",
-		);
-		assert.deepEqual(
-			harness
-				.queryAll('[class*="overflow-y-auto"]')
-				.map((element) => element.getAttribute("data-testid")),
-			["wizard-body"],
-			"exactly one region scrolls, and it is the one holding the growable content",
-		);
-	});
-
-	it("caps the shell at the viewport rather than growing past it", () => {
-		harness = createDomHarness({ viewportWidth: 1512 });
-		harness.render(
-			createElement(StepDryRunReport, {
-				sections: LONG_REPORT,
-				fileName: "reader-config.example.json",
-			}),
-		);
-
-		const shellClasses = classes(shellOf(harness));
-		assert.ok(
-			shellClasses.includes("h-dvh"),
-			"the shell is exactly the viewport, so no content length can extend it",
-		);
-		assert.ok(
-			!shellClasses.some((token) => token.startsWith("min-h-")),
-			"a minimum height would let the content push the shell past the fold again",
-		);
-	});
-
-	it("keeps the footer action last in the tab order", () => {
-		harness = createDomHarness({ viewportWidth: 1512 });
-		harness.render(
-			createElement(StepDryRunReport, {
-				sections: LONG_REPORT,
-				fileName: "reader-config.example.json",
-			}),
-		);
-
-		const footer = harness.query("[data-testid=wizard-footer]");
-		assert.ok(footer);
-		const focusable = harness.queryAll(FOCUSABLE);
-		assert.ok(focusable.length >= 2, "the step has controls to tab through");
-		assert.ok(
-			focusable.every((element) => {
-				const order = element.getAttribute("tabindex");
-				return order === null || Number.parseInt(order, 10) <= 0;
-			}),
-			"nothing claims a positive tabindex, so DOM order is the tab order",
-		);
-		const last = focusable[focusable.length - 1];
-		assert.ok(
-			last && footer.contains(last),
-			"tabbing forward through the report ends on the footer action",
-		);
-	});
-
-	it("holds the same shape for a long list of accounts needing credentials", () => {
-		harness = createDomHarness({ viewportWidth: 1512 });
-		harness.render(
-			createElement(StepCredentialsOverview, { accounts: MANY_ACCOUNTS }),
-		);
-
-		const body = harness.query("[data-testid=wizard-body]");
-		const footer = harness.query("[data-testid=wizard-footer]");
-		assert.ok(body && footer);
-		assert.equal(
-			body.querySelectorAll("li").length,
-			MANY_ACCOUNTS.length,
-			"the account list grows inside the scroll box",
-		);
-		assert.ok(
-			footer.contains(harness.byText("button", "Finish later")),
-			"the way on stays pinned however many accounts the file carried",
-		);
-	});
-});

package/src/components/layout/AppShellSkeleton.tsx

@@ -1,53 +0,0 @@
-/**
- * AppShellSkeleton — structural placeholder shown on cold load.
- *
- * Renders the inbox chrome (nav rail + list rows) immediately, before the
- * auth session hydrates and the config query resolves, so the user sees the
- * shape of the app instead of a blank screen or a "Loading..." string. The
- * real list components swap in once their own data arrives.
- */
-
-const NavRailSkeleton = () => (
-	<div className="hidden h-full w-[17%] min-w-40 max-w-64 shrink-0 flex-col gap-1 border-r border-line p-3 md:flex">
-		<div className="mb-3 h-6 w-24 rounded bg-surface-sunken" />
-		{Array.from({ length: 6 }).map((_, i) => (
-			<div
-				// biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable id
-				key={i}
-				className="flex items-center gap-2 py-1.5"
-			>
-				<div className="size-5 shrink-0 rounded bg-surface-sunken" />
-				<div className="h-3.5 flex-1 rounded bg-surface-sunken" />
-			</div>
-		))}
-	</div>
-);
-
-const ListRowsSkeleton = () => (
-	<div className="min-w-0 flex-1">
-		{Array.from({ length: 8 }).map((_, i) => (
-			<div
-				// biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable id
-				key={i}
-				className="flex items-start gap-3 border-b border-line py-2 pl-5 pr-4"
-			>
-				<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
-				<div className="flex-1 space-y-1.5">
-					<div className="flex justify-between gap-2">
-						<div className="h-3.5 w-28 rounded bg-surface-sunken" />
-						<div className="h-3 w-12 rounded bg-surface-sunken" />
-					</div>
-					<div className="h-3.5 w-48 rounded bg-surface-sunken" />
-					<div className="h-3 w-full rounded bg-surface-sunken" />
-				</div>
-			</div>
-		))}
-	</div>
-);
-
-export const AppShellSkeleton = () => (
-	<div className="flex h-full animate-pulse bg-canvas" aria-hidden="true">
-		<NavRailSkeleton />
-		<ListRowsSkeleton />
-	</div>
-);

package/src/components/layout/ComposeFab.tsx

@@ -1,22 +0,0 @@
-import { ComposeFab as ComposeFabButton } from "@remit/ui";
-import { useOpenCompose, useOpensDetail } from "@/routing";
-
-/**
- * Floating Action Button for composing a new message. Mobile-only.
- *
- * Layout follows Material 3: 56×56 surface, 16px from the right and
- * bottom edges (plus the iOS safe-area inset). Hidden when either:
- *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
- *     `/mail` shell also stops mounting the FAB above that width; the
- *     `lg:hidden` class covers the pre-hydration frame.
- *   - The single pane has something open — a conversation, or compose itself.
- *     Every list says so in its path.
- */
-export const ComposeFab = () => {
-	const compose = useOpenCompose();
-	const opensDetail = useOpensDetail();
-
-	if (opensDetail) return null;
-
-	return <ComposeFabButton onCompose={compose} />;
-};

package/src/components/layout/Drawer.focus.test.ts

@@ -1,253 +0,0 @@
-/**
- * The drawer's focus trap (#747).
- *
- * The drawer is `aria-modal`, so a screen reader offers nothing outside it and
- * the scrim puts everything outside it out of a pointer's reach. Tab has to
- * agree with both: it cycles inside the drawer, and the ring is the controls a
- * reader can actually see and press — not every element that happens to match
- * a focusable selector.
- */
-import assert from "node:assert/strict";
-import { afterEach, beforeEach, describe, it } from "node:test";
-import {
-	act,
-	createElement,
-	Fragment,
-	type ReactElement,
-	type ReactNode,
-} from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { Drawer } from "./Drawer";
-
-let container: HTMLElement;
-let root: Root;
-let outside: HTMLButtonElement;
-
-const press = (key: string, shiftKey = false): void => {
-	act(() => {
-		document.dispatchEvent(
-			new KeyboardEvent("keydown", { key, shiftKey, bubbles: true }),
-		);
-	});
-};
-
-const named = (label: string): HTMLElement => {
-	const found = container.querySelector<HTMLElement>(`[data-name="${label}"]`);
-	if (!found) throw new Error(`expected an element named ${label}`);
-	return found;
-};
-
-const closeButton = (): HTMLElement => {
-	const buttons = container.querySelectorAll<HTMLElement>(
-		'.safe-area-frame [aria-label="Close menu"]',
-	);
-	const found = buttons[0];
-	if (!found) throw new Error("expected the drawer's close button");
-	return found;
-};
-
-const render = (isOpen: boolean, children: ReactNode): void => {
-	act(() => {
-		root.render(
-			createElement(Drawer, {
-				isOpen,
-				onClose: () => undefined,
-				ariaLabel: "Message details",
-				side: "right",
-				children,
-			}),
-		);
-	});
-};
-
-const open = (children: ReactNode): void => render(true, children);
-const close = (): void => render(false, null);
-
-const button = (
-	name: string,
-	props: Record<string, unknown> = {},
-): ReactElement =>
-	createElement(
-		"button",
-		{ key: name, type: "button", "data-name": name, ...props },
-		name,
-	);
-
-beforeEach(() => {
-	container = document.getElementById("root") as unknown as HTMLElement;
-	container.innerHTML = "";
-	outside = document.createElement("button");
-	outside.type = "button";
-	outside.textContent = "Toolbar toggle";
-	document.body.appendChild(outside);
-	root = createRoot(container);
-});
-
-afterEach(() => {
-	act(() => root.unmount());
-	outside.remove();
-});
-
-describe("Drawer keeps Tab inside itself", () => {
-	it("wraps backwards from the first element to the last", () => {
-		open(createElement(Fragment, null, button("alpha"), button("omega")));
-		closeButton().focus();
-
-		press("Tab", true);
-
-		assert.equal(document.activeElement, named("omega"));
-	});
-
-	it("wraps forwards from the last element to the first", () => {
-		open(createElement(Fragment, null, button("alpha"), button("omega")));
-		named("omega").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, closeButton());
-	});
-
-	it("leaves focus outside the drawer alone", () => {
-		open(createElement(Fragment, null, button("alpha")));
-		outside.focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, outside);
-	});
-
-	it("leaves focus outside the drawer alone on shift+Tab too", () => {
-		open(createElement(Fragment, null, button("alpha")));
-		outside.focus();
-
-		press("Tab", true);
-
-		assert.equal(document.activeElement, outside);
-	});
-
-	it("leaves an interior Tab to the browser", () => {
-		open(createElement(Fragment, null, button("alpha"), button("omega")));
-		named("alpha").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, named("alpha"));
-	});
-});
-
-describe("Drawer's ring is what a reader can reach", () => {
-	it("skips a scrim that took itself out of the tab order", () => {
-		open(
-			createElement(
-				Fragment,
-				null,
-				button("backdrop", { tabIndex: -1 }),
-				button("omega"),
-			),
-		);
-		named("omega").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, closeButton());
-	});
-
-	it("skips disabled, aria-disabled and hidden controls", () => {
-		open(
-			createElement(
-				Fragment,
-				null,
-				button("omega"),
-				button("off", { disabled: true }),
-				button("stated-off", { "aria-disabled": "true" }),
-				button("gone", { style: { display: "none" } }),
-				button("inerted", { inert: true }),
-			),
-		);
-		named("omega").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, closeButton());
-	});
-
-	/**
-	 * The intelligence pane's reclassify dialog renders inside the drawer, over
-	 * its panel. A ring scoped to the panel puts that dialog's Cancel last and
-	 * keeps every control behind its backdrop in the cycle, so Tab walks onto
-	 * buttons no pointer can reach — the very thing the trap exists to prevent.
-	 */
-	it("hands the ring to a modal opened inside it", () => {
-		open(
-			createElement(
-				Fragment,
-				null,
-				button("under-the-backdrop"),
-				createElement(
-					"div",
-					{
-						key: "nested",
-						role: "dialog",
-						"aria-modal": "true",
-						"aria-label": "Reclassify sender",
-					},
-					button("automated"),
-					button("Cancel"),
-				),
-			),
-		);
-		named("Cancel").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, named("automated"));
-
-		press("Tab", true);
-
-		assert.equal(document.activeElement, named("Cancel"));
-	});
-
-	/**
-	 * A dialog that does not take the shared trap leaves focus on the drawer
-	 * control that opened it — now behind that dialog's backdrop. Tab has to
-	 * enter the dialog's ring rather than walk the controls the backdrop covers.
-	 */
-	it("pulls focus behind a nested dialog's backdrop into its ring", () => {
-		const nestedDialog = createElement(
-			"div",
-			{
-				key: "nested",
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": "Reclassify sender",
-			},
-			button("automated"),
-			button("Cancel"),
-		);
-
-		open(createElement(Fragment, null, button("trigger"), nestedDialog));
-		named("trigger").focus();
-
-		press("Tab");
-
-		assert.equal(document.activeElement, named("automated"));
-
-		named("trigger").focus();
-
-		press("Tab", true);
-
-		assert.equal(document.activeElement, named("Cancel"));
-	});
-});
-
-describe("Drawer gives focus back on the way out", () => {
-	it("returns it to whatever held it when the drawer went up", () => {
-		outside.focus();
-		open(createElement(Fragment, null, button("alpha")));
-		assert.equal(document.activeElement, closeButton());
-
-		close();
-
-		assert.equal(document.activeElement, outside);
-	});
-});

package/src/components/layout/Drawer.tsx

@@ -1,108 +0,0 @@
-import {
-	cn,
-	type OverlayAnswers,
-	useModalFocus,
-	useOverlayScope,
-} from "@remit/ui";
-import { X } from "lucide-react";
-import { type ReactNode, useEffect, useRef } from "react";
-
-interface DrawerProps {
-	isOpen: boolean;
-	onClose: () => void;
-	children: ReactNode;
-	ariaLabel?: string;
-	side?: "left" | "right";
-	widthClassName?: string;
-	/**
-	 * Shortcuts the drawer keeps serving while it is up, beyond Escape. The key
-	 * that opened it is the one that has to reach it — `i` closes the
-	 * intelligence drawer it opened — and everything left undeclared is
-	 * contained, so no verb acts on the list behind the scrim.
-	 */
-	answers?: OverlayAnswers;
-}
-
-/**
- * Modal navigation drawer. Slides in from the side with a scrim behind.
- * Dismissed by scrim tap, escape key, or the close button. Focus moves into
- * the drawer on open and returns to the previously focused element on close.
- *
- * Visibility is `isOpen` alone, at every width: the drawer is the intelligence
- * surface wherever the rail has no room, which includes the two-pane desktop
- * band between 1024 and 1280px.
- */
-export const Drawer = ({
-	isOpen,
-	onClose,
-	children,
-	ariaLabel = "Navigation",
-	side = "left",
-	widthClassName = "w-[80vw] max-w-[320px]",
-	answers,
-}: DrawerProps) => {
-	const drawerRef = useRef<HTMLDivElement>(null);
-
-	useOverlayScope({
-		id: "drawer",
-		open: isOpen,
-		answers: { back: onClose, ...answers },
-	});
-
-	useModalFocus(drawerRef, isOpen);
-
-	useEffect(() => {
-		if (!isOpen) return;
-		const previousOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = previousOverflow;
-		};
-	}, [isOpen]);
-
-	if (!isOpen) return null;
-
-	const sideClasses =
-		side === "left"
-			? "left-0 border-r animate-in slide-in-from-left duration-150"
-			: "right-0 border-l animate-in slide-in-from-right duration-150";
-
-	return (
-		<div
-			className="fixed inset-0 z-50"
-			role="dialog"
-			aria-modal="true"
-			aria-label={ariaLabel}
-		>
-			{/* Scrim */}
-			<button
-				type="button"
-				aria-label="Close menu"
-				onClick={onClose}
-				className="absolute inset-0 bg-black/40 animate-in fade-in duration-150 cursor-default"
-			/>
-			{/* Drawer panel */}
-			<div
-				ref={drawerRef}
-				tabIndex={-1}
-				className={cn(
-					"safe-area-frame absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col",
-					widthClassName,
-					sideClasses,
-				)}
-			>
-				<div className="flex items-center justify-end h-12 px-2 border-b border-line shrink-0">
-					<button
-						type="button"
-						onClick={onClose}
-						className="p-2 rounded-md hover:bg-surface-raised transition-colors min-h-11 min-w-11 inline-flex items-center justify-center"
-						aria-label="Close menu"
-					>
-						<X className="size-5" />
-					</button>
-				</div>
-				<div className="flex-1 overflow-y-auto">{children}</div>
-			</div>
-		</div>
-	);
-};