@rapidmx/web-client 0.10.0 → 0.12.0

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

@@ -6,15 +6,14 @@ import { routedPage } from "../../_routedPage.js";
 import React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
-    EnrollmentResult,
     KeyVault,
     MasterKeyWrap,
     PublicKey,
     WrappedPrivateKey,
     addMasterKeyWrap,
     cancelSignEnrollment,
-    checkSignEnrollmentStatus,
     findActivePublicKey,
+    getCurrentSignEnrollment,
     getEscrowInfo,
     getKeyVault,
     rekey,
@@ -45,9 +44,22 @@ import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../sh
 import KeyEnrollmentGate from "../../../shared/components/layout/KeyEnrollmentGate.js";
 import { useUnlockPrompt } from "../../../shared/components/layout/UnlockPromptProvider.js";
 import { destroyLocalIndex } from "../../../shared/search/localIndexRpcClient.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import SigningCertificateCard, { SigningCertificateMode } from "../../../shared/components/settings/SigningCertificateCard.js";
+import { readStoredSignEnrollment, storeSignEnrollment } from "../../../shared/signing/enrollmentStorage.js";
+import {
+    checkEnrollmentNow,
+    forgetEnrollment,
+    recordEnrollmentResult,
+    useEnrollmentSnapshot,
+    watchCurrentEnrollment,
+    watchEnrollment,
+} from "../../../shared/signing/enrollmentTracker.js";
+import { STALE_REQUEST_TEXT, beforeRequestText, healthWarning, isInstalling, timeOf } from "../../../shared/signing/enrollmentView.js";
+import { useSigningEnrollmentInfo } from "../../../shared/signing/signingInfo.js";
 
 const MIN_PASSWORD_LENGTH = 8;
 
@@ -55,6 +67,10 @@ const MIN_PASSWORD_LENGTH = 8;
  * already holding this many wraps (escrow included). */
 export const MAX_MASTER_KEY_WRAPS = 20;
 
+/** How often, and how many times, the page asks for the mailbox's keys while a certificate is issued but not installed yet. */
+const INSTALL_WATCH_INTERVAL_MS = 15_000;
+const INSTALL_WATCH_ATTEMPTS = 40;
+
 const KEYS_LOCKED_MESSAGE = "Your encryption keys were locked before this could finish. Unlock them and try again.";
 
 /** Thrown inside `handleRotateKeys()` when the escrow wrap of the new master key can't be built - the rotation is
@@ -160,39 +176,6 @@ async function rewrapVaultPrivateKeys(
     }
 }
 
-// RFC 8823 ACME issuance is a real email round-trip with a public CA - "likely minutes," not seconds -
-// so this polls infrequently rather than hammering the endpoint.
-const SIGNING_ENROLLMENT_POLL_INTERVAL_MS = 15_000;
-
-/**
- * A started signing enrollment's id, per mailbox. Kept only so a reload can ask the server
- * (`checkSignEnrollmentStatus()`) whether that enrollment is still pending: a rotation while it is pending
- * would strand the enrollment's already-submitted private key under a master key that no longer exists. The
- * stored id is never trusted on its own - the server's answer decides the state, and restapi's own `rekey()`
- * refuses (409) a rotation during an enrollment this browser never saw (e.g. one started on another device).
- */
-const SIGN_ENROLLMENT_STORAGE_PREFIX = "rapidmx.signEnrollment.";
-
-function readStoredSignEnrollment(mailboxUid: string): string | null {
-    try {
-        return localStorage.getItem(SIGN_ENROLLMENT_STORAGE_PREFIX + mailboxUid);
-    } catch {
-        return null;
-    }
-}
-
-function storeSignEnrollment(mailboxUid: string, enrollmentId: string | null): void {
-    try {
-        if (enrollmentId) {
-            localStorage.setItem(SIGN_ENROLLMENT_STORAGE_PREFIX + mailboxUid, enrollmentId);
-        } else {
-            localStorage.removeItem(SIGN_ENROLLMENT_STORAGE_PREFIX + mailboxUid);
-        }
-    } catch {
-        // Storage blocked - restapi's own 409 on rekey still guards a rotation.
-    }
-}
-
 const ROTATION_CONFLICT_MESSAGE =
     "Your keys were not rotated because the server reported a conflicting change. If a signing certificate enrollment is still in progress for this mailbox (it may have been started on another device), wait for it to finish, then try again. If this mailbox is under escrow, its escrow protection may have changed meanwhile - reload this page and try again. Nothing was changed.";
 
