@rapidmx/web-client 0.26.0 → 0.27.0

package/README.md

@@ -355,10 +355,20 @@ any release.
 | `shared/components/admin/layout/AdminShell.js` | Admin console chrome, gated on administrator access - an administrator whose session isn't elevated is sent to auth-server's `/auth/elevate` page and returned. `active` is the plugin's `adminNav` item id. |
 | `shared/components/layout/BrandingChrome.js` | `BrandingHeader` and `BrandingFooter`, for pages that don't use a shell, such as public pages. |
 | `shared/plugins/pluginNav.js` | The `PluginNav`, `PluginUiNavItem` and `PluginNavProps` types. |
+| `shared/plugins/pluginIcons.js` | `PLUGIN_ICONS`, the icon names a nav entry's `icon` can use, and `pluginIcon()`, which resolves one. |
+
+### Page building blocks
+
+| Import | Use |
+| --- | --- |
+| `shared/components/layout/ResponsiveToolbar.js` | A toolbar whose buttons collapse into an overflow menu when space runs out. |
+| `shared/components/admin/usePagedList.js` | Loads a list a page at a time with "Load more", for tables of the plugin's own records. |
+| `shared/notifications/apiErrors.js` | `notifyApiError()`, which shows a failed API call as a notification. |
+| `shared/components/admin/diagnostics/Sparkline.js` and `MetricTile.js` | A small trend line and a labelled figure, for simple dashboards. |
 
 Every www and admin page receives a `pluginNav` prop from the server. It lists the settings sections, admin sections and
