@remit/web-client 0.0.1

package/src/components/compose/ComposeProvider.tsx

@@ -0,0 +1,133 @@
+import {
+	outboxDetailOperationsGetOutboxMessageOptions,
+	outboxOperationsListOutboxMessagesQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
+
+export interface ComposeState {
+	isOpen: boolean;
+	mode: ComposeMode;
+	account?: RemitImapAccountResponse;
+	sourceMessage?: RemitImapDescribeMessageResponse;
+	threadId?: string;
+	mailboxId?: string;
+	outboxMessageId?: string;
+}
+
+interface ComposeContextValue {
+	state: ComposeState;
+	openCompose: (params: Omit<ComposeState, "isOpen">) => void;
+	closeCompose: () => void;
+	setOutboxMessageId: (id: string) => void;
+	startSendPolling: (outboxMessageId: string) => void;
+}
+
+const ComposeContext = createContext<ComposeContextValue | undefined>(
+	undefined,
+);
+
+const INITIAL_STATE: ComposeState = {
+	isOpen: false,
+	mode: "new",
+};
+
+const POLL_INTERVAL_MS = 2000;
+const MAX_POLL_DURATION_MS = 60_000;
+
+export const ComposeProvider = ({
+	children,
+}: {
+	children: React.ReactNode;
+}) => {
+	const [state, setState] = useState<ComposeState>(INITIAL_STATE);
+	const [pollingMessageId, setPollingMessageId] = useState<
+		string | undefined
+	>();
+	const startedAtRef = useRef(0);
+	const queryClient = useQueryClient();
+
+	const { data: polledMessage } = useQuery({
+		...outboxDetailOperationsGetOutboxMessageOptions({
+			path: { outboxMessageId: pollingMessageId ?? "" },
+		}),
+		enabled: !!pollingMessageId,
+		refetchInterval: (query) => {
+			const status = query.state.data?.status;
+			if (status === "sent" || status === "failed" || status === "blocked")
+				return false;
+			if (Date.now() - startedAtRef.current > MAX_POLL_DURATION_MS)
+				return false;
+			return POLL_INTERVAL_MS;
+		},
+	});
+
+	useEffect(() => {
+		if (!polledMessage || !pollingMessageId) return;
+
+		const terminal =
+			polledMessage.status === "sent" ||
+			polledMessage.status === "failed" ||
+			polledMessage.status === "blocked";
+
+		if (terminal) {
+			setPollingMessageId(undefined);
+			queryClient.invalidateQueries({
+				queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+			});
+		}
+	}, [polledMessage, pollingMessageId, queryClient]);
+
+	const openCompose = useCallback((params: Omit<ComposeState, "isOpen">) => {
+		setState({ ...params, isOpen: true });
+	}, []);
+
+	const closeCompose = useCallback(() => {
+		setState(INITIAL_STATE);
+	}, []);
+
+	const setOutboxMessageId = useCallback((id: string) => {
+		setState((prev) => ({ ...prev, outboxMessageId: id }));
+	}, []);
+
+	const startSendPolling = useCallback((outboxMessageId: string) => {
+		startedAtRef.current = Date.now();
+		setPollingMessageId(outboxMessageId);
+	}, []);
+
+	const value = useMemo(
+		() => ({
+			state,
+			openCompose,
+			closeCompose,
+			setOutboxMessageId,
+			startSendPolling,
+		}),
+		[state, openCompose, closeCompose, setOutboxMessageId, startSendPolling],
+	);
+
+	return (
+		<ComposeContext.Provider value={value}>{children}</ComposeContext.Provider>
+	);
+};
+
+export const useCompose = (): ComposeContextValue => {
+	const context = useContext(ComposeContext);
+	if (!context) {
+		throw new Error("useCompose must be used within a ComposeProvider");
+	}
+	return context;
+};

package/src/components/compose/ComposeSmtpMissingBanner.tsx

@@ -0,0 +1,49 @@
+import { useNavigate } from "@tanstack/react-router";
+import { AlertTriangle, ArrowRight } from "lucide-react";
+
+interface ComposeSmtpMissingBannerProps {
+	accountId: string;
+}
+
+/**
+ * Non-dismissible banner shown above the compose form when the selected
+ * account has no SMTP host configured. Pairs with disabling the Send
+ * button so the user has a single, factual explanation of why sending
+ * is blocked. See issue #196.
+ */
+export const ComposeSmtpMissingBanner = ({
+	accountId,
+}: ComposeSmtpMissingBannerProps) => {
+	const navigate = useNavigate();
+
+	return (
+		<div
+			role="alert"
+			data-testid="compose-smtp-missing-banner"
+			className="flex items-start gap-3 border-b border-warning/50 bg-warning/10 px-3 py-2"
+		>
+			<AlertTriangle
+				className="size-5 shrink-0 mt-0.5 text-warning"
+				aria-hidden="true"
+			/>
+			<div className="flex-1 min-w-0">
+				<p className="text-sm font-medium text-warning">
+					This account can't send mail until SMTP is configured.
+				</p>
+				<button
+					type="button"
+					onClick={() => {
+						navigate({
+							to: "/settings/accounts",
+							search: { editAccountId: accountId, focusSmtp: true },
+						});
+					}}
+					className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-warning hover:underline"
+				>
+					Configure SMTP
+					<ArrowRight className="size-3" aria-hidden="true" />
+				</button>
+			</div>
+		</div>
+	);
+};

package/src/components/compose/FromSelector.tsx

@@ -0,0 +1,67 @@
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+interface FromSelectorProps {
+	selectedAccountId?: string;
+	onSelect: (account: RemitImapAccountResponse) => void;
+}
+
+export const FromSelector = ({
+	selectedAccountId,
+	onSelect,
+}: FromSelectorProps) => {
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+	const accounts = config?.accounts ?? [];
+
+	// Auto-select the only account when none is selected
+	useEffect(() => {
+		if (!selectedAccountId && accounts.length === 1 && accounts[0]) {
+			onSelect(accounts[0]);
+		}
+	}, [selectedAccountId, accounts, onSelect]);
+
+	if (accounts.length <= 1) {
+		const account = accounts[0];
+		if (!account) return null;
+		return (
+			<div className="flex items-start gap-2">
+				{/* biome-ignore lint/a11y/noLabelWithoutControl: decorative label for a read-only value, not a form control */}
+				<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">
+					From:
+				</label>
+				<div className="text-sm py-1.5">{account.email}</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex items-start gap-2">
+			<label
+				htmlFor="from-account-selector"
+				className="text-sm text-fg-muted shrink-0 w-12 pt-1.5"
+			>
+				From:
+			</label>
+			<select
+				id="from-account-selector"
+				value={selectedAccountId ?? ""}
+				onChange={(e) => {
+					const account = accounts.find((a) => a.accountId === e.target.value);
+					if (account) onSelect(account);
+				}}
+				className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
+			>
+				{accounts.map((account) => (
+					<option key={account.accountId} value={account.accountId}>
+						{account.email}
+					</option>
+				))}
+			</select>
+		</div>
+	);
+};

package/src/components/compose/FullCompose.tsx

@@ -0,0 +1,82 @@
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { X } from "lucide-react";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { useIsDesktop } from "@/hooks/useMediaQuery";
+import { ComposeForm } from "./ComposeForm";
+import { useCompose } from "./ComposeProvider";
+import { MobileComposeSheet } from "./MobileComposeSheet";
+
+const MODE_LABELS: Record<string, string> = {
+	reply: "Reply",
+	reply_all: "Reply All",
+	forward: "Forward",
+	new: "New Message",
+};
+
+export const FullCompose = () => {
+	const { state, closeCompose } = useCompose();
+	const isDesktop = useIsDesktop();
+	const {
+		isError: isConfigError,
+		error: configError,
+		refetch: refetchConfig,
+	} = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	if (!isDesktop) return <MobileComposeSheet />;
+
+	if (!state.isOpen) return null;
+
+	const title = MODE_LABELS[state.mode] ?? "New Message";
+
+	const header = (
+		<header className="flex items-center justify-between gap-2 px-4 py-3 border-b border-line shrink-0">
+			<div className="flex items-center gap-2 min-w-0">
+				<h2 className="text-lg font-semibold truncate">{title}</h2>
+			</div>
+			<button
+				type="button"
+				onClick={closeCompose}
+				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"
+			>
+				<X className="size-5" />
+			</button>
+		</header>
+	);
+
+	if (isConfigError) {
+		return (
+			<div className="h-full flex flex-col bg-canvas">
+				{header}
+				<div className="flex-1 flex items-center justify-center p-4">
+					<ErrorState
+						title="Couldn't load compose"
+						error={configError}
+						onRetry={() => {
+							refetchConfig();
+						}}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-full min-h-0 flex-col bg-canvas">
+			{header}
+			<div className="min-h-0 flex-1 overflow-hidden">
+				<ComposeForm
+					key={state.outboxMessageId ?? "new"}
+					mode={state.mode}
+					account={state.account}
+					sourceMessage={state.sourceMessage}
+					onClose={closeCompose}
+				/>
+			</div>
+		</div>
+	);
+};

package/src/components/compose/InlineCompose.tsx

@@ -0,0 +1,29 @@
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { ComposeForm } from "./ComposeForm";
+import type { ComposeMode } from "./ComposeProvider";
+
+interface InlineComposeProps {
+	mode: ComposeMode;
+	account?: RemitImapAccountResponse;
+	sourceMessage?: RemitImapDescribeMessageResponse;
+	onClose: () => void;
+}
+
+export const InlineCompose = ({
+	mode,
+	account,
+	sourceMessage,
+	onClose,
+}: InlineComposeProps) => (
+	<div className="border-t border-line bg-canvas max-h-[400px] flex flex-col">
+		<ComposeForm
+			mode={mode}
+			account={account}
+			sourceMessage={sourceMessage}
+			onClose={onClose}
+		/>
+	</div>
+);

package/src/components/compose/MobileComposeSheet.tsx

@@ -0,0 +1,152 @@
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useRef, useState } from "react";
+import { Drawer } from "vaul";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { ComposeForm } from "./ComposeForm";
+import { useCompose } from "./ComposeProvider";
+
+const MODE_LABELS: Record<string, string> = {
+	reply: "Reply",
+	reply_all: "Reply All",
+	forward: "Forward",
+	new: "New Message",
+};
+
+/**
+ * Returns true when the draft has meaningful content (subject or body
+ * typed by the user). Used to gate drag-to-dismiss with a confirmation.
+ */
+const useIsDraftDirty = (): (() => boolean) => {
+	const dirtyRef = useRef(false);
+
+	// We peek at the DOM: if subject has text or the editor has non-empty
+	// text content, the draft is dirty. This avoids threading form state
+	// back up — ComposeForm owns the source of truth.
+	const check = useCallback((): boolean => {
+		const subject =
+			document.querySelector<HTMLInputElement>("[data-subject-field]")?.value ??
+			"";
+		const editorEl = document.querySelector("[data-slate-editor]");
+		const bodyText = editorEl?.textContent ?? "";
+		// Strip signature separator "-- " to avoid false positives
+		const cleaned = bodyText.replace(/--\s*/g, "").trim();
+		dirtyRef.current = subject.trim().length > 0 || cleaned.length > 0;
+		return dirtyRef.current;
+	}, []);
+
+	return check;
+};
+
+export const MobileComposeSheet = () => {
+	const { state, closeCompose } = useCompose();
+	const isDraftDirty = useIsDraftDirty();
+	const [showConfirm, setShowConfirm] = useState(false);
+
+	const {
+		isError: isConfigError,
+		error: configError,
+		refetch: refetchConfig,
+	} = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const handleOpenChange = useCallback(
+		(open: boolean) => {
+			if (open) return;
+			// User is trying to dismiss
+			if (isDraftDirty()) {
+				setShowConfirm(true);
+			} else {
+				closeCompose();
+			}
+		},
+		[closeCompose, isDraftDirty],
+	);
+
+	const handleConfirmDiscard = useCallback(() => {
+		setShowConfirm(false);
+		closeCompose();
+	}, [closeCompose]);
+
+	const handleCancelDiscard = useCallback(() => {
+		setShowConfirm(false);
+	}, []);
+
+	if (!state.isOpen) return null;
+
+	const title = MODE_LABELS[state.mode] ?? "New Message";
+
+	return (
+		<Drawer.Root
+			open={state.isOpen}
+			onOpenChange={handleOpenChange}
+			// Don't auto-dismiss on drag when dirty — we intercept via onOpenChange
+		>
+			<Drawer.Portal>
+				<Drawer.Overlay className="fixed inset-0 z-40 bg-black/40" />
+				<Drawer.Content
+					className="fixed inset-x-0 bottom-0 z-50 flex flex-col bg-canvas rounded-t-lg"
+					style={{ height: "95dvh" }}
+				>
+					<Drawer.Handle className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />
+
+					<Drawer.Title className="px-4 py-2 text-base font-semibold border-b border-line">
+						{title}
+					</Drawer.Title>
+
+					{isConfigError ? (
+						<div className="flex-1 flex items-center justify-center p-4">
+							<ErrorState
+								title="Couldn't load compose"
+								error={configError}
+								onRetry={() => {
+									refetchConfig();
+								}}
+							/>
+						</div>
+					) : (
+						<div className="flex-1 overflow-hidden">
+							<ComposeForm
+								mode={state.mode}
+								account={state.account}
+								sourceMessage={state.sourceMessage}
+								onClose={closeCompose}
+							/>
+						</div>
+					)}
+				</Drawer.Content>
+			</Drawer.Portal>
+
+			{/* Confirmation dialog when dismissing dirty draft */}
+			{showConfirm && (
+				<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
+					<div className="mx-4 w-full max-w-sm rounded-xl bg-canvas p-6 shadow-xl">
+						<h3 className="text-lg font-semibold">Discard draft?</h3>
+						<p className="mt-2 text-sm text-fg-muted">
+							Your message has unsaved content. Are you sure you want to discard
+							it?
+						</p>
+						<div className="mt-4 flex justify-end gap-2">
+							<button
+								type="button"
+								onClick={handleCancelDiscard}
+								className="rounded-md px-4 py-2 text-sm font-medium hover:bg-surface-raised transition-colors"
+							>
+								Keep editing
+							</button>
+							<button
+								type="button"
+								onClick={handleConfirmDiscard}
+								className="rounded-md bg-danger px-4 py-2 text-sm font-medium text-canvas hover:bg-danger/90 transition-colors"
+							>
+								Discard
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</Drawer.Root>
+	);
+};

package/src/components/compose/PlateEditor.tsx

@@ -0,0 +1,86 @@
+import { AutoformatPlugin } from "@platejs/autoformat";
+import {
+	BlockquotePlugin,
+	BoldPlugin,
+	ItalicPlugin,
+} from "@platejs/basic-nodes/react";
+import { LinkPlugin } from "@platejs/link/react";
+import type { Value } from "platejs";
+import { PlateContent, usePlateEditor } from "platejs/react";
+import { useEffect } from "react";
+
+export interface PlateEditorProps {
+	initialValue?: Value;
+	onChange?: (value: Value) => void;
+	onSubmit?: () => void;
+	autoFocus?: boolean;
+}
+
+const EMPTY_VALUE: Value = [{ type: "p", children: [{ text: "" }] }];
+
+export const COMPOSE_PLUGINS = [
+	BoldPlugin,
+	ItalicPlugin,
+	LinkPlugin,
+	BlockquotePlugin,
+	AutoformatPlugin.configure({
+		options: {
+			rules: [
+				{
+					match: "**",
+					mode: "mark" as const,
+					type: "bold",
+				},
+				{
+					match: "*",
+					mode: "mark" as const,
+					type: "italic",
+				},
+				{
+					match: "> ",
+					mode: "block" as const,
+					type: "blockquote",
+				},
+			],
+			enableUndoOnDelete: true,
+		},
+	}),
+];
+
+export const usePlateComposeEditor = (initialValue?: Value) =>
+	usePlateEditor({
+		plugins: COMPOSE_PLUGINS,
+		value: initialValue ?? EMPTY_VALUE,
+	});
+
+export const PlateEditorContent = ({
+	onSubmit,
+	autoFocus,
+	editor,
+}: Omit<PlateEditorProps, "initialValue" | "onChange"> & {
+	editor: ReturnType<typeof usePlateComposeEditor>;
+}) => {
+	useEffect(() => {
+		if (autoFocus) {
+			const timer = setTimeout(() => {
+				editor.tf.focus();
+			}, 0);
+			return () => clearTimeout(timer);
+		}
+	}, [autoFocus, editor]);
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && onSubmit) {
+			e.preventDefault();
+			onSubmit();
+		}
+	};
+
+	return (
+		<PlateContent
+			className="w-full px-3 py-2 bg-canvas text-sm outline-none min-h-[120px] [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-fg-subtle/30 [&_blockquote]:text-fg-muted [&_a]:text-accent [&_a]:underline"
+			placeholder="Write your message..."
+			onKeyDown={handleKeyDown}
+		/>
+	);
+};