@remit/web-client 0.0.1

package/src/components/settings/account-form-helpers.ts

@@ -0,0 +1,105 @@
+/**
+ * Default SMTP defaults applied when auto-filling from IMAP at save time.
+ *
+ * STARTTLS on port 587 is the standard for almost every provider that
+ * exposes both IMAP and SMTP under the same domain (Gmail, Fastmail,
+ * Outlook, generic IMAP+SMTP hosts). Users with a different setup can
+ * still override before saving — auto-fill never overwrites a value the
+ * user already typed.
+ */
+const DEFAULT_SMTP_PORT = 587;
+const DEFAULT_SMTP_TLS = false;
+const DEFAULT_SMTP_STARTTLS = true;
+
+/**
+ * Derive an SMTP hostname from an IMAP hostname using the convention
+ * `imap.example.com` -> `smtp.example.com`. If the host does not start
+ * with the `imap.` prefix it is returned as-is so the caller can decide
+ * whether to use it.
+ */
+export const deriveSmtpHostFromImap = (imapHost: string): string =>
+	imapHost.replace(/^imap\./i, "smtp.");
+
+interface SmtpAutoFillInput {
+	imapHost: string;
+	smtpHost?: string;
+	smtpPort?: number;
+	smtpTls?: boolean;
+	smtpStartTls?: boolean;
+}
+
+interface SmtpAutoFillOutput {
+	smtpHost: string;
+	smtpPort: number;
+	smtpTls: boolean;
+	smtpStartTls: boolean;
+}
+
+/**
+ * Compute the SMTP fields that should replace the user's current values
+ * when the SMTP host is blank but IMAP is filled. Returns `null` when
+ * no auto-fill should happen — either because the user already provided
+ * an SMTP host (we never overwrite explicit input) or because IMAP is
+ * also blank (nothing to derive from).
+ */
+export const computeSmtpAutoFill = (
+	values: SmtpAutoFillInput,
+): SmtpAutoFillOutput | null => {
+	const smtpHostTrimmed = values.smtpHost?.trim() ?? "";
+	if (smtpHostTrimmed.length > 0) return null;
+
+	const imapHostTrimmed = values.imapHost.trim();
+	if (imapHostTrimmed.length === 0) return null;
+
+	return {
+		smtpHost: deriveSmtpHostFromImap(imapHostTrimmed),
+		smtpPort: DEFAULT_SMTP_PORT,
+		smtpTls: DEFAULT_SMTP_TLS,
+		smtpStartTls: DEFAULT_SMTP_STARTTLS,
+	};
+};
+
+/**
+ * `true` when a connection-test error message reads as an authentication
+ * failure rather than a network/configuration problem. Mirrors the
+ * keyword detection in the onboarding wizard so both surfaces agree on
+ * what counts as "wrong credentials".
+ */
+export const isAuthError = (message: string | undefined): boolean => {
+	const m = message?.toLowerCase() ?? "";
+	return (
+		m.includes("auth") ||
+		m.includes("login") ||
+		m.includes("535") ||
+		m.includes("credential")
+	);
+};
+
+/**
+ * Append the per-provider app-password hint to an auth-failure error.
+ * Preset providers reject the normal account password, which surfaces as
+ * "wrong password"; the hint tells the user they need an app password.
+ * Returns the original message unchanged when it is not an auth error.
+ */
+export const appendAppPasswordHint = (
+	message: string | undefined,
+	hint: string | undefined,
+): string | undefined => {
+	if (!message) return message;
+	if (!hint) return message;
+	if (!isAuthError(message)) return message;
+	return `${message} — ${hint}`;
+};
+
+/**
+ * `true` when an account row should display the "Can't send mail —
+ * configure SMTP" warning. RFC 032 Tier 2: send capability is the explicit
+ * `smtpEnabled` marker, not inferred from `smtpHost` presence. Rows written
+ * before this field existed coalesce to `false` (treated as missing), so
+ * legacy accounts surface the same affordance as new ones.
+ */
+export const accountIsMissingSmtp = (account: {
+	smtpEnabled?: boolean;
+}): boolean => {
+	return account.smtpEnabled !== true;
+};

