@rapidmx/web-client 0.26.0 → 0.28.0

package/apps/shared/mail/usePermanentDelete.tsx

@@ -23,6 +23,8 @@ import {
 export interface EmptiableFolder {
     uid: string;
     name: string;
+    /** Every folder to empty, when "the folder" is the "All mailboxes" view of one type (each mailbox's own Deleted Items): `uid` is then the first of them. */
+    uids?: string[];
 }
 
 export interface PermanentDelete {
@@ -113,13 +115,18 @@ export function usePermanentDelete(): PermanentDelete {
             finish(outcome);
             return;
         }
-        let outcome: EmptyFolderOutcome;
-        try {
-            outcome = await purgeFolder(request.folder.uid, undefined, client);
-        } catch (err) {
-            notifyApiError(err, `Couldn't empty ${request.folder.name}`);
-            // Part of it may have gone before the failure: the caller reloads rather than assume nothing did.
-            outcome = { emptied: false, deleted: [], failed: [] };
+        const outcome: EmptyFolderOutcome = { emptied: true, deleted: [], failed: [] };
+        for (const folderUid of request.folder.uids ?? [request.folder.uid]) {
+            try {
+                const one = await purgeFolder(folderUid, undefined, client);
+                outcome.emptied &&= one.emptied;
+                outcome.deleted.push(...one.deleted);
+                outcome.failed.push(...one.failed);
+            } catch (err) {
+                notifyApiError(err, `Couldn't empty ${request.folder.name}`);
+                // Part of it may have gone before the failure: the caller reloads rather than assume nothing did.
+                outcome.emptied = false;
+            }
         }
         afterDeleted(outcome.deleted);
         // The whole-folder request does not say which messages went, so the counts are read back rather than adjusted.

package/apps/shared/plugins/pluginIcons.ts

@@ -0,0 +1,124 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { IconType } from "react-icons";
+import {
+    HiOutlineAcademicCap,
+    HiOutlineBanknotes,
+    HiOutlineBeaker,
+    HiOutlineBellAlert,
+    HiOutlineBolt,
+    HiOutlineBookOpen,
+    HiOutlineBriefcase,
+    HiOutlineBuildingOffice2,
+    HiOutlineCalendarDays,
+    HiOutlineChartBar,
+    HiOutlineChartPie,
+    HiOutlineChatBubbleLeftRight,
+    HiOutlineClipboardDocumentCheck,
+    HiOutlineCloud,
+    HiOutlineCog6Tooth,
+    HiOutlineCreditCard,
+    HiOutlineCube,
+    HiOutlineCurrencyDollar,
+    HiOutlineDocumentText,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFolderOpen,
+    HiOutlineFunnel,
+    HiOutlineGlobeAlt,
+    HiOutlineHeart,
+    HiOutlineIdentification,
+    HiOutlineInboxStack,
+    HiOutlineKey,
+    HiOutlineLifebuoy,
+    HiOutlineLightBulb,
+    HiOutlineMap,
+    HiOutlineMegaphone,
+    HiOutlineNewspaper,
+    HiOutlinePaperAirplane,
+    HiOutlinePhone,
+    HiOutlinePhoto,
+    HiOutlinePresentationChartLine,
+    HiOutlinePuzzlePiece,
+    HiOutlineQueueList,
+    HiOutlineRectangleGroup,
+    HiOutlineRocketLaunch,
+    HiOutlineShieldCheck,
+    HiOutlineShoppingCart,
+    HiOutlineSparkles,
+    HiOutlineSquares2X2,
+    HiOutlineTag,
+    HiOutlineTicket,
+    HiOutlineTrophy,
+    HiOutlineUserGroup,
+    HiOutlineUsers,
+    HiOutlineVideoCamera,
+    HiOutlineWrenchScrewdriver,
+} from "react-icons/hi2";
+
+/** The icon a plugin nav item gets when its manifest names none, or one that isn't in `PLUGIN_ICONS`. */
+export const DEFAULT_PLUGIN_ICON: IconType = HiOutlinePuzzlePiece;
+
+/**
+ * The `react-icons/hi2` icons a plugin manifest's nav `icon` can name. A fixed list rather than the whole icon set: importing every
+ * icon by name would put all of them in the bundle. A plugin that needs another one gets it added here.
+ */
+export const PLUGIN_ICONS: Readonly<Record<string, IconType>> = {
+    HiOutlineAcademicCap,
+    HiOutlineBanknotes,
+    HiOutlineBeaker,
+    HiOutlineBellAlert,
+    HiOutlineBolt,
+    HiOutlineBookOpen,
+    HiOutlineBriefcase,
+    HiOutlineBuildingOffice2,
+    HiOutlineCalendarDays,
+    HiOutlineChartBar,
+    HiOutlineChartPie,
+    HiOutlineChatBubbleLeftRight,
+    HiOutlineClipboardDocumentCheck,
+    HiOutlineCloud,
+    HiOutlineCog6Tooth,
+    HiOutlineCreditCard,
+    HiOutlineCube,
+    HiOutlineCurrencyDollar,
+    HiOutlineDocumentText,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFolderOpen,
+    HiOutlineFunnel,
+    HiOutlineGlobeAlt,
+    HiOutlineHeart,
+    HiOutlineIdentification,
+    HiOutlineInboxStack,
+    HiOutlineKey,
+    HiOutlineLifebuoy,
+    HiOutlineLightBulb,
+    HiOutlineMap,
+    HiOutlineMegaphone,
+    HiOutlineNewspaper,
+    HiOutlinePaperAirplane,
+    HiOutlinePhone,
+    HiOutlinePhoto,
+    HiOutlinePresentationChartLine,
+    HiOutlinePuzzlePiece,
+    HiOutlineQueueList,
+    HiOutlineRectangleGroup,
+    HiOutlineRocketLaunch,
+    HiOutlineShieldCheck,
+    HiOutlineShoppingCart,
+    HiOutlineSparkles,
+    HiOutlineSquares2X2,
+    HiOutlineTag,
+    HiOutlineTicket,
+    HiOutlineTrophy,
+    HiOutlineUserGroup,
+    HiOutlineUsers,
+    HiOutlineVideoCamera,
+    HiOutlineWrenchScrewdriver,
+};
+
+/** The icon for a plugin nav item's `icon` name - see `PLUGIN_ICONS` - or `DEFAULT_PLUGIN_ICON`. */
+export function pluginIcon(name: string | undefined): IconType {
+    return (name && Object.prototype.hasOwnProperty.call(PLUGIN_ICONS, name) ? PLUGIN_ICONS[name] : undefined) ?? DEFAULT_PLUGIN_ICON;
+}

package/apps/shared/plugins/pluginNav.ts

@@ -13,6 +13,14 @@ export interface PluginUiNavItem {
     label: string;
     /** A same-origin path under the host's prefix (`/settings/...`, `/admin/...`, `/...`). */
     href: string;
+    /** A `react-icons/hi2` icon name from `PLUGIN_ICONS` (`pluginIcons.ts`); anything else shows the generic puzzle piece. */
+    icon?: string;
+    /**
+     * For an app-rail entry that depends on the signed-in user: an API path (without the `/api` prefix, e.g. `/mail/video-meetings/personal-room`)
+     * the shell requests for them. The entry is shown only when that answers `200 { href }` with a same-origin path, and links there instead of to
+     * `href`; anything else hides it. See `useResolvedRailItems()`.
+     */
+    resolveFrom?: string;
 }
 
 /**

package/apps/shared/plugins/useResolvedRailItems.ts

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { type ApiClient, withClient } from "../../../lib/util/api.js";
+import { useApiClient } from "../../../lib/util/apiClientContext.js";
+import { type PluginUiNavItem, isSafePluginHref } from "./pluginNav.js";
+
+/** Where each app-rail entry that is worked out per user points, by entry id: only the entries the server answered for are here. */
+export type ResolvedRailLinks = Record<string, string>;
+
+/**
+ * Asks, once per signed-in user, for the entries of a plugin's app rail that are worked out per user (they name an API path in `resolveFrom` - the
+ * meet plugin's "Meet" button is one: it shows only for a user who has a personal room, and links to it). Each path is requested through
+ * `apiFetch()`; a `200` answering `{ href }` with a same-origin path puts that link in the result, and anything else (no such thing for this user, a
+ * server error, an answer that is not a path on this site) leaves the entry out, so a failing plugin never breaks the rail. Entries with no
+ * `resolveFrom` are not asked about. Nothing is requested without a signed-in user.
+ */
+export function useResolvedRailItems(items: PluginUiNavItem[] | undefined, userUid: string | undefined, client?: ApiClient): ResolvedRailLinks {
+    const explicitClient = useApiClient();
+    const [links, setLinks] = useState<ResolvedRailLinks>({});
+    const asked = (items ?? []).filter((item) => typeof item?.resolveFrom === "string" && item.resolveFrom !== "");
+    // A list that is the same entries again (a new array on each render) does not start over.
+    const key = asked.map((item) => `${item.id}=${item.resolveFrom}`).join("|");
+
+    useEffect(() => {
+        if (!userUid || asked.length === 0) {
+            setLinks({});
+            return undefined;
+        }
+        let cancelled = false;
+        void Promise.all(
+            asked.map(async (item): Promise<[string, string] | null> => {
+                try {
+                    const answer = await withClient<{ href?: unknown }>(client ?? explicitClient, item.resolveFrom!);
+                    return typeof answer?.href === "string" && isSafePluginHref(answer.href) ? [item.id, answer.href] : null;
+                } catch {
+                    return null;
+                }
+            }),
+        ).then((results) => {
+            if (!cancelled) {
+                setLinks(Object.fromEntries(results.filter((entry): entry is [string, string] => entry !== null)));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // `asked` is derived from `key`.
+    }, [key, userUid, client, explicitClient]);
+
+    return links;
+}

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

@@ -103,6 +103,7 @@ function ContactDetailContent({ uid }: { uid: string }) {
                 onDelete={() => handleDelete(contact)}
                 backHref={backHref}
                 onKeysChanged={handleKeysChanged}
+                onChanged={setContact}
             />
         </div>
     );

package/apps/www/contacts/index.tsx

@@ -13,6 +13,7 @@ import {
     listContacts,
     listDeletedContacts,
     setContactFavorite,
+    contactPhotoUrl,
     updateContact,
 } from "../../../lib/contacts/contactsApi.js";
 import { contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
@@ -513,7 +514,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                                         )}
                                         <td className="px-3 py-2">
                                             <button type="button" onClick={() => handleSelectRow(contact)} className="flex w-full min-w-0 items-center gap-2 text-left">
-                                                <ContactAvatar displayName={contact.displayName} size={28} />
+                                                <ContactAvatar displayName={contact.displayName} size={28} photoUrl={contactPhotoUrl(contact)} email={contact.emails[0]?.address} />
                                                 <span className="min-w-0 truncate font-medium">
                                                     {contact.displayName}
                                                     {contact.favorite && <span aria-label="Favorite"> ★</span>}
@@ -563,6 +564,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                             onEdit={() => setMode("edit")}
                             onDelete={() => handleDelete(selected)}
                             onKeysChanged={() => void reload()}
+                            onChanged={() => void reload()}
                             canResolveKeys={ownsMailbox || delegateCanUpdate}
                         />
                     </div>

package/apps/www/index.tsx

@@ -80,7 +80,7 @@ import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
 import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
 import EmptyFolderBar from "../shared/components/mail/EmptyFolderBar.js";
 import { EMPTIABLE_FOLDER_TYPES } from "../shared/mail/permanentDelete.js";
-import { usePermanentDelete } from "../shared/mail/usePermanentDelete.js";
+import { type EmptiableFolder, usePermanentDelete } from "../shared/mail/usePermanentDelete.js";
 import { useMailboxUpdateAccess } from "../shared/mail/useMailboxUpdateAccess.js";
 import {
     CONVERSATION_SORT_NOTE,
@@ -1002,12 +1002,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
             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.
@@ -1842,7 +1836,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
      * 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),
+        (conversationMessagesById[id] ?? []).filter((m) => (aggregateFolderType ? folderTypeOf(m.folderUid) === aggregateFolderType : !folderUid || m.folderUid === folderUid)),
     );
     const selectedMessages = asConversations
         ? selectedConversationMessages
@@ -1886,23 +1880,24 @@ function InboxContent({ userUid }: { userUid?: string }) {
     /** 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: string[]) {
-        const missing = ids.filter((id) => !conversationMessagesById[id]);
+    async function resolveConversations(rows: ListedConversation[]) {
+        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)] as const),
+                // 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)] as const),
             );
             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;
             });
@@ -1911,8 +1906,8 @@ function InboxContent({ userUid }: { userUid?: string }) {
         }
     }
 
-    function toggleConversationSelected(conversation: ConversationSummary) {
-        const id = conversation.conversationId;
+    function toggleConversationSelected(conversation: ListedConversation) {
+        const id = conversationKey(conversation);
         const ticking = !selectedConversationIds.has(id);
         setSelectedConversationIds((prev) => {
             const next = new Set(prev);
@@ -1924,14 +1919,13 @@ function InboxContent({ userUid }: { userUid?: string }) {
             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);
     }
 
     /**
@@ -2105,7 +2099,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
     }
 
     /** Empty folder: permanently deletes everything in the folder being listed (Deleted Items or Junk Email) after the reader has confirmed. */
-    async function emptyListedFolder(folder: Folder, count: number | undefined) {
+    async function emptyListedFolder(folder: EmptiableFolder, count: number | undefined) {
         const outcome = await permanent.requestEmptyFolder({ uid: folder.uid, name: folder.name }, count);
         if (!outcome) {
             return;
@@ -2348,7 +2342,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
     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;
@@ -2586,13 +2580,33 @@ function InboxContent({ userUid }: { userUid?: string }) {
     // 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;
+        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: Folder[] =
+        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: EmptiableFolder | undefined =
+        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"
@@ -2698,14 +2712,8 @@ function InboxContent({ userUid }: { userUid?: string }) {
                                     ? 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"
-                        }
+                        selectDisabled={loading || listedRowCount === 0}
+                        selectDisabledReason={loading ? "Wait for this folder to finish loading" : "There is nothing here to select"}
                     />
                 )}
                 {!isMobile && <div className="p-2 border-b border-border">{searchField}</div>}

package/dist/apps/shared/components/admin/layout/AdminShell.d.ts

@@ -20,7 +20,7 @@ export interface AdminShellProps extends PluginNavProps {
      */
     impersonationBaseUrl?: string;
 }
-/** `NAV_ITEMS` followed by the plugins' `adminNav` items (generic icon). Core ids win, including the
+/** `NAV_ITEMS` followed by the plugins' `adminNav` items (their manifest `icon`, or a generic one). Core ids win, including the
  * off-rail sections' - see `mergePluginNavItems`. */
 export declare function adminNavItems(pluginNav?: PluginNav): NavItem[];
 /**

package/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -21,6 +21,7 @@ import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
 import UserMenu from "../../layout/UserMenu.js";
 import { clearElevationAttempt, elevationAttemptedRecently, elevationUrl, isElevationRequired, recordElevationAttempt, } from "../elevation.js";
 import { signOutOfConsole } from "../signOut.js";
+import { pluginIcon } from "../../../plugins/pluginIcons.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Sections shown in the persistent icon rail / mobile tab bar — every admin area reachable from
  * anywhere in the console. Deliberately excludes `quarantine`/`ingestQueue`: those are scoped to a
@@ -91,10 +92,10 @@ const MAILBOX_SCOPED_ITEMS = [
 /** The setup wizard - reached by redirect or from the Mailboxes page, not from the rail. */
 const SETUP_ITEM = { id: "setup", href: "/admin/setup", label: "Setup", icon: HiOutlineRocketLaunch };
 const OFF_RAIL_ITEMS = [...MAILBOX_SCOPED_ITEMS, SETUP_ITEM];
-/** `NAV_ITEMS` followed by the plugins' `adminNav` items (generic icon). Core ids win, including the
+/** `NAV_ITEMS` followed by the plugins' `adminNav` items (their manifest `icon`, or a generic one). Core ids win, including the
  * off-rail sections' - see `mergePluginNavItems`. */
 export function adminNavItems(pluginNav) {
-    return mergePluginNavItems(NAV_ITEMS, pluginNav?.adminNav, ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }), OFF_RAIL_ITEMS.map((item) => item.id));
+    return mergePluginNavItems(NAV_ITEMS, pluginNav?.adminNav, ({ id, href, label, icon }) => ({ id, href, label, icon: pluginIcon(icon) }), OFF_RAIL_ITEMS.map((item) => item.id));
 }
 /**
  * Gates every `apps/admin` page behind the `admin` trusted role, and behind an elevated session. Uses

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

@@ -4,10 +4,13 @@ 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 { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
 import Button from "../../../../lib/components/buttons/Button.js";
-import CopyButton from "../../../../lib/components/buttons/CopyButton.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
+import { HiOutlineEnvelope, HiOutlineUserPlus } from "react-icons/hi2";
+import FavoriteStarButton from "./FavoriteStarButton.js";
 import Skeleton from "../../../../lib/components/feedback/Skeleton.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
@@ -69,6 +72,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     const [listed, setListed] = useState({ status: "loading" });
     const [created, setCreated] = useState();
     const [creating, setCreating] = useState(false);
+    // The contact as last changed from this card (starred or unstarred), which is newer than the one looked up.
+    const [changed, setChanged] = useState();
     const mounted = useRef(true);
     useEffect(() => {
         mounted.current = true;
@@ -96,7 +101,7 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     const events = useSection(folders.status === "ready" ? () => loadUpcomingEvents(folders.data, participant.address, now.current, client) : undefined, folders);
     const card = useSection(() => loadParticipantCard(participant, context, client));
     const name = participantName(participant);
-    const stored = created ?? (contact.status === "ready" ? contact.data : undefined);
+    const stored = changed ?? created ?? (contact.status === "ready" ? contact.data : 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: "" });
@@ -124,9 +129,20 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
             }
         }
     }
+    async function handleToggleFavorite(current) {
+        try {
+            const next = await setContactFavorite(current, !current.favorite, client);
+            if (mounted.current) {
+                setChanged(next);
+            }
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't update this contact");
+        }
+    }
     function handleEmail() {
         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 }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm text-text-muted break-words", children: participant.address }), 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(", ") }))] })] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: ACTION_CLASS, onClick: handleEmail, children: "Email" }), _jsx(CopyButton, { value: participant.address, label: "Copy address", children: "Copy address" }), 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" })) : (_jsx(Button, { type: "button", variant: "secondary", className: ACTION_CLASS, disabled: !createWith || creating, loading: creating, onClick: () => void handleCreate(createWith), children: "Create contact" }))] }), _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) => (_jsx(Detail, { label: ["Email", kindLabel(email.type)].filter(Boolean).join(" "), children: email.address }, `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: [_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))) })) })] }));
 }

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

@@ -11,6 +11,8 @@ export interface ContactDetailPaneProps {
     /** Called after one of the contact's key changes was accepted or kept, or turned out to be stale - the caller
      * re-reads the contact. */
     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). */
     canResolveKeys?: boolean;
@@ -20,4 +22,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, canResolveKeys }: ContactDetailPaneProps): React.JSX.Element;
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps): React.JSX.Element;

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

@@ -4,6 +4,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { contactPhotoUrl, 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 KeyChangeReview from "./KeyChangeReview.js";
@@ -27,19 +32,29 @@ 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, canResolveKeys }) {
+export default function ContactDetailPane({ contact, onEdit, onDelete, 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 ?? [];
+    async function handleToggleFavorite() {
+        try {
+            const changed = await setContactFavorite(contact, !contact.favorite, client);
+            onChanged?.(changed);
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't update this contact");
+        }
+    }
     // Pinned signing keys vouch for signatures, so the pinned-signer cache is dropped along with re-reading the contact.
     function refresh(text) {
         setKeyNotice({ contactUid: contact.uid, text });
         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 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), 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, " ", _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: [_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) ||
                         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) => {