@rapidmx/web-client 0.15.1 → 0.17.0

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -11,8 +11,10 @@ import { 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 AppShell from "../../layout/AppShell.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import { useLocation } from "@rapidrest/react/client";
+import { useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
@@ -20,6 +22,7 @@ export const SETTINGS_SECTIONS = [
     { id: "appearance", href: "/settings/appearance", label: "Appearance" },
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
+    { id: "blocked-senders", href: "/settings/blocked-senders", label: "Blocked & Safe Senders" },
     { id: "signatures", href: "/settings/signatures", label: "Signatures" },
     { id: "labels", href: "/settings/labels", label: "Labels" },
     { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
@@ -57,7 +60,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
     const [drawerOpen, setDrawerOpen] = useState(false);
     // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
     // effect, not during render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
+    const { search } = useLocation();
     const navigate = useNavigate();
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
@@ -73,7 +76,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -82,7 +85,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
         });
     }, [userUid]);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+        primaryMailboxUid(mailboxes, userUid);
     const contextValue = useMemo(() => ({ mailboxUid, mailboxes }), [mailboxUid, mailboxes]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — same as ContactsShell/
     // TasksShell, there's nothing else for a mailbox-less caller to configure here yet.
@@ -110,8 +113,8 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: sections.map((section) => (_jsx("a", { 
                         // `inner` (this whole branch) is only ever computed once `status === "ready"`
                         // and `mailboxUid` has already resolved truthy — a falsy `mailboxUid` returns
-                        // `<MailboxProvisioning />` above instead (and TypeScript's own narrowing of
-                        // this `const` already reflects that, no `!` needed) — so no fallback is
+                        // `<MailboxProvisioning />` above instead (which is what the `!` below records,
+                        // `primaryMailboxUid()` being honest that it may find none) — so no fallback is
                         // needed here, matching this plan's established "dead guard the UI
                         // structurally can't trigger" removal precedent (e.g.
                         // `DomainDetailContent.handleVerify`).
@@ -119,7 +122,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                             "block px-2.5 py-1.5 rounded-sm text-sm",
                             section.id === active ? "bg-primary/10 text-primary-dark font-medium" : "text-text hover:bg-surface-alt",
                         ].join(" "), children: section.label }, section.id))) })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/components/tasks/TasksSidebar.js

