@rapidmx/web-client 0.8.0 → 0.9.0

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

@@ -8,6 +8,7 @@ import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevron
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { assembleDraft, assembleDraftRaw, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, sendMessage, setMessageRequestReceipt, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { describeSendFailure } from "@rapidmx/react-shared/mail/sendFailure.js";
 import { buildComposeBodyHtml } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
 import { decideMessageEncryption, resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
@@ -22,6 +23,7 @@ import RecipientInput from "./RecipientInput.js";
 import { parseRecipientList } from "./recipients.js";
 import RichTextEditor from "./RichTextEditor.js";
 import ScheduleSendPicker from "./ScheduleSendPicker.js";
+import SendFailureAlert from "./SendFailureAlert.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
@@ -59,6 +61,10 @@ const ENCRYPTED_CLOSE_MESSAGE = "Encrypted messages aren't saved as drafts, so c
 const CHECKING_CLOSE_MESSAGE = "This message may be encrypted, and that's still being checked, so it can't be saved as a draft yet. Keep editing and close again in a moment, or discard it.";
 const CRYPTO_UNAVAILABLE_MESSAGE = "Your encryption settings couldn't be checked, so this draft isn't being saved - it might be a message that must be encrypted.";
 const NO_RECIPIENTS_CLOSE_MESSAGE = "This message may be encrypted once its recipients are known, so it isn't saved as a draft until you add them. Add a recipient and close again, or discard it.";
+const SEND_FAILED_TITLE = "This message wasn't sent";
+function sendFailedCloseMessage(reason) {
+    return `Sending it failed (${reason.replace(/\.$/, "")}). Closing keeps it as a draft, unsent. Keep editing to try again, or discard it.`;
+}
 const FIELD_ROW = "flex items-center gap-2 px-3 py-1.5 border-b border-border";
 const FIELD_INPUT = "flex-1 min-w-0 text-sm bg-transparent outline-none";
 const MIN_WIDTH = 320;
@@ -126,6 +132,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     const [attachments, setAttachments] = useState([]);
     const [attachError, setAttachError] = useState(null);
     const [sendError, setSendError] = useState(null);
+    // The technical facts behind `sendError` (per-recipient SMTP results, a transport error), when the server gave any.
+    const [sendDetails, setSendDetails] = useState([]);
     const [sending, setSending] = useState(false);
     const [requestReceipt, setRequestReceipt] = useState(false);
     const [schedulePickerOpen, setSchedulePickerOpen] = useState(false);
@@ -736,6 +744,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         setSending(true);
         sendingRef.current = true;
         setSendError(null);
+        setSendDetails([]);
         setSecurityBlock(null);
         setEncryptionBlocked(null);
         pendingSaveRef.current = false;
@@ -756,8 +765,10 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             onClose();
         }
         catch (err) {
-            const fallback = scheduledSendTimeIso ? "Could not schedule this message." : "Could not send this message.";
-            setSendError(err instanceof ApiRequestError ? err.message : fallback);
+            // The window stays open with the draft exactly as it was; nothing here closes, discards or saves over it.
+            const failure = describeSendFailure(err, scheduledSendTimeIso ? "Could not schedule this message." : "Could not send this message.");
+            setSendError(failure.message);
+            setSendDetails(failure.lines);
         }
         finally {
             sendingRef.current = false;
@@ -922,11 +933,16 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
      * the same confirmation as a discard. A failed save keeps the window open with Discard / Keep editing.
      * Close and Discard are both disabled while a send is in progress: deleting the draft, or saving a
      * plaintext copy over the message the send just assembled, mid-send would lose or leak it. */
-    async function handleClose() {
+    async function handleClose(sendFailureAcknowledged = false) {
         if (!hasUserContent) {
             void discardNow();
             return;
         }
+        if (sendError && !sendFailureAcknowledged) {
+            // Closing would keep the draft and say nothing, which reads as if it had been sent.
+            setClosePrompt({ title: SEND_FAILED_TITLE, message: sendFailedCloseMessage(sendError), closeAnyway: true });
+            return;
+        }
         if (encryptionDecided) {
             setClosePrompt({ title: DISCARD_TITLE, message: ENCRYPTED_CLOSE_MESSAGE });
             return;
@@ -1126,16 +1142,19 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     }, [minimized, contentReady]);
     const title = subject.trim() || "New Message";
     const titleId = `compose-title-${id}`;
-    const discardModal = (_jsxs(Modal, { open: closePrompt !== null, onClose: () => setClosePrompt(null), title: closePrompt?.title ?? DISCARD_TITLE, children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: closePrompt?.message }), _jsxs("div", { className: "flex gap-3", children: [closePrompt?.retry && (_jsx(Button, { type: "button", onClick: retryCryptoContext, className: "!w-auto", children: "Retry" })), _jsx(Button, { type: "button", onClick: () => void discardNow(), disabled: sending || closing, className: "!w-auto", children: "Discard" }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => setClosePrompt(null), className: "!w-auto", children: "Keep editing" })] })] }));
+    const discardModal = (_jsxs(Modal, { open: closePrompt !== null, onClose: () => setClosePrompt(null), title: closePrompt?.title ?? DISCARD_TITLE, children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: closePrompt?.message }), _jsxs("div", { className: "flex gap-3", children: [closePrompt?.retry && (_jsx(Button, { type: "button", onClick: retryCryptoContext, className: "!w-auto", children: "Retry" })), closePrompt?.closeAnyway && (_jsx(Button, { type: "button", onClick: () => {
+                            setClosePrompt(null);
+                            void handleClose(true);
+                        }, disabled: sending || closing, className: "!w-auto", children: "Close, keep draft" })), _jsx(Button, { type: "button", onClick: () => void discardNow(), disabled: sending || closing, className: "!w-auto", children: "Discard" }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => setClosePrompt(null), className: "!w-auto", children: "Keep editing" })] })] }));
     if (minimized) {
-        return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsxs("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Restore", onClick: onToggleMinimize, icon: HiOutlineArrowsPointingOut }), _jsx(HeaderButton, { label: "Discard draft", onClick: handleDiscard, icon: HiOutlineXMark, disabled: sending || closing })] })] }) }), discardModal] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsxs("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { className: "text-sm font-medium truncate", children: title }), sendError && _jsx("span", { className: "shrink-0 text-xs font-bold uppercase tracking-wide", children: "Not sent" }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Restore", onClick: onToggleMinimize, icon: HiOutlineArrowsPointingOut }), _jsx(HeaderButton, { label: "Discard draft", onClick: handleDiscard, icon: HiOutlineXMark, disabled: sending || closing })] })] }) }), discardModal] }));
     }
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
                     "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
                     isMobile
                         ? "fixed inset-0 w-full h-full rounded-none border-0"
                         : ["border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-                ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: sending || closing })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, value: mailboxUid ?? "", disabled: hasUploads || sending, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
+                ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: sending || closing })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(SendFailureAlert, { message: sendError, lines: sendDetails }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, value: mailboxUid ?? "", disabled: hasUploads || sending, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
                                 const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
                                     .map((r) => recipientStatuses[r.address])
                                     .filter((status) => !!status);

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface SendFailureAlertProps {
+    /** The plain, human message - always shown. */
+    message: string;
+    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
+     * With none, only the message is shown. */
+    lines: string[];
+}
+/**
+ * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
+ * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
+ * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
+ */
+export default function SendFailureAlert({ message, lines }: SendFailureAlertProps): React.JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+/**
+ * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
+ * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
+ * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
+ */
+export default function SendFailureAlert({ message, lines }) {
+    return (_jsx(Alert, { children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-semibold break-words", children: message }), lines.length > 0 && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs font-semibold", children: "Technical details" }), _jsx("ul", { "aria-label": "Technical details", className: "mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text", children: lines.map((line, index) => (_jsx("li", { className: "whitespace-pre-wrap break-words", children: line }, index))) }), _jsx("div", { className: "mt-2", children: _jsx(CopyButton, { value: lines.join("\n"), label: "Copy technical details" }) })] }))] }) }));
+}

