@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/shared/components/calendar/gridLayout.ts

@@ -0,0 +1,94 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { addDays } from "date-fns";
+
+/** Where things sit in the hour grids of the Week, Work Week, Day and Split views: 24 rows of one clock hour each. */
+export const HOUR_HEIGHT_PX = 48;
+export const SLOT_MINUTES = 30;
+export const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+/** The least height a block is drawn with, so a very short event can still be seen and clicked. */
+export const MIN_BLOCK_HEIGHT_PX = 16;
+
+/** Minutes after midnight on the wall clock (the local zone) at `ms`. */
+function wallMinutes(ms: number): number {
+    const date = new Date(ms);
+    return date.getHours() * 60 + date.getMinutes() + date.getSeconds() / 60;
+}
+
+/**
+ * The start of the `index`th half-hour row of the day beginning at `dayStart`, by the wall clock - the rows are labelled with clock hours, so on the
+ * day a daylight-saving change makes 23 or 25 hours long the row labelled 10 AM must still be 10:00, not ten hours after midnight. (A row whose
+ * clock time does not exist that day is the next one that does.)
+ */
+export function slotStart(dayStart: Date, index: number): Date {
+    return new Date(dayStart.getFullYear(), dayStart.getMonth(), dayStart.getDate(), 0, index * SLOT_MINUTES);
+}
+
+/**
+ * Where a block for an event from `startMs` to `endMs` goes in the column of the day beginning at `dayStart`: a multi-day event is clipped to the day,
+ * and (`wholeDay`, for an all-day event) fills it. Positioned by wall-clock minute, like the rows, so a block lines up with its hour on a 23 or 25
+ * hour day too.
+ */
+export function blockSpan(startMs: number, endMs: number, dayStart: Date, wholeDay = false): { top: number; height: number } {
+    const dayEnd = addDays(dayStart, 1).getTime();
+    const from = wholeDay || startMs < dayStart.getTime() ? 0 : wallMinutes(startMs);
+    const to = wholeDay || endMs >= dayEnd ? 24 * 60 : wallMinutes(endMs);
+    return {
+        top: (from / 60) * HOUR_HEIGHT_PX,
+        height: Math.max(((to - from) / 60) * HOUR_HEIGHT_PX, MIN_BLOCK_HEIGHT_PX),
+    };
+}
+
+/** One block's share of the width of its column: the lane it sits in, out of how many its overlapping neighbours need. */
+export interface Lane {
+    lane: number;
+    lanes: number;
+}
+
+/**
+ * Splits a column's width between blocks that overlap in time, as Outlook and Google Calendar do, so none is hidden behind another: blocks that
+ * overlap (directly or through a chain of others) form a group, and within it each takes the first lane that is free when it starts. Every block of a
+ * group gets the group's lane count; a block that overlaps nothing is alone in one lane (the whole width). Results are in the order of `spans`.
+ */
+export function layoutLanes(spans: { top: number; height: number }[]): Lane[] {
+    const lanes: Lane[] = spans.map(() => ({ lane: 0, lanes: 1 }));
+    const order = spans.map((_, index) => index).sort((a, b) => spans[a].top - spans[b].top || spans[b].height - spans[a].height);
+    let group: number[] = [];
+    let groupEnd = Number.NEGATIVE_INFINITY;
+    let laneEnds: number[] = [];
+    const closeGroup = () => {
+        for (const index of group) {
+            lanes[index].lanes = laneEnds.length;
+        }
+        group = [];
+        laneEnds = [];
+    };
+    for (const index of order) {
+        const { top, height } = spans[index];
+        if (top >= groupEnd) {
+            closeGroup();
+            groupEnd = Number.NEGATIVE_INFINITY;
+        }
+        let lane = laneEnds.findIndex((end) => end <= top);
+        if (lane === -1) {
+            lane = laneEnds.length;
+            laneEnds.push(top + height);
+        } else {
+            laneEnds[lane] = top + height;
+        }
+        lanes[index].lane = lane;
+        group.push(index);
+        groupEnd = Math.max(groupEnd, top + height);
+    }
+    closeGroup();
+    return lanes;
+}
+
+/** The horizontal placement of a block in its column: the whole width less a 2px margin, or its lane's share of it. */
+export function laneStyle({ lane, lanes }: Lane): { left: string | number; width?: string; right?: number } {
+    return lanes === 1
+        ? { left: 2, right: 2 }
+        : { left: `calc(${(lane / lanes) * 100}% + 2px)`, width: `calc(${100 / lanes}% - 4px)` };
+}

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -156,7 +156,7 @@ export default function CalendarShell({
     // 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" && mailboxes.length === 0) {
-        return <MailboxProvisioning />;
+        return <MailboxProvisioning impersonating={impersonating} impersonationBaseUrl={impersonationBaseUrl} />;
     }
 
     let inner: ReactNode = null;

package/apps/shared/components/calendar/timePicker.ts

@@ -13,8 +13,11 @@ const MS_PER_MINUTE = 60_000;
  * event lasting an hour from there.
  */
 export function nextHalfHour(now: Date): Date {
-    const slot = 30 * MS_PER_MINUTE;
-    return new Date(Math.ceil(now.getTime() / slot) * slot);
+    // Rounded on the local clock: a zone at :30 or :45 from UTC (India, Nepal, Chatham) has its half hours mid-way between the epoch's.
+    const next = new Date(now);
+    const minutes = next.getMinutes() + (next.getSeconds() * 1000 + next.getMilliseconds()) / MS_PER_MINUTE;
+    next.setMinutes(Math.ceil(minutes / 30) * 30, 0, 0);
+    return next;
 }
 
 /** `HH:mm` (24 hour) as a 12 hour clock reading: "13:05" is "1:05 PM". */

package/apps/shared/components/contacts/ContactCard.tsx

@@ -3,9 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
-import { type Contact, type ContactAddressKind, contactPhotoUrl, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { type Contact, type ContactAddressKind, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
-import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
+import ContactPhotoAvatar from "../../../../lib/components/avatar/ContactPhotoAvatar.js";
+import ContactPhotoEditor from "./ContactPhotoEditor.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { HiOutlineEnvelope, HiOutlineUserPlus } from "react-icons/hi2";
@@ -17,6 +18,7 @@ import type { ParsedVCardContact } from "../../../../lib/contacts/vcard.js";
 import { type Folder, type Mailbox, listMailboxes } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { MAILBOX_LIST_LIMIT, MailConnectionContext } from "../../mail/useMailConnection.js";
+import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import { notify } from "../../notifications/store.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
@@ -187,6 +189,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
 
     const name = participantName(participant);
     const stored = changed ?? created ?? (contact.status === "ready" ? contact.data : undefined);
+    // A contact in a mailbox shared view-only cannot get a new picture here (the server would refuse it).
+    const canEditPhoto = useMailboxUpdateAccess(mailboxes.status === "ready" ? mailboxes.data.find((mailbox) => mailbox.uid === stored?.mailboxUid) : undefined);
     const external = mailboxes.status === "ready" && isExternalAddress(participant.address, ownDomains(mailboxes.data));
     // What is known when there is no contact: the name, the address and the message's vCard.
     const known = stored ?? contactInputFor(participant, card.status === "ready" ? card.data : undefined, { mailboxUid: "", folderUid: "" });
@@ -215,6 +219,9 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
         }
     }
 
+    // Not while a picture is being changed: that goes against the version the star would replace.
+    const [photoBusy, setPhotoBusy] = useState(false);
+
     async function handleToggleFavorite(current: Contact) {
         try {
             const next = await setContactFavorite(current, !current.favorite, client);
@@ -234,7 +241,11 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     return (
         <Modal open onClose={onClose} title={name}>
             <div className="flex items-center gap-4">
-                <ContactAvatar displayName={name} size={72} photoUrl={stored && contactPhotoUrl(stored)} email={participant.address} />
+                {stored && canEditPhoto ? (
+                    <ContactPhotoEditor contact={stored} displayName={name} size={72} email={participant.address} onChanged={setChanged} onBusyChange={setPhotoBusy} />
+                ) : (
+                    <ContactPhotoAvatar displayName={name} size={72} contact={stored} email={participant.address} />
+                )}
                 <div className="min-w-0 flex-1">
                     <p className="text-sm text-text-muted break-words">
                         {participant.address}
@@ -247,7 +258,7 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                         <p className="mt-1 text-sm break-words">{[known.jobTitle, known.company].filter(Boolean).join(", ")}</p>
                     )}
                 </div>
-                {stored && <FavoriteStarButton favorite={!!stored.favorite} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
+                {stored && <FavoriteStarButton favorite={!!stored.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
             </div>
             <div className="mt-4 flex flex-wrap items-center gap-2">
                 <Button type="button" variant="secondary" className={`${ACTION_CLASS} inline-flex items-center gap-1.5`} onClick={handleEmail}>

package/apps/shared/components/contacts/ContactDetailPane.tsx

@@ -3,14 +3,15 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { Contact, contactPhotoUrl, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { Contact, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
 import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import FavoriteStarButton from "./FavoriteStarButton.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
-import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
+import ContactPhotoAvatar from "../../../../lib/components/avatar/ContactPhotoAvatar.js";
+import ContactPhotoEditor from "./ContactPhotoEditor.js";
 import KeyChangeReview from "./KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
@@ -34,6 +35,8 @@ export interface ContactDetailPaneProps {
     contact: Contact;
     onEdit: () => void;
     onDelete: () => void;
+    /** Whether the reader may change this contact: `false` for one in a mailbox shared with them view-only, which gets no Edit or Delete. Default `true`. */
+    canWrite?: boolean;
     /** Present only on the mobile detail route — renders a "back to contacts" link above the header. Absent
      * on the desktop inline pane, which never navigates away (selecting a different contact just swaps
      * `contact` in place). */
@@ -43,8 +46,8 @@ export interface ContactDetailPaneProps {
     onKeysChanged?: () => void;
     /** Called with the contact after the star was toggled, so the caller shows the changed contact. */
     onChanged?: (contact: Contact) => void;
-    /** `false` when the reader is known not to be able to change this contact's keys (the actions are hidden); `undefined`
-     * when unknown (they're hidden after a 403). */
+    /** `false` when the reader is known not to be able to change this contact (its key actions and the photo badge are hidden); `undefined`
+     * when unknown (the key actions are hidden after a 403; a refused photo change is a pop-up). */
     canResolveKeys?: boolean;
 }
 
@@ -53,7 +56,7 @@ export interface ContactDetailPaneProps {
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps) {
+export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite = true, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps) {
     const client = useApiClient();
     // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
     const [keyNotice, setKeyNotice] = useState<{ contactUid: string; text: string } | null>(null);
@@ -61,6 +64,12 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
     const keyConflicts = contact.keyConflicts ?? [];
     const previousKeys = contact.previousKeys ?? [];
 
+    // Not while a picture is being changed: that goes against the version the star would replace.
+    const [photoBusy, setPhotoBusy] = useState(false);
+    // Delete asks first - it also drops the pinned signing keys this contact vouches with - and the question belongs to the contact it was asked about.
+    const [confirmingDeleteUid, setConfirmingDeleteUid] = useState<string | null>(null);
+    const confirmingDelete = confirmingDeleteUid === contact.uid;
+
     async function handleToggleFavorite() {
         try {
             const changed = await setContactFavorite(contact, !contact.favorite, client);
@@ -86,11 +95,23 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
             )}
             <div className="flex items-start justify-between gap-4">
                 <div className="flex items-center gap-3">
-                    <ContactAvatar displayName={contact.displayName} size={48} photoUrl={contactPhotoUrl(contact)} email={contact.emails[0]?.address} />
+                    {canResolveKeys === false ? (
+                        <ContactPhotoAvatar displayName={contact.displayName} size={48} contact={contact} email={contact.emails[0]?.address} />
+                    ) : (
+                        <ContactPhotoEditor
+                            contact={contact}
+                            displayName={contact.displayName}
+                            size={48}
+                            badgeSize="sm"
+                            email={contact.emails[0]?.address}
+                            onChanged={(changed) => onChanged?.(changed)}
+                            onBusyChange={setPhotoBusy}
+                        />
+                    )}
                     <div>
                         <h1 className="text-xl font-bold tracking-tight">
                             {contact.displayName}
-                            <FavoriteStarButton favorite={!!contact.favorite} onToggle={() => void handleToggleFavorite()} className="ml-1 align-middle" />
+                            <FavoriteStarButton favorite={!!contact.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite()} className="ml-1 align-middle" />
                         </h1>
                         {contact.jobTitle && contact.company && (
                             <p className="text-sm text-text-muted mt-0.5">
@@ -99,14 +120,32 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
                         )}
                     </div>
                 </div>
-                <div className="flex gap-2 shrink-0">
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={onEdit}>
-                        Edit
-                    </Button>
-                    <Button type="button" variant="secondary" className="!w-auto text-danger" onClick={onDelete}>
-                        Delete
-                    </Button>
-                </div>
+                {canWrite && (
+                    <div className="flex flex-wrap justify-end gap-2 shrink-0">
+                        {confirmingDelete ? (
+                            <>
+                                <span role="alert" className="self-center text-sm">
+                                    Delete this contact?
+                                </span>
+                                <Button type="button" variant="secondary" className="!w-auto text-danger" onClick={onDelete}>
+                                    Yes, delete
+                                </Button>
+                                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingDeleteUid(null)}>
+                                    Keep
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button type="button" variant="secondary" className="!w-auto" onClick={onEdit}>
+                                    Edit
+                                </Button>
+                                <Button type="button" variant="secondary" className="!w-auto text-danger" onClick={() => setConfirmingDeleteUid(contact.uid)}>
+                                    Delete
+                                </Button>
+                            </>
+                        )}
+                    </div>
+                )}
             </div>
 
             <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm">

package/apps/shared/components/contacts/ContactForm.tsx

@@ -11,9 +11,9 @@ import {
     ContactPatch,
     ContactPhone,
     ContactPostalAddress,
-    contactPhotoUrl,
     createContact,
     deleteContactPhoto,
+    getContact,
     updateContact,
     uploadContactPhoto,
 } from "../../../../lib/contacts/contactsApi.js";
@@ -24,6 +24,7 @@ import FormField from "../../../../lib/components/forms/FormField.js";
 import ContactPhotoField from "./ContactPhotoField.js";
 import FavoriteStarButton from "./FavoriteStarButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { useContactPhotoSrc } from "../../../../lib/contacts/useContactPhotoSrc.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 
@@ -53,6 +54,7 @@ const ADDRESS_KINDS: ContactAddressKind[] = ["home", "work", "other"];
  */
 export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }: ContactFormProps) {
     const client = useApiClient();
+    const currentPhotoUrl = useContactPhotoSrc(contact, client);
     const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
     const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
     const [givenName, setGivenName] = useState(contact?.givenName ?? "");
@@ -70,8 +72,13 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     // A picture chosen (or the current one dropped) is applied once the contact itself is saved.
     const [pickedPhoto, setPickedPhoto] = useState<File | null>(null);
     const [removePhoto, setRemovePhoto] = useState(false);
+    // A chosen picture is being made small enough (see `ContactPhotoField`): the contact is not saved before it is ready.
+    const [preparingPhoto, setPreparingPhoto] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    // The contact as stored, once it has been saved and only the picture is left to do (that is a second request, which can fail on its own):
+    // a retry must not create the contact again or send the version it started from. `key` is the form's content that was saved.
+    const [stored, setStored] = useState<{ contact: Contact; key: string } | null>(null);
 
     function updateEmail(index: number, patch: Partial<ContactEmail>) {
         setEmails((prev) => prev.map((e, i) => (i === index ? { ...e, ...patch } : e)));
@@ -109,7 +116,8 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 .filter(Boolean);
             // An update merges only the fields in its body, so a field the user cleared is sent as an
             // explicit `null` (an omitted/undefined one would keep its stored value); a create just omits it.
-            const cleared = contact ? null : undefined;
+            const existing = stored?.contact ?? contact;
+            const cleared = existing ? null : undefined;
             const input = {
                 displayName: displayName.trim(),
                 givenName: givenName.trim() || cleared,
@@ -119,16 +127,21 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 notes: notes.trim() || cleared,
                 favorite,
                 categories,
-                emails,
-                phones,
+                // A row added with "+ Add" and left empty is not sent: the server refuses a contact with a blank address or number.
+                emails: emails.filter((email) => email.address.trim()).map((email) => ({ ...email, address: email.address.trim() })),
+                phones: phones.filter((phone) => phone.phoneNumber.trim()).map((phone) => ({ ...phone, phoneNumber: phone.phoneNumber.trim() })),
                 addresses,
             };
+            const key = JSON.stringify([targetMailboxUid, input]);
             let saved: Contact;
-            if (contact) {
+            if (stored && stored.key === key) {
+                // Stored exactly as it is now: only the picture is left.
+                saved = stored.contact;
+            } else if (existing) {
                 saved = await updateContact(
                     {
-                        uid: contact.uid,
-                        version: contact.version,
+                        uid: existing.uid,
+                        version: existing.version,
                         ...(input as Omit<ContactPatch, "uid" | "version">),
                     },
                     client,
@@ -151,14 +164,32 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     client,
                 );
             }
-            if (pickedPhoto) {
-                saved = await uploadContactPhoto(saved.uid, saved.version, pickedPhoto);
-            } else if (removePhoto && saved.photoBlobKey) {
-                saved = await deleteContactPhoto(saved.uid, saved.version, client);
+            setStored({ contact: saved, key });
+            const changePhoto = async (current: Contact) => {
+                if (pickedPhoto) {
+                    return uploadContactPhoto(current.uid, current.version, pickedPhoto, client);
+                }
+                return removePhoto && current.photoBlobKey ? deleteContactPhoto(current.uid, current.version, client) : current;
+            };
+            try {
+                try {
+                    saved = await changePhoto(saved);
+                } catch (err) {
+                    if (!(err instanceof ApiRequestError && err.status === 409)) {
+                        throw err;
+                    }
+                    // A version that is stale means an earlier try had been applied after all (its answer never arrived): read the contact as it is and go again, once.
+                    const current = await getContact(saved.uid, client);
+                    setStored({ contact: current, key });
+                    saved = await changePhoto(current);
+                }
+            } catch (err) {
+                // The contact is saved: stay open so the picture can be tried again, or let go of.
+                const reason = err instanceof ApiRequestError ? err.message.replace(/\.$/, "") : "the server could not be reached";
+                setError(`Saved, but the picture could not be ${pickedPhoto ? "uploaded" : "removed"}: ${reason}.`);
+                return;
             }
-            // A message opened later in this page load must see the changed contact's signing keys.
-            clearPinnedSignerCache();
-            onSaved(saved);
+            finish(saved);
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not save this contact.");
         } finally {
@@ -166,6 +197,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
         }
     }
 
+    function finish(saved: Contact) {
+        // A message opened later in this page load must see the changed contact's signing keys.
+        clearPinnedSignerCache();
+        onSaved(saved);
+    }
+
     return (
         // The form fills the pane it is in: the fields scroll in their own area and Save / Cancel stay in view under them (`rr-solid`: opaque over a
         // background image). Outside a bounded pane (the phone's page, which scrolls as a whole) the footer sticks above the bottom tab bar instead.
@@ -209,7 +246,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     <ContactPhotoField
                         displayName={displayName}
                         email={emails[0]?.address}
-                        currentUrl={contact && contactPhotoUrl(contact)}
+                        currentUrl={currentPhotoUrl}
                         picked={pickedPhoto}
                         removed={removePhoto}
                         onPick={(file) => {
@@ -222,6 +259,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                             setRemovePhoto(true);
                         }}
                         onReject={setError}
+                        onBusyChange={setPreparingPhoto}
                     />
                 </div>
                 <FavoriteStarButton favorite={favorite} onToggle={() => setFavorite((value) => !value)} />
@@ -412,10 +450,16 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             </div>
             </div>
             <div className="rr-solid sticky bottom-14 z-10 flex shrink-0 gap-3 border-t border-border bg-surface px-6 py-3 md:bottom-0">
-                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                <Button type="submit" loading={saving} disabled={saving || preparingPhoto} className="!w-auto">
                     Save
                 </Button>
-                <Button type="button" variant="secondary" className="!w-auto" onClick={onCancel}>
+                {stored && (
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={saving} onClick={() => finish(stored.contact)}>
+                        Continue without the picture
+                    </Button>
+                )}
+                {/* A contact that is saved already is no longer cancelled: whoever is showing the form needs to hear of it. */}
+                <Button type="button" variant="secondary" className="!w-auto" onClick={stored ? () => finish(stored.contact) : onCancel}>
                     Cancel
                 </Button>
             </div>

package/apps/shared/components/contacts/ContactPhotoEditor.tsx

@@ -0,0 +1,88 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef, useState } from "react";
+import ContactPhotoAvatar from "../../../../lib/components/avatar/ContactPhotoAvatar.js";
+import ImageEditBadge from "../../../../lib/components/forms/ImageEditBadge.js";
+import { type Contact, deleteContactPhoto, uploadContactPhoto } from "../../../../lib/contacts/contactsApi.js";
+import { ContactPhotoError, prepareContactPhoto } from "../../../../lib/contacts/preparePhoto.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { notify } from "../../notifications/store.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+
+export interface ContactPhotoEditorProps {
+    /** The stored contact whose picture is changed. */
+    contact: Contact;
+    displayName: string;
+    size: number;
+    /** The contact's address, for the Gravatar shown while they have no picture of their own. */
+    email?: string;
+    /** `"sm"` for an avatar too small for the default badge. */
+    badgeSize?: "sm" | "md";
+    /** Called with the contact as stored after its picture was set or removed. */
+    onChanged: (contact: Contact) => void;
+    /** Told whether a change is under way, for what must not edit the contact meanwhile (its star: a second change would send the version this one is about to replace). */
+    onBusyChange?: (busy: boolean) => void;
+}
+
+const FAILURE_TITLE = "Couldn't change this contact's photo";
+
+/**
+ * A stored contact's avatar with the camera badge of `ImageEditBadge` at its lower right: unlike the edit form (`ContactPhotoField`), which keeps a chosen picture until the
+ * contact is saved, a picture chosen or taken here is made ready and saved at once, and removing it is too. A refusal (a view-only share, a stale version) is a pop-up.
+ */
+export default function ContactPhotoEditor({ contact, displayName, size, email, badgeSize, onChanged, onBusyChange }: ContactPhotoEditorProps) {
+    const client = useApiClient();
+    const [busy, setBusy] = useState(false);
+    const root = useRef<HTMLDivElement>(null);
+    // Preparing a picture takes seconds; what is uploaded against is the contact as it is by then (it may have been read again), not as it was when the picture was chosen.
+    const latest = useRef(contact);
+    latest.current = contact;
+    const wasBusy = useRef(false);
+
+    useEffect(() => {
+        onBusyChange?.(busy);
+        // The badge is disabled meanwhile, which drops its focus: it gets it back, unless the user has gone elsewhere.
+        if (wasBusy.current && !busy && (!document.activeElement || document.activeElement === document.body)) {
+            root.current?.querySelector<HTMLElement>('button[aria-haspopup="menu"]')?.focus();
+        }
+        wasBusy.current = busy;
+    }, [busy]);
+
+    async function change(work: () => Promise<Contact>) {
+        setBusy(true);
+        try {
+            onChanged(await work());
+        } catch (err) {
+            if (err instanceof ContactPhotoError) {
+                notify({ kind: "error", title: FAILURE_TITLE, message: err.message });
+            } else {
+                notifyApiError(err, FAILURE_TITLE);
+            }
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <div ref={root} className="relative inline-block shrink-0">
+            <ContactPhotoAvatar displayName={displayName} size={size} contact={contact} email={email} />
+            <ImageEditBadge
+                position="bottom-right"
+                size={badgeSize}
+                label="Change contact photo"
+                fileInputLabel="Contact photo file"
+                hasImage={!!contact.photoBlobKey}
+                busy={busy}
+                onFile={(file) =>
+                    void change(async () => {
+                        const prepared = await prepareContactPhoto(file);
+                        return uploadContactPhoto(latest.current.uid, latest.current.version, prepared, client);
+                    })
+                }
+                onRemove={() => void change(() => deleteContactPhoto(latest.current.uid, latest.current.version, client))}
+            />
+        </div>
+    );
+}