package/src/components/ui/AppVersion.tsx

@@ -0,0 +1,50 @@
+import {
+	APP_BUILD_TIME,
+	APP_SHORT_SHA,
+	GITHUB_COMMIT_URL,
+} from "@/lib/app-info";
+
+export interface AppVersionProps {
+	/** Override SHA for testing/Storybook. Defaults to the build-time constant. */
+	sha?: string;
+	/** Override commit URL. Defaults to the GitHub commit link. */
+	commitUrl?: string;
+	/** Override build time ISO string. Defaults to the build-time constant. */
+	buildTime?: string;
+}
+
+function formatBuildTime(iso: string): string {
+	try {
+		return new Date(iso).toLocaleString(undefined, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+export function AppVersion({
+	sha = APP_SHORT_SHA,
+	commitUrl = GITHUB_COMMIT_URL,
+	buildTime = APP_BUILD_TIME,
+}: AppVersionProps) {
+	return (
+		<p className="text-xs text-fg-subtle">
+			Version{" "}
+			<a
+				href={commitUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				className="font-mono hover:text-fg-muted hover:underline"
+			>
+				{sha}
+			</a>
+			{" · "}
+			<span>Built {formatBuildTime(buildTime)}</span>
+		</p>
+	);
+}

package/src/components/ui/BugReportButton.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@remit/ui";
+import { Bug } from "lucide-react";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+
+interface BugReportButtonProps {
+	/**
+	 * `icon` (default) is the compact ghost icon button used in the desktop
+	 * message toolbar. `drawer` renders a full-width labeled row to sit beside
+	 * Settings in the mobile drawer footer, where an icon-only control would be
+	 * unreachable/ambiguous (#685).
+	 */
+	variant?: "icon" | "drawer";
+}
+
+const openBugReport = () => {
+	const ctx = buildBugReportContext();
+	const url = buildGitHubIssueUrl(ctx);
+	window.open(url, "_blank", "noopener,noreferrer");
+};
+
+export function BugReportButton({ variant = "icon" }: BugReportButtonProps) {
+	if (variant === "drawer") {
+		return (
+			<button
+				type="button"
+				onClick={openBugReport}
+				className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+			>
+				<Bug className="size-4 shrink-0" />
+				<span className="flex-1 truncate text-left">Report a bug</span>
+			</button>
+		);
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Bug className="size-4" />}
+			title="Report a bug"
+			aria-label="Report a bug"
+			onClick={openBugReport}
+		/>
+	);
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface ConfirmDialogProps {
+	isOpen: boolean;
+	title: string;
+	/** Optional supporting line under the title. */
+	description?: string;
+	confirmLabel: string;
+	cancelLabel?: string;
+	/** Style the confirm button as a destructive action. */
+	destructive?: boolean;
+	/** Disable the confirm button (e.g. while a mutation is in flight). */
+	isBusy?: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+/**
+ * Minimal accessible confirmation dialog. No existing Dialog/ConfirmDialog
+ * primitive ships in the web client (only the bespoke KeyboardShortcutsModal
+ * and SlidePanel), so this is a small reusable one matching their Tailwind +
+ * overlay conventions. Esc cancels, the backdrop cancels, Cancel is focused on
+ * open, and the confirm/cancel pair is the only focusable content so the focus
+ * stays within the dialog.
+ */
+export const ConfirmDialog = ({
+	isOpen,
+	title,
+	description,
+	confirmLabel,
+	cancelLabel = "Cancel",
+	destructive = false,
+	isBusy = false,
+	onConfirm,
+	onCancel,
+}: ConfirmDialogProps) => {
+	const cancelRef = useRef<HTMLButtonElement>(null);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				event.stopImmediatePropagation();
+				onCancel();
+			}
+		},
+		[onCancel],
+	);
+
+	useEffect(() => {
+		if (!isOpen) return;
+		// Capture phase so Esc closes the dialog before any list-level Esc
+		// handler (e.g. clearSelection) also fires on the same keystroke.
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
+	}, [isOpen, handleKeyDown]);
+
+	useEffect(() => {
+		if (isOpen) {
+			cancelRef.current?.focus();
+		}
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center"
+			aria-hidden="true"
+			onClick={onCancel}
+		>
+			{/* Backdrop */}
+			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+
+			{/* Dialog */}
+			<div
+				role="dialog"
+				aria-modal="true"
+				aria-label={title}
+				className={cn(
+					"relative z-10 w-full max-w-sm",
+					"bg-surface border border-line rounded-sm shadow-lg",
+					"p-6",
+				)}
+				onClick={(e) => e.stopPropagation()}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<h2 className="text-lg font-semibold">{title}</h2>
+				{description && (
+					<p className="mt-2 text-sm text-fg-muted">{description}</p>
+				)}
+
+				<div className="mt-6 flex items-center justify-end gap-2">
+					<button
+						ref={cancelRef}
+						type="button"
+						onClick={onCancel}
+						className={cn(
+							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
+							"border border-line hover:bg-surface-raised",
+						)}
+					>
+						{cancelLabel}
+					</button>
+					<button
+						type="button"
+						onClick={onConfirm}
+						disabled={isBusy}
+						className={cn(
+							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
+							destructive
+								? "bg-danger text-canvas hover:bg-danger/90"
+								: "bg-accent text-accent-fg hover:bg-accent-hover",
+							"disabled:opacity-50 disabled:cursor-not-allowed",
+						)}
+					>
+						{confirmLabel}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+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);
+		}
+	}, []);
+
+	const handleKeyDown = useCallback((event: KeyboardEvent) => {
+		if (event.key === "Escape") {
+			setIsOpen(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			document.addEventListener("keydown", handleKeyDown);
+		}
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [isOpen, handleClickOutside, handleKeyDown]);
+
+	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

@@ -0,0 +1,11 @@
+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>
+);

package/src/components/ui/ErrorBanner.tsx

@@ -0,0 +1,88 @@
+import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { ErrorBannerSeverity } from "./error-banners.js";
+
+interface ErrorBannerProps {
+	id: string;
+	severity: ErrorBannerSeverity;
+	title: string;
+	detail?: string;
+	onDismiss: (id: string) => void;
+}
+
+const SEVERITY_STYLES: Record<
+	ErrorBannerSeverity,
+	{ container: string; icon: string; title: string }
+> = {
+	error: {
+		container: "border-danger/50 bg-danger/10 dark:bg-danger/20",
+		icon: "text-danger",
+		title: "text-danger",
+	},
+	warning: {
+		container: "border-warning/50 bg-warning/10",
+		icon: "text-warning",
+		title: "text-warning",
+	},
+	info: {
+		container: "border-accent-2/50 bg-accent-2-soft",
+		icon: "text-accent-2",
+		title: "text-accent-2",
+	},
+};
+
+const SEVERITY_ICONS: Record<
+	ErrorBannerSeverity,
+	typeof AlertCircle | typeof AlertTriangle | typeof Info
+> = {
+	error: AlertCircle,
+	warning: AlertTriangle,
+	info: Info,
+};
+
+const SEVERITY_LABEL: Record<ErrorBannerSeverity, string> = {
+	error: "Error",
+	warning: "Warning",
+	info: "Information",
+};
+
+export const ErrorBanner = ({
+	id,
+	severity,
+	title,
+	detail,
+	onDismiss,
+}: ErrorBannerProps) => {
+	const styles = SEVERITY_STYLES[severity];
+	const Icon = SEVERITY_ICONS[severity];
+
+	return (
+		<div
+			role={severity === "error" ? "alert" : "status"}
+			aria-live={severity === "error" ? "assertive" : "polite"}
+			className={cn(
+				"pointer-events-auto flex items-start gap-3 rounded-md border bg-canvas/80 px-3 py-2 shadow-md backdrop-blur",
+				styles.container,
+			)}
+		>
+			<Icon
+				className={cn("size-5 shrink-0 mt-0.5", styles.icon)}
+				aria-hidden="true"
+			/>
+			<div className="flex-1 min-w-0">
+				<p className={cn("text-sm font-medium", styles.title)}>{title}</p>
+				{detail && (
+					<p className="mt-0.5 text-xs text-fg-muted break-words">{detail}</p>
+				)}
+			</div>
+			<button
+				type="button"
+				onClick={() => onDismiss(id)}
+				className="shrink-0 rounded-md p-1 text-fg-muted hover:bg-surface-raised hover:text-fg transition-colors"
+				aria-label={`Dismiss ${SEVERITY_LABEL[severity].toLowerCase()}`}
+			>
+				<X className="size-4" aria-hidden="true" />
+			</button>
+		</div>
+	);
+};

package/src/components/ui/ErrorBannerProvider.tsx

@@ -0,0 +1,77 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+import { ErrorBannerStack } from "./ErrorBannerStack.js";
+import {
+	appendBanner,
+	buildEntry,
+	dismissBanner,
+	type ErrorBannerEntry,
+	type PushErrorInput,
+} from "./error-banners.js";
+
+interface ErrorBannerContextValue {
+	errors: ErrorBannerEntry[];
+	pushError: (input: PushErrorInput) => string;
+	dismissError: (id: string) => void;
+	clearAll: () => void;
+}
+
+const ErrorBannerContext = createContext<ErrorBannerContextValue | undefined>(
+	undefined,
+);
+
+const generateId = (): string => {
+	if (
+		typeof globalThis.crypto !== "undefined" &&
+		typeof globalThis.crypto.randomUUID === "function"
+	) {
+		return globalThis.crypto.randomUUID();
+	}
+	return `banner-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+};
+
+export const ErrorBannerProvider = ({ children }: { children: ReactNode }) => {
+	const [errors, setErrors] = useState<ErrorBannerEntry[]>([]);
+
+	const pushError = useCallback((input: PushErrorInput): string => {
+		const entry = buildEntry(input, generateId(), Date.now());
+		setErrors((current) => appendBanner(current, entry));
+		return entry.id;
+	}, []);
+
+	const dismissError = useCallback((id: string) => {
+		setErrors((current) => dismissBanner(current, id));
+	}, []);
+
+	const clearAll = useCallback(() => {
+		setErrors([]);
+	}, []);
+
+	const value = useMemo(
+		() => ({ errors, pushError, dismissError, clearAll }),
+		[errors, pushError, dismissError, clearAll],
+	);
+
+	return (
+		<ErrorBannerContext.Provider value={value}>
+			{children}
+			<ErrorBannerStack errors={errors} onDismiss={dismissError} />
+		</ErrorBannerContext.Provider>
+	);
+};
+
+export const useErrorBanners = (): ErrorBannerContextValue => {
+	const context = useContext(ErrorBannerContext);
+	if (!context) {
+		throw new Error(
+			"useErrorBanners must be used within an ErrorBannerProvider",
+		);
+	}
+	return context;
+};

package/src/components/ui/ErrorBannerStack.tsx

@@ -0,0 +1,34 @@
+import { ErrorBanner } from "./ErrorBanner.js";
+import type { ErrorBannerEntry } from "./error-banners.js";
+
+interface ErrorBannerStackProps {
+	errors: ErrorBannerEntry[];
+	onDismiss: (id: string) => void;
+}
+
+export const ErrorBannerStack = ({
+	errors,
+	onDismiss,
+}: ErrorBannerStackProps) => {
+	if (errors.length === 0) return null;
+
+	return (
+		<section
+			aria-label="Notifications"
+			className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex flex-col items-center gap-2 px-4 pt-4 sm:items-end sm:pr-6"
+		>
+			<div className="flex w-full max-w-md flex-col gap-2">
+				{errors.map((entry) => (
+					<ErrorBanner
+						key={entry.id}
+						id={entry.id}
+						severity={entry.severity}
+						title={entry.title}
+						detail={entry.detail}
+						onDismiss={onDismiss}
+					/>
+				))}
+			</div>
+		</section>
+	);
+};