@rapidmx/web-client 0.26.0 → 0.28.0

package/dist/apps/www/contacts/index.js

@@ -7,7 +7,7 @@ import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useNavigate } from "../../shared/navigation/index.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ApiRequestError } from "../../../lib/util/api.js";
-import { createContact, deleteContact, listContacts, listDeletedContacts, setContactFavorite, updateContact, } from "../../../lib/contacts/contactsApi.js";
+import { createContact, deleteContact, listContacts, listDeletedContacts, setContactFavorite, contactPhotoUrl, updateContact, } from "../../../lib/contacts/contactsApi.js";
 import { contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
@@ -346,7 +346,7 @@ function ContactsContent({ userUid }) {
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted }), _jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex", children: [_jsxs("div", { className: [
                             "w-full md:w-[clamp(16rem,32vw,26rem)] min-w-0 md:shrink-0 md:border-r border-border md:flex flex-col min-h-0",
                             mode === "new" ? "hidden md:flex" : "flex",
-                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
+                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28, photoUrl: contactPhotoUrl(contact), email: contact.emails[0]?.address }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), onChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
 }
 export default ContactsPage;
 /** The tab's title: `Brand: Contacts` (see `pageTitle()`). */

package/dist/apps/www/index.js

@@ -804,12 +804,6 @@ function InboxContent({ userUid }) {
             setSearchAllMailboxes(false);
         }
     }, [searchQuery]);
