@rapidmx/web-client 0.4.0 → 0.5.0

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

@@ -0,0 +1,111 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+const MS_PER_DAY = 86400000;
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export function allDayDateKey(iso) {
+    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
+    return new Date(rounded).toISOString().slice(0, 10);
+}
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export function allDayInstant(dateKey) {
+    return `${dateKey}T00:00:00.000Z`;
+}
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey, days) {
+    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
+}
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export function localDateKey(day) {
+    return format(day, "yyyy-MM-dd");
+}
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export function recurrenceUntilInstant(dateKey, allDay) {
+    if (allDay) {
+        return `${dateKey}T23:59:59.999Z`;
+    }
+    const [y, m, d] = dateKey.split("-").map(Number);
+    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
+}
+/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
+const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
+/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
+const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export function recurrenceUntilDateKey(until, allDay) {
+    if (allDay) {
+        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
+        if (stored) {
+            return stored[1];
+        }
+    }
+    return format(new Date(until), "yyyy-MM-dd");
+}
+/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
+const JS_WEEKDAY_CODES = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export function startWeekdayCode(start, allDay, timezone) {
+    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
+    if (Number.isNaN(ms)) {
+        return undefined;
+    }
+    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
+}
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export function occursOnDay(occurrence, day) {
+    if (occurrence.allDay) {
+        const key = localDateKey(day);
+        const startKey = allDayDateKey(occurrence.startDate);
+        const endKey = allDayDateKey(occurrence.endDate);
+        return key === startKey || (key > startKey && key < endKey);
+    }
+    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    if (start.getTime() === end.getTime()) {
+        return start >= dayStart && start < dayEnd;
+    }
+    return start < dayEnd && end > dayStart;
+}
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export function startsOnDay(occurrence, day) {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -62,7 +62,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
             return;
         }
         let cancelled = false;