@@ -304,6 +287,12 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
     const [signingEnrollmentId, setSigningEnrollmentId] = useState<string | null>(null);
     const [signingError, setSigningError] = useState<string | null>(null);
     const rotationBlockedBySigning = signingStatus !== "idle";
+    // What is known of the mailbox's signing-certificate enrollment: kept current by the shared tracker (`signing/enrollmentTracker.ts`), which reads
+    // the server with backoff while this page is visible, stops when the enrollment ends, and goes on in the app frame when this page is left.
+    const enrollment = useEnrollmentSnapshot(mailboxUid);
+    const enrollmentResult = enrollment?.result ?? null;
+    // How this deployment issues certificates (a public CA by itself, or an administrator by hand): what the card and the request say follows it. Only the owner asks.
+    const signingInfo = useSigningEnrollmentInfo(canManageKeys);
 
     const [cancelingEnrollment, setCancelingEnrollment] = useState(false);
     const [cancelEnrollmentError, setCancelEnrollmentError] = useState<string | null>(null);
@@ -377,79 +366,80 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
         }
     }
 
-    /** Applies a server-reported enrollment status - shared by the reload check and the poll below. */
-    async function applyEnrollmentResult(enrollmentId: string, result: EnrollmentResult, isCancelled: () => boolean) {
-        if (result.status === "pending") {
-            setSigningEnrollmentId(enrollmentId);
-            setSigningStatus("pending");
-            return;
-        }
-        storeSignEnrollment(mailboxUid!, null);
-        setSigningStatus("idle");
-        setSigningEnrollmentId(null);
-        if (result.status === "failed") {
-            setSigningError(result.error ?? "Signing certificate enrollment failed.");
-            return;
-        }
-        try {
-            const refreshed = await getMailbox(mailboxUid!);
-            if (!isCancelled()) {
-                setRefreshedKeys(refreshed.keys ?? []);
-            }
-        } catch {
-            // The new key shows on the next load - the enrollment itself is finished either way.
-        }
-    }
-
-    // Confirms an enrollment started before a reload with the server before rotation is offered again.
+    // Follows the enrollment this browser started (its stored id) - or, for the owner, the one the server names as the mailbox's current one (started
+    // on another device, or long ago), so a pending one blocks rotation and shows its progress here too.
     useEffect(() => {
         const storedId = readStoredSignEnrollment(mailboxUid!);
-        if (!storedId) {
-            return;
-        }
         let cancelled = false;
-        setSigningStatus("checking");
-        checkSignEnrollmentStatus(mailboxUid!, storedId)
-            .then((result) => (cancelled ? undefined : applyEnrollmentResult(storedId, result, () => cancelled)))
-            .catch((err) => {
-                if (cancelled) {
-                    return;
-                }
-                if (err instanceof ApiRequestError && err.status === 404) {
-                    // The server no longer knows this enrollment, so nothing is pending.
-                    storeSignEnrollment(mailboxUid!, null);
-                    setSigningStatus("idle");
-                    return;
-                }
-                // Unknown (e.g. a network error): assume it is still pending, and let polling keep asking.
-                setSigningEnrollmentId(storedId);
-                setSigningStatus("pending");
-            });
+        let release: (() => void) | undefined;
+        if (storedId) {
+            setSigningStatus("checking");
+            release = watchEnrollment(mailboxUid!, storedId);
+        } else if (canManageKeys) {
+            getCurrentSignEnrollment(mailboxUid!)
+                .then((current) => {
+                    if (!cancelled && current) {
+                        if (current.status === "pending") {
+                            storeSignEnrollment(mailboxUid!, current.enrollmentId);
+                        }
+                        release = watchCurrentEnrollment(mailboxUid!, current, current.status === "pending");
+                    }
+                })
+                .catch(() => undefined);
+        }
         return () => {
             cancelled = true;
+            release?.();
         };
-    }, [mailboxUid]);
+    }, [mailboxUid, canManageKeys]);
 
