@remit/web-client 0.0.321 → 0.0.323

package/src/components/mail/selection-surface-rollcall.test.ts

@@ -1,270 +0,0 @@
-/**
- * The roll-call no run can take: which surfaces exist, and which function each
- * one's verbs name.
- *
- * Everything a selection surface *does* — the review screen naming what a verb
- * covers, a run reaching the mail server — is driven end to end by
- * `packages/e2e`. What no run observes is a surface that was never wired: a
- * fourth pane growing its own direct handler while every other route was moved,
- * a fourth list rendering the make-filter row with no wizard behind it, or a
- * verb on a bar nobody presses in a spec quietly keeping a direct call. The
- * suite has locators for Delete, Move and Organize and none for Junk or
- * Mark-read, so three of the five are reachable only from here.
- *
- * So this reads the source, and reads it for the census: who raises a bar, what
- * each of its verbs is wired to, who declares a keyboard verb over a selection,
- * who renders the make-filter row. Every census is discovered from the
- * directory rather than listed, so a fourth surface is a failure here until it
- * is wired like the other three.
- */
-
-import assert from "node:assert/strict";
-import { readdirSync, readFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { describe, it } from "node:test";
-import { fileURLToPath } from "node:url";
-
-const here = dirname(fileURLToPath(import.meta.url));
-const read = (file: string): string =>
-	readFileSync(resolve(here, file), "utf8");
-
-const sourceFiles = (): string[] =>
-	readdirSync(here).filter((file) => file.endsWith(".tsx"));
-
-const BAR_VERB_PROPS = [
-	"onDelete",
-	"onMove",
-	"onOrganize",
-	"onJunk",
-	"onMarkRead",
-] as const;
-
-/**
- * How a surface may answer a verb prop. `startWizard`/`wizard.start`/
- * `startSelectionVerb` open the wizard on the verb; `organizeSelection` and
- * `startFromSearch` open it on the search entry, which is the same wizard
- * reached by its other door (#477 1.8). Anything else routes around the review
- * screen that names what the verb covers (#477 1.4).
- */
-const OPENS_THE_WIZARD =
-	/^(startWizard|wizard\.start|startSelectionVerb|organizeSelection|startFromSearch)\b/;
-
-const bracedFrom = (source: string, open: number): string => {
-	let depth = 0;
-	for (let i = open; i < source.length; i++) {
-		if (source[i] === "{") depth++;
-		else if (source[i] === "}") {
-			depth--;
-			if (depth === 0) return source.slice(open, i + 1);
-		}
-	}
-	return source.slice(open);
-};
-
-const namedCallbackBody = (source: string, name: string): string => {
-	const at = source.indexOf(`const ${name} = useCallback(`);
-	if (at === -1) return "";
-	const open = source.indexOf("{", at);
-	return open === -1 ? "" : bracedFrom(source, open);
-};
-
-/**
- * The bar element as written, to its own closing tag. Found by matching tags
- * rather than by stopping at the first `/>` on a line: a nested self-closing
- * element matches that too, so the scan would end early and silently skip
- * whatever a surface happened to write after it.
- */
-const barMarkup = (source: string): string => {
-	const start = source.indexOf("<SelectionTopBar");
-	if (start === -1) return "";
-	let depth = 0;
-	for (let i = start; i < source.length; i++) {
-		if (source[i] === "<" && /[A-Za-z]/.test(source[i + 1] ?? "")) depth++;
-		else if (source.startsWith("/>", i)) {
-			depth--;
-			if (depth === 0) return source.slice(start, i + 2);
-			i++;
-		} else if (source.startsWith("</", i)) depth--;
-	}
-	return "";
-};
-
-/**
- * What a verb prop is wired to, with the whitespace, the guard a verb is
- * offered behind, and the arrow taken off — what is left is the call itself.
- */
-const verbHandler = (bar: string, prop: string): string | undefined => {
-	const assigned = bar.match(new RegExp(`${prop}=\\{([\\s\\S]*?)\\}\\n`))?.[1];
-	if (assigned === undefined) return undefined;
-	return assigned
-		.replace(/\s+/g, " ")
-		.replace(/^.*? \? /, "")
-		.replace(/ : undefined$/, "")
-		.replace(/^\(\)\s*=>\s*/, "")
-		.trim();
-};
-
-const declaredHandlers = (source: string): string[] => {
-	const at = source.indexOf("handlers: {");
-	if (at === -1) return [];
-	return Array.from(
-		bracedFrom(source, source.indexOf("{", at)).matchAll(/\n\t{3}(\w+): /g),
-		(match) => match[1],
-	);
-};
-
-/**
- * What a pane does for one keyboard verb: the handler it wired into the triage
- * layer, plus any callback that handler defers to for its target. A handler
- * that offers the list the press and then falls through to a helper picking the
- * selection is exactly as wrong as one picking it inline, so both are read.
- */
-const paneVerbBody = (source: string, handler: string): string => {
-	const at = source.search(new RegExp(`\\n\\t{3}${handler}: `));
-	if (at === -1) return "";
-	const value =
-		source.slice(at).match(new RegExp(`${handler}: (.*)`))?.[1] ?? "";
-	const body = value.startsWith("(")
-		? bracedFrom(source, source.indexOf("{", at))
-		: namedCallbackBody(source, value.replace(/[,\s].*$/, ""));
-	const helpers = Array.from(body.matchAll(/\b(\w+MessageIds)\(\)/g), (match) =>
-		namedCallbackBody(source, match[1]),
-	);
-	return [body, ...helpers].join("\n");
-};
-
-describe("the surfaces that raise a selection bar", () => {
-	const surfaces = (): string[] =>
-		sourceFiles()
-			.filter((file) => /<SelectionTopBar/.test(read(file)))
-			.sort();
-
-	it("are these three and no others", () => {
-		assert.deepEqual(surfaces(), [
-			"DailyBrief.tsx",
-			"MessageList.tsx",
-			"ThreadListInteraction.tsx",
-		]);
-	});
-
-	for (const file of surfaces()) {
-		it(`${file} routes every verb it offers through the wizard`, () => {
-			const bar = barMarkup(read(file));
-			assert.notEqual(bar, "", `${file} renders a SelectionTopBar`);
-			const offered = BAR_VERB_PROPS.filter((prop) => bar.includes(`${prop}=`));
-			assert.ok(offered.length > 0, `${file} offers at least one verb`);
-			for (const prop of offered) {
-				const handler = verbHandler(bar, prop);
-				assert.ok(handler, `${file}'s ${prop} is wired to something`);
-				assert.match(
-					handler,
-					OPENS_THE_WIZARD,
-					`${file}'s ${prop} must open the wizard, not run the verb`,
-				);
-			}
-		});
-	}
-
-	for (const file of ["DailyBrief.tsx", "MessageList.tsx"]) {
-		it(`${file} drops none of the five verbs from the bar it raises`, () => {
-			const bar = barMarkup(read(file));
-			for (const prop of BAR_VERB_PROPS) {
-				assert.match(bar, new RegExp(`${prop}=`), `${file} offers ${prop}`);
-			}
-		});
-	}
-});
-
-// A pane that runs a verb over `selectedIds` without offering the list the
-// press first is the hole no run can see: the pane's fallback and the list's
-// claim are indistinguishable from outside until a selection outlives the
-// list's commands. That the list claims the press is rendered in
-// `./ThreadListInteraction.test.ts`.
-describe("the panes that answer a keyboard verb over a selection", () => {
-	const PANE_VERB_ROUTE: Record<string, string> = {
-		delete: "delete",
-		toggleRead: "markRead",
-		markJunk: "junk",
-	};
-
-	const panes = (): string[] =>
-		sourceFiles()
-			.filter((file) => read(file).includes("handlers: {"))
-			.sort();
-
-	const routed = (): string[] =>
-		panes()
-			.flatMap((file) =>
-				declaredHandlers(read(file))
-					.filter((handler) => handler in PANE_VERB_ROUTE)
-					.map((handler) => `${file}:${handler}`),
-			)
-			.sort();
-
-	it("are these three panes and no others", () => {
-		assert.deepEqual(panes(), [
-			"BriefPane.tsx",
-			"FlaggedPane.tsx",
-			"MailboxPane.tsx",
-		]);
-	});
-
-	it("declare these seven routed handlers and no others", () => {
-		assert.deepEqual(routed(), [
-			"BriefPane.tsx:delete",
-			"BriefPane.tsx:toggleRead",
-			"FlaggedPane.tsx:delete",
-			"FlaggedPane.tsx:toggleRead",
-			"MailboxPane.tsx:delete",
-			"MailboxPane.tsx:markJunk",
-			"MailboxPane.tsx:toggleRead",
-		]);
-	});
-
-	for (const entry of routed()) {
-		const [file, handler] = entry.split(":");
-		const verb = PANE_VERB_ROUTE[handler];
-
-		it(`${entry} offers the list ${verb} before running anything`, () => {
-			const body = paneVerbBody(read(file), handler);
-			assert.notEqual(body, "", `${handler}'s body was found`);
-			assert.match(body, new RegExp(`requestVerb\\("${verb}"\\)`));
-		});
-
-		it(`${entry} falls back to the focused row, never to a selection`, () => {
-			const body = paneVerbBody(read(file), handler);
-			assert.notEqual(body, "", `${handler}'s body was found`);
-			assert.doesNotMatch(body, /selectedIds/i);
-		});
-	}
-});
-
-// The row is built once by `MailListHeader` and handed down as `makeFilterSlot`,
-// but the wizard answering the step it pushes is mounted per surface. A surface
-// that renders the row without one leaves the press on a URL nothing answers.
-describe("the surfaces that render the make-filter row", () => {
-	const ANSWERED_BY: Record<string, string> = {
-		"DailyBrief.tsx": "DailyBrief.tsx",
-		"MessageList.tsx": "MessageList.tsx",
-		"ThreadListInteraction.tsx": "FlaggedList.tsx",
-	};
-
-	it("are these three and no others", () => {
-		assert.deepEqual(
-			sourceFiles()
-				.filter((file) => /\.makeFilterSlot/.test(read(file)))
-				.sort(),
-			Object.keys(ANSWERED_BY).sort(),
-		);
-	});
-
-	it("each name a file that mounts a wizard to answer the step", () => {
-		for (const [surface, host] of Object.entries(ANSWERED_BY)) {
-			assert.match(
-				read(host),
-				/<SelectionWizardHost/,
-				`${surface} is answered by ${host}`,
-			);
-		}
-	});
-});

package/src/components/settings/QuarantinePanel.render.test.ts

@@ -1,71 +0,0 @@
-/**
- * The pane in Settings › Advanced that is the only place a quarantined message
- * is ever mentioned. Every read state has to say something: an empty list is
- * the normal one, and a failed read is never a blank panel.
- */
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { type QuarantineEntry, quarantineDemoEntries } from "@remit/ui";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { QuarantinePanelView } from "./QuarantinePanel";
-
-// See MessageToolbar.render.test.ts: the SSR test loader transpiles remit-ui
-// `.tsx` with the classic JSX runtime, which needs a global `React`.
-(globalThis as { React?: typeof React }).React = React;
-
-const render = (props: {
-	entries: readonly QuarantineEntry[];
-	isPending: boolean;
-	error: unknown;
-}): string =>
-	renderToString(createElement(QuarantinePanelView, props) as never);
-
-describe("QuarantinePanelView", () => {
-	it("says nothing was set aside rather than rendering nothing", () => {
-		const html = render({ entries: [], isPending: false, error: null });
-		assert.match(html, /Messages set aside/);
-		assert.match(html, /Nothing is set aside/);
-	});
-
-	it("lists a set-aside message with a way to report it", () => {
-		const html = render({
-			entries: quarantineDemoEntries.slice(0, 1),
-			isPending: false,
-			error: null,
-		});
-		assert.match(html, /Cut a bug/);
-		assert.match(html, /could not read/i);
-	});
-
-	it("calls more than one set aside a pattern, not a list", () => {
-		const html = render({
-			entries: quarantineDemoEntries,
-			isPending: false,
-			error: null,
-		});
-		assert.match(
-			html,
-			new RegExp(`${quarantineDemoEntries.length} messages could not be read`),
-		);
-	});
-
-	it("reports a failed read in the pane, with a way to file it", () => {
-		const html = render({
-			entries: [],
-			isPending: false,
-			error: new Error("Failed to fetch"),
-		});
-		assert.match(html, /role="alert"/);
-		assert.match(html, /could not be read/);
-		assert.match(html, /Failed to fetch/);
-		assert.match(html, /Report this/);
-		assert.doesNotMatch(html, /Nothing is set aside/);
-	});
-
-	it("says it is still reading rather than claiming an empty list", () => {
-		const html = render({ entries: [], isPending: true, error: null });
-		assert.match(html, /Checking for messages set aside/);
-		assert.doesNotMatch(html, /Nothing is set aside/);
-	});
-});

package/src/components/settings/QuarantinePanel.tsx

@@ -1,178 +0,0 @@
-/**
- * Settings › Advanced — the messages sync set aside.
- *
- * A quarantined message exists on the server and nowhere else in the app, so
- * this pane is the only place it is ever mentioned. Three states are all
- * visible: the list, the reassurance that there is nothing in it, and the
- * failure to read it at all. None of them is an empty panel.
- */
-import {
-	configOperationsGetConfigOptions,
-	meOperationsListQuarantineOptions,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	Button,
-	QuarantineBugDialog,
-	type QuarantineEntry,
-	QuarantineSection,
-	quarantineIssueTitle,
-	quarantineReportSections,
-} from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import { Bug } from "lucide-react";
-import { useMemo, useState } from "react";
-import { formatErrorMessage } from "@/components/ui/ErrorState";
-import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-import { toQuarantineEntry } from "@/lib/quarantine-entries";
-import type { ResultFolderIndex } from "@/lib/result-folder";
-
-/** Stable identity, so an empty list does not rebuild the memos below. */
-const EMPTY_WIRE_ENTRIES: readonly RemitImapQuarantineResponse[] = [];
-
-function openIssue(url: string): void {
-	window.open(url, "_blank", "noopener,noreferrer");
-}
-
-function issueUrlFor(entry: QuarantineEntry): string {
-	return buildGitHubIssueUrl(
-		buildBugReportContext({
-			quarantine: quarantineReportSections(entry),
-			title: quarantineIssueTitle(entry),
-		}),
-	);
-}
-
-function QuarantineReadFailure({ error }: { error: unknown }) {
-	return (
-		<section role="alert" className="space-y-3">
-			<h2 className="text-sm font-semibold text-fg">Messages set aside</h2>
-			<div className="space-y-2 rounded-sm border border-danger/40 bg-danger-soft px-row-inset py-3">
-				<p className="text-sm font-medium text-danger">
-					The list of set-aside messages could not be read.
-				</p>
-				<p className="break-words text-sm text-fg-muted">
-					{formatErrorMessage(error)}
-				</p>
-				<p className="text-xs text-fg-muted">
-					Mail may still have been set aside — this page cannot say either way
-					until it can read the list. Reporting this gets it fixed.
-				</p>
-				<Button
-					variant="secondary"
-					size="sm"
-					icon={<Bug className="size-3.5" />}
-					onClick={() =>
-						openIssue(buildGitHubIssueUrl(buildBugReportContext()))
-					}
-				>
-					Report this
-				</Button>
-			</div>
-		</section>
-	);
-}
-
-export interface QuarantinePanelViewProps {
-	entries: readonly QuarantineEntry[];
-	isPending: boolean;
-	error: unknown;
-}
-
-export function QuarantinePanelView({
-	entries,
-	isPending,
-	error,
-}: QuarantinePanelViewProps) {
-	const [reporting, setReporting] = useState<QuarantineEntry | null>(null);
-	const [copyFailed, setCopyFailed] = useState(false);
-
-	if (isPending) {
-		return (
-			<p className="animate-pulse text-sm text-fg-subtle">
-				Checking for messages set aside…
-			</p>
-		);
-	}
-
-	if (error) return <QuarantineReadFailure error={error} />;
-
-	const handleCopy = (report: string) => {
-		navigator.clipboard.writeText(report).then(
-			() => {
-				setCopyFailed(false);
-				setReporting(null);
-			},
-			() => {
-				setCopyFailed(true);
-				setReporting(null);
-			},
-		);
-	};
-
-	return (
-		<>
-			{copyFailed && (
-				<p role="alert" className="mb-3 text-sm text-danger">
-					The report was not copied — this browser refused clipboard access. Cut
-					the bug again and use Open on GitHub, which needs no clipboard.
-				</p>
-			)}
-			<QuarantineSection entries={entries} onCutBug={setReporting} />
-			<QuarantineBugDialog
-				entry={reporting}
-				issueUrl={reporting ? issueUrlFor(reporting) : ""}
-				onClose={() => setReporting(null)}
-				onCopy={handleCopy}
-			/>
-		</>
-	);
-}
-
-/**
- * A row names the folder it came from by the leaf of its path, which cannot be
- * cut until that account's own delimiter has arrived. A mailbox the account no
- * longer lists never gets one, and keeps its whole path — `folderLeaf` on an
- * empty delimiter is the path itself.
- */
-function delimiterForMailbox(
-	folders: ResultFolderIndex,
-	mailboxId: string,
-): string {
-	return folders.get(mailboxId)?.hierarchyDelimiter ?? "";
-}
-
-/**
- * The folder names come from the account's mailbox lists, which are a second
- * read — started alongside the quarantine list, never behind it. Until both have
- * landed the pane says it is still reading, because a path cut on a delimiter
- * that has not arrived is a wrong folder name rather than a late one, and a
- * failure on either read is reported rather than papered over with a guess.
- */
-export function QuarantinePanel() {
-	const quarantine = useQuery(meOperationsListQuarantineOptions());
-	const config = useQuery(configOperationsGetConfigOptions());
-	const accounts = useMemo(() => config.data?.accounts ?? [], [config.data]);
-	const folders = useResultFolderIndex(accounts);
-
-	const wireEntries = quarantine.data?.entries ?? EMPTY_WIRE_ENTRIES;
-	const entries = useMemo(
-		() =>
-			wireEntries.map((entry) =>
-				toQuarantineEntry(
-					entry,
-					delimiterForMailbox(folders.index, entry.mailboxId),
-				),
-			),
-		[wireEntries, folders.index],
-	);
-
-	return (
-		<QuarantinePanelView
-			entries={entries}
-			isPending={quarantine.isPending || config.isPending || folders.isPending}
-			error={quarantine.error ?? config.error ?? folders.error}
-		/>
-	);
-}

package/src/components/ui/DropdownMenu.tsx

@@ -1,99 +0,0 @@
-import { cn, useOverlayScope } from "@remit/ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface DropdownMenuProps {
-	trigger: React.ReactNode;
-	children: React.ReactNode;
-	align?: "left" | "right";
-}
-
-export const DropdownMenu = ({
-	trigger,
-	children,
-	align = "right",
-}: DropdownMenuProps) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const menuRef = useRef<HTMLDivElement>(null);
-
-	const handleClickOutside = useCallback((event: MouseEvent) => {
-		if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-			setIsOpen(false);
-		}
-	}, []);
-
-	useOverlayScope({
-		id: "dropdown-menu",
-		open: isOpen,
-		answers: { back: () => setIsOpen(false) },
-	});
-
-	useEffect(() => {
-		if (isOpen) document.addEventListener("mousedown", handleClickOutside);
-		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, [isOpen, handleClickOutside]);
-
-	return (
-		<div ref={menuRef} className="relative">
-			<button
-				type="button"
-				onClick={(e) => {
-					e.stopPropagation();
-					setIsOpen(!isOpen);
-				}}
-				className={cn(
-					"p-1.5 min-h-11 min-w-11 inline-flex items-center justify-center rounded-md transition-colors",
-					"hover:bg-surface-raised text-fg-muted hover:text-fg",
-				)}
-			>
-				{trigger}
-			</button>
-			{isOpen && (
-				<div
-					className={cn(
-						"absolute z-50 mt-1 min-w-[180px] py-1",
-						"bg-surface border border-line rounded-md shadow-lg",
-						align === "right" ? "right-0" : "left-0",
-					)}
-				>
-					{children}
-				</div>
-			)}
-		</div>
-	);
-};
-
-interface DropdownMenuItemProps {
-	onClick: () => void;
-	disabled?: boolean;
-	destructive?: boolean;
-	children: React.ReactNode;
-}
-
-export const DropdownMenuItem = ({
-	onClick,
-	disabled,
-	destructive,
-	children,
-}: DropdownMenuItemProps) => (
-	<button
-		type="button"
-		onClick={(e) => {
-			e.stopPropagation();
-			if (!disabled) onClick();
-		}}
-		disabled={disabled}
-		className={cn(
-			"w-full px-3 py-2 text-left text-sm transition-colors",
-			"flex items-center gap-2",
-			disabled && "opacity-50 cursor-not-allowed",
-			!disabled && "hover:bg-surface-raised",
-			destructive && "text-danger hover:text-danger",
-		)}
-	>
-		{children}
-	</button>
-);
-
-export const DropdownMenuSeparator = () => (
-	<div className="my-1 h-px bg-line" />
-);

package/src/components/ui/EmptyState.tsx

@@ -1,11 +0,0 @@
-interface EmptyStateProps {
-	message: string;
-	icon?: React.ReactNode;
-}
-
-export const EmptyState = ({ message, icon }: EmptyStateProps) => (
-	<div className="flex flex-col items-center justify-center p-8 text-center">
-		{icon && <div className="mb-4 text-fg-muted">{icon}</div>}
-		<p className="text-fg-muted">{message}</p>
-	</div>
-);