@rapidmx/web-client 0.25.1 → 0.27.0

package/apps/shared/components/mail/compose/RichTextEditor.tsx

@@ -2,8 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { type Editor, EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { TextStyleKit } from "@tiptap/extension-text-style";
 import TextAlign from "@tiptap/extension-text-align";
@@ -40,6 +40,8 @@ export interface RichTextEditorProps {
     appendHtml?: string;
     /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
     onAppended?: (value: string) => void;
+    /** Set to the editor while it exists (and to `null` before and after), for a caller that has to put content into the message from outside the toolbar - a picture dropped on the window. */
+    editorRef?: MutableRefObject<Editor | null>;
 }
 
 /**
@@ -73,6 +75,7 @@ export default function RichTextEditor({
     onInitialized,
     appendHtml,
     onAppended,
+    editorRef,
 }: RichTextEditorProps) {
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
@@ -119,6 +122,16 @@ export default function RichTextEditor({
         },
     });
 
+    useEffect(() => {
+        if (!editorRef) {
+            return undefined;
+        }
+        editorRef.current = editor;
+        return () => {
+            editorRef.current = null;
+        };
+    }, [editor, editorRef]);
+
     // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
     useEffect(() => {
         if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {

package/apps/shared/components/mail/compose/dropFiles.ts

@@ -0,0 +1,21 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** Picture files by name, for a file the browser gave no type to. */
+const IMAGE_EXTENSION = /\.(jpe?g|png|gif|webp|svg|avif|bmp|ico|apng)$/i;
+
+/**
+ * Whether a file dropped on the compose window goes into the message itself, at the caret, rather than onto it as an attachment: pictures do (a
+ * photo or a screenshot is meant to be seen in the text), everything else is attached. The browser's own idea of the type decides, and the file's name
+ * does when it had none.
+ */
+export function isInlineImage(file: Pick<File, "name" | "type">): boolean {
+    return file.type ? file.type.startsWith("image/") : IMAGE_EXTENSION.test(file.name);
+}
+
+/** Whether a drag carries files from outside the page (as opposed to the text or an image being dragged around inside the editor). */
+export function isFileDrag(dataTransfer: Pick<DataTransfer, "types"> | null | undefined): boolean {
+    return Array.from(dataTransfer?.types ?? []).includes("Files");
+}

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),
     }));
 }
 

package/apps/shared/plugins/pluginIcons.ts

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

package/apps/shared/plugins/pluginNav.ts

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

package/apps/shared/plugins/useResolvedRailItems.ts

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

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

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

package/apps/www/contacts/index.tsx

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

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

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

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

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

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

@@ -16,6 +16,7 @@ import { describeTimeZone, deviceTimeZone } from "../../../../lib/util/timeZone.
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
+import ParticipantLink from "../contacts/ParticipantLink.js";
 import EventDescriptionView from "./EventDescriptionView.js";
 import RequestChangeForm from "./RequestChangeForm.js";
 import { BUSY_STATUS_LABEL, RESPONSE_STATUS_LABEL, VISIBILITY_LABEL, describeGuestPermissions, describeReminder, formatStoredWhen, formatStoredWhenInZone } from "./eventFormat.js";
