@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/shared/components/settings/GravatarSetting.tsx

@@ -0,0 +1,27 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useSyncExternalStore } from "react";
+import { gravatarEnabled, setGravatarEnabled, subscribeGravatarPreference } from "../../../../lib/contacts/gravatar.js";
+
+/**
+ * The opt-in for Gravatar contact pictures. A per-browser preference (not the mailbox's), off until turned on, because looking a picture up tells
+ * gravatar.com the contact's address hash and the reader's IP address.
+ */
+export default function GravatarSetting() {
+    const enabled = useSyncExternalStore(subscribeGravatarPreference, gravatarEnabled, () => false);
+    return (
+        <div>
+            <h2 className="text-sm font-semibold mb-2">Contact pictures</h2>
+            <label className="flex items-center gap-2 text-sm">
+                <input type="checkbox" checked={enabled} onChange={(e) => setGravatarEnabled(e.target.checked)} />
+                Show profile pictures from Gravatar
+            </label>
+            <p className="text-xs text-text-muted mt-2">
+                Looks up each contact&apos;s picture by sending a hash of their email address to gravatar.com, which also sees your IP address. Off by
+                default; applies to this browser only.
+            </p>
+        </div>
+    );
+}

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -156,7 +156,7 @@ export default function SettingsShell({
     // A full-screen takeover, not nested inside the rest of the app's chrome — same as ContactsShell/
     // TasksShell, there's nothing else for a mailbox-less caller to configure here yet.
     if (userUid && status === "ready" && !mailboxUid) {
-        return <MailboxProvisioning />;
+        return <MailboxProvisioning impersonating={impersonating} impersonationBaseUrl={impersonationBaseUrl} />;
     }
 
     let inner: ReactNode = null;

package/apps/shared/components/tasks/dueDate.ts

@@ -0,0 +1,29 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { parseISO } from "date-fns";
+
+const MS_PER_DAY = 86_400_000;
+
+/**
+ * The stored value of a date-only due date (a `yyyy-MM-dd` day from a date input): UTC midnight of that day, so the task is due on the same
+ * calendar day for everyone, whatever zone they read it in - the way an all-day event is stored. (The creator's local midnight would be a
+ * different day for a reader in another zone.)
+ */
+export function dueDateInstant(dateKey: string): string {
+    return `${dateKey}T00:00:00.000Z`;
+}
+
+/**
+ * A task's `dueDate` as a local `Date`. An exact UTC midnight is a date-only due date (see `dueDateInstant()`) and reads as the start of that
+ * calendar day wherever the reader is; any other instant - a time on the day, or a date-only value an older version stored as the creator's local
+ * midnight - is that instant itself. (`parseISO()` rather than `new Date()`: a bare `yyyy-MM-dd` would be read as UTC.)
+ */
+export function parseDueDate(value: string): Date {
+    const instant = parseISO(value);
+    if (instant.getTime() % MS_PER_DAY !== 0) {
+        return instant;
+    }
+    return new Date(instant.getUTCFullYear(), instant.getUTCMonth(), instant.getUTCDate());
+}

package/apps/shared/components/tasks/layout/TasksShell.tsx

@@ -116,7 +116,7 @@ export default function TasksShell({
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
     // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
     if (userUid && status === "ready" && !mailboxUid) {
-        return <MailboxProvisioning />;
+        return <MailboxProvisioning impersonating={impersonating} impersonationBaseUrl={impersonationBaseUrl} />;
     }
 
     let inner: ReactNode = null;

package/apps/shared/mail/decryptedMessages.ts

@@ -5,6 +5,7 @@
 import { useSyncExternalStore } from "react";
 import { getUnlockedKeys, subscribeKeySession } from "../../../lib/crypto/keySession.js";
 import { getMessageRawContent } from "../../../lib/mail/mailApi.js";
+import { onSigningOut } from "../components/mail/compose/composeFlushRegistry.js";
 
 /**
  * What this device has recovered of encrypted messages by decrypting them: the real subject (the server only ever holds RFC 9788's `[...]`
@@ -26,6 +27,50 @@ let unlockEpoch = 0;
 const listeners = new Set<() => void>();
 const inFlight = new Set<string>();
 
+/** How long a message that could not be decrypted is left alone before it is tried again (it is also tried again after any unlock). */
+const DECRYPT_RETRY_MS = 10 * 60_000;
+/** How many such messages are remembered. */
+const MAX_FAILED = 1000;
+/** The messages whose decrypting came to nothing (fetch failed, not for this key, nothing readable), by uid: when and in which unlock epoch. */
+const failed = new Map<string, { epoch: number; at: number }>();
+
+/** Whether decrypting this message already came to nothing since the keys were last unlocked, recently enough that trying again would only repeat it. */
+export function decryptFailedBefore(uid: string): boolean {
+    const known = failed.get(uid);
+    return !!known && known.epoch === unlockEpoch && Date.now() - known.at < DECRYPT_RETRY_MS;
+}
+
+/** Remembers that decrypting this message came to nothing, so a list that refreshes does not download and try it again each time. */
+export function markDecryptFailed(uid: string): void {
+    failed.delete(uid);
+    if (failed.size >= MAX_FAILED) {
+        failed.delete(failed.keys().next().value!);
+    }
+    failed.set(uid, { epoch: unlockEpoch, at: Date.now() });
+}
+
+/** Forgets everything remembered about messages that could not be decrypted (sign-out, an account switch). */
+export function clearDecryptedMessages(): void {
+    entries = {};
+    failed.clear();
+    emit();
+}
+onSigningOut(clearDecryptedMessages);
+
+/** Runs `task` over `items` with at most `limit` running at once, resolving to the results in the order of `items`. */
+export async function mapWithConcurrency<T, R>(items: T[], limit: number, task: (item: T) => Promise<R>): Promise<R[]> {
+    const results = new Array<R>(items.length);
+    let next = 0;
+    async function worker(): Promise<void> {
+        while (next < items.length) {
+            const index = next++;
+            results[index] = await task(items[index]);
+        }
+    }
+    await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker));
+    return results;
+}
+
 function emit(): void {
     for (const listener of [...listeners]) {
         listener();
@@ -96,7 +141,7 @@ export function useUnlockEpoch(): number {
  */
 export async function decryptForDisplay(uid: string, mailboxUid: string): Promise<void> {
     const unlocked = getUnlockedKeys(mailboxUid);
-    if (!unlocked || entries[uid] || inFlight.has(uid)) {
+    if (!unlocked || entries[uid] || inFlight.has(uid) || decryptFailedBefore(uid)) {
         return;
     }
     inFlight.add(uid);
@@ -107,9 +152,13 @@ export async function decryptForDisplay(uid: string, mailboxUid: string): Promis
         // A lock while this ran: the result must not go back on screen.
         if (getUnlockedKeys(mailboxUid) === unlocked) {
             rememberDecrypted(uid, mailboxUid, { subject: security.subject, preview: security.html ? previewOf(security.html) : security.text?.slice(0, PREVIEW_MAX_LENGTH) });
+            if (!security.subject && !security.html && !security.text) {
+                markDecryptFailed(uid);
+            }
         }
     } catch {
-        // Left as the placeholder.
+        // Left as the placeholder - and not fetched again until the next unlock.
+        markDecryptFailed(uid);
     } finally {
         inFlight.delete(uid);
     }

package/apps/shared/mail/listSnapshots.ts

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import type { ConversationSummary } from "../../../lib/mail/conversationsApi.js";
 import type { Message } from "../../../lib/mail/mailApi.js";
+import { onSigningOut } from "../components/mail/compose/composeFlushRegistry.js";
 
 /**
  * A short-lived, in-memory copy of a folder's listing, so that switching to a folder that was shown a moment ago (or coming back
@@ -85,3 +86,4 @@ export function saveListScroll(key: string, scrollTop: number): void {
 export function clearListSnapshots(): void {
     snapshots.clear();
 }
+onSigningOut(clearListSnapshots);

package/apps/shared/mail/outbox/sendDecision.ts

@@ -82,9 +82,12 @@ export interface SendDecisionInput {
  * can choose, or rejected outright. Used twice with the same rules - by the compose window, from what it already knows, to catch a problem
  * *before* it closes (`lookupsComplete: false`), and by the background send, once its recipient lookups are in.
  *
- * Encryption follows `evaluateEncryptionRequirement()` - fail open: only a message the user asked to encrypt, or one the loaded policy
- * encrypts, is encrypted; everything unknown is plain and sends. The one place unknown blocks is a message the user *explicitly* asked to
- * encrypt whose recipients' keys could not be looked up: they asked for encryption, and it cannot be delivered.
+ * Encryption follows `evaluateEncryptionRequirement()`. The compose window's early check (`lookupsComplete: false`) is fail open: only a message
+ * the user asked to encrypt, or one the loaded policy encrypts, is encrypted there; everything unknown is plain, so a flapping gateway never
+ * blocks a draft or Close. The background send (`lookupsComplete: true`) is not: once its loads are in, a message that might have to be encrypted
+ * because the policy or a recipient's key could not be checked (the sender having a key to encrypt with) is blocked (`lookup-failed`) rather than
+ * sent in the clear - and so is one the user *explicitly* asked to encrypt whose recipients' keys could not be looked up. Either way the sender can
+ * choose to send it without encryption.
  */
 export function decideSend(input: SendDecisionInput): SendDecision {
     const { keys } = input;
@@ -122,6 +125,14 @@ export function decideSend(input: SendDecisionInput): SendDecision {
     });
     const encrypting = requirement.required;
 
+    if (!encrypting && input.lookupsComplete && requirement.unknown.some((fact) => fact !== "mailbox")) {
+        // The sender has a key to encrypt with, the loads are all in (or gave up), and the policy or a recipient's key is still unknown: the message
+        // might have to be encrypted, and plaintext must not go out on a guess. The sender can still choose to send it without encryption. (An unknown
+        // *mailbox* is not one of these: with no key known there is nothing to say encryption applies, and a mailbox that will not load must not
+        // stop everyone's mail.)
+        return { action: "blocked", block: { kind: "lookup-failed", message: LOOKUP_UNAVAILABLE_MESSAGE, overrideLabel: "Send without encryption", keysLocked: false } };
+    }
+
     if (encrypting) {
         const statuses = input.recipients.filter((status): status is RecipientEncryptionStatus => !!status);
         const allResolved = statuses.length === input.recipients.length;

package/apps/shared/mail/outbox/sendJob.ts

@@ -11,6 +11,7 @@ import {
     Message,
     assembleDraft,
     assembleDraftRaw,
+    forgetDraftImages,
     getMailbox,
     getMessage,
     queueMessageSend,
@@ -89,8 +90,10 @@ export function retainedRequest(draftUid: string): SendRequest | undefined {
     return sendState.retained.get(draftUid);
 }
 
+/** Drops the request a message was queued from, and the pictures remembered as attached to its draft: it has gone, so neither is wanted again. */
 export function forgetRetainedRequest(draftUid: string): void {
     sendState.retained.delete(draftUid);
+    forgetDraftImages(draftUid);
 }
 
 function retain(request: SendRequest): void {
@@ -424,8 +427,10 @@ export function startSend(request: SendRequest, client?: ApiClient): boolean {
         } else if (outcome.kind === "sent") {
             // A server with no queue relayed it before answering: the Sent Items copy exists already.
             markOutgoingSent(uid);
+            forgetDraftImages(uid);
             notifySent();
         } else {
+            forgetDraftImages(uid);
             notify({
                 id: `scheduled:${uid}`,
                 kind: "success",

package/apps/shared/mail/useMailLiveUpdates.ts

@@ -18,6 +18,10 @@ export const LIVE_POLL_INTERVAL_MS = 45_000;
 /** Events arriving this close together are answered with one refresh - a burst of new mail is one refetch, not one each. */
 export const LIVE_EVENT_DEBOUNCE_MS = 400;
 
+/** Refreshes are also at least this far apart: while mail keeps arriving (a bulk delivery, an import) the list, the folder counts and an open
+ * thread are read about once in this time - a trailing refresh then picks up whatever came since - instead of every debounce window. */
+export const LIVE_EVENT_MIN_INTERVAL_MS = 1_500;
+
 /** What changed, as far as a list on screen is concerned. */
 export interface LiveUpdates {
     /** Bumped each time the list should quietly refetch its first page. `0` until the first bump. */
@@ -153,10 +157,12 @@ export function useMailLiveUpdates({
         let pendingFolders = new Set<string>();
         let pendingUnknown = false;
         let everOpen = false;
+        let lastFlushAt = -Infinity;
 
         // Never runs once `stopped`: whatever sets it clears the timer first.
         function flush() {
             timer = undefined;
+            lastFlushAt = Date.now();
             const folderUids = pendingUnknown ? null : new Set(pendingFolders);
             pendingFolders = new Set();
             pendingUnknown = false;
@@ -174,7 +180,7 @@ export function useMailLiveUpdates({
             } else {
                 pendingUnknown = true;
             }
-            timer ??= setTimeout(flush, LIVE_EVENT_DEBOUNCE_MS);
+            timer ??= setTimeout(flush, Math.max(LIVE_EVENT_DEBOUNCE_MS, lastFlushAt + LIVE_EVENT_MIN_INTERVAL_MS - Date.now()));
         }
 
         const offEvent = client.onEvent((event) => {

package/apps/shared/mail/usePermanentDelete.tsx

@@ -25,6 +25,8 @@ export interface EmptiableFolder {
     name: string;
     /** Every folder to empty, when "the folder" is the "All mailboxes" view of one type (each mailbox's own Deleted Items): `uid` is then the first of them. */
     uids?: string[];
+    /** The names of the mailboxes those folders are in, for the confirmation to say whose are emptied (in the "All mailboxes" view). */
+    scope?: string[];
 }
 
 export interface PermanentDelete {
@@ -155,7 +157,7 @@ export function usePermanentDelete(): PermanentDelete {
                               : folderRequest.count === 1
                                 ? "the only item"
                                 : `all ${folderRequest.count} items`
-                      } in ${folderRequest.folder.name}? This can't be undone.`
+                      } in ${folderRequest.folder.name}${folderRequest.folder.scope ? ` of: ${folderRequest.folder.scope.join(", ")}` : ""}? This can't be undone.`
                     : `Permanently delete ${messageCount(request?.kind === "messages" ? request.messages.length : 0)}? This can't be undone.`
             }
             confirmLabel={folderRequest ? "Delete all permanently" : "Delete permanently"}

package/apps/shared/notifications/apiErrors.ts

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import { logSessionEvent } from "../../../lib/auth/session.js";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { describeSendFailure } from "../../../lib/mail/sendFailure.js";
 import { NotificationAction, notify } from "./store.js";
@@ -20,6 +21,7 @@ export function setSignInUrl(authServerUrl: string | undefined): void {
 
 /** The "Your session expired" pop-up: one however many requests noticed, with a "Sign in" action. Returns its id. */
 export function notifySessionExpired(): string {
+    logSessionEvent("notice:session-expired");
     return notify({
         kind: "error",
         title: "Your session expired",

package/apps/shared/notifications/preferences.ts

@@ -5,7 +5,7 @@
 /**
  * The user's one switch for every pop-up (new mail, a failed send, an API error, a reminder), per browser in `localStorage`.
  * Framework-free like the store, which reads it: `notify()` keeps a notification out of sight while it is off (it is still
- * listed in "Recent notifications").
+ * listed in "Recent notifications") - except an error that carries actions (Retry, Open draft), which would otherwise be unreachable.
  */
 
 /**

package/apps/shared/notifications/store.ts

@@ -382,7 +382,9 @@ export function notify(input: NotifyInput): string {
         paused: false,
     };
     applyInput(entry, input);
-    if (!getNotificationsEnabled()) {
+    // An error that offers something to do (a failed send's Retry and Open draft, "Sign in again") is shown whatever the switch says: it is
+    // the only way back to what the person typed, and the history has no way to carry out its actions.
+    if (!getNotificationsEnabled() && !(entry.kind === "error" && entry.actions.length > 0)) {
         // The user has pop-ups off: nothing is shown, but it is listed in the history like any other.
         record(entry);
         emit();

package/apps/shared/plugins/pluginNav.ts

@@ -43,9 +43,11 @@ export interface PluginNavProps {
 }
 
 /** A same-origin absolute path: starts with `/`, but not `//` or `/\` (both of which browsers treat as
- * protocol-relative URLs to another host). */
+ * protocol-relative URLs to another host), and holds no control character, space or backslash anywhere -
+ * URL parsers strip tab/CR/LF from anywhere, so `/<tab>/evil.com` would otherwise read as `//evil.com`. */
 export function isSafePluginHref(href: string): boolean {
-    return /^\/(?![/\\])/.test(href);
+    // eslint-disable-next-line no-control-regex -- the control characters are exactly what is being rejected
+    return /^\/(?![/\\])[^\u0000-\u0020\u007f\\]*$/.test(href);
 }
 
 /**

package/apps/www/calendar/index.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3, HiOutlinePlus } from "react-icons/hi2";
 import {
@@ -29,6 +29,7 @@ import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calen
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { CalendarOccurrence, expandAllOccurrences } from "../../../lib/calendar/recurrence.js";
+import { useDayKey } from "../../../lib/calendar/useDayKey.js";
 import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
 import CalendarShell, { CalendarShellProps, useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
@@ -59,7 +60,7 @@ import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
-import { redactedEventUidOf } from "../../shared/calendar/calendarLiveUpdates.js";
+import { changedEventOf } from "../../shared/calendar/calendarLiveUpdates.js";
 
 /** The furthest instants a `Date` can hold: the List's "range" reaches both. */
 const MAX_DATE_MS = 8.64e15;
@@ -294,17 +295,22 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
 
-    // A private or confidential event that somebody creates or changes is announced on the push connection as its busy block, whatever the reader may
-    // see (see `redactedEventUidOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
-    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404) leaves it. A failed fetch
-    // changes nothing: the next load shows the event as it is.
+    // An event that somebody creates, changes or deletes is announced on the push connection - a private or confidential one as its busy block, whatever the
+    // reader may see (see `changedEventOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
+    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404, or a delete) leaves it. A failed
+    // fetch changes nothing: the next load shows the event as it is.
     const checkedFolderUidsRef = useRef(checkedFolderUids);
     checkedFolderUidsRef.current = checkedFolderUids;
     useEffect(
         () =>
             getPushClient().onEvent((event) => {
-                const uid = redactedEventUidOf(event);
-                if (!uid) {
+                const change = changedEventOf(event);
+                if (!change) {
+                    return;
+                }
+                const { uid } = change;
+                if (change.deleted) {
+                    setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
                     return;
                 }
                 void getCalendarEvent(uid, client).then(
@@ -340,11 +346,14 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         return () => clearTimeout(timer);
     }, [searchText]);
     // The List shows only what is from today on, so that is all a search steps through there; the other views reach the past ones.
+    // Today moves on at midnight: the List's "from today on" is worked out again then (`listDay` is only a dependency).
+    const listDay = useDayKey();
+    const dayOfList = view === "list" ? listDay : "";
     const matches = useMemo(() => {
         const found = searching ? searchOccurrences(events, query) : [];
         const today = new Date();
         return view === "list" ? found.filter((occurrence) => isUpcoming(occurrence, today)) : found;
-    }, [events, query, searching, view]);
+    }, [events, query, searching, view, dayOfList]);
     const activeIndex = matches.findIndex((m) => m.occurrenceKey === activeKey);
 
     // What an open event card steps through, in order: the matches while a search runs, else every event of the checked calendars (bounded as a
@@ -359,7 +368,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             return everything.filter((occurrence) => isUpcoming(occurrence, today));
         }
         return everything;
-    }, [searching, matches, view, everything]);
+    }, [searching, matches, view, everything, dayOfList]);
 
     const occurrences = useMemo(() => {
         if (view === "list") {
@@ -518,11 +527,12 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         });
     }
 
-    function openEvent(occurrence: CalendarOccurrence) {
+    // Stable (it only sets state), so the List's rows are not rendered again by every keystroke in the search box.
+    const openEvent = useCallback((occurrence: CalendarOccurrence) => {
         setSlide(undefined);
         setActiveKey(occurrence.occurrenceKey);
         setModal({ occurrence });
-    }
+    }, []);
 
     function closeModal() {
         setModal(null);
@@ -573,6 +583,8 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             reload();
         } catch (err) {
             notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
+            // A refused change (a 409 most of all) means the page holds a stale version: load again, or every later drag of this event fails the same way.
+            reload();
         }
     }
 

package/apps/www/contacts/[uid].tsx

@@ -8,12 +8,13 @@ import React, { useEffect, useState } from "react";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { Contact, deleteContact, getContact } from "../../../lib/contacts/contactsApi.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
-import ContactsShell, { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
+import ContactsShell, { ContactsShellProps, useContactsShell } from "../../shared/components/contacts/layout/ContactsShell.js";
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { useMailboxUpdateAccess } from "../../shared/mail/useMailboxUpdateAccess.js";
 
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
@@ -38,6 +39,9 @@ function ContactDetailContent({ uid }: { uid: string }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [mode, setMode] = useState<Mode>("view");
+    const { mailboxes } = useContactsShell();
+    // A contact in a mailbox shared with the reader view-only can be read, not changed.
+    const writable = useMailboxUpdateAccess(mailboxes.find((mailbox) => mailbox.uid === contact?.mailboxUid));
 
     useEffect(() => {
         setLoading(true);
@@ -101,6 +105,7 @@ function ContactDetailContent({ uid }: { uid: string }) {
                 contact={contact}
                 onEdit={() => setMode("edit")}
                 onDelete={() => handleDelete(contact)}
+                canWrite={writable}
                 backHref={backHref}
                 onKeysChanged={handleKeysChanged}
                 onChanged={setContact}