@rapidmx/web-client 0.25.1 → 0.26.0

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

@@ -64,6 +64,10 @@ import { loadOriginalMessage, prefetchOriginalMessage } from "./compose/quotedBo
 import { formatRecipient } from "./compose/recipients.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress, { RecipientLine } from "./MailAddress.js";
+import ParticipantLink from "../contacts/ParticipantLink.js";
+import { fetchVCardText } from "../contacts/contactCardData.js";
+import { isVCardAttachment } from "../contacts/participantDetails.js";
+import VCardAttachmentChip from "./VCardAttachmentChip.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
 import { SHORTCUTS, ShortcutDef } from "../../keyboard/keymap.js";
@@ -186,6 +190,16 @@ export function formatFingerprint(fingerprint: string): string {
     return compact.match(/.{1,4}/g)?.join(" ") ?? compact;
 }
 
+/** Saves the file at `url` under `filename`: the browser is handed the link as a download. */
+function downloadFromUrl(url: string, filename: string): void {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+}
+
 /** Saves one attachment recovered from inside a signed/encrypted entity. Always handed to the browser as an
  * opaque download (`application/octet-stream`), never rendered in this origin. */
 function downloadMimeAttachment(attachment: MimeAttachment): void {
@@ -1030,6 +1044,8 @@ function MessageDetailContent({
     const senderNameCheck = checkSenderName(senderName, senderAddress);
     // Always `Name <address>` (or the bare address): a name alone hides who a message is really from.
     const senderLabel = formatMailAddress({ displayName: senderName, address: senderAddress });
+    // What the contact card of anyone named in this message is given: the message, for its mailbox and any vCard it carries.
+    const cardContext = { message, attachments };
     // Offered only for a valid signature from a certificate nobody pinned for this sender - never to replace a pin.
     // A recorded signing-key conflict for this sender is resolved from the contact, never by trusting another key.
     const pendingConflict = senderUnpinned && senderKeyState?.conflict !== undefined;
@@ -1227,7 +1243,14 @@ function MessageDetailContent({
         <CardShell unread={cardUnread}>
             {/* Header row: who it is from, when, and what can be done with it. Wraps: on a phone the actions drop under the sender. */}
             <div className={["flex flex-wrap items-start gap-x-3 gap-y-1 px-4 pt-3 pb-2", cardUnread ? "bg-primary/[0.07]" : ""].join(" ")}>
-                <SenderAvatar from={senderRecipient} />
+                {threadHeader ? (
+                    // The sender line of a thread's message is the button that collapses it, so its contact card is opened from the avatar beside it.
+                    <ParticipantLink participant={{ address: senderAddress, displayName: senderName }} context={cardContext} label={`Contact card for ${senderLabel}`}>
+                        <SenderAvatar from={senderRecipient} />
+                    </ParticipantLink>
+                ) : (
+                    <SenderAvatar from={senderRecipient} />
+                )}
                 <div className="flex-1 min-w-[12rem]">
                     <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                         {threadHeader ? (
@@ -1250,7 +1273,10 @@ function MessageDetailContent({
                             </h2>
                         ) : (
                             <p className="text-sm break-words min-w-0">
-                                From <span className="font-semibold text-text">{senderLabel}</span>
+                                From{" "}
+                                <ParticipantLink participant={{ address: senderAddress, displayName: senderName }} context={cardContext} className="font-semibold text-text">
+                                    {senderLabel}
+                                </ParticipantLink>
                             </p>
                         )}
                         {security && <SecurityIndicator security={security} />}
@@ -1262,9 +1288,9 @@ function MessageDetailContent({
                         </p>
                     )}
                     {/* Every recipient with their address, grouped as the sender addressed them; a long list folds. */}
-                    <RecipientLine label="To" recipients={message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")} />
-                    <RecipientLine label="Cc" recipients={message.recipients.filter((r) => r.type === "cc")} />
-                    <RecipientLine label="Bcc" recipients={message.recipients.filter((r) => r.type === "bcc")} />
+                    <RecipientLine label="To" recipients={message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")} context={cardContext} />
+                    <RecipientLine label="Cc" recipients={message.recipients.filter((r) => r.type === "cc")} context={cardContext} />
+                    <RecipientLine label="Bcc" recipients={message.recipients.filter((r) => r.type === "bcc")} context={cardContext} />
                 </div>
                 <div className="ml-auto flex flex-wrap items-center justify-end gap-1">
                     <time dateTime={message.receivedDate} className={["text-xs mr-1", dateClass(cardUnread)].join(" ")}>
@@ -1582,13 +1608,22 @@ function MessageDetailContent({
                           <ul className="flex flex-wrap gap-2">
                               {innerAttachments.map((attachment, index) => (
                                   <li key={`${index}:${attachment.filename ?? ""}`}>
-                                      <button
-                                          type="button"
-                                          onClick={() => downloadMimeAttachment(attachment)}
-                                          className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark"
-                                      >
-                                          {attachment.filename ?? `Unnamed ${attachment.contentType} attachment`}
-                                      </button>
+                                      {isVCardAttachment({ filename: attachment.filename, mimeType: attachment.contentType }) ? (
+                                          <VCardAttachmentChip
+                                              label={attachment.filename ?? `Unnamed ${attachment.contentType} attachment`}
+                                              message={message}
+                                              loadText={async () => new TextDecoder().decode(attachment.decode() ?? new Uint8Array(0))}
+                                              onDownload={() => downloadMimeAttachment(attachment)}
+                                          />
+                                      ) : (
+                                          <button
+                                              type="button"
+                                              onClick={() => downloadMimeAttachment(attachment)}
+                                              className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark"
+                                          >
+                                              {attachment.filename ?? `Unnamed ${attachment.contentType} attachment`}
+                                          </button>
+                                      )}
                                   </li>
                               ))}
                           </ul>
@@ -1597,12 +1632,22 @@ function MessageDetailContent({
                           <ul className="flex flex-wrap gap-2">
                               {listedAttachments.map((attachment) => (
                                   <li key={attachment.uid}>
-                                      <a
-                                          href={attachmentContentUrl(attachment.uid)}
-                                          className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark"
-                                      >
-                                          {attachment.filename} ({formatBytes(attachment.sizeBytes)})
-                                      </a>
+                                      {isVCardAttachment(attachment) ? (
+                                          // A contact card opens a menu (add it to the address book, or download it) instead of downloading at once.
+                                          <VCardAttachmentChip
+                                              label={`${attachment.filename} (${formatBytes(attachment.sizeBytes)})`}
+                                              message={message}
+                                              loadText={() => fetchVCardText(attachment.uid)}
+                                              onDownload={() => downloadFromUrl(attachmentContentUrl(attachment.uid), attachment.filename)}
+                                          />
+                                      ) : (
+                                          <a
+                                              href={attachmentContentUrl(attachment.uid)}
+                                              className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark"
+                                          >
+                                              {attachment.filename} ({formatBytes(attachment.sizeBytes)})
+                                          </a>
+                                      )}
                                   </li>
                               ))}
                           </ul>

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

@@ -0,0 +1,85 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { Message } from "../../../../lib/mail/mailApi.js";
+import { notify } from "../../notifications/store.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { useContactCard } from "../contacts/ContactCardProvider.js";
+import { AddCardsError } from "../contacts/contactCardData.js";
+import MenuButton from "./MenuButton.js";
+
+const CHIP_CLASS = "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark";
+
+/** "1 contact", "3 contacts". */
+function contacts(count: number): string {
+    return `${count} ${count === 1 ? "contact" : "contacts"}`;
+}
+
+/** What adding a vCard file ended with, for the pop-up that says so. */
+function addedMessage(added: number, skipped: number): string {
+    if (added + skipped === 0) {
+        return "This file has no contacts in it.";
+    }
+    const already = skipped === 0 ? "" : `${added === 0 ? "" : " "}${contacts(skipped)} ${skipped === 1 ? "was" : "were"} already in your address book.`;
+    return `${added === 0 ? "" : `${contacts(added)} added to your address book.`}${already}`;
+}
+
+export interface VCardAttachmentChipProps {
+    /** The file's name, as the chip shows it (with the size, when known). */
+    label: string;
+    /** The message the file is attached to: a new contact goes to its mailbox's address book when that is the user's own. */
+    message: Message;
+    /** The vCard file's text. */
+    loadText: () => Promise<string>;
+    /** Saves the file to the device. */
+    onDownload: () => void;
+}
+
+/**
+ * A vCard attachment (`.vcf`, `text/vcard`) in a message's attachment list. Clicking it opens a menu - "Add to address book" (every card in the file
+ * becomes a contact, except the ones already there) and "Download" - instead of downloading at once. Outside a `ContactCardProvider` there is no
+ * address book to add to, and the chip is the plain download it always was.
+ */
+export default function VCardAttachmentChip({ label, message, loadText, onDownload }: VCardAttachmentChipProps) {
+    const { addVCards, available } = useContactCard();
+
+    async function handleAdd() {
+        try {
+            const { added, skipped } = await addVCards(await loadText(), message);
+            notify({
+                kind: added + skipped === 0 ? "warning" : "success",
+                title: added + skipped === 0 ? "No contacts found" : "Address book updated",
+                message: addedMessage(added, skipped),
+            });
+        } catch (err) {
+            const stored = err instanceof AddCardsError && err.added > 0 ? ` ${contacts(err.added)} could be added before it failed.` : "";
+            notifyApiError(err, `Couldn't add to your address book.${stored}`);
+        }
+    }
+
+    if (!available) {
+        return (
+            <button type="button" onClick={onDownload} className={CHIP_CLASS}>
+                {label}
+            </button>
+        );
+    }
+    return (
+        <MenuButton
+            label={label}
+            aria-label={`${label}, contact card actions`}
+            className={CHIP_CLASS}
+            sections={[
+                {
+                    key: "vcard",
+                    items: [
+                        { key: "add", label: "Add to address book", onSelect: () => void handleAdd() },
+                        { key: "download", label: "Download", onSelect: onDownload },
+                    ],
+                },
+            ]}
+        />
+    );
+}

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

@@ -2,11 +2,13 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, DragEvent, useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
 import {
     HiOutlineArrowsPointingIn,
     HiOutlineArrowsPointingOut,
     HiOutlineChevronDown,
+    HiOutlineIdentification,
     HiOutlineLockClosed,
     HiOutlineMinus,
     HiOutlinePaperClip,
@@ -37,8 +39,10 @@ import { resolveRecipientEncryption, RecipientEncryptionStatus } from "../../../
 import { getUnlockedKeys, subscribeKeySession } from "../../../../../lib/crypto/keySession.js";
 import { EncryptionPolicy, findActivePublicKey, getEncryptionPolicy, lookupKeys } from "../../../../../lib/crypto/keyvaultApi.js";
 import { useUnlockPrompt } from "../../layout/UnlockPromptProvider.js";
+import { buildOwnCardFile } from "../../contacts/contactCardData.js";
 import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import { notify } from "../../../notifications/store.js";
+import { isFileDrag, isInlineImage } from "./dropFiles.js";
 import { evaluateEncryptionRequirement } from "./encryptionRequirement.js";
 import { decideSend, SendBlock } from "../../../mail/outbox/sendDecision.js";
 import { SendRequest, sendDecisionInput, startSend } from "../../../mail/outbox/sendJob.js";
@@ -250,7 +254,14 @@ export default function ComposeWindow({
     const [html, setHtml] = useState(resume?.html ?? "");
     const [contentReady, setContentReady] = useState(!!resume);
     const [attachments, setAttachments] = useState<Attachment[]>(resume?.attachments ?? []);
+    // The sender's own contact card is on the message (or on its way): "Attach my contact card" then has nothing more to do.
+    const [ownCardAttached, setOwnCardAttached] = useState(false);
     const [attachError, setAttachError] = useState<string | null>(null);
+    // The message editor, for putting a dropped picture into the text; and whether files are being dragged over the window right now.
+    const editorRef = useRef<Editor | null>(null);
+    const [dropActive, setDropActive] = useState(false);
+    // Dragging over a child fires leave on the parent, then enter on the child: only when the count is back to zero has the drag left the window.
+    const dragDepthRef = useRef(0);
     // A problem with the message as composed (no recipient, an attachment that can't be signed): shown here, and the window stays open. What
     // goes wrong after Send was accepted is a pop-up instead (see `sendJob.ts`).
     const [sendError, setSendError] = useState<string | null>(null);
@@ -761,6 +772,12 @@ export default function ComposeWindow({
         const files = Array.from(e.target.files ?? []);
         e.target.value = "";
         setAttachError(null);
+        await attachFiles(files);
+    }
+
+    /** Uploads each of `files` as an attachment on the draft, one after another, saying why any that could not be. Resolves whether they all were. */
+    async function attachFiles(files: File[]): Promise<boolean> {
+        let allAttached = true;
         uploadStarted();
         try {
             for (const file of files) {
@@ -770,12 +787,81 @@ export default function ComposeWindow({
                     setAttachments((prev) => [...prev, attachment]);
                     void refreshDraftVersion(draft!.uid);
                 } catch (err) {
+                    allAttached = false;
                     setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload attachment.");
                 }
             }
         } finally {
             uploadFinished();
         }
+        return allAttached;
+    }
+
+    /** Attaches the sender's own vCard ("Attach my contact card"), once: the button is off from the click on, and back on if the upload failed. */
+    async function handleAttachOwnCard() {
+        setOwnCardAttached(true);
+        setAttachError(null);
+        const file = await buildOwnCardFile(mailbox as Mailbox, mailboxes, userUid, client);
+        if (!(await attachFiles([file]))) {
+            setOwnCardAttached(false);
+        }
+    }
+
+    /**
+     * Files dropped on the window: a picture goes into the message, at the caret, the way "Insert image" would put it; anything else is attached,
+     * as "Attach files" would. Done in the order they were dropped.
+     */
+    async function handleDroppedFiles(files: File[]) {
+        if (!draft) {
+            setAttachError("Please wait for the draft to finish loading before adding files.");
+            return;
+        }
+        setAttachError(null);
+        const toAttach: File[] = [];
+        for (const file of files) {
+            if (!isInlineImage(file)) {
+                toAttach.push(file);
+                continue;
+            }
+            const url = await handleUploadImage(file);
+            if (url) {
+                editorRef.current?.chain().focus().setImage({ src: url, alt: file.name }).run();
+            }
+        }
+        await attachFiles(toAttach);
+    }
+
+    function handleDragEnter(e: DragEvent) {
+        if (isFileDrag(e.dataTransfer)) {
+            dragDepthRef.current += 1;
+            setDropActive(true);
+        }
+    }
+
+    function handleDragOver(e: DragEvent) {
+        if (isFileDrag(e.dataTransfer)) {
+            // What makes this a place a file may be dropped (otherwise the browser opens it instead).
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+        }
+    }
+
+    function handleDragLeave(e: DragEvent) {
+        if (isFileDrag(e.dataTransfer)) {
+            dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+            if (dragDepthRef.current === 0) {
+                setDropActive(false);
+            }
+        }
+    }
+
+    function handleDrop(e: DragEvent) {
+        if (isFileDrag(e.dataTransfer)) {
+            e.preventDefault();
+            dragDepthRef.current = 0;
+            setDropActive(false);
+            void handleDroppedFiles(Array.from(e.dataTransfer.files));
+        }
     }
 
     /**
@@ -1372,6 +1458,10 @@ export default function ComposeWindow({
             role="dialog"
             data-shortcut-scope="compose"
             aria-labelledby={titleId}
+            onDragEnter={handleDragEnter}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
             style={!isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined}
             className={[
                 "shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
@@ -1382,6 +1472,15 @@ export default function ComposeWindow({
                     : ["relative border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
             ].join(" ")}
         >
+            {dropActive && (
+                <div
+                    data-drop-overlay=""
+                    className="pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-primary bg-primary/10 text-center text-primary-dark"
+                >
+                    <span className="text-base font-semibold">Drop files to attach them</span>
+                    <span className="text-sm">Pictures go into the message where the cursor is</span>
+                </div>
+            )}
             {!isMobile && (
                 <>
                     <div
@@ -1590,6 +1689,7 @@ export default function ComposeWindow({
                             onUploadImage={handleUploadImage}
                             autoFocusStart={focusBodyOnMount}
                             onInitialized={handleEditorInitialized}
+                            editorRef={editorRef}
                         />
                     )}
                 </div>
@@ -1685,6 +1785,17 @@ export default function ComposeWindow({
                         <HiOutlinePaperClip size={18} />
                         <input type="file" multiple disabled={!draft} onChange={handleFilesSelected} className="sr-only" />
                     </label>
+                    <button
+                        type="button"
+                        aria-label="Attach my contact card"
+                        title={ownCardAttached ? "Your contact card is attached" : "Attach my contact card"}
+                        aria-pressed={ownCardAttached}
+                        disabled={!draft || !mailbox || ownCardAttached}
+                        onClick={() => void handleAttachOwnCard()}
+                        className="w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed"
+                    >
+                        <HiOutlineIdentification size={18} />
+                    </button>
 
                     <span role="status" aria-live="polite" className="ml-auto text-xs text-text-muted">
                         {waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus]}

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

@@ -24,6 +24,7 @@ const KIND_LABELS: Record<RecipientSuggestionKind, string> = {
     room: "Room",
     equipment: "Equipment",
     list: "Group",
+    correspondent: "Recent",
 };
 
 export interface RecipientInputProps {

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/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;