@rapidmx/web-client 0.30.0 → 0.31.0

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

@@ -6,6 +6,7 @@ import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import {
+    EscrowInfo,
     KeyVault,
     MasterKeyWrap,
     PublicKey,
@@ -43,6 +44,7 @@ import { getMailbox } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import KeyEnrollmentGate from "../../../shared/components/layout/KeyEnrollmentGate.js";
+import { MIN_PASSWORD_LENGTH } from "../../../shared/components/layout/RecoveryCodeUnlock.js";
 import { useUnlockPrompt } from "../../../shared/components/layout/UnlockPromptProvider.js";
 import { destroyLocalIndex } from "../../../shared/search/localIndexRpcClient.js";
 import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
@@ -62,8 +64,6 @@ import {
 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;
-
 /** Mirrors restapi's `BaseKeyVaultRoute` `MAX_MASTER_KEY_WRAPS` - `addMasterKeyWrap()` refuses a vault
  * already holding this many wraps (escrow included). */
 export const MAX_MASTER_KEY_WRAPS = 20;
@@ -253,6 +253,7 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
     // Distinguishes the "Save your new recovery codes" screen's copy for the two different actions that
     // land on it - a plain regeneration only invalidates old recovery codes, while a rotation also
     // invalidates every other unlock method, which the copy needs to say plainly.
+    const [confirmingRotation, setConfirmingRotation] = useState(false);
     const [recoveryCodesReason, setRecoveryCodesReason] = useState<"regenerate" | "rotate">("regenerate");
     const [codesSaved, setCodesSaved] = useState(false);
     const [codesCopied, setCodesCopied] = useState(false);
@@ -304,6 +305,7 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
     const hasEscrowWrap = vault?.masterKeyWraps.some((w) => w.method === "escrow") ?? false;
     const [wrappingEscrow, setWrappingEscrow] = useState(false);
     const [escrowError, setEscrowError] = useState<string | null>(null);
+    const [pendingEscrow, setPendingEscrow] = useState<EscrowInfo | null>(null);
 
     /**
      * This mailbox's unlocked keys *right now* - never a copy read at render time, which a lock (idle
@@ -351,13 +353,28 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
         return err instanceof ApiRequestError ? err.message : fallback;
     }
 
+    /** Looks up the certificate the server says this mailbox's escrow scope holds, and asks the owner to confirm it
+     * before the master key is wrapped to it: nothing else vouches for that certificate, and whoever holds its
+     * private key can read this mailbox's encrypted mail. */
     async function handleWrapEscrow() {
         setEscrowError(null);
         setWrappingEscrow(true);
         try {
             // Only reachable when mailbox.escrowScopeId is set (see the render guard below).
+            await verifiedUnlockedKeys();
+            setPendingEscrow(await getEscrowInfo(mailboxUid!, client));
+        } catch (err) {
+            setEscrowError(errorMessage(err, "Could not add escrow protection for this mailbox."));
+        } finally {
+            setWrappingEscrow(false);
+        }
+    }
+
+    async function handleConfirmEscrow(escrowInfo: EscrowInfo) {
+        setPendingEscrow(null);
+        setWrappingEscrow(true);
+        try {
             const { current } = await verifiedUnlockedKeys();
-            const escrowInfo = await getEscrowInfo(mailboxUid!, client);
             const wrap = await buildEscrowWrap(current.masterKey, escrowInfo.escrowScopeId, fromBase64(escrowInfo.publicKey.publicKey));
             await addMasterKeyWrap(mailboxUid!, wrap, undefined, client);
             await loadVault();
@@ -729,7 +746,7 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
      * working the instant this succeeds, since `rekey()` replaces `masterKeyWraps` wholesale - the whole
      * point, for a captured-wrap scenario where it's unclear which method was compromised.
      */
-    async function handleRotateKeys(e: FormEvent) {
+    function handleRotateKeys(e: FormEvent) {
         e.preventDefault();
         if (rotationBlockedBySigning) {
             // The form's controls are disabled in this state too; this also covers an implicit submit.
@@ -744,6 +761,13 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
             return;
         }
         setActionError(null);
+        // One press must not end every other unlock method and every other device's password: say so, and wait for a yes.
+        setConfirmingRotation(true);
+    }
+
+    async function rotateKeys() {
+        setConfirmingRotation(false);
+        setActionError(null);
         setEscrowError(null);
         setRotating(true);
         let keys: PublicKey[];
@@ -1038,6 +1062,30 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                                 )}
                             </div>
                         )}
+                        <Modal open={pendingEscrow !== null} onClose={() => setPendingEscrow(null)} title="Confirm escrow certificate">
+                            <p className="text-sm mb-3">
+                                Anyone holding the private key for this certificate will be able to recover this mailbox&rsquo;s
+                                encrypted mail. Confirm it is the escrow certificate your organization expects before continuing.
+                            </p>
+                            <dl className="text-sm mb-5 flex flex-col gap-1">
+                                <div>
+                                    <dt className="text-xs text-text-muted">Escrow scope</dt>
+                                    <dd className="break-all">{pendingEscrow?.escrowScopeId}</dd>
+                                </div>
+                                <div>
+                                    <dt className="text-xs text-text-muted">Certificate fingerprint</dt>
+                                    <dd className="font-mono break-all">{pendingEscrow?.publicKey.fingerprint}</dd>
+                                </div>
+                            </dl>
+                            <div className="flex gap-3 justify-end">
+                                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setPendingEscrow(null)}>
+                                    Cancel
+                                </Button>
+                                <Button type="button" className="!w-auto" onClick={() => void handleConfirmEscrow(pendingEscrow!)}>
+                                    Trust this certificate
+                                </Button>
+                            </div>
+                        </Modal>
                     </div>
                 )}
 
