@rapidmx/web-client 0.30.0 → 0.31.0

package/dist/apps/shared/components/calendar/gridLayout.js

@@ -0,0 +1,83 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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) {
+    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, index) {
+    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, endMs, dayStart, wholeDay = false) {
+    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),
+    };
+}
+/**
+ * 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) {
+    const lanes = 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 = [];
+    let groupEnd = Number.NEGATIVE_INFINITY;
+    let laneEnds = [];
+    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 }) {
+    return lanes === 1
+        ? { left: 2, right: 2 }
+        : { left: `calc(${(lane / lanes) * 100}% + 2px)`, width: `calc(${100 / lanes}% - 4px)` };
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -92,7 +92,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
     // 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 _jsx(MailboxProvisioning, {});
+        return _jsx(MailboxProvisioning, { impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl });
     }
     let inner = null;
     if (userUid && status === "checking") {

package/dist/apps/shared/components/calendar/timePicker.js

@@ -11,8 +11,11 @@ const MS_PER_MINUTE = 60000;
  * event lasting an hour from there.
  */
 export function nextHalfHour(now) {
-    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". */
 export function formatTimeOfDay(time) {

package/dist/apps/shared/components/contacts/ContactCard.js

@@ -4,9 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useContext, useEffect, useRef, useState } from "react";
-import { contactPhotoUrl, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { 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 { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import { 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";
@@ -102,6 +104,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     const card = useSection(() => loadParticipantCard(participant, context, client));
     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: "" });
@@ -129,6 +133,8 @@ 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) {
         try {
             const next = await setContactFavorite(current, !current.favorite, client);
@@ -144,5 +150,5 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
         openCompose({ to: formatMailAddress(participant) });
         onClose();
     }
-    return (_jsxs(Modal, { open: true, onClose: onClose, title: name, children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ContactAvatar, { displayName: name, size: 72, photoUrl: stored && contactPhotoUrl(stored), email: participant.address }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm text-text-muted break-words", children: [participant.address, _jsx(CopyIconButton, { value: participant.address, label: "Copy address", className: "ml-1" })] }), external && (_jsx("span", { className: "inline-block mt-1 text-xs font-semibold py-0.5 px-2 rounded-pill bg-warning/15 text-text", children: "External" })), (known.jobTitle || known.company) && (_jsx("p", { className: "mt-1 text-sm break-words", children: [known.jobTitle, known.company].filter(Boolean).join(", ") }))] }), stored && _jsx(FavoriteStarButton, { favorite: !!stored.favorite, onToggle: () => void handleToggleFavorite(stored), className: "shrink-0 self-start" })] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, onClick: handleEmail, children: [_jsx(HiOutlineEnvelope, { "aria-hidden": "true", className: "size-4" }), "Email"] }), stored ? (_jsx("a", { href: `${APP_HREFS.contacts}/${encodeURIComponent(stored.uid)}`, onClick: onClose, className: "inline-flex items-center text-xs font-semibold py-1 px-3 rounded-sm border border-border hover:border-accent hover:text-accent-dark focus-visible:outline-2 focus-visible:outline-primary", children: "Open contact" })) : (_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, disabled: !createWith || creating, loading: creating, onClick: () => void handleCreate(createWith), children: [_jsx(HiOutlineUserPlus, { "aria-hidden": "true", className: "size-4" }), "Add to contacts"] }))] }), _jsxs("section", { className: "mt-5", children: [_jsx("h3", { className: "text-sm font-bold mb-2", children: "Contact" }), !stored && contact.status === "loading" && _jsx(Skeleton, { width: "w-1/2", className: "mb-2" }), !stored && contact.status === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger mb-2", children: "Couldn\u2019t check your address book." })), !stored && contact.status === "ready" && _jsx("p", { className: "text-sm text-text-muted mb-2", children: "Not in your address book." }), _jsxs("dl", { className: "flex flex-col gap-1.5", children: [known.emails.map((email) => (_jsxs(Detail, { label: ["Email", kindLabel(email.type)].filter(Boolean).join(" "), children: [email.address, _jsx(CopyIconButton, { value: email.address, label: "Copy email address", className: "ml-1" })] }, `e:${email.address}`))), known.phones.map((phone) => (_jsx(Detail, { label: ["Phone", kindLabel(phone.type)].filter(Boolean).join(" "), children: phone.phoneNumber }, `p:${phone.phoneNumber}`))), known.company && _jsx(Detail, { label: "Company", children: known.company }), known.jobTitle && _jsx(Detail, { label: "Job title", children: known.jobTitle }), known.addresses.map((address, index) => (_jsx(Detail, { label: ["Address", kindLabel(address.type)].filter(Boolean).join(" "), children: [address.street, [address.postalCode, address.city].filter(Boolean).join(" "), address.state, address.country].filter(Boolean).join("\n") }, `a:${index}`))), known.notes && _jsx(Detail, { label: "Notes", children: known.notes })] })] }), _jsx(CardSection, { title: "Recent messages", section: messages, empty: "No recent messages", failure: "Couldn't load recent messages.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((message) => (_jsx("li", { children: _jsxs("a", { href: `/messages/${encodeURIComponent(message.uid)}`, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsxs("span", { className: "flex items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "font-medium truncate", children: message.subject || "(No subject)" }), _jsx("time", { dateTime: message.receivedDate, className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsx("span", { className: "block text-xs text-text-muted truncate", children: message.bodyPreview })] }) }, message.uid))) })) }), _jsx(CardSection, { title: "Upcoming events", section: events, empty: "No upcoming events", failure: "Couldn't load upcoming events.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((event) => (_jsx("li", { children: _jsxs("a", { href: APP_HREFS.calendar, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsx("span", { className: "block text-sm font-medium truncate", children: event.title }), _jsx("span", { className: "block text-xs text-text-muted", children: formatInviteWhen(event) })] }) }, event.occurrenceKey))) })) })] }));
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: name, children: [_jsxs("div", { className: "flex items-center gap-4", children: [stored && canEditPhoto ? (_jsx(ContactPhotoEditor, { contact: stored, displayName: name, size: 72, email: participant.address, onChanged: setChanged, onBusyChange: setPhotoBusy })) : (_jsx(ContactPhotoAvatar, { displayName: name, size: 72, contact: stored, email: participant.address })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm text-text-muted break-words", children: [participant.address, _jsx(CopyIconButton, { value: participant.address, label: "Copy address", className: "ml-1" })] }), external && (_jsx("span", { className: "inline-block mt-1 text-xs font-semibold py-0.5 px-2 rounded-pill bg-warning/15 text-text", children: "External" })), (known.jobTitle || known.company) && (_jsx("p", { className: "mt-1 text-sm break-words", children: [known.jobTitle, known.company].filter(Boolean).join(", ") }))] }), stored && _jsx(FavoriteStarButton, { favorite: !!stored.favorite, disabled: photoBusy, onToggle: () => void handleToggleFavorite(stored), className: "shrink-0 self-start" })] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, onClick: handleEmail, children: [_jsx(HiOutlineEnvelope, { "aria-hidden": "true", className: "size-4" }), "Email"] }), stored ? (_jsx("a", { href: `${APP_HREFS.contacts}/${encodeURIComponent(stored.uid)}`, onClick: onClose, className: "inline-flex items-center text-xs font-semibold py-1 px-3 rounded-sm border border-border hover:border-accent hover:text-accent-dark focus-visible:outline-2 focus-visible:outline-primary", children: "Open contact" })) : (_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, disabled: !createWith || creating, loading: creating, onClick: () => void handleCreate(createWith), children: [_jsx(HiOutlineUserPlus, { "aria-hidden": "true", className: "size-4" }), "Add to contacts"] }))] }), _jsxs("section", { className: "mt-5", children: [_jsx("h3", { className: "text-sm font-bold mb-2", children: "Contact" }), !stored && contact.status === "loading" && _jsx(Skeleton, { width: "w-1/2", className: "mb-2" }), !stored && contact.status === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger mb-2", children: "Couldn\u2019t check your address book." })), !stored && contact.status === "ready" && _jsx("p", { className: "text-sm text-text-muted mb-2", children: "Not in your address book." }), _jsxs("dl", { className: "flex flex-col gap-1.5", children: [known.emails.map((email) => (_jsxs(Detail, { label: ["Email", kindLabel(email.type)].filter(Boolean).join(" "), children: [email.address, _jsx(CopyIconButton, { value: email.address, label: "Copy email address", className: "ml-1" })] }, `e:${email.address}`))), known.phones.map((phone) => (_jsx(Detail, { label: ["Phone", kindLabel(phone.type)].filter(Boolean).join(" "), children: phone.phoneNumber }, `p:${phone.phoneNumber}`))), known.company && _jsx(Detail, { label: "Company", children: known.company }), known.jobTitle && _jsx(Detail, { label: "Job title", children: known.jobTitle }), known.addresses.map((address, index) => (_jsx(Detail, { label: ["Address", kindLabel(address.type)].filter(Boolean).join(" "), children: [address.street, [address.postalCode, address.city].filter(Boolean).join(" "), address.state, address.country].filter(Boolean).join("\n") }, `a:${index}`))), known.notes && _jsx(Detail, { label: "Notes", children: known.notes })] })] }), _jsx(CardSection, { title: "Recent messages", section: messages, empty: "No recent messages", failure: "Couldn't load recent messages.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((message) => (_jsx("li", { children: _jsxs("a", { href: `/messages/${encodeURIComponent(message.uid)}`, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsxs("span", { className: "flex items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "font-medium truncate", children: message.subject || "(No subject)" }), _jsx("time", { dateTime: message.receivedDate, className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsx("span", { className: "block text-xs text-text-muted truncate", children: message.bodyPreview })] }) }, message.uid))) })) }), _jsx(CardSection, { title: "Upcoming events", section: events, empty: "No upcoming events", failure: "Couldn't load upcoming events.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((event) => (_jsx("li", { children: _jsxs("a", { href: APP_HREFS.calendar, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsx("span", { className: "block text-sm font-medium truncate", children: event.title }), _jsx("span", { className: "block text-xs text-text-muted", children: formatInviteWhen(event) })] }) }, event.occurrenceKey))) })) })] }));
 }

package/dist/apps/shared/components/contacts/ContactDetailPane.d.ts

@@ -4,6 +4,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). */
@@ -13,8 +15,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;
 }
 /**
@@ -22,4 +24,4 @@ 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): React.JSX.Element;
+export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactDetailPane.js

@@ -1,16 +1,17 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import { contactPhotoUrl, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { 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 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";
@@ -32,13 +33,18 @@ function RevocationBadge({ label }) {
  * 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 }) {
+export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite = true, backHref, onKeysChanged, onChanged, canResolveKeys }) {
     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(null);
     const notice = keyNotice?.contactUid === contact.uid ? keyNotice.text : null;
     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(null);
+    const confirmingDelete = confirmingDeleteUid === contact.uid;
     async function handleToggleFavorite() {
         try {
             const changed = await setContactFavorite(contact, !contact.favorite, client);
@@ -54,7 +60,7 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
         clearPinnedSignerCache();
         onKeysChanged?.();
     }
-    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48, photoUrl: contactPhotoUrl(contact), email: contact.emails[0]?.address }), _jsxs("div", { children: [_jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [contact.displayName, _jsx(FavoriteStarButton, { favorite: !!contact.favorite, onToggle: () => void handleToggleFavorite(), className: "ml-1 align-middle" })] }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, _jsx(CopyIconButton, { value: e.address, label: "Copy email address", className: "mx-0.5" }), " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
+    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [canResolveKeys === false ? (_jsx(ContactPhotoAvatar, { displayName: contact.displayName, size: 48, contact: contact, email: contact.emails[0]?.address })) : (_jsx(ContactPhotoEditor, { contact: contact, displayName: contact.displayName, size: 48, badgeSize: "sm", email: contact.emails[0]?.address, onChanged: (changed) => onChanged?.(changed), onBusyChange: setPhotoBusy })), _jsxs("div", { children: [_jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [contact.displayName, _jsx(FavoriteStarButton, { favorite: !!contact.favorite, disabled: photoBusy, onToggle: () => void handleToggleFavorite(), className: "ml-1 align-middle" })] }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), canWrite && (_jsx("div", { className: "flex flex-wrap justify-end gap-2 shrink-0", children: confirmingDelete ? (_jsxs(_Fragment, { children: [_jsx("span", { role: "alert", className: "self-center text-sm", children: "Delete this contact?" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Yes, delete" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDeleteUid(null), children: "Keep" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: () => setConfirmingDeleteUid(contact.uid), children: "Delete" })] })) }))] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, _jsx(CopyIconButton, { value: e.address, label: "Copy email address", className: "mx-0.5" }), " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
                         contact.encryptPreference ||
                         keyConflicts.length > 0 ||
                         previousKeys.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), notice && (_jsx("p", { role: "status", className: "mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text", children: notice })), keyConflicts.map((conflict) => {

package/dist/apps/shared/components/contacts/ContactForm.js

@@ -5,13 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { contactPhotoUrl, createContact, deleteContactPhoto, updateContact, uploadContactPhoto, } from "../../../../lib/contacts/contactsApi.js";
+import { createContact, deleteContactPhoto, getContact, updateContact, uploadContactPhoto, } from "../../../../lib/contacts/contactsApi.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 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";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -24,6 +25,7 @@ const ADDRESS_KINDS = ["home", "work", "other"];
  */
 export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }) {
     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 ?? "");