package/dist/apps/shared/components/mail/layout/MailShell.d.ts

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import { AppShellProps } from "../../layout/AppShell.js";
+import { LiveUpdates } from "../../../mail/useMailLiveUpdates.js";
 export type MailShellProps = Omit<AppShellProps, "active">;
 /** One mailbox's own mail folders (already filtered to `MAIL_FOLDER_TYPES` and unsorted) - one entry per
  * mailbox in `mailboxes`, fetched in parallel so every accessible mailbox's folder tree can render
@@ -41,6 +42,12 @@ export interface MailShellContextValue {
      * A no-op on the default context value, which is only ever read outside a real shell.
      */
     onFolderCreated: (folder: Folder) => void;
+    /**
+     * Bumped whenever new mail (or another change to a message) may have arrived - a push event, a reconnect or the safety-net
+     * poll - so the list on screen can quietly refetch its first page. See `useMailLiveUpdates()`. Never changes on the default
+     * context value, which is only ever read outside a real shell.
+     */
+    live: LiveUpdates;
 }
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export declare function useMailShell(): MailShellContextValue;

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -15,6 +15,7 @@ import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { useCompose } from "../compose/ComposeContext.js";
 import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
+import { NO_LIVE_UPDATES, useMailLiveUpdates } from "../../../mail/useMailLiveUpdates.js";
 /** The well-known mail folder types an "aggregate" pseudo-folder can merge across every accessible
  * mailbox - a fixed, small set: `outbox` is deliberately excluded (transient per-mailbox send-queue
  * state, not a "merge across mailboxes" concept), and there's no aggregate concept for `calendar`/
@@ -28,6 +29,7 @@ const MailShellContext = createContext({
     mailboxes: [],
     mailboxFolders: [],
     onFolderCreated: () => undefined,
+    live: NO_LIVE_UPDATES,
 });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export function useMailShell() {
@@ -58,8 +60,15 @@ function folderSortKey(folder) {
 function sortedFoldersOf(folders) {
     return [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name));
 }
-function aggregateUnreadCount(mailboxFolders, type) {
-    return mailboxFolders.reduce((total, mf) => total + (mf.folders.find((f) => f.type === type)?.unreadCount ?? 0), 0);
+/** A folder's unread count: the refreshed one when live updates have read it since load, else the one it was listed with. */
+function unreadOf(folder, unreadCounts) {
+    return unreadCounts[folder.uid] ?? folder.unreadCount;
+}
+function aggregateUnreadCount(mailboxFolders, type, unreadCounts) {
+    return mailboxFolders.reduce((total, mf) => {
+        const folder = mf.folders.find((f) => f.type === type);
+        return total + (folder ? unreadOf(folder, unreadCounts) : 0);
+    }, 0);
 }
 /** Page size of the one `listMailboxes()` call this shell makes. */
 export const MAILBOX_LIST_LIMIT = 100;
