@rapidmx/web-client 0.24.0 → 0.26.0

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

@@ -0,0 +1,158 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * What the contact card (`ContactCard`) and the vCard attachment actions read and write: the user's contact and calendar folders, the contact
+ * behind an address, the last messages to or from it, its upcoming events, and the calls that make a contact from a participant or a vCard.
+ * Every function takes the `ApiClient` to use (`useApiClient()`), like the API modules under `lib/`.
+ */
+import { addDays } from "date-fns";
+import { listCalendarEvents } from "../../../../lib/calendar/calendarApi.js";
+import { expandAllOccurrences } from "../../../../lib/calendar/recurrence.js";
+import { createContact, listContactsInFolders } from "../../../../lib/contacts/contactsApi.js";
+import { parseVCards } from "../../../../lib/contacts/vcard.js";
+import { attachmentContentUrl, getMessage, listAttachments, listFolders, } from "../../../../lib/mail/mailApi.js";
+import { search } from "../../../../lib/search/searchApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { ownMailboxes, primaryMailbox } from "../../mail/primaryMailbox.js";
+import { cardForAddress, contactInputFor, contactInputFromCard, findContactByAddress, isVCardAttachment, normalizeAddress, ownContactCard, withoutDuplicates, } from "./participantDetails.js";
+/** How many recent messages and upcoming events the card lists. */
+export const CARD_LIST_SIZE = 5;
+/** How far ahead "upcoming" looks, in days. */
+export const UPCOMING_DAYS = 60;
+/** The most vCard attachments and the most bytes of one that are read to fill a contact in. */
+export const MAX_VCARD_FILES = 3;
+export const MAX_VCARD_BYTES = 256 * 1024;
+/** The mailboxes whose data the card reads: the user's own, else the primary/first one, plus the message's mailbox when it is one they can reach. */
+export function scopeMailboxes(mailboxes, userUid, message) {
+    const own = ownMailboxes(mailboxes, userUid);
+    const scope = own.length > 0 ? own : [primaryMailbox(mailboxes, userUid)].filter((mailbox) => !!mailbox);
+    const messageMailbox = mailboxes.find((mailbox) => mailbox.uid === message?.mailboxUid);
+    return messageMailbox && !scope.includes(messageMailbox) ? [...scope, messageMailbox] : scope;
+}
+/** Every folder of `mailboxes`. A mailbox whose folders cannot be listed is left out rather than failing the rest. */
+export async function loadFolders(mailboxes, client) {
+    const lists = await Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid, client).catch(() => [])));
+    return lists.flat();
+}
+/** The contact the address belongs to in `folders`' contacts folders, if any. */
+export async function findContact(folders, address, client) {
+    const uids = folders.filter((folder) => folder.type === "contacts").map((folder) => folder.uid);
+    return findContactByAddress(await listContactsInFolders(uids, client), address);
+}
+/** The last `CARD_LIST_SIZE` messages to or from `address` in `mailboxes`, newest first. */
+export async function loadRecentMessages(mailboxes, address, client) {
+    const pages = await Promise.all(mailboxes.flatMap((mailbox) => ["from", "to"].map((role) => search("", { types: ["message"], [role]: address, limit: CARD_LIST_SIZE, mailboxUid: mailbox.uid }, client))));
+    const uids = [...new Set(pages.flatMap((page) => page.results.map((result) => result.entityUid)))];
+    // A hit can briefly outlive its message: one that no longer resolves is dropped.
+    const messages = (await Promise.all(uids.map((uid) => getMessage(uid, client).catch(() => null)))).filter((message) => !!message);
+    return messages.sort((a, b) => Date.parse(b.receivedDate) - Date.parse(a.receivedDate)).slice(0, CARD_LIST_SIZE);
+}
+/** The next `CARD_LIST_SIZE` events within `UPCOMING_DAYS` from `now` that `address` organizes or is invited to, soonest first. */
+export async function loadUpcomingEvents(folders, address, now, client) {
+    const wanted = normalizeAddress(address);
+    const calendars = folders.filter((folder) => folder.type === "calendar");
+    const lists = await Promise.all(calendars.map((folder) => listCalendarEvents(folder.uid, client)));
+    const involved = lists
+        .flat()
+        .filter((event) => event.status !== "cancelled" &&
+        (normalizeAddress(event.organizer.address) === wanted ||
+            (event.attendees ?? []).some((attendee) => normalizeAddress(attendee.address) === wanted)));
+    return expandAllOccurrences(involved, now, addDays(now, UPCOMING_DAYS))
+        .sort((a, b) => Date.parse(a.startDate) - Date.parse(b.startDate))
+        .slice(0, CARD_LIST_SIZE);
+}
+/** A vCard attachment's text. */
+export async function fetchVCardText(attachmentUid) {
+    const res = await fetch(attachmentContentUrl(attachmentUid), { credentials: "include" });
+    if (!res.ok) {
+        throw new ApiRequestError(res.statusText || "Could not load this contact card.", res.status);
+    }
+    return res.text();
+}
+/** The message's vCard attachments: `context.attachments` when given, else the message's own list. */
+async function vCardAttachments(context, client) {
+    const { message } = context;
+    const attachments = context.attachments ?? (message?.hasAttachments ? await listAttachments(message.folderUid, message.uid, client) : []);
+    return attachments.filter((attachment) => isVCardAttachment(attachment) && attachment.sizeBytes <= MAX_VCARD_BYTES).slice(0, MAX_VCARD_FILES);
+}
+/**
+ * The vCard of the context message that describes `participant`: the first attachment holding a card with their address, else - only for the
+ * message's sender, whose own vCard it presumably is - the first card there is. `undefined` when there is none, and for any failure to read one:
+ * a vCard only adds detail, it is never needed.
+ */
+export async function loadParticipantCard(participant, context, client) {
+    try {
+        const isSender = !!context.message && normalizeAddress(context.message.from.address) === normalizeAddress(participant.address);
+        let fallback;
+        for (const attachment of await vCardAttachments(context, client)) {
+            const cards = parseVCards(await fetchVCardText(attachment.uid));
+            const match = cardForAddress(cards, participant.address, false);
+            if (match) {
+                return match;
+            }
+            fallback ?? (fallback = cards[0]);
+        }
+        return isSender ? fallback : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Where a new contact goes: the message's mailbox when it is one of the user's own, else their primary mailbox - in that mailbox's contacts folder. */
+export function contactScope(mailboxes, folders, userUid, message) {
+    const own = ownMailboxes(mailboxes, userUid);
+    const mailbox = own.find((candidate) => candidate.uid === message?.mailboxUid) ?? primaryMailbox(mailboxes, userUid);
+    const folder = folders.find((candidate) => candidate.mailboxUid === mailbox?.uid && candidate.type === "contacts");
+    if (!mailbox || !folder) {
+        throw new Error("There is no contacts folder to add this contact to.");
+    }
+    return { mailboxUid: mailbox.uid, folderUid: folder.uid };
+}
+/** Stores a contact for `participant` with everything known - the name, the address and whatever `card` says. */
+export function createContactFor(participant, card, scope, client) {
+    return createContact(contactInputFor(participant, card, scope), client);
+}
+/**
+ * The sender's own contact card as a file to attach, `<display name>.vcf`: the mailbox being sent from (its name and primary address) with the phones, company and
+ * title of the user's own contact entry for that address, when they have one in their own mailboxes' address books. A lookup that fails just leaves those out.
+ */
+export async function buildOwnCardFile(mailbox, mailboxes, userUid, client) {
+    let own;
+    try {
+        const mine = ownMailboxes(mailboxes, userUid);
+        own = await findContact(await loadFolders(mine.length > 0 ? mine : [mailbox], client), mailbox.primarySmtpAddress, client);
+    }
+    catch {
+        // The card is still worth sending without them.
+    }
+    const { displayName, vcard } = ownContactCard(mailbox, own);
+    return new File([vcard], `${displayName.replace(/[\\/:*?"<>|]/g, "").trim() || "Contact"}.vcf`, { type: "text/vcard" });
+}
+/**
+ * Adds every card of a vCard file to the contacts folder `scope` names, skipping the ones whose email is already a stored contact's (or an earlier
+ * card's in the same file). A card that cannot be stored fails the whole call after the earlier ones were added - `AddCardsError` says how many.
+ */
+export async function addCardsToAddressBook(cards, scope, client) {
+    const { fresh, skipped } = withoutDuplicates(cards, await listContactsInFolders([scope.folderUid], client));
+    let added = 0;
+    for (const card of fresh) {
+        try {
+            await createContact(contactInputFromCard(card, scope), client);
+            added += 1;
+        }
+        catch (err) {
+            throw new AddCardsError(err, added);
+        }
+    }
+    return { added, skipped };
+}
+/** A card failed to store: the message is the failure's and `added` how many cards were stored before it. */
+export class AddCardsError extends Error {
+    constructor(failure, added) {
+        super(failure instanceof Error ? failure.message : "Could not add the contact.");
+        this.name = "AddCardsError";
+        this.added = added;
+    }
+}

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

@@ -0,0 +1,64 @@
+/**
+ * The pure rules behind the contact card (`ContactCard`), the "Add to address book" action of a vCard attachment and the compose window's
+ * "Attach my contact card": who a participant is, whether they are external, which contact (or vCard) describes them and what a new contact
+ * made from them holds. No network and no React - the calls that use these are in `contactCardData.ts`.
+ */
+import type { Contact, ContactEmail, ContactInput, ContactPhone, ContactPostalAddress } from "../../../../lib/contacts/contactsApi.js";
+import { type ParsedVCardContact } from "../../../../lib/contacts/vcard.js";
+import type { Mailbox } from "../../../../lib/mail/mailApi.js";
+/** Someone who took part in a message or an event: a sender, a recipient, an organizer, a guest. */
+export interface Participant {
+    address: string;
+    displayName?: string;
+}
+/** Whether an attachment is a vCard: by its MIME type (parameters such as `; charset=utf-8` ignored), else by a `.vcf`/`.vcard` name. */
+export declare function isVCardAttachment(attachment: {
+    filename?: string;
+    mimeType?: string;
+}): boolean;
+/** An address in the form two of them are compared by. */
+export declare function normalizeAddress(address: string): string;
+/** The name to show for a participant: their own when distinct from the address, else the address's local part. */
+export declare function participantName(participant: Participant): string;
+/** A display name as given name + surname: `Doe, Jane` and `Jane Doe` are both Jane Doe; a single word is only a given name, and a middle name stays with the given. */
+export declare function splitPersonName(displayName: string): {
+    givenName?: string;
+    surname?: string;
+};
+/** The first of `contacts` with an email equal (case-insensitively) to `address`. */
+export declare function findContactByAddress(contacts: readonly Contact[], address: string): Contact | undefined;
+/** The domains (lower case) of every address of `mailboxes` - primary and aliases. */
+export declare function ownDomains(mailboxes: readonly Pick<Mailbox, "primarySmtpAddress" | "aliasAddresses">[]): Set<string>;
+/** Whether `address` is outside the user's own domains. An address with no domain at all is not called external. */
+export declare function isExternalAddress(address: string, domains: ReadonlySet<string>): boolean;
+/** The card of `cards` that carries `address`; when none does and `orFirst` (the message's sender - a vCard a person attaches is their own), the first card. */
+export declare function cardForAddress(cards: readonly ParsedVCardContact[], address: string, orFirst: boolean): ParsedVCardContact | undefined;
+/** A `ContactInput` whose lists are always there. */
+export type KnownPerson = ContactInput & {
+    emails: ContactEmail[];
+    phones: ContactPhone[];
+    addresses: ContactPostalAddress[];
+};
+/**
+ * What a new contact for `participant` holds: everything the vCard `card` says (when there is one) and always the participant's address. The
+ * name is the vCard's, else the participant's, else the address's local part; given name and surname are the vCard's `N`, else split from the name.
+ */
+export declare function contactInputFor(participant: Participant, card: ParsedVCardContact | undefined, scope: {
+    mailboxUid: string;
+    folderUid: string;
+}): KnownPerson;
+/** A contact made from a vCard on its own, for "Add to address book": the card's own name and details, with the given/surname split when it lacks them. */
+export declare function contactInputFromCard(card: ParsedVCardContact, scope: {
+    mailboxUid: string;
+    folderUid: string;
+}): KnownPerson;
+/** The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's. */
+export declare function withoutDuplicates(cards: readonly ParsedVCardContact[], existing: readonly Contact[]): {
+    fresh: ParsedVCardContact[];
+    skipped: number;
+};
+/** The sender's own vCard, and the name it is filed under. It is built from - the mailbox's name and primary address, with the phones, company and title of the user's own contact entry when they have one (never its other emails or postal addresses: a card that is sent out says only what it should). */
+export declare function ownContactCard(mailbox: Pick<Mailbox, "displayName" | "primarySmtpAddress">, own: Contact | undefined): {
+    displayName: string;
+    vcard: string;
+};

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

@@ -0,0 +1,129 @@
+import { contactToVCard } from "../../../../lib/contacts/vcard.js";
+import { splitMailAddress } from "../../../../lib/mail/mailAddress.js";
+/** The MIME types a vCard file travels as. */
+const VCARD_MIME_TYPES = new Set(["text/vcard", "text/x-vcard", "text/directory", "application/vcard"]);
+/** Whether an attachment is a vCard: by its MIME type (parameters such as `; charset=utf-8` ignored), else by a `.vcf`/`.vcard` name. */
+export function isVCardAttachment(attachment) {
+    const mimeType = (attachment.mimeType ?? "").split(";")[0].trim().toLowerCase();
+    return VCARD_MIME_TYPES.has(mimeType) || /\.(vcf|vcard)$/i.test(attachment.filename ?? "");
+}
+/** An address in the form two of them are compared by. */
+export function normalizeAddress(address) {
+    return address.trim().toLowerCase();
+}
+/** The name to show for a participant: their own when distinct from the address, else the address's local part. */
+export function participantName(participant) {
+    const { name, address } = splitMailAddress(participant);
+    if (name) {
+        return name;
+    }
+    const at = address.lastIndexOf("@");
+    return at > 0 ? address.slice(0, at) : address;
+}
+/** A display name as given name + surname: `Doe, Jane` and `Jane Doe` are both Jane Doe; a single word is only a given name, and a middle name stays with the given. */
+export function splitPersonName(displayName) {
+    const name = displayName.trim();
+    const comma = name.indexOf(",");
+    if (comma > 0) {
+        return { givenName: name.slice(comma + 1).trim() || undefined, surname: name.slice(0, comma).trim() };
+    }
+    const parts = name.split(/\s+/).filter(Boolean);
+    if (parts.length < 2) {
+        return { givenName: parts[0] };
+    }
+    return { givenName: parts.slice(0, -1).join(" "), surname: parts[parts.length - 1] };
+}
+/** The first of `contacts` with an email equal (case-insensitively) to `address`. */
+export function findContactByAddress(contacts, address) {
+    const wanted = normalizeAddress(address);
+    return contacts.find((contact) => contact.emails.some((email) => normalizeAddress(email.address) === wanted));
+}
+/** The domains (lower case) of every address of `mailboxes` - primary and aliases. */
+export function ownDomains(mailboxes) {
+    const domains = new Set();
+    for (const mailbox of mailboxes) {
+        for (const address of [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])]) {
+            const at = address.lastIndexOf("@");
+            if (at > 0) {
+                domains.add(address.slice(at + 1).trim().toLowerCase());
+            }
+        }
+    }
+    return domains;
+}
+/** Whether `address` is outside the user's own domains. An address with no domain at all is not called external. */
+export function isExternalAddress(address, domains) {
+    const at = address.lastIndexOf("@");
+    return at > 0 && !domains.has(address.slice(at + 1).trim().toLowerCase());
+}
+/** The card of `cards` that carries `address`; when none does and `orFirst` (the message's sender - a vCard a person attaches is their own), the first card. */
+export function cardForAddress(cards, address, orFirst) {
+    const wanted = normalizeAddress(address);
+    return cards.find((card) => (card.emails ?? []).some((email) => normalizeAddress(email.address) === wanted)) ?? (orFirst ? cards[0] : undefined);
+}
+/**
+ * What a new contact for `participant` holds: everything the vCard `card` says (when there is one) and always the participant's address. The
+ * name is the vCard's, else the participant's, else the address's local part; given name and surname are the vCard's `N`, else split from the name.
+ */
+export function contactInputFor(participant, card, scope) {
+    // A vCard with no name at all is parsed as "Unnamed contact": not a name worth keeping over the participant's own.
+    const cardName = card && (card.givenName || card.surname || card.displayName !== "Unnamed contact") ? card.displayName : "";
+    const displayName = cardName || participantName(participant);
+    const emails = [...(card?.emails ?? [])];
+    if (!emails.some((email) => normalizeAddress(email.address) === normalizeAddress(participant.address))) {
+        emails.push({ address: participant.address.trim(), type: "other" });
+    }
+    const names = card?.givenName || card?.surname ? { givenName: card.givenName, surname: card.surname } : splitPersonName(displayName);
+    return {
+        ...scope,
+        displayName,
+        givenName: names.givenName,
+        surname: names.surname,
+        emails,
+        phones: card?.phones ?? [],
+        addresses: card?.addresses ?? [],
+        company: card?.company,
+        jobTitle: card?.jobTitle,
+        notes: card?.notes,
+    };
+}
+/** A contact made from a vCard on its own, for "Add to address book": the card's own name and details, with the given/surname split when it lacks them. */
+export function contactInputFromCard(card, scope) {
+    const names = card.givenName || card.surname ? { givenName: card.givenName, surname: card.surname } : splitPersonName(card.displayName);
+    return { ...card, ...scope, ...names, emails: card.emails ?? [], phones: card.phones ?? [], addresses: card.addresses ?? [] };
+}
+/** The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's. */
+export function withoutDuplicates(cards, existing) {
+    const known = new Set(existing.flatMap((contact) => contact.emails.map((email) => normalizeAddress(email.address))));
+    const fresh = [];
+    for (const card of cards) {
+        const addresses = (card.emails ?? []).map((email) => normalizeAddress(email.address));
+        if (addresses.some((address) => known.has(address))) {
+            continue;
+        }
+        addresses.forEach((address) => known.add(address));
+        fresh.push(card);
+    }
+    return { fresh, skipped: cards.length - fresh.length };
+}
+/** The sender's own vCard, and the name it is filed under. It is built from - the mailbox's name and primary address, with the phones, company and title of the user's own contact entry when they have one (never its other emails or postal addresses: a card that is sent out says only what it should). */
+export function ownContactCard(mailbox, own) {
+    const displayName = own?.displayName || mailbox.displayName || participantName({ address: mailbox.primarySmtpAddress });
+    const names = own?.givenName || own?.surname ? { givenName: own.givenName, surname: own.surname } : splitPersonName(displayName);
+    const vcard = contactToVCard({
+        uid: "",
+        version: 0,
+        dateCreated: "",
+        dateModified: "",
+        mailboxUid: "",
+        folderUid: "",
+        displayName,
+        ...names,
+        emails: [{ address: mailbox.primarySmtpAddress, type: "work" }],
+        phones: own?.phones ?? [],
+        addresses: [],
+        company: own?.company,
+        jobTitle: own?.jobTitle,
+    });
+    return { displayName, vcard };
+}

