@rapidmx/web-client 0.10.0 → 0.12.0

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

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { OutboxFolderStatus, outboxLabel } from "../../mail/outbox/outboxState.js";
+
+export interface OutboxBadgeProps {
+    /** How many messages the Outbox holds: the folder's own count, which already includes what this tab has just sent. */
+    total: number;
+    /** What they are doing, when known (`useOutboxStatus()`). */
+    status?: OutboxFolderStatus;
+    /** How many of this mailbox's messages this tab is still handing to the server. */
+    pendingHere: number;
+}
+
+/**
+ * The Outbox's count, next to its name: a small pill. While anything is on its way it says so - an animated dot and an accent colour (the dot's
+ * animation is CSS, off under `prefers-reduced-motion`); when a message failed and is waiting for the user it is red; otherwise it is the plain
+ * count every "how many are in here" folder shows. Screen readers get the same as text ("2 messages sending"), in a polite live region so a
+ * change - a message going out, a failure - is announced.
+ */
+export default function OutboxBadge({ total, status, pendingHere }: OutboxBadgeProps) {
+    const failed = status?.failed ?? 0;
+    const inFlight = (status ? status.sending + status.retrying : 0) + pendingHere;
+    const state = failed > 0 ? "failed" : inFlight > 0 ? "sending" : "idle";
+    const label = outboxLabel(total, status, pendingHere);
+    return (
+        <span
+            data-testid="outbox-badge"
+            data-state={state}
+            title={label}
+            aria-live="polite"
+            className={[
+                "inline-flex items-center gap-1 rounded-pill px-1.5 py-0.5 text-xs",
+                state === "failed" ? "bg-danger font-bold text-white" : state === "sending" ? "bg-primary/15 font-bold text-primary-dark" : "font-medium text-text-muted",
+            ].join(" ")}
+        >
+            {state === "sending" && <span aria-hidden="true" className="rr-sending-dot h-1.5 w-1.5 rounded-full bg-primary" />}
+            <span aria-hidden="true">{total}</span>
+            <span className="sr-only"> {label}</span>
+        </span>
+    );
+}

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

@@ -0,0 +1,31 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import { outboxItemStatus } from "../../mail/outbox/outboxState.js";
+
+/**
+ * The state line an Outbox list row carries under its subject: "Sending...", "Retrying (attempt 2, at 10:15)", "Not sent: <reason>" or
+ * "Scheduled for ...". Read from the message's own `scheduledSend*` fields (see `outboxItemStatus()`), so it follows the list as the server's
+ * events refresh it. A failed one is the one that needs the user: red, and its reason is spelled out.
+ */
+export default function OutboxRowStatus({ message }: { message: Message }) {
+    const status = outboxItemStatus(message);
+    const at = status.at === undefined ? "" : new Date(status.at).toLocaleString();
+    const text =
+        status.state === "failed"
+            ? `Not sent: ${status.error}`
+            : status.state === "retrying"
+              ? `Retrying (attempt ${status.attempts + 1}${at ? `, ${at}` : ""})`
+              : status.state === "scheduled"
+                ? `Scheduled for ${at}`
+                : "Sending…";
+    return (
+        <div data-testid="outbox-row-status" data-state={status.state} className={["flex items-center gap-1.5 text-xs", status.state === "failed" ? "font-semibold text-danger" : "text-text-muted"].join(" ")}>
+            {status.state === "sending" && <span aria-hidden="true" className="rr-sending-dot h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />}
+            <span className="truncate">{text}</span>
+        </div>
+    );
+}

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

@@ -2,12 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { PropsWithChildren, createContext, useContext, useEffect, useMemo, useState } from "react";
+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 { ResumeCompose, registerComposeOpener } from "../../../mail/outbox/composeBridge.js";
 import { markComposePhase } from "./composePerf.js";
 import ComposeWindowPlaceholder from "./ComposeWindowPlaceholder.js";
 
+/** The CSS variable (on `<html>`) that holds how far down the screen the open compose windows start, in px. */
+export const COMPOSE_TOP_VAR = "--rr-compose-top";
+
 type ComposeWindowComponent = typeof import("./ComposeWindow.js").default;
 
 let loadedComposeWindow: ComposeWindowComponent | undefined;
@@ -102,6 +106,8 @@ export interface ComposeSession {
     quotePending?: boolean;
     /** What `OpenComposeInput.pending` resolved with, once it has - see `ComposeLateInput`. */
     late?: ComposeLateInput;
+    /** See `OpenComposeInput.resume`. */
+    resume?: ResumeCompose;
     minimized: boolean;
 }
 
@@ -155,6 +161,9 @@ export interface OpenComposeInput {
      * until it resolves.
      */
     pending?: Promise<ComposeLateInput | undefined>;
+    /** Re-opens a message that was already composed - a failed send's "Open draft": the window continues that server draft, with every field
+     * exactly as it was typed, instead of starting a new one. */
+    resume?: ResumeCompose;
 }
 
 export interface ComposeContextValue {
@@ -181,6 +190,26 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
 
+    // The top edge of the compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
+    const windowsRef = useRef<HTMLDivElement>(null);
+    const hasSessions = sessions.length > 0;
+    useEffect(() => {
+        const element = windowsRef.current;
+        if (!element) {
+            return;
+        }
+        const publish = () => document.documentElement.style.setProperty(COMPOSE_TOP_VAR, `${Math.round(element.getBoundingClientRect().top)}px`);
+        publish();
+        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(publish);
+        observer?.observe(element);
+        window.addEventListener("resize", publish);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener("resize", publish);
+            document.documentElement.style.removeProperty(COMPOSE_TOP_VAR);
+        };
+    }, [hasSessions]);
+
     function openCompose({
         mailboxUid,
         to,
@@ -192,6 +221,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         encrypt,
         threading,
         pending,
+        resume,
     }: OpenComposeInput) {
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
@@ -209,6 +239,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
                 signatureContext,
                 suppressSigning,
                 quotePending: !!pending,
+                resume,
                 minimized: false,
             },
         ]);
@@ -233,6 +264,8 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     }
 
     const value = useMemo<ComposeContextValue>(() => ({ openCompose }), []);
+    // Code with no React context - a failed send's "Open draft" pop-up - opens windows through this.
+    useEffect(() => registerComposeOpener((input) => value.openCompose(input)), [value]);
 
     // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
     // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
@@ -247,7 +280,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         <ComposeContext.Provider value={value}>
             {children}
             {sessions.length > 0 && (
-                <div className="fixed bottom-0 right-6 flex items-end gap-3 z-50">
+                <div ref={windowsRef} className="fixed bottom-0 right-6 flex items-end gap-3 z-50">
                     {sessions.map((session) => {
                         const hidden = isMobile && !session.minimized && session.id !== lastNonMinimizedId;
                         return (