@@ -41,8 +43,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(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(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(null);
     function updateEmail(index, patch) {
         setEmails((prev) => prev.map((e, i) => (i === index ? { ...e, ...patch } : e)));
     }
@@ -76,7 +83,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,
@@ -86,15 +94,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;
-            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,
                 }, client);
             }
@@ -112,15 +126,34 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     ...input,
                 }, client);
             }
-            if (pickedPhoto) {
-                saved = await uploadContactPhoto(saved.uid, saved.version, pickedPhoto);
+            setStored({ contact: saved, key });
+            const changePhoto = async (current) => {
+                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);
+                }
             }
-            else if (removePhoto && saved.photoBlobKey) {
-                saved = await deleteContactPhoto(saved.uid, saved.version, client);
+            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.");
@@ -129,12 +162,17 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             setSaving(false);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "@container flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsxs("div", { className: "flex max-w-xl flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(ContactPhotoField, { displayName: displayName, email: emails[0]?.address, currentUrl: contact && contactPhotoUrl(contact), picked: pickedPhoto, removed: removePhoto, onPick: (file) => {
+    function finish(saved) {
+        // A message opened later in this page load must see the changed contact's signing keys.
+        clearPinnedSignerCache();
+        onSaved(saved);
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "@container flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsxs("div", { className: "flex max-w-xl flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(ContactPhotoField, { displayName: displayName, email: emails[0]?.address, currentUrl: currentPhotoUrl, picked: pickedPhoto, removed: removePhoto, onPick: (file) => {
                                             setPickedPhoto(file);
                                             setRemovePhoto(false);
                                             setError(null);
                                         }, onRemove: () => {
                                             setPickedPhoto(null);
                                             setRemovePhoto(true);
-                                        }, onReject: setError }) }), _jsx(FavoriteStarButton, { favorite: favorite, onToggle: () => setFavorite((value) => !value) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) })] }) }), _jsxs("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", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
+                                        }, onReject: setError, onBusyChange: setPreparingPhoto }) }), _jsx(FavoriteStarButton, { favorite: favorite, onToggle: () => setFavorite((value) => !value) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) })] }) }), _jsxs("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", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving || preparingPhoto, className: "!w-auto", children: "Save" }), stored && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: saving, onClick: () => finish(stored.contact), children: "Continue without the picture" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: stored ? () => finish(stored.contact) : onCancel, children: "Cancel" })] })] }));
 }