package/dist/apps/shared/components/layout/AppShell.js

@@ -14,6 +14,7 @@ import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import useBranding from "../../../../lib/branding/useBranding.js";
 import { useIdleKeyTimeout } from "../../../../lib/crypto/useIdleKeyTimeout.js";
 import ComposeProvider from "../mail/compose/ComposeContext.js";
+import ContactCardProvider from "../contacts/ContactCardProvider.js";
 import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
 import BottomTabBar from "../../../../lib/components/navigation/BottomTabBar.js";
 import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
@@ -246,16 +247,16 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     const renderUserMenu = (placement) => (_jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut, 
         // An impersonating administrator acts as the impersonated user, so the console link is hidden then.
         showAdminLink: !!trusted && !impersonating, detectAdmin: !trusted && !impersonating, trustedRoles: trustedRoles, showSettingsLink: true, showNotificationSettings: true, onShowShortcuts: () => setShortcutsOpen(true), onShowNotifications: () => setHistoryOpen(true), unseenErrors: unseenErrors, placement: placement }));
-    return (_jsx(AppearanceProvider, { userUid: userUid, initial: appearance, lookUp: inFrame, children: _jsx(ShortcutProvider, { children: _jsxs(MailConnectionContext.Provider, { value: inFrame ? mail : null, children: [_jsx(GlobalShortcuts, { authServerUrl: authServerUrl, onToggleHelp: () => setShortcutsOpen((open) => !open) }), _jsx(ShortcutsDialog, { open: shortcutsOpen, onClose: () => setShortcutsOpen(false) }), _jsxs(UnlockPromptProvider, { children: [_jsx(UnlockBridge, {}), _jsx(ComposeProvider, { userUid: userUid, trusted: !!trusted && !impersonating, children: _jsxs("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: [!hideChrome && customHeader && (_jsx(FrameBrandingHeader, { parsed: header, userMenu: menuInHeader ? renderUserMenu("down") : undefined, fallbackMenu: header && !menuInHeader && !menuInFooter ? renderUserMenu("down") : undefined, appTitle: activeLabel })), impersonating && !hideChrome && (_jsxs("div", { className: "h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4", children: [_jsxs("span", { children: ["You are viewing as ", _jsx("strong", { children: userUid }), "."] }), _jsx("button", { type: "button", onClick: handleStopImpersonating, disabled: stoppingImpersonation, className: "underline hover:no-underline disabled:opacity-60", children: stoppingImpersonation ? "Returning to admin…" : "Return to admin" })] })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [!hideChrome && (_jsxs("nav", { "aria-label": "Apps", className: [
-                                                        "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center gap-1",
-                                                        // Under a custom header the rail starts with the app icons; without one its own icon is flush with the top of the window.
-                                                        customHeader ? "py-3" : "pb-3",
-                                                    ].join(" "), children: [!customHeader && (_jsx(RailIcon, { src: iconSrc })), apps.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
-                                                                "w-10 h-10 flex items-center justify-center rounded-sm",
-                                                                id === active
-                                                                    ? "bg-primary/10 text-primary-dark"
-                                                                    : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                                            ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
+    return (_jsx(AppearanceProvider, { userUid: userUid, initial: appearance, lookUp: inFrame, children: _jsx(ShortcutProvider, { children: _jsxs(MailConnectionContext.Provider, { value: inFrame ? mail : null, children: [_jsx(GlobalShortcuts, { authServerUrl: authServerUrl, onToggleHelp: () => setShortcutsOpen((open) => !open) }), _jsx(ShortcutsDialog, { open: shortcutsOpen, onClose: () => setShortcutsOpen(false) }), _jsxs(UnlockPromptProvider, { children: [_jsx(UnlockBridge, {}), _jsx(ComposeProvider, { userUid: userUid, trusted: !!trusted && !impersonating, children: _jsx(ContactCardProvider, { userUid: userUid, children: _jsxs("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: [!hideChrome && customHeader && (_jsx(FrameBrandingHeader, { parsed: header, userMenu: menuInHeader ? renderUserMenu("down") : undefined, fallbackMenu: header && !menuInHeader && !menuInFooter ? renderUserMenu("down") : undefined, appTitle: activeLabel })), impersonating && !hideChrome && (_jsxs("div", { className: "h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4", children: [_jsxs("span", { children: ["You are viewing as ", _jsx("strong", { children: userUid }), "."] }), _jsx("button", { type: "button", onClick: handleStopImpersonating, disabled: stoppingImpersonation, className: "underline hover:no-underline disabled:opacity-60", children: stoppingImpersonation ? "Returning to admin…" : "Return to admin" })] })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [!hideChrome && (_jsxs("nav", { "aria-label": "Apps", className: [
+                                                            "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center gap-1",
+                                                            // Under a custom header the rail starts with the app icons; without one its own icon is flush with the top of the window.
+                                                            customHeader ? "py-3" : "pb-3",
+                                                        ].join(" "), children: [!customHeader && (_jsx(RailIcon, { src: iconSrc })), apps.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+                                                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                                                    id === active
+                                                                        ? "bg-primary/10 text-primary-dark"
+                                                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
 }
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it

package/dist/apps/shared/components/layout/ThemeSwitch.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useContext, useId, useRef } from "react";
-import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlinePaintBrush, HiOutlineSun } from "react-icons/hi2";
 import { AppearanceContext, INERT_APPEARANCE } from "../../appearance/appearanceContext.js";
 const CHOICES = [
     { mode: "system", label: "System", hint: "System - follow this device", Icon: HiOutlineComputerDesktop },
@@ -42,7 +42,7 @@ export default function ThemeSwitch() {
             choose(target, true);
         }
     }
-    return (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border", children: [_jsx("span", { id: labelId, className: "text-sm text-text", children: "Theme" }), _jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "inline-flex rounded-sm border border-border bg-surface-alt p-0.5", children: CHOICES.map(({ mode, label, hint, Icon }, index) => {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border", children: [_jsxs("span", { id: labelId, className: "flex items-center gap-2 text-sm text-text", children: [_jsx(HiOutlinePaintBrush, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Theme"] }), _jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "inline-flex rounded-sm border border-border bg-surface-alt p-0.5", children: CHOICES.map(({ mode, label, hint, Icon }, index) => {
                     const selected = mode === current;
                     return (_jsx("button", { ref: (element) => {
                             buttons.current[index] = element;

package/dist/apps/shared/components/layout/UserMenu.d.ts

@@ -18,8 +18,7 @@ export interface UserMenuProps {
     trustedRoles?: readonly string[];
     /** Shows a "Settings" item, above "Admin"/"Sign Out" — an account-scoped surface (like "Admin"), not
      * a content-scoped one, so it lives here rather than as a 5th `AppShell` rail icon. Links straight to
-     * `/settings/auto-reply`, the only settings section that exists today; repoint this at a real
-     * `/settings` landing page once a second section (Mail Filters, Signatures) makes one worth building. */
+     * `/settings/profile`, the first settings section; repoint this at a real `/settings` landing page once one is worth building. */
     showSettingsLink?: boolean;
     /** Shows the notification controls, above "Admin Console"/"Sign Out": a "Notifications" on/off switch for every pop-up and,
      * while the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `notifications/preferences.ts`

package/dist/apps/shared/components/layout/UserMenu.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
-import { HiOutlineArrowUturnLeft, HiOutlineShieldCheck } from "react-icons/hi2";
+import { HiOutlineArrowRightOnRectangle, HiOutlineArrowUturnLeft, HiOutlineBell, HiOutlineBellAlert, HiOutlineClock, HiOutlineCog6Tooth, HiOutlineCommandLine, HiOutlineShieldCheck, HiOutlineUserCircle, } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "../../../../lib/auth/profileApi.js";
 import { listMailboxes } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -206,11 +206,11 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const accountUrl = accountUrlOf(authServerUrl);
     return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "relative flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), unseenErrors > 0 && (_jsx("span", { "data-testid": "unseen-errors-dot", "aria-hidden": "true", className: "absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full border-2 border-surface bg-danger" })), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open &&
                 anchor &&
-                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Notifications" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsxs("a", { role: "menuitem", href: accountUrl, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineUserCircle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Account"] })), showSettingsLink && (_jsxs("a", { role: "menuitem", href: SETTINGS_HREF, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCog6Tooth, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Settings"] })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineBell, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Notifications"] }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineBellAlert, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Turn on desktop notifications"] })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
                                 setOpen(false);
                                 onShowNotifications();
-                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Recent notifications" }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
+                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineClock, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Recent notifications"] }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsxs("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
                                 setOpen(false);
                                 onShowShortcuts();
-                            }, className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Keyboard shortcuts" })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _jsx("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "block w-full text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Sign Out" })] }), document.body)] }));
+                            }, className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCommandLine, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Keyboard shortcuts"] })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _jsxs("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "flex w-full items-center gap-2 text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowRightOnRectangle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Sign Out"] })] }), document.body)] }));
 }

package/dist/apps/shared/components/mail/InviteCard.js

@@ -3,13 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useId, useState } from "react";
+import React, { useId, useState } from "react";
 import { HiOutlineCalendarDays, HiOutlineCheck } from "react-icons/hi2";
 import { acceptProposal, proposeNewTime, removeMessageInvite, respondToMessageInvite, } from "../../../../lib/calendar/inviteApi.js";
 import { guestPermissionsOf } from "../../../../lib/calendar/calendarApi.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import ParticipantLink from "../contacts/ParticipantLink.js";
 import EventDescriptionView from "../calendar/EventDescriptionView.js";
 import RequestChangeForm from "../calendar/RequestChangeForm.js";
 import { VISIBILITY_LABEL, describeGuestPermissions } from "../calendar/eventFormat.js";
@@ -55,7 +56,7 @@ function attendeeSummary(attendees) {
         return undefined;
     }
     const count = `${attendees.length} ${attendees.length === 1 ? "attendee" : "attendees"}`;
-    return attendees.length <= MAX_NAMED_ATTENDEES ? `${count}: ${attendees.map((a) => a.displayName || a.address).join(", ")}` : count;
+    return attendees.length <= MAX_NAMED_ATTENDEES ? (_jsxs(_Fragment, { children: [count, ":", " ", attendees.map((attendee, index) => (_jsxs(React.Fragment, { children: [index > 0 && ", ", _jsx(ParticipantLink, { participant: attendee, children: attendee.displayName || attendee.address })] }, index)))] })) : (count);
 }
 /**
  * The calendar invitation a message carries, as Outlook and Gmail draw it: what the meeting is, when and where, who organizes it, and the buttons
@@ -120,6 +121,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }) {
     const visibility = invite.visibility && invite.visibility !== "default" ? VISIBILITY_LABEL[invite.visibility] : undefined;
     const sender = invite.reply ?? invite.attendees[0];
     const senderName = sender ? sender.displayName || sender.address : "Someone";
+    const senderNode = sender ? (_jsx(ParticipantLink, { participant: sender, className: "font-semibold", children: senderName })) : (_jsx("span", { className: "font-semibold", children: senderName }));
     const showResponses = invite.canRespond && !invite.isOrganizer;
     const conflicts = !isReply && !isCounter && method !== "CANCEL" && invite.conflicts.length > 0 ? conflictSummary(invite.conflicts) : undefined;
     const hasActions = showResponses ||
@@ -129,7 +131,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }) {
         invite.canRemove ||
         canRequest ||
         (invite.onCalendar && !!invite.calendarEventUid);
-    return (_jsxs("section", { "aria-labelledby": headingId, className: "rounded-sm border border-border bg-surface-alt px-3 py-3 flex flex-col gap-2 text-sm text-text", children: [_jsxs(Heading, { id: headingId, className: "flex items-center gap-2 text-sm font-semibold", children: [_jsx(HiOutlineCalendarDays, { size: 16, "aria-hidden": "true", className: "shrink-0" }), changeRequest ? CHANGE_REQUEST_HEADING : (HEADINGS[method] ?? "Calendar event")] }), isReply && (_jsxs("p", { className: "break-words", children: [_jsx("span", { className: "font-semibold", children: senderName }), " ", (sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded", "."] })), isCounter && !changeRequest && (_jsxs("p", { className: "break-words", children: [_jsx("span", { className: "font-semibold", children: senderName }), " proposed a new time", when ? _jsxs(_Fragment, { children: [": ", when] }) : "."] })), changeRequest && (_jsx("p", { className: "break-words", children: changeRequest.applied ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), "\u2019s change was applied."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), " requested a change."] })) })), _jsx("p", { className: "font-medium break-words", children: title }), !isReply && (_jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1", children: [when && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "When" }), _jsxs("dd", { className: "break-words", children: [when, invite.recurring && _jsx("span", { className: "text-text-muted", children: " (Repeats)" })] })] })), invite.location && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Where" }), _jsx("dd", { className: "break-words", children: invite.location })] })), hasDescription && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Description" }), _jsx("dd", { className: "break-words", children: _jsx(EventDescriptionView, { html: invite.descriptionHtml, text: invite.description }) })] })), invite.organizer && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Organizer" }), _jsx("dd", { className: "break-words", children: formatMailAddress(invite.organizer) })] })), attendees && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Attendees" }), _jsx("dd", { className: "break-words", children: attendees })] })), visibility && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Visibility" }), _jsx("dd", { className: "break-words", children: visibility })] }))] })), isReply && when && _jsx("p", { className: "text-text-muted break-words", children: when }), conflicts && (_jsxs("p", { className: "text-danger break-words", children: [_jsx("span", { className: "font-medium", children: "Conflicts with:" }), " ", conflicts] })), invite.guestPermissions && !isReply && !isCounter && method !== "CANCEL" && (_jsx("p", { className: "text-xs text-text-muted break-words", children: describeGuestPermissions(permissions) })), invite.isOrganizer && !isReply && !isCounter && _jsx("p", { className: "text-text-muted", children: "You are the organizer of this meeting." }), method === "CANCEL" && _jsx("p", { className: "font-medium text-danger", children: "This meeting was canceled." }), invite.response && !invite.isOrganizer && !isReply && !isCounter && (_jsx("p", { role: "status", className: `font-medium ${ANSWER_CLASS[invite.response]}`, children: ANSWER_TEXT[invite.response] })), isCounter && invite.response === "accepted" && !changeRequest?.applied && (_jsx("p", { role: "status", className: "font-medium text-success", children: "You accepted the proposed time." })), proposed && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your proposed time was sent to the organizer." })), requested && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your change was sent to the organizer." })), invite.outdated && _jsx("p", { className: "text-xs text-text-muted", children: "A newer version of this meeting is already on your calendar." }), hasActions && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showResponses && (_jsx("div", { role: "group", "aria-label": "Respond to this meeting", "aria-busy": busy || undefined, className: "flex flex-wrap gap-2", children: RESPONSES.map(({ response, label, failure }) => {
+    return (_jsxs("section", { "aria-labelledby": headingId, className: "rounded-sm border border-border bg-surface-alt px-3 py-3 flex flex-col gap-2 text-sm text-text", children: [_jsxs(Heading, { id: headingId, className: "flex items-center gap-2 text-sm font-semibold", children: [_jsx(HiOutlineCalendarDays, { size: 16, "aria-hidden": "true", className: "shrink-0" }), changeRequest ? CHANGE_REQUEST_HEADING : (HEADINGS[method] ?? "Calendar event")] }), isReply && (_jsxs("p", { className: "break-words", children: [senderNode, " ", (sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded", "."] })), isCounter && !changeRequest && (_jsxs("p", { className: "break-words", children: [senderNode, " proposed a new time", when ? _jsxs(_Fragment, { children: [": ", when] }) : "."] })), changeRequest && (_jsx("p", { className: "break-words", children: changeRequest.applied ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), "\u2019s change was applied."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), " requested a change."] })) })), _jsx("p", { className: "font-medium break-words", children: title }), !isReply && (_jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1", children: [when && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "When" }), _jsxs("dd", { className: "break-words", children: [when, invite.recurring && _jsx("span", { className: "text-text-muted", children: " (Repeats)" })] })] })), invite.location && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Where" }), _jsx("dd", { className: "break-words", children: invite.location })] })), hasDescription && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Description" }), _jsx("dd", { className: "break-words", children: _jsx(EventDescriptionView, { html: invite.descriptionHtml, text: invite.description }) })] })), invite.organizer && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Organizer" }), _jsx("dd", { className: "break-words", children: _jsx(ParticipantLink, { participant: invite.organizer, children: formatMailAddress(invite.organizer) }) })] })), attendees && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Attendees" }), _jsx("dd", { className: "break-words", children: attendees })] })), visibility && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Visibility" }), _jsx("dd", { className: "break-words", children: visibility })] }))] })), isReply && when && _jsx("p", { className: "text-text-muted break-words", children: when }), conflicts && (_jsxs("p", { className: "text-danger break-words", children: [_jsx("span", { className: "font-medium", children: "Conflicts with:" }), " ", conflicts] })), invite.guestPermissions && !isReply && !isCounter && method !== "CANCEL" && (_jsx("p", { className: "text-xs text-text-muted break-words", children: describeGuestPermissions(permissions) })), invite.isOrganizer && !isReply && !isCounter && _jsx("p", { className: "text-text-muted", children: "You are the organizer of this meeting." }), method === "CANCEL" && _jsx("p", { className: "font-medium text-danger", children: "This meeting was canceled." }), invite.response && !invite.isOrganizer && !isReply && !isCounter && (_jsx("p", { role: "status", className: `font-medium ${ANSWER_CLASS[invite.response]}`, children: ANSWER_TEXT[invite.response] })), isCounter && invite.response === "accepted" && !changeRequest?.applied && (_jsx("p", { role: "status", className: "font-medium text-success", children: "You accepted the proposed time." })), proposed && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your proposed time was sent to the organizer." })), requested && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your change was sent to the organizer." })), invite.outdated && _jsx("p", { className: "text-xs text-text-muted", children: "A newer version of this meeting is already on your calendar." }), hasActions && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showResponses && (_jsx("div", { role: "group", "aria-label": "Respond to this meeting", "aria-busy": busy || undefined, className: "flex flex-wrap gap-2", children: RESPONSES.map(({ response, label, failure }) => {
                             const current = invite.response === response;
                             return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", current ? "!bg-primary/10 !border-primary disabled:!opacity-100" : ""].join(" "), "aria-pressed": current, "aria-busy": pending === response || undefined, loading: pending === response, disabled: busy || current, onClick: () => void run(response, failure, () => respondToMessageInvite(messageUid, response, client)), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
                         }) })), invite.canPropose && !proposing && (_jsx(Button, { type: "button", variant: "text", disabled: busy, onClick: () => setProposing(true), children: "Propose new time" })), canRequest && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: invite.canRequestChange ? "Request a change" : "Add guests" })), invite.canAcceptProposal && invite.response !== "accepted" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-busy": pending === "acceptProposal" || undefined, loading: pending === "acceptProposal", disabled: busy, onClick: () => void run("acceptProposal", "Couldn't accept the proposed time", () => acceptProposal(messageUid, client)), children: "Accept proposal" })), invite.canAdd && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-busy": pending === "add" || undefined, loading: pending === "add", disabled: busy, 

package/dist/apps/shared/components/mail/MailAddress.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MailAddressLike } from "../../../../lib/mail/mailAddress.js";
+import type { ContactCardContext } from "../contacts/contactCardData.js";
 export interface MailAddressProps {
     /** A message's `from`, a recipient, a conversation participant. */
     recipient: MailAddressLike;
@@ -19,9 +20,11 @@ export declare const RECIPIENT_LINE_LIMIT = 3;
 /**
  * A `To`/`Cc` line of a message header: every recipient as `Name <address>` in the text itself (never hover-only), wrapping
  * onto more lines as needed. A long list shows its first `RECIPIENT_LINE_LIMIT` and folds the rest behind a button -
- * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty.
+ * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty. Each recipient opens their
+ * contact card when clicked (see `ParticipantLink`); `context` is the message they are listed on.
  */
-export declare function RecipientLine({ label, recipients }: {
+export declare function RecipientLine({ label, recipients, context }: {
     label: string;
     recipients: MailAddressLike[];
+    context?: ContactCardContext;
 }): React.JSX.Element | null;

package/dist/apps/shared/components/mail/MailAddress.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { formatMailAddress, splitMailAddress } from "../../../../lib/mail/mailAddress.js";
+import ParticipantLink from "../contacts/ParticipantLink.js";
 /**
  * A sender or recipient as one compact line for a dense row: the name, when there is one, with the real address in muted
  * type after it - `Jean-Philippe  <jp@example.com>` - or the bare address without a name. The address is never left out,
@@ -26,14 +27,15 @@ export const RECIPIENT_LINE_LIMIT = 3;
 /**
  * A `To`/`Cc` line of a message header: every recipient as `Name <address>` in the text itself (never hover-only), wrapping
  * onto more lines as needed. A long list shows its first `RECIPIENT_LINE_LIMIT` and folds the rest behind a button -
- * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty.
+ * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty. Each recipient opens their
+ * contact card when clicked (see `ParticipantLink`); `context` is the message they are listed on.
  */
-export function RecipientLine({ label, recipients }) {
+export function RecipientLine({ label, recipients, context }) {
     const [expanded, setExpanded] = useState(false);
     if (recipients.length === 0) {
         return null;
     }
     const folded = recipients.length > RECIPIENT_LINE_LIMIT;
     const shown = folded && !expanded ? recipients.slice(0, RECIPIENT_LINE_LIMIT) : recipients;
-    return (_jsxs("p", { className: "text-sm text-text-muted break-words", children: [_jsx("span", { children: label }), " ", shown.map((recipient, index) => (_jsxs(React.Fragment, { children: [index > 0 && ", ", _jsx("span", { children: formatMailAddress(recipient) })] }, index))), folded && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), className: "text-xs font-semibold text-primary-dark underline hover:no-underline", children: expanded ? "Show fewer" : `and ${recipients.length - RECIPIENT_LINE_LIMIT} more` })] }))] }));
+    return (_jsxs("p", { className: "text-sm text-text-muted break-words", children: [_jsx("span", { children: label }), " ", shown.map((recipient, index) => (_jsxs(React.Fragment, { children: [index > 0 && ", ", _jsx(ParticipantLink, { participant: recipient, context: context, children: formatMailAddress(recipient) })] }, index))), folded && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), className: "text-xs font-semibold text-primary-dark underline hover:no-underline", children: expanded ? "Show fewer" : `and ${recipients.length - RECIPIENT_LINE_LIMIT} more` })] }))] }));
 }