@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/components/mail/layout/SidebarSection.tsx

@@ -0,0 +1,66 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import { HiChevronDown } from "react-icons/hi2";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+
+export interface SidebarSectionProps {
+    /** Unique per rendering of the sidebar (it is on screen twice on a phone: beside the list and in the drawer): names the folder list the heading controls. */
+    domId: string;
+    /** The heading's text. */
+    label: ReactNode;
+    /** Whether the heading is a toggle at all. Not for a lone mailbox, whose section has nothing to be hidden for. */
+    collapsible: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    /** The unread mail in the section's folders that carry an unread count (see `unreadBadgeTotal()`), shown on the heading while it is collapsed (and only when there is some) so new mail in a hidden section is still noticed. */
+    unread?: number;
+    /** Shown between the heading and the folders, collapsed or not: a failure to load the section's folders is not something to hide. */
+    notice?: ReactNode;
+    /** The section's folder rows. */
+    children: ReactNode;
+}
+
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread = 0, notice, children }: SidebarSectionProps) {
+    const shown = !collapsible || expanded;
+    return (
+        <div>
+            {collapsible ? (
+                <h2 className="mb-1">
+                    <button
+                        type="button"
+                        aria-expanded={expanded}
+                        aria-controls={domId}
+                        onClick={onToggle}
+                        className={[
+                            "flex w-full items-center gap-1 rounded-sm px-2.5 py-0.5 text-left text-xs font-bold uppercase tracking-wide text-text-muted",
+                            "focus-visible:outline-2 focus-visible:outline-primary",
+                            "hover:bg-surface-alt hover:text-text",
+                        ].join(" ")}
+                    >
+                        <HiChevronDown
+                            size={14}
+                            aria-hidden="true"
+                            className={["shrink-0 transition-transform", expanded ? "" : "-rotate-90"].join(" ")}
+                        />
+                        <span className="min-w-0 flex-1 truncate">{label}</span>
+                        {!expanded && unread > 0 && <FolderBadgeChip badge={{ kind: "unread", value: unread }} />}
+                    </button>
+                </h2>
+            ) : (
+                <div className="text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate">{label}</div>
+            )}
+            {notice}
+            <div id={domId} hidden={!shown} className={shown ? "flex flex-col gap-0.5" : "hidden"}>
+                {children}
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/mail/reading/PendingMessageCard.tsx

@@ -0,0 +1,68 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import type { OutgoingReply } from "../../../mail/outbox/outgoingReplies.js";
+import MailAddress, { RecipientLine } from "../MailAddress.js";
+import MessageBody from "./MessageBody.js";
+import { BODY_FONT_STYLE, CardShell, SenderAvatar } from "./MessageCard.js";
+
+/**
+ * A reply or forward that has just been sent, drawn where its message will be once the server has filed it: the sender, who it went to, its body as
+ * it was composed, and one line saying where it is - "Sending...", "Sent", or, when it did not go, "Not sent: <why>" with the same ways out the
+ * pop-up offers (Retry, Open draft ...). It reads like the message's own card, so the real message replaces it without the thread rearranging.
+ *
+ * The body goes through the reading pane's own sanitizing frame (`MessageBody`), exactly as a received message's does.
+ */
+export default function PendingMessageCard({
+    reply,
+    headerRef,
+}: {
+    reply: OutgoingReply;
+    /** Registered so the pane can put the focus here when the message first appears. Focusable, but not in the tab order. */
+    headerRef: (node: HTMLHeadingElement | null) => void;
+}) {
+    const failed = reply.state === "failed";
+    return (
+        <CardShell>
+            <div className="flex items-center gap-3 px-4 py-3">
+                <SenderAvatar from={reply.sender} />
+                <div className="flex-1 min-w-0">
+                    <div className="flex flex-wrap items-baseline justify-between gap-x-2 text-sm">
+                        <h2 ref={headerRef} tabIndex={-1} style={BODY_FONT_STYLE} className="flex-1 min-w-[13rem] font-semibold outline-none focus-visible:outline-2 focus-visible:outline-primary">
+                            <MailAddress recipient={reply.sender} />
+                        </h2>
+                        <div
+                            // Its own element for each: an alert is announced when it appears, which a status that changed its role would not be.
+                            key={failed ? "failed" : "progress"}
+                            role={failed ? "alert" : "status"}
+                            data-testid="pending-message-status"
+                            data-state={reply.state}
+                            className={["flex items-center gap-1.5 text-xs shrink-0", failed ? "font-semibold text-danger" : "text-text-muted"].join(" ")}
+                        >
+                            {reply.state === "sending" && <span aria-hidden="true" className="rr-sending-dot h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />}
+                            <span>{failed ? `Not sent: ${reply.failure}` : reply.state === "sending" ? "Sending…" : "Sent"}</span>
+                        </div>
+                    </div>
+                    <RecipientLine label="To" recipients={reply.to} />
+                    <RecipientLine label="Cc" recipients={reply.cc} />
+                    <RecipientLine label="Bcc" recipients={reply.bcc} />
+                </div>
+            </div>
+            {failed && (
+                <div className="flex flex-wrap gap-2 px-4 pb-3">
+                    {reply.actions.map((action) => (
+                        <Button key={action.label} type="button" variant="secondary" className="!w-auto" onClick={action.onClick}>
+                            {action.label}
+                        </Button>
+                    ))}
+                </div>
+            )}
+            <div className="px-4 pb-4">
+                <MessageBody messageUid={reply.uid} messageVersion={0} title={`Message: ${reply.subject}`} content={{ kind: "html", html: reply.html }} />
+            </div>
+        </CardShell>
+    );
+}

package/apps/shared/components/mail/verificationSeals.ts

@@ -1,125 +1,125 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-/**
- * The web client's side of verification seals (`@rapidmx/react-shared`'s `crypto/verificationSeal.ts`): the vault's
- * current `masterKeyGeneration` a seal is checked and written under, and best-effort seal writes.
- *
- * **Vault generation.** `getVaultGeneration()` reads `KeyVault.masterKeyGeneration` once per mailbox and reuses it for
- * `VAULT_GENERATION_TTL_MS`; a failed read isn't cached. A vault that doesn't report a non-negative integer generation
- * (a server predating it) counts as unavailable, and callers then evaluate without seals at all. The cache is dropped
- * whenever a key session locks (subscribed on first use), so a rekey followed by a re-unlock is picked up.
- *
- * **Writes.** `sendVerificationSeal()` stores `sealToWrite` with `setMessageVerificationSeal()` and never rejects. Each
- * message is written at most once per master key generation per page session - a seal carries the time it was built,
- * so every evaluation of the same message produces a different one, and sending each would only draw 409s. A `409`
- * (the server kept its seal), `400`, `403` or `404` is final; any other failure (a network error) lets a later
- * evaluation try again, never a retry loop. A stored seal is remembered (`currentVerificationSeal()`) so a message
- * reopened before its list copy is refreshed opens that seal instead of building another.
- */
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getKeyVault } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
-import { subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
-import { type Message, setMessageVerificationSeal } from "@rapidmx/react-shared/mail/mailApi.js";
-import type { SealToWrite } from "@rapidmx/react-shared/crypto/messageSecurity.js";
-
-/** How long one mailbox's vault generation is reused before it is read again. */
-export const VAULT_GENERATION_TTL_MS = 60_000;
-
-/** Statuses after which a seal write is never attempted again for that message and generation. */
-const FINAL_WRITE_STATUSES = new Set([400, 403, 404, 409]);
-
-const generationCache = new Map<string, { loadedAt: number; generation: Promise<number | undefined> }>();
-/** `messageUid:generation` for every write sent (or in flight) this session. */
-const attemptedWrites = new Set<string>();
-/** Seals this session stored, by message uid. */
-const storedSeals = new Map<string, SealToWrite>();
-
-let lockSubscribed = false;
-
-/** Forgets the cached vault generations and this session's seal writes - in tests. */
-export function clearVerificationSealCache(): void {
-    generationCache.clear();
-    attemptedWrites.clear();
-    storedSeals.clear();
-}
-
-function subscribeToLocksOnce(): void {
-    if (lockSubscribed) {
-        return;
-    }
-    lockSubscribed = true;
-    subscribeKeySession((event) => {
-        if (event.state === "locked") {
-            generationCache.clear();
-        }
-    });
-}
-
-/** Reads `mailboxUid`'s current vault `masterKeyGeneration`, uncached: `undefined` when the vault can't be read or
- * reports none. Never rejects. */
-export async function readVaultGeneration(mailboxUid: string): Promise<number | undefined> {
-    try {
-        const { masterKeyGeneration } = await getKeyVault(mailboxUid);
-        return Number.isSafeInteger(masterKeyGeneration) && masterKeyGeneration! >= 0 ? masterKeyGeneration : undefined;
-    } catch {
-        return undefined;
-    }
-}
-
-/** `mailboxUid`'s current vault `masterKeyGeneration`, or `undefined` when it can't be read. Never rejects. */
-export function getVaultGeneration(mailboxUid: string): Promise<number | undefined> {
-    subscribeToLocksOnce();
-    const entry = generationCache.get(mailboxUid);
-    if (entry && Date.now() - entry.loadedAt <= VAULT_GENERATION_TTL_MS) {
-        return entry.generation;
-    }
-    const created = { loadedAt: Date.now(), generation: readVaultGeneration(mailboxUid) };
-    generationCache.set(mailboxUid, created);
-    void created.generation.then((generation) => {
-        // Only a readable generation is reused; an unavailable one is read again next time.
-        if (generation === undefined && generationCache.get(mailboxUid) === created) {
-            generationCache.delete(mailboxUid);
-        }
-    });
-    return created.generation;
-}
-
-/** The seal to check `message` against: the one this session stored for it when that is newer than the message's own
- * copy (which may predate the write), else the message's `verificationSeal`/`verificationSealGeneration`. */
-export function currentVerificationSeal(message: Pick<Message, "uid" | "verificationSeal" | "verificationSealGeneration">): {
-    seal?: string;
-    sealGeneration?: number;
-} {
-    const stored = storedSeals.get(message.uid);
-    if (stored && (message.verificationSealGeneration === undefined || stored.masterKeyGeneration > message.verificationSealGeneration)) {
-        return { seal: stored.seal, sealGeneration: stored.masterKeyGeneration };
-    }
-    return { seal: message.verificationSeal, sealGeneration: message.verificationSealGeneration };
-}
-
-/** Whether `sendVerificationSeal()` would still send a seal for `messageUid` at `generation`. */
-export function verificationSealPending(messageUid: string, generation: number): boolean {
-    return !attemptedWrites.has(`${messageUid}:${generation}`);
-}
-
-/** Stores `sealToWrite` on `messageUid`, best effort - see this module's doc comment. Resolves `true` when a request was
- * sent, `false` when the write was skipped as already attempted. Never rejects. */
-export async function sendVerificationSeal(messageUid: string, sealToWrite: SealToWrite): Promise<boolean> {
-    const key = `${messageUid}:${sealToWrite.masterKeyGeneration}`;
-    if (attemptedWrites.has(key)) {
-        return false;
-    }
-    attemptedWrites.add(key);
-    try {
-        await setMessageVerificationSeal(messageUid, sealToWrite.seal, sealToWrite.masterKeyGeneration);
-        storedSeals.set(messageUid, sealToWrite);
-    } catch (err) {
-        // `VerificationSealConflictError` is an `ApiRequestError` with status 409.
-        if (!(err instanceof ApiRequestError && FINAL_WRITE_STATUSES.has(err.status))) {
-            attemptedWrites.delete(key);
-        }
-    }
-    return true;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The web client's side of verification seals (`@rapidmx/react-shared`'s `crypto/verificationSeal.ts`): the vault's
+ * current `masterKeyGeneration` a seal is checked and written under, and best-effort seal writes.
+ *
+ * **Vault generation.** `getVaultGeneration()` reads `KeyVault.masterKeyGeneration` once per mailbox and reuses it for
+ * `VAULT_GENERATION_TTL_MS`; a failed read isn't cached. A vault that doesn't report a non-negative integer generation
+ * (a server predating it) counts as unavailable, and callers then evaluate without seals at all. The cache is dropped
+ * whenever a key session locks (subscribed on first use), so a rekey followed by a re-unlock is picked up.
+ *
+ * **Writes.** `sendVerificationSeal()` stores `sealToWrite` with `setMessageVerificationSeal()` and never rejects. Each
+ * message is written at most once per master key generation per page session - a seal carries the time it was built,
+ * so every evaluation of the same message produces a different one, and sending each would only draw 409s. A `409`
+ * (the server kept its seal), `400`, `403` or `404` is final; any other failure (a network error) lets a later
+ * evaluation try again, never a retry loop. A stored seal is remembered (`currentVerificationSeal()`) so a message
+ * reopened before its list copy is refreshed opens that seal instead of building another.
+ */
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getKeyVault } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
+import { type Message, setMessageVerificationSeal } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { SealToWrite } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+
+/** How long one mailbox's vault generation is reused before it is read again. */
+export const VAULT_GENERATION_TTL_MS = 60_000;
+
+/** Statuses after which a seal write is never attempted again for that message and generation. */
+const FINAL_WRITE_STATUSES = new Set([400, 403, 404, 409]);
+
+const generationCache = new Map<string, { loadedAt: number; generation: Promise<number | undefined> }>();
+/** `messageUid:generation` for every write sent (or in flight) this session. */
+const attemptedWrites = new Set<string>();
+/** Seals this session stored, by message uid. */
+const storedSeals = new Map<string, SealToWrite>();
+
+let lockSubscribed = false;
+
+/** Forgets the cached vault generations and this session's seal writes - in tests. */
+export function clearVerificationSealCache(): void {
+    generationCache.clear();
+    attemptedWrites.clear();
+    storedSeals.clear();
+}
+
+function subscribeToLocksOnce(): void {
+    if (lockSubscribed) {
+        return;
+    }
+    lockSubscribed = true;
+    subscribeKeySession((event) => {
+        if (event.state === "locked") {
+            generationCache.clear();
+        }
+    });
+}
+
+/** Reads `mailboxUid`'s current vault `masterKeyGeneration`, uncached: `undefined` when the vault can't be read or
+ * reports none. Never rejects. */
+export async function readVaultGeneration(mailboxUid: string): Promise<number | undefined> {
+    try {
+        const { masterKeyGeneration } = await getKeyVault(mailboxUid);
+        return Number.isSafeInteger(masterKeyGeneration) && masterKeyGeneration! >= 0 ? masterKeyGeneration : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+/** `mailboxUid`'s current vault `masterKeyGeneration`, or `undefined` when it can't be read. Never rejects. */
+export function getVaultGeneration(mailboxUid: string): Promise<number | undefined> {
+    subscribeToLocksOnce();
+    const entry = generationCache.get(mailboxUid);
+    if (entry && Date.now() - entry.loadedAt <= VAULT_GENERATION_TTL_MS) {
+        return entry.generation;
+    }
+    const created = { loadedAt: Date.now(), generation: readVaultGeneration(mailboxUid) };
+    generationCache.set(mailboxUid, created);
+    void created.generation.then((generation) => {
+        // Only a readable generation is reused; an unavailable one is read again next time.
+        if (generation === undefined && generationCache.get(mailboxUid) === created) {
+            generationCache.delete(mailboxUid);
+        }
+    });
+    return created.generation;
+}
+
+/** The seal to check `message` against: the one this session stored for it when that is newer than the message's own
+ * copy (which may predate the write), else the message's `verificationSeal`/`verificationSealGeneration`. */
+export function currentVerificationSeal(message: Pick<Message, "uid" | "verificationSeal" | "verificationSealGeneration">): {
+    seal?: string;
+    sealGeneration?: number;
+} {
+    const stored = storedSeals.get(message.uid);
+    if (stored && (message.verificationSealGeneration === undefined || stored.masterKeyGeneration > message.verificationSealGeneration)) {
+        return { seal: stored.seal, sealGeneration: stored.masterKeyGeneration };
+    }
+    return { seal: message.verificationSeal, sealGeneration: message.verificationSealGeneration };
+}
+
+/** Whether `sendVerificationSeal()` would still send a seal for `messageUid` at `generation`. */
+export function verificationSealPending(messageUid: string, generation: number): boolean {
+    return !attemptedWrites.has(`${messageUid}:${generation}`);
+}
+
+/** Stores `sealToWrite` on `messageUid`, best effort - see this module's doc comment. Resolves `true` when a request was
+ * sent, `false` when the write was skipped as already attempted. Never rejects. */
+export async function sendVerificationSeal(messageUid: string, sealToWrite: SealToWrite): Promise<boolean> {
+    const key = `${messageUid}:${sealToWrite.masterKeyGeneration}`;
+    if (attemptedWrites.has(key)) {
+        return false;
+    }
+    attemptedWrites.add(key);
+    try {
+        await setMessageVerificationSeal(messageUid, sealToWrite.seal, sealToWrite.masterKeyGeneration);
+        storedSeals.set(messageUid, sealToWrite);
+    } catch (err) {
+        // `VerificationSealConflictError` is an `ApiRequestError` with status 409.
+        if (!(err instanceof ApiRequestError && FINAL_WRITE_STATUSES.has(err.status))) {
+            attemptedWrites.delete(key);
+        }
+    }
+    return true;
+}