@rapidmx/web-client 0.25.1 → 0.27.0

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

@@ -9,7 +9,6 @@ import {
     HiOutlineCalendarDays,
     HiOutlineClipboardDocumentList,
     HiOutlineEnvelope,
-    HiOutlinePuzzlePiece,
     HiOutlineUsers,
 } from "react-icons/hi2";
 import { useRouter } from "@rapidrest/react/client";
@@ -20,6 +19,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, { NavItem } from "../../../../lib/components/navigation/BottomTabBar.js";
 import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
@@ -33,7 +33,9 @@ import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localInde
 import { authApiFetch, setApiUnauthorizedObserver } from "../../../../lib/util/api.js";
 import { destroyUnlockedKeys } from "../../../../lib/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { pluginIcon } from "../../plugins/pluginIcons.js";
 import { mergePluginNavItems, PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
+import { type ResolvedRailLinks, useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
 import { useInAppFrame } from "../../navigation/frameContext.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
 import { useNavigate } from "../../navigation/index.js";
@@ -130,12 +132,16 @@ export const APPS: AppDef[] = [
  * core `active` value. */
 const RESERVED_APP_IDS = ["settings"];
 
-/** `APPS` followed by the plugins' `appRail` items (generic icon), core ids winning - see `mergePluginNavItems`. */
-export function appRailItems(pluginNav?: PluginNav): NavItem[] {
+/** `APPS` followed by the plugins' `appRail` items (their manifest `icon`, or a generic one), core ids winning - see `mergePluginNavItems`. */
+export function appRailItems(pluginNav?: PluginNav, resolved: ResolvedRailLinks = {}): NavItem[] {
+    // An entry worked out per user (`resolveFrom`) is there only for a user it was answered for, and links where the answer said; the others are as declared.
+    const shown = (pluginNav?.appRail ?? [])
+        .filter((item) => !item.resolveFrom || resolved[item.id] !== undefined)
+        .map((item) => (item.resolveFrom ? { ...item, href: resolved[item.id] } : item));
     return mergePluginNavItems<NavItem>(
         APPS,
-        pluginNav?.appRail,
-        ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }),
+        shown,
+        ({ id, href, label, icon }) => ({ id, href, label, icon: pluginIcon(icon) }),
         RESERVED_APP_IDS,
     );
 }
@@ -319,11 +325,14 @@ export function AppChrome({
     // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
     useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
 
+    // Plugin rail entries that depend on the user (the meet plugin's personal room) are asked for once they are signed in.
+    const resolvedRail = useResolvedRailItems(pluginNav?.appRail, userUid);
+
     if (!userUid) {
         return <div className="min-h-screen" />;
     }
 
-    const apps = appRailItems(pluginNav);
+    const apps = appRailItems(pluginNav, resolvedRail);
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
     // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the
@@ -366,6 +375,8 @@ export function AppChrome({
             {/* An impersonating admin acts with the impersonated user's access, so their own trusted role
                 mustn't skip the per-mailbox checks. */}
             <ComposeProvider userUid={userUid} trusted={!!trusted && !impersonating}>
+            {/* Inside the compose provider: the contact card's Email action opens a compose window. */}
+            <ContactCardProvider userUid={userUid}>
             <div className="rr-frame-bg min-h-screen flex flex-col">
                 {!hideChrome && customHeader && (
                     <FrameBrandingHeader
@@ -444,6 +455,7 @@ export function AppChrome({
                 </div>
                 {!hideChrome && <FrameBrandingFooter parsed={footer} userMenu={menuInFooter ? renderUserMenu("up") : undefined} appTitle={activeLabel} />}
             </div>
+            </ContactCardProvider>
             </ComposeProvider>
         </UnlockPromptProvider>
         <NotificationHistoryDialog open={historyOpen} onClose={() => setHistoryOpen(false)} />

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

@@ -18,6 +18,7 @@ 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";
@@ -70,12 +71,24 @@ const MAX_NAMED_ATTENDEES = 5;
 /** What the card is doing for the reader right now: an answer being sent, an add/remove, a proposal, an accepted proposal. */
 type Pending = InviteResponse | "add" | "remove" | "propose" | "acceptProposal";
 
-function attendeeSummary(attendees: InviteParticipant[]): string | undefined {
+function attendeeSummary(attendees: InviteParticipant[]): React.ReactNode {
     if (attendees.length === 0) {
         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 ? (
+        <>
+            {count}:{" "}
+            {attendees.map((attendee, index) => (
+                <React.Fragment key={index}>
+                    {index > 0 && ", "}
+                    <ParticipantLink participant={attendee}>{attendee.displayName || attendee.address}</ParticipantLink>
+                </React.Fragment>
+            ))}
+        </>
+    ) : (
+        count
+    );
 }
 
 export interface InviteCardProps {
@@ -150,6 +163,13 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
     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 ? (
+        <ParticipantLink participant={sender} className="font-semibold">
+            {senderName}
+        </ParticipantLink>
+    ) : (
+        <span className="font-semibold">{senderName}</span>
+    );
     const showResponses = invite.canRespond && !invite.isOrganizer;
     const conflicts = !isReply && !isCounter && method !== "CANCEL" && invite.conflicts.length > 0 ? conflictSummary(invite.conflicts) : undefined;
     const hasActions =
@@ -170,12 +190,12 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
             {isReply && (
                 // Someone answering the reader's own invitation: a line of news, nothing to do.
                 <p className="break-words">
-                    <span className="font-semibold">{senderName}</span> {(sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded"}.
+                    {senderNode} {(sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded"}.
                 </p>
             )}
             {isCounter && !changeRequest && (
                 <p className="break-words">
-                    <span className="font-semibold">{senderName}</span> proposed a new time{when ? <>: {when}</> : "."}
+                    {senderNode} proposed a new time{when ? <>: {when}</> : "."}
                 </p>
             )}
             {changeRequest && (
@@ -220,7 +240,9 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
                     {invite.organizer && !isCounter && (
                         <>
                             <dt className="text-text-muted">Organizer</dt>
-                            <dd className="break-words">{formatMailAddress(invite.organizer)}</dd>
+                            <dd className="break-words">
+                                <ParticipantLink participant={invite.organizer}>{formatMailAddress(invite.organizer)}</ParticipantLink>
+                            </dd>
                         </>
                     )}
                     {attendees && (!isCounter || !!changeRequest) && (

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

@@ -4,6 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { MailAddressLike, formatMailAddress, splitMailAddress } from "../../../../lib/mail/mailAddress.js";
+import type { ContactCardContext } from "../contacts/contactCardData.js";
+import ParticipantLink from "../contacts/ParticipantLink.js";
 
 export interface MailAddressProps {
     /** A message's `from`, a recipient, a conversation participant. */
@@ -52,9 +54,10 @@ 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 }: { label: string; recipients: MailAddressLike[] }) {
+export function RecipientLine({ label, recipients, context }: { label: string; recipients: MailAddressLike[]; context?: ContactCardContext }) {
     const [expanded, setExpanded] = useState(false);
     if (recipients.length === 0) {
         return null;
@@ -67,7 +70,9 @@ export function RecipientLine({ label, recipients }: { label: string; recipients
             {shown.map((recipient, index) => (
                 <React.Fragment key={index}>
                     {index > 0 && ", "}
-                    <span>{formatMailAddress(recipient)}</span>
+                    <ParticipantLink participant={recipient} context={context}>
+                        {formatMailAddress(recipient)}
+                    </ParticipantLink>
                 </React.Fragment>
             ))}
             {folded && (

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;
@@ -1231,26 +1247,36 @@ function MessageDetailContent({
                 <div className="flex-1 min-w-[12rem]">
                     <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                         {threadHeader ? (
-                            // The sender line of a message in a thread is the button that collapses it again.
-                            <h2 className="min-w-0 flex-1" style={BODY_FONT_STYLE}>
+                            // The sender line of a message in a thread collapses it again. A button cannot hold another, so the collapse button is laid
+                            // under the line (it fills the heading) and the sender's name, which opens their contact card, sits over it: a click anywhere
+                            // else on the line still reaches the collapse button.
+                            <h2 className="relative min-w-0 flex-1" style={BODY_FONT_STYLE}>
                                 <button
                                     type="button"
                                     ref={threadHeader.buttonRef}
                                     onClick={threadHeader.onToggle}
                                     aria-expanded={true}
                                     aria-controls={threadHeader.bodyId}
-                                    className={[
-                                        "w-full text-left rounded-sm text-sm",
-                                        ROW_FOCUS_CLASS,
-                                    ].join(" ")}
-                                >
-                                    <UnreadLabel unread={cardUnread} />
-                                    <MailAddress recipient={senderRecipient} className={senderClass(cardUnread)} />
-                                </button>
+                                    aria-label={`${cardUnread ? "Unread. " : ""}${senderLabel}`}
+                                    className={["absolute inset-0 w-full rounded-sm", ROW_FOCUS_CLASS].join(" ")}
+                                />
+                                <span className="pointer-events-none relative flex text-sm">
+                                    <ParticipantLink
+                                        participant={{ address: senderAddress, displayName: senderName }}
+                                        context={cardContext}
+                                        label={`Contact card for ${senderLabel}`}
+                                        className="pointer-events-auto min-w-0 max-w-full"
+                                    >
+                                        <MailAddress recipient={senderRecipient} className={senderClass(cardUnread)} />
+                                    </ParticipantLink>
+                                </span>
                             </h2>
                         ) : (
                             <p className="text-sm break-words min-w-0">
-                                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 {