@@ -172,9 +181,17 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         if (!MAIL_FOLDER_TYPES.has(folder.type)) {
             return;
         }
-        setMailboxFolders((prev) => prev.map((entry) => entry.mailbox.uid === folder.mailboxUid ? { ...entry, folders: [...entry.folders, folder] } : entry));
+        setMailboxFolders((prev) => prev.map((entry) => 
+        // Not one already there: another client's create event can arrive after (or twice, or alongside) our own.
+        entry.mailbox.uid === folder.mailboxUid && !entry.folders.some((existing) => existing.uid === folder.uid)
+            ? { ...entry, folders: [...entry.folders, folder] }
+            : entry));
     }, []);
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated]);
+    // New mail without a reload: push events for every folder, plus a safety-net poll. Held in state beside `mailboxFolders`
+    // rather than written into it, so a refreshed unread count never looks like a change of folders to the list on screen
+    // (which reloads, and forgets its selection, whenever the folders do).
+    const { live, unreadCounts } = useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolderCreated });
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, live }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, live]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
     // mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all. Checks
     // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
@@ -196,19 +213,22 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
         // unmounted).
         const sidebarContent = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, {}) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5", children: "All Mailboxes" }), _jsx("div", { className: "flex flex-col gap-0.5", children: AGGREGATE_FOLDER_TYPES.map((type) => {
