@rapidmx/web-client 0.21.0 → 0.23.0

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,19 +75,21 @@ 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 { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./reading/EncryptedPreview.js";
+import { rememberDecrypted } from "../../mail/decryptedMessages.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
 import MessageMoreMenu, { MessageMenuActions } from "./reading/MessageMoreMenu.js";
 import MessageSourceDialog, { SourceMode, SourceState } from "./reading/MessageSourceDialog.js";
 import { useMessageActions } from "./reading/useMessageActions.js";
 import { saveAsEml } from "./reading/messageExport.js";
-import { buildPrintDocument, printDocument } from "./reading/printMessage.js";
+import { buildConversationPrintDocument, printDocument, type PrintableMessage } from "./reading/printMessage.js";
+import { olderConversationMessages, printHeaders, printableOlderMessage } from "./reading/conversationPrint.js";
 import { type BodyContent, fetchBodyContent } from "./reading/bodyContent.js";
 import { useViewOriginal } from "./reading/viewOriginal.js";
 import { ROW_FOCUS_CLASS, UnreadLabel, dateClass, senderClass } from "./unreadStyle.js";
@@ -508,6 +511,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 +560,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 +568,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 +581,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 +611,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 +629,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 +648,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 +701,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 +735,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 +762,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 +849,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 +867,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 +893,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 +916,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 +937,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 +992,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.");
@@ -1040,7 +1044,14 @@ function MessageDetailContent({
             ? senderKeyState!.conflict
             : undefined;
 
-    const shownSubject = (protectedSubject ?? displaySubject(message.subject)) || "(no subject)";
+    // An encrypted message's outer Subject is only RFC 9788's placeholder: whatever decrypting recovered is the subject, signed or not.
+    const decryptedSubject = message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? security?.subject : undefined;
+    const shownSubject = (protectedSubject ?? decryptedSubject ?? displaySubject(message.subject)) || "(no subject)";
+    useEffect(() => {
+        if (decryptedSubject) {
+            rememberDecrypted(message.uid, message.mailboxUid, { subject: decryptedSubject });
+        }
+    }, [decryptedSubject, message.uid, message.mailboxUid]);
     // What the body area shows. Text or HTML the client recovered from a signed or encrypted message is shown as it is (its own sanitizing
     // happens in `MessageBody`, like every body's); anything else is the server's own `/content`. An encrypted message has nothing worth
     // fetching until it has been decrypted (the server only has the ciphertext), so it shows the skeleton meanwhile.
@@ -1102,24 +1113,34 @@ function MessageDetailContent({
 
     // ---- The "More actions" menu's own rows (Print, View, Save as, Create rule); the rest are `messageActions`. ----
 
-    /** Prints this one message: its header lines and the body the pane shows (what was decrypted or verified here, else the server's sanitized
-     * body), in a frame of its own - see `printMessage.ts`. */
+    /** Prints this message and the conversation it belongs to: the message first, then every earlier one, newest to oldest (the messages that
+     * came after it are left out). Each is the body the reading pane shows - what was decrypted or verified here for this one, else the server's
+     * sanitized body - in a frame of its own; see `printMessage.ts`. */
     async function handlePrint() {
         try {
             const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
-            const format = (list: Recipient[]) => list.map((r) => formatMailAddress(r)).join(", ");
-            const printable = buildPrintDocument({
-                subject: shownSubject,
-                headers: [
-                    { name: "From", value: senderLabel },
-                    { name: "To", value: format(message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")) },
-                    { name: "Cc", value: format(message.recipients.filter((r) => r.type === "cc")) },
-                    { name: "Date", value: new Date(message.receivedDate).toLocaleString() },
-                ],
-                content,
-                attachments,
-                inlineParts: innerAttachments,
-            });
+            const older = await olderConversationMessages(message, client).catch(() => []);
+            const earlier = await Promise.all(
+                older.map((other) =>
+                    printableOlderMessage(other).catch(
+                        (): PrintableMessage => ({
+                            subject: other.subject || "(no subject)",
+                            headers: printHeaders(other, formatMailAddress(other.from)),
+                            content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
+                        }),
+                    ),
+                ),
+            );
+            const printable = buildConversationPrintDocument(shownSubject, [
+                {
+                    subject: shownSubject,
+                    headers: printHeaders(message, senderLabel),
+                    content,
+                    attachments,
+                    inlineParts: innerAttachments,
+                },
+                ...earlier,
+            ]);
             if (printable === undefined) {
                 notify({ kind: "warning", title: "This message is too large to print here" });
                 return;

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]);
 

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

@@ -13,7 +13,7 @@ import {
     HiOutlineTrash,
     HiOutlineXMark,
 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
 import {
     Attachment,
     ComposeRecipientInput,
@@ -28,16 +28,16 @@ import {
     listFolders,
     listMailboxes,
     uploadAttachment,
-} from "@rapidmx/react-shared/mail/mailApi.js";
-import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
-import { buildComposeBodyHtml } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+} from "../../../../../lib/mail/mailApi.js";
+import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
+import { buildComposeBodyHtml } from "../../../../../lib/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
-import { resolveRecipientEncryption, RecipientEncryptionStatus } from "@rapidmx/react-shared/crypto/composeSecurity.js";
-import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
-import { EncryptionPolicy, findActivePublicKey, getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { resolveRecipientEncryption, RecipientEncryptionStatus } from "../../../../../lib/crypto/composeSecurity.js";
+import { getUnlockedKeys, subscribeKeySession } from "../../../../../lib/crypto/keySession.js";
+import { EncryptionPolicy, findActivePublicKey, getEncryptionPolicy, lookupKeys } from "../../../../../lib/crypto/keyvaultApi.js";
 import { useUnlockPrompt } from "../../layout/UnlockPromptProvider.js";
-import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import { notify } from "../../../notifications/store.js";
 import { evaluateEncryptionRequirement } from "./encryptionRequirement.js";
 import { decideSend, SendBlock } from "../../../mail/outbox/sendDecision.js";
@@ -53,9 +53,9 @@ import RecipientInput from "./RecipientInput.js";
 import { parseRecipientList } from "./recipients.js";
 import RichTextEditor from "./RichTextEditor.js";
 import ScheduleSendPicker from "./ScheduleSendPicker.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 Alert from "../../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
 
 export interface ComposeWindowProps {
     session: ComposeSession;
@@ -221,7 +221,11 @@ export default function ComposeWindow({
     const [hasUploads, setHasUploads] = useState(!!resume && resume.attachments.length > 0);
     const isMobile = useIsMobile();
     const { requestUnlock } = useUnlockPrompt();
-    const { openCompose } = useCompose();
+    // Resolved once by `ComposeProvider` (see `ComposeContext.tsx`'s own doc comment on `ComposeContextValue.client`)
+    // rather than calling `useApiClient()` again here - every REST call below (including `startSend()`'s own,
+    // see `sendJob.ts`) passes it through as the trailing `client` argument, `undefined` (the default global
+    // cookie-based fetch) for every existing caller.
+    const { openCompose, client } = useCompose();
     const keyEnv = useKeyEnvironment();
     // Bumped after a successful on-demand unlock to force a re-render - `getUnlockedKeys()` below is a
     // plain read from a module-level store, not React state, so nothing else would pick up the change.
@@ -325,7 +329,7 @@ export default function ComposeWindow({
 
     useEffect(() => {
         let cancelled = false;
-        listMailboxes({ limit: 100 })
+        listMailboxes({ limit: 100 }, client)
             .then((result) => {
                 if (cancelled) {
                     return;
@@ -363,7 +367,7 @@ export default function ComposeWindow({
         async function load() {
             await Promise.all([
                 mailboxLoaded ||
-                    getMailbox(mailboxUid!).then(
+                    getMailbox(mailboxUid!, {}, client).then(
                         (result) => {
                             mailboxLoaded = true;
                             if (!cancelled) {
@@ -373,7 +377,7 @@ export default function ComposeWindow({
                         () => undefined,
                     ),
                 policyLoaded ||
-                    getEncryptionPolicy().then(
+                    getEncryptionPolicy(client).then(
                         (result) => {
                             policyLoaded = true;
                             if (!cancelled) {
@@ -401,7 +405,7 @@ export default function ComposeWindow({
         // Cancellable so a slow response for a mailbox the user has since switched away from can't point
         // the new draft at the wrong mailbox's Drafts folder.
         let cancelled = false;
-        listFolders(mailboxUid)
+        listFolders(mailboxUid, client)
             .then((folders) => {
                 if (!cancelled) {
                     setDraftsFolderUid(folders.find((f) => f.type === "drafts")?.uid);
@@ -441,7 +445,7 @@ export default function ComposeWindow({
         for (const recipient of unchecked) {
             const key = addressCacheKey(recipient.address);
             inFlight.add(key);
-            void lookupKeys(mailbox.uid, recipient.address)
+            void lookupKeys(mailbox.uid, recipient.address, client)
                 .then(
                     (lookup) => ({ lookup }),
                     () => null,
@@ -512,7 +516,7 @@ export default function ComposeWindow({
         if (!mailboxUid || contentReady || defaultSignature) {
             return;
         }
-        listMailSignatures(mailboxUid)
+        listMailSignatures(mailboxUid, {}, client)
             .then((signatures) => {
                 const signature = signatures.find((s) =>
                     signatureContext === "new" ? s.isDefaultForNewMessages : s.isDefaultForReplyForward,
@@ -548,11 +552,11 @@ export default function ComposeWindow({
         // `In-Reply-To`/`References` and groups the message into the thread being answered. Recorded on
         // every draft this window creates, including the replacement one a From switch makes - the thread
         // doesn't change because the sending mailbox did.
-        createDraft(mailboxUid, draftsFolderUid, session.threading)
+        createDraft(mailboxUid, draftsFolderUid, session.threading, client)
             .then((created) => {
                 if (cancelled) {
                     // The sender changed while this was in flight - discard the now-orphaned draft.
-                    void deleteMessage(created.uid, created.version).catch(() => undefined);
+                    void deleteMessage(created.uid, created.version, client).catch(() => undefined);
                     return;
                 }
                 setDraft(created);
@@ -597,12 +601,12 @@ export default function ComposeWindow({
         // Once it's out of `supersededDraftsRef` a landing save can't update `superseded.version` any more.
         const version = saved?.uid === superseded.uid ? saved.version : superseded.version;
         try {
-            await deleteMessage(superseded.uid, version);
+            await deleteMessage(superseded.uid, version, client);
         } catch {
             try {
-                const fresh = await getMessage(superseded.uid);
+                const fresh = await getMessage(superseded.uid, client);
                 if (isStillDraft(fresh, superseded.folderUid)) {
-                    await deleteMessage(fresh.uid, fresh.version);
+                    await deleteMessage(fresh.uid, fresh.version, client);
                 }
             } catch {
                 // Already gone, or the server is unreachable - nothing more to do from here.
@@ -741,7 +745,7 @@ export default function ComposeWindow({
      * current version. */
     async function refreshDraftVersion(uid: string) {
         try {
-            const fresh = await getMessage(uid);
+            const fresh = await getMessage(uid, client);
             setDraft((prev) => (prev?.uid === fresh.uid && fresh.version > prev.version ? { ...prev, version: fresh.version } : prev));
         } catch {
             // Discard's own retry covers a version this couldn't refresh.
@@ -851,7 +855,7 @@ export default function ComposeWindow({
             }
             pendingSaveRef.current = false;
             finishedRef.current = true;
-            if (!startSend(request)) {
+            if (!startSend(request, client)) {
                 finishedRef.current = false;
                 setSendError("This message is already being sent.");
                 return;
@@ -917,7 +921,7 @@ export default function ComposeWindow({
                     bcc: parseAddresses(current.bcc),
                     subject: current.subject,
                     html: current.html,
-                });
+                }, client);
                 lastSavedRef.current = savedKey;
                 saveErrorRef.current = null;
                 // A From switch may have replaced the draft while this was in flight - never resurrect it,
@@ -958,12 +962,12 @@ export default function ComposeWindow({
         const saved = await saveInFlightRef.current;
         const version = Math.max(current.version, saved?.uid === current.uid ? saved.version : 0);
         try {
-            await deleteMessage(current.uid, version);
+            await deleteMessage(current.uid, version, client);
         } catch (err) {
             if (!(err instanceof ApiRequestError) || (err.status !== 404 && err.status !== 409)) {
                 throw err;
             }
-            const fresh = await getMessage(current.uid).catch((getErr: unknown) => {
+            const fresh = await getMessage(current.uid, client).catch((getErr: unknown) => {
                 if (getErr instanceof ApiRequestError && getErr.status === 404) {
                     return null;
                 }
@@ -976,7 +980,7 @@ export default function ComposeWindow({
             if (!isStillDraft(fresh, current.folderUid)) {
                 throw new ApiRequestError(NO_LONGER_A_DRAFT_MESSAGE, 409);
             }
-            await deleteMessage(fresh.uid, fresh.version);
+            await deleteMessage(fresh.uid, fresh.version, client);
         }
     }
 
@@ -1130,7 +1134,7 @@ export default function ComposeWindow({
             await previous;
             try {
                 // Its answer (the new version) is what a later delete waits for through `saveInFlightRef`, like any save's.
-                return await assembleDraft(target.uid, { to: [], cc: [], bcc: [], subject: "", html: "" });
+                return await assembleDraft(target.uid, { to: [], cc: [], bcc: [], subject: "", html: "" }, client);
             } catch {
                 notify({
                     id: `scrub-draft:${target.uid}`,

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

@@ -4,10 +4,10 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect } from "react";
 import { HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
-import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import Skeleton from "../../../../../lib/components/feedback/Skeleton.js";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import type { ComposeSession } from "./ComposeContext.js";
 import { markComposePhase } from "./composePerf.js";
 

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { RefObject } from "react";
-import { EMOJI_CATEGORIES } from "@rapidmx/react-shared/mail/compose/emojiData.js";
-import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+import { EMOJI_CATEGORIES } from "../../../../../lib/mail/compose/emojiData.js";
+import PopoverPortal from "../../../../../lib/components/overlays/PopoverPortal.js";
 
 export interface EmojiPickerProps {
     anchorRef: RefObject<HTMLElement | null>;