+    // What the tracker knows becomes this page's state: pending (or not heard from yet - assume it is still going, and let the polling keep asking) blocks
+    // rotation; an enrollment that ended, or that the server no longer knows, does not.
     useEffect(() => {
-        if (signingStatus !== "pending" || !signingEnrollmentId) {
+        if (!enrollment) {
+            return;
+        }
+        if (enrollmentResult?.status === "pending" || (!enrollmentResult && enrollment.offline)) {
+            setSigningEnrollmentId(enrollment.enrollmentId);
+            setSigningStatus("pending");
+        } else if (enrollmentResult || enrollment.gone) {
+            setSigningEnrollmentId(null);
+            setSigningStatus("idle");
+        }
+    }, [enrollment?.enrollmentId, enrollmentResult?.status, enrollment?.gone, enrollment?.offline]);
+
+    // Once a certificate is issued the server has installed a new signing key that `mailbox.keys` (fetched once by the shell) never saw. The server installs it
+    // with a job a few minutes after the CA issues it (`installedAt`): until then the key is not there, so ask again every 15 s (for ten minutes at most).
+    const issuedUntil = timeOf(enrollmentResult?.notAfter);
+    const keyIsCurrent = !!activeSigningKey && (issuedUntil === undefined || issuedUntil <= activeSigningKey.notAfter + 60_000);
+    useEffect(() => {
+        if (enrollmentResult?.status !== "issued" || keyIsCurrent) {
             return;
         }
         let cancelled = false;
-        const interval = setInterval(async () => {
-            try {
-                const result = await checkSignEnrollmentStatus(mailboxUid!, signingEnrollmentId);
-                if (!cancelled) {
-                    await applyEnrollmentResult(signingEnrollmentId, result, () => cancelled);
-                }
-            } catch {
-                // Transient network error - keep polling rather than surfacing a one-off failure.
-            }
-        }, SIGNING_ENROLLMENT_POLL_INTERVAL_MS);
+        let timer: ReturnType<typeof setTimeout> | undefined;
+        let attempts = 0;
+        const refresh = () => {
+            getMailbox(mailboxUid!)
+                .then((refreshed) => {
+                    if (cancelled) {
+                        return;
+                    }
+                    const keys = refreshed.keys ?? [];
+                    setRefreshedKeys(keys);
+                    // Not installed yet, and the server said it is on its way: look again.
+                    if (isInstalling(enrollmentResult) && ++attempts < INSTALL_WATCH_ATTEMPTS && !findActivePublicKey(keys, "sign")) {
+                        timer = setTimeout(refresh, INSTALL_WATCH_INTERVAL_MS);
+                    }
+                })
+                .catch(() => undefined);
+        };
+        refresh();
         return () => {
             cancelled = true;
-            clearInterval(interval);
+            clearTimeout(timer);
         };
-    }, [signingStatus, signingEnrollmentId, mailboxUid]);
+    }, [enrollmentResult?.status, enrollmentResult?.installedAt, enrollment?.enrollmentId, keyIsCurrent, mailboxUid]);
 
     /** Cancels the pending enrollment (restapi's owner-only DELETE), which is what lets rotation run again. */
     async function handleCancelEnrollment(enrollmentId: string) {
@@ -461,16 +451,18 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                 setCancelEnrollmentError("The enrollment couldn't be cancelled yet. Try again.");
             } else if (result.status === "failed") {
                 // Cancelled - the "failure" is the cancellation itself, not something to report.
+                forgetEnrollment(mailboxUid!);
                 storeSignEnrollment(mailboxUid!, null);
                 setSigningStatus("idle");
                 setSigningEnrollmentId(null);
             } else {
                 // Issued before the cancel landed: it finishes like any other issued enrollment.
-                await applyEnrollmentResult(enrollmentId, result, () => false);
+                recordEnrollmentResult(mailboxUid!, enrollmentId, result);
             }
         } catch (err) {
             if (err instanceof ApiRequestError && err.status === 404) {
                 // The server no longer knows this enrollment, so nothing is pending.
+                forgetEnrollment(mailboxUid!);
                 storeSignEnrollment(mailboxUid!, null);
                 setSigningStatus("idle");
                 setSigningEnrollmentId(null);
@@ -499,6 +491,8 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                 wrappedKey: { ciphertext: wrappedKeySealed.ciphertext, nonce: wrappedKeySealed.nonce, algorithm: "AES-256-GCM" },
             });
             storeSignEnrollment(mailboxUid!, enrollmentId);
+            // Followed from now on (and after this page is left): the server has just accepted it, so it is pending - no need to ask first.
+            watchEnrollment(mailboxUid!, enrollmentId, { initial: { status: "pending" } });
             setSigningEnrollmentId(enrollmentId);
             setSigningStatus("pending");
         } catch (err) {
@@ -552,7 +546,8 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
             await removeMasterKeyWrap(mailboxUid!, wrap.method, wrap.methodId);
             await loadVault();
         } catch (err) {
-            setActionError(err instanceof ApiRequestError ? err.message : "Could not remove this unlock method.");
+            // A pop-up (the confirmation is already closed); `actionError` keeps the guidance tied to the forms below.
+            notifyApiError(err, "Couldn't remove this unlock method");
         } finally {
             setRemovingMethod(null);
         }
