@rapidmx/web-client 0.2.0

package/apps/www/settings/read-receipts/index.tsx

@@ -0,0 +1,125 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export type SettingsReadReceiptsPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsReadReceiptsPage(props: SettingsReadReceiptsPageProps) {
+    return (
+        <SettingsShell {...props} active="read-receipts">
+            <ReadReceiptsContent />
+        </SettingsShell>
+    );
+}
+
+function ReadReceiptsContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
+
+    const [alwaysRequestReceiptInternal, setAlwaysRequestReceiptInternal] = useState(mailbox.alwaysRequestReceiptInternal ?? true);
+    const [alwaysRequestReceiptExternal, setAlwaysRequestReceiptExternal] = useState(mailbox.alwaysRequestReceiptExternal ?? false);
+    const [autoSendReceiptsInternal, setAutoSendReceiptsInternal] = useState(mailbox.autoSendReceiptsInternal ?? true);
+    const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            await updateMailbox({
+                uid: mailbox.uid,
+                version: mailbox.version,
+                alwaysRequestReceiptInternal,
+                alwaysRequestReceiptExternal,
+                autoSendReceiptsInternal,
+                autoSendReceiptsExternal,
+            });
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save read receipt settings.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Read Receipts</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it
+                    responds to a receipt requested of it. A per-message &ldquo;Request a read receipt&rdquo;
+                    checkbox in Compose always overrides the request-side settings below for that one message.
+                </p>
+
+                {error && <Alert>{error}</Alert>}
+                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <fieldset className="flex flex-col gap-2">
+                        <legend className="text-sm font-semibold mb-1">Request receipts when sending</legend>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={alwaysRequestReceiptInternal}
+                                onChange={(e) => setAlwaysRequestReceiptInternal(e.target.checked)}
+                            />
+                            From internal recipients (mail to this organization)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={alwaysRequestReceiptExternal}
+                                onChange={(e) => setAlwaysRequestReceiptExternal(e.target.checked)}
+                            />
+                            From external recipients
+                        </label>
+                    </fieldset>
+
+                    <fieldset className="flex flex-col gap-2">
+                        <legend className="text-sm font-semibold mb-1">Respond automatically to requests</legend>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoSendReceiptsInternal}
+                                onChange={(e) => setAutoSendReceiptsInternal(e.target.checked)}
+                            />
+                            From internal senders
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoSendReceiptsExternal}
+                                onChange={(e) => setAutoSendReceiptsExternal(e.target.checked)}
+                            />
+                            From external senders
+                        </label>
+                        <p className="text-xs text-text-muted">
+                            Unchecked means a request from that sender waits in your Inbox for you to send or
+                            decline it explicitly.
+                        </p>
+                    </fieldset>
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/signatures/[uid].tsx

