@rapidmx/web-client 0.19.0 → 0.20.0

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/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/shared/components/mail/reading/printMessage.js

@@ -1,17 +1,17 @@
 import { attachmentSource, makeCidResolver } from "./bodyContent.js";
 import { prepareBodyHtml } from "./bodyHtml.js";
 import { frameCsp } from "./frameDocument.js";
-const PRINT_CSS = `
-html{font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;background:#fff}
-body{margin:0;padding:24px}
-h1{font-size:20px;margin:0 0 12px}
-dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px}
-dt{font-weight:600;color:#444}
-dd{margin:0;overflow-wrap:anywhere}
-hr{border:0;border-top:1px solid #999;margin:0 0 16px}
-#rr-body{overflow-wrap:break-word}
-#rr-body img{max-width:100%;height:auto}
-#rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
+const PRINT_CSS = `
+html{font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;background:#fff}
+body{margin:0;padding:24px}
+h1{font-size:20px;margin:0 0 12px}
+dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px}
+dt{font-weight:600;color:#444}
+dd{margin:0;overflow-wrap:anywhere}
+hr{border:0;border-top:1px solid #999;margin:0 0 16px}
+#rr-body{overflow-wrap:break-word}
+#rr-body img{max-width:100%;height:auto}
+#rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
 `;
 export function escapeHtml(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");