-                                        const unread = aggregateUnreadCount(mailboxFolders, type);
+                                        const unread = aggregateUnreadCount(mailboxFolders, type, unreadCounts);
                                         return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
                                                 "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                                 aggregateFolderType === type
                                                     ? "bg-primary/10 text-primary-dark font-semibold"
                                                     : "text-text hover:bg-surface-alt",
                                             ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[type] }), unread > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: unread }))] }, type));
-                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: sortedFoldersOf(folders).map((folder) => (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
-                                            "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                                            folder.uid === folderUid
-                                                ? "bg-primary/10 text-primary-dark font-semibold"
-                                                : "text-text hover:bg-surface-alt",
-                                        ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), folder.unreadCount > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: folder.unreadCount }))] }, folder.uid))) })] }, mailbox.uid)))] }))] }));
+                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: sortedFoldersOf(folders).map((folder) => {
+                                        const unread = unreadOf(folder, unreadCounts);
+                                        return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
+                                                "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                                folder.uid === folderUid
+                                                    ? "bg-primary/10 text-primary-dark font-semibold"
+                                                    : "text-text hover:bg-surface-alt",
+                                            ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), unread > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: unread }))] }, folder.uid));
+                                    }) })] }, mailbox.uid)))] }))] }));
         inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent() }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent() }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has

package/dist/apps/shared/mail/mergeFirstPage.d.ts

@@ -0,0 +1,23 @@
+/** What `mergeFirstPage()` made of a fresh first page and the rows already on screen. */
+export interface MergedPage<T> {
+    /** The rows to show. */
+    rows: T[];
+    /** How many of the fresh page's rows were not on screen yet - the mail that arrived since. */
+    added: number;
+    /** `true` when `rows` is exactly the fresh page, because the whole listing fits on it. */
+    complete: boolean;
+}
+/**
+ * Folds a freshly fetched first page of a list into the rows already loaded (the first page plus whatever "load more"
+ * added), for the quiet refresh that follows a push event or a poll - so new mail appears without the list being reset,
+ * re-scrolled or re-selected the way a full reload would.
+ *
+ * - A page shorter than `pageSize` is the whole listing, so it simply replaces what is shown - which also drops what was
+ * deleted or moved elsewhere.
+ * - A full page is only the top of a longer listing. Its rows go first, in the server's order, followed by the loaded rows
+ * it did not repeat (older ones the reader has scrolled to). What was removed elsewhere from a long, partly loaded list
+ * stays until the next real load; nothing here can tell it from a row that merely slid off the first page.
+ * - A row in both keeps whichever copy `pick` prefers - by default the fresh one - so, for messages, a row the reader has
+ * just changed (a higher `version`) is not put back by a fetch that started before the change landed.
+ */
+export declare function mergeFirstPage<T>(current: T[], fresh: T[], idOf: (row: T) => string, pageSize: number, pick?: (current: T, fresh: T) => T): MergedPage<T>;

package/dist/apps/shared/mail/mergeFirstPage.js

