@rapidmx/web-client 0.7.0 → 0.9.0

package/dist/apps/www/index.js

@@ -19,6 +19,8 @@ import { evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSec
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import MailShell, { useMailShell, } from "../shared/components/mail/layout/MailShell.js";
+import MailAddress from "../shared/components/mail/MailAddress.js";
+import { mergeFirstPage } from "../shared/mail/mergeFirstPage.js";
 import MessageDetailPane from "../shared/components/mail/MessageDetailPane.js";
 import ConversationList from "../shared/components/mail/ConversationList.js";
 import ConversationThreadPane from "../shared/components/mail/ConversationThreadPane.js";
@@ -336,7 +338,7 @@ export default function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
 function InboxContent({ userUid }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, live } = useMailShell();
     const isMobile = useIsMobile();
     const { requestUnlock } = useUnlockPrompt();
     const [messages, setMessages] = useState([]);
@@ -870,6 +872,65 @@ function InboxContent({ userUid }) {
         mailboxFolders,
         activeMailboxUid,
     ]);
+    // New mail without a reload. `live` is bumped by a push event, a reconnect, the safety-net poll or the tab coming back (see
+    // `useMailLiveUpdates()`); this then quietly refetches the first page of whatever is listed and folds it in - unlike the
+    // effect above it resets nothing: not the selection, the open thread, select mode, the scroll position or the rows
+    // already paged in, and nothing it fetches is marked read. It stands aside for a search (whose rows aren't a folder's),
+    // a listing still loading and a "load more" in flight, and for events about folders the list isn't showing - a
+    // conversation list, which can span folders, refreshes for any. Any failure is silent: the next tick tries again.
+    const liveRunRef = useRef(0);
+    useEffect(() => {
+        if (live.tick === 0 || isSearching || loading || loadMoreInFlightRef.current || (!folderUid && !aggregateFolderType)) {
+            return;
+        }
+        if (!preferences.showAsConversations && live.folderUids) {
+            const shown = new Set(aggregateFolderType
+                ? mailboxFolders.flatMap((entry) => entry.folders.filter((f) => f.type === aggregateFolderType).map((f) => f.uid))
+                : [folderUid]);
+            if (![...live.folderUids].some((uid) => shown.has(uid))) {
+                return;
+            }
+        }
+        // Superseded by a newer refresh, or by any reload of the list itself (which bumps the search run id).
+        const listRun = searchRunIdRef.current;
+        const myRun = ++liveRunRef.current;
+        const isCurrent = () => searchRunIdRef.current === listRun && liveRunRef.current === myRun;
+        void (async () => {
+            try {
+                if (preferences.showAsConversations) {
+                    const fresh = await listConversations(activeMailboxUid, conversationParams(0));
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    const merged = mergeFirstPage(conversationsRef.current, fresh, conversationKey, MESSAGE_PAGE_SIZE);
+                    setConversations(merged.rows);
+                    listedOffsetRef.current = merged.complete ? fresh.length : listedOffsetRef.current + merged.added;
+                    setHasMore(!merged.complete);
+                }
+                else if (aggregateFolderType) {
+                    // No paging here (see `fetchAggregateMessages()`): the fresh merged first pages are the list.
+                    const fresh = await fetchAggregateMessages(mailboxFolders, aggregateFolderType, effectiveFilter);
+                    if (isCurrent()) {
+                        setMessages(fresh);
+                    }
+                }
+                else {
+                    const fresh = await listMessages(folderUid, listParams);
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    // A row the reader has just changed (a higher version) is not put back by a fetch that began before.
+                    const merged = mergeFirstPage(messagesRef.current, fresh, messageUid, MESSAGE_PAGE_SIZE, (current, next) => current.version > next.version ? current : next);
+                    setMessages(merged.rows);
+                    listedOffsetRef.current = merged.complete ? fresh.length : listedOffsetRef.current + merged.added;
+                    setHasMore(!merged.complete);
+                }
+            }
+            catch {
+                // Quiet by design - see above.
+            }
+        })();
+    }, [live.tick]);
     function handleSearchAllMail() {
         setSearchAllMailKey(searchAllMailScope);
     }
@@ -1337,7 +1398,7 @@ function InboxContent({ userUid }) {
                                                     ? "bg-primary/10"
                                                     : "hover:bg-surface-alt",
                                                 message.flags.read ? "" : "font-semibold",
-                                            ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm truncate", children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }))] })] }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(ConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
+                                            ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm truncate", children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }))] })] }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(ConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
                         // Same reasoning as onArchived below - a move takes the message out of the folder
                         // being listed, so it leaves the list rather than being patched in place.
                         removeListedMessage(updated.uid);

package/package.json

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