@@ -0,0 +1,167 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { MailSignature, getMailSignature, listMailSignatures, updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { clearPreviousDefaults } from "./signatureDefaults.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import RichTextEditor from "../../../shared/components/mail/compose/RichTextEditor.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are — see
+ * `settings/signatures/new/index.tsx`'s identical stub for the full reasoning. */
+async function handleUploadImage(): Promise<string | null> {
+    return null;
+}
+
+export type SignatureDetailPageProps = Omit<SettingsShellProps, "active"> & { params: { uid: string } };
+
+export default function SignatureDetailPage(props: SignatureDetailPageProps) {
+    return (
+        <SettingsShell {...props} active="signatures">
+            <SignatureDetailContent uid={props.params.uid} />
+        </SettingsShell>
+    );
+}
+
+function SignatureDetailContent({ uid }: { uid: string }) {
+    const { mailboxUid } = useSettingsShell();
+    const [original, setOriginal] = useState<MailSignature | null>(null);
+    const [name, setName] = useState("");
+    const [contentHtml, setContentHtml] = useState("");
+    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
+    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMailSignature(uid)
+            .then((loaded) => {
+                setOriginal(loaded);
+                if (loaded) {
+                    setName(loaded.name);
+                    setContentHtml(loaded.contentHtml);
+                    setIsDefaultForNewMessages(loaded.isDefaultForNewMessages);
+                    setIsDefaultForReplyForward(loaded.isDefaultForReplyForward);
+                }
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this signature."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // Only ever invoked from the form below, which itself only renders once `original` is loaded (the
+    // early returns above cover every other state) — the non-null assertions reflect that real
+    // invariant, matching `MailFilterDetailContent.handleSubmit`'s identical pattern.
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        setSaved(false);
+        try {
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                const existing = await listMailSignatures(mailboxUid!, { limit: 100 });
+                await clearPreviousDefaults(existing, original!.uid, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
+            const updated = await updateMailSignature({
+                uid: original!.uid,
+                version: original!.version,
+                name: name.trim(),
+                contentHtml,
+                isDefaultForNewMessages,
+                isDefaultForReplyForward,
+            });
+            setOriginal(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this signature.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    if (loading) {
+        return <p className="p-6 text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error && !original) {
+        return (
+            <div className="p-6">
+                <Alert>{error}</Alert>
+            </div>
+        );
+    }
+    if (!original) {
+        return (
+            <div className="p-6">
+                <Alert>Signature not found.</Alert>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <a
+                    href={`/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
+                    className="text-sm text-primary-dark hover:underline"
+                >
+                    &larr; All signatures
+                </a>
+                <h1 className="text-lg font-bold tracking-tight mt-1 mb-5">{original.name}</h1>
+
+                {error && <Alert>{error}</Alert>}
+                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4">
+                        <FormField label="Name" htmlFor="name">
+                            <input id="name" type="text" className={INPUT_CLASS} value={name} onChange={(e) => setName(e.target.value)} />
+                        </FormField>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForNewMessages}
+                                onChange={(e) => setIsDefaultForNewMessages(e.target.checked)}
+                            />
+                            Use for new messages
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForReplyForward}
+                                onChange={(e) => setIsDefaultForReplyForward(e.target.checked)}
+                            />
+                            Use for replies and forwards
+                        </label>
+                    </div>
+
+                    <div className="h-64">
+                        <RichTextEditor value={contentHtml} onChange={setContentHtml} fill onUploadImage={handleUploadImage} />
+                    </div>
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save changes
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/signatures/index.tsx

@@ -0,0 +1,85 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { MailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export type SettingsSignaturesPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsSignaturesPage(props: SettingsSignaturesPageProps) {
+    return (
+        <SettingsShell {...props} active="signatures">
+            <SignaturesContent />
+        </SettingsShell>
+    );
+}
+
+function SignaturesContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [signatures, setSignatures] = useState<MailSignature[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listMailSignatures(mailboxUid!)
+            .then(setSignatures)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load signatures."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <div className="flex items-center justify-between mb-5">
+                    <h1 className="text-lg font-bold tracking-tight">Signatures</h1>
+                    <a href={`/settings/signatures/new?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
+                        <Button type="button" className="!w-auto">
+                            + New signature
+                        </Button>
+                    </a>
+                </div>
+
+                {error && <Alert>{error}</Alert>}
+
+                {loading ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : signatures.length === 0 ? (
+                    <p className="text-sm text-text-muted">No signatures yet.</p>
+                ) : (
+                    <ul className="flex flex-col gap-2">
+                        {signatures.map((sig) => (
+                            <li key={sig.uid} className="flex items-center justify-between border border-border rounded-md p-3">
+                                <div>
+                                    <div className="text-sm font-semibold">{sig.name}</div>
+                                    {(sig.isDefaultForNewMessages || sig.isDefaultForReplyForward) && (
+                                        <div className="text-xs text-text-muted mt-0.5">
+                                            {[
+                                                sig.isDefaultForNewMessages && "Default for new messages",
+                                                sig.isDefaultForReplyForward && "Default for replies/forwards",
+                                            ]
+                                                .filter(Boolean)
+                                                .join(" · ")}
+                                        </div>
+                                    )}
+                                </div>
+                                <a
+                                    href={`/settings/signatures/${encodeURIComponent(sig.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
+                                    className="text-primary-dark hover:underline font-medium text-sm"
+                                >
+                                    Edit
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/signatures/new/index.tsx

@@ -0,0 +1,129 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { clearPreviousDefaults } from "../signatureDefaults.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
+import RichTextEditor from "../../../../shared/components/mail/compose/RichTextEditor.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export type NewSignaturePageProps = Omit<SettingsShellProps, "active">;
+
+export default function NewSignaturePage(props: NewSignaturePageProps) {
+    return (
+        <SettingsShell {...props} active="signatures">
+            <NewSignatureForm />
+        </SettingsShell>
+    );
+}
+
+/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are (see
+ * `ComposeWindow.handleUploadImage()`) — inline images in a signature are out of scope for this phase
+ * (`.claude/NOTES.md`'s Phase 12 entry), so this is a real, deliberate no-op, not a stub left unfinished. */
+async function handleUploadImage(): Promise<string | null> {
+    return null;
+}
+
+function NewSignatureForm() {
+    const { mailboxUid } = useSettingsShell();
+    const [name, setName] = useState("");
+    const [contentHtml, setContentHtml] = useState("");
+    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
+    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                const existing = await listMailSignatures(mailboxUid!, { limit: 100 });
+                await clearPreviousDefaults(existing, undefined, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
+            const created = await createMailSignature({
+                mailboxUid: mailboxUid!,
+                name: name.trim(),
+                contentHtml,
+                isDefaultForNewMessages,
+                isDefaultForReplyForward,
+            });
+            window.location.href = `/settings/signatures/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the signature.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <h1 className="text-lg font-bold tracking-tight mb-5">New signature</h1>
+
+                {error && <Alert>{error}</Alert>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4">
+                        <FormField label="Name" htmlFor="name">
+                            <input
+                                id="name"
+                                type="text"
+                                className={INPUT_CLASS}
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="Work signature"
+                            />
+                        </FormField>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForNewMessages}
+                                onChange={(e) => setIsDefaultForNewMessages(e.target.checked)}
+                            />
+                            Use for new messages
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForReplyForward}
+                                onChange={(e) => setIsDefaultForReplyForward(e.target.checked)}
+                            />
+                            Use for replies and forwards
+                        </label>
+                    </div>
+
+                    <div className="h-64">
+                        <RichTextEditor value={contentHtml} onChange={setContentHtml} fill onUploadImage={handleUploadImage} />
+                    </div>
+
+                    <div className="flex gap-3">
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Create signature
+                        </Button>
+                        <a href={`/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
+                            <Button type="button" variant="secondary" className="!w-auto">
+                                Cancel
+                            </Button>
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/signatures/signatureDefaults.ts

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { MailSignature, updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+
+/**
+ * `MailSignature.isDefaultForNewMessages`/`isDefaultForReplyForward` are each meant to hold on at most
+ * one signature per mailbox — enforced by convention, not a database constraint (see
+ * `mailSignaturesApi.ts`'s own doc comment, quoting restapi's). Before saving a signature with one of
+ * these flags newly turned on, this turns the flag off on whichever *other* signature in `signatures`
+ * currently has it — the "the composing client toggles the previous default off" responsibility that
+ * convention assigns to a caller like the New/Edit signature forms.
+ */
+export async function clearPreviousDefaults(
+    signatures: MailSignature[],
+    savingUid: string | undefined,
+    isDefaultForNewMessages: boolean,
+    isDefaultForReplyForward: boolean,
+): Promise<void> {
+    for (const signature of signatures) {
+        if (signature.uid === savingUid) {
+            continue;
+        }
+        const patch: { isDefaultForNewMessages?: boolean; isDefaultForReplyForward?: boolean } = {};
+        if (isDefaultForNewMessages && signature.isDefaultForNewMessages) {
+            patch.isDefaultForNewMessages = false;
+        }
+        if (isDefaultForReplyForward && signature.isDefaultForReplyForward) {
+            patch.isDefaultForReplyForward = false;
+        }
+        if (Object.keys(patch).length > 0) {
+            await updateMailSignature({ uid: signature.uid, version: signature.version, ...patch });
+        }
+    }
+}