@@ -79,5 +79,5 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
     // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
     // the `idPrefix`).
     const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "My Day", count: myDayCount, active: active.type === "myDay", onClick: () => handleSelect({ type: "myDay" }) }), _jsx(NavItem, { label: "Important", count: importantCount, active: active.type === "important", onClick: () => handleSelect({ type: "important" }) }), _jsx(NavItem, { label: "Planned", count: plannedCount, active: active.type === "planned", onClick: () => handleSelect({ type: "planned" }) }), _jsx(NavItem, { label: "Assigned to me", count: assignedToMeCount, active: active.type === "assignedToMe", onClick: () => handleSelect({ type: "assignedToMe" }) }), _jsx(NavItem, { label: "Flagged email", active: active.type === "flagged", onClick: () => handleSelect({ type: "flagged" }) })] }), _jsx(NavItem, { label: "Tasks", count: tasks.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] })] }));
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -11,8 +11,10 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import { useLocation } from "@rapidrest/react/client";
+import { useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const TasksShellContext = createContext({ mailboxes: [] });
 /** Reads the mailbox/folder Tasks is currently showing, as resolved by the enclosing `TasksShell`. */
 export function useTasksShell() {
@@ -35,7 +37,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
     const [drawerOpen, setDrawerOpen] = useState(false);
     // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
     // effect, not during render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
+    const { search } = useLocation();
     const navigate = useNavigate();
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
@@ -51,7 +53,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -60,7 +62,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         });
     }, [userUid]);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+        primaryMailboxUid(mailboxes, userUid);
     useEffect(() => {
         if (!mailboxUid) {
             setFolders([]);
@@ -98,7 +100,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
         // With a single mailbox and no error this column would be empty: no 224 px of nothing beside the tasks' own menu.
         const hasSidebar = mailboxes.length > 1 || !!folderError;
-        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "tasks", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/keyboard/GlobalShortcuts.js

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { accountUrlOf } from "../auth/accountUrl.js";
 import { APP_HREFS, SETTINGS_HREF, isSettingsPath } from "../navigation/appHrefs.js";
-import { useNavigate } from "../navigation/routerContext.js";
+import { useNavigate } from "../navigation/index.js";
 import { SHORTCUTS } from "./keymap.js";
 import { useShortcut } from "./useShortcut.js";
 /**

package/dist/apps/shared/mail/folderCounts.d.ts

@@ -46,6 +46,16 @@ export declare function badgeLabel(badge: FolderBadge): string;
 export declare function inboxUnreadTotal(mailboxFolders: {
     folders: Folder[];
 }[], counts: Record<string, FolderCount>): number;
+/**
+ * The folder types whose unread count is left out of a collapsed sidebar section's heading badge: Drafts and Outbox (their badges
+ * count messages held, not unread mail), and Sent Items, Deleted Items and Junk Email (an unread count there is noise, not mail
+ * to notice). It matches the folders `badgeFor()` shows no unread badge for; every other type - Inbox, Archive, the user's own
+ * folders - counts, so mail that a rule filed out of the Inbox is not overlooked in a hidden section. Change it here to change that.
+ */
+export declare const UNREAD_BADGE_EXCLUDED_FOLDER_TYPES: readonly FolderType[];
+/** The unread messages in the `folders` that carry an unread count (all but `UNREAD_BADGE_EXCLUDED_FOLDER_TYPES`) - what a collapsed
+ * sidebar section shows on its heading, so new mail in a hidden section is still noticed. */
+export declare function unreadBadgeTotal(folders: readonly Folder[], counts: Record<string, FolderCount>): number;
 /** How long after the last change of this page's own has finished a server-published count is trusted again: one published
  * about an earlier state of the folder could otherwise arrive late and put back what the change just took away. */
 export declare const COUNT_QUIET_MS = 1500;

package/dist/apps/shared/mail/folderCounts.js

@@ -51,6 +51,18 @@ export function badgeLabel(badge) {
 export function inboxUnreadTotal(mailboxFolders, counts) {
     return mailboxFolders.reduce((total, entry) => total + entry.folders.filter((folder) => folder.type === "inbox").reduce((sum, folder) => sum + countOfFolder(folder, counts).unread, 0), 0);
 }
+/**
+ * The folder types whose unread count is left out of a collapsed sidebar section's heading badge: Drafts and Outbox (their badges
+ * count messages held, not unread mail), and Sent Items, Deleted Items and Junk Email (an unread count there is noise, not mail
+ * to notice). It matches the folders `badgeFor()` shows no unread badge for; every other type - Inbox, Archive, the user's own
+ * folders - counts, so mail that a rule filed out of the Inbox is not overlooked in a hidden section. Change it here to change that.
+ */
+export const UNREAD_BADGE_EXCLUDED_FOLDER_TYPES = ["drafts", "outbox", "sent_items", "deleted_items", "junk"];
+/** The unread messages in the `folders` that carry an unread count (all but `UNREAD_BADGE_EXCLUDED_FOLDER_TYPES`) - what a collapsed
+ * sidebar section shows on its heading, so new mail in a hidden section is still noticed. */
+export function unreadBadgeTotal(folders, counts) {
+    return folders.reduce((total, folder) => (UNREAD_BADGE_EXCLUDED_FOLDER_TYPES.includes(folder.type) ? total : total + countOfFolder(folder, counts).unread), 0);
+}
 /** How long after the last change of this page's own has finished a server-published count is trusted again: one published
  * about an earlier state of the folder could otherwise arrive late and put back what the change just took away. */
 export const COUNT_QUIET_MS = 1500;

package/dist/apps/shared/mail/folderOfType.d.ts

@@ -0,0 +1,13 @@
+import { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+/** Forgets every remembered folder - for the tests. */
+export declare function clearResolvedFolders(): void;
+/**
+ * A mailbox's own folder of `type` (Junk Email, Deleted Items, Inbox) - the reading pane's counterpart of the mail page's bulk
+ * `resolveFolderOfType()`, so Report junk and Delete on one message go where the selection bar's go.
+ *
+ * Folders belong to a mailbox: only those of `mailboxUid` in `known` count (a message opened from a shared mailbox, or from a search
+ * over several, is filed in ITS mailbox's Junk, never the open one's). The server makes every well-known folder itself, so one the tree
+ * lacks is asked for - the tree may only be out of date - and used, never created twice; only a server that really has none is asked to
+ * make it. `onFound` is told about a folder the tree did not have, so the sidebar picks it up.
+ */
+export declare function resolveFolderOfType(mailboxUid: string, type: Folder["type"], name: string, known?: Folder[], onFound?: (folder: Folder) => void): Promise<string>;

package/dist/apps/shared/mail/folderOfType.js

@@ -0,0 +1,40 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { createFolder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+/** The folders this page load has had to look up or make for a mailbox, so a second Report junk does not ask again. */
+const resolved = new Map();
+/** Forgets every remembered folder - for the tests. */
+export function clearResolvedFolders() {
+    resolved.clear();
+}
+/**
+ * A mailbox's own folder of `type` (Junk Email, Deleted Items, Inbox) - the reading pane's counterpart of the mail page's bulk
+ * `resolveFolderOfType()`, so Report junk and Delete on one message go where the selection bar's go.
+ *
+ * Folders belong to a mailbox: only those of `mailboxUid` in `known` count (a message opened from a shared mailbox, or from a search
+ * over several, is filed in ITS mailbox's Junk, never the open one's). The server makes every well-known folder itself, so one the tree
+ * lacks is asked for - the tree may only be out of date - and used, never created twice; only a server that really has none is asked to
+ * make it. `onFound` is told about a folder the tree did not have, so the sidebar picks it up.
+ */
+export async function resolveFolderOfType(mailboxUid, type, name, known = [], onFound) {
+    const inTree = known.find((folder) => folder.mailboxUid === mailboxUid && folder.type === type);
+    if (inTree) {
+        return inTree.uid;
+    }
+    const key = `${mailboxUid}:${type}`;
+    const remembered = resolved.get(key);
+    if (remembered) {
+        return remembered;
+    }
+    const listed = (await listFolders(mailboxUid)).find((folder) => folder.type === type);
+    if (listed) {
+        onFound?.(listed);
+        resolved.set(key, listed.uid);
+        return listed.uid;
+    }
+    const created = await createFolder({ mailboxUid, name, type });
+    resolved.set(key, created.uid);
+    return created.uid;
+}

package/dist/apps/shared/mail/outbox/outgoingReplies.d.ts

@@ -0,0 +1,80 @@
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailAddressLike } from "@rapidmx/react-shared/mail/mailAddress.js";
+import type { NotificationAction } from "../../notifications/store.js";
+import type { SendRequest } from "./sendJob.js";
+/**
+ * A reply (or forward) this tab has sent, as the open conversation shows it until the server's own copy is in the thread.
+ *
+ * This is a *view* of the background send that is already there, not a second state machine: `startSend()` (`sendJob.ts`) opens an entry, and the
+ * places that already report how a send went close it - the client-side failure (`notifyFailure()`), the server's own outcome (`handleSendEvent()`
+ * in `sendOutcomes.ts`: `send-succeeded`, `send-failed`) and a synchronous send. The Outbox indicator, the pop-ups and this entry therefore agree,
+ * because they are all told by the same code at the same moment.
+ *
+ * Why the message has to be shown from here for a while: a message the server accepted is in Outbox, which has no `conversationId` yet - it is
+ * resolved when the message is relayed and filed in Sent Items (`ScheduledSendJob`), keeping the same `uid`. Until then no fetch of the
+ * conversation can return it, so the thread pane draws it from what was composed.
+ *
+ * `sending` covers everything up to the server's answer (assembling, the request, the queue in Outbox); `failed` is a send that did not go and is
+ * the sender's to resolve (`actions` are the very ones the pop-up offers: Retry, Open draft ...); `sent` is a message the server has relayed and
+ * that is waiting for the thread to be read again to find its Sent Items copy.
+ */
+export type OutgoingState = "sending" | "failed" | "sent";
+export interface OutgoingReply {
+    /** The draft's uid - which is also the uid of the message in Outbox and of its Sent Items copy, and so what the real message replaces this by. */
+    uid: string;
+    mailboxUid: string;
+    /** What the message replies to (`Message.inReplyTo` / `references`): how the pane knows which conversation it belongs to. */
+    inReplyTo?: string;
+    references: string[];
+    sender: MailAddressLike;
+    to: MailAddressLike[];
+    cc: MailAddressLike[];
+    bcc: MailAddressLike[];
+    subject: string;
+    /** The composed body, as the editor wrote it. */
+    html: string;
+    startedAt: number;
+    state: OutgoingState;
+    /** `failed`: why. */
+    failure?: string;
+    /** `failed`: what the sender can do about it. */
+    actions: NotificationAction[];
+    /** `sent`: how many times the thread was read without finding the message - see `settleOutgoing()`. */
+    misses: number;
+}
+/** A sent message that a read of its conversation has not found this many times is not part of that conversation (the server filed it elsewhere). */
+export declare const MAX_SETTLE_MISSES = 2;
+/**
+ * Starts showing `request`'s message in the conversation it replies to - or does nothing for a message that replies to nothing (a new message
+ * starts a conversation of its own, it is never part of an open one) and for a send-later message (it is not sent yet). Called again for the same
+ * message - a Retry - it starts over as `sending`.
+ *
+ * The thread is `request.threading` (the compose session's), else what the draft itself records: a draft opened again from "Open draft" is a
+ * session with no threading of its own, but the server kept it on the message.
+ */
+export declare function trackOutgoing(request: SendRequest): void;
+/** The send did not go: `failure` is why, `actions` what can be done (Retry, Open draft ...). */
+export declare function failOutgoing(uid: string, failure: string, actions: NotificationAction[]): void;
+/** A failed send is being tried again. */
+export declare function markOutgoingSending(uid: string): void;
+/** The server has relayed the message: its Sent Items copy is what the conversation shows next. */
+export declare function markOutgoingSent(uid: string): void;
+/** Stops showing a message - it went back to Drafts to be edited. */
+export declare function forgetOutgoing(uid: string): void;
+/** Whether `reply` continues the conversation `messages` are: it answers one of them, or its `References` chain runs through one. */
+export declare function belongsToThread(reply: OutgoingReply, messages: readonly Pick<Message, "messageId">[]): boolean;
+/** The uids of the messages sent from here whose real copy is in `messages`, the thread as it was just read. */
+export declare function adoptedOutgoing(mailboxUid: string, messages: readonly Message[]): string[];
+/**
+ * Called with a mailbox's conversation as it was just read, `messages` being the whole thread: forgets the messages whose real copy is now in it
+ * (`adoptedOutgoing()`), and gives up on a *sent* message that belongs to this thread but that the read did not find `MAX_SETTLE_MISSES` times in a
+ * row - the server filed it in a conversation of its own, and it is not to be shown here. A message of another conversation is left alone.
+ *
+ * A pane draws the messages it has read *before* it calls this, so that there is never a moment with neither the pending card nor the real one.
+ */
+export declare function settleOutgoing(mailboxUid: string, messages: readonly Message[]): void;
+export declare function getOutgoingReplies(): readonly OutgoingReply[];
+/** The messages this tab has sent that a conversation may still need to show, oldest first. */
+export declare function useOutgoingReplies(): readonly OutgoingReply[];
+/** Forgets everything - for a test. */
+export declare function resetOutgoingReplies(): void;

package/dist/apps/shared/mail/outbox/outgoingReplies.js

@@ -0,0 +1,131 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useSyncExternalStore } from "react";
+/** The most entries kept; the oldest go first. Every entry is a message this tab sent, so this is generous. */
+const MAX_TRACKED = 25;
+/** A sent message that a read of its conversation has not found this many times is not part of that conversation (the server filed it elsewhere). */
+export const MAX_SETTLE_MISSES = 2;
+const NO_REPLIES = [];
+let replies = [];
+let snapshot = replies;
+const listeners = new Set();
+function commit(next) {
+    replies = next;
+    snapshot = next;
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}
+function update(uid, patch) {
+    if (replies.some((reply) => reply.uid === uid)) {
+        commit(replies.map((reply) => (reply.uid === uid ? { ...reply, ...patch } : reply)));
+    }
+}
+/**
+ * Starts showing `request`'s message in the conversation it replies to - or does nothing for a message that replies to nothing (a new message
+ * starts a conversation of its own, it is never part of an open one) and for a send-later message (it is not sent yet). Called again for the same
+ * message - a Retry - it starts over as `sending`.
+ *
+ * The thread is `request.threading` (the compose session's), else what the draft itself records: a draft opened again from "Open draft" is a
+ * session with no threading of its own, but the server kept it on the message.
+ */
+export function trackOutgoing(request) {
+    const source = request.threading ?? request.draft;
+    const references = source.references ?? [];
+    if (request.scheduledSendTime || (!source.inReplyTo && references.length === 0)) {
+        return;
+    }
+    const { mailbox } = request;
+    const reply = {
+        uid: request.draft.uid,
+        mailboxUid: request.mailboxUid,
+        inReplyTo: source.inReplyTo,
+        references,
+        // The mailbox is only unknown when the window's own load of it had not succeeded: "Me" is what a sender is called then.
+        sender: mailbox ? { address: mailbox.primarySmtpAddress, displayName: mailbox.displayName } : { address: "Me" },
+        to: request.to,
+        cc: request.cc,
+        bcc: request.bcc,
+        subject: request.subject,
+        html: request.html,
+        startedAt: Date.now(),
+        state: "sending",
+        actions: [],
+        misses: 0,
+    };
+    commit([...replies.filter((existing) => existing.uid !== reply.uid), reply].slice(-MAX_TRACKED));
+}
+/** The send did not go: `failure` is why, `actions` what can be done (Retry, Open draft ...). */
+export function failOutgoing(uid, failure, actions) {
+    update(uid, { state: "failed", failure, actions });
+}
+/** A failed send is being tried again. */
+export function markOutgoingSending(uid) {
+    update(uid, { state: "sending", failure: undefined, actions: [] });
+}
+/** The server has relayed the message: its Sent Items copy is what the conversation shows next. */
+export function markOutgoingSent(uid) {
+    update(uid, { state: "sent" });
+}
+/** Stops showing a message - it went back to Drafts to be edited. */
+export function forgetOutgoing(uid) {
+    if (replies.some((reply) => reply.uid === uid)) {
+        commit(replies.filter((reply) => reply.uid !== uid));
+    }
+}
+/** Whether `reply` continues the conversation `messages` are: it answers one of them, or its `References` chain runs through one. */
+export function belongsToThread(reply, messages) {
+    return messages.some((message) => !!message.messageId && (message.messageId === reply.inReplyTo || reply.references.includes(message.messageId)));
+}
+/** The uids of the messages sent from here whose real copy is in `messages`, the thread as it was just read. */
+export function adoptedOutgoing(mailboxUid, messages) {
+    return replies.filter((reply) => reply.mailboxUid === mailboxUid && messages.some((message) => message.uid === reply.uid)).map((reply) => reply.uid);
+}
+/**
+ * Called with a mailbox's conversation as it was just read, `messages` being the whole thread: forgets the messages whose real copy is now in it
+ * (`adoptedOutgoing()`), and gives up on a *sent* message that belongs to this thread but that the read did not find `MAX_SETTLE_MISSES` times in a
+ * row - the server filed it in a conversation of its own, and it is not to be shown here. A message of another conversation is left alone.
+ *
+ * A pane draws the messages it has read *before* it calls this, so that there is never a moment with neither the pending card nor the real one.
+ */
+export function settleOutgoing(mailboxUid, messages) {
+    const adopted = new Set(adoptedOutgoing(mailboxUid, messages));
+    const next = [];
+    let changed = adopted.size > 0;
+    for (const reply of replies) {
+        if (adopted.has(reply.uid)) {
+            continue;
+        }
+        if (reply.mailboxUid === mailboxUid && reply.state === "sent" && belongsToThread(reply, messages)) {
+            changed = true;
+            if (reply.misses + 1 < MAX_SETTLE_MISSES) {
+                next.push({ ...reply, misses: reply.misses + 1 });
+            }
+        }
+        else {
+            next.push(reply);
+        }
+    }
+    if (changed) {
+        commit(next);
+    }
+}
+export function getOutgoingReplies() {
+    return snapshot;
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** The messages this tab has sent that a conversation may still need to show, oldest first. */
+export function useOutgoingReplies() {
+    return useSyncExternalStore(subscribe, getOutgoingReplies, () => NO_REPLIES);
+}
+/** Forgets everything - for a test. */
+export function resetOutgoingReplies() {
+    commit([]);
+}

package/dist/apps/shared/mail/outbox/sendJob.d.ts

@@ -1,4 +1,4 @@
-import { Attachment, ComposeRecipientInput, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Attachment, ComposeRecipientInput, DraftThreading, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { RecipientEncryptionStatus } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { EncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import { SendDecisionInput } from "./sendDecision.js";
@@ -34,6 +34,10 @@ export interface SendRequest {
     forcePlaintext: boolean;
     /** Settles when the window's own autosaves have landed, so none can overwrite the assembly below. */
     saved?: Promise<unknown>;
+    /** The thread this message continues (a reply or forward), as the compose session was opened with it - what lets the conversation on screen
+     * show the message as soon as it is sent (see `outgoingReplies.ts`). Absent for a new message, and for a draft opened again, which the draft's own
+     * `inReplyTo`/`references` stand in for. */
+    threading?: DraftThreading;
 }
 /** How long a background send waits for the mailbox / encryption policy it did not have, before it goes ahead treating them as unknown. Nobody waits for it. */
 export declare const CONTEXT_GRACE_MS = 4000;

package/dist/apps/shared/mail/outbox/sendJob.js

@@ -13,6 +13,7 @@ import { policyCanAutoEncrypt } from "../../components/mail/compose/encryptionRe
 import { dismiss, notify } from "../../notifications/store.js";
 import { INLINE_IMAGE_PATTERN, decideSend } from "./sendDecision.js";
 import { beginPendingSend, finishPendingSend, setPendingStage } from "./pendingSends.js";
+import { failOutgoing, forgetOutgoing, markOutgoingSending, markOutgoingSent, trackOutgoing } from "./outgoingReplies.js";
 import { openComposeFromOutside, requestUnlockFromOutside } from "./composeBridge.js";
 import { sendState } from "./sendState.js";
 /** How long a background send waits for the mailbox / encryption policy it did not have, before it goes ahead treating them as unknown. Nobody waits for it. */
@@ -209,7 +210,7 @@ export function describeMessage(subject, recipients) {
 }
 /** Re-opens the compose window around a request's message, with everything as it was typed. */
 export function openDraftFromRequest(request) {
-    return openComposeFromOutside({
+    const opened = openComposeFromOutside({
         mailboxUid: request.mailboxUid,
         resume: {
             draft: request.draft,
@@ -225,6 +226,11 @@ export function openDraftFromRequest(request) {
             encryptRequested: request.encryptRequested,
         },
     });
+    // Being edited again, it is no longer a message on its way in the conversation.
+    if (opened) {
+        forgetOutgoing(request.draft.uid);
+    }
+    return opened;
 }
 function failureNotificationId(draftUid) {
     return `send-failed:${draftUid}`;
@@ -257,6 +263,8 @@ function notifyFailure(request, failure) {
         details: failure.details,
         actions,
     });
+    // The conversation on screen shows the same failure under the message, with the same ways out.
+    failOutgoing(uid, failure.message, actions);
 }
 const SENT_BURST_MS = 6000;
 /** The short "Message sent" confirmation - several sent close together are one pop-up counting up, never a stack of them. */
@@ -280,6 +288,8 @@ export function startSend(request) {
     }
     // The failure of an earlier attempt is resolved by trying again.
     dismiss(failureNotificationId(uid));
+    // A reply or forward is on screen in its conversation from this moment, before any of the work below.
+    trackOutgoing(request);
     const tracker = sendState.countTracker?.(request.mailboxUid);
     void attempt(request).then((outcome) => {
         finishPendingSend(uid);
@@ -294,6 +304,8 @@ export function startSend(request) {
             sendState.queuedListener?.(request.mailboxUid);
         }
         else if (outcome.kind === "sent") {
+            // A server with no queue relayed it before answering: the Sent Items copy exists already.
+            markOutgoingSent(uid);
             notifySent();
         }
         else {
@@ -312,6 +324,7 @@ export function startSend(request) {
 export async function retrySend(request) {
     if (await alreadyAccepted(request)) {
         dismiss(failureNotificationId(request.draft.uid));
+        markOutgoingSending(request.draft.uid);
         notify({ id: `already-sent:${request.draft.uid}`, kind: "info", title: "This message is already on its way", timeoutMs: 5000 });
         return;
     }

package/dist/apps/shared/mail/outbox/sendOutcomes.js

@@ -9,6 +9,7 @@ import { loadOriginalMessage } from "../../components/mail/compose/quotedBody.js
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { dismiss, notify } from "../../notifications/store.js";
 import { beginPendingSend, finishPendingSend, setPendingStage } from "./pendingSends.js";
+import { failOutgoing, forgetOutgoing, markOutgoingSending, markOutgoingSent } from "./outgoingReplies.js";
 import { openComposeFromOutside } from "./composeBridge.js";
 import { describeMessage, forgetRetainedRequest, notifySent, openDraftFromRequest, retainedRequest } from "./sendJob.js";
 /**
@@ -39,6 +40,8 @@ function escapeHtml(text) {
 async function openFailedDraft(event) {
     try {
         const moved = await moveBackToDrafts(event.uid, event.mailboxUid ?? "");
+        // Back in Drafts it is no longer a message on its way in its conversation.
+        forgetOutgoing(event.uid);
         const request = retainedRequest(event.uid);
         if (request) {
             openDraftFromRequest({ ...request, draft: moved });
@@ -84,6 +87,7 @@ async function retryFailed(event) {
         return;
     }
     dismiss(failedId(event.uid));
+    markOutgoingSending(event.uid);
     try {
         setPendingStage(event.uid, "queuing");
         const result = await queueMessageSend(event.uid);
@@ -103,6 +107,8 @@ export function handleSendEvent(event) {
     if (event.action === "send-succeeded") {
         dismiss(retryId(event.uid));
         dismiss(failedId(event.uid));
+        // The conversation on screen swaps the message it drew for the Sent Items copy (a message this tab did not send has nothing drawn).
+        markOutgoingSent(event.uid);
         // The server reports every message it relays, scheduled ones from long ago included: only a message this tab queued in the background is
         // worth a confirmation (several are one pop-up counting up). Anything else - a send-later message going out, another tab's send - is quiet.
         if (retainedRequest(event.uid)) {
@@ -127,15 +133,18 @@ export function handleSendEvent(event) {
         return;
     }
     dismiss(retryId(event.uid));
+    const actions = [
+        { label: "Retry", onClick: () => void retryFailed(event) },
+        { label: "Open draft", onClick: () => void openFailedDraft(event) },
+    ];
     notify({
         id: failedId(event.uid),
         kind: "error",
         title: "This message wasn't sent",
         message: `${what}: ${failure.message}`,
         details: failure.lines,
-        actions: [
-            { label: "Retry", onClick: () => void retryFailed(event) },
-            { label: "Open draft", onClick: () => void openFailedDraft(event) },
-        ],
+        actions,
     });
+    // The conversation on screen shows the same failure under the message, with the same ways out.
+    failOutgoing(event.uid, failure.message, actions);
 }