@rapidmx/web-client 0.21.0 → 0.23.0

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

@@ -4,10 +4,11 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import useIsMobile from "../../../../lib/util/useIsMobile.js";
 import { HiOutlineArrowUturnLeft, HiOutlineShieldCheck } from "react-icons/hi2";
-import { formatProfileName, getMyProfile, getMyUsername, Profile, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
-import { listMailboxes, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { formatProfileName, getMyProfile, getMyUsername, Profile, profileInitials } from "../../../../lib/auth/profileApi.js";
+import { listMailboxes, Mailbox } from "../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
 import { DEFAULT_TRUSTED_ROLES, lookUpAdminAccess } from "../../auth/adminAccess.js";
 import { ariaKeyShortcuts } from "../../keyboard/format.js";
@@ -114,6 +115,7 @@ export default function UserMenu({
     unseenErrors = 0,
 }: UserMenuProps) {
     const env = useKeyEnvironment();
+    const client = useApiClient();
     // A phone has no keyboard to speak of, so the shortcuts list (and the dialog it opens) has nothing to offer there.
     const isMobile = useIsMobile();
     const [open, setOpen] = useState(false);
@@ -167,7 +169,7 @@ export default function UserMenu({
         }
         let cancelled = false;
         // A failure (no mail server, no access) is just "no mailbox name" - the username is asked for next.
-        listMailboxes({ limit: 50 }).then(
+        listMailboxes({ limit: 50 }, client).then(
             (list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []),
             () => !cancelled && setOwnListing([]),
         );

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

@@ -2,14 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+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 } from "./reading/EncryptedPreview.js";
-import { ConversationSummary, listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
+import { EncryptedPreview, conversationLooksEncrypted, displaySubject } from "./reading/EncryptedPreview.js";
+import { decryptForDisplay, 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";
 import SwipeRow from "./SwipeRow.js";
 import InviteRowChip from "./invite/InviteRowChip.js";
@@ -96,6 +98,19 @@ export default function ConversationList({
     swipe,
     newestFirst,
 }: ConversationListProps) {
+    const client = useApiClient();
+    // What this device has decrypted of the encrypted messages on screen: their real subjects and previews.
+    const decrypted = useDecryptedMessages();
+    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.
+    useEffect(() => {
+        for (const conversation of conversations) {
+            if (conversationLooksEncrypted(conversation)) {
+                void decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
+            }
+        }
+    }, [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());
@@ -127,7 +142,7 @@ export default function ConversationList({
             delete next[id];
             return next;
         });
-        listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId)
+        listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId, {}, client)
             .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
             .catch((err) =>
                 setErrorsById((prev) => ({
@@ -224,10 +239,10 @@ export default function ConversationList({
                                             {new Date(conversation.latestDate).toLocaleDateString()}
                                         </span>
                                     </div>
-                                    <div className={["text-sm truncate", subjectClass(unread)].join(" ")}>{conversation.subject || "(no subject)"}</div>
+                                    <div className={["text-sm truncate", subjectClass(unread)].join(" ")}>{decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)"}</div>
                                     <div className="text-xs text-text-muted truncate font-normal">
                                         {/* An encrypted latest message has no preview (the server never had its plaintext): say so, with a lock, not nothing. */}
-                                        {conversationLooksEncrypted(conversation) ? <EncryptedPreview /> : conversation.latestPreview}
+                                        {conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || <EncryptedPreview /> : conversation.latestPreview}
                                     </div>
                                     <div className="flex items-center gap-2 mt-1 text-xs text-text-muted font-normal">
                                         {conversation.messageCount > 1 && <span>{conversation.messageCount} messages</span>}
@@ -299,7 +314,7 @@ export default function ConversationList({
                                                 </span>
                                             </div>
                                             <div className="flex items-center gap-2 text-xs text-text-muted font-normal">
-                                                <span className="truncate">{message.bodyPreview || (message.encrypted ? <EncryptedPreview /> : null)}</span>
+                                                <span className="truncate">{message.bodyPreview || decrypted[message.uid]?.preview || (message.encrypted ? <EncryptedPreview /> : null)}</span>
                                                 {message.hasAttachments && (
                                                     <HiOutlinePaperClip size={12} aria-label="Has attachments" />
                                                 )}

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

@@ -4,13 +4,15 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Attachment, Folder, Message, listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
-import { ConversationSummary, listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { ApiClient, ApiRequestError } from "../../../../lib/util/api.js";
+import { Attachment, Folder, Message, listAttachments } from "../../../../lib/mail/mailApi.js";
+import { ConversationSummary, listConversationMessages } from "../../../../lib/mail/conversationsApi.js";
+import { Label } from "../../../../lib/mail/labelsApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
 import MessageDetailPane from "./MessageDetailPane.js";
-import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
@@ -108,14 +110,23 @@ function scrollingAncestor(node: HTMLElement): HTMLElement {
  * The pane reads newest first always, whatever the *list* is sorted by: it is the reading order for mail,
  * and it means the message a conversation row stands for is the entry at the top.
  */
-async function loadThread(mailboxUid: string, conversationId: string): Promise<{ messages: Message[]; truncated: boolean }> {
+async function loadThread(
+    mailboxUid: string,
+    conversationId: string,
+    client?: ApiClient,
+): Promise<{ messages: Message[]; truncated: boolean }> {
     const messages: Message[] = [];
     let more = true;
     while (more && messages.length < THREAD_MESSAGE_LIMIT) {
-        const page = await listConversationMessages(mailboxUid, conversationId, {
-            page: messages.length / THREAD_PAGE_SIZE,
-            limit: THREAD_PAGE_SIZE,
-        });
+        const page = await listConversationMessages(
+            mailboxUid,
+            conversationId,
+            {
+                page: messages.length / THREAD_PAGE_SIZE,
+                limit: THREAD_PAGE_SIZE,
+            },
+            client,
+        );
         messages.push(...page);
         // A short page is the last one; a full page means asking for another.
         more = page.length === THREAD_PAGE_SIZE;
@@ -179,8 +190,10 @@ export default function ConversationThreadPane({
     shortcuts,
 }: ConversationThreadPaneProps) {
     const { trackMessageChange, live } = useMailShell();
+    const client = useApiClient();
     // The replies and forwards this tab has sent, drawn at the top of the thread they continue until the server's own copy is in it.
     const outgoing = useOutgoingReplies();
+    const decryptedMessages = useDecryptedMessages();
     const [messages, setMessages] = useState<Message[]>([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState<Record<string, Attachment[]>>({});
     const [expandedUids, setExpandedUids] = useState<Set<string>>(new Set());
@@ -240,7 +253,7 @@ export default function ConversationThreadPane({
             return;
         }
         setLoading(true);
-        loadThread(mailboxUid, conversationId)
+        loadThread(mailboxUid, conversationId, client)
             .then((loaded) => {
                 if (generation !== generationRef.current) return;
                 loadedIdRef.current = conversationId;
@@ -256,7 +269,7 @@ export default function ConversationThreadPane({
             .finally(() => {
                 if (generation === generationRef.current) setLoading(false);
             });
-    }, [conversationId, mailboxUid]);
+    }, [conversationId, mailboxUid, client]);
 
     // Opening the thread, and opening a different message of the same thread, both set the run of expanded
     // messages and ask for that message to be scrolled to. `messages` is a dependency because the thread's
@@ -332,7 +345,7 @@ export default function ConversationThreadPane({
             if (!expandedUids.has(uid)) continue;
             if (message.hasAttachments && !attachmentsRequestedRef.current.has(uid)) {
                 attachmentsRequestedRef.current.add(uid);
-                listAttachments(message.folderUid, uid)
+                listAttachments(message.folderUid, uid, client)
                     .then((loaded) => {
                         if (generation === generationRef.current) {
                             setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded }));
@@ -366,7 +379,7 @@ export default function ConversationThreadPane({
                 });
             }
         }
-    }, [expandedUids, messages]);
+    }, [expandedUids, messages, client]);
 
     /**
      * Reads the thread again, quietly: what is on screen stays until the answer is here (a read that fails changes nothing), a message that arrived
@@ -380,7 +393,7 @@ export default function ConversationThreadPane({
             return;
         }
         const generation = generationRef.current;
-        loadThread(mailboxUid, id).then(
+        loadThread(mailboxUid, id, client).then(
             (loaded) => {
                 if (generation !== generationRef.current) return;
                 const current = loaded.messages.filter((message) => !removedRef.current.has(message.uid));
@@ -484,7 +497,10 @@ export default function ConversationThreadPane({
     if (!conversation) {
         return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
     }
-    const subject = displaySubject(conversation.subject) || "(no subject)";
+    // An encrypted thread's subject is the placeholder until one of its messages has been decrypted here; the newest one that has says it.
+    const decryptedSubject =
+        conversation.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? messages.map((message) => decryptedMessages[message.uid]?.subject).find(Boolean) : undefined;
+    const subject = (decryptedSubject ?? displaySubject(conversation.subject)) || "(no subject)";
     // The newest message that is open carries the Reply / Forward buttons at the foot of its card.
     const footerUid = messages.find((message) => expandedUids.has(message.uid))?.uid;
 

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

@@ -13,10 +13,11 @@ import {
     proposeNewTime,
     removeMessageInvite,
     respondToMessageInvite,
-} from "@rapidmx/react-shared/calendar/inviteApi.js";
-import { guestPermissionsOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+} from "../../../../lib/calendar/inviteApi.js";
+import { guestPermissionsOf } from "../../../../lib/calendar/calendarApi.js";
+import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import EventDescriptionView from "../calendar/EventDescriptionView.js";
 import RequestChangeForm from "../calendar/RequestChangeForm.js";
 import { VISIBILITY_LABEL, describeGuestPermissions } from "../calendar/eventFormat.js";
@@ -96,6 +97,7 @@ export interface InviteCardProps {
  * An answer that arrives after the message changed or this was unmounted is dropped.
  */
 export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardProps) {
+    const client = useApiClient();
     const { invite, setInvite } = useMessageInvite(messageUid);
     const [pending, setPending] = useState<Pending | null>(null);
     const [proposing, setProposing] = useState(false);
@@ -125,7 +127,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
     }
 
     async function sendProposal(proposal: ProposedTime) {
-        if (await run("propose", "Couldn't send the proposed time", () => proposeNewTime(messageUid, proposal))) {
+        if (await run("propose", "Couldn't send the proposed time", () => proposeNewTime(messageUid, proposal, client))) {
             setProposing(false);
             setProposed(true);
         }
@@ -283,7 +285,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
                                         aria-busy={pending === response || undefined}
                                         loading={pending === response}
                                         disabled={busy || current}
-                                        onClick={() => void run(response, failure, () => respondToMessageInvite(messageUid, response))}
+                                        onClick={() => void run(response, failure, () => respondToMessageInvite(messageUid, response, client))}
                                     >
                                         {current && <HiOutlineCheck size={14} aria-hidden="true" />}
                                         {label}
@@ -310,7 +312,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
                             aria-busy={pending === "acceptProposal" || undefined}
                             loading={pending === "acceptProposal"}
                             disabled={busy}
-                            onClick={() => void run("acceptProposal", "Couldn't accept the proposed time", () => acceptProposal(messageUid))}
+                            onClick={() => void run("acceptProposal", "Couldn't accept the proposed time", () => acceptProposal(messageUid, client))}
                         >
                             Accept proposal
                         </Button>
@@ -324,7 +326,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
                             loading={pending === "add"}
                             disabled={busy}
                             // A published event has no organizer to answer, so adding it is accepting it: the server sends no reply.
-                            onClick={() => void run("add", "Couldn't add this event to your calendar", () => respondToMessageInvite(messageUid, "accepted"))}
+                            onClick={() => void run("add", "Couldn't add this event to your calendar", () => respondToMessageInvite(messageUid, "accepted", client))}
                         >
                             Add to calendar
                         </Button>
@@ -337,7 +339,7 @@ export default function InviteCard({ messageUid, headingLevel = 2 }: InviteCardP
                             aria-busy={pending === "remove" || undefined}
                             loading={pending === "remove"}
                             disabled={busy}
-                            onClick={() => void run("remove", "Couldn't remove this meeting from your calendar", () => removeMessageInvite(messageUid))}
+                            onClick={() => void run("remove", "Couldn't remove this meeting from your calendar", () => removeMessageInvite(messageUid, client))}
                         >
                             Remove from calendar
                         </Button>

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ComponentType, useEffect, useState } from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { ReadingPaneSkeleton } from "./reading/MessageCard.js";
 import type MessageDetailPaneType from "./MessageDetailPane.js";
 import type ConversationThreadPaneType from "./ConversationThreadPane.js";

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { MailAddressLike, formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+import { MailAddressLike, formatMailAddress, splitMailAddress } from "../../../../lib/mail/mailAddress.js";
 
 export interface MailAddressProps {
     /** A message's `from`, a recipient, a conversation participant. */

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

@@ -4,8 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { HiOutlineAdjustmentsHorizontal, HiOutlineBarsArrowDown, HiOutlineStop } from "react-icons/hi2";
-import { MessageListFilter, MessageListSort, MessageSortOrder } from "@rapidmx/react-shared/mail/mailApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+import { MessageListFilter, MessageListSort, MessageSortOrder } from "../../../../lib/mail/mailApi.js";
+import { Label } from "../../../../lib/mail/labelsApi.js";
 import MenuButton, { MenuSectionSpec } from "./MenuButton.js";
 import { NewLabelDialog, labelSections, useLabelDraft } from "./labelMenu.js";
 import {

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+import { Folder, Message } from "../../../../lib/mail/mailApi.js";
+import { Label } from "../../../../lib/mail/labelsApi.js";
 import LabelMenuButton from "./labelMenu.js";
 import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";

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

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { HiCheck, HiChevronDown, HiChevronLeft, HiChevronRight, HiMinus } from "react-icons/hi2";
-import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+import PopoverPortal from "../../../../lib/components/overlays/PopoverPortal.js";
 
 /** 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. */