@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -6,6 +6,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attachment,
     ComposeRecipientInput,
+    DraftThreading,
     Mailbox,
     Message,
     assembleDraft,
@@ -26,6 +27,7 @@ import { policyCanAutoEncrypt } from "../../components/mail/compose/encryptionRe
 import { NotificationAction, dismiss, notify } from "../../notifications/store.js";
 import { INLINE_IMAGE_PATTERN, SendBlock, SendDecisionInput, 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 { OutboxCountTracker, sendState } from "./sendState.js";
 
@@ -60,6 +62,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. */
@@ -311,7 +317,7 @@ export function describeMessage(subject: string, recipients: string): string {
 
 /** Re-opens the compose window around a request's message, with everything as it was typed. */
 export function openDraftFromRequest(request: SendRequest): boolean {
-    return openComposeFromOutside({
+    const opened = openComposeFromOutside({
         mailboxUid: request.mailboxUid,
         resume: {
             draft: request.draft,
@@ -327,6 +333,11 @@ export function openDraftFromRequest(request: SendRequest): boolean {
             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: string): string {
@@ -363,6 +374,8 @@ function notifyFailure(request: SendRequest, failure: Failure): void {
         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 = 6_000;
@@ -389,6 +402,8 @@ export function startSend(request: SendRequest): boolean {
     }
     // 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);
@@ -402,6 +417,8 @@ export function startSend(request: SendRequest): boolean {
             retain(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 {
             notify({
@@ -420,6 +437,7 @@ export function startSend(request: SendRequest): boolean {
 export async function retrySend(request: SendRequest): Promise<void> {
     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: 5_000 });
         return;
     }

package/apps/shared/mail/outbox/sendOutcomes.ts

@@ -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";
 
@@ -45,6 +46,8 @@ function escapeHtml(text: string): string {
 async function openFailedDraft(event: SendEvent): Promise<void> {
     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 });
@@ -90,6 +93,7 @@ async function retryFailed(event: SendEvent): Promise<void> {
         return;
     }
     dismiss(failedId(event.uid));
+    markOutgoingSending(event.uid);
     try {
         setPendingStage(event.uid, "queuing");
         const result = await queueMessageSend(event.uid);
@@ -108,6 +112,8 @@ export function handleSendEvent(event: SendEvent): void {
     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)) {
@@ -132,15 +138,18 @@ export function handleSendEvent(event: SendEvent): void {
         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);
 }

package/apps/shared/mail/primaryMailbox.ts

@@ -0,0 +1,71 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Which of the caller's mailboxes is "theirs", and the order every list of them is shown in - the one definition the mail, calendar,
+ * contacts, tasks and settings shells, the compose window's From picker and the account menu all use, so a shared mailbox that happens
+ * to sort first (or that the server lists first) is never the one an app opens on or a picker defaults to.
+ *
+ * An **own** mailbox is one whose `ownerUserUid` is the signed-in user.
+ *
+ * A **shared** mailbox is any other one the caller merely has access to: an ownerless (shared/organization) mailbox, or a delegate grant on
+ * somebody else's (`isSharedWithMe()`).
+ *
+ * The **primary** mailbox is the caller's own mailbox - the earliest created, when they own several - else the first mailbox that isn't
+ * shared, else the first one there is.
+ *
+ * `orderMailboxes()` puts the primary mailbox first, then the caller's other mailboxes, then the shared ones, each group alphabetical.
+ */
+import { isSharedWithMe, type Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+
+/** Whether `mailbox` is the signed-in user's own. */
+export function isOwnMailbox(mailbox: Mailbox, userUid: string | undefined): boolean {
+    return !!userUid && mailbox.ownerUserUid === userUid;
+}
+
+/** Whether `mailbox` is one the caller only has access to (an ownerless one, or somebody else's shared with them). */
+export function isSharedMailbox(mailbox: Mailbox, userUid: string | undefined): boolean {
+    if (isOwnMailbox(mailbox, userUid)) {
+        return false;
+    }
+    // The server says how the caller reaches a mailbox (`accessRole`); an older one doesn't, and then a mailbox that isn't the known
+    // caller's own is somebody else's.
+    return mailbox.accessRole ? isSharedWithMe(mailbox) : !!userUid || isSharedWithMe(mailbox);
+}
+
+function createdAt(mailbox: Mailbox): number {
+    const time = Date.parse(mailbox.dateCreated);
+    return Number.isNaN(time) ? Infinity : time;
+}
+
+/** The caller's own mailboxes, earliest created first (the given order among ones created together). */
+export function ownMailboxes(mailboxes: readonly Mailbox[], userUid: string | undefined): Mailbox[] {
+    return mailboxes.filter((mailbox) => isOwnMailbox(mailbox, userUid)).sort((a, b) => createdAt(a) - createdAt(b));
+}
+
+/** The mailbox to open and to default pickers to: see the rules at the top of this file. `undefined` only for no mailboxes at all. */
+export function primaryMailbox(mailboxes: readonly Mailbox[], userUid: string | undefined): Mailbox | undefined {
+    return ownMailboxes(mailboxes, userUid)[0] ?? mailboxes.find((mailbox) => !isSharedMailbox(mailbox, userUid)) ?? mailboxes[0];
+}
+
+/** `primaryMailbox()`'s uid. */
+export function primaryMailboxUid(mailboxes: readonly Mailbox[], userUid: string | undefined): string | undefined {
+    return primaryMailbox(mailboxes, userUid)?.uid;
+}
+
+/** `mailboxes` in display order: the primary mailbox, then the caller's other mailboxes, then the shared ones - each group by name. Never
+ * changes the list it is given. */
+export function orderMailboxes(mailboxes: readonly Mailbox[], userUid: string | undefined): Mailbox[] {
+    const primary = primaryMailbox(mailboxes, userUid);
+    const rank = (mailbox: Mailbox) => (mailbox === primary ? 0 : isSharedMailbox(mailbox, userUid) ? 2 : 1);
+    // Tolerates a mailbox that says nothing of its name or address (an older server's, or a test fixture's).
+    const name = (mailbox: Mailbox) => mailbox.displayName ?? "";
+    const address = (mailbox: Mailbox) => mailbox.primarySmtpAddress ?? "";
+    return [...mailboxes].sort(
+        (a, b) =>
+            rank(a) - rank(b) ||
+            name(a).localeCompare(name(b), undefined, { sensitivity: "base" }) ||
+            address(a).localeCompare(address(b)),
+    );
+}

package/apps/shared/mail/useCollapsedSections.ts

@@ -0,0 +1,146 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Which of the Mail sidebar's sections - "All mailboxes" and one per mailbox - are open, and the reader's own choices about it.
+ *
+ * A section the reader has never touched follows the **default rule**: "All mailboxes" and the signed-in user's primary mailbox
+ * (`primaryMailboxUid()`) are open, every other mailbox is collapsed - so a mailbox that is newly shared with them arrives closed.
+ * Once they toggle a section the choice is remembered for that section, replacing the default, whatever the default later says.
+ *
+ * **Every** section can be collapsed, the one holding the open folder and the primary mailbox included, and a collapsed one stays collapsed
+ * across reloads even while its own folder is the selected one: the toggle always toggles and always remembers.
+ *
+ * The one exception is *navigation*: when the section holding the open folder (`activeId`) **changes** - the reader picks a folder in
+ * another section, or a search result or a link lands in one - that section is shown open, so the folder just highlighted is not hidden
+ * from them. That is an in-memory override of this page view, never written as the reader's choice: it does not apply to the first
+ * section the page resolves (a reload lands on whatever was chosen), and it ends when they navigate to yet another section. Toggling
+ * the section it opened forgets the override and remembers the reader's new choice (the opposite of what was showing).
+ *
+ * The choices are kept per signed-in user, per device, in `localStorage` (`rapidmx:mail-sidebar-collapsed:<userUid>`), the way
+ * `listPreferences.ts` keeps the list arrangement: `{ "<section id>": <collapsed> }`. Every read tolerates a missing, corrupt or
+ * blocked store (and keeps only the booleans of a partly-valid one), every write swallows its failure - a blocked store only means the
+ * choices do not survive a reload.
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
+
+const STORAGE_KEY_PREFIX = "rapidmx:mail-sidebar-collapsed:";
+
+/** The id of the "All mailboxes" section; every mailbox's section is its uid. */
+export const ALL_MAILBOXES_SECTION = "all";
+
+/** What the reader chose per section: `true` collapsed, `false` open. A section that is not there follows the default rule. */
+export type SectionChoices = Record<string, boolean>;
+
+/** The `localStorage` key one user's choices are kept under. */
+export function collapsedSectionsKey(userUid: string): string {
+    return `${STORAGE_KEY_PREFIX}${userUid}`;
+}
+
+/** Reads a user's stored choices - none for an unknown user, a missing entry, unparsable JSON, something that is not an object, or a store that throws. */
+export function readSectionChoices(userUid: string | undefined): SectionChoices {
+    if (!userUid) {
+        return {};
+    }
+    let stored: unknown;
+    try {
+        const raw = localStorage.getItem(collapsedSectionsKey(userUid));
+        stored = raw === null ? null : JSON.parse(raw);
+    } catch {
+        return {};
+    }
+    if (!stored || typeof stored !== "object" || Array.isArray(stored)) {
+        return {};
+    }
+    // Only what is a real choice: a value that is not a boolean falls back to the default for its own section, not for all of them.
+    return Object.fromEntries(Object.entries(stored).filter((entry): entry is [string, boolean] => typeof entry[1] === "boolean"));
+}
+
+/** Stores a user's choices. Best-effort - see this module's own doc comment. */
+export function writeSectionChoices(userUid: string | undefined, choices: SectionChoices): void {
+    if (!userUid) {
+        return;
+    }
+    try {
+        localStorage.setItem(collapsedSectionsKey(userUid), JSON.stringify(choices));
+    } catch {
+        // Best-effort - see this module's own doc comment.
+    }
+}
+
+/** Whether a section is open by the reader's choice, or by the default rule where they have made none (a navigation's override not considered). */
+export function sectionChosenOpen(id: string, choices: SectionChoices, primaryUid: string | undefined): boolean {
+    const collapsed = choices[id];
+    return collapsed === undefined ? id === ALL_MAILBOXES_SECTION || id === primaryUid : !collapsed;
+}
+
+export interface SidebarSectionsOptions {
+    /** The signed-in user, whose choices these are; `undefined` keeps them for this page view only. */
+    userUid: string | undefined;
+    /** The user's primary mailbox, which - with "All mailboxes" - is open until they choose otherwise. */
+    primaryUid: string | undefined;
+    /**
+     * The section holding the folder that is open: `ALL_MAILBOXES_SECTION` for an aggregate view, else that mailbox's uid; `undefined`
+     * while that is not known yet (the address not read, the mailboxes not loaded). Moving from one section to another opens the new one
+     * (see this module's doc comment); the first section that becomes known does not.
+     */
+    activeId: string | undefined;
+}
+
+export interface SidebarSections {
+    /** Whether the section shows its folders. */
+    isExpanded: (id: string) => boolean;
+    /** Opens a collapsed section, collapses an open one, and remembers it as the reader's choice. */
+    toggle: (id: string) => void;
+}
+
+/** See this module's doc comment. */
+export function useSidebarSections({ userUid, primaryUid, activeId }: SidebarSectionsOptions): SidebarSections {
+    const [loaded, setLoaded] = useState(() => ({ userUid, choices: readSectionChoices(userUid) }));
+    let current = loaded;
+    if (loaded.userUid !== userUid) {
+        // Another user signed in on this page: theirs are not the last one's choices.
+        current = { userUid, choices: readSectionChoices(userUid) };
+        setLoaded(current);
+    }
+    // The section the last navigation opened, if any: derived while rendering from the change of `activeId` (no effect, so the section is
+    // already open in the render that highlights its folder). A first `activeId` (from undefined) is not a navigation.
+    const [nav, setNav] = useState<{ activeId: string | undefined; opened: string | undefined }>({ activeId, opened: undefined });
+    let currentNav = nav;
+    if (nav.activeId !== activeId) {
+        currentNav = { activeId, opened: nav.activeId === undefined ? undefined : activeId };
+        setNav(currentNav);
+    }
+    // Kept in step with what was last rendered, and moved on by a toggle at once, so two toggles before a re-render both count.
+    const choicesRef = useRef(current.choices);
+    choicesRef.current = current.choices;
+    const openedRef = useRef(currentNav.opened);
+    openedRef.current = currentNav.opened;
+
+    const toggle = useCallback(
+        (id: string) => {
+            const expanded = openedRef.current === id || sectionChosenOpen(id, choicesRef.current, primaryUid);
+            const next = { ...choicesRef.current, [id]: expanded };
+            choicesRef.current = next;
+            setLoaded({ userUid, choices: next });
+            writeSectionChoices(userUid, next);
+            if (openedRef.current === id) {
+                // The reader's own choice replaces the override that had opened it.
+                openedRef.current = undefined;
+                setNav({ activeId, opened: undefined });
+            }
+        },
+        [activeId, primaryUid, userUid],
+    );
+
+    const choices = current.choices;
+    const opened = currentNav.opened;
+    return useMemo(
+        () => ({
+            isExpanded: (id: string) => id === opened || sectionChosenOpen(id, choices, primaryUid),
+            toggle,
+        }),
+        [opened, choices, primaryUid, toggle],
+    );
+}