@@ -889,6 +884,27 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
         );
     }
 
+    // The "Digital signatures" section: a pending enrollment first (even while an older certificate is still active - it is a renewal); else the
+    // active certificate; else how the last enrollment ended (a failure, or a certificate that has since expired); else nothing has been requested.
+    const expiredSigningKey = displayedKeys
+        .filter((key) => key.useType === "sign" && !key.revokedAt && key.notAfter <= Date.now())
+        .sort((a, b) => b.notAfter - a.notAfter)[0];
+    // A certificate the CA has issued but the server has not installed yet counts as issued too (there is no key to show yet: the card says it is installing).
+    const installing = canManageKeys && isInstalling(enrollmentResult);
+    const certificateMode: SigningCertificateMode | null =
+        signingStatus === "pending"
+            ? "pending"
+            : activeSigningKey || installing
+              ? canManageKeys
+                  ? "issued"
+                  : null
+              : canManageKeys && enrollmentResult?.status === "failed"
+                ? "failed"
+                : canManageKeys && expiredSigningKey
+                  ? "expired"
+                  : null;
+    const certificateEnrollment = certificateMode === "issued" && enrollmentResult?.status !== "issued" ? null : certificateMode === "expired" ? null : enrollmentResult;
+
     return (
         <div className="flex-1 min-w-0 overflow-y-auto p-6">
             <div className="max-w-xl flex flex-col gap-6">
@@ -931,36 +947,55 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
 
                 <div>
                     <h2 className="text-sm font-semibold mb-2">Digital signatures</h2>
-                    {activeSigningKey ? (
-                        <p className="text-sm text-text-muted">
+                    {activeSigningKey && signingStatus !== "pending" && (
+                        <p className={["text-sm text-text-muted", certificateMode ? "mb-3" : ""].join(" ")}>
                             Enabled — outgoing mail from this mailbox is signed with a publicly-trusted
                             certificate.
                         </p>
-                    ) : signingStatus === "pending" ? (
-                        <p className="text-sm text-text-muted">
-                            Requested — a public certificate authority issues this via an automated email
-                            exchange, which can take a few minutes. You can leave this page; it finishes in
-                            the background and takes effect automatically once issued.
-                        </p>
-                    ) : !canManageKeys ? (
+                    )}
+                    {certificateMode && (
+                        <div className="flex flex-col gap-2">
+                            {certificateMode === "failed" && signingError && <Alert>{signingError}</Alert>}
+                            <SigningCertificateCard
+                                mode={certificateMode}
+                                enrollment={certificateEnrollment}
+                                snapshot={enrollment}
+                                info={signingInfo}
+                                address={mailbox.primarySmtpAddress}
+                                keyNotAfter={certificateMode === "expired" ? expiredSigningKey?.notAfter : activeSigningKey?.notAfter}
+                                canRequest={canManageKeys}
+                                requesting={signingStatus === "enrolling"}
+                                onCheck={canManageKeys ? () => void checkEnrollmentNow(mailboxUid!) : undefined}
+                                onRequest={handleEnrollSigning}
+                            />
+                        </div>
+                    )}
+                    {!activeSigningKey && !certificateMode && !canManageKeys ? (
                         <p className="text-sm text-text-muted">Not enabled.</p>
-                    ) : (
+                    ) : activeSigningKey || certificateMode ? null : (
                         <div className="flex flex-col gap-2">
                             <p className="text-xs text-text-muted">
                                 Lets recipients verify that mail from this mailbox is genuinely from you.
                                 Optional — encryption already works without it.
                             </p>
+                            {beforeRequestText(signingInfo, mailbox.primarySmtpAddress) && (
+                                <p className="text-xs text-text-muted">{beforeRequestText(signingInfo, mailbox.primarySmtpAddress)}</p>
+                            )}
+                            {healthWarning(signingInfo) && <Alert>{healthWarning(signingInfo)}</Alert>}
+                            {enrollment?.gone && <Alert>{STALE_REQUEST_TEXT}</Alert>}
                             {signingError && <Alert>{signingError}</Alert>}
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                className="!w-auto"
-                                loading={signingStatus === "enrolling"}
-                                disabled={signingStatus !== "idle"}
-                                onClick={handleEnrollSigning}
-                            >
-                                Enable digital signatures
-                            </Button>
+                            {signingInfo?.backend !== "none" && (
+                                <Button
+                                    type="button"
+                                    variant="secondary"
+                                    className="!w-auto"
+                                    loading={signingStatus === "enrolling"}
+                                    disabled={signingStatus !== "idle"}
+                                    onClick={handleEnrollSigning}
+                                >
+                                    Enable digital signatures
+                                </Button>
+                            )}
                         </div>
                     )}
                 </div>

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

@@ -19,6 +19,7 @@ import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "./_mai
 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";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.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";
@@ -106,7 +107,8 @@ function MailFilterDetailContent({ uid }: { uid: string }) {
             setOriginal(updated);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this mail filter.");
+            // A pop-up: `error` is only this form's own validation (and the load failure above).
+            notifyApiError(err, "Couldn't save the mail filter");
         } finally {
             setSaving(false);
         }

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

@@ -18,6 +18,7 @@ import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "../_ma
 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";
+import { notifyApiError } from "../../../../shared/notifications/apiErrors.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";
@@ -76,7 +77,8 @@ function NewMailFilterForm() {
             const created = await createMailFilterRule({ mailboxUid: mailboxUid!, name: name.trim(), ...rule });
             navigate(`/settings/filters/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the mail filter.");
+            // A pop-up: `error` above is only the form's own validation.
+            notifyApiError(err, "Couldn't create the mail filter");
         } finally {
             setSaving(false);
         }

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

@@ -28,6 +28,7 @@ import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../sh
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 
 const NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]);
 
@@ -125,7 +126,6 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
     const [loadError, setLoadError] = useState<string | null>(null);
     const [format, setFormat] = useState<DataExportFormat>("json");
     const [creating, setCreating] = useState(false);
-    const [createError, setCreateError] = useState<string | null>(null);
 
     // The create form below isn't gated behind `loading`, so a fast create-then-reload can resolve before
     // the initial mount fetch does; without this guard the mount fetch's now-stale response would land
@@ -152,13 +152,12 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
 
     async function handleCreate(e: FormEvent) {
         e.preventDefault();
-        setCreateError(null);
         setCreating(true);
         try {
             await createExportRequest({ format });
             await loadRequests();
         } catch (err) {
-            setCreateError(err instanceof ApiRequestError ? err.message : "Could not start this export.");
+            notifyApiError(err, "Couldn't start the export");
         } finally {
             setCreating(false);
         }
@@ -191,7 +190,6 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
                 </Button>
             </form>
 
-            {createError && <Alert>{createError}</Alert>}
             {loadError && <Alert>{loadError}</Alert>}
 
             {loading ? (
@@ -242,7 +240,6 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState<string | null>(null);
     const [uploading, setUploading] = useState(false);
-    const [uploadError, setUploadError] = useState<string | null>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     // Same stale-response guard as ExportSection's loadRequests() - the Upload button is enabled
@@ -287,11 +284,10 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
         if (!file || !targetFolderUid) {
             return;
         }
-        setUploadError(null);
         setUploading(true);
         uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid })
             .then(() => loadRequests())
-            .catch((err) => setUploadError(err instanceof ApiRequestError ? err.message : "Could not upload this file."))
+            .catch((err) => notifyApiError(err, "Couldn't upload the file"))
             .finally(() => setUploading(false));
     }
 
@@ -341,7 +337,6 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
             />
 
             {foldersError && <Alert>{foldersError}</Alert>}
-            {uploadError && <Alert>{uploadError}</Alert>}
             {loadError && <Alert>{loadError}</Alert>}
 
             {loading ? (

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

@@ -4,11 +4,10 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { routedPage } from "../../_routedPage.js";
 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";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 
 export type SettingsReadReceiptsPageProps = Omit<SettingsShellProps, "active">;
 
@@ -34,13 +33,11 @@ function ReadReceiptsContent() {
     const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
     // See auto-reply/index.tsx's identical note - later saves must carry the version the previous save returned.
     const [version, setVersion] = useState(mailbox.version);
-    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 {
@@ -57,7 +54,7 @@ function ReadReceiptsContent() {
             setVersion(updated.version);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save read receipt settings.");
+            notifyApiError(err, "Couldn't save the read receipt settings");
         } finally {
             setSaving(false);
         }
@@ -73,8 +70,7 @@ function ReadReceiptsContent() {
                     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>}
+                {saved && <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">