@rapidmx/web-client 0.21.0 → 0.22.0

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

@@ -4,12 +4,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { 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 { 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 +97,7 @@ export default function ConversationList({
     swipe,
     newestFirst,
 }: ConversationListProps) {
+    const client = useApiClient();
     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 +129,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) => ({

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

@@ -4,11 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 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 { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
@@ -108,14 +109,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,6 +189,7 @@ 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 [messages, setMessages] = useState<Message[]>([]);
@@ -240,7 +251,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 +267,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 +343,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 +377,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 +391,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));

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. */

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

@@ -16,7 +16,7 @@ import {
     HiOutlineNoSymbol,
     HiOutlineSun,
 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
 import {
     Attachment,
     Folder,
@@ -34,8 +34,8 @@ import {
     moveMessage,
     recallMessage,
     setMessageLabels,
-} from "@rapidmx/react-shared/mail/mailApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+} from "../../../../lib/mail/mailApi.js";
+import { Label } from "../../../../lib/mail/labelsApi.js";
 import {
     buildForwardQuote,
     buildReplyQuote,
@@ -43,25 +43,26 @@ import {
     buildReplyThreading,
     forwardSubject,
     replySubject,
-} from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+} from "../../../../lib/mail/compose/composeQuoting.js";
 import MoveToFolderDialog from "./MoveToFolderDialog.js";
 import InviteCard from "./InviteCard.js";
 import { isCalendarAttachment } from "./invite/inviteFormat.js";
 import { useMessageInvite } from "./invite/inviteStore.js";
-import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
-import type { MessageSecurityResult, SignatureFailureReason } from "@rapidmx/react-shared/crypto/messageSecurity.js";
-import { extractAddresses, type MimeAttachment } from "@rapidmx/react-shared/crypto/mime.js";
-import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
-import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
+import { getUnlockedKeys, subscribeKeySession } from "../../../../lib/crypto/keySession.js";
+import type { MessageSecurityResult, SignatureFailureReason } from "../../../../lib/crypto/messageSecurity.js";
+import { extractAddresses, type MimeAttachment } from "../../../../lib/crypto/mime.js";
+import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "../../../../lib/crypto/keyvaultApi.js";
+import { isLikelyMailingList } from "../../../../lib/crypto/composeSecurity.js";
 import { SenderKeyState, clearPinnedSignerCache, getPinnedSignerFingerprints, getSignerKeyState } from "./pinnedSigners.js";
 import { currentVerificationSeal, getVaultGeneration, sendVerificationSeal } from "./verificationSeals.js";
-import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import { getMyMailboxAccess } from "../../../../lib/mail/mailboxAccessApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import KeyChangeReview from "../contacts/KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, sameFingerprint } from "../contacts/contactKeys.js";
 import { ComposeLateInput, prefetchComposeWindow, useCompose } from "./compose/ComposeContext.js";
 import { loadOriginalMessage, prefetchOriginalMessage } from "./compose/quotedBody.js";
 import { formatRecipient } from "./compose/recipients.js";
-import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress, { RecipientLine } from "./MailAddress.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
@@ -74,10 +75,10 @@ import { useNavigate } from "../../navigation/index.js";
 import { notify } from "../../notifications/store.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import EncryptedBody from "./reading/EncryptedBody.js";
 import { displaySubject } from "./reading/EncryptedPreview.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
@@ -508,6 +509,7 @@ function MessageDetailContent({
     const [nowMs, setNowMs] = useState(() => Date.now());
     const { mailboxes, trackMessageChange } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
+    const client = useApiClient();
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
     // state; see keySession.ts's own doc comment).
@@ -556,7 +558,7 @@ function MessageDetailContent({
         // mailbox's own signing keys when it sent the message itself. A failed lookup means no pins, which can only
         // ever make a signature "signer not verified", never verified.
         const senderAddress = message.from.address;
-        const pinsPromise = getPinnedSignerFingerprints(message.mailboxUid, senderAddress).then(
+        const pinsPromise = getPinnedSignerFingerprints(message.mailboxUid, senderAddress, client).then(
             (fingerprints) => ({ loaded: true, fingerprints }),
             () => ({ loaded: false, fingerprints: [] as string[] }),
         );
@@ -564,9 +566,9 @@ function MessageDetailContent({
         // generation; without either the message is evaluated exactly as before, with no seal. The sender's key records
         // are loaded alongside, so a seal can say when the signer key was later revoked as compromised.
         let keyStatePromise: Promise<SenderKeyState | undefined> | undefined;
-        const loadKeyState = () => (keyStatePromise ??= getSignerKeyState(message.mailboxUid, senderAddress).catch(() => undefined));
+        const loadKeyState = () => (keyStatePromise ??= getSignerKeyState(message.mailboxUid, senderAddress, client).catch(() => undefined));
         const sealContextPromise = getUnlockedKeys(message.mailboxUid)
-            ? getVaultGeneration(message.mailboxUid).then(async (generation) =>
+            ? getVaultGeneration(message.mailboxUid, client).then(async (generation) =>
                   generation === undefined ? undefined : { generation, keyState: await loadKeyState() },
               )
             : undefined;
@@ -577,7 +579,7 @@ function MessageDetailContent({
                 }
                 // The S/MIME code (PKI.js and the ASN.1/X.509 libraries) loads here, only for a message that is signed or
                 // encrypted - it is over half a megabyte, and the pane opens plain messages without it.
-                const messageSecurity = await import("@rapidmx/react-shared/crypto/messageSecurity.js");
+                const messageSecurity = await import("../../../../lib/crypto/messageSecurity.js");
                 const [primaryAddress, ...aliasAddresses] = readerAddressesKey ? readerAddressesKey.split(" ") : [];
                 const ownAddresses = readerAddressesKey.toLowerCase().split(" ");
                 const ownKeys = ownAddresses.includes(senderAddress.toLowerCase()) ? (readerMailbox!.keys ?? []) : [];
@@ -607,7 +609,7 @@ function MessageDetailContent({
                     );
                     if (result.sealToWrite) {
                         // Best effort and in the background: never awaited, never shown.
-                        void sendVerificationSeal(message.uid, result.sealToWrite);
+                        void sendVerificationSeal(message.uid, result.sealToWrite, client);
                     }
                 } else {
                     result = await messageSecurity.evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
@@ -625,7 +627,7 @@ function MessageDetailContent({
                 const keyChanged = signerKeyChanged(result);
                 const [keyState, access] = await Promise.all([
                     keyChanged || (unpinned && UNVERIFIED_SIGNER_STATES.has(result.state)) ? loadKeyState() : undefined,
-                    keyChanged ? getMyMailboxAccess(message.mailboxUid).then((a) => a.canUpdate, () => undefined) : undefined,
+                    keyChanged ? getMyMailboxAccess(message.mailboxUid, client).then((a) => a.canUpdate, () => undefined) : undefined,
                 ]);
                 if (!cancelled) {
                     setSecurity(result);
@@ -644,7 +646,7 @@ function MessageDetailContent({
         return () => {
             cancelled = true;
         };
-    }, [message.uid, message.mailboxUid, message.from.address, message.encrypted, rawEvaluationNeeded, unlockRefresh, readerAddressesKey]);
+    }, [message.uid, message.mailboxUid, message.from.address, message.encrypted, rawEvaluationNeeded, unlockRefresh, readerAddressesKey, client]);
 
     // Whether the body is the locked state right now (an encrypted message this device holds no unlocked keys for), for the subscription below.
     const lockedRef = useRef(false);
@@ -697,7 +699,7 @@ function MessageDetailContent({
 
     async function reloadMessage() {
         try {
-            setReloaded(await getMessage(message.uid));
+            setReloaded(await getMessage(message.uid, client));
             setNowMs(Date.now());
         } catch {
             // Keep showing what we have - the next refused action or lease expiry tries again.
@@ -731,7 +733,7 @@ function MessageDetailContent({
         setTrusting(true);
         setTrustError(null);
         try {
-            await trustSigner(message.mailboxUid, { address, certificate });
+            await trustSigner(message.mailboxUid, { address, certificate }, client);
             clearPinnedSignerCache();
             setTrustConfirmOpen(false);
             setUnlockRefresh((n) => n + 1);
@@ -758,7 +760,7 @@ function MessageDetailContent({
     /** The replying mailbox's own addresses (primary and aliases), which a reply never goes to - from the mail shell's
      * mailbox list, else fetched; none when neither is available. */
     async function ownAddresses(): Promise<string[]> {
-        const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid).catch(() => undefined));
+        const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid, {}, client).catch(() => undefined));
         return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
 
@@ -845,7 +847,7 @@ function MessageDetailContent({
         setRecalling(true);
         setError(null);
         try {
-            const updated = await recallMessage(message.uid);
+            const updated = await recallMessage(message.uid, client);
             setConfirming(false);
             onRecalled?.(updated);
         } catch (err) {
@@ -863,7 +865,7 @@ function MessageDetailContent({
         setCanceling(true);
         setCancelError(null);
         try {
-            const updated = await cancelScheduledSend(message, draftsFolderUid!);
+            const updated = await cancelScheduledSend(message, draftsFolderUid!, client);
             // Keeps a `folder:`-scoped Tier 2 local search from still finding it in its old folder.
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
             // Out of Outbox, into Drafts: both folders' badges.
@@ -889,7 +891,7 @@ function MessageDetailContent({
         setArchiving(true);
         setArchiveError(null);
         try {
-            const updated = await archiveMessage(message.uid);
+            const updated = await archiveMessage(message.uid, client);
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
             trackMessageChange(message, updated).settle();
             onArchived?.(updated);
@@ -912,7 +914,7 @@ function MessageDetailContent({
         setLabelsError(null);
         try {
             const base = message.version >= latestLabelsMessageRef.current.version ? message : latestLabelsMessageRef.current;
-            const updated = await setMessageLabels(base, labelUids);
+            const updated = await setMessageLabels(base, labelUids, client);
             latestLabelsMessageRef.current = updated;
             setLabelsMessage(updated);
             onLabelsChanged?.(updated);
@@ -933,7 +935,7 @@ function MessageDetailContent({
      * passes no `onMoved` would have had nothing moved while the prompt closed as if it had.
      */
     async function handleMove(folderUid: string) {
-        const updated = await moveMessage(message, folderUid);
+        const updated = await moveMessage(message, folderUid, client);
         // Move to, Delete and Report junk are all this: the source folder's badge goes down, the target's up.
         trackMessageChange(message, updated).settle();
         onMoved?.(updated);
@@ -988,7 +990,7 @@ function MessageDetailContent({
         setReceiptBusy(type);
         setReceiptError(null);
         try {
-            const updated = await (action === "approve" ? approveReceipt : declineReceipt)(message.uid, type);
+            const updated = await (action === "approve" ? approveReceipt : declineReceipt)(message.uid, type, client);
             onReceiptHandled?.(updated);
         } catch (err) {
             setReceiptError(err instanceof ApiRequestError ? err.message : "Could not handle this receipt request.");

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

@@ -4,11 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { HiOutlineFolder, HiOutlineFolderPlus } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Folder, createFolder } from "@rapidmx/react-shared/mail/mailApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { Folder, createFolder } 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 Modal from "../../../../lib/components/overlays/Modal.js";
 
 /**
  * The folder types a message can be moved *into* - Outbox is a transient send queue the server owns, and
@@ -95,6 +96,7 @@ export default function MoveToFolderDialog({
     onMove,
     onFolderCreated,
 }: MoveToFolderDialogProps) {
+    const client = useApiClient();
     const [filter, setFilter] = useState("");
     const [creating, setCreating] = useState(false);
     const [newName, setNewName] = useState("");
@@ -152,7 +154,7 @@ export default function MoveToFolderDialog({
         setError(null);
         let created: Folder;
         try {
-            created = await createFolder({ mailboxUid, name: newName.trim(), type: "user" });
+            created = await createFolder({ mailboxUid, name: newName.trim(), type: "user" }, client);
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create that folder.");
             setBusy(false);

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { Message } from "../../../../lib/mail/mailApi.js";
 import { outboxItemStatus } from "../../mail/outbox/outboxState.js";
 
 /**

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
 
 export interface PermanentDeleteDialogProps {
     open: boolean;

package/apps/shared/components/mail/compose/ComposeContext.tsx

@@ -3,8 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { DraftThreading } from "@rapidmx/react-shared/mail/mailApi.js";
-import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { DraftThreading } from "../../../../../lib/mail/mailApi.js";
+import { ApiClient } from "../../../../../lib/util/api.js";
+import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
+import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import { ResumeCompose, registerComposeOpener } from "../../../mail/outbox/composeBridge.js";
 import { markComposePhase } from "./composePerf.js";
 import ComposeWindowPlaceholder from "./ComposeWindowPlaceholder.js";
@@ -169,6 +171,14 @@ export interface OpenComposeInput {
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */
     openCompose: (input: OpenComposeInput) => void;
+    /**
+     * The active account's `ApiClient` (see `useApiClient()`'s own doc comment), resolved once here rather
+     * than by every compose component individually - `ComposeWindow` and everything it renders reach it
+     * through this context's own value instead of each calling `useApiClient()` for itself. `useApiClient()`
+     * remains independently callable (this is additive, not a replacement) - a future consumer that isn't a
+     * descendant of `ComposeProvider` (or doesn't want to depend on it) can still read it directly.
+     */
+    client?: ApiClient;
 }
 
 const ComposeContext = createContext<ComposeContextValue>({ openCompose: () => undefined });
@@ -187,6 +197,7 @@ export function useCompose(): ComposeContextValue {
  */
 export default function ComposeProvider({ children, userUid, trusted }: PropsWithChildren<{ userUid?: string; trusted?: boolean }>) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
+    const client = useApiClient();
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
 
@@ -263,7 +274,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, minimized: !s.minimized } : s)));
     }
 
-    const value = useMemo<ComposeContextValue>(() => ({ openCompose }), []);
+    const value = useMemo<ComposeContextValue>(() => ({ openCompose, client }), [client]);
     // Code with no React context - a failed send's "Open draft" pop-up - opens windows through this.
     useEffect(() => registerComposeOpener((input) => value.openCompose(input)), [value]);