@rapidmx/web-client 0.19.0 → 0.21.0

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

@@ -1,9 +1,16 @@
 import React from "react";
 import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { ConversationSummary } from "@rapidmx/react-shared/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 & {
+    mailboxUid?: string;
+};
+/** What tells a row apart from the others: the same conversation id in two mailboxes (a message sent to both) is two rows. */
+export declare function conversationRowKey(conversation: ListedConversation): string;
 export interface ConversationListProps {
-    conversations: ConversationSummary[];
-    /** The mailbox the conversations were listed from - `listConversationMessages()` is mailbox-scoped. */
+    conversations: ListedConversation[];
+    /** The mailbox the conversations were listed from - `listConversationMessages()` is mailbox-scoped. A row that names its own mailbox uses that. */
     mailboxUid: string;
     /** The message currently open in the reading pane, so the row standing for it can be marked. */
     selectedUid: string | null;
@@ -12,7 +19,7 @@ export interface ConversationListProps {
      * stands for, or the conversation's own `latestMessageUid` for a parent row. The conversation goes
      * with the uid because the pane shows the whole thread, not just that message.
      */
-    onOpenMessage: (conversation: ConversationSummary, uid: string) => void;
+    onOpenMessage: (conversation: ListedConversation, uid: string) => void;
     /** Newer copies of messages this list already fetched - the reading pane marks the message it opens as
      * read, which this list would otherwise keep showing as unread until the thread is collapsed and
      * expanded again. */

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

@@ -13,6 +13,10 @@ import { listConversationMessages } from "@rapidmx/react-shared/mail/conversatio
 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";
+/** What tells a row apart from the others: the same conversation id in two mailboxes (a message sent to both) is two rows. */
+export function conversationRowKey(conversation) {
+    return conversation.mailboxUid ? `${conversation.mailboxUid}\u0000${conversation.conversationId}` : conversation.conversationId;
+}
 /** Every participant as `Name <address>`, for the tooltip and the accessible text of the "+N" a crowded row folds them into. */
 function participantList(conversation) {
     return conversation.participants.map((participant) => formatMailAddress(participant)).join(", ");
@@ -41,7 +45,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
         setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
     }
     function toggle(conversation) {
-        const id = conversation.conversationId;
+        const id = conversationRowKey(conversation);
         setExpanded((prev) => {
             const next = new Set(prev);
             if (next.has(id)) {
@@ -61,7 +65,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             delete next[id];
             return next;
         });
-        listConversationMessages(mailboxUid, id)
+        listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId)
             .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
             .catch((err) => setErrorsById((prev) => ({
             ...prev,
@@ -77,15 +81,15 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
         return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this folder." });
     }
     return (_jsx("ul", { className: swipe?.enabled ? "overflow-x-clip" : undefined, children: conversations.map((conversation) => {
-            const id = conversation.conversationId;
+            const id = conversationRowKey(conversation);
             const isExpanded = expanded.has(id);
             const unread = conversation.unreadCount > 0;
             const loaded = messagesById[id];
             // `listConversationMessages()` answers oldest first; the rows read in whichever sense the
             // list itself is arranged in. Copied before reversing - the fetched array is cached.
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
-            const panelId = `conversation-messages-${id}`;
-            const ticked = selectedConversationIds?.has(id) ?? false;
+            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: {
                                             uid: conversation.latestMessageUid,
                                             meetingMethod: conversation.latestMeetingMethod ?? undefined,

package/dist/apps/shared/components/mail/compose/ComposeWindow.d.ts

@@ -12,12 +12,18 @@ export interface ComposeWindowProps {
     /** How long (ms) after the last edit the draft is autosaved. Defaults to `DEFAULT_AUTOSAVE_DELAY_MS`;
      * only overridden by tests. */
     autosaveDelayMs?: number;
+    /** The longest (ms) an unsaved edit waits before the draft is saved even though typing hasn't paused - so a
+     * message written without a 2-second break is still saved regularly. Defaults to `DEFAULT_AUTOSAVE_MAX_WAIT_MS`
+     * and is never shorter than `autosaveDelayMs`; only overridden by tests. */
+    autosaveMaxWaitMs?: number;
     /** Backoff (ms) between automatic retries of a failed mailbox/encryption-policy load, one entry per retry.
      * Defaults to `DEFAULT_CRYPTO_RETRY_DELAYS_MS`; only overridden by tests. */
     cryptoRetryDelaysMs?: number[];
 }
 /** Debounce between the last edit and the draft autosave. */
 export declare const DEFAULT_AUTOSAVE_DELAY_MS = 2000;
+/** The longest an edit stays unsaved while the user keeps typing (the debounce above restarts on every keystroke, so it alone never fires then). */
+export declare const DEFAULT_AUTOSAVE_MAX_WAIT_MS = 30000;
 /** Automatic, silent retries of a failed mailbox/encryption-policy (or recipient key) load, one entry per retry - a flapping gateway is waited out
  * in the background, without a word to the user. */
 export declare const DEFAULT_CRYPTO_RETRY_DELAYS_MS: number[];
@@ -35,4 +41,4 @@ export declare const DEFAULT_CRYPTO_RETRY_DELAYS_MS: number[];
  * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
  * once.
  */
-export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs, cryptoRetryDelaysMs, }: ComposeWindowProps): React.JSX.Element;
+export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs, autosaveMaxWaitMs, cryptoRetryDelaysMs, }: ComposeWindowProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -36,6 +36,8 @@ import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 /** Debounce between the last edit and the draft autosave. */
 export const DEFAULT_AUTOSAVE_DELAY_MS = 2000;
+/** The longest an edit stays unsaved while the user keeps typing (the debounce above restarts on every keystroke, so it alone never fires then). */
+export const DEFAULT_AUTOSAVE_MAX_WAIT_MS = 30000;
 /** Automatic, silent retries of a failed mailbox/encryption-policy (or recipient key) load, one entry per retry - a flapping gateway is waited out
  * in the background, without a word to the user. */
 export const DEFAULT_CRYPTO_RETRY_DELAYS_MS = [1000, 2000, 4000, 8000, 15000, 30000, 60000];
@@ -96,7 +98,7 @@ function HeaderButton({ label, onClick, icon: Icon, disabled, shortcut, }) {
  * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
  * once.
  */
-export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
+export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, autosaveMaxWaitMs = DEFAULT_AUTOSAVE_MAX_WAIT_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
     const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized, quotePending, late, resume } = session;
     // What a reply worked out after this window opened (see `OpenComposeInput.pending`): better recipients, applied below
     // only to fields still exactly as they opened - so these, not `initialTo`/`initialCc`, are what "untouched" is measured against.
@@ -197,6 +199,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     const lastSavedRef = useRef(null);
     /** An edit is waiting on the autosave debounce - flushed if the window unmounts first. */
     const pendingSaveRef = useRef(false);
+    /** Fires the save when an edit has waited `autosaveMaxWaitMs` without the debounce ever getting a pause to fire in. */
+    const maxWaitTimerRef = useRef(undefined);
     /** Send was pressed and is being validated/handed over: a second press (a double click, the shortcut held or repeated) does nothing. */
     const submittingRef = useRef(false);
     /** Attachment/inline-image uploads on the wire, and who is waiting for them to finish (Send pressed meanwhile). */
@@ -751,6 +755,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         const target = latestRef.current.draft;
         const previous = saveInFlightRef.current;
         pendingSaveRef.current = false;
+        clearTimeout(maxWaitTimerRef.current);
+        maxWaitTimerRef.current = undefined;
         setSaveStatus("saving");
         const outcome = (async () => {
             const before = await previous;
@@ -1022,14 +1028,27 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             lastSavedRef.current !== `${draft.uid}:${contentKey}`;
         pendingSaveRef.current = due;
         if (!due) {
+            clearTimeout(maxWaitTimerRef.current);
+            maxWaitTimerRef.current = undefined;
             return;
         }
+        // The debounce below restarts on every edit, so steady typing never lets it fire: this timer, started by the first unsaved edit and stopped
+        // by the save that follows, is what saves such a message at a regular interval.
+        if (maxWaitTimerRef.current === undefined) {
+            maxWaitTimerRef.current = setTimeout(() => {
+                maxWaitTimerRef.current = undefined;
+                if (pendingSaveRef.current && !finishedRef.current) {
+                    void saveDraftNow();
+                }
+            }, Math.max(autosaveMaxWaitMs, autosaveDelayMs));
+        }
         const timer = setTimeout(() => void saveDraftNow(), autosaveDelayMs);
         return () => clearTimeout(timer);
     }, [draft, contentReady, autosaveSuppressed, hasUserContent, contentKey]);
     // Unmounting with an edit still waiting on the debounce (e.g. the whole app shell unmounting) saves it
     // right away rather than losing it.
     useEffect(() => () => {
+        clearTimeout(maxWaitTimerRef.current);
         if (pendingSaveRef.current && !finishedRef.current) {
             void saveDraftNow();
         }

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

@@ -89,7 +89,7 @@ export declare const CONVERSATION_SORT_NOTE = "Conversations are ordered within
  * order that would mean nothing. Ties break newest first whichever direction is in force, so two rows the
  * key can't tell apart still read in a stable, familiar order.
  */
-export declare function sortConversations(conversations: ConversationSummary[], sortBy: MessageListSort, sortOrder: MessageSortOrder): ConversationSummary[];
+export declare function sortConversations<T extends ConversationSummary>(conversations: T[], sortBy: MessageListSort, sortOrder: MessageSortOrder): T[];
 /** The direction the server itself would pick for a key if none were sent (see `MessageSortOrder`) - what
  * this list switches to when the reader picks a different field, so changing "Date" to "Subject" reads A-Z
  * rather than inheriting Date's newest-first as a surprising Z-A. */

package/dist/apps/www/index.js

@@ -31,7 +31,7 @@ import { setReadStateMany } from "../shared/mail/messageReadState.js";
 import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
-import ConversationList from "../shared/components/mail/ConversationList.js";
+import ConversationList, { conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
 import InviteRowChip from "../shared/components/mail/invite/InviteRowChip.js";
 import MoveToFolderDialog from "../shared/components/mail/MoveToFolderDialog.js";
@@ -313,7 +313,7 @@ function appendUnseenRows(shown, more, idOf, cap) {
     return cap !== undefined && combined.length > cap ? combined.slice(0, cap) : combined;
 }
 const messageUid = (message) => message.uid;
-const conversationKey = (conversation) => conversation.conversationId;
+const conversationKey = conversationRowKey;
 /** Flattens and sorts a per-mailbox fetch into one merged, newest-first list - the aggregate ("All
  * Inboxes" etc.) equivalent of `mergeSearchResults()` above, but simpler: an aggregated message has no
  * natural relevance score to normalize, so this only ever sorts by `receivedDate`. */
@@ -349,6 +349,23 @@ async function fetchAggregateMessages(mailboxFolders, type, filter) {
     }));
     return mergeInboxMessages(perMailbox);
 }
+/**
+ * The conversation-list counterpart of `fetchAggregateMessages()`: one `listConversations()` per accessible mailbox that has a folder of
+ * `type`, each scoped to *that folder* (so "All Inboxes" groups only Inbox mail - not the Sent Items copy of a reply, which a mailbox-wide
+ * grouping pulls in) and each row tagged with its mailbox, then merged newest activity first. Same first-page-only scope, and the same
+ * rule that a mailbox that has no such folder or fails to answer contributes nothing rather than blanking the rest.
+ */
+async function fetchAggregateConversations(mailboxFolders, type, params) {
+    const perMailbox = await Promise.all(mailboxFolders.map(async ({ mailbox, folders }) => {
+        const folder = folders.find((f) => f.type === type);
+        if (!folder) {
+            return [];
+        }
+        const rows = await listConversations(mailbox.uid, { ...params, folderUid: folder.uid, page: 0 }).catch(() => []);
+        return rows.map((row) => ({ ...row, mailboxUid: mailbox.uid }));
+    }));
+    return perMailbox.flat().sort((a, b) => Date.parse(b.latestDate) - Date.parse(a.latestDate));
+}
 /** Groups search results by the conversation each message belongs to - within its own mailbox - the groups in the order of their first result. */
 function groupByConversation(results) {
     const groups = new Map();
@@ -862,12 +879,27 @@ function InboxContent({ userUid }) {
             setLoading(true);
             return;
         }
+        if (asConversations && aggregateFolderType) {
+            // Grouped per mailbox, inside that mailbox's folder of this type, and merged - first pages only, like the message listing.
+            setLoading(true);
+            setError(null);
+            setHasMore(false);
+            void fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0))
+                .then((results) => {
+                if (isCurrentRun()) {
+                    setConversations(results);
+                }
+            })
+                .finally(() => {
+                if (isCurrentRun()) {
+                    setLoading(false);
+                }
+            });
+            return invalidate;
+        }
         if (asConversations) {
-            // Conversations stay single-mailbox (not aggregated across mailboxes in this pass) - in
-            // aggregate mode this falls back to `activeMailboxUid`, the same mailbox unlock/labels use
-            // (always set - `MailShell` only renders this component once at least one mailbox exists).
-            // They're scoped to the selected folder (`folderUid`, absent only in aggregate mode), so the
-            // conversation list matches the folder the sidebar has selected rather than the whole mailbox.
+            // A single mailbox's own folder (`folderUid`), so the conversation list matches the folder the sidebar has selected rather
+            // than the whole mailbox.
             if (snapshot) {
                 setConversations(snapshot.conversations);
                 listedOffsetRef.current = snapshot.conversations.length;
@@ -1212,7 +1244,14 @@ function InboxContent({ userUid }) {
         const isCurrent = () => searchRunIdRef.current === listRun && liveRunRef.current === myRun;
         void (async () => {
             try {
-                if (asConversations) {
+                if (asConversations && aggregateFolderType) {
+                    // No paging here either: the fresh merged first pages are the list.
+                    const fresh = await fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0));
+                    if (isCurrent()) {
+                        setConversations(fresh);
+                    }
+                }
+                else if (asConversations) {
                     const fresh = await listConversations(activeMailboxUid, conversationParams(0));
                     if (!isCurrent()) {
                         return;
@@ -1897,7 +1936,7 @@ function InboxContent({ userUid }) {
         }
         removedAnchorRef.current = null;
         setSelectedUid(uid);
-        setOpenThread({ conversation, uid, mailboxUid: activeMailboxUid });
+        setOpenThread({ conversation, uid, mailboxUid: conversation.mailboxUid ?? activeMailboxUid });
     }
     // ---- Keyboard shortcuts (see `shared/keyboard`). Each is registered only while this view can do it, and calls what the toolbar and
     // ---- the selection bar call: the same bulk-action path (`runBulkAction()` - so the same optimistic badge tracking, the same rollback,
@@ -1929,7 +1968,9 @@ function InboxContent({ userUid }) {
     /** The index of the selected row: the open message's, or the open conversation's; -1 with nothing selected. */
     function selectedRowIndex() {
         if (inConversations) {
-            return openThread ? listedConversations.findIndex((c) => c.conversationId === openThread.conversation.conversationId) : -1;
+            return openThread
+                ? listedConversations.findIndex((c) => c.conversationId === openThread.conversation.conversationId && (!c.mailboxUid || c.mailboxUid === openThread.mailboxUid))
+                : -1;
         }
         return messages.findIndex((m) => m.uid === selectedUid);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -40,7 +40,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.20.0",
+    "@rapidmx/react-shared": "^0.22.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",