@remit/ui 0.0.99 → 0.0.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "type": "module",
   "files": [
     "src"

package/src/components/attachment-list.render.test.ts

@@ -0,0 +1,120 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AttachmentList, type AttachmentListProps } from "./attachment-list.js";
+
+const render = (props: AttachmentListProps): string =>
+	renderToString(createElement(AttachmentList, props));
+
+const item = (
+	overrides: Partial<AttachmentListProps["attachments"][number]>,
+) => ({
+	attachmentId: "part-1",
+	filename: "Quarterly report.pdf",
+	typeLabel: "PDF",
+	sizeOctets: 1024 * 512,
+	download: { status: "idle" } as const,
+	...overrides,
+});
+
+describe("AttachmentList", () => {
+	it("renders nothing when the message has no attachments", () => {
+		assert.equal(render({ attachments: [], onDownload: () => undefined }), "");
+	});
+
+	it("names the file, its type and its size", () => {
+		const html = render({
+			attachments: [item({})],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /Quarterly report\.pdf/);
+		assert.match(html, /PDF/);
+		assert.match(html, /512 KB/);
+	});
+
+	it("gives every attachment a labelled download control", () => {
+		const html = render({
+			attachments: [
+				item({}),
+				item({ attachmentId: "part-2", filename: "photo.png" }),
+			],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /aria-label="Download Quarterly report\.pdf"/);
+		assert.match(html, /aria-label="Download photo\.png"/);
+		assert.match(html, /2 attachments/);
+	});
+
+	it("counts a single attachment in the singular", () => {
+		const html = render({
+			attachments: [item({})],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /1 attachment</);
+	});
+
+	it("isolates the filename's text direction", () => {
+		const html = render({
+			attachments: [item({})],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /<bdi/);
+	});
+
+	it("disables the control while a download is in flight", () => {
+		const html = render({
+			attachments: [item({ download: { status: "downloading" } })],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /disabled=""/);
+	});
+
+	it("states what failed, the likely fix, and offers a retry", () => {
+		const html = render({
+			attachments: [
+				item({
+					download: {
+						status: "failed",
+						title: "Your session expired",
+						detail: "Sign in again, then download it once more.",
+					},
+				}),
+			],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /role="alert"/);
+		assert.match(html, /Your session expired/);
+		assert.match(html, /Sign in again, then download it once more\./);
+		assert.match(html, /Try again/);
+	});
+
+	it("offers a report link when the failure came with one", () => {
+		const html = render({
+			attachments: [
+				item({
+					download: {
+						status: "failed",
+						title: "Couldn't download this attachment",
+						detail: "The server refused the request.",
+						reportUrl:
+							"https://github.com/remit-mail/reader/issues/new?title=x",
+					},
+				}),
+			],
+			onDownload: () => undefined,
+		});
+		assert.match(html, /Report this/);
+		assert.match(html, /issues\/new\?title=x/);
+	});
+
+	it("says so when the server promised an attachment no part describes", () => {
+		const html = render({
+			attachments: [],
+			onDownload: () => undefined,
+			hasUnlistedAttachment: true,
+		});
+		assert.match(html, /carries an attachment, but none of/);
+		assert.match(html, /Attachment</);
+	});
+});

package/src/components/attachment-list.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { type AttachmentItem, AttachmentList } from "./attachment-list.js";
+
+/**
+ * The attachment list on an open message (#683). Every row saves a file, so
+ * every row is a button; the paperclip in the heading is the only glyph and it
+ * is decoration. Nothing here fetches — the app owns the download and hands
+ * back per-row state, which is what makes the failure story below the same
+ * component the app renders.
+ */
+const meta: Meta<typeof AttachmentList> = {
+	title: "Mail/AttachmentList",
+	component: AttachmentList,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AttachmentList>;
+
+const report: AttachmentItem = {
+	attachmentId: "part-2",
+	filename: "Q3 board pack.pdf",
+	typeLabel: "PDF",
+	sizeOctets: 2_411_724,
+	download: { status: "idle" },
+};
+
+export const OneAttachment: Story = {
+	args: {
+		attachments: [report],
+		onDownload: (id) => alert(`Download ${id}`),
+	},
+};
+
+export const SeveralAttachments: Story = {
+	args: {
+		attachments: [
+			report,
+			{
+				attachmentId: "part-3",
+				filename: "site-plan.png",
+				typeLabel: "PNG",
+				sizeOctets: 486_120,
+				download: { status: "idle" },
+			},
+			{
+				attachmentId: "part-4",
+				filename: "notes.txt",
+				typeLabel: "PLAIN",
+				sizeOctets: 812,
+				download: { status: "idle" },
+			},
+			{
+				attachmentId: "part-5",
+				filename: "archive",
+				typeLabel: "FILE",
+				sizeOctets: 1024 ** 3 + 1024 ** 2 * 200,
+				download: { status: "idle" },
+			},
+		],
+		onDownload: (id) => alert(`Download ${id}`),
+	},
+};
+
+export const Downloading: Story = {
+	args: {
+		attachments: [
+			{ ...report, download: { status: "downloading" } },
+			{
+				attachmentId: "part-3",
+				filename: "site-plan.png",
+				typeLabel: "PNG",
+				sizeOctets: 486_120,
+				download: { status: "idle" },
+			},
+		],
+		onDownload: (id) => alert(`Download ${id}`),
+	},
+};
+
+/**
+ * A fetch that failed. The row keeps its control, and the alert underneath
+ * names what broke and what to do about it — a dead click that leaves the user
+ * guessing whether the app, the server or they themselves are at fault is the
+ * outcome this list exists to make impossible.
+ */
+export const DownloadFailed: Story = {
+	args: {
+		attachments: [
+			{
+				...report,
+				download: {
+					status: "failed",
+					title: "This attachment is missing from storage",
+					detail:
+						"Remit has the message but not the file. Re-sync the account from Settings, then try again.",
+					reportUrl: "https://github.com/remit-mail/reader/issues/new",
+				},
+			},
+			{
+				attachmentId: "part-3",
+				filename: "site-plan.png",
+				typeLabel: "PNG",
+				sizeOctets: 486_120,
+				download: { status: "idle" },
+			},
+		],
+		onDownload: (id) => alert(`Download ${id}`),
+	},
+};
+
+/**
+ * Names written to deceive, as `sanitizeAttachmentFilename` leaves them. The
+ * senders wrote `../../../etc/passwd`, `invoice<RLO>gnp.exe` — which renders as
+ * `invoiceexe.png` with the override intact — and 400 characters of padding.
+ * The list shows exactly the name the file is saved under, so what is read is
+ * what lands.
+ */
+export const HostileFilename: Story = {
+	args: {
+		attachments: [
+			{
+				attachmentId: "part-6",
+				filename: "passwd",
+				typeLabel: "FILE",
+				sizeOctets: 3_120,
+				download: { status: "idle" },
+			},
+			{
+				attachmentId: "part-7",
+				filename: "invoicegnp.exe",
+				typeLabel: "FILE",
+				sizeOctets: 118_400,
+				download: { status: "idle" },
+			},
+			{
+				attachmentId: "part-8",
+				filename: `${"long-name-".repeat(11)}report.pdf`,
+				typeLabel: "PDF",
+				sizeOctets: 44_000,
+				download: { status: "idle" },
+			},
+		],
+		onDownload: (id) => alert(`Download ${id}`),
+	},
+};
+
+/**
+ * The mail server flagged the message as carrying an attachment, but no body
+ * part describes one. Saying nothing here is what made the original paperclip
+ * read as broken.
+ */
+export const UnlistedAttachment: Story = {
+	args: {
+		attachments: [],
+		onDownload: () => undefined,
+		hasUnlistedAttachment: true,
+	},
+};

package/src/components/attachment-list.tsx

@@ -0,0 +1,182 @@
+import { AlertCircle, Download, Loader2, Paperclip } from "lucide-react";
+import { formatByteSize } from "../lib/attachment-file.js";
+import { cn } from "../lib/cn.js";
+
+export type AttachmentDownloadState =
+	| { status: "idle" }
+	| { status: "downloading" }
+	| { status: "failed"; title: string; detail: string; reportUrl?: string };
+
+export interface AttachmentItem {
+	attachmentId: string;
+	/**
+	 * The name shown and the name saved — one string for both, already reduced
+	 * by `sanitizeAttachmentFilename`. Anything that displays a different name
+	 * than it writes to disk is the bug this field exists to prevent.
+	 */
+	filename: string;
+	/** Short type label derived from the MIME subtype, e.g. `PDF`. */
+	typeLabel: string;
+	sizeOctets: number;
+	download: AttachmentDownloadState;
+}
+
+export interface AttachmentListProps {
+	attachments: readonly AttachmentItem[];
+	onDownload: (attachmentId: string) => void;
+	/**
+	 * The message is flagged on the server as carrying an attachment that none
+	 * of its body parts describe. Says so rather than rendering nothing, which
+	 * is indistinguishable from a broken app to someone who saw the paperclip
+	 * in the list.
+	 */
+	hasUnlistedAttachment?: boolean;
+	className?: string;
+}
+
+function DownloadFailure({
+	state,
+	onRetry,
+}: {
+	state: Extract<AttachmentDownloadState, { status: "failed" }>;
+	onRetry: () => void;
+}) {
+	return (
+		<div
+			role="alert"
+			data-testid="attachment-error"
+			className="flex items-start gap-2 border-t border-danger/30 bg-danger-soft px-2 py-2 text-xs"
+		>
+			<AlertCircle
+				className="mt-0.5 size-3.5 shrink-0 text-danger"
+				aria-hidden
+			/>
+			<div className="min-w-0 flex-1">
+				<p className="font-medium text-danger">{state.title}</p>
+				<p className="mt-0.5 text-fg-muted">{state.detail}</p>
+			</div>
+			<div className="flex shrink-0 items-center gap-3">
+				<button
+					type="button"
+					onClick={onRetry}
+					className="font-medium text-accent hover:underline"
+				>
+					Try again
+				</button>
+				{state.reportUrl && (
+					<a
+						href={state.reportUrl}
+						target="_blank"
+						rel="noreferrer"
+						className="font-medium text-accent hover:underline"
+					>
+						Report this
+					</a>
+				)}
+			</div>
+		</div>
+	);
+}
+
+/**
+ * The attachments carried by an open message: what each one is, how big it is,
+ * and a control that saves it.
+ *
+ * Every row is a real button. The paperclip in the section heading is the only
+ * glyph here and it is labelled as decoration — a paperclip that looks
+ * pressable and is not reads as a broken download, which is the failure this
+ * list replaces (#683).
+ */
+export function AttachmentList({
+	attachments,
+	onDownload,
+	hasUnlistedAttachment = false,
+	className,
+}: AttachmentListProps) {
+	if (attachments.length === 0 && !hasUnlistedAttachment) return null;
+
+	return (
+		<section
+			aria-label="Attachments"
+			data-testid="attachment-list"
+			className={cn("space-y-1.5", className)}
+		>
+			<h3 className="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+				<Paperclip className="size-3" aria-hidden />
+				{attachments.length === 0
+					? "Attachment"
+					: attachments.length === 1
+						? "1 attachment"
+						: `${attachments.length} attachments`}
+			</h3>
+
+			{attachments.length > 0 && (
+				<ul className="overflow-hidden rounded-sm border border-line bg-surface">
+					{attachments.map((attachment) => {
+						const isDownloading = attachment.download.status === "downloading";
+						return (
+							<li
+								key={attachment.attachmentId}
+								className="border-t border-line first:border-t-0"
+							>
+								<button
+									type="button"
+									onClick={() => onDownload(attachment.attachmentId)}
+									disabled={isDownloading}
+									data-testid="attachment-download"
+									aria-label={`Download ${attachment.filename}`}
+									className="flex w-full items-center gap-2 px-2 py-2 text-left transition-colors hover:bg-surface-sunken disabled:cursor-progress disabled:opacity-60"
+								>
+									<span className="min-w-0 flex-1">
+										{/* <bdi> isolates the name's own direction so a
+										    right-to-left filename cannot reorder the label
+										    around it. */}
+										<bdi
+											className="block truncate text-sm text-fg"
+											title={attachment.filename}
+										>
+											{attachment.filename}
+										</bdi>
+										<span className="block truncate text-2xs text-fg-subtle">
+											{attachment.typeLabel} ·{" "}
+											{formatByteSize(attachment.sizeOctets)}
+										</span>
+									</span>
+									{isDownloading ? (
+										<Loader2
+											className="size-4 shrink-0 animate-spin text-fg-subtle"
+											aria-hidden
+										/>
+									) : (
+										<Download
+											className="size-4 shrink-0 text-fg-subtle"
+											aria-hidden
+										/>
+									)}
+								</button>
+								{attachment.download.status === "failed" && (
+									<DownloadFailure
+										state={attachment.download}
+										onRetry={() => onDownload(attachment.attachmentId)}
+									/>
+								)}
+							</li>
+						);
+					})}
+				</ul>
+			)}
+
+			{hasUnlistedAttachment && (
+				<p
+					role="alert"
+					data-testid="attachment-unlisted"
+					className="rounded-sm border border-line bg-surface px-2 py-2 text-xs text-fg-muted"
+				>
+					The mail server says this message carries an attachment, but none of
+					its parts describe one. Re-sync the account from Settings; if the
+					attachment still does not appear, the message is worth reporting.
+				</p>
+			)}
+		</section>
+	);
+}

package/src/components/compose-mode-toggle.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export type ComposeBodyMode = "rich" | "plain";
+
+export interface ComposeModeToggleProps {
+	mode: ComposeBodyMode;
+	onToggle: () => void;
+}
+
+/**
+ * A text button, not an icon. The two glyphs a reader would reach for are
+ * already spoken for in an editor toolbar — the eraser clears formatting on a
+ * selection and the `A` opens formatting options — and the label reads the same
+ * in both states, so the control never changes under the finger.
+ */
+export const ComposeModeToggle = ({
+	mode,
+	onToggle,
+}: ComposeModeToggleProps) => (
+	<Button
+		variant="ghost"
+		size="md"
+		aria-pressed={mode === "plain"}
+		title="Plain text"
+		onClick={onToggle}
+		data-testid="compose-mode-toggle"
+		className={cn(
+			"min-h-11 shrink-0",
+			mode === "plain" && "bg-accent-2-soft text-accent-2",
+		)}
+	>
+		Plain text
+	</Button>
+);

package/src/components/message-row.render.test.ts

@@ -138,3 +138,34 @@ describe("CompactRow", () => {
 		assert.match(html, /Q3 planning notes/);
 	});
 });
+
+describe("attachment indicator", () => {
+	// A list row cannot download anything — the file lives on the message, which
+	// is one pane over. So the paperclip here is metadata and says so, rather
+	// than sitting inertly where a control belongs (#683).
+	it("marks a comfortable row as carrying an attachment, without a control", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, {
+				thread: { ...base, isRead: true, hasAttachment: true },
+			}),
+		);
+		assert.match(html, /role="img"/);
+		assert.match(html, /aria-label="Has an attachment"/);
+	});
+
+	it("marks a compact row as carrying an attachment", () => {
+		const html = renderToString(
+			createElement(CompactRow, {
+				thread: { ...base, isRead: true, hasAttachment: true },
+			}),
+		);
+		assert.match(html, /aria-label="Has an attachment"/);
+	});
+
+	it("renders no indicator when the message carries nothing", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.doesNotMatch(html, /Has an attachment/);
+	});
+});

package/src/components/message-row.tsx

@@ -98,7 +98,11 @@ export function CompactRowBody({ thread }: { thread: ThreadRowData }) {
 				<span className="text-fg-subtle"> — {thread.snippet}</span>
 			</span>
 			{thread.hasAttachment && (
-				<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+				<Paperclip
+					className="size-3 shrink-0 text-fg-subtle"
+					role="img"
+					aria-label="Has an attachment"
+				/>
 			)}
 			<span className="w-11 shrink-0 text-right text-2xs text-fg-subtle tabular-nums">
 				{thread.timeLabel}
@@ -192,7 +196,11 @@ export function ComfortableRowTextContent({
 					<Star className="size-3 shrink-0 fill-warning text-warning" />
 				)}
 				{thread.hasAttachment && (
-					<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+					<Paperclip
+						className="size-3 shrink-0 text-fg-subtle"
+						role="img"
+						aria-label="Has an attachment"
+					/>
 				)}
 			</span>
 			<span className="flex items-center gap-1.5">