-    // Rows can be ticked in the results of a search over every mailbox, but not in the listing they came out of: clearing the search leaves select mode.
-    useEffect(() => {
-        if (aggregateFolderType && !isSearching) {
-            setSelectMode(false);
-        }
-    }, [aggregateFolderType, isSearching]);
     // Which listing this is, for the short-lived snapshot of each folder that makes going back to one instant (see
     // `listSnapshots.ts`). A search, an aggregate view and a folder that hasn't resolved have no snapshot.
     const listKey = listSnapshotKey({
@@ -1582,7 +1576,7 @@ function InboxContent({ userUid }) {
      * that is in the folder being listed. A conversation spans folders (an Inbox message and the Sent
      * Items copy of its reply), and the list only ever showed this folder's half of it, so a bulk action
      * from here must not reach into the other folders' copies either. */
-    const selectedConversationMessages = [...selectedConversationIds].flatMap((id) => (conversationMessagesById[id] ?? []).filter((m) => !folderUid || m.folderUid === folderUid));
+    const selectedConversationMessages = [...selectedConversationIds].flatMap((id) => (conversationMessagesById[id] ?? []).filter((m) => (aggregateFolderType ? folderTypeOf(m.folderUid) === aggregateFolderType : !folderUid || m.folderUid === folderUid)));
     const selectedMessages = asConversations
         ? selectedConversationMessages
         : messages.filter((m) => selectedUids.has(m.uid));
@@ -1622,22 +1616,24 @@ function InboxContent({ userUid }) {
     /** Loads (once) the messages behind each of `ids`, so a ticked conversation resolves to the messages
      * every bulk action below acts on. If any of them fails to load, none of that batch stays ticked and
      * a pop-up says why - better than acting on the part of a selection that happened to arrive. */
-    async function resolveConversations(ids) {
-        const missing = ids.filter((id) => !conversationMessagesById[id]);
+    async function resolveConversations(rows) {
+        const missing = rows.filter((row) => !conversationMessagesById[conversationKey(row)]);
         if (missing.length === 0) {
             return;
         }
         setResolvingSelection((n) => n + 1);
         try {
-            const loaded = await Promise.all(missing.map(async (id) => [id, await listConversationMessages(activeMailboxUid, id, {}, client)]));
+            const loaded = await Promise.all(
+            // A row of the "All mailboxes" view names its own mailbox; any other list is the open mailbox's.
+            missing.map(async (row) => [conversationKey(row), await listConversationMessages(row.mailboxUid ?? activeMailboxUid, row.conversationId, {}, client)]));
             setConversationMessagesById((prev) => ({ ...prev, ...Object.fromEntries(loaded) }));
         }
         catch (err) {
             notifyApiError(err, "Couldn't load the messages in one of those conversations");
             setSelectedConversationIds((prev) => {
                 const next = new Set(prev);
-                for (const id of missing) {
-                    next.delete(id);
+                for (const row of missing) {
+                    next.delete(conversationKey(row));
                 }
                 return next;
             });
@@ -1647,7 +1643,7 @@ function InboxContent({ userUid }) {
         }
     }
     function toggleConversationSelected(conversation) {
-        const id = conversation.conversationId;
+        const id = conversationKey(conversation);
         const ticking = !selectedConversationIds.has(id);
         setSelectedConversationIds((prev) => {
             const next = new Set(prev);
@@ -1660,13 +1656,12 @@ function InboxContent({ userUid }) {
             return next;
         });
         if (ticking) {
-            void resolveConversations([id]);
+            void resolveConversations([conversation]);
         }
     }
     function selectAllConversations() {
-        const ids = conversations.map(conversationKey);
-        setSelectedConversationIds(new Set(ids));
-        void resolveConversations(ids);
+        setSelectedConversationIds(new Set(conversations.map(conversationKey)));
+        void resolveConversations(conversations);
     }
     /**
      * Runs one bulk action over the current selection, then either patches the affected rows in place or
@@ -1951,7 +1946,7 @@ function InboxContent({ userUid }) {
     const inConversations = asConversations;
     /** The selection bar isn't offered in the aggregate listing (its rows belong to several mailboxes), and neither are these - but the results of a
      * search over them are, each hit acted on in its own mailbox (see `inEachMailbox()`). */
-    const keyboardActions = !aggregateFolderType || isSearching;
+    const keyboardActions = true;
     /** What the keyboard acts on exists: the ticked rows in select mode, else the message (or conversation) open in the reading pane. */
     const keyboardTargetExists = selectMode ? selectedMessages.length > 0 : threadPane ? openThread !== null : selected !== null;
     const rowCount = inConversations ? listedConversations.length : messages.length;
@@ -2132,13 +2127,31 @@ function InboxContent({ userUid }) {
         : undefined;
     // Delete is the permanent one for what is in Deleted Items: for the selection when there is one (search results can come from any folder),
     // else for the folder being viewed, so the button says so before anything is ticked.
-    const deletesPermanently = selectedMessages.length > 0 ? selectedMessages.every(inDeletedItems) : currentFolders.find((f) => f.uid === folderUid)?.type === "deleted_items";
-    // Empty folder is offered at the top of the list of a mailbox's own Deleted Items or Junk Email - not for search results, nor for the "All
-    // mailboxes" views, which have no one folder to empty.
-    const emptiableFolder = !isSearching && !aggregateFolderType ? currentFolders.find((f) => f.uid === folderUid && EMPTIABLE_FOLDER_TYPES.includes(f.type)) : undefined;
+    const deletesPermanently = selectedMessages.length > 0
+        ? selectedMessages.every(inDeletedItems)
+        : aggregateFolderType
+            ? aggregateFolderType === "deleted_items"
+            : currentFolders.find((f) => f.uid === folderUid)?.type === "deleted_items";
+    // Empty folder is offered at the top of the list of a mailbox's own Deleted Items or Junk Email, and of the "All mailboxes" view of either, which
+    // empties each mailbox's own (a share the reader may not delete in refuses, and says so) - not for search results.
+    const emptiableFolders = isSearching
+        ? []
+        : aggregateFolderType
+            ? EMPTIABLE_FOLDER_TYPES.includes(aggregateFolderType)
+                ? mailboxFolders.flatMap((entry) => entry.folders.filter((f) => f.type === aggregateFolderType))
+                : []
+            : currentFolders.filter((f) => f.uid === folderUid && EMPTIABLE_FOLDER_TYPES.includes(f.type));
+    const emptiableFolder = emptiableFolders.length === 0
+        ? undefined
+        : {
+            uid: emptiableFolders[0].uid,
+            name: aggregateFolderType ? (emptiableFolders[0].type === "junk" ? "Junk Email" : "Deleted Items") : emptiableFolders[0].name,
+            uids: aggregateFolderType ? emptiableFolders.map((f) => f.uid) : undefined,
+        };
     // How many it holds as the sidebar's counts have it (kept right as messages leave), unless that says none while the list shows some.
-    const emptiableCount = emptiableFolder && folderCountOf(emptiableFolder).total > 0 ? folderCountOf(emptiableFolder).total : undefined;
-    const emptyDisabledReason = !mailboxWritable
+    const emptiableTotal = emptiableFolders.reduce((sum, f) => sum + folderCountOf(f).total, 0);
+    const emptiableCount = emptiableFolder && emptiableTotal > 0 ? emptiableTotal : undefined;
+    const emptyDisabledReason = !(aggregateFolderType ? emptiableFolders.length > 0 : mailboxWritable)
         ? "This mailbox is shared with you view-only"
         : listedRowCount === 0 && emptiableCount === undefined
             ? "This folder is already empty"
@@ -2174,11 +2187,7 @@ function InboxContent({ userUid }) {
                                 ? "This view merges the newest mail from every mailbox and is always listed by date."
                                 : asConversations
                                     ? CONVERSATION_SORT_NOTE
-                                    : undefined, selectDisabled: (!!aggregateFolderType && !isSearching) || loading || listedRowCount === 0, selectDisabledReason: aggregateFolderType && !isSearching
-                            ? "Open a mailbox's own folder to select messages"
-                            : loading
-                                ? "Wait for this folder to finish loading"
-                                : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), emptiableFolder && !selectMode && (_jsx(EmptyFolderBar, { folderName: emptiableFolder.name, count: emptiableCount, disabled: !!emptyDisabledReason || permanent.busy || bulkBusy, disabledReason: emptyDisabledReason, onEmpty: () => void emptyListedFolder(emptiableFolder, emptiableCount) })), permanent.dialog, offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
+                                    : undefined, selectDisabled: loading || listedRowCount === 0, selectDisabledReason: loading ? "Wait for this folder to finish loading" : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), emptiableFolder && !selectMode && (_jsx(EmptyFolderBar, { folderName: emptiableFolder.name, count: emptiableCount, disabled: !!emptyDisabledReason || permanent.busy || bulkBusy, disabledReason: emptyDisabledReason, onEmpty: () => void emptyListedFolder(emptiableFolder, emptiableCount) })), permanent.dialog, offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
                                 "flex-1 py-1.5 font-semibold",
                                 preferences.filter === value
                                     ? "text-primary-dark border-b-2 border-primary-dark"

package/dist/lib/components/avatar/ContactAvatar.d.ts

@@ -2,7 +2,13 @@ import React from "react";
 export interface ContactAvatarProps {
     displayName: string;
     size?: number;
+    /** The contact's own picture (see `contactPhotoUrl()`); shown in preference to anything else. */
+    photoUrl?: string;
+    /** The contact's address: without a picture of their own, its Gravatar is shown when there is one (and the reader hasn't turned that off). */
+    email?: string;
 }
-/** A small circular initials avatar for a contact, matching Outlook People's list-row avatars — deterministic
- * per name (same contact always gets the same color/initials), no photo-upload dependency. */
-export default function ContactAvatar({ displayName, size }: ContactAvatarProps): React.JSX.Element;
+/**
+ * A small circular avatar for a contact, matching Outlook People's: the contact's own picture when they have one, else their Gravatar (when `email`
+ * is given), else initials on a color that is deterministic per name. A picture that fails to load falls through to the next.
+ */
+export default function ContactAvatar({ displayName, size, photoUrl, email }: ContactAvatarProps): React.JSX.Element;

package/dist/lib/components/avatar/ContactAvatar.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/** A fixed palette of background colors, cycled by a hash of the contact's name — no photo upload feature
- * exists yet (`Contact.photoBlobKey` is modeled server-side but nothing in this app sets/reads it), so every
- * contact gets one of these deterministically rather than a plain generic gray circle for everyone. */
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { gravatarEnabled, gravatarUrl } from "../../contacts/gravatar.js";
+/** A fixed palette of background colors, cycled by a hash of the contact's name, for the initials shown when there is no picture. */
 const PALETTE = ["#7c3aed", "#2563eb", "#0891b2", "#059669", "#d97706", "#dc2626", "#db2777", "#4f46e5"];
 function initialsOf(displayName) {
     const parts = displayName.trim().split(/\s+/).filter(Boolean);
@@ -19,8 +23,27 @@ function colorOf(displayName) {
     }
     return PALETTE[Math.abs(hash) % PALETTE.length];
 }
-/** A small circular initials avatar for a contact, matching Outlook People's list-row avatars — deterministic
- * per name (same contact always gets the same color/initials), no photo-upload dependency. */
-export default function ContactAvatar({ displayName, size = 32 }) {
+/**
+ * A small circular avatar for a contact, matching Outlook People's: the contact's own picture when they have one, else their Gravatar (when `email`
+ * is given), else initials on a color that is deterministic per name. A picture that fails to load falls through to the next.
+ */
+export default function ContactAvatar({ displayName, size = 32, photoUrl, email }) {
+    const [gravatar, setGravatar] = useState();
+    const [failed, setFailed] = useState([]);
+    useEffect(() => {
+        setGravatar(undefined);
+        if (!email || !gravatarEnabled()) {
+            return;
+        }
+        let cancelled = false;
+        void gravatarUrl(email, size * 2).then((url) => !cancelled && setGravatar(url));
+        return () => {
+            cancelled = true;
+        };
+    }, [email, size]);
+    const src = [photoUrl, gravatar].find((url) => url && !failed.includes(url));
+    if (src) {
+        return (_jsx("img", { src: src, alt: "", "aria-hidden": "true", width: size, height: size, referrerPolicy: "no-referrer", onError: () => setFailed((list) => [...list, src]), className: "inline-block rounded-full object-cover shrink-0", style: { width: size, height: size } }));
+    }
     return (_jsx("span", { "aria-hidden": "true", style: { width: size, height: size, backgroundColor: colorOf(displayName), fontSize: size * 0.4 }, className: "inline-flex items-center justify-center rounded-full text-white font-semibold shrink-0", children: initialsOf(displayName) }));
 }

package/dist/lib/components/buttons/CopyIconButton.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface CopyIconButtonProps {
+    /** The text put on the clipboard. */
+    value: string;
+    /** The button's accessible name and tooltip - say what is copied, e.g. "Copy address". */
+    label: string;
+    className?: string;
+}
+/**
+ * A small icon-only "copy" button to sit right after a value (an email address). The icon turns into a check mark for a moment once the value is on
+ * the clipboard, and a polite live region says "Copied" (or "Couldn't copy") for screen readers.
+ */
+export default function CopyIconButton({ value, label, className }: CopyIconButtonProps): React.JSX.Element;

package/dist/lib/components/buttons/CopyIconButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiCheck, HiOutlineClipboardDocument } from "react-icons/hi2";
+import useCopyToClipboard from "../../util/useCopyToClipboard.js";
+/**
+ * A small icon-only "copy" button to sit right after a value (an email address). The icon turns into a check mark for a moment once the value is on
+ * the clipboard, and a polite live region says "Copied" (or "Couldn't copy") for screen readers.
+ */
+export default function CopyIconButton({ value, label, className }) {
+    const { status, copy } = useCopyToClipboard();
+    return (_jsxs("span", { className: "inline-flex items-center align-middle", children: [_jsx("button", { type: "button", "aria-label": label, title: label, onClick: () => void copy(value), className: [
+                    "inline-flex items-center justify-center rounded-sm p-1 text-text-muted hover:text-text hover:bg-surface-alt focus-visible:outline-2 focus-visible:outline-primary",
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: status === "copied" ? (_jsx(HiCheck, { "aria-hidden": "true", className: "size-4 text-success" })) : (_jsx(HiOutlineClipboardDocument, { "aria-hidden": "true", className: "size-4" })) }), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: status === "copied" ? "Copied" : status === "failed" ? "Couldn’t copy" : "" })] }));
+}

package/dist/lib/contacts/contactsApi.d.ts

@@ -154,6 +154,18 @@ export declare function updateContact(patch: ContactPatch, client?: ApiClient):
  * `setMessageRead()`/`tasksApi.ts`'s `setTaskCompleted()`. Sends only `uid`/`version`/`favorite`, never
  * the rest of `contact` (the server rejects its managed fields). */
 export declare function setContactFavorite(contact: Contact, favorite: boolean, client?: ApiClient): Promise<Contact>;
+/**
+ * The URL of a contact's own picture, or `undefined` when they have none. The version is part of it so a replaced picture is fetched again rather than
+ * served from the browser's cache.
+ */
+export declare function contactPhotoUrl(contact: Pick<Contact, "uid" | "version" | "photoBlobKey">): string | undefined;
+/** The picture types the server accepts for a contact, and the most bytes it takes. */
+export declare const CONTACT_PHOTO_TYPES: string[];
+export declare const CONTACT_PHOTO_MAX_BYTES: number;
+/** Sets a contact's own picture from an image file (the file's own bytes go up, not JSON) and returns the updated contact. */
+export declare function uploadContactPhoto(uid: string, version: number, file: Blob): Promise<Contact>;
+/** Removes a contact's own picture and returns the updated contact. */
+export declare function deleteContactPhoto(uid: string, version: number, client?: ApiClient): Promise<Contact>;
 export declare function deleteContact(uid: string, version: number, client?: ApiClient): Promise<void>;
 export interface ContactList {
     uid: string;

package/dist/lib/contacts/contactsApi.js

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 /** Typed wrappers over `@rapidmx/restapi`'s `/mail/contacts` REST surface — see `mailApi.ts`'s own header
  * comment for the shared ACL/authorization model every wrapper file here follows. */
-import { withClient } from "../util/api.js";
+import { ApiRequestError, apiUrl, withClient, withCsrfHeader } from "../util/api.js";
 import { buildQuery } from "../util/apiQuery.js";
 import { signingKeyFingerprints, } from "../crypto/keyvaultApi.js";
 /** Lists a folder's contacts, alphabetically by display name. Never includes soft-deleted contacts — see
@@ -118,6 +118,35 @@ export function updateContact(patch, client) {
 export function setContactFavorite(contact, favorite, client) {
     return updateContact({ uid: contact.uid, version: contact.version, favorite }, client);
 }
+/**
+ * The URL of a contact's own picture, or `undefined` when they have none. The version is part of it so a replaced picture is fetched again rather than
+ * served from the browser's cache.
+ */
+export function contactPhotoUrl(contact) {
+    return contact.photoBlobKey ? apiUrl(`/mail/contacts/${encodeURIComponent(contact.uid)}/photo?v=${contact.version}`) : undefined;
+}
+/** The picture types the server accepts for a contact, and the most bytes it takes. */
+export const CONTACT_PHOTO_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+export const CONTACT_PHOTO_MAX_BYTES = 1024 * 1024;
+/** Sets a contact's own picture from an image file (the file's own bytes go up, not JSON) and returns the updated contact. */
+export async function uploadContactPhoto(uid, version, file) {
+    const res = await fetch(apiUrl(`/mail/contacts/${encodeURIComponent(uid)}/photo?version=${version}`), {
+        method: "PUT",
+        credentials: "include",
+        headers: withCsrfHeader({ "Content-Type": file.type }, "PUT"),
+        body: file,
+    });
+    const contentType = res.headers.get("content-type") ?? "";
+    const body = contentType.includes("application/json") ? await res.json().catch(() => undefined) : undefined;
+    if (!res.ok) {
+        throw new ApiRequestError((body && (body.message || body.error)) || res.statusText || "Upload failed.", res.status, body?.code);
+    }
+    return body;
+}
+/** Removes a contact's own picture and returns the updated contact. */
+export function deleteContactPhoto(uid, version, client) {
+    return withClient(client, `/mail/contacts/${encodeURIComponent(uid)}/photo?version=${version}`, { method: "DELETE" });
+}
 export function deleteContact(uid, version, client) {
     return withClient(client, `/mail/contacts/${encodeURIComponent(uid)}?version=${version}`, { method: "DELETE" });
 }

package/dist/lib/contacts/gravatar.d.ts

@@ -0,0 +1,12 @@
+/** The `localStorage` key of the privacy preference: `"off"` stops contact avatars from asking Gravatar for a picture. */
+export declare const GRAVATAR_PREFERENCE_KEY = "rapidmx:gravatar";
+/**
+ * Whether avatars may look a person up at Gravatar by the SHA-256 hash of their address (never the address itself). On unless the reader turned
+ * it off (`localStorage["rapidmx:gravatar"] = "off"`); a browser without storage keeps the default.
+ */
+export declare function gravatarEnabled(): boolean;
+/**
+ * The Gravatar picture URL for `email`, `size` pixels square. It answers `404` (`d=404`) for a person with no Gravatar, so an `<img>` fails to load
+ * and the caller falls back to initials rather than showing Gravatar's placeholder. `undefined` for an empty address or without Web Crypto.
+ */
+export declare function gravatarUrl(email: string, size: number): Promise<string | undefined>;

package/dist/lib/contacts/gravatar.js

@@ -0,0 +1,43 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** The `localStorage` key of the privacy preference: `"off"` stops contact avatars from asking Gravatar for a picture. */
+export const GRAVATAR_PREFERENCE_KEY = "rapidmx:gravatar";
+/**
+ * Whether avatars may look a person up at Gravatar by the SHA-256 hash of their address (never the address itself). On unless the reader turned
+ * it off (`localStorage["rapidmx:gravatar"] = "off"`); a browser without storage keeps the default.
+ */
+export function gravatarEnabled() {
+    try {
+        return globalThis.localStorage?.getItem(GRAVATAR_PREFERENCE_KEY) !== "off";
+    }
+    catch {
+        return true;
+    }
+}
+const hashes = new Map();
+/** The lowercase-hex SHA-256 of a trimmed, lowercased `email`, or `undefined` where the browser has no Web Crypto (an insecure page). */
+function hashOf(email) {
+    const normalized = email.trim().toLowerCase();
+    let hash = hashes.get(normalized);
+    if (!hash) {
+        hash = (async () => {
+            const digest = await globalThis.crypto?.subtle?.digest("SHA-256", new TextEncoder().encode(normalized));
+            return digest && Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("");
+        })().catch(() => undefined);
+        hashes.set(normalized, hash);
+    }
+    return hash;
+}
+/**
+ * The Gravatar picture URL for `email`, `size` pixels square. It answers `404` (`d=404`) for a person with no Gravatar, so an `<img>` fails to load
+ * and the caller falls back to initials rather than showing Gravatar's placeholder. `undefined` for an empty address or without Web Crypto.
+ */
+export async function gravatarUrl(email, size) {
+    if (!email.trim()) {
+        return undefined;
+    }
+    const hash = await hashOf(email);
+    return hash && `https://gravatar.com/avatar/${hash}?s=${Math.max(1, Math.round(size))}&d=404`;
+}

package/lib/components/avatar/ContactAvatar.tsx

@@ -2,16 +2,19 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { gravatarEnabled, gravatarUrl } from "../../contacts/gravatar.js";
 
 export interface ContactAvatarProps {
     displayName: string;
     size?: number;
+    /** The contact's own picture (see `contactPhotoUrl()`); shown in preference to anything else. */
+    photoUrl?: string;
+    /** The contact's address: without a picture of their own, its Gravatar is shown when there is one (and the reader hasn't turned that off). */
+    email?: string;
 }
 
-/** A fixed palette of background colors, cycled by a hash of the contact's name — no photo upload feature
- * exists yet (`Contact.photoBlobKey` is modeled server-side but nothing in this app sets/reads it), so every
- * contact gets one of these deterministically rather than a plain generic gray circle for everyone. */
+/** A fixed palette of background colors, cycled by a hash of the contact's name, for the initials shown when there is no picture. */
 const PALETTE = ["#7c3aed", "#2563eb", "#0891b2", "#059669", "#d97706", "#dc2626", "#db2777", "#4f46e5"];
 
 function initialsOf(displayName: string): string {
@@ -32,9 +35,42 @@ function colorOf(displayName: string): string {
     return PALETTE[Math.abs(hash) % PALETTE.length];
 }
 
-/** A small circular initials avatar for a contact, matching Outlook People's list-row avatars — deterministic
- * per name (same contact always gets the same color/initials), no photo-upload dependency. */
-export default function ContactAvatar({ displayName, size = 32 }: ContactAvatarProps) {
+/**
+ * A small circular avatar for a contact, matching Outlook People's: the contact's own picture when they have one, else their Gravatar (when `email`
+ * is given), else initials on a color that is deterministic per name. A picture that fails to load falls through to the next.
+ */
+export default function ContactAvatar({ displayName, size = 32, photoUrl, email }: ContactAvatarProps) {
+    const [gravatar, setGravatar] = useState<string | undefined>();
+    const [failed, setFailed] = useState<string[]>([]);
+
+    useEffect(() => {
+        setGravatar(undefined);
+        if (!email || !gravatarEnabled()) {
+            return;
+        }
+        let cancelled = false;
+        void gravatarUrl(email, size * 2).then((url) => !cancelled && setGravatar(url));
+        return () => {
+            cancelled = true;
+        };
+    }, [email, size]);
+
+    const src = [photoUrl, gravatar].find((url) => url && !failed.includes(url));
+    if (src) {
+        return (
+            <img
+                src={src}
+                alt=""
+                aria-hidden="true"
+                width={size}
+                height={size}
+                referrerPolicy="no-referrer"
+                onError={() => setFailed((list) => [...list, src])}
+                className="inline-block rounded-full object-cover shrink-0"
+                style={{ width: size, height: size }}
+            />
+        );
+    }
     return (
         <span
             aria-hidden="true"

package/lib/components/buttons/CopyIconButton.tsx

@@ -0,0 +1,49 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiCheck, HiOutlineClipboardDocument } from "react-icons/hi2";
+import useCopyToClipboard from "../../util/useCopyToClipboard.js";
+
+export interface CopyIconButtonProps {
+    /** The text put on the clipboard. */
+    value: string;
+    /** The button's accessible name and tooltip - say what is copied, e.g. "Copy address". */
+    label: string;
+    className?: string;
+}
+
+/**
+ * A small icon-only "copy" button to sit right after a value (an email address). The icon turns into a check mark for a moment once the value is on
+ * the clipboard, and a polite live region says "Copied" (or "Couldn't copy") for screen readers.
+ */
+export default function CopyIconButton({ value, label, className }: CopyIconButtonProps) {
+    const { status, copy } = useCopyToClipboard();
+
+    return (
+        <span className="inline-flex items-center align-middle">
+            <button
+                type="button"
+                aria-label={label}
+                title={label}
+                onClick={() => void copy(value)}
+                className={[
+                    "inline-flex items-center justify-center rounded-sm p-1 text-text-muted hover:text-text hover:bg-surface-alt focus-visible:outline-2 focus-visible:outline-primary",
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+            >
+                {status === "copied" ? (
+                    <HiCheck aria-hidden="true" className="size-4 text-success" />
+                ) : (
+                    <HiOutlineClipboardDocument aria-hidden="true" className="size-4" />
+                )}
+            </button>
+            <span role="status" aria-live="polite" className="sr-only">
+                {status === "copied" ? "Copied" : status === "failed" ? "Couldn’t copy" : ""}
+            </span>
+        </span>
+    );
+}

package/lib/contacts/contactsApi.ts

@@ -5,7 +5,7 @@
 /** Typed wrappers over `@rapidmx/restapi`'s `/mail/contacts` REST surface — see `mailApi.ts`'s own header
  * comment for the shared ACL/authorization model every wrapper file here follows. */
 
-import { ApiClient, withClient } from "../util/api.js";
+import { ApiClient, ApiRequestError, apiUrl, withClient, withCsrfHeader } from "../util/api.js";
 import { ListParams, buildQuery } from "../util/apiQuery.js";
 import {
     type EncryptionPreference,
@@ -252,6 +252,39 @@ export function setContactFavorite(contact: Contact, favorite: boolean, client?:
     return updateContact({ uid: contact.uid, version: contact.version, favorite }, client);
 }
 
+/**
+ * The URL of a contact's own picture, or `undefined` when they have none. The version is part of it so a replaced picture is fetched again rather than
+ * served from the browser's cache.
+ */
+export function contactPhotoUrl(contact: Pick<Contact, "uid" | "version" | "photoBlobKey">): string | undefined {
+    return contact.photoBlobKey ? apiUrl(`/mail/contacts/${encodeURIComponent(contact.uid)}/photo?v=${contact.version}`) : undefined;
+}
+
+/** The picture types the server accepts for a contact, and the most bytes it takes. */
+export const CONTACT_PHOTO_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+export const CONTACT_PHOTO_MAX_BYTES = 1024 * 1024;
+
+/** Sets a contact's own picture from an image file (the file's own bytes go up, not JSON) and returns the updated contact. */
+export async function uploadContactPhoto(uid: string, version: number, file: Blob): Promise<Contact> {
+    const res = await fetch(apiUrl(`/mail/contacts/${encodeURIComponent(uid)}/photo?version=${version}`), {
+        method: "PUT",
+        credentials: "include",
+        headers: withCsrfHeader({ "Content-Type": file.type }, "PUT"),
+        body: file,
+    });
+    const contentType = res.headers.get("content-type") ?? "";
+    const body = contentType.includes("application/json") ? await res.json().catch(() => undefined) : undefined;
+    if (!res.ok) {
+        throw new ApiRequestError((body && (body.message || body.error)) || res.statusText || "Upload failed.", res.status, body?.code);
+    }
+    return body as Contact;
+}
+
+/** Removes a contact's own picture and returns the updated contact. */
+export function deleteContactPhoto(uid: string, version: number, client?: ApiClient): Promise<Contact> {
+    return withClient(client, `/mail/contacts/${encodeURIComponent(uid)}/photo?version=${version}`, { method: "DELETE" });
+}
+
 export function deleteContact(uid: string, version: number, client?: ApiClient): Promise<void> {
     return withClient(client, `/mail/contacts/${encodeURIComponent(uid)}?version=${version}`, { method: "DELETE" });
 }