@@ -0,0 +1,30 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Folds a freshly fetched first page of a list into the rows already loaded (the first page plus whatever "load more"
+ * added), for the quiet refresh that follows a push event or a poll - so new mail appears without the list being reset,
+ * re-scrolled or re-selected the way a full reload would.
+ *
+ * - A page shorter than `pageSize` is the whole listing, so it simply replaces what is shown - which also drops what was
+ * deleted or moved elsewhere.
+ * - A full page is only the top of a longer listing. Its rows go first, in the server's order, followed by the loaded rows
+ * it did not repeat (older ones the reader has scrolled to). What was removed elsewhere from a long, partly loaded list
+ * stays until the next real load; nothing here can tell it from a row that merely slid off the first page.
+ * - A row in both keeps whichever copy `pick` prefers - by default the fresh one - so, for messages, a row the reader has
+ * just changed (a higher `version`) is not put back by a fetch that started before the change landed.
+ */
+export function mergeFirstPage(current, fresh, idOf, pageSize, pick = (_current, next) => next) {
+    const currentById = new Map(current.map((row) => [idOf(row), row]));
+    const added = fresh.filter((row) => !currentById.has(idOf(row))).length;
+    const rows = fresh.map((row) => {
+        const existing = currentById.get(idOf(row));
+        return existing ? pick(existing, row) : row;
+    });
+    if (fresh.length < pageSize) {
+        return { rows, added, complete: true };
+    }
+    const freshIds = new Set(fresh.map(idOf));
+    return { rows: [...rows, ...current.filter((row) => !freshIds.has(idOf(row)))], added, complete: false };
+}

package/dist/apps/shared/mail/useMailLiveUpdates.d.ts

@@ -0,0 +1,48 @@
+import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailboxFolders } from "../components/mail/layout/MailShell.js";
+/** How often the safety-net poll runs while the tab is visible. The push socket does the real work; this is for a network
+ * that blocks or silently drops it, and for events published while it was reconnecting (Redis pub/sub is never replayed). */
+export declare const LIVE_POLL_INTERVAL_MS = 45000;
+/** Events arriving this close together are answered with one refresh - a burst of new mail is one refetch, not one each. */
+export declare const LIVE_EVENT_DEBOUNCE_MS = 400;
+/** What changed, as far as a list on screen is concerned. */
+export interface LiveUpdates {
+    /** Bumped each time the list should quietly refetch its first page. `0` until the first bump. */
+    tick: number;
+    /** The folders the events behind the latest bump touched - `null` when that isn't known (a poll, a reconnect, the tab
+     * coming back to the front), meaning any folder may have changed. */
+    folderUids: ReadonlySet<string> | null;
+}
+export declare const NO_LIVE_UPDATES: LiveUpdates;
+/**
+ * The channels to subscribe to, most important first (the push client keeps the first `PUSH_MAX_CHANNELS`): every
+ * mailbox's Inbox - where mail lands - then each mailbox's other folders in the sidebar's own order, then the mailbox uids
+ * themselves (which announce new folders). A folder is a channel of its own; subscribing to a mailbox does not deliver its
+ * folders' events.
+ */
+export declare function pushChannelsFor(mailboxFolders: MailboxFolders[], mailboxes: Mailbox[]): string[];
+export interface UseMailLiveUpdatesOptions {
+    /** Nothing runs without a signed-in user. */
+    userUid?: string;
+    mailboxes: Mailbox[];
+    mailboxFolders: MailboxFolders[];
+    /** Called with a folder another client (or this one) created, so the sidebar shows it. Called only for one not already known. */
+    onFolderCreated: (folder: Folder) => void;
+}
+export interface MailLiveUpdates {
+    live: LiveUpdates;
+    /** The latest unread count of each folder that has been refreshed since load, by folder uid - what the sidebar's badges show
+     * instead of the count the folder list was loaded with. */
+    unreadCounts: Record<string, number>;
+}
+/**
+ * Keeps Mail current without a page reload. One shared push connection per tab (`getPushClient()`) is subscribed to every
+ * folder of every accessible mailbox; a message event for any of them, a reconnect, a poll of the safety net (every
+ * `LIVE_POLL_INTERVAL_MS` while the tab is visible - and the only mechanism, silently, where the socket can't connect), the
+ * tab coming back to the front or the browser coming back online, all end in the same debounced refresh: `live` is bumped
+ * (the list on screen refetches its first page - see `mergeFirstPage()`) and every folder's unread count is re-read.
+ *
+ * Sign-out closes the socket for good: another tab's or this one's, heard on the same channel `AppShell` listens on.
+ * Renders nothing and does nothing where there is no window (server-side rendering).
+ */
+export declare function useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolderCreated }: UseMailLiveUpdatesOptions): MailLiveUpdates;

