@rapidmx/web-client 0.9.0 → 0.11.0

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

@@ -1,201 +1,204 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 { Label, createLabel, deleteLabel, listLabels, updateLabel } from "@rapidmx/react-shared/mail/labelsApi.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 FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-
-export type SettingsLabelsPageProps = Omit<SettingsShellProps, "active">;
-
-export default function SettingsLabelsPage(props: SettingsLabelsPageProps) {
-    return (
-        <SettingsShell {...props} active="labels">
-            <LabelsContent />
-        </SettingsShell>
-    );
-}
-
-const DEFAULT_COLOR = "#6366f1";
-
-function LabelsContent() {
-    const { mailboxUid } = useSettingsShell();
-    const [labels, setLabels] = useState<Label[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // `editing === null` means the create form; otherwise the label currently being renamed/recolored.
-    const [editing, setEditing] = useState<Label | null>(null);
-    const [formOpen, setFormOpen] = useState(false);
-    const [formName, setFormName] = useState("");
-    const [formColor, setFormColor] = useState(DEFAULT_COLOR);
-    const [formError, setFormError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-
-    const [deleting, setDeleting] = useState<Label | null>(null);
-    const [deleteError, setDeleteError] = useState<string | null>(null);
-    const [deleteBusy, setDeleteBusy] = useState(false);
-
-    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
-    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
-    useEffect(() => {
-        listLabels(mailboxUid!)
-            .then(setLabels)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load labels."))
-            .finally(() => setLoading(false));
-    }, [mailboxUid]);
-
-    function openCreateForm() {
-        setEditing(null);
-        setFormName("");
-        setFormColor(DEFAULT_COLOR);
-        setFormError(null);
-        setFormOpen(true);
-    }
-
-    function openEditForm(label: Label) {
-        setEditing(label);
-        setFormName(label.name);
-        setFormColor(label.color ?? DEFAULT_COLOR);
-        setFormError(null);
-        setFormOpen(true);
-    }
-
-    async function handleSave() {
-        setSaving(true);
-        setFormError(null);
-        try {
-            if (editing) {
-                const updated = await updateLabel({ uid: editing.uid, version: editing.version, name: formName, color: formColor });
-                setLabels((prev) => prev.map((l) => (l.uid === updated.uid ? updated : l)));
-            } else {
-                const created = await createLabel({ mailboxUid: mailboxUid!, name: formName, color: formColor });
-                setLabels((prev) => [...prev, created]);
-            }
-            setFormOpen(false);
-        } catch (err) {
-            setFormError(err instanceof ApiRequestError ? err.message : "Could not save this label.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    async function handleDelete() {
-        setDeleteBusy(true);
-        setDeleteError(null);
-        try {
-            await deleteLabel(deleting!.uid, deleting!.version);
-            setLabels((prev) => prev.filter((l) => l.uid !== deleting!.uid));
-            setDeleting(null);
-        } catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this label.");
-        } finally {
-            setDeleteBusy(false);
-        }
-    }
-
-    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">Labels</h1>
-                    <Button type="button" className="!w-auto" onClick={openCreateForm}>
-                        + New label
-                    </Button>
-                </div>
-
-                {error && <Alert>{error}</Alert>}
-
-                {loading ? (
-                    <p className="text-sm text-text-muted">Loading&hellip;</p>
-                ) : labels.length === 0 ? (
-                    <p className="text-sm text-text-muted">No labels yet.</p>
-                ) : (
-                    <ul className="flex flex-col gap-2">
-                        {labels.map((label) => (
-                            <li key={label.uid} className="flex items-center justify-between border border-border rounded-md p-3">
-                                <div className="flex items-center gap-2">
-                                    <span
-                                        className="w-3 h-3 rounded-full shrink-0"
-                                        style={{ backgroundColor: label.color ?? DEFAULT_COLOR }}
-                                        aria-hidden="true"
-                                    />
-                                    <span className="text-sm font-semibold">{label.name}</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <button
-                                        type="button"
-                                        className="text-primary-dark hover:underline font-medium text-sm"
-                                        onClick={() => openEditForm(label)}
-                                    >
-                                        Edit
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="text-danger hover:underline font-medium text-sm"
-                                        onClick={() => {
-                                            setDeleting(label);
-                                            setDeleteError(null);
-                                        }}
-                                    >
-                                        Delete
-                                    </button>
-                                </div>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-            </div>
-
-            <Modal open={formOpen} onClose={() => setFormOpen(false)} title={editing ? "Edit label" : "New label"}>
-                {formError && <Alert>{formError}</Alert>}
-                <FormField label="Name" htmlFor="label-name">
-                    <input
-                        id="label-name"
-                        type="text"
-                        value={formName}
-                        onChange={(e) => setFormName(e.target.value)}
-                        className="w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface"
-                    />
-                </FormField>
-                <FormField label="Color" htmlFor="label-color">
-                    <input
-                        id="label-color"
-                        type="color"
-                        value={formColor}
-                        onChange={(e) => setFormColor(e.target.value)}
-                        className="h-9 w-16 rounded-md border border-border bg-surface"
-                    />
-                </FormField>
-                <div className="flex justify-end gap-2 mt-2">
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setFormOpen(false)}>
-                        Cancel
-                    </Button>
-                    <Button type="button" className="!w-auto" loading={saving} disabled={saving || !formName.trim()} onClick={handleSave}>
-                        Save
-                    </Button>
-                </div>
-            </Modal>
-
-            <Modal open={!!deleting} onClose={() => setDeleting(null)} title="Delete this label?">
-                {deleteError && <Alert>{deleteError}</Alert>}
-                <p className="text-sm text-text-muted mb-4">
-                    This removes &ldquo;{deleting?.name}&rdquo; from every message it's applied to. This can't be undone.
-                </p>
-                <div className="flex justify-end gap-2">
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setDeleting(null)}>
-                        Cancel
-                    </Button>
-                    <Button type="button" className="!w-auto" loading={deleteBusy} disabled={deleteBusy} onClick={handleDelete}>
-                        Delete label
-                    </Button>
-                </div>
-            </Modal>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Label, createLabel, deleteLabel, listLabels, updateLabel } from "@rapidmx/react-shared/mail/labelsApi.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 FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+
+export type SettingsLabelsPageProps = Omit<SettingsShellProps, "active">;
+
+function SettingsLabelsPage(props: SettingsLabelsPageProps) {
+    return (
+        <SettingsShell {...props} active="labels">
+            <LabelsContent />
+        </SettingsShell>
+    );
+}
+
+const DEFAULT_COLOR = "#6366f1";
+
+function LabelsContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [labels, setLabels] = useState<Label[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // `editing === null` means the create form; otherwise the label currently being renamed/recolored.
+    const [editing, setEditing] = useState<Label | null>(null);
+    const [formOpen, setFormOpen] = useState(false);
+    const [formName, setFormName] = useState("");
+    const [formColor, setFormColor] = useState(DEFAULT_COLOR);
+    const [formError, setFormError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    const [deleting, setDeleting] = useState<Label | null>(null);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+    const [deleteBusy, setDeleteBusy] = useState(false);
+
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listLabels(mailboxUid!)
+            .then(setLabels)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load labels."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+
+    function openCreateForm() {
+        setEditing(null);
+        setFormName("");
+        setFormColor(DEFAULT_COLOR);
+        setFormError(null);
+        setFormOpen(true);
+    }
+
+    function openEditForm(label: Label) {
+        setEditing(label);
+        setFormName(label.name);
+        setFormColor(label.color ?? DEFAULT_COLOR);
+        setFormError(null);
+        setFormOpen(true);
+    }
+
+    async function handleSave() {
+        setSaving(true);
+        setFormError(null);
+        try {
+            if (editing) {
+                const updated = await updateLabel({ uid: editing.uid, version: editing.version, name: formName, color: formColor });
+                setLabels((prev) => prev.map((l) => (l.uid === updated.uid ? updated : l)));
+            } else {
+                const created = await createLabel({ mailboxUid: mailboxUid!, name: formName, color: formColor });
+                setLabels((prev) => [...prev, created]);
+            }
+            setFormOpen(false);
+        } catch (err) {
+            setFormError(err instanceof ApiRequestError ? err.message : "Could not save this label.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    async function handleDelete() {
+        setDeleteBusy(true);
+        setDeleteError(null);
+        try {
+            await deleteLabel(deleting!.uid, deleting!.version);
+            setLabels((prev) => prev.filter((l) => l.uid !== deleting!.uid));
+            setDeleting(null);
+        } catch (err) {
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this label.");
+        } finally {
+            setDeleteBusy(false);
+        }
+    }
+
+    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">Labels</h1>
+                    <Button type="button" className="!w-auto" onClick={openCreateForm}>
+                        + New label
+                    </Button>
+                </div>
+
+                {error && <Alert>{error}</Alert>}
+
+                {loading ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : labels.length === 0 ? (
+                    <p className="text-sm text-text-muted">No labels yet.</p>
+                ) : (
+                    <ul className="flex flex-col gap-2">
+                        {labels.map((label) => (
+                            <li key={label.uid} className="flex items-center justify-between border border-border rounded-md p-3">
+                                <div className="flex items-center gap-2">
+                                    <span
+                                        className="w-3 h-3 rounded-full shrink-0"
+                                        style={{ backgroundColor: label.color ?? DEFAULT_COLOR }}
+                                        aria-hidden="true"
+                                    />
+                                    <span className="text-sm font-semibold">{label.name}</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <button
+                                        type="button"
+                                        className="text-primary-dark hover:underline font-medium text-sm"
+                                        onClick={() => openEditForm(label)}
+                                    >
+                                        Edit
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="text-danger hover:underline font-medium text-sm"
+                                        onClick={() => {
+                                            setDeleting(label);
+                                            setDeleteError(null);
+                                        }}
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            <Modal open={formOpen} onClose={() => setFormOpen(false)} title={editing ? "Edit label" : "New label"}>
+                {formError && <Alert>{formError}</Alert>}
+                <FormField label="Name" htmlFor="label-name">
+                    <input
+                        id="label-name"
+                        type="text"
+                        value={formName}
+                        onChange={(e) => setFormName(e.target.value)}
+                        className="w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface"
+                    />
+                </FormField>
+                <FormField label="Color" htmlFor="label-color">
+                    <input
+                        id="label-color"
+                        type="color"
+                        value={formColor}
+                        onChange={(e) => setFormColor(e.target.value)}
+                        className="h-9 w-16 rounded-md border border-border bg-surface"
+                    />
+                </FormField>
+                <div className="flex justify-end gap-2 mt-2">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setFormOpen(false)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={saving} disabled={saving || !formName.trim()} onClick={handleSave}>
+                        Save
+                    </Button>
+                </div>
+            </Modal>
+
+            <Modal open={!!deleting} onClose={() => setDeleting(null)} title="Delete this label?">
+                {deleteError && <Alert>{deleteError}</Alert>}
+                <p className="text-sm text-text-muted mb-4">
+                    This removes &ldquo;{deleting?.name}&rdquo; from every message it's applied to. This can't be undone.
+                </p>
+                <div className="flex justify-end gap-2">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setDeleting(null)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={deleteBusy} disabled={deleteBusy} onClick={handleDelete}>
+                        Delete label
+                    </Button>
+                </div>
+            </Modal>
+        </div>
+    );
+}
+
+export default routedPage("/settings/labels", SettingsLabelsPage);

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

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
 import React, { ChangeEvent, FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
@@ -27,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"]);
 
@@ -51,7 +53,7 @@ function statusLabel(status: string): string {
 
 export type SettingsPrivacyPageProps = Omit<SettingsShellProps, "active">;
 
-export default function SettingsPrivacyPage(props: SettingsPrivacyPageProps) {
+function SettingsPrivacyPage(props: SettingsPrivacyPageProps) {
     return (
         <SettingsShell {...props} active="privacy">
             <PrivacyContent userUid={props.userUid} />
@@ -124,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
@@ -151,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);
         }
@@ -190,7 +190,6 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
                 </Button>
             </form>
 
-            {createError && <Alert>{createError}</Alert>}
             {loadError && <Alert>{loadError}</Alert>}
 
             {loading ? (
@@ -241,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
@@ -286,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));
     }
 
@@ -340,7 +337,6 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
             />
 
             {foldersError && <Alert>{foldersError}</Alert>}
-            {uploadError && <Alert>{uploadError}</Alert>}
             {loadError && <Alert>{loadError}</Alert>}
 
             {loading ? (
@@ -492,3 +488,5 @@ function ErasureSection({ mailboxLabel }: { mailboxLabel: string }) {
         </div>
     );
 }
+
+export default routedPage("/settings/privacy", SettingsPrivacyPage);

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

@@ -2,16 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+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">;
 
-export default function SettingsReadReceiptsPage(props: SettingsReadReceiptsPageProps) {
+function SettingsReadReceiptsPage(props: SettingsReadReceiptsPageProps) {
     return (
         <SettingsShell {...props} active="read-receipts">
             <ReadReceiptsContent />
@@ -33,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 {
@@ -56,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);
         }
@@ -72,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">
@@ -146,3 +143,5 @@ function ReadReceiptsContent() {
         </div>
     );
 }
+
+export default routedPage("/settings/read-receipts", SettingsReadReceiptsPage);