-app rail entries of every enabled plugin whose UI built. The shells append those entries after their own, with a generic
-icon. An entry whose id matches a core entry is skipped, and so is one whose `href` isn't a same-origin path. Pass the
+app rail entries of every enabled plugin whose UI built. The shells append those entries after their own, each with the
+icon its manifest names when that name is in `PLUGIN_ICONS`, and a generic puzzle piece otherwise. An entry whose id matches a core entry is skipped, and so is one whose `href` isn't a same-origin path. Pass the
 page props straight to the shell so the navigation shows:
 
 ```tsx
@@ -397,7 +407,9 @@ section above):
 - `components/buttons/Button.js`, `components/feedback/Alert.js` and `components/feedback/Skeleton.js`;
 - `components/forms/FormField.js`;
 - `components/overlays/Modal.js` and `components/overlays/Drawer.js`;
-- `components/pickers/MiniDatePicker.js`.
+- `components/pickers/MiniDatePicker.js`;
+- `components/avatar/ContactAvatar.js`;
+- `util/apiQuery.js`: `buildQuery()`, for paging a list route.
 
 ## Uninstalling a plugin with its data
 

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -48,6 +48,7 @@ import {
     recordElevationAttempt,
 } from "../elevation.js";
 import { signOutOfConsole } from "../signOut.js";
+import { pluginIcon } from "../../../plugins/pluginIcons.js";
 import { mergePluginNavItems, PluginNav, PluginNavProps } from "../../../plugins/pluginNav.js";
 
 export type AdminSection =
@@ -165,13 +166,13 @@ const SETUP_ITEM: NavItem = { id: "setup", href: "/admin/setup", label: "Setup",
 
 const OFF_RAIL_ITEMS: NavItem[] = [...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?: PluginNav): NavItem[] {
     return mergePluginNavItems<NavItem>(
         NAV_ITEMS,
         pluginNav?.adminNav,
-        ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }),
+        ({ id, href, label, icon }) => ({ id, href, label, icon: pluginIcon(icon) }),
         OFF_RAIL_ITEMS.map((item) => item.id),
     );
 }

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

@@ -3,11 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
-import type { Contact, ContactAddressKind } from "../../../../lib/contacts/contactsApi.js";
+import { type Contact, type ContactAddressKind, 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";
@@ -143,6 +145,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     const [listed, setListed] = useState<Section<Mailbox[]>>({ status: "loading" });
     const [created, setCreated] = useState<Contact | undefined>();
     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<Contact | undefined>();
     const mounted = useRef(true);
     useEffect(() => {
         mounted.current = true;
@@ -182,7 +186,7 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     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: "" });
@@ -211,6 +215,17 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
         }
     }
 
+    async function handleToggleFavorite(current: Contact) {
+        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();
@@ -219,9 +234,12 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     return (
         <Modal open onClose={onClose} title={name}>
             <div className="flex items-center gap-4">
-                <ContactAvatar displayName={name} size={72} />
-                <div className="min-w-0">
-                    <p className="text-sm text-text-muted break-words">{participant.address}</p>
+                <ContactAvatar displayName={name} size={72} photoUrl={stored && contactPhotoUrl(stored)} email={participant.address} />
+                <div className="min-w-0 flex-1">
+                    <p className="text-sm text-text-muted break-words">
+                        {participant.address}
+                        <CopyIconButton value={participant.address} label="Copy address" className="ml-1" />
+                    </p>
                     {external && (
                         <span className="inline-block mt-1 text-xs font-semibold py-0.5 px-2 rounded-pill bg-warning/15 text-text">External</span>
                     )}
@@ -229,14 +247,13 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                         <p className="mt-1 text-sm break-words">{[known.jobTitle, known.company].filter(Boolean).join(", ")}</p>
                     )}
                 </div>
+                {stored && <FavoriteStarButton favorite={!!stored.favorite} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
             </div>
             <div className="mt-4 flex flex-wrap items-center gap-2">
-                <Button type="button" variant="secondary" className={ACTION_CLASS} onClick={handleEmail}>
+                <Button type="button" variant="secondary" className={`${ACTION_CLASS} inline-flex items-center gap-1.5`} onClick={handleEmail}>
+                    <HiOutlineEnvelope aria-hidden="true" className="size-4" />
                     Email
                 </Button>
-                <CopyButton value={participant.address} label="Copy address">
-                    Copy address
-                </CopyButton>
                 {stored ? (
                     <a
                         href={`${APP_HREFS.contacts}/${encodeURIComponent(stored.uid)}`}
@@ -246,8 +263,16 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                         Open contact
                     </a>
                 ) : (
-                    <Button type="button" variant="secondary" className={ACTION_CLASS} disabled={!createWith || creating} loading={creating} onClick={() => void handleCreate(createWith as CreateWith)}>
-                        Create contact
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className={`${ACTION_CLASS} inline-flex items-center gap-1.5`}
+                        disabled={!createWith || creating}
+                        loading={creating}
+                        onClick={() => void handleCreate(createWith as CreateWith)}
+                    >
+                        <HiOutlineUserPlus aria-hidden="true" className="size-4" />
+                        Add to contacts
                     </Button>
                 )}
             </div>
@@ -265,6 +290,7 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                     {known.emails.map((email) => (
                         <Detail key={`e:${email.address}`} label={["Email", kindLabel(email.type)].filter(Boolean).join(" ")}>
                             {email.address}
+                            <CopyIconButton value={email.address} label="Copy email address" className="ml-1" />
                         </Detail>
                     ))}
                     {known.phones.map((phone) => (

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

@@ -3,7 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { Contact } from "../../../../lib/contacts/contactsApi.js";
+import { Contact, 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 Alert from "../../../../lib/components/feedback/Alert.js";
 import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
@@ -37,6 +41,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;
@@ -47,13 +53,23 @@ 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) {
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps) {
+    const client = useApiClient();
     // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
     const [keyNotice, setKeyNotice] = useState<{ contactUid: string; text: string } | null>(null);
     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: string) {
         setKeyNotice({ contactUid: contact.uid, text });
@@ -70,9 +86,12 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
             )}
             <div className="flex items-start justify-between gap-4">
                 <div className="flex items-center gap-3">
-                    <ContactAvatar displayName={contact.displayName} size={48} />
+                    <ContactAvatar displayName={contact.displayName} size={48} photoUrl={contactPhotoUrl(contact)} email={contact.emails[0]?.address} />
                     <div>
-                        <h1 className="text-xl font-bold tracking-tight">{contact.displayName}</h1>
+                        <h1 className="text-xl font-bold tracking-tight">
+                            {contact.displayName}
+                            <FavoriteStarButton favorite={!!contact.favorite} onToggle={() => void handleToggleFavorite()} className="ml-1 align-middle" />
+                        </h1>
                         {contact.jobTitle && contact.company && (
                             <p className="text-sm text-text-muted mt-0.5">
                                 {contact.jobTitle} at {contact.company}
@@ -96,7 +115,8 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref,
                         <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Email</div>
                         {contact.emails.map((e, i) => (
                             <div key={i}>
-                                {e.address} <span className="text-text-muted">({e.type})</span>
+                                {e.address}
+                                <CopyIconButton value={e.address} label="Copy email address" className="mx-0.5" /> <span className="text-text-muted">({e.type})</span>
                             </div>
                         ))}
                     </div>

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

@@ -11,13 +11,18 @@ import {
     ContactPatch,
     ContactPhone,
     ContactPostalAddress,
+    contactPhotoUrl,
     createContact,
+    deleteContactPhoto,
     updateContact,
+    uploadContactPhoto,
 } from "../../../../lib/contacts/contactsApi.js";
 import { Mailbox } from "../../../../lib/mail/mailApi.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import ContactPhotoField from "./ContactPhotoField.js";
+import FavoriteStarButton from "./FavoriteStarButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
@@ -62,6 +67,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     // Every stored address is kept and editable - editing a contact must never silently drop addresses
     // beyond the first.
     const [addresses, setAddresses] = useState<ContactPostalAddress[]>(contact?.addresses ?? []);
+    // A picture chosen (or the current one dropped) is applied once the contact itself is saved.
+    const [pickedPhoto, setPickedPhoto] = useState<File | null>(null);
+    const [removePhoto, setRemovePhoto] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
 
@@ -143,6 +151,11 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     client,
                 );
             }
+            if (pickedPhoto) {
+                saved = await uploadContactPhoto(saved.uid, saved.version, pickedPhoto);
+            } else if (removePhoto && saved.photoBlobKey) {
+                saved = await deleteContactPhoto(saved.uid, saved.version, client);
+            }
             // A message opened later in this page load must see the changed contact's signing keys.
             clearPinnedSignerCache();
             onSaved(saved);
@@ -191,6 +204,29 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 />
             </FormField>
 
+            <div className="flex items-start gap-2">
+                <div className="min-w-0 flex-1">
+                    <ContactPhotoField
+                        displayName={displayName}
+                        email={emails[0]?.address}
+                        currentUrl={contact && contactPhotoUrl(contact)}
+                        picked={pickedPhoto}
+                        removed={removePhoto}
+                        onPick={(file) => {
+                            setPickedPhoto(file);
+                            setRemovePhoto(false);
+                            setError(null);
+                        }}
+                        onRemove={() => {
+                            setPickedPhoto(null);
+                            setRemovePhoto(true);
+                        }}
+                        onReject={setError}
+                    />
+                </div>
+                <FavoriteStarButton favorite={favorite} onToggle={() => setFavorite((value) => !value)} />
+            </div>
+
             <div className="grid grid-cols-1 @md:grid-cols-2 gap-3">
                 <FormField label="First name" htmlFor="contact-givenName">
                     <input id="contact-givenName" type="text" className={INPUT_CLASS} value={givenName} onChange={(e) => setGivenName(e.target.value)} />
@@ -209,11 +245,6 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 </FormField>
             </div>
 
-            <label className="flex items-center gap-2 text-sm mb-4">
-                <input type="checkbox" checked={favorite} onChange={(e) => setFavorite(e.target.checked)} />
-                Favorite
-            </label>
-
             <FormField label="Categories (comma-separated)" htmlFor="contact-categories">
                 <input
                     id="contact-categories"

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

@@ -0,0 +1,86 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef, useState } from "react";
+import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { CONTACT_PHOTO_MAX_BYTES, CONTACT_PHOTO_TYPES } from "../../../../lib/contacts/contactsApi.js";
+
+export interface ContactPhotoFieldProps {
+    displayName: string;
+    /** The contact's first address, for the Gravatar shown while they have no picture of their own. */
+    email?: string;
+    /** The picture the contact has now (`contactPhotoUrl()`), if any. */
+    currentUrl?: string;
+    /** The picture chosen to replace it, not uploaded until the contact is saved; `null` for none. */
+    picked: File | null;
+    /** Whether the current picture is to be removed when the contact is saved. */
+    removed: boolean;
+    onPick: (file: File) => void;
+    onRemove: () => void;
+    /** Called with the reason a chosen file was turned down. */
+    onReject: (message: string) => void;
+}
+
+/**
+ * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with "Change photo" and, when
+ * there is a picture of their own, "Remove photo". A file is checked here (type and size) and only uploaded when the form is saved.
+ */
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject }: ContactPhotoFieldProps) {
+    const input = useRef<HTMLInputElement>(null);
+    const [preview, setPreview] = useState<string | undefined>();
+
+    useEffect(() => {
+        if (!picked) {
+            setPreview(undefined);
+            return;
+        }
+        const url = URL.createObjectURL(picked);
+        setPreview(url);
+        return () => URL.revokeObjectURL(url);
+    }, [picked]);
+
+    function handleChange(file: File | undefined) {
+        if (!file) {
+            return;
+        }
+        if (!CONTACT_PHOTO_TYPES.includes(file.type)) {
+            onReject("Choose a JPEG, PNG, GIF or WebP image.");
+        } else if (file.size > CONTACT_PHOTO_MAX_BYTES) {
+            onReject("Choose an image no larger than 1 MB.");
+        } else {
+            onPick(file);
+        }
+    }
+
+    const shown = picked ? preview : removed ? undefined : currentUrl;
+    const hasOwn = !!picked || (!!currentUrl && !removed);
+    return (
+        <div className="flex items-center gap-4 mb-3">
+            <ContactAvatar displayName={displayName || "?"} size={72} photoUrl={shown} email={picked || (currentUrl && !removed) ? undefined : email} />
+            <div className="flex flex-wrap gap-2">
+                <input
+                    ref={input}
+                    type="file"
+                    accept={CONTACT_PHOTO_TYPES.join(",")}
+                    aria-label="Contact photo file"
+                    className="sr-only"
+                    tabIndex={-1}
+                    onChange={(e) => {
+                        handleChange(e.target.files?.[0]);
+                        e.target.value = "";
+                    }}
+                />
+                <Button type="button" variant="secondary" className="!w-auto !py-1 !px-3 text-xs" onClick={() => input.current?.click()}>
+                    {hasOwn ? "Change photo" : "Add photo"}
+                </Button>
+                {hasOwn && (
+                    <Button type="button" variant="secondary" className="!w-auto !py-1 !px-3 text-xs" onClick={onRemove}>
+                        Remove photo
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineStar, HiStar } from "react-icons/hi2";
+
+export interface FavoriteStarButtonProps {
+    favorite: boolean;
+    onToggle: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+/** The star that marks a contact as a favorite: filled when it is one. A toggle button (`aria-pressed`) named "Favorite". */
+export default function FavoriteStarButton({ favorite, onToggle, disabled, className }: FavoriteStarButtonProps) {
+    return (
+        <button
+            type="button"
+            aria-label="Favorite"
+            title={favorite ? "Remove from favorites" : "Add to favorites"}
+            aria-pressed={favorite}
+            disabled={disabled}
+            onClick={onToggle}
+            className={[
+                "inline-flex items-center justify-center rounded-sm p-1 hover:bg-surface-alt disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary",
+                favorite ? "text-warning" : "text-text-muted hover:text-text",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" ")}
+        >
+            {favorite ? <HiStar aria-hidden="true" className="size-6" /> : <HiOutlineStar aria-hidden="true" className="size-6" />}
+        </button>
+    );
+}

package/apps/shared/components/layout/AppShell.tsx

@@ -9,7 +9,6 @@ import {
     HiOutlineCalendarDays,
     HiOutlineClipboardDocumentList,
     HiOutlineEnvelope,
-    HiOutlinePuzzlePiece,
     HiOutlineUsers,
 } from "react-icons/hi2";
 import { useRouter } from "@rapidrest/react/client";
@@ -34,7 +33,9 @@ import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localInde
 import { authApiFetch, setApiUnauthorizedObserver } from "../../../../lib/util/api.js";
 import { destroyUnlockedKeys } from "../../../../lib/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { pluginIcon } from "../../plugins/pluginIcons.js";
 import { mergePluginNavItems, PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
+import { type ResolvedRailLinks, useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
 import { useInAppFrame } from "../../navigation/frameContext.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
 import { useNavigate } from "../../navigation/index.js";
@@ -131,12 +132,16 @@ export const APPS: AppDef[] = [
  * core `active` value. */
 const RESERVED_APP_IDS = ["settings"];
 
-/** `APPS` followed by the plugins' `appRail` items (generic icon), core ids winning - see `mergePluginNavItems`. */
-export function appRailItems(pluginNav?: PluginNav): NavItem[] {
+/** `APPS` followed by the plugins' `appRail` items (their manifest `icon`, or a generic one), core ids winning - see `mergePluginNavItems`. */
+export function appRailItems(pluginNav?: PluginNav, resolved: ResolvedRailLinks = {}): NavItem[] {
+    // An entry worked out per user (`resolveFrom`) is there only for a user it was answered for, and links where the answer said; the others are as declared.
+    const shown = (pluginNav?.appRail ?? [])
+        .filter((item) => !item.resolveFrom || resolved[item.id] !== undefined)
+        .map((item) => (item.resolveFrom ? { ...item, href: resolved[item.id] } : item));
     return mergePluginNavItems<NavItem>(
         APPS,
-        pluginNav?.appRail,
-        ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }),
+        shown,
+        ({ id, href, label, icon }) => ({ id, href, label, icon: pluginIcon(icon) }),
         RESERVED_APP_IDS,
     );
 }
@@ -320,11 +325,14 @@ export function AppChrome({
     // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
     useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
 
+    // Plugin rail entries that depend on the user (the meet plugin's personal room) are asked for once they are signed in.
+    const resolvedRail = useResolvedRailItems(pluginNav?.appRail, userUid);
+
     if (!userUid) {
         return <div className="min-h-screen" />;
     }
 
-    const apps = appRailItems(pluginNav);
+    const apps = appRailItems(pluginNav, resolvedRail);
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
     // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the

package/apps/shared/components/mail/MessageDetailPane.tsx

@@ -1243,33 +1243,33 @@ function MessageDetailContent({
         <CardShell unread={cardUnread}>
             {/* Header row: who it is from, when, and what can be done with it. Wraps: on a phone the actions drop under the sender. */}
             <div className={["flex flex-wrap items-start gap-x-3 gap-y-1 px-4 pt-3 pb-2", cardUnread ? "bg-primary/[0.07]" : ""].join(" ")}>
-                {threadHeader ? (
-                    // The sender line of a thread's message is the button that collapses it, so its contact card is opened from the avatar beside it.
-                    <ParticipantLink participant={{ address: senderAddress, displayName: senderName }} context={cardContext} label={`Contact card for ${senderLabel}`}>
-                        <SenderAvatar from={senderRecipient} />
-                    </ParticipantLink>
-                ) : (
-                    <SenderAvatar from={senderRecipient} />
-                )}
+                <SenderAvatar from={senderRecipient} />
                 <div className="flex-1 min-w-[12rem]">
                     <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                         {threadHeader ? (
-                            // The sender line of a message in a thread is the button that collapses it again.
-                            <h2 className="min-w-0 flex-1" style={BODY_FONT_STYLE}>
+                            // The sender line of a message in a thread collapses it again. A button cannot hold another, so the collapse button is laid
+                            // under the line (it fills the heading) and the sender's name, which opens their contact card, sits over it: a click anywhere
+                            // else on the line still reaches the collapse button.
+                            <h2 className="relative min-w-0 flex-1" style={BODY_FONT_STYLE}>
                                 <button
                                     type="button"
                                     ref={threadHeader.buttonRef}
                                     onClick={threadHeader.onToggle}
                                     aria-expanded={true}
                                     aria-controls={threadHeader.bodyId}
-                                    className={[
-                                        "w-full text-left rounded-sm text-sm",
-                                        ROW_FOCUS_CLASS,
-                                    ].join(" ")}
-                                >
-                                    <UnreadLabel unread={cardUnread} />
-                                    <MailAddress recipient={senderRecipient} className={senderClass(cardUnread)} />
-                                </button>
+                                    aria-label={`${cardUnread ? "Unread. " : ""}${senderLabel}`}
+                                    className={["absolute inset-0 w-full rounded-sm", ROW_FOCUS_CLASS].join(" ")}
+                                />
+                                <span className="pointer-events-none relative flex text-sm">
+                                    <ParticipantLink
+                                        participant={{ address: senderAddress, displayName: senderName }}
+                                        context={cardContext}
+                                        label={`Contact card for ${senderLabel}`}
+                                        className="pointer-events-auto min-w-0 max-w-full"
+                                    >
+                                        <MailAddress recipient={senderRecipient} className={senderClass(cardUnread)} />
+                                    </ParticipantLink>
+                                </span>
                             </h2>
                         ) : (
                             <p className="text-sm break-words min-w-0">

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

@@ -13,7 +13,6 @@ import {
     HiOutlineNoSymbol,
     HiOutlinePaintBrush,
     HiOutlinePencilSquare,
-    HiOutlinePuzzlePiece,
     HiOutlineShieldCheck,
     HiOutlineTag,
     HiOutlineUserCircle,
@@ -29,6 +28,7 @@ import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
+import { pluginIcon } from "../../../plugins/pluginIcons.js";
 import { mergePluginNavItems, PluginNav } from "../../../plugins/pluginNav.js";
 
 export interface SettingsSectionDef {
@@ -60,11 +60,11 @@ export type SettingsSectionId = string;
 /** `SETTINGS_SECTIONS` followed by the plugins' `settingsSections` items, core ids winning - see
  * `mergePluginNavItems`. */
 export function settingsSections(pluginNav?: PluginNav): SettingsSectionDef[] {
-    return mergePluginNavItems<SettingsSectionDef>(SETTINGS_SECTIONS, pluginNav?.settingsSections, ({ id, href, label }) => ({
+    return mergePluginNavItems<SettingsSectionDef>(SETTINGS_SECTIONS, pluginNav?.settingsSections, ({ id, href, label, icon }) => ({
         id,
         href,
         label,
-        icon: HiOutlinePuzzlePiece,
+        icon: pluginIcon(icon),
     }));
 }