-        Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
+        void Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
             .then((folders) => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))
             .catch((err) => ({
             mailbox,

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

@@ -1,20 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
+import KeyChangeReview from "./KeyChangeReview.js";
+import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 /** Groups a hex fingerprint into 4-character blocks (`ab12 cd34 ...`) for out-of-band verification -
  * the spec's own use case ("compare this over the phone") is materially easier with a grouped string
  * than one 64-character run. */
 function formatFingerprint(fingerprint) {
     return fingerprint.match(/.{1,4}/g)?.join(" ") ?? fingerprint;
 }
+/** A revoked key's reason: a superseded key was routinely replaced, a revoked one must not be trusted. */
+function RevocationBadge({ label }) {
+    if (!label) {
+        return null;
+    }
+    return _jsxs("span", { className: label === "superseded" ? "text-text-muted" : "text-danger", children: [" (", label, ")"] });
+}
 /**
  * A contact's read-only detail view. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`,
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, backHref }) {
-    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) || contact.encryptPreference || contact.keyConflict ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), contact.keyConflict && (_jsx("div", { className: "mb-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["A different encryption key was observed for this contact on", " ", new Date(contact.keyConflict.observedAt).toLocaleDateString(), ". The previously verified key below is still the one in use \u2014 this is routine after a device change or reinstall, but it\u2019s also what a real attack looks like, so verify the new fingerprint with ", contact.displayName, " ", "directly (e.g. by phone) before trusting it. There is no automatic way to accept or reject this yet."] }), _jsxs("p", { className: "font-mono text-xs", children: ["Newly observed: ", formatFingerprint(contact.keyConflict.observedFingerprint)] })] }) })), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, canResolveKeys }) {
+    // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
+    const [keyNotice, setKeyNotice] = useState(null);
+    const notice = keyNotice?.contactUid === contact.uid ? keyNotice.text : null;
+    const keyConflicts = contact.keyConflicts ?? [];
+    const previousKeys = contact.previousKeys ?? [];
+    // Pinned signing keys vouch for signatures, so the pinned-signer cache is dropped along with re-reading the contact.
+    function refresh(text) {
+        setKeyNotice({ contactUid: contact.uid, text });
+        clearPinnedSignerCache();
+        onKeysChanged?.();
+    }
+    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
+                        contact.encryptPreference ||
+                        keyConflicts.length > 0 ||
+                        previousKeys.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), notice && (_jsx("p", { role: "status", className: "mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text", children: notice })), keyConflicts.map((conflict) => {
+                                const pinned = contact.keys?.find((key) => key.useType === conflict.useType);
+                                const kind = conflict.useType === "sign" ? "signing" : "encryption";
+                                return (_jsxs("section", { "aria-label": `${conflict.useType === "sign" ? "Signing" : "Encryption"} key change`, className: "mb-3 py-3 px-3 rounded-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsxs("h2", { className: "font-semibold", children: ["A different ", kind, " key was seen for ", contact.displayName] }), _jsx("p", { children: "The current key stays in use until you decide what to do with the new one." }), _jsx(KeyChangeReview, { mailboxUid: contact.mailboxUid, address: contact.emails[0]?.address, useType: conflict.useType, ownerName: contact.displayName, current: pinned && { fingerprint: pinned.fingerprint, since: keyPinnedSince(contact, pinned) }, proposed: {
+                                                fingerprint: conflict.observedKey.fingerprint,
+                                                observedAt: conflict.observedAt,
+                                                source: conflict.source,
+                                            }, canReject: true, canResolve: canResolveKeys, onResolved: (action) => refresh(action === "accept"
+                                                ? `The new ${kind} key is now trusted for ${contact.displayName}.`
+                                                : `You kept the current ${kind} key for ${contact.displayName}.`), onPinnedKeyChanged: () => refresh(KEY_CHANGE_STALE_MESSAGE) })] }, conflict.useType));
+                            }), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
                                     ? "This contact also encrypts to you — messages to them can be encrypted."
-                                    : "This contact has not indicated a mutual encryption preference." })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint), key.revokedAt && _jsx("span", { className: "text-danger", children: " (revoked)" })] }, key.fingerprint)))] })) : null] })] }));
+                                    : "This contact has not indicated a mutual encryption preference." })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint), _jsx(RevocationBadge, { label: revocationLabel(key) })] }, key.fingerprint))), previousKeys.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-text-muted text-xs font-bold mb-1", children: "Key history" }), _jsx("ul", { "aria-label": "Key history", children: previousKeys.map((key) => (_jsxs("li", { className: "text-xs py-0.5", children: [_jsxs("span", { className: "font-mono", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint)] }), _jsx(RevocationBadge, { label: revocationLabel(key) }), _jsxs("span", { className: "text-text-muted", children: [" ", "\u00B7", " ", key.replacement === "automatic" ? "Renewed automatically" : "Replaced by you", " on", " ", formatDate(key.replacedAt)] })] }, `${key.useType}:${key.fingerprint}:${key.replacedAt}`))) })] }))] })) : null] })] }));
 }

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

@@ -10,6 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const ADDRESS_KINDS = ["home", "work", "other"];
@@ -30,7 +31,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     const [categoriesText, setCategoriesText] = useState((contact?.categories ?? []).join(", "));
     const [emails, setEmails] = useState(contact?.emails ?? []);
     const [phones, setPhones] = useState(contact?.phones ?? []);
-    const [address, setAddress] = useState(contact?.addresses[0] ?? null);
+    // Every stored address is kept and editable - editing a contact must never silently drop addresses
+    // beyond the first.
+    const [addresses, setAddresses] = useState(contact?.addresses ?? []);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     function updateEmail(index, patch) {
@@ -45,6 +48,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     function removePhone(index) {
         setPhones((prev) => prev.filter((_, i) => i !== index));
     }
+    function updateAddress(index, patch) {
+        setAddresses((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
+    }
+    function removeAddress(index) {
+        setAddresses((prev) => prev.filter((_, i) => i !== index));
+    }
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
@@ -58,22 +67,29 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 .split(",")
                 .map((c) => c.trim())
                 .filter(Boolean);
+            // An update merges only the fields in its body, so a field the user cleared is sent as an
+            // explicit `null` (an omitted/undefined one would keep its stored value); a create just omits it.
+            const cleared = contact ? null : undefined;
             const input = {
                 displayName: displayName.trim(),
-                givenName: givenName.trim() || undefined,
-                surname: surname.trim() || undefined,
-                company: company.trim() || undefined,
-                jobTitle: jobTitle.trim() || undefined,
-                notes: notes.trim() || undefined,
+                givenName: givenName.trim() || cleared,
+                surname: surname.trim() || cleared,
+                company: company.trim() || cleared,
+                jobTitle: jobTitle.trim() || cleared,
+                notes: notes.trim() || cleared,
                 favorite,
                 categories,
                 emails,
                 phones,
-                addresses: address ? [address] : [],
+                addresses,
             };
             let saved;
             if (contact) {
-                saved = await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input });
+                saved = await updateContact({
+                    uid: contact.uid,
+                    version: contact.version,
+                    ...input,
+                });
             }
             else {
                 const targetFolderUid = targetMailboxUid === mailboxUid ? folderUid : await findWellKnownFolderUid(targetMailboxUid, "contacts");
@@ -81,8 +97,14 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     setError("That mailbox has no Contacts folder.");
                     return;
                 }
-                saved = await createContact({ mailboxUid: targetMailboxUid, folderUid: targetFolderUid, ...input });
+                saved = await createContact({
+                    mailboxUid: targetMailboxUid,
+                    folderUid: targetFolderUid,
+                    ...input,
+                });
             }
+            // A message opened later in this page load must see the changed contact's signing keys.
+            clearPinnedSignerCache();
             onSaved(saved);
         }
         catch (err) {
@@ -92,5 +114,5 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             setSaving(false);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: address ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => setAddress({ ...address, street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => setAddress({ ...address, city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => setAddress({ ...address, state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => setAddress({ ...address, postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => setAddress({ ...address, country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => setAddress({ ...address, type: e.target.value }), "aria-label": "Address type", children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => setAddress(null), className: "self-start text-xs font-medium text-danger hover:underline", children: "Remove address" })] })) : (_jsx("button", { type: "button", onClick: () => setAddress({ type: "home" }), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
 }

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

@@ -43,7 +43,7 @@ function NavItem({ label, count, active, onClick, swatch, }) {
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken }) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }) {
     const [lists, setLists] = useState([]);
     const [listsError, setListsError] = useState(null);
     const [addingList, setAddingList] = useState(false);
@@ -100,6 +100,6 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
     // `Drawer` (see MailShell/ContactsShell for the identical pattern and the duplicate-id reasoning
     // behind the `idPrefix`).
-    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
     return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open contacts menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Contacts", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { PinnedKeyChangedError, resolveKeyConflict } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { conflictSourceLabel, formatDate, groupFingerprint, keyChangeErrorMessage } from "./contactKeys.js";
+/**
+ * The old-versus-new comparison for a changed contact key, with Accept new key (confirmed in a dialog) and Keep current
+ * key, calling `resolveKeyConflict()` against the pinned fingerprint shown. Shared by a message's "signing key changed"
+ * notice and a contact's recorded key conflicts.
+ */
+export default function KeyChangeReview({ mailboxUid, address, useType, ownerName, current, proposed, certificate, canReject, canResolve, onResolved, onPinnedKeyChanged, }) {
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const [forbidden, setForbidden] = useState(false);
+    const kind = useType === "sign" ? "signing" : "encryption";
+    const actionable = !!address && !!current && canResolve !== false && !forbidden;
+    async function resolve(action) {
+        setBusy(action);
+        setError(null);
+        try {
+            await resolveKeyConflict(mailboxUid, {
+                address: address,
+                useType,
+                action,
+                expectedPinnedFingerprint: current.fingerprint,
+                ...(action === "accept" && certificate !== undefined ? { certificate } : {}),
+            });
+            setConfirmOpen(false);
+            onResolved(action);
+        }
+        catch (err) {
+            setConfirmOpen(false);
+            if (err instanceof PinnedKeyChangedError) {
+                onPinnedKeyChanged();
+                return;
+            }
+            if (err instanceof ApiRequestError && err.status === 403) {
+                setForbidden(true);
+            }
+            setError(keyChangeErrorMessage(err));
+        }
+        finally {
+            setBusy(null);
+        }
+    }
+    const proposedSeen = proposed.observedAt !== undefined
+        ? `First seen ${formatDate(proposed.observedAt)}${proposed.source ? `, ${conflictSourceLabel(proposed.source)}` : ""}`
+        : "Only seen in this message";
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { className: "rounded-sm bg-surface p-2", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Current key" }), current ? (_jsxs("dd", { children: [_jsx("span", { className: "font-mono text-xs break-all", children: groupFingerprint(current.fingerprint) }), _jsxs("span", { className: "block text-xs text-text-muted", children: ["First seen ", formatDate(current.since)] })] })) : (_jsx("dd", { className: "text-xs text-text-muted", children: "The key you trust couldn\u2019t be loaded." }))] }), _jsxs("div", { className: "rounded-sm bg-surface p-2", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "New key" }), _jsxs("dd", { children: [_jsx("span", { className: "font-mono text-xs break-all", children: groupFingerprint(proposed.fingerprint) }), proposed.emails && (_jsxs("span", { className: "block text-xs text-text-muted", children: ["Certificate for ", proposed.emails.length > 0 ? proposed.emails.join(", ") : "no email address"] })), _jsx("span", { className: "block text-xs text-text-muted", children: proposedSeen })] })] })] }), _jsxs("p", { children: ["This is routine when ", ownerName, " renews a certificate, but it can also mean someone is impersonating them. Confirm the new fingerprint with ", ownerName, " another way, such as a phone call, before accepting it."] }), error && _jsx(Alert, { children: error }), actionable && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", disabled: busy !== null, onClick: () => {
+                            setError(null);
+                            setConfirmOpen(true);
+                        }, children: "Accept new key" }), canReject && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: busy === "reject", disabled: busy !== null, onClick: () => resolve("reject"), children: "Keep current key" }))] })), _jsx(Modal, { open: confirmOpen, onClose: () => busy === null && setConfirmOpen(false), title: "Accept the new key?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: [useType === "sign"
+                                    ? `Mail from ${address} signed with this key will show as verified.`
+                                    : `Mail you send to ${address} will be encrypted to this key.`, " ", "The current ", kind, " key moves to this contact\u2019s key history."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "New key fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: groupFingerprint(proposed.fingerprint) })] }), _jsxs("p", { className: "text-text-muted", children: ["Only accept it once you\u2019ve confirmed this fingerprint with ", ownerName, "."] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: busy === "accept", disabled: busy !== null, onClick: () => resolve("accept"), children: "Accept new key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy !== null, onClick: () => setConfirmOpen(false), children: "Cancel" })] })] }) })] }));
+}

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