@@ -121,7 +122,7 @@ export default function EventDetails({ occurrence, isInvited, myResponse, isOwnA
         { response: "tentative", label: "Tentative" },
         { response: "declined", label: "Decline" },
     ];
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: occurrence.title || "(no title)" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [error && _jsx(Alert, { children: error }), _jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [!occurrence.allDay && eventZone && eventZone !== deviceTimeZone() ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: [formatStoredWhen(occurrence.startDate, occurrence.endDate, false), " \u2022 ", describeTimeZone(deviceTimeZone(), new Date(occurrence.startDate))] }), _jsxs("div", { className: "text-text-muted", children: [formatStoredWhenInZone(occurrence.startDate, occurrence.endDate, eventZone), " \u2022 ", describeTimeZone(eventZone, new Date(occurrence.startDate))] })] })) : (_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) })), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] })] }), occurrence.location && (_jsx(DetailRow, { icon: _jsx(HiOutlineMapPin, { size: 18 }), children: _jsx("div", { children: occurrence.location }) })), hasDescription && (_jsx(DetailRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 18 }), children: _jsx(EventDescriptionView, { html: occurrence.descriptionHtml, text: occurrence.description }) })), videoMeetingUid && (_jsx(DetailRow, { icon: _jsx(HiOutlineVideoCamera, { size: 18 }), children: _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !joinUrl, onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }) })), _jsxs(DetailRow, { icon: _jsx(HiOutlineUser, { size: 18 }), children: [_jsx("div", { children: organizerName || occurrence.organizer.address }), _jsxs("div", { className: "text-text-muted", children: [organizerName ? `${occurrence.organizer.address} · ` : "", "Organizer"] })] }), (guests.length > 0 || hiddenList) && (_jsxs(DetailRow, { icon: _jsx(HiOutlineUserGroup, { size: 18 }), children: [_jsx("div", { className: "font-medium mb-1", children: hiddenList ? "The organizer has hidden the guest list" : guests.length === 1 ? "1 guest" : `${guests.length} guests` }), _jsx("ul", { className: "flex flex-col gap-1", children: guests.map((guest, i) => (_jsxs("li", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("span", { className: "min-w-0 truncate", children: [guest.displayName || guest.address, ROLE_LABEL[guest.role] && _jsxs("span", { className: "text-text-muted", children: [" (", ROLE_LABEL[guest.role], ")"] })] }), _jsx("span", { className: "shrink-0 text-xs text-text-muted", children: RESPONSE_STATUS_LABEL[guest.responseStatus] })] }, i))) }), !isInvited && _jsx("div", { className: "text-xs text-text-muted mt-1", children: describeGuestPermissions(permissions) })] })), _jsxs(DetailRow, { icon: _jsx(HiOutlineBriefcase, { size: 18 }), children: [_jsx("div", { children: BUSY_STATUS_LABEL[occurrence.busyStatus] }), _jsx("div", { className: "text-text-muted", children: VISIBILITY_LABEL[visibilityOf(occurrence)] }), occurrence.autoReplyEnabled && (_jsx("div", { className: "text-text-muted", children: "Sends an automatic reply while this event is happening" }))] }), _jsx(DetailRow, { icon: _jsx(HiOutlineBell, { size: 18 }), children: _jsx("div", { children: describeReminder(occurrence.reminderMinutesBeforeStart) }) }), calendarName && (_jsxs("div", { className: "flex items-center gap-3 text-text-muted", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 h-3 ml-[3px] rounded-full shrink-0", style: { backgroundColor: calendarColor } }), _jsx("span", { className: "truncate", children: calendarName })] })), isInvited && (_jsxs("p", { className: "text-xs text-text-muted", children: ["You were invited to this event. Only the organizer can change its details", canChange || canInvite ? ", but you can ask them to." : "."] }))] }), requesting && (_jsx("div", { className: "mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: _jsx(RequestChangeForm, { subject: {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: occurrence.title || "(no title)" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [error && _jsx(Alert, { children: error }), _jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [!occurrence.allDay && eventZone && eventZone !== deviceTimeZone() ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: [formatStoredWhen(occurrence.startDate, occurrence.endDate, false), " \u2022 ", describeTimeZone(deviceTimeZone(), new Date(occurrence.startDate))] }), _jsxs("div", { className: "text-text-muted", children: [formatStoredWhenInZone(occurrence.startDate, occurrence.endDate, eventZone), " \u2022 ", describeTimeZone(eventZone, new Date(occurrence.startDate))] })] })) : (_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) })), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] })] }), occurrence.location && (_jsx(DetailRow, { icon: _jsx(HiOutlineMapPin, { size: 18 }), children: _jsx("div", { children: occurrence.location }) })), hasDescription && (_jsx(DetailRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 18 }), children: _jsx(EventDescriptionView, { html: occurrence.descriptionHtml, text: occurrence.description }) })), videoMeetingUid && (_jsx(DetailRow, { icon: _jsx(HiOutlineVideoCamera, { size: 18 }), children: _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !joinUrl, onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }) })), _jsxs(DetailRow, { icon: _jsx(HiOutlineUser, { size: 18 }), children: [_jsx("div", { children: _jsx(ParticipantLink, { participant: occurrence.organizer, children: organizerName || occurrence.organizer.address }) }), _jsxs("div", { className: "text-text-muted", children: [organizerName ? `${occurrence.organizer.address} · ` : "", "Organizer"] })] }), (guests.length > 0 || hiddenList) && (_jsxs(DetailRow, { icon: _jsx(HiOutlineUserGroup, { size: 18 }), children: [_jsx("div", { className: "font-medium mb-1", children: hiddenList ? "The organizer has hidden the guest list" : guests.length === 1 ? "1 guest" : `${guests.length} guests` }), _jsx("ul", { className: "flex flex-col gap-1", children: guests.map((guest, i) => (_jsxs("li", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("span", { className: "min-w-0 truncate", children: [_jsx(ParticipantLink, { participant: guest, children: guest.displayName || guest.address }), ROLE_LABEL[guest.role] && _jsxs("span", { className: "text-text-muted", children: [" (", ROLE_LABEL[guest.role], ")"] })] }), _jsx("span", { className: "shrink-0 text-xs text-text-muted", children: RESPONSE_STATUS_LABEL[guest.responseStatus] })] }, i))) }), !isInvited && _jsx("div", { className: "text-xs text-text-muted mt-1", children: describeGuestPermissions(permissions) })] })), _jsxs(DetailRow, { icon: _jsx(HiOutlineBriefcase, { size: 18 }), children: [_jsx("div", { children: BUSY_STATUS_LABEL[occurrence.busyStatus] }), _jsx("div", { className: "text-text-muted", children: VISIBILITY_LABEL[visibilityOf(occurrence)] }), occurrence.autoReplyEnabled && (_jsx("div", { className: "text-text-muted", children: "Sends an automatic reply while this event is happening" }))] }), _jsx(DetailRow, { icon: _jsx(HiOutlineBell, { size: 18 }), children: _jsx("div", { children: describeReminder(occurrence.reminderMinutesBeforeStart) }) }), calendarName && (_jsxs("div", { className: "flex items-center gap-3 text-text-muted", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 h-3 ml-[3px] rounded-full shrink-0", style: { backgroundColor: calendarColor } }), _jsx("span", { className: "truncate", children: calendarName })] })), isInvited && (_jsxs("p", { className: "text-xs text-text-muted", children: ["You were invited to this event. Only the organizer can change its details", canChange || canInvite ? ", but you can ask them to." : "."] }))] }), requesting && (_jsx("div", { className: "mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: _jsx(RequestChangeForm, { subject: {
                         uid: occurrence.uid,
                         title: occurrence.title,
                         location: occurrence.location,

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { type ContactCardContext } from "./contactCardData.js";
+import { type Participant } from "./participantDetails.js";
+export interface ContactCardProps {
+    participant: Participant;
+    context?: ContactCardContext;
+    onClose: () => void;
+    userUid?: string;
+}
+/**
+ * A person's contact card, as Outlook's people card: a big avatar, their name, an "External" badge when the address is outside the user's own
+ * domains, the actions (email them, copy the address, create the contact or open it), then their contact details, the last messages to or from
+ * them and the events coming up that they organize or were invited to. Each section loads on its own, with a skeleton, an empty text and an
+ * error that touches nothing else on the card.
+ *
+ * When the address is not in the user's address book the details are what is known: the name and address, and everything a vCard attached to the
+ * message they were met in says. "Create contact" stores that. The lookups are made once, when the card opens.
+ */
+export default function ContactCard({ participant, context, onClose, userUid }: ContactCardProps): React.JSX.Element;

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useContext, useEffect, useRef, useState } from "react";
+import { contactPhotoUrl, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import 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";
+import { listMailboxes } from "../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { MAILBOX_LIST_LIMIT, MailConnectionContext } from "../../mail/useMailConnection.js";
+import { notify } from "../../notifications/store.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { APP_HREFS } from "../../navigation/appHrefs.js";
+import { useCompose } from "../mail/compose/ComposeContext.js";
+import { formatInviteWhen } from "../mail/invite/inviteFormat.js";
+import { contactScope, createContactFor, findContact, loadFolders, loadParticipantCard, loadRecentMessages, loadUpcomingEvents, scopeMailboxes, } from "./contactCardData.js";
+import { contactInputFor, isExternalAddress, ownDomains, participantName } from "./participantDetails.js";
+/**
+ * One piece of the card's data. `load` is `undefined` while what it needs is still coming (it stays loading), and runs once when it is there; a
+ * failure is this section's error and nothing else's. `upstream` is the section this one needs: its error is this one's too.
+ */
+function useSection(load, upstream) {
+    const [state, setState] = useState({ status: "loading" });
+    const ready = !!load;
+    useEffect(() => {
+        if (!load) {
+            return;
+        }
+        let cancelled = false;
+        load().then((data) => !cancelled && setState({ status: "ready", data }), () => !cancelled && setState({ status: "error" }));
+        return () => {
+            cancelled = true;
+        };
+    }, [ready]);
+    return upstream?.status === "error" ? { status: "error" } : state;
+}
+const KIND_LABEL = { work: "Work", home: "Home", other: "" };
+function kindLabel(kind) {
+    return KIND_LABEL[kind];
+}
+function Detail({ label, children }) {
+    return (_jsxs("div", { className: "flex gap-3 text-sm", children: [_jsx("dt", { className: "w-24 shrink-0 text-text-muted", children: label }), _jsx("dd", { className: "min-w-0 break-words whitespace-pre-line", children: children })] }));
+}
+/** A card section: its heading, and while loading a skeleton, on failure the reason, when empty the empty text, else what `render` draws. */
+function CardSection({ title, section, empty, failure, isEmpty, render, }) {
+    return (_jsxs("section", { className: "mt-5", children: [_jsx("h3", { className: "text-sm font-bold mb-2", children: title }), section.status === "loading" ? (_jsxs("div", { role: "status", "aria-label": `Loading ${title.toLowerCase()}`, className: "flex flex-col gap-2", children: [_jsx(Skeleton, { width: "w-3/4" }), _jsx(Skeleton, { width: "w-1/2" })] })) : section.status === "error" ? (_jsx("p", { role: "alert", className: "text-sm text-danger", children: failure })) : isEmpty(section.data) ? (_jsx("p", { className: "text-sm text-text-muted", children: empty })) : (render(section.data))] }));
+}
+const ACTION_CLASS = "!w-auto !py-1 !px-3 text-xs";
+const ROW_LINK_CLASS = "block rounded-sm px-2 py-1.5 -mx-2 hover:bg-surface-alt focus-visible:outline-2 focus-visible:outline-primary";
+/**
+ * A person's contact card, as Outlook's people card: a big avatar, their name, an "External" badge when the address is outside the user's own
+ * domains, the actions (email them, copy the address, create the contact or open it), then their contact details, the last messages to or from
+ * them and the events coming up that they organize or were invited to. Each section loads on its own, with a skeleton, an empty text and an
+ * error that touches nothing else on the card.
+ *
+ * When the address is not in the user's address book the details are what is known: the name and address, and everything a vCard attached to the
+ * message they were met in says. "Create contact" stores that. The lookups are made once, when the card opens.
+ */
+export default function ContactCard({ participant, context = {}, onClose, userUid }) {
+    const client = useApiClient();
+    const { openCompose } = useCompose();
+    const connection = useContext(MailConnectionContext);
+    const [listed, setListed] = useState({ status: "loading" });
+    const [created, setCreated] = useState();
+    const [creating, setCreating] = useState(false);
+    // The contact as last changed from this card (starred or unstarred), which is newer than the one looked up.
+    const [changed, setChanged] = useState();
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    // The mailboxes come from the app frame's connection when there is one; otherwise (a page rendered outside it) they are asked for.
+    useEffect(() => {
+        if (connection) {
+            return;
+        }
+        listMailboxes({ limit: MAILBOX_LIST_LIMIT }, client).then((data) => mounted.current && setListed({ status: "ready", data }), () => mounted.current && setListed({ status: "error" }));
+    }, []);
+    const mailboxes = connection
+        ? connection.status === "ready"
+            ? { status: "ready", data: connection.mailboxes }
+            : connection.status === "error"
+                ? { status: "error" }
+                : { status: "loading" }
+        : listed;
+    const scope = mailboxes.status === "ready" ? scopeMailboxes(mailboxes.data, userUid, context.message) : undefined;
+    const now = useRef(new Date());
+    const folders = useSection(scope && (() => loadFolders(scope, client)), mailboxes);
+    const contact = useSection(folders.status === "ready" ? () => findContact(folders.data, participant.address, client) : undefined, folders);
+    const messages = useSection(scope && (() => loadRecentMessages(scope, participant.address, client)), mailboxes);
+    const events = useSection(folders.status === "ready" ? () => loadUpcomingEvents(folders.data, participant.address, now.current, client) : undefined, folders);
+    const card = useSection(() => loadParticipantCard(participant, context, client));
+    const name = participantName(participant);
+    const stored = 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: "" });
+    // What "Create contact" needs, once it is all there.
+    const createWith = folders.status === "ready" && mailboxes.status === "ready" && card.status === "ready"
+        ? { folders: folders.data, mailboxes: mailboxes.data, card: card.data }
+        : undefined;
+    async function handleCreate({ folders: folderList, mailboxes: mailboxList, card: parsed }) {
+        setCreating(true);
+        try {
+            const target = contactScope(mailboxList, folderList, userUid, context.message);
+            const made = await createContactFor(participant, parsed, target, client);
+            clearPinnedSignerCache();
+            notify({ kind: "success", title: "Contact created", message: `${made.displayName} was added to your contacts.` });
+            if (mounted.current) {
+                setCreated(made);
+            }
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't create this contact");
+        }
+        finally {
+            if (mounted.current) {
+                setCreating(false);
+            }
+        }
+    }
+    async function handleToggleFavorite(current) {
+        try {
+            const next = await setContactFavorite(current, !current.favorite, client);
+            if (mounted.current) {
+                setChanged(next);
+            }
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't update this contact");
+        }
+    }
+    function handleEmail() {
+        openCompose({ to: formatMailAddress(participant) });
+        onClose();
+    }
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: name, children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ContactAvatar, { displayName: name, size: 72, photoUrl: stored && contactPhotoUrl(stored), email: participant.address }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm text-text-muted break-words", children: [participant.address, _jsx(CopyIconButton, { value: participant.address, label: "Copy address", className: "ml-1" })] }), external && (_jsx("span", { className: "inline-block mt-1 text-xs font-semibold py-0.5 px-2 rounded-pill bg-warning/15 text-text", children: "External" })), (known.jobTitle || known.company) && (_jsx("p", { className: "mt-1 text-sm break-words", children: [known.jobTitle, known.company].filter(Boolean).join(", ") }))] }), stored && _jsx(FavoriteStarButton, { favorite: !!stored.favorite, onToggle: () => void handleToggleFavorite(stored), className: "shrink-0 self-start" })] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, onClick: handleEmail, children: [_jsx(HiOutlineEnvelope, { "aria-hidden": "true", className: "size-4" }), "Email"] }), stored ? (_jsx("a", { href: `${APP_HREFS.contacts}/${encodeURIComponent(stored.uid)}`, onClick: onClose, className: "inline-flex items-center text-xs font-semibold py-1 px-3 rounded-sm border border-border hover:border-accent hover:text-accent-dark focus-visible:outline-2 focus-visible:outline-primary", children: "Open contact" })) : (_jsxs(Button, { type: "button", variant: "secondary", className: `${ACTION_CLASS} inline-flex items-center gap-1.5`, disabled: !createWith || creating, loading: creating, onClick: () => void handleCreate(createWith), children: [_jsx(HiOutlineUserPlus, { "aria-hidden": "true", className: "size-4" }), "Add to contacts"] }))] }), _jsxs("section", { className: "mt-5", children: [_jsx("h3", { className: "text-sm font-bold mb-2", children: "Contact" }), !stored && contact.status === "loading" && _jsx(Skeleton, { width: "w-1/2", className: "mb-2" }), !stored && contact.status === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger mb-2", children: "Couldn\u2019t check your address book." })), !stored && contact.status === "ready" && _jsx("p", { className: "text-sm text-text-muted mb-2", children: "Not in your address book." }), _jsxs("dl", { className: "flex flex-col gap-1.5", children: [known.emails.map((email) => (_jsxs(Detail, { label: ["Email", kindLabel(email.type)].filter(Boolean).join(" "), children: [email.address, _jsx(CopyIconButton, { value: email.address, label: "Copy email address", className: "ml-1" })] }, `e:${email.address}`))), known.phones.map((phone) => (_jsx(Detail, { label: ["Phone", kindLabel(phone.type)].filter(Boolean).join(" "), children: phone.phoneNumber }, `p:${phone.phoneNumber}`))), known.company && _jsx(Detail, { label: "Company", children: known.company }), known.jobTitle && _jsx(Detail, { label: "Job title", children: known.jobTitle }), known.addresses.map((address, index) => (_jsx(Detail, { label: ["Address", kindLabel(address.type)].filter(Boolean).join(" "), children: [address.street, [address.postalCode, address.city].filter(Boolean).join(" "), address.state, address.country].filter(Boolean).join("\n") }, `a:${index}`))), known.notes && _jsx(Detail, { label: "Notes", children: known.notes })] })] }), _jsx(CardSection, { title: "Recent messages", section: messages, empty: "No recent messages", failure: "Couldn't load recent messages.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((message) => (_jsx("li", { children: _jsxs("a", { href: `/messages/${encodeURIComponent(message.uid)}`, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsxs("span", { className: "flex items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "font-medium truncate", children: message.subject || "(No subject)" }), _jsx("time", { dateTime: message.receivedDate, className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsx("span", { className: "block text-xs text-text-muted truncate", children: message.bodyPreview })] }) }, message.uid))) })) }), _jsx(CardSection, { title: "Upcoming events", section: events, empty: "No upcoming events", failure: "Couldn't load upcoming events.", isEmpty: (list) => list.length === 0, render: (list) => (_jsx("ul", { className: "flex flex-col", children: list.map((event) => (_jsx("li", { children: _jsxs("a", { href: APP_HREFS.calendar, onClick: onClose, className: ROW_LINK_CLASS, children: [_jsx("span", { className: "block text-sm font-medium truncate", children: event.title }), _jsx("span", { className: "block text-xs text-text-muted", children: formatInviteWhen(event) })] }) }, event.occurrenceKey))) })) })] }));
+}

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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from "react";
+import { type Message } from "../../../../lib/mail/mailApi.js";
+import { type AddCardsResult, type ContactCardContext } from "./contactCardData.js";
+import type { Participant } from "./participantDetails.js";
+export interface ContactCardValue {
+    /** Opens the contact card of `participant`; `context` is the message they were met in, when there is one (its vCard attachments and mailbox). */
+    show: (participant: Participant, context?: ContactCardContext) => void;
+    /**
+     * Adds every card of a vCard file's `text` to the user's address book - in the default contacts folder of `message`'s mailbox when it is one of
+     * theirs, else of their primary mailbox - skipping the ones whose email is already a contact's. Rejects if a card cannot be stored (an
+     * `AddCardsError`) or the folders cannot be read. Does nothing useful outside a provider (`available` is `false`).
+     */
+    addVCards: (text: string, message?: Message) => Promise<AddCardsResult>;
+    /** `false` outside a `ContactCardProvider`, where `show()` does nothing: a caller then draws plain text instead of a button. */
+    available: boolean;
+}
+/** Shows a person's contact card from anywhere inside `AppShell` - see `ContactCard`. */
+export declare function useContactCard(): ContactCardValue;
+/**
+ * Owns the one contact card that can be open. Mounted once in `AppShell` (inside the compose provider, whose windows the card's "Email" opens), so
+ * a participant is clickable in every app. The card is a modal: focus goes into it, and back to the participant that was clicked when it closes.
+ */
+export default function ContactCardProvider({ children, userUid }: PropsWithChildren<{
+    userUid?: string;
+}>): React.JSX.Element;