@rapidmx/web-client 0.12.0 → 0.14.0

package/dist/apps/www/index.js

@@ -284,6 +284,15 @@ const LOAD_MORE_ROOT_MARGIN_PX = 200;
 /** How many full pages in a row that added no new rows the list keeps loading on its own before it shows a
  * "Load more" button instead. */
 const MAX_EMPTY_PAGE_CONTINUATIONS = 3;
+/** Hard ceiling on how many rows one list (the plain message list or the conversation list) keeps as live
+ * React state/DOM at once. `MAX_EMPTY_PAGE_CONTINUATIONS` above only bounds a streak of *empty* pages, not
+ * the total accumulated row count - infinite scroll on its own has no natural stopping point, so a reader
+ * who fully scrolls a large mailbox would otherwise keep every row ever fetched mounted forever. Past this
+ * cap, `loadMore()` stops fetching further pages and the list shows a "refine your search" banner instead of
+ * the load-more sentinel - deliberately not virtualization (a larger, riskier change this bug's own writeup
+ * called for only if trivial, which it isn't given this file's existing structure): capping the row count is
+ * the same fix's low-risk cousin, since the unbounded-memory failure mode is identical either way. */
+const MAX_LOADED_ROWS = 500;
 /** `true` when `more` has at least one row `shown` doesn't - i.e. appending it actually adds rows. Generic
  * over the row's own identity so both the message list (`uid`) and the conversation list
  * (`conversationId`) page the same way. */
@@ -301,8 +310,11 @@ function isWithinLoadMoreRange(sentinel, root) {
 /** Appends `more` to `shown`, skipping any row already shown - a later page can repeat rows (Tier 1 and
  * Tier 2/3 cursors advance independently, so the same message can come back from a different tier on a
  * later page; a plain folder listing's pages shift when new mail arrives between fetches). Generic for the
- * same reason `hasUnseenRows()` is. */
-function appendUnseenRows(shown, more, idOf) {
+ * same reason `hasUnseenRows()` is.
+ *
+ * `cap`, when given, truncates the result to its first `cap` rows (dropping the tail) rather than letting
+ * accumulated pages grow without bound - see `MAX_LOADED_ROWS`'s own doc comment for why this exists. */
+function appendUnseenRows(shown, more, idOf, cap) {
     const seen = new Set(shown.map(idOf));
     const unseen = [];
     for (const row of more) {
@@ -311,7 +323,11 @@ function appendUnseenRows(shown, more, idOf) {
             unseen.push(row);
         }
     }
-    return unseen.length === 0 ? shown : [...shown, ...unseen];
+    if (unseen.length === 0) {
+        return shown;
+    }
+    const combined = [...shown, ...unseen];
+    return cap !== undefined && combined.length > cap ? combined.slice(0, cap) : combined;
 }
 const messageUid = (message) => message.uid;
 const conversationKey = (conversation) => conversation.conversationId;
@@ -1063,9 +1079,14 @@ function InboxContent({ userUid }) {
         // has fully finished (the ref may still hold an earlier query's), in which case there's nowhere to
         // continue from yet.
         const searchCursor = decodeCursor(compositeCursorRef.current, fingerprint);
+        // Reads the ref, not `conversations`/`messages` state, so this callback (and the observer effect
+        // watching it) don't need to be recreated every time a page lands - the same reason every other
+        // check below reads a ref rather than closing over state.
+        const atRowCap = (preferences.showAsConversations ? conversationsRef.current.length : messagesRef.current.length) >= MAX_LOADED_ROWS;
         if (loadMoreInFlightRef.current ||
             !hasMore ||
             loading ||
+            atRowCap ||
             (!preferences.showAsConversations && !folderUid) ||
             (isSearching && !searchCursor)) {
             return;
@@ -1105,7 +1126,7 @@ function InboxContent({ userUid }) {
                     return;
                 }
                 const addedRows = hasUnseenRows(conversationsRef.current, more, conversationKey);
-                setConversations((prev) => appendUnseenRows(prev, more, conversationKey));
+                setConversations((prev) => appendUnseenRows(prev, more, conversationKey, MAX_LOADED_ROWS));
                 setHasMore(more.length === MESSAGE_PAGE_SIZE);
                 listedOffsetRef.current = page * MESSAGE_PAGE_SIZE + more.length;
                 notePageLanded(addedRows, more.length === MESSAGE_PAGE_SIZE);
@@ -1133,7 +1154,7 @@ function InboxContent({ userUid }) {
                     return;
                 }
                 const addedRows = hasUnseenRows(messagesRef.current, more, messageUid);
-                setMessages((prev) => appendUnseenRows(prev, more, messageUid));
+                setMessages((prev) => appendUnseenRows(prev, more, messageUid, MAX_LOADED_ROWS));
                 setSnippets((prev) => ({ ...prev, ...moreSnippets }));
                 const nextTier3Offset = tier3Offset + tier3Page.length;
                 compositeCursorRef.current = {
@@ -1157,7 +1178,7 @@ function InboxContent({ userUid }) {
                     return;
                 }
                 const addedRows = hasUnseenRows(messagesRef.current, more, messageUid);
-                setMessages((prev) => appendUnseenRows(prev, more, messageUid));
+                setMessages((prev) => appendUnseenRows(prev, more, messageUid, MAX_LOADED_ROWS));
                 setHasMore(more.length === MESSAGE_PAGE_SIZE);
                 listedOffsetRef.current = page * MESSAGE_PAGE_SIZE + more.length;
                 notePageLanded(addedRows, more.length === MESSAGE_PAGE_SIZE);
@@ -1295,6 +1316,14 @@ function InboxContent({ userUid }) {
      * far - which the Sort menu says on screen. `conversations` itself stays in the order the pages
      * arrived, so paging keeps appending to the same accumulated set. */
     const listedConversations = sortConversations(conversations, preferences.sortBy, preferences.sortOrder);
+    /** `true` once whichever list is on screen has hit `MAX_LOADED_ROWS` *and* the server still has more to
+     * give - `appendUnseenRows()` itself already stopped growing the array at that point, and `loadMore()`
+     * refuses to fetch further pages (see its own `atRowCap` check); this just drives the "refine your
+     * search" banner replacing the load-more sentinel below. The `hasMore` half matters at the edge: a
+     * mailbox/search whose true size lands at or near the cap can have its very last page be a partial one,
+     * which correctly turns `hasMore` false - without checking it here, the banner would still claim rows
+     * are being hidden even though every one of them is already on screen. */
+    const rowCapReached = hasMore && (preferences.showAsConversations ? conversations.length : messages.length) >= MAX_LOADED_ROWS;
     function leaveSelectMode() {
         setSelectMode(false);
         setSelectedUids(new Set());
@@ -1674,14 +1703,14 @@ function InboxContent({ userUid }) {
                                     ? `${messages.length} result${messages.length === 1 ? "" : "s"}`
                                     : `${messages.length} of ??` }), tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, className: "text-primary-dark hover:underline font-medium shrink-0", children: "Search all mail" }))] })), isSearching && coverage?.indexedFrom && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Local search covers messages back to ", new Date(coverage.indexedFrom).toLocaleDateString(), coverage.building ? " (still building)" : "", searchAllMail
                                 ? " - searching everything, not just recent mail."
-                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", MAX_LOADED_ROWS, " conversations \u2014 refine your search or filters to see more."] }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
                                     ? `No messages match "${searchQuery}".`
                                     : effectiveFilter === "all"
                                         ? "No messages in this folder."
                                         : "No messages here." }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: messages.map((message) => (_jsxs("li", { "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: isUnread(message) }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), onChange: () => toggleSelected(message.uid), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => handleSelect(message), className: ["flex-1 min-w-0 text-left px-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: isUnread(message) }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(isUnread(message)) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(isUnread(message))].join(" "), 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", subjectClass(isUnread(message))].join(" "), 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.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] }), isOutbox && _jsx(OutboxRowStatus, { message: message })] }))] })] }, 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(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(LazyMessageDetailPane, { shortcuts: !selectMode, message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
+                                                                        (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] }), isOutbox && _jsx(OutboxRowStatus, { message: message })] }))] })] }, message.uid))) }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", MAX_LOADED_ROWS, " messages \u2014 refine your search or filters to see more."] })), 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(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(LazyMessageDetailPane, { shortcuts: !selectMode, 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.12.0",
+  "version": "0.14.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.12.0",
+    "@rapidmx/react-shared": "^0.15.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",