@rapidmx/web-client 0.30.0 → 0.31.0

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

@@ -3,17 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
-import Button from "../../../../lib/components/buttons/Button.js";
-import { CONTACT_PHOTO_MAX_BYTES, CONTACT_PHOTO_TYPES } from "../../../../lib/contacts/contactsApi.js";
+import { ContactPhotoError, prepareContactPhoto } from "../../../../lib/contacts/preparePhoto.js";
+import ImageEditBadge from "../../../../lib/components/forms/ImageEditBadge.js";
 /**
- * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with "Change photo" and, when
- * there is a picture of their own, "Remove photo". A file is checked here (type and size) and only uploaded when the form is saved.
+ * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with a camera badge at its lower right that opens a
+ * menu (`ImageEditBadge`) - "Upload file", "Take photo" and, when there is a picture of their own, "Remove photo". Any picture is taken (a phone's camera photo of several megabytes,
+ * in any orientation, included): it is made small enough here by `prepareContactPhoto()` and only uploaded when the form is saved.
  */
-export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject }) {
-    const input = useRef(null);
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject, onBusyChange }) {
     const [preview, setPreview] = useState();
+    const [preparing, setPreparing] = useState(false);
     useEffect(() => {
         if (!picked) {
             setPreview(undefined);
@@ -23,24 +24,21 @@ export default function ContactPhotoField({ displayName, email, currentUrl, pick
         setPreview(url);
         return () => URL.revokeObjectURL(url);
     }, [picked]);
-    function handleChange(file) {
-        if (!file) {
-            return;
-        }
-        if (!CONTACT_PHOTO_TYPES.includes(file.type)) {
-            onReject("Choose a JPEG, PNG, GIF or WebP image.");
+    async function handleChange(file) {
+        setPreparing(true);
+        onBusyChange(true);
+        try {
+            onPick(await prepareContactPhoto(file));
         }
-        else if (file.size > CONTACT_PHOTO_MAX_BYTES) {
-            onReject("Choose an image no larger than 1 MB.");
+        catch (err) {
+            onReject(err instanceof ContactPhotoError ? err.message : "This picture could not be read - choose another one.");
         }
-        else {
-            onPick(file);
+        finally {
+            setPreparing(false);
+            onBusyChange(false);
         }
     }
     const shown = picked ? preview : removed ? undefined : currentUrl;
     const hasOwn = !!picked || (!!currentUrl && !removed);
-    return (_jsxs("div", { className: "flex items-center gap-4 mb-3", children: [_jsx(ContactAvatar, { displayName: displayName || "?", size: 72, photoUrl: shown, email: picked || (currentUrl && !removed) ? undefined : email }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("input", { ref: input, type: "file", accept: CONTACT_PHOTO_TYPES.join(","), "aria-label": "Contact photo file", className: "sr-only", tabIndex: -1, onChange: (e) => {
-                            handleChange(e.target.files?.[0]);
-                            e.target.value = "";
-                        } }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-3 text-xs", onClick: () => input.current?.click(), children: hasOwn ? "Change photo" : "Add photo" }), hasOwn && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-3 text-xs", onClick: onRemove, children: "Remove photo" }))] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 mb-3", children: [_jsxs("div", { className: "relative inline-block shrink-0", children: [_jsx(ContactAvatar, { displayName: displayName || "?", size: 72, photoUrl: shown, email: picked || (currentUrl && !removed) ? undefined : email }), _jsx(ImageEditBadge, { position: "bottom-right", label: "Change contact photo", fileInputLabel: "Contact photo file", hasImage: hasOwn, busy: preparing, onFile: (file) => void handleChange(file), onRemove: onRemove })] }), preparing && (_jsx("span", { role: "status", className: "text-xs text-text-muted", children: "Preparing picture\u2026" }))] }));
 }

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -79,7 +79,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
     // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
     if (userUid && status === "ready" && !mailboxUid) {
-        return _jsx(MailboxProvisioning, {});
+        return _jsx(MailboxProvisioning, { impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl });
     }
     let inner = null;
     if (userUid && status === "checking") {

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

@@ -52,7 +52,10 @@ export declare function contactInputFromCard(card: ParsedVCardContact, scope: {
     mailboxUid: string;
     folderUid: string;
 }): KnownPerson;
-/** The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's. */
+/**
+ * The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's,
+ * and a card with no email at all when its name and first phone number are a stored contact's or an earlier card's (so importing the same file twice adds nothing).
+ */
 export declare function withoutDuplicates(cards: readonly ParsedVCardContact[], existing: readonly Contact[]): {
     fresh: ParsedVCardContact[];
     skipped: number;

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

@@ -92,12 +92,28 @@ export function contactInputFromCard(card, scope) {
     const names = card.givenName || card.surname ? { givenName: card.givenName, surname: card.surname } : splitPersonName(card.displayName);
     return { ...card, ...scope, ...names, emails: card.emails ?? [], phones: card.phones ?? [], addresses: card.addresses ?? [] };
 }
-/** The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's. */
+/** What a card with no email is told apart by: its name and its first phone number (digits only). */
+function identityKey(person) {
+    return `${person.displayName.trim().toLowerCase()}|${(person.phones?.[0]?.phoneNumber ?? "").replace(/\D/g, "")}`;
+}
+/**
+ * The cards that are not yet in the address book, and how many were: a card is a duplicate when one of its emails is a stored contact's or an earlier card's,
+ * and a card with no email at all when its name and first phone number are a stored contact's or an earlier card's (so importing the same file twice adds nothing).
+ */
 export function withoutDuplicates(cards, existing) {
     const known = new Set(existing.flatMap((contact) => contact.emails.map((email) => normalizeAddress(email.address))));
+    const knownIdentities = new Set(existing.map(identityKey));
     const fresh = [];
     for (const card of cards) {
         const addresses = (card.emails ?? []).map((email) => normalizeAddress(email.address));
+        if (addresses.length === 0) {
+            const identity = identityKey(card);
+            if (!knownIdentities.has(identity)) {
+                knownIdentities.add(identity);
+                fresh.push(card);
+            }
+            continue;
+        }
         if (addresses.some((address) => known.has(address))) {
             continue;
         }

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

@@ -28,6 +28,8 @@ 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 { resetNotifications } from "../../notifications/store.js";
+import { clearContactPhotoCache } from "../../../../lib/contacts/useContactPhotoSrc.js";
 import { pluginIcon } from "../../plugins/pluginIcons.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
 import { useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
@@ -181,6 +183,9 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             destroyUnlockedKeys();
             clearPinnedSignerCache();
             clearAppearanceCache();
+            clearContactPhotoCache();
+            // The notification history (meeting titles, error details) is this session's, and the tab's storage outlives it.
+            resetNotifications();
             // Bounded by its own timeout and never rejects - awaited so navigating doesn't kill the Worker mid-delete.
             void destroyAllLocalIndexes().then(() => {
                 window.location.href = authServerUrl ?? "/";
@@ -198,6 +203,8 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
         // Trusted signer pins read from contacts don't outlive the session either.
         clearPinnedSignerCache();
         clearAppearanceCache();
+        clearContactPhotoCache();
+        resetNotifications();
         // Open compose windows save edits still waiting on their autosave debounce while the session is still
         // valid - logout invalidates it. Bounded the same way as logout itself, and never rejects.
         await flushComposeDrafts(LOGOUT_TIMEOUT_MS);
@@ -221,6 +228,8 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             // handling, which surfaces via a full reload rather than an inline retry affordance.
         }
         finally {
+            // What the impersonated user's session raised (their meetings, their errors) must not be left for the administrator to read.
+            resetNotifications();
             window.location.href = "/admin";
         }
     }

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

@@ -11,12 +11,11 @@ import FormField from "../../../../lib/components/forms/FormField.js";
 import { enrollKey, getKeyVault, VaultAlreadyInitializedError } from "../../../../lib/crypto/keyvaultApi.js";
 import { UnopenableKeysNotice, unlockErrorMessage } from "./UnlockPromptProvider.js";
 import { FrameTakeover } from "../../navigation/frameContext.js";
-import { RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock } from "./RecoveryCodeUnlock.js";
+import { MIN_PASSWORD_LENGTH, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock, } from "./RecoveryCodeUnlock.js";
 import { ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE, getUnlockedKeys, unlockWithPassword, } from "../../../../lib/crypto/keySession.js";
 import { buildAad, generateMasterKey, sealWithKey } from "../../../../lib/crypto/masterKey.js";
 import { buildPasswordWrap, buildRecoveryWraps } from "../../../../lib/crypto/masterKeyWraps.js";
 import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "../../../../lib/crypto/keys.js";
-const MIN_PASSWORD_LENGTH = 8;
 async function provisionEncryptionKey(mailboxUid, mailboxAddress, password) {
     const mk = generateMasterKey();
     const passwordWrap = await buildPasswordWrap(mailboxUid, mk, password);
@@ -180,7 +179,7 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
     }
     if (status === "setup_password" || status === "enrolling") {
         const enrolling = status === "enrolling";
-        return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Protect your mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose a password to protect your encryption keys. This is separate from your sign-in password and is never sent to the server." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSetPassword, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-enrollment-password", children: _jsx("input", { id: "key-enrollment-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(FormField, { label: "Confirm password", htmlFor: "key-enrollment-password-confirm", children: _jsx("input", { id: "key-enrollment-password-confirm", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(Button, { type: "submit", loading: enrolling, disabled: enrolling, children: "Continue" })] })] }) }) }));
+        return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Protect your mailbox" }), _jsxs("p", { className: "text-sm text-text-muted mb-5", children: ["Choose a password to protect your encryption keys. This is separate from your sign-in password and is never sent to the server. Make it ", MIN_PASSWORD_LENGTH, " or more characters: a passphrase of several unrelated words is long enough and easy to remember."] }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSetPassword, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-enrollment-password", children: _jsx("input", { id: "key-enrollment-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(FormField, { label: "Confirm password", htmlFor: "key-enrollment-password-confirm", children: _jsx("input", { id: "key-enrollment-password-confirm", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(Button, { type: "submit", loading: enrolling, disabled: enrolling, children: "Continue" })] })] }) }) }));
     }
     if (status === "already_set_up") {
         return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Encryption is already set up" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "This mailbox\u2019s encryption was set up in another tab or on another device while this page was open, so nothing was changed here. Reload the page and unlock with the password chosen there." }), _jsx(Button, { type: "button", onClick: () => window.location.reload(), children: "Reload" })] }) }) }));

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

@@ -13,4 +13,7 @@ import React from "react";
  * refused deliberately (a 4xx, e.g. "Automatic mailbox provisioning is not enabled.") so the caller and the
  * administrator they ask can tell why - see `unavailableReason()`.
  */
-export default function MailboxProvisioning(): React.JSX.Element;
+export default function MailboxProvisioning({ impersonating, impersonationBaseUrl }: {
+    impersonating?: boolean;
+    impersonationBaseUrl?: string;
+}): React.JSX.Element;

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

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { autoProvisionMailbox } from "../../../../lib/mail/mailApi.js";
+import { autoProvisionMailbox, stopImpersonating } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
@@ -43,7 +43,7 @@ function unavailableReason(err) {
  * refused deliberately (a 4xx, e.g. "Automatic mailbox provisioning is not enabled.") so the caller and the
  * administrator they ask can tell why - see `unavailableReason()`.
  */
-export default function MailboxProvisioning() {
+export default function MailboxProvisioning({ impersonating, impersonationBaseUrl }) {
     const client = useApiClient();
     const [status, setStatus] = useState("checking");
     const [options, setOptions] = useState([]);
@@ -55,6 +55,12 @@ export default function MailboxProvisioning() {
     // Bumped by "Retry" to re-run the check below.
     const [attempt, setAttempt] = useState(0);
     useEffect(() => {
+        if (impersonating) {
+            // An administrator viewing as a user must never create a mailbox for them just by looking: nothing is provisioned, and the way back is shown
+            // (this takeover hides the frame's own "Return to admin" bar).
+            setStatus("impersonating");
+            return;
+        }
         setStatus("checking");
         autoProvisionMailbox(undefined, client)
             .then((result) => {
@@ -87,6 +93,19 @@ export default function MailboxProvisioning() {
             }
         });
     }, [attempt]);
+    const [returning, setReturning] = useState(false);
+    async function handleReturnToAdmin() {
+        setReturning(true);
+        try {
+            await stopImpersonating(impersonationBaseUrl ?? "");
+        }
+        catch {
+            // Navigate either way, as the frame's own banner does: a failed call leaves the session as it was.
+        }
+        finally {
+            window.location.href = "/admin";
+        }
+    }
     async function handleConfirm() {
         // `selected` only ever takes a value from `options` itself (the initial default, or the
         // <select>'s own onChange, which can only report one of its own rendered <option> values), so
@@ -111,6 +130,9 @@ export default function MailboxProvisioning() {
         const creating = status === "creating";
         content = (_jsxs("div", { className: "w-full flex flex-col gap-3", children: [_jsx("p", { className: "text-sm text-text-muted text-center", children: "Choose your mailbox address to get started:" }), error && _jsx(Alert, { children: error }), _jsx("select", { "aria-label": "Mailbox address", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: selected, onChange: (e) => setSelected(e.target.value), disabled: creating, children: options.map((option) => (_jsx("option", { value: option.primarySmtpAddress, children: option.primarySmtpAddress }, option.primarySmtpAddress))) }), _jsx(Button, { type: "button", onClick: handleConfirm, loading: creating, disabled: creating, className: "!w-auto self-center", children: "Continue" })] }));
     }
+    else if (status === "impersonating") {
+        content = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-lg font-bold uppercase tracking-wide", children: "No mailbox" }), _jsx("p", { className: "text-sm text-text-muted", children: "The user you are viewing as has no mailbox, and none is created for them while you are viewing as them." }), _jsx(Button, { type: "button", onClick: () => void handleReturnToAdmin(), loading: returning, disabled: returning, className: "!w-auto self-center", children: "Return to admin" })] }));
+    }
     else if (status === "retryable") {
         content = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-lg font-bold uppercase tracking-wide", children: "Couldn\u2019t check right now" }), _jsx("p", { className: "text-sm text-text-muted", children: retryText }), _jsx(Button, { type: "button", onClick: () => setAttempt((n) => n + 1), className: "!w-auto self-center", children: "Retry" })] }));
     }

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

@@ -9,8 +9,10 @@
  */
 import React from "react";
 import { type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
-/** The same minimum every other "set an encryption password" form in this app uses. */
-export declare const MIN_PASSWORD_LENGTH = 8;
+/** The same minimum every other "set an encryption password" form in this app uses. The password is the only thing
+ * between an offline guesser holding the server's wrapped master key and the mailbox's private keys, so it is
+ * long: a passphrase of a few words clears it easily. */
+export declare const MIN_PASSWORD_LENGTH = 12;
 /** Where recovery codes are regenerated. */
 export declare const ENCRYPTION_SETTINGS_HREF = "/settings/encryption";
 /** Deliberately generic: a wrong code and a vault with no recovery codes fail the same way. */

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

@@ -22,8 +22,10 @@ import Modal from "../../../../lib/components/overlays/Modal.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
-/** The same minimum every other "set an encryption password" form in this app uses. */
-export const MIN_PASSWORD_LENGTH = 8;
+/** The same minimum every other "set an encryption password" form in this app uses. The password is the only thing
+ * between an offline guesser holding the server's wrapped master key and the mailbox's private keys, so it is
+ * long: a passphrase of a few words clears it easily. */
+export const MIN_PASSWORD_LENGTH = 12;
 /** Where recovery codes are regenerated. */
 export const ENCRYPTION_SETTINGS_HREF = "/settings/encryption";
 /** Deliberately generic: a wrong code and a vault with no recovery codes fail the same way. */

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

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
 import { EncryptedPreview, conversationLooksEncrypted, displaySubject } from "./reading/EncryptedPreview.js";
-import { decryptForDisplay, useDecryptedMessages, useUnlockEpoch } from "../../mail/decryptedMessages.js";
+import { decryptForDisplay, mapWithConcurrency, useDecryptedMessages, useUnlockEpoch } from "../../mail/decryptedMessages.js";
 import { listConversationMessages } from "../../../../lib/mail/conversationsApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
@@ -44,22 +44,64 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
     const unlockEpoch = useUnlockEpoch();
     // An encrypted conversation's row stands for its latest message, whose subject only decrypting can tell. Rows are decrypted as they are listed
     // whenever the mailbox is unlocked (and again once it is), the same way the message list does.
+    // A few at a time (the list can hold hundreds), and none more once the list has been replaced by a newer one.
     useEffect(() => {
-        for (const conversation of conversations) {
-            if (conversationLooksEncrypted(conversation)) {
-                void decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
+        let stale = false;
+        void mapWithConcurrency(conversations.filter(conversationLooksEncrypted), 4, async (conversation) => {
+            if (!stale) {
+                await decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
             }
-        }
+        });
+        return () => {
+            stale = true;
+        };
     }, [conversations, mailboxUid, unlockEpoch]);
     const [expanded, setExpanded] = useState(new Set());
     const [messagesById, setMessagesById] = useState({});
     const [loadingIds, setLoadingIds] = useState(new Set());
     const [errorsById, setErrorsById] = useState({});
+    // The messages each cached thread was fetched for (its `messageUids`): a list that now says otherwise has the thread fetched again.
+    const fetchedForRef = useRef({});
     // The answers given from a row's RSVP chip, by message uid: a row draws them at once, whichever row (the conversation's, or one of its messages) they were given from.
     const [answers, setAnswers] = useState({});
     function answered(updated) {
         setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
     }
+    // New mail, a delete or a move changes a conversation's messages: what was fetched of it is out of date. An expanded thread is fetched again
+    // in place (the rows it shows stay until the new ones arrive); a collapsed one is forgotten, to be fetched when next opened. A conversation
+    // that left the list is forgotten too.
+    useEffect(() => {
+        const listed = new Set();
+        const stale = [];
+        for (const conversation of conversations) {
+            const id = conversationRowKey(conversation);
+            listed.add(id);
+            const fetchedFor = fetchedForRef.current[id];
+            if (fetchedFor === undefined || fetchedFor === conversation.messageUids.join(",")) {
+                continue;
+            }
+            if (expanded.has(id)) {
+                fetchedForRef.current[id] = conversation.messageUids.join(",");
+                listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId, {}, client)
+                    .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
+                    .catch(() => undefined);
+            }
+            else {
+                stale.push(id);
+            }
+        }
+        for (const id of Object.keys(fetchedForRef.current)) {
+            if (!listed.has(id)) {
+                stale.push(id);
+            }
+        }
+        if (stale.length > 0) {
+            for (const id of stale) {
+                delete fetchedForRef.current[id];
+            }
+            setMessagesById((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => !stale.includes(id))));
+        }
+    }, [conversations]);
     function toggle(conversation) {
         const id = conversationRowKey(conversation);
         setExpanded((prev) => {
@@ -81,6 +123,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             delete next[id];
             return next;
         });
+        fetchedForRef.current[id] = conversation.messageUids.join(",");
         listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId, {}, client)
             .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
             .catch((err) => setErrorsById((prev) => ({

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

@@ -316,7 +316,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                         }
                     },
                     track: trackMessageChange,
-                });
+                }, client);
             }
         }
     }, [expandedUids, messages, client]);

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

@@ -1,78 +1,2 @@
-import React, { ReactNode } from "react";
-/** What every row has. `checked` turns it into a radio/checkbox item (the caller says which via `role`) and
- * draws the checkmark column; without it the row is a plain command. */
-interface MenuItemBase {
-    key: string;
-    label: string;
-    /** A one-line explanation under the label, for an item whose effect isn't obvious from its name. */
-    description?: string;
-    role?: "menuitem" | "menuitemradio" | "menuitemcheckbox";
-    /** `"mixed"` is ARIA's third checkbox state - some of the things this row acts on have it and some
-     * don't, which is what a label applied to only part of a multi-message selection looks like. */
-    checked?: boolean | "mixed";
-    /** A colour swatch before the label - a label's own colour. */
-    swatchColor?: string;
-    /** An icon before the label, for a menu whose rows are commands (the reading pane's "More actions"). */
-    icon?: ReactNode;
-    /** A tooltip for the row - the full text of a label the row truncates. */
-    title?: string;
-    disabled?: boolean;
-    /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
-     * before one command commits them all. */
-    keepOpen?: boolean;
-}
-/** A row that does something when chosen. */
-export interface MenuCommandSpec extends MenuItemBase {
-    onSelect: () => void;
-    submenu?: never;
-}
-/** A row that opens a submenu instead: choosing it replaces the menu's contents with these sections, under
- * a Back row. One level deep, which is all any menu here needs - so it has nothing of its own to do. */
-export interface MenuSubmenuSpec extends MenuItemBase {
-    submenu: MenuSectionSpec[];
-    onSelect?: never;
-}
-export type MenuItemSpec = MenuCommandSpec | MenuSubmenuSpec;
-/** A labelled group of items. Groups after the first are drawn with a separator above them. */
-export interface MenuSectionSpec {
-    key: string;
-    label?: string;
-    /** A short note under the group's items - e.g. why some of them are unavailable right now. */
-    note?: string;
-    items: MenuItemSpec[];
-}
-/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
-export declare function menuHeight(sections: MenuSectionSpec[], width?: number): number;
-export interface MenuButtonProps {
-    /** The trigger's visible label. Not drawn (nor is the chevron) with `iconOnly`, where `aria-label` is all the trigger says. */
-    label: ReactNode;
-    /** The trigger is just its `icon` - a round icon button like the reading pane's own command row, whose `className` it takes over
-     * completely. `aria-label` (and `title`) name it. */
-    iconOnly?: boolean;
-    /** The trigger's accessible name, which also names the menu itself - includes the current selection
-     * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
-    "aria-label": string;
-    icon?: ReactNode;
-    disabled?: boolean;
-    title?: string;
-    sections: MenuSectionSpec[];
-    width?: number;
-    /** Extra classes for the trigger, on top of the shared toolbar-button styling. */
-    className?: string;
-    /** Told whenever the menu opens or closes - how a caller resets a draft it keeps for the menu's own
-     * multi-select rows (see `useLabelDraft()`). */
-    onOpenChange?: (open: boolean) => void;
-}
-/**
- * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
- * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
- * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
- *
- * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
- * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
- * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
- * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
- * semantics, roving focus and keyboard handling are this component's own.
- */
-export default function MenuButton({ label, iconOnly, icon, disabled, title, sections, width, className, "aria-label": ariaLabel, onOpenChange, }: MenuButtonProps): React.JSX.Element;
-export {};
+export { default, menuHeight } from "../../../../lib/components/menus/MenuButton.js";
+export type { MenuCommandSpec, MenuSubmenuSpec, MenuItemSpec, MenuSectionSpec, MenuButtonProps } from "../../../../lib/components/menus/MenuButton.js";