@@ -1160,6 +1208,20 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                             </Button>
                         </div>
 
+                        <Modal open={confirmingRotation} onClose={() => setConfirmingRotation(false)} title="Rotate your keys?">
+                            <p className="text-sm mb-3">
+                                Every other way of unlocking this mailbox - its password, its recovery codes, and every other device&rsquo;s saved password - stops working
+                                the moment this finishes, and cannot be brought back. You will be shown new recovery codes once.
+                            </p>
+                            <div className="flex gap-3 justify-end">
+                                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingRotation(false)}>
+                                    Cancel
+                                </Button>
+                                <Button type="button" className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger" onClick={() => void rotateKeys()}>
+                                    Yes, rotate my keys
+                                </Button>
+                            </div>
+                        </Modal>
                         <form onSubmit={handleRotateKeys} className="flex flex-col gap-2 border-t border-border pt-6">
                             <h2 className="text-sm font-semibold">Rotate keys</h2>
                             <p className="text-xs text-text-muted mb-1">

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

@@ -30,6 +30,7 @@ import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+import GravatarSetting from "../../../shared/components/settings/GravatarSetting.js";
 
 const NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]);
 
@@ -83,6 +84,8 @@ function PrivacyContent({ userUid }: { userUid?: string }) {
                     <p className="text-sm text-text-muted">Export or manage the data associated with this mailbox.</p>
                 </div>
 
+                <GravatarSetting />
+
                 {selectedIsOwn ? (
                     <>
                         <ExportSection mailboxUid={mailboxUid} mailboxLabel={`${selected.displayName} (${selected.primarySmtpAddress})`} />
@@ -288,7 +291,7 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
             return;
         }
         setUploading(true);
-        uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid })
+        uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid, mailboxUid: mailboxUid! }, client)
             .then(() => loadRequests())
             .catch((err) => notifyApiError(err, "Couldn't upload the file"))
             .finally(() => setUploading(false));

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

@@ -197,7 +197,18 @@ function ProfileContent() {
                         </div>
                         {zoneWasPreselected && (
                             <p className="mt-1 text-xs text-text-muted">
-                                Your mailbox has no time zone chosen yet; this device&rsquo;s is preselected. Save to keep it.
+                                Your mailbox has no time zone chosen yet (it uses UTC); this device&rsquo;s is preselected, and Save sets it - whatever else you change.{" "}
+                                <Button
+                                    type="button"
+                                    variant="text"
+                                    className="!w-auto !inline !p-0 !text-xs"
+                                    onClick={() => {
+                                        setTimezone(DEFAULT_TIME_ZONE);
+                                        setSaved(false);
+                                    }}
+                                >
+                                    Keep UTC
+                                </Button>
                             </p>
                         )}
                         <p id="profile-time-zone-help" className="mt-1 text-xs text-text-muted">

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../../shared/navigation/pageTitle.js";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import {
     MailboxAccessMember,
@@ -60,15 +60,25 @@ function SharingContent() {
     // `SettingsShell` only ever renders its children once `mailboxUid` has resolved (a mailbox-less caller
     // gets `<MailboxProvisioning />` instead) - same established precedent as the Labels/Focused Inbox
     // settings pages, so none of the handlers below need their own `!mailboxUid` guard.
+    // Only the latest request's answer is shown (a reload after a change can overtake a slower earlier one).
+    const latestLoad = useRef(0);
+
     function reload() {
+        const load = ++latestLoad.current;
         setStatus("loading");
         setError(null);
         listMailboxAccess(mailboxUid!)
             .then((result) => {
+                if (load !== latestLoad.current) {
+                    return;
+                }
                 setMembers(result);
                 setStatus("ready");
             })
             .catch((err) => {
+                if (load !== latestLoad.current) {
+                    return;
+                }
                 // A 403 here is the live, server-verified "can this caller manage this mailbox's sharing"
                 // signal - the same permission threshold (ACLAction.UPDATE) this route itself requires, so
                 // no separate probe call is needed to decide which state to render.

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

@@ -77,10 +77,7 @@ function SignatureDetailContent({ uid }: { uid: string }) {
         setSaving(true);
         setSaved(false);
         try {
-            if (isDefaultForNewMessages || isDefaultForReplyForward) {
-                const existing = await listMailSignatures(mailboxUid!, { limit: 100 });
-                await clearPreviousDefaults(existing, original!.uid, isDefaultForNewMessages, isDefaultForReplyForward);
-            }
+            // This signature is saved first: were it refused (a 409, a 400) after the others had been cleared, the mailbox would be left with no default at all.
             const updated = await updateMailSignature({
                 uid: original!.uid,
                 version: original!.version,
@@ -90,6 +87,11 @@ function SignatureDetailContent({ uid }: { uid: string }) {
                 isDefaultForReplyForward,
             });
             setOriginal(updated);
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                // The signature's own mailbox, not the one the page happens to have selected.
+                const existing = await listMailSignatures(original!.mailboxUid, { limit: 100 });
+                await clearPreviousDefaults(existing, original!.uid, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
             setSaved(true);
         } catch (err) {
             // A pop-up: `error` is only this form's own validation (and the load failure above).

package/apps/www/tasks/index.tsx

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import React, { FormEvent, useEffect, useMemo, useRef, useState } from "react";
-import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
+import { endOfWeek, isAfter, isBefore, isToday, startOfDay } from "date-fns";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import {
     Task,
@@ -19,6 +19,8 @@ import {
 import { listFlaggedMessages } from "../../../lib/mail/flaggedMessages.js";
 import { Message } from "../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
+import { useDayKey } from "../../../lib/calendar/useDayKey.js";
+import { dueDateInstant, parseDueDate } from "../../shared/components/tasks/dueDate.js";
 import TasksShell, { TasksShellProps, useTasksShell } from "../../shared/components/tasks/layout/TasksShell.js";
 import TasksSidebar, { TasksView } from "../../shared/components/tasks/TasksSidebar.js";
 import TasksToolbar, { TasksViewMode } from "../../shared/components/tasks/TasksToolbar.js";
@@ -44,15 +46,6 @@ function TasksPage(props: TasksShellProps) {
     );
 }
 
-/**
- * Parses a task's `dueDate` - `parseISO()` rather than `new Date()`, since `new Date("2026-06-16")` reads a
- * date-only value as UTC midnight, which is the *previous* local day anywhere west of UTC. A full
- * timestamp parses identically either way.
- */
-function parseDueDate(value: string): Date {
-    return parseISO(value);
-}
-
 type Bucket = "Overdue" | "Today" | "This Week" | "Later" | "No due date";
 const BUCKET_ORDER: Bucket[] = ["Overdue", "Today", "This Week", "Later", "No due date"];
 
@@ -118,7 +111,10 @@ function TasksContent() {
     useShortcut(SHORTCUTS.tasks.create, () => addTaskRef.current!.focus(), { enabled: canAddTask });
     const addTaskHint = useShortcutProps("Add a task", SHORTCUTS.tasks.create, canAddTask);
 
+    // Which load is the latest: a slower, older one (another folder's, from before the mailbox changed) must not replace the list a newer one set.
+    const loadRun = useRef(0);
     function reload(): Promise<void> {
+        const run = ++loadRun.current;
         if (!folderUid) {
             setTasks([]);
             setTruncated(false);
@@ -129,11 +125,21 @@ function TasksContent() {
         setError(null);
         return listAllPages((page) => listTasks(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
             .then((result) => {
-                setTasks(result.items);
-                setTruncated(result.truncated);
+                if (run === loadRun.current) {
+                    setTasks(result.items);
+                    setTruncated(result.truncated);
+                }
             })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load tasks."))
-            .finally(() => setLoading(false));
+            .catch((err) => {
+                if (run === loadRun.current) {
+                    setError(err instanceof ApiRequestError ? err.message : "Could not load tasks.");
+                }
+            })
+            .finally(() => {
+                if (run === loadRun.current) {
+                    setLoading(false);
+                }
+            });
     }
 
     useEffect(() => {
@@ -149,12 +155,29 @@ function TasksContent() {
         if (view.type !== "flagged" || !mailboxUid) {
             return;
         }
+        // Set once the view or mailbox this load was for is no longer the one shown, so its answer is dropped.
+        let stale = false;
         setFlaggedLoading(true);
         setFlaggedError(null);
         listFlaggedMessages(mailboxUid, client)
-            .then(setFlaggedMessages)
-            .catch((err) => setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email."))
-            .finally(() => setFlaggedLoading(false));
+            .then((messages) => {
+                if (!stale) {
+                    setFlaggedMessages(messages);
+                }
+            })
+            .catch((err) => {
+                if (!stale) {
+                    setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email.");
+                }
+            })
+            .finally(() => {
+                if (!stale) {
+                    setFlaggedLoading(false);
+                }
+            });
+        return () => {
+            stale = true;
+        };
     }, [view, mailboxUid]);
 
     async function handleCreate(e: FormEvent) {
@@ -180,8 +203,8 @@ function TasksContent() {
                     mailboxUid: target,
                     folderUid: targetFolderUid,
                     title: title.trim(),
-                    // The date input's "yyyy-MM-dd" is the user's *local* day - see `parseDueDate()`.
-                    dueDate: dueDate ? parseDueDate(dueDate).toISOString() : undefined,
+                    // The date input's "yyyy-MM-dd" is stored as that day's UTC midnight - see `dueDateInstant()`.
+                    dueDate: dueDate ? dueDateInstant(dueDate) : undefined,
                     priority,
                 },
                 client,
@@ -203,7 +226,24 @@ function TasksContent() {
         }
     }
 
+    // The tasks whose completion is being saved. The control is disabled meanwhile, and the ref (current at once, unlike state) turns away a second click that
+    // lands before the page has re-rendered: it would send the same stale `version` and be refused, rolling the task back to a state the server has left.
+    const togglingRef = useRef(new Set<string>());
+    const [toggling, setToggling] = useState<Set<string>>(new Set());
+    function setTogglePending(uid: string, pending: boolean) {
+        if (pending) {
+            togglingRef.current.add(uid);
+        } else {
+            togglingRef.current.delete(uid);
+        }
+        setToggling(new Set(togglingRef.current));
+    }
+
     async function handleToggle(task: Task) {
+        if (togglingRef.current.has(task.uid)) {
+            return;
+        }
+        setTogglePending(task.uid, true);
         const nextCompleted = !task.completed;
         setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
         try {
@@ -212,6 +252,8 @@ function TasksContent() {
         } catch (err) {
             setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
             notifyApiError(err, "Couldn't update the task");
+        } finally {
+            setTogglePending(task.uid, false);
         }
     }
 
@@ -262,8 +304,24 @@ function TasksContent() {
 
     const checkedTasks = viewFiltered.filter((t) => checkedUids.has(t.uid));
 
+    // A bulk action sends every checked row's own version: pressed again before it finishes, it would send stale ones and raise a stream of 409s.
+    const bulkRunning = useRef(false);
+    function singleFlight(run: () => Promise<void>): () => Promise<void> {
+        return async () => {
+            if (bulkRunning.current) {
+                return;
+            }
+            bulkRunning.current = true;
+            try {
+                await run();
+            } finally {
+                bulkRunning.current = false;
+            }
+        };
+    }
+
     // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
-    async function handleBulkComplete() {
+    const handleBulkComplete = singleFlight(async () => {
         for (const task of checkedTasks) {
             try {
                 await setTaskCompleted(task, true, client);
@@ -273,9 +331,9 @@ function TasksContent() {
         }
         setCheckedUids(new Set());
         await reload();
-    }
+    });
 
-    async function handleBulkAddToMyDay() {
+    const handleBulkAddToMyDay = singleFlight(async () => {
         for (const task of checkedTasks) {
             try {
                 await setTaskMyDay(task, true, client);
@@ -285,7 +343,7 @@ function TasksContent() {
         }
         setCheckedUids(new Set());
         await reload();
-    }
+    });
 
     async function handleBulkDelete() {
         for (const task of checkedTasks) {
@@ -313,6 +371,8 @@ function TasksContent() {
         }
     }
 
+    // Re-worked when the day changes, so a page left open past midnight moves Today's tasks to Overdue.
+    const dayKey = useDayKey();
     const grouped = useMemo(() => {
         const now = new Date();
         const map = new Map<Bucket, Task[]>(BUCKET_ORDER.map((b) => [b, []]));
@@ -323,7 +383,7 @@ function TasksContent() {
             map.get(bucketFor(task, now))!.push(task);
         }
         return map;
-    }, [viewFiltered]);
+    }, [viewFiltered, dayKey]);
 
     const completedTasks = viewFiltered.filter((t) => t.completed);
 
@@ -428,6 +488,7 @@ function TasksContent() {
                                     checkedUids={checkedUids}
                                     onToggleChecked={toggleChecked}
                                     onToggle={handleToggle}
+                                    toggling={toggling}
                                     onDelete={requestDelete}
                                 />
                             ) : (
@@ -445,6 +506,7 @@ function TasksContent() {
                                                 checkedUids={checkedUids}
                                                 onToggleChecked={toggleChecked}
                                                 onToggle={handleToggle}
+                                                toggling={toggling}
                                                 onDelete={requestDelete}
                                             />
                                         );
@@ -456,6 +518,7 @@ function TasksContent() {
                                             checkedUids={checkedUids}
                                             onToggleChecked={toggleChecked}
                                             onToggle={handleToggle}
+                                            toggling={toggling}
                                             onDelete={requestDelete}
                                         />
                                     )}
@@ -509,12 +572,13 @@ function FlaggedEmailList({ loading, error, messages }: { loading: boolean; erro
 
 /** A circular completion-toggle control matching Outlook's visual language (not a native checkbox), while
  * staying a real accessible toggle. */
-function CompletionToggle({ task, onToggle }: { task: Task; onToggle: (task: Task) => void }) {
+function CompletionToggle({ task, onToggle, pending }: { task: Task; onToggle: (task: Task) => void; pending: boolean }) {
     return (
         <button
             type="button"
             role="checkbox"
             aria-checked={task.completed}
+            disabled={pending}
             aria-label={`Mark "${task.title}" as ${task.completed ? "not complete" : "complete"}`}
             onClick={() => onToggle(task)}
             className={[
@@ -533,10 +597,12 @@ interface TaskGroupProps {
     checkedUids: Set<string>;
     onToggleChecked: (uid: string) => void;
     onToggle: (task: Task) => void;
+    /** The uids of the tasks whose completion is being saved. */
+    toggling: Set<string>;
     onDelete: (task: Task) => void;
 }
 
-function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskGroupProps) {
+function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, toggling, onDelete }: TaskGroupProps) {
     return (
         <div>
             <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted mb-2">{label}</h2>
@@ -549,7 +615,7 @@ function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDel
                             checked={checkedUids.has(task.uid)}
                             onChange={() => onToggleChecked(task.uid)}
                         />
-                        <CompletionToggle task={task} onToggle={onToggle} />
+                        <CompletionToggle task={task} onToggle={onToggle} pending={toggling.has(task.uid)} />
                         <span className={["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" ")}>
                             {task.title}
                         </span>
@@ -581,10 +647,12 @@ interface TaskTableProps {
     checkedUids: Set<string>;
     onToggleChecked: (uid: string) => void;
     onToggle: (task: Task) => void;
+    /** The uids of the tasks whose completion is being saved. */
+    toggling: Set<string>;
     onDelete: (task: Task) => void;
 }
 
-function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskTableProps) {
+function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, toggling, onDelete }: TaskTableProps) {
     const allChecked = tasks.length > 0 && tasks.every((t) => checkedUids.has(t.uid));
 
     function toggleAll() {
@@ -630,7 +698,7 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }:
                                 />
                             </td>
                             <td className="px-3 py-2">
-                                <CompletionToggle task={task} onToggle={onToggle} />
+                                <CompletionToggle task={task} onToggle={onToggle} pending={toggling.has(task.uid)} />
                             </td>
                             <td className={["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" ")}>{task.title}</td>
                             <td className="px-3 py-2 text-text-muted">{task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : ""}</td>

package/dist/apps/admin/audit-log/index.js

@@ -4,11 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { listAuditLog } from "../../../lib/admin/auditLogApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 const PAGE_SIZE = 25;
 /** How long typing in a filter box has to pause before the log is re-fetched. */
 export const FILTER_DEBOUNCE_MS = 300;
@@ -64,7 +64,7 @@ function AuditLogContent() {
         })
             .catch((err) => {
             if (!cancelled)
-                setError(err instanceof ApiRequestError ? err.message : "Could not load the audit log.");
+                setError(actionErrorMessage(err, "Could not load the audit log."));
         })
             .finally(() => {
             if (!cancelled)

package/dist/apps/admin/branding/index.js

@@ -4,11 +4,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { getBranding } from "../../../lib/branding/brandingApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
 import BrandingForm from "../../shared/components/admin/settings/BrandingForm.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 export default function BrandingPage(props) {
     return (_jsx(AdminShell, { ...props, active: "branding", children: _jsx(BrandingContent, {}) }));
 }
@@ -19,7 +19,7 @@ function BrandingContent() {
     useEffect(() => {
         getBranding()
             .then(setBranding)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load branding."))
+            .catch((err) => setLoadError(actionErrorMessage(err, "Could not load branding.")))
             .finally(() => setLoading(false));
     }, []);
     if (loading) {