@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/shared/components/contacts/ContactPhotoField.tsx

@@ -2,16 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
+import React, { 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";
 
 export interface ContactPhotoFieldProps {
     displayName: string;
     /** The contact's first address, for the Gravatar shown while they have no picture of their own. */
     email?: string;
-    /** The picture the contact has now (`contactPhotoUrl()`), if any. */
+    /** The picture the contact has now (`useContactPhotoSrc()`), if any. */
     currentUrl?: string;
     /** The picture chosen to replace it, not uploaded until the contact is saved; `null` for none. */
     picked: File | null;
@@ -21,15 +21,18 @@ export interface ContactPhotoFieldProps {
     onRemove: () => void;
     /** Called with the reason a chosen file was turned down. */
     onReject: (message: string) => void;
+    /** Called with `true` while a chosen file is being made ready, so the form is not saved before it is, and with `false` after. */
+    onBusyChange: (busy: boolean) => void;
 }
 
 /**
- * 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 }: ContactPhotoFieldProps) {
-    const input = useRef<HTMLInputElement>(null);
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject, onBusyChange }: ContactPhotoFieldProps) {
     const [preview, setPreview] = useState<string | undefined>();
+    const [preparing, setPreparing] = useState(false);
 
     useEffect(() => {
         if (!picked) {
@@ -41,16 +44,16 @@ export default function ContactPhotoField({ displayName, email, currentUrl, pick
         return () => URL.revokeObjectURL(url);
     }, [picked]);
 
-    function handleChange(file: File | undefined) {
-        if (!file) {
-            return;
-        }
-        if (!CONTACT_PHOTO_TYPES.includes(file.type)) {
-            onReject("Choose a JPEG, PNG, GIF or WebP image.");
-        } else if (file.size > CONTACT_PHOTO_MAX_BYTES) {
-            onReject("Choose an image no larger than 1 MB.");
-        } else {
-            onPick(file);
+    async function handleChange(file: File) {
+        setPreparing(true);
+        onBusyChange(true);
+        try {
+            onPick(await prepareContactPhoto(file));
+        } catch (err) {
+            onReject(err instanceof ContactPhotoError ? err.message : "This picture could not be read - choose another one.");
+        } finally {
+            setPreparing(false);
+            onBusyChange(false);
         }
     }
 
@@ -58,29 +61,23 @@ export default function ContactPhotoField({ displayName, email, currentUrl, pick
     const hasOwn = !!picked || (!!currentUrl && !removed);
     return (
         <div className="flex items-center gap-4 mb-3">
-            <ContactAvatar displayName={displayName || "?"} size={72} photoUrl={shown} email={picked || (currentUrl && !removed) ? undefined : email} />
-            <div className="flex flex-wrap gap-2">
-                <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 = "";
-                    }}
+            <div className="relative inline-block shrink-0">
+                <ContactAvatar displayName={displayName || "?"} size={72} photoUrl={shown} email={picked || (currentUrl && !removed) ? undefined : email} />
+                <ImageEditBadge
+                    position="bottom-right"
+                    label="Change contact photo"
+                    fileInputLabel="Contact photo file"
+                    hasImage={hasOwn}
+                    busy={preparing}
+                    onFile={(file) => void handleChange(file)}
+                    onRemove={onRemove}
                 />
-                <Button type="button" variant="secondary" className="!w-auto !py-1 !px-3 text-xs" onClick={() => input.current?.click()}>
-                    {hasOwn ? "Change photo" : "Add photo"}
-                </Button>
-                {hasOwn && (
-                    <Button type="button" variant="secondary" className="!w-auto !py-1 !px-3 text-xs" onClick={onRemove}>
-                        Remove photo
-                    </Button>
-                )}
             </div>
+            {preparing && (
+                <span role="status" className="text-xs text-text-muted">
+                    Preparing picture…
+                </span>
+            )}
         </div>
     );
 }

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -113,7 +113,7 @@ export default function ContactsShell({
     // 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 <MailboxProvisioning />;
+        return <MailboxProvisioning impersonating={impersonating} impersonationBaseUrl={impersonationBaseUrl} />;
     }
 
     let inner: ReactNode = null;

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

@@ -128,15 +128,32 @@ export function contactInputFromCard(card: ParsedVCardContact, scope: { mailboxU
     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: { displayName: string; phones?: readonly { phoneNumber: string }[] }): string {
+    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: readonly ParsedVCardContact[],
     existing: readonly Contact[],
 ): { fresh: ParsedVCardContact[]; skipped: number } {
     const known = new Set(existing.flatMap((contact) => contact.emails.map((email) => normalizeAddress(email.address))));
+    const knownIdentities = new Set(existing.map(identityKey));
     const fresh: ParsedVCardContact[] = [];
     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/apps/shared/components/layout/AppShell.tsx

@@ -34,6 +34,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, PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
 import { type ResolvedRailLinks, useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
@@ -266,6 +268,9 @@ export function AppChrome({
             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 ?? "/";
@@ -284,6 +289,8 @@ export function AppChrome({
         // 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);
@@ -306,6 +313,8 @@ export function AppChrome({
             // they were, so there's nothing else useful to show — matching this app's other network-error
             // 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/apps/shared/components/layout/KeyEnrollmentGate.tsx

@@ -10,7 +10,13 @@ import FormField from "../../../../lib/components/forms/FormField.js";
 import { enrollKey, getKeyVault, PublicKey, VaultAlreadyInitializedError } from "../../../../lib/crypto/keyvaultApi.js";
 import { UnopenableKeysNotice, unlockErrorMessage } from "./UnlockPromptProvider.js";
 import { FrameTakeover } from "../../navigation/frameContext.js";
-import { RecoveryFollowUp, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock } from "./RecoveryCodeUnlock.js";
+import {
+    MIN_PASSWORD_LENGTH,
+    RecoveryFollowUp,
+    RecoveryFollowUpModal,
+    UnlockModeToggle,
+    startRecoveryUnlock,
+} from "./RecoveryCodeUnlock.js";
 import {
     ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE,
     getUnlockedKeys,
@@ -23,8 +29,6 @@ import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "../../../../lib/c
 
 type Status = "checking" | "setup_password" | "enrolling" | "already_set_up" | "show_recovery_codes" | "unlock" | "unlocking" | "ready";
 
-const MIN_PASSWORD_LENGTH = 8;
-
 async function provisionEncryptionKey(
     mailboxUid: string,
     mailboxAddress: string,
@@ -299,7 +303,8 @@ export default function KeyEnrollmentGate({
                     <h1 className="text-lg font-bold mb-2">Protect your mailbox</h1>
                     <p className="text-sm text-text-muted mb-5">
                         Choose a password to protect your encryption keys. This is separate from your sign-in
-                        password and is never sent to the server.
+                        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.
                     </p>
                     {error && <Alert>{error}</Alert>}
                     <form onSubmit={handleSetPassword}>

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

@@ -4,13 +4,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { MailboxAutoProvisionAliasOption, autoProvisionMailbox } from "../../../../lib/mail/mailApi.js";
+import { MailboxAutoProvisionAliasOption, 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";
 import { FrameTakeover } from "../../navigation/frameContext.js";
 
-type Status = "checking" | "needs_selection" | "creating" | "unavailable" | "retryable";
+type Status = "checking" | "needs_selection" | "creating" | "unavailable" | "retryable" | "impersonating";
 
 /** What the "Retry" screen says: the server couldn't read its provisioning policy (503) ... */
 const RETRY_POLICY_TEXT = "We couldn\u2019t check whether a mailbox can be set up for you. Please try again.";
@@ -48,7 +48,7 @@ function unavailableReason(err: unknown): string | null {
  * 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 }: { impersonating?: boolean; impersonationBaseUrl?: string }) {
     const client = useApiClient();
     const [status, setStatus] = useState<Status>("checking");
     const [options, setOptions] = useState<MailboxAutoProvisionAliasOption[]>([]);
@@ -62,6 +62,12 @@ export default function MailboxProvisioning() {
     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) => {
@@ -93,6 +99,18 @@ 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
@@ -136,6 +154,16 @@ export default function MailboxProvisioning() {
                 </Button>
             </div>
         );
+    } else if (status === "impersonating") {
+        content = (
+            <>
+                <h1 className="text-lg font-bold uppercase tracking-wide">No mailbox</h1>
+                <p className="text-sm text-text-muted">The user you are viewing as has no mailbox, and none is created for them while you are viewing as them.</p>
+                <Button type="button" onClick={() => void handleReturnToAdmin()} loading={returning} disabled={returning} className="!w-auto self-center">
+                    Return to admin
+                </Button>
+            </>
+        );
     } else if (status === "retryable") {
         content = (
             <>

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

@@ -26,8 +26,10 @@ 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";

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

@@ -2,14 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { Message } from "../../../../lib/mail/mailApi.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 { ConversationSummary, 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";
@@ -120,17 +120,24 @@ export default function ConversationList({
     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<Set<string>>(new Set());
     const [messagesById, setMessagesById] = useState<Record<string, Message[]>>({});
     const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());
     const [errorsById, setErrorsById] = useState<Record<string, string>>({});
+    // The messages each cached thread was fetched for (its `messageUids`): a list that now says otherwise has the thread fetched again.
+    const fetchedForRef = useRef<Record<string, string>>({});
     // 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<Record<string, Message["meetingResponse"]>>({});
 
@@ -138,6 +145,41 @@ export default function ConversationList({
         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<string>();
+        const stale: string[] = [];
+        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: ListedConversation) {
         const id = conversationRowKey(conversation);
         setExpanded((prev) => {
@@ -158,6 +200,7 @@ export default function ConversationList({
             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) =>

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

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