@@ -0,0 +1,64 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Display and error helpers for a contact's pinned keys and key changes (`KeyChangeReview`, `ContactDetailPane`,
+ * `MessageDetailPane`). */
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { PinnedKeyChangedError } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+export const KEY_CHANGE_STALE_MESSAGE = "This contact's keys changed while you were looking; reload to see the latest.";
+export const KEY_CHANGE_INVALID_MESSAGE = "The new key isn't a valid, current certificate for this address, so it can't be accepted. Nothing was changed.";
+export const KEY_CHANGE_FORBIDDEN_MESSAGE = "You don't have permission to change this contact's keys.";
+export const KEY_CHANGE_NOT_FOUND_MESSAGE = "There's no key change to resolve for this address any more. It may already have been resolved, or the contact was removed.";
+export const KEY_CHANGE_GENERIC_MESSAGE = "Couldn't update this contact's keys. Try again.";
+/** The error text for a failed `resolveKeyConflict()` other than `PinnedKeyChangedError` (which the caller reloads
+ * on and reports with `KEY_CHANGE_STALE_MESSAGE`). */
+export function keyChangeErrorMessage(err) {
+    if (err instanceof PinnedKeyChangedError) {
+        return KEY_CHANGE_STALE_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 400) {
+        return KEY_CHANGE_INVALID_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 403) {
+        return KEY_CHANGE_FORBIDDEN_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 404) {
+        return KEY_CHANGE_NOT_FOUND_MESSAGE;
+    }
+    return KEY_CHANGE_GENERIC_MESSAGE;
+}
+/** Groups a fingerprint into 4-character blocks (`ab12 cd34 ...`), ignoring any separators it came with, so it can be
+ * read out and compared over another channel. */
+export function groupFingerprint(fingerprint) {
+    const compact = fingerprint.replace(/[\s:]/g, "").toLowerCase();
+    return compact.match(/.{1,4}/g)?.join(" ") ?? compact;
+}
+/** Whether two fingerprints name the same key (case and separators ignored). */
+export function sameFingerprint(a, b) {
+    return a !== undefined && b !== undefined && a.replace(/[\s:]/g, "").toLowerCase() === b.replace(/[\s:]/g, "").toLowerCase();
+}
+/** A revoked key's label: `"superseded"` for a routine replacement, `"revoked"` for a compromised key or one revoked
+ * with no reason; `undefined` when the key isn't revoked. */
+export function revocationLabel(key) {
+    if (!key.revokedAt) {
+        return undefined;
+    }
+    return key.revocationReason === "superseded" ? "superseded" : "revoked";
+}
+/** Where a key conflict was observed, for display. */
+export function conflictSourceLabel(source) {
+    return source === "header" ? "from an incoming message" : "by key discovery";
+}
+/** When `key` (one of `contact`'s pinned keys) started being trusted: when it replaced the newest previous key of its
+ * use, else the contact's `keysFirstSeen`, else the key's own `notBefore`. */
+export function keyPinnedSince(contact, key) {
+    const replaced = (contact.previousKeys ?? []).filter((previous) => previous.useType === key.useType).map((previous) => previous.replacedAt);
+    if (replaced.length > 0) {
+        return Math.max(...replaced);
+    }
+    return contact.keysFirstSeen ?? key.notBefore;
+}
+export function formatDate(ms) {
+    return new Date(ms).toLocaleDateString();
+}

package/dist/apps/shared/components/escrow/layout/EscrowShell.js

@@ -9,11 +9,12 @@ import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
-import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
 import UserMenu from "../../layout/UserMenu.js";
+import { signOutOfConsole } from "../../admin/signOut.js";
+const DEFAULT_ICON_SRC = "/images/logo.svg";
 const NAV_ITEMS = [
     { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
     { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
@@ -37,8 +38,25 @@ const NAV_ITEMS = [
 export default function EscrowShell({ active, userUid, authServerUrl, children }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
-    const { branding, iconSrc } = useBranding();
+    const [iconSrc, setIconSrc] = useState(DEFAULT_ICON_SRC);
     useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // Only the icon is taken from branding here. The escrow console deliberately skips `useBranding()`, which
+    // would inject the custom stylesheet, and never renders the admin-configured header/footer HTML - this
+    // console handles escrow key material, so no admin-supplied markup or CSS runs on it.
+    useEffect(() => {
+        let cancelled = false;
+        getBranding()
+            .then((branding) => {
+            if (!cancelled)
+                setIconSrc(branding.iconUrl || branding.logoUrl || DEFAULT_ICON_SRC);
+        })
+            .catch(() => {
+            // Decorative only - keep the default icon.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
     useEffect(() => {
         if (!userUid) {
             return;
@@ -53,7 +71,8 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
         });
     }, [userUid]);
     function handleSignOut() {
-        window.location.href = authServerUrl ?? "/";
+        // Ends the auth-server session and tells other tabs, not just navigates - see `signOutOfConsole()`.
+        void signOutOfConsole(authServerUrl);
     }
     let content;
     if (!userUid || status === "checking") {
@@ -71,5 +90,5 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
                                 ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: NAV_ITEMS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(BrandingHeader, { branding: branding }), content, _jsx(BrandingFooter, { branding: branding })] }));
+    return _jsx(_Fragment, { children: content });
 }