package/dist/apps/shared/mail/useMailLiveUpdates.js

@@ -0,0 +1,180 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, useRef, useState } from "react";
+import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import { getPushClient } from "@rapidmx/react-shared/mail/pushClient.js";
+import { SIGN_OUT_CHANNEL } from "../search/localIndexRpcClient.js";
+/** How often the safety-net poll runs while the tab is visible. The push socket does the real work; this is for a network
+ * that blocks or silently drops it, and for events published while it was reconnecting (Redis pub/sub is never replayed). */
+export const LIVE_POLL_INTERVAL_MS = 45000;
+/** Events arriving this close together are answered with one refresh - a burst of new mail is one refetch, not one each. */
+export const LIVE_EVENT_DEBOUNCE_MS = 400;
+export const NO_LIVE_UPDATES = { tick: 0, folderUids: null };
+/** The class names `NotificationUtils.sendMessage()` publishes are the model's (`MessageMongo`, `MessageSQL`, `FolderMongo`). */
+const MESSAGE_EVENT = /^Message/;
+const FOLDER_EVENT = /^Folder/;
+const MESSAGE_ACTIONS = new Set(["create", "update", "delete"]);
+/**
+ * The channels to subscribe to, most important first (the push client keeps the first `PUSH_MAX_CHANNELS`): every
+ * mailbox's Inbox - where mail lands - then each mailbox's other folders in the sidebar's own order, then the mailbox uids
+ * themselves (which announce new folders). A folder is a channel of its own; subscribing to a mailbox does not deliver its
+ * folders' events.
+ */
+export function pushChannelsFor(mailboxFolders, mailboxes) {
+    const inboxes = mailboxFolders.flatMap((entry) => entry.folders.filter((folder) => folder.type === "inbox"));
+    const others = mailboxFolders.flatMap((entry) => entry.folders.filter((folder) => folder.type !== "inbox"));
+    return [...new Set([...inboxes, ...others].map((folder) => folder.uid).concat(mailboxes.map((mailbox) => mailbox.uid)))];
+}
+function isFolder(value) {
+    const folder = value;
+    return !!folder && typeof folder.uid === "string" && typeof folder.mailboxUid === "string" && typeof folder.type === "string";
+}
+/** The folder a message event is about: the message's own `folderUid`, else the channel it arrived on (when the server said). */
+function folderOfMessageEvent(event) {
+    const data = event.data;
+    if (typeof data?.folderUid === "string") {
+        return data.folderUid;
+    }
+    return event.channel;
+}
+/**
+ * Keeps Mail current without a page reload. One shared push connection per tab (`getPushClient()`) is subscribed to every
+ * folder of every accessible mailbox; a message event for any of them, a reconnect, a poll of the safety net (every
+ * `LIVE_POLL_INTERVAL_MS` while the tab is visible - and the only mechanism, silently, where the socket can't connect), the
+ * tab coming back to the front or the browser coming back online, all end in the same debounced refresh: `live` is bumped
+ * (the list on screen refetches its first page - see `mergeFirstPage()`) and every folder's unread count is re-read.
+ *
+ * Sign-out closes the socket for good: another tab's or this one's, heard on the same channel `AppShell` listens on.
+ * Renders nothing and does nothing where there is no window (server-side rendering).
+ */
+export function useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolderCreated }) {
+    const [live, setLive] = useState(NO_LIVE_UPDATES);
+    const [unreadCounts, setUnreadCounts] = useState({});
+    // The latest inputs, for the long-lived listeners below.
+    const latestRef = useRef({ mailboxes, mailboxFolders, onFolderCreated });
+    latestRef.current = { mailboxes, mailboxFolders, onFolderCreated };
+    const channels = useMemo(() => pushChannelsFor(mailboxFolders, mailboxes), [mailboxFolders, mailboxes]);
+    const channelKey = channels.join("|");
+    const channelsRef = useRef(channels);
+    channelsRef.current = channels;
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        const client = getPushClient();
+        let stopped = false;
+        let timer;
+        let pendingFolders = new Set();
+        let pendingUnknown = false;
+        let countsRun = 0;
+        let everOpen = false;
+        async function refreshCounts() {
+            const run = ++countsRun;
+            const results = await Promise.all(latestRef.current.mailboxes.map((mailbox) => listFolders(mailbox.uid).catch(() => undefined)));
+            if (stopped || run !== countsRun) {
+                return;
+            }
+            const fresh = {};
+            for (const folders of results) {
+                for (const folder of folders ?? []) {
+                    fresh[folder.uid] = folder.unreadCount;
+                }
+            }
+            setUnreadCounts((previous) => {
+                const changed = Object.entries(fresh).some(([uid, count]) => previous[uid] !== count);
+                return changed ? { ...previous, ...fresh } : previous;
+            });
+        }
+        // Never runs once `stopped`: whatever sets it clears the timer first.
+        function flush() {
+            timer = undefined;
+            const folderUids = pendingUnknown ? null : new Set(pendingFolders);
+            pendingFolders = new Set();
+            pendingUnknown = false;
+            setLive((previous) => ({ tick: previous.tick + 1, folderUids }));
+            void refreshCounts();
+        }
+        /** Asks for a refresh: of the given folders, or (no argument) of whatever may have changed. */
+        function schedule(folderUid) {
+            if (stopped) {
+                return;
+            }
+            if (folderUid) {
+                pendingFolders.add(folderUid);
+            }
+            else {
+                pendingUnknown = true;
+            }
+            timer ?? (timer = setTimeout(flush, LIVE_EVENT_DEBOUNCE_MS));
+        }
+        const offEvent = client.onEvent((event) => {
+            if (MESSAGE_EVENT.test(event.type) && MESSAGE_ACTIONS.has(event.action ?? "")) {
+                schedule(folderOfMessageEvent(event));
+            }
+            else if (FOLDER_EVENT.test(event.type) && event.action === "create" && isFolder(event.data)) {
+                const folder = event.data;
+                const known = latestRef.current.mailboxFolders.some((entry) => entry.folders.some((f) => f.uid === folder.uid));
+                if (!known) {
+                    latestRef.current.onFolderCreated(folder);
+                }
+            }
+        });
+        // Anything published while the socket was down is gone for good, so every reconnect is followed by a refresh.
+        const offStatus = client.onStatus((status) => {
+            if (status === "open") {
+                if (everOpen) {
+                    schedule();
+                }
+                everOpen = true;
+            }
+        });
+        const poll = setInterval(() => {
+            if (document.visibilityState === "visible") {
+                schedule();
+            }
+        }, LIVE_POLL_INTERVAL_MS);
+        function refreshNow() {
+            if (document.visibilityState === "visible") {
+                client.reconnectNow();
+                schedule();
+            }
+        }
+        function handleOnline() {
+            client.reconnectNow();
+            schedule();
+        }
+        document.addEventListener("visibilitychange", refreshNow);
+        window.addEventListener("focus", refreshNow);
+        window.addEventListener("online", handleOnline);
+        // A sign-out, in this tab or another, ended the session behind the socket: close it for good and stop refreshing.
+        const signOut = typeof BroadcastChannel === "undefined" ? undefined : new BroadcastChannel(SIGN_OUT_CHANNEL);
+        signOut?.addEventListener("message", (event) => {
+            if (event.data?.type === "sign-out") {
+                stopped = true;
+                clearTimeout(timer);
+                client.close();
+            }
+        });
+        client.setChannels(channelsRef.current);
+        client.start();
+        return () => {
+            stopped = true;
+            clearTimeout(timer);
+            clearInterval(poll);
+            offEvent();
+            offStatus();
+            document.removeEventListener("visibilitychange", refreshNow);
+            window.removeEventListener("focus", refreshNow);
+            window.removeEventListener("online", handleOnline);
+            signOut?.close();
+        };
+    }, [userUid]);
+    useEffect(() => {
+        if (userUid) {
+            getPushClient().setChannels(channels);
+        }
+    }, [userUid, channelKey]);
+    return { live, unreadCounts };
+}