package/dist/apps/shared/components/contacts/ContactPhotoEditor.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { type Contact } from "../../../../lib/contacts/contactsApi.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;
+}
+/**
+ * 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): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactPhotoEditor.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import ContactPhotoAvatar from "../../../../lib/components/avatar/ContactPhotoAvatar.js";
+import ImageEditBadge from "../../../../lib/components/forms/ImageEditBadge.js";
+import { 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";
+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 }) {
+    const client = useApiClient();
+    const [busy, setBusy] = useState(false);
+    const root = useRef(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('button[aria-haspopup="menu"]')?.focus();
+        }
+        wasBusy.current = busy;
+    }, [busy]);
+    async function change(work) {
+        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 (_jsxs("div", { ref: root, className: "relative inline-block shrink-0", children: [_jsx(ContactPhotoAvatar, { displayName: displayName, size: size, contact: contact, email: email }), _jsx(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)) })] }));
+}

package/dist/apps/shared/components/contacts/ContactPhotoField.d.ts

@@ -3,7 +3,7 @@ export interface ContactPhotoFieldProps {
     displayName: string;
     /** The contact's first address, for the Gravatar shown while they have no picture of their own. */
     email?: string;
-    /** The picture the contact has now (`contactPhotoUrl()`), if any. */
+    /** The picture the contact has now (`useContactPhotoSrc()`), if any. */
     currentUrl?: string;
     /** The picture chosen to replace it, not uploaded until the contact is saved; `null` for none. */
     picked: File | null;
@@ -13,9 +13,12 @@ export interface ContactPhotoFieldProps {
     onRemove: () => void;
     /** Called with the reason a chosen file was turned down. */
     onReject: (message: string) => void;
+    /** Called with `true` while a chosen file is being made ready, so the form is not saved before it is, and with `false` after. */
+    onBusyChange: (busy: boolean) => void;
 }
 /**
- * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with "Change photo" and, when
- * there is a picture of their own, "Remove photo". A file is checked here (type and size) and only uploaded when the form is saved.
+ * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with a camera badge at its lower right that opens a
+ * menu (`ImageEditBadge`) - "Upload file", "Take photo" and, when there is a picture of their own, "Remove photo". Any picture is taken (a phone's camera photo of several megabytes,
+ * in any orientation, included): it is made small enough here by `prepareContactPhoto()` and only uploaded when the form is saved.
  */
-export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject }: ContactPhotoFieldProps): React.JSX.Element;
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject, onBusyChange }: ContactPhotoFieldProps): React.JSX.Element;