@rapidmx/web-client 0.21.0 → 0.23.0

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

@@ -5,11 +5,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
-import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Drawer from "../../../../../lib/components/overlays/Drawer.js";
+import { listFolders, listMailboxes } from "../../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "../../../../../lib/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
 import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
@@ -27,6 +28,7 @@ export function useContactsShell() {
  * list/detail UI is `apps/www/contacts/index.tsx`'s own content, rendered as `children` here.
  */
 export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
+    const client = useApiClient();
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
@@ -50,7 +52,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
         if (!userUid) {
             return;
         }
-        listMailboxes({ limit: 100 })
+        listMailboxes({ limit: 100 }, client)
             .then((result) => {
             setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
@@ -68,7 +70,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
             return;
         }
         setFolderError(null);
-        listFolders(mailboxUid)
+        listFolders(mailboxUid, client)
             .then(setFolders)
             .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's contacts folder."));
     }, [mailboxUid]);

package/dist/apps/shared/components/escrow/layout/EscrowShell.js

@@ -6,12 +6,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../../styles/app.css";
 import { useEffect, useState } from "react";
 import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
-import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
-import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import { listMatters } from "../../../../../lib/admin/mattersApi.js";
+import { useSessionRefresh } from "../../../../../lib/auth/session.js";
+import { getBranding } from "../../../../../lib/branding/brandingApi.js";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import BottomTabBar from "../../../../../lib/components/navigation/BottomTabBar.js";
 import UserMenu from "../../layout/UserMenu.js";
 import RailIcon from "../../layout/RailIcon.js";
 import AppearanceProvider from "../../../appearance/AppearanceProvider.js";

package/dist/apps/shared/components/forms/StringListField.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 /**
  * A plain, controlled add/remove list-of-strings editor — the same visual add-row/per-item-remove shape
  * `MemberListCard` already established for a `DistributionList`'s `memberAddresses`, but operating on a

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

@@ -1,8 +1,8 @@
 import "../../styles/app.css";
 import React, { PropsWithChildren } from "react";
 import type { IconType } from "react-icons";
-import { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import type { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { NavItem } from "../../../../lib/components/navigation/BottomTabBar.js";
+import type { Branding } from "../../../../lib/branding/brandingApi.js";
 import { PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export declare const LOGOUT_TIMEOUT_MS = 3000;

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

@@ -7,14 +7,15 @@ import "../../styles/app.css";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlinePuzzlePiece, HiOutlineUsers, } from "react-icons/hi2";
 import { useRouter } from "@rapidrest/react/client";
-import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
-import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
-import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
-import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
-import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeout.js";
+import { useSessionRefresh } from "../../../../lib/auth/session.js";
+import { getSetupStatus } from "../../../../lib/admin/setupApi.js";
+import { stopImpersonating } from "../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import useBranding from "../../../../lib/branding/useBranding.js";
+import { useIdleKeyTimeout } from "../../../../lib/crypto/useIdleKeyTimeout.js";
 import ComposeProvider from "../mail/compose/ComposeContext.js";
 import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
-import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import BottomTabBar from "../../../../lib/components/navigation/BottomTabBar.js";
 import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
 import RailIcon from "./RailIcon.js";
 import AppearanceProvider from "../../appearance/AppearanceProvider.js";
@@ -22,8 +23,8 @@ import { clearAppearanceCache } from "../../appearance/appearanceCache.js";
 import UserMenu from "./UserMenu.js";
 import { UnlockPromptProvider } from "./UnlockPromptProvider.js";
 import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localIndexRpcClient.js";
-import { authApiFetch, setApiUnauthorizedObserver } from "@rapidmx/react-shared/util/api.js";
-import { destroyUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import { authApiFetch, setApiUnauthorizedObserver } from "../../../../lib/util/api.js";
+import { destroyUnlockedKeys } from "../../../../lib/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
 import { useInAppFrame } from "../../navigation/frameContext.js";
@@ -89,6 +90,7 @@ export function appRailItems(pluginNav) {
  * page, so that moving between apps replaces only `children` - see `AppShell` below for what a page's own shell renders instead.
  */
 export function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, busy, hideChrome, children, }) {
+    const client = useApiClient();
     const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
     // The keyboard shortcuts dialog: opened by `?`/Ctrl+/ (`GlobalShortcuts`) and by the account menu's item.
     const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -141,7 +143,7 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
         if (!userUid || impersonating || !trusted) {
             return;
         }
-        getSetupStatus()
+        getSetupStatus(client)
             .then((status) => {
             if (status.required) {
                 window.location.href = "/admin/setup";

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import type { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import type { Branding } from "../../../../lib/branding/brandingApi.js";
 /** The attribute that marks the elements React fills in (`{USER_MENU}`, `{APP_TITLE}`). Stripped from the author's own HTML, so only
  * this module's placeholders can carry it. */
 export declare const SLOT_ATTRIBUTE = "data-rr-slot";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
 export interface KeyEnrollmentGateProps {
     /** Undefined while the caller's mailbox hasn't resolved yet (or has none) - renders `children`
      * unchanged in that case, so this component can be mounted unconditionally at a stable tree

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

@@ -4,18 +4,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import { enrollKey, getKeyVault, VaultAlreadyInitializedError } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import FormField from "../../../../lib/components/forms/FormField.js";
+import { enrollKey, getKeyVault, VaultAlreadyInitializedError } from "../../../../lib/crypto/keyvaultApi.js";
 import { UnopenableKeysNotice, unlockErrorMessage } from "./UnlockPromptProvider.js";
 import { FrameTakeover } from "../../navigation/frameContext.js";
 import { RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock } from "./RecoveryCodeUnlock.js";
-import { ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE, getUnlockedKeys, unlockWithPassword, } from "@rapidmx/react-shared/crypto/keySession.js";
-import { buildAad, generateMasterKey, sealWithKey } from "@rapidmx/react-shared/crypto/masterKey.js";
-import { buildPasswordWrap, buildRecoveryWraps } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
-import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "@rapidmx/react-shared/crypto/keys.js";
+import { ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE, getUnlockedKeys, unlockWithPassword, } from "../../../../lib/crypto/keySession.js";
+import { buildAad, generateMasterKey, sealWithKey } from "../../../../lib/crypto/masterKey.js";
+import { buildPasswordWrap, buildRecoveryWraps } from "../../../../lib/crypto/masterKeyWraps.js";
+import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "../../../../lib/crypto/keys.js";
 const MIN_PASSWORD_LENGTH = 8;
 async function provisionEncryptionKey(mailboxUid, mailboxAddress, password) {
     const mk = generateMasterKey();

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

@@ -4,10 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { autoProvisionMailbox } 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 { ApiRequestError } from "../../../../lib/util/api.js";
+import { autoProvisionMailbox } from "../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { FrameTakeover } from "../../navigation/frameContext.js";
 /** What the "Retry" screen says: the server couldn't read its provisioning policy (503) ... */
 const RETRY_POLICY_TEXT = "We couldn\u2019t check whether a mailbox can be set up for you. Please try again.";
@@ -43,6 +44,7 @@ function unavailableReason(err) {
  * administrator they ask can tell why - see `unavailableReason()`.
  */
 export default function MailboxProvisioning() {
+    const client = useApiClient();
     const [status, setStatus] = useState("checking");
     const [options, setOptions] = useState([]);
     const [selected, setSelected] = useState("");
@@ -54,7 +56,7 @@ export default function MailboxProvisioning() {
     const [attempt, setAttempt] = useState(0);
     useEffect(() => {
         setStatus("checking");
-        autoProvisionMailbox()
+        autoProvisionMailbox(undefined, client)
             .then((result) => {
             if (result.status === "needs_selection") {
                 // `autoProvision()` only ever returns this status with a non-empty cross product of
@@ -93,7 +95,7 @@ export default function MailboxProvisioning() {
         setStatus("creating");
         setError(null);
         try {
-            await autoProvisionMailbox({ alias: option.alias, domain: option.domain });
+            await autoProvisionMailbox({ alias: option.alias, domain: option.domain }, client);
             window.location.reload();
         }
         catch (err) {

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

@@ -8,7 +8,7 @@
  * on the unlock straight away, and then show `RecoveryFollowUpModal` for the follow-up steps.
  */
 import React from "react";
-import { type PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
 /** The same minimum every other "set an encryption password" form in this app uses. */
 export declare const MIN_PASSWORD_LENGTH = 8;
 /** Where recovery codes are regenerated. */

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

@@ -13,15 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * on the unlock straight away, and then show `RecoveryFollowUpModal` for the follow-up steps.
  */
 import { useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getUnlockedKeys, unlockWithRecoveryCode } from "@rapidmx/react-shared/crypto/keySession.js";
-import { getKeyVault } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
-import { KeysLockedError } from "@rapidmx/react-shared/crypto/masterKey.js";
-import { PasswordWrapReplaceError, consumeRecoveryCode, replacePasswordWrap, } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { getUnlockedKeys, unlockWithRecoveryCode } from "../../../../lib/crypto/keySession.js";
+import { getKeyVault } from "../../../../lib/crypto/keyvaultApi.js";
+import { KeysLockedError } from "../../../../lib/crypto/masterKey.js";
+import { PasswordWrapReplaceError, consumeRecoveryCode, replacePasswordWrap, } from "../../../../lib/crypto/masterKeyWraps.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import FormField from "../../../../lib/components/forms/FormField.js";
 /** The same minimum every other "set an encryption password" form in this app uses. */
 export const MIN_PASSWORD_LENGTH = 8;
 /** Where recovery codes are regenerated. */

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { UnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
-import type { PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { UnlockedKeys } from "../../../../lib/crypto/keySession.js";
+import type { PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
 /** Shown instead of "Incorrect password" when the password was right but the mailbox's encryption key itself
  * won't open (`UnopenableEncryptionKeyError`) - retrying can't fix that, so it must not read as a typo. */
 export declare const UNOPENABLE_ENCRYPTION_KEY_MESSAGE = "Your password is correct, but one of your keys couldn't be opened, so encrypted mail can't be read or sent from this mailbox. Trying again won't help - contact support.";

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

@@ -4,11 +4,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { createContext, useCallback, useContext, useRef, useState } from "react";
-import { getUnlockedKeys, unlockWithPassword, UnopenableEncryptionKeyError, } from "@rapidmx/react-shared/crypto/keySession.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { getUnlockedKeys, unlockWithPassword, UnopenableEncryptionKeyError, } from "../../../../lib/crypto/keySession.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import FormField from "../../../../lib/components/forms/FormField.js";
 import { RECOVERY_CODE_ERROR, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock, } from "./RecoveryCodeUnlock.js";
 /** Shown instead of "Incorrect password" when the password was right but the mailbox's encryption key itself
  * won't open (`UnopenableEncryptionKeyError`) - retrying can't fix that, so it must not read as a typo. */

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

@@ -5,10 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { 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, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
-import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "../../../../lib/auth/profileApi.js";
+import { listMailboxes } 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";
@@ -42,6 +43,7 @@ function Avatar({ profile, initials, large }) {
  */
 export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, showMailLink, unseenErrors = 0, }) {
     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);
@@ -93,7 +95,7 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
         }
         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((list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []), () => !cancelled && setOwnListing([]));
+        listMailboxes({ limit: 50 }, client).then((list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []), () => !cancelled && setOwnListing([]));
         return () => {
             cancelled = true;
         };

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { ConversationSummary } from "@rapidmx/react-shared/mail/conversationsApi.js";
+import { Message } from "../../../../lib/mail/mailApi.js";
+import { ConversationSummary } from "../../../../lib/mail/conversationsApi.js";
 /** A conversation row of the list. `mailboxUid` is set only by a view that merges several mailboxes ("All Mailboxes"), whose rows are
  * each from a different one; a list of one mailbox's own leaves it out and every row is that mailbox's. */
 export type ListedConversation = ConversationSummary & {

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

@@ -3,13 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
-import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
-import { 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 { 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";
@@ -35,6 +37,19 @@ function participantList(conversation) {
  * its own name.
  */
 export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }) {
+    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(new Set());
     const [messagesById, setMessagesById] = useState({});
     const [loadingIds, setLoadingIds] = useState(new Set());
@@ -65,7 +80,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             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) => ({
             ...prev,
@@ -90,7 +105,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
             const ticked = selectedConversationIds?.has(conversation.conversationId) ?? false;
-            return (_jsxs("li", { children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
+            return (_jsxs("li", { children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
                                             uid: conversation.latestMessageUid,
                                             meetingMethod: conversation.latestMeetingMethod ?? undefined,
                                             meetingResponse: answers[conversation.latestMessageUid] ??
@@ -100,7 +115,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
                                         }, onResponded: answered, className: "mr-4" })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
                                 const message = messageOverrides?.[fetched.uid] ?? fetched;
                                 const messageUnread = isUnread(message);
-                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: { ...message, meetingResponse: answers[message.uid] ?? message.meetingResponse }, onResponded: (updated) => {
+                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || decrypted[message.uid]?.preview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: { ...message, meetingResponse: answers[message.uid] ?? message.meetingResponse }, onResponded: (updated) => {
                                                 answered(updated);
                                                 onMeetingResponded?.(updated);
                                             }, className: "ml-8 mr-4" })] }, message.uid));

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { ConversationSummary } from "@rapidmx/react-shared/mail/conversationsApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+import { Folder, Message } from "../../../../lib/mail/mailApi.js";
+import { ConversationSummary } from "../../../../lib/mail/conversationsApi.js";
+import { Label } from "../../../../lib/mail/labelsApi.js";
 /** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
 export declare const THREAD_PAGE_SIZE = 100;
 /**

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

@@ -5,12 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
-import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { listAttachments } from "../../../../lib/mail/mailApi.js";
+import { listConversationMessages } from "../../../../lib/mail/conversationsApi.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";
@@ -65,14 +67,14 @@ function scrollingAncestor(node) {
  * 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, conversationId) {
+async function loadThread(mailboxUid, conversationId, client) {
     const messages = [];
     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,
-        });
+        }, client);
         messages.push(...page);
         // A short page is the last one; a full page means asking for another.
         more = page.length === THREAD_PAGE_SIZE;
@@ -123,8 +125,10 @@ function hasFocusRing(element) {
  */
 export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, shortcuts, }) {
     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([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -181,7 +185,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             return;
         }
         setLoading(true);
-        loadThread(mailboxUid, conversationId)
+        loadThread(mailboxUid, conversationId, client)
             .then((loaded) => {
             if (generation !== generationRef.current)
                 return;
@@ -200,7 +204,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             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
     // messages arrive after the click that selected one of them; the ref guard keeps a later change to
@@ -277,7 +281,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                 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 }));
@@ -311,7 +315,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                 });
             }
         }
-    }, [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
      * is added at the top, and the reader's expanded and collapsed cards are left as they are. A message this tab sent - which the server has
@@ -324,7 +328,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             return;
         }
         const generation = generationRef.current;
-        loadThread(mailboxUid, id).then((loaded) => {
+        loadThread(mailboxUid, id, client).then((loaded) => {
             if (generation !== generationRef.current)
                 return;
             const current = loaded.messages.filter((message) => !removedRef.current.has(message.uid));
@@ -421,7 +425,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     if (!conversation) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
     }
-    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;
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsx(SubjectCard, { subject: subject, meta: loading