@rapidmx/web-client 0.33.0 → 0.35.0

package/dist/apps/shared/notifications/sounds.js

@@ -0,0 +1,101 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { getNotificationSoundsEnabled } from "./preferences.js";
+/** The shortest time between two plays of the same sound. */
+export const MIN_GAP_MS = 750;
+/** A soft two-note rising chime. */
+const CHIME = [
+    { frequency: 1046.5, start: 0, duration: 0.5, type: "sine", gain: 0.16 },
+    { frequency: 1568, start: 0.14, duration: 0.8, type: "sine", gain: 0.14 },
+];
+/** A struck bell, twice: a fundamental with the inharmonic partials of a bell, each dying away slowly. */
+const BELL = [0, 0.75].flatMap((start) => [
+    { ratio: 1, gain: 0.16, duration: 1.4 },
+    { ratio: 2.76, gain: 0.08, duration: 1.0 },
+    { ratio: 5.4, gain: 0.04, duration: 0.7 },
+    { ratio: 8.93, gain: 0.02, duration: 0.4 },
+].map((partial) => ({ frequency: 880 * partial.ratio, start, duration: partial.duration, type: "sine", gain: partial.gain })));
+/** Two short falling buzzes - nothing like the other two. */
+const ERROR = [
+    { frequency: 300, endFrequency: 190, start: 0, duration: 0.2, type: "sawtooth", gain: 0.09 },
+    { frequency: 300, endFrequency: 190, start: 0.26, duration: 0.2, type: "sawtooth", gain: 0.09 },
+];
+const SOUNDS = { mail: CHIME, calendar: BELL, error: ERROR };
+let context;
+const lastPlayed = {};
+function audioContext() {
+    if (context) {
+        return context;
+    }
+    const Ctor = typeof window === "undefined" ? undefined : (window.AudioContext ?? window.webkitAudioContext);
+    if (!Ctor) {
+        return undefined;
+    }
+    try {
+        context = new Ctor();
+    }
+    catch {
+        return undefined;
+    }
+    return context;
+}
+function playTone(audio, tone) {
+    const begin = audio.currentTime + tone.start;
+    const end = begin + tone.duration;
+    const oscillator = audio.createOscillator();
+    const volume = audio.createGain();
+    oscillator.type = tone.type;
+    oscillator.frequency.setValueAtTime(tone.frequency, begin);
+    if (tone.endFrequency !== undefined) {
+        oscillator.frequency.exponentialRampToValueAtTime(tone.endFrequency, end);
+    }
+    // A short attack so it doesn't click, then an exponential die-away.
+    volume.gain.setValueAtTime(0.0001, begin);
+    volume.gain.exponentialRampToValueAtTime(tone.gain, begin + 0.01);
+    volume.gain.exponentialRampToValueAtTime(0.0001, end);
+    oscillator.connect(volume);
+    volume.connect(audio.destination);
+    oscillator.start(begin);
+    oscillator.stop(end + 0.05);
+}
+/** Plays `sound`, unless the person turned notification sounds off, the same sound just played, or the browser won't make sound yet. Never throws. */
+export function playNotificationSound(sound, now = Date.now()) {
+    if (!getNotificationSoundsEnabled()) {
+        return;
+    }
+    const last = lastPlayed[sound];
+    if (last !== undefined && now - last < MIN_GAP_MS) {
+        return;
+    }
+    try {
+        const audio = audioContext();
+        if (!audio) {
+            return;
+        }
+        lastPlayed[sound] = now;
+        const play = () => {
+            for (const tone of SOUNDS[sound]) {
+                playTone(audio, tone);
+            }
+        };
+        if (audio.state === "suspended") {
+            // Allowed once the page has been interacted with; until then this is refused and the sound is skipped.
+            void audio.resume().then(play, () => undefined);
+        }
+        else {
+            play();
+        }
+    }
+    catch {
+        // Audio is a nicety: a failure to make a sound never reaches the notification.
+    }
+}
+/** Forgets the audio context and what was played when - for tests. */
+export function resetNotificationSounds() {
+    context = undefined;
+    for (const key of Object.keys(lastPlayed)) {
+        delete lastPlayed[key];
+    }
+}

package/dist/apps/shared/notifications/store.js

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { getNotificationsEnabled } from "./preferences.js";
+import { playNotificationSound } from "./sounds.js";
 export const MAX_VISIBLE = 3;
 export const MAX_QUEUED = 20;
 export const QUEUE_STALE_MS = 30000;
@@ -240,6 +241,16 @@ export function notify(input) {
         emit();
         return id;
     }
+    // What is shown is heard: a chime for new mail, a bell for a calendar notice, a buzz for an error.
+    if (entry.kind === "mail") {
+        playNotificationSound("mail");
+    }
+    else if (entry.kind === "calendar") {
+        playNotificationSound("calendar");
+    }
+    else if (entry.kind === "error") {
+        playNotificationSound("error");
+    }
     const room = visibleCount() < MAX_VISIBLE;
     entries.push(entry);
     if (room) {

package/dist/apps/www/calendar/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
+import { useLocation, useNavigate } from "../../shared/navigation/index.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3, HiOutlinePlus } from "react-icons/hi2";
@@ -12,11 +13,11 @@ import { ApiRequestError } from "../../../lib/util/api.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
 import { getCalendarEvent, listCalendarEvents } from "../../../lib/calendar/calendarApi.js";
-import { getPushClient } from "../../../lib/mail/pushClient.js";
+import { useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calendarMutations.js";
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
-import { expandAllOccurrences } from "../../../lib/calendar/recurrence.js";
+import { expandAllOccurrences, expandOccurrences } from "../../../lib/calendar/recurrence.js";
 import { useDayKey } from "../../../lib/calendar/useDayKey.js";
 import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
@@ -48,6 +49,8 @@ import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
 import { changedEventOf } from "../../shared/calendar/calendarLiveUpdates.js";
+/** The push client channel group (`PushClient.setChannels()`) the page's calendars are subscribed under. */
+const CALENDAR_CHANNEL_GROUP = "calendar";
 /** The furthest instants a `Date` can hold: the List's "range" reaches both. */
 const MAX_DATE_MS = 8.64e15;
 function CalendarPage(props) {
@@ -243,11 +246,9 @@ function CalendarContent({ userUid, bookingHref }) {
     // fetch changes nothing: the next load shows the event as it is.
     const checkedFolderUidsRef = useRef(checkedFolderUids);
     checkedFolderUidsRef.current = checkedFolderUids;
-    useEffect(() => getPushClient().onEvent((event) => {
-        const change = changedEventOf(event);
-        if (!change) {
-            return;
-        }
+    // Those events are published on the calendar's own channel, so the page subscribes to every calendar it lists - checked or not, so checking
+    // one needs no new subscription - while it is open.
+    useFolderLiveUpdates(CALENDAR_CHANNEL_GROUP, calendarFolders.map((f) => f.uid), changedEventOf, (change) => {
         const { uid } = change;
         if (change.deleted) {
             setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
@@ -264,7 +265,7 @@ function CalendarContent({ userUid, bookingHref }) {
                 setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
             }
         });
-    }), [client]);
+    });
     // Search: `searchText` is the box, `query` what it held once typing paused (or Enter was pressed) and is what is searched for. A search covers every
     // event of the checked calendars whatever the view shows (see `searchOccurrences()`); while one runs the views show only its matches, and
     // `activeKey` is the match being pointed at (Previous/Next match step through `matches`).
@@ -443,6 +444,34 @@ function CalendarContent({ userUid, bookingHref }) {
     function closeModal() {
         setModal(null);
     }
+    // `?event=<uid>&start=<iso>` opens that event's card on the day it is on - where a calendar alarm's View button leads. `start` names which occurrence
+    // of a recurring event. Read from the page's own location, so it also works from the Calendar itself (a shallow navigation), and then taken off the
+    // address so a reload doesn't open it again.
+    const { search: locationSearch } = useLocation();
+    const navigateTo = useNavigate();
+    const openedFromAddressRef = useRef("");
+    useEffect(() => {
+        const params = new URLSearchParams(locationSearch);
+        const eventUid = params.get("event");
+        const wanted = `${eventUid}|${params.get("start")}`;
+        if (!eventUid || openedFromAddressRef.current === wanted) {
+            return;
+        }
+        openedFromAddressRef.current = wanted;
+        const requestedStart = new Date(params.get("start") ?? "");
+        navigateTo("/calendar", { replace: true });
+        getCalendarEvent(eventUid, client)
+            .then((event) => {
+            const from = isNaN(requestedStart.getTime()) ? new Date(event.startDate) : requestedStart;
+            const candidates = expandOccurrences(event, new Date(from.getTime() - 86400000), new Date(from.getTime() + 86400000));
+            const match = candidates.find((occurrence) => new Date(occurrence.startDate).getTime() === from.getTime()) ?? candidates[0];
+            if (match) {
+                setViewDate(occurrenceDay(match));
+                openEvent(match);
+            }
+        })
+            .catch((err) => notifyApiError(err, "Couldn't open the event"));
+    }, [locationSearch]);
     // Keyboard shortcuts - the toolbar's own actions. (A dialog open - the event editor - silences them.)
     useShortcut(SHORTCUTS.calendar.create, () => openNewEvent(), { enabled: !!mailboxUid && !!folderUid });
     useShortcut(SHORTCUTS.calendar.today, goToday);

package/dist/apps/www/contacts/index.js

@@ -7,7 +7,7 @@ import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useNavigate } from "../../shared/navigation/index.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ApiRequestError } from "../../../lib/util/api.js";
-import { createContact, deleteContact, listContacts, ensureSuggestedContacts, listContactsInFolders, listDeletedContacts, setContactFavorite, updateContact, } from "../../../lib/contacts/contactsApi.js";
+import { createContact, deleteContact, getContact, listContacts, ensureSuggestedContacts, listContactsInFolders, listDeletedContacts, setContactFavorite, updateContact, } from "../../../lib/contacts/contactsApi.js";
 import { VCARD_MAX_CHARS, VCARD_MAX_CONTACTS, contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
 import { withoutDuplicates } from "../../shared/components/contacts/participantDetails.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
@@ -33,6 +33,15 @@ import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { notify } from "../../shared/notifications/store.js";
+import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+/** The published model class name of a contact on either database (`ContactMongo`, `ContactSQL`) - not a `ContactList`'s. */
+const CONTACT_MODEL = /^Contact(Mongo|SQL)$/;
+/** The push client channel group (`PushClient.setChannels()`) the page's contacts folders are subscribed under. */
+const CONTACTS_CHANNEL_GROUP = "contacts";
+/** `list` with `contact` in place of the one with its uid, or added when it has none. */
+function upsertContact(list, contact) {
+    return list.some((existing) => existing.uid === contact.uid) ? list.map((existing) => (existing.uid === contact.uid ? contact : existing)) : [...list, contact];
+}
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function ContactsPage(props) {
     return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, { userUid: props.userUid }) }));
@@ -137,6 +146,39 @@ function ContactsContent({ userUid }) {
             cancelled = true;
         };
     }, [mailboxUid]);
+    // A contact created, changed or deleted anywhere - another tab, a phone over ActiveSync - is announced on its folder's channel. It is fetched again by
+    // its uid and filed in the list of the folder it is in now (the mailbox's contacts, or its suggested contacts), and taken out of the other; one that is
+    // gone (a delete, or a 404) leaves both. A failed fetch changes nothing: the next load shows it as it is.
+    useFolderLiveUpdates(CONTACTS_CHANNEL_GROUP, [folderUid, suggestedFolderUid].filter((uid) => !!uid), (event) => changedItemOf(event, CONTACT_MODEL), (change) => {
+        const remove = (uid) => {
+            setContacts((previous) => previous.filter((existing) => existing.uid !== uid));
+            setSuggestedContacts((previous) => previous.filter((existing) => existing.uid !== uid));
+        };
+        if (change.deleted) {
+            remove(change.uid);
+            return;
+        }
+        void getContact(change.uid, client).then((fresh) => {
+            if (fresh.deleted === true) {
+                remove(fresh.uid);
+            }
+            else if (fresh.folderUid === folderUid) {
+                setContacts((previous) => upsertContact(previous, fresh));
+                setSuggestedContacts((previous) => previous.filter((existing) => existing.uid !== fresh.uid));
+            }
+            else if (fresh.folderUid === suggestedFolderUid) {
+                setSuggestedContacts((previous) => upsertContact(previous, fresh));
+                setContacts((previous) => previous.filter((existing) => existing.uid !== fresh.uid));
+            }
+            else {
+                remove(fresh.uid);
+            }
+        }, (err) => {
+            if (err instanceof ApiRequestError && err.status === 404) {
+                remove(change.uid);
+            }
+        });
+    });
     // restapi only honors `?deleted=true` for a caller with both delete and update rights on the contacts *folder*
     // (its ACL, which inherits the mailbox's but can carry its own records) - anyone else silently gets the *live*
     // contacts back, which the Deleted view would then present as deleted. There is no client API for the caller's
@@ -194,6 +236,9 @@ function ContactsContent({ userUid }) {
                 return contacts;
             case "favorites":
                 return contacts.filter((c) => c.favorite);
+            case "everyone":
+                // The mailbox's own contacts and its suggested ones in one list (a person is in only one of them: a suggestion that is accepted is moved).
+                return [...contacts, ...suggestedContacts];
             case "suggested":
                 return suggestedContacts;
             case "list":
@@ -377,7 +422,8 @@ function ContactsContent({ userUid }) {
     });
     // A suggested contact becomes one of the mailbox's own: a copy in its contacts folder, and the suggestion removed (the person is not suggested again).
     const handleAddToContacts = singleFlight(async () => {
-        for (const contact of checkedContacts) {
+        // In the All contacts view the selection can hold contacts that already are the mailbox's own: only the suggested ones are added.
+        for (const contact of checkedContacts.filter((checked) => checked.folderUid === suggestedFolderUid)) {
             try {
                 await createContact({
                     mailboxUid: contact.mailboxUid,
@@ -453,7 +499,7 @@ function ContactsContent({ userUid }) {
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted, suggestedCount: suggestedFolderUid ? suggestedContacts.length : undefined }), _jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex", children: [_jsxs("div", { className: [
                             "w-full md:w-[clamp(16rem,32vw,26rem)] min-w-0 md:shrink-0 md:border-r border-border md:flex flex-col min-h-0",
                             mode === "new" ? "hidden md:flex" : "flex",
-                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onAddToContacts: view.type === "suggested" ? handleAddToContacts : undefined, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", 
+                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onAddToContacts: view.type === "suggested" || view.type === "everyone" ? handleAddToContacts : undefined, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", 
                                                             // A deleted contact has no pane to show (it can't be restored or opened), and its route would answer 404.
                                                             disabled: isDeletedView, onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left disabled:cursor-default", children: [_jsx(ContactPhotoAvatar, { lazy: true, displayName: contact.displayName, size: 28, contact: contact, email: contact.emails[0]?.address }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), canWrite: mailboxWritable, onKeysChanged: () => void reload(), onChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
 }

package/dist/apps/www/tasks/index.js

@@ -7,7 +7,7 @@ import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { endOfWeek, isAfter, isBefore, isToday, startOfDay } from "date-fns";
 import { ApiRequestError } from "../../../lib/util/api.js";
-import { createTask, deleteTask, listTasks, setTaskCompleted, setTaskMyDay, } from "../../../lib/tasks/tasksApi.js";
+import { createTask, deleteTask, getTask, listTasks, setTaskCompleted, setTaskMyDay, } from "../../../lib/tasks/tasksApi.js";
 import { listFlaggedMessages } from "../../../lib/mail/flaggedMessages.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import { useDayKey } from "../../../lib/calendar/useDayKey.js";
@@ -25,6 +25,11 @@ import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+/** The published model class name of a task on either database (`TaskMongo`, `TaskSQL`) - not a `TaskList`'s. */
+const TASK_MODEL = /^Task(Mongo|SQL)$/;
+/** The push client channel group (`PushClient.setChannels()`) the page's tasks folder is subscribed under. */
+const TASKS_CHANNEL_GROUP = "tasks";
 const INPUT_CLASS = "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function TasksPage(props) {
     return (_jsx(TasksShell, { ...props, children: _jsx(TasksContent, {}) }));
@@ -121,6 +126,29 @@ function TasksContent() {
     useEffect(() => {
         void reload();
     }, [folderUid]);
+    // A task created, changed or deleted anywhere - another tab, a phone over ActiveSync - is announced on its folder's channel. It is fetched again by its
+    // uid and replaces (or joins) the list while it is still in this folder; one that is gone (a delete, a 404, or moved to another folder) leaves it. A
+    // failed fetch changes nothing: the next load shows it as it is.
+    useFolderLiveUpdates(TASKS_CHANNEL_GROUP, folderUid ? [folderUid] : [], (event) => changedItemOf(event, TASK_MODEL), (change) => {
+        const remove = () => setTasks((previous) => previous.filter((existing) => existing.uid !== change.uid));
+        if (change.deleted) {
+            remove();
+            return;
+        }
+        void getTask(change.uid, client).then((fresh) => {
+            if (fresh.folderUid !== folderUid) {
+                remove();
+                return;
+            }
+            setTasks((previous) => previous.some((existing) => existing.uid === fresh.uid)
+                ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
+                : [...previous, fresh]);
+        }, (err) => {
+            if (err instanceof ApiRequestError && err.status === 404) {
+                remove();
+            }
+        });
+    });
     useEffect(() => {
         setTargetMailboxUid(undefined);
         setAddedElsewhere(null);

package/dist/lib/mail/pushClient.d.ts

@@ -28,6 +28,8 @@ export type PushStatus = "idle" | "connecting" | "open" | "reconnecting" | "clos
  * caller orders its channels most important first.
  */
 export declare const PUSH_MAX_CHANNELS = 40;
+/** The group `setChannels()` sets when no other is named: Mail's. */
+export declare const DEFAULT_CHANNEL_GROUP = "mail";
 /** The first reconnect waits about this long, and each further failure doubles it ... */
 export declare const PUSH_BACKOFF_BASE_MS = 1000;
 /** ... up to this. */
@@ -55,6 +57,8 @@ export declare class PushClient {
     private current;
     /** What the caller wants to hear about, most important first. */
     private desired;
+    /** The channels each caller asked for (`setChannels()`'s `group`), merged into `desired`. */
+    private groups;
     /** What this socket is subscribed to (including whatever the server put it on at connect). */
     private subscribed;
     /** The channels this client itself asked for and was granted - the only ones it may unsubscribe. */
@@ -73,10 +77,13 @@ export declare class PushClient {
      */
     close(): void;
     /**
-     * Sets the channels (folder and mailbox uids) to receive events for. Deduplicated and cut to `PUSH_MAX_CHANNELS`; on
-     * an open socket the difference is subscribed/unsubscribed at once, otherwise it is sent when the socket opens.
+     * Sets the channels (folder and mailbox uids) one caller wants events for: Mail's, in the default group, or a page's
+     * own (the Calendar's calendars - Mail subscribes to mail folders only). Every group's channels are wanted together,
+     * each page's own group ahead of the default one, since a page's are what is on screen; deduplicated and cut to
+     * `PUSH_MAX_CHANNELS`. An empty list drops the group. On an open socket the difference is subscribed/unsubscribed at
+     * once, otherwise it is sent when the socket opens.
      */
-    setChannels(channels: readonly string[]): void;
+    setChannels(channels: readonly string[], group?: string): void;
     /** Calls `listener` with every event; returns the function that stops it. */
     onEvent(listener: (event: PushEvent) => void): () => void;
     /** Calls `listener` whenever `status` changes; returns the function that stops it. */

package/dist/lib/mail/pushClient.js

@@ -37,6 +37,8 @@ const SOCKET_OPEN = 1;
  * caller orders its channels most important first.
  */
 export const PUSH_MAX_CHANNELS = 40;
+/** The group `setChannels()` sets when no other is named: Mail's. */
+export const DEFAULT_CHANNEL_GROUP = "mail";
 /** The first reconnect waits about this long, and each further failure doubles it ... */
 export const PUSH_BACKOFF_BASE_MS = 1000;
 /** ... up to this. */
@@ -61,6 +63,8 @@ export class PushClient {
         this.current = "idle";
         /** What the caller wants to hear about, most important first. */
         this.desired = [];
+        /** The channels each caller asked for (`setChannels()`'s `group`), merged into `desired`. */
+        this.groups = new Map();
         /** What this socket is subscribed to (including whatever the server put it on at connect). */
         this.subscribed = new Set();
         /** The channels this client itself asked for and was granted - the only ones it may unsubscribe. */
@@ -107,11 +111,21 @@ export class PushClient {
         this.setStatus("closed");
     }
     /**
-     * Sets the channels (folder and mailbox uids) to receive events for. Deduplicated and cut to `PUSH_MAX_CHANNELS`; on
-     * an open socket the difference is subscribed/unsubscribed at once, otherwise it is sent when the socket opens.
+     * Sets the channels (folder and mailbox uids) one caller wants events for: Mail's, in the default group, or a page's
+     * own (the Calendar's calendars - Mail subscribes to mail folders only). Every group's channels are wanted together,
+     * each page's own group ahead of the default one, since a page's are what is on screen; deduplicated and cut to
+     * `PUSH_MAX_CHANNELS`. An empty list drops the group. On an open socket the difference is subscribed/unsubscribed at
+     * once, otherwise it is sent when the socket opens.
      */
-    setChannels(channels) {
-        this.desired = [...new Set(channels)].slice(0, PUSH_MAX_CHANNELS);
+    setChannels(channels, group = DEFAULT_CHANNEL_GROUP) {
+        if (channels.length > 0) {
+            this.groups.set(group, [...channels]);
+        }
+        else {
+            this.groups.delete(group);
+        }
+        const ordered = [...this.groups.entries()].sort(([a], [b]) => Number(a === DEFAULT_CHANNEL_GROUP) - Number(b === DEFAULT_CHANNEL_GROUP));
+        this.desired = [...new Set(ordered.flatMap(([, list]) => list))].slice(0, PUSH_MAX_CHANNELS);
         if (this.ready) {
             this.syncSubscriptions();
         }

package/dist/lib/tasks/tasksApi.d.ts

@@ -30,6 +30,7 @@ export interface Task {
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 /** Lists a folder's tasks, soonest due date first (tasks with no due date sort last). */
 export declare function listTasks(folderUid: string, params?: ListParams, client?: ApiClient): Promise<Task[]>;
+export declare function getTask(uid: string, client?: ApiClient): Promise<Task>;
 export interface CreateTaskInput {
     mailboxUid: string;
     folderUid: string;

package/dist/lib/tasks/tasksApi.js

@@ -13,6 +13,9 @@ import { SETTINGS_LIST_LIMIT, buildQuery } from "../util/apiQuery.js";
 export function listTasks(folderUid, params = {}, client) {
     return withClient(client, `/mail/tasks?${buildQuery(params, { folderUid, sort: JSON.stringify({ dueDate: "ASC", uid: "ASC" }) })}`);
 }
+export function getTask(uid, client) {
+    return withClient(client, `/mail/tasks/${encodeURIComponent(uid)}`);
+}
 export function createTask(input, client) {
     return withClient(client, "/mail/tasks", {
         method: "POST",

package/lib/mail/pushClient.ts

@@ -66,6 +66,9 @@ const SOCKET_OPEN = 1;
  */
 export const PUSH_MAX_CHANNELS = 40;
 
+/** The group `setChannels()` sets when no other is named: Mail's. */
+export const DEFAULT_CHANNEL_GROUP = "mail";
+
 /** The first reconnect waits about this long, and each further failure doubles it ... */
 export const PUSH_BACKOFF_BASE_MS = 1_000;
 /** ... up to this. */
@@ -102,6 +105,8 @@ export class PushClient {
     private current: PushStatus = "idle";
     /** What the caller wants to hear about, most important first. */
     private desired: string[] = [];
+    /** The channels each caller asked for (`setChannels()`'s `group`), merged into `desired`. */
+    private groups = new Map<string, string[]>();
     /** What this socket is subscribed to (including whatever the server put it on at connect). */
     private subscribed = new Set<string>();
     /** The channels this client itself asked for and was granted - the only ones it may unsubscribe. */
@@ -152,11 +157,20 @@ export class PushClient {
     }
 
     /**
-     * Sets the channels (folder and mailbox uids) to receive events for. Deduplicated and cut to `PUSH_MAX_CHANNELS`; on
-     * an open socket the difference is subscribed/unsubscribed at once, otherwise it is sent when the socket opens.
+     * Sets the channels (folder and mailbox uids) one caller wants events for: Mail's, in the default group, or a page's
+     * own (the Calendar's calendars - Mail subscribes to mail folders only). Every group's channels are wanted together,
+     * each page's own group ahead of the default one, since a page's are what is on screen; deduplicated and cut to
+     * `PUSH_MAX_CHANNELS`. An empty list drops the group. On an open socket the difference is subscribed/unsubscribed at
+     * once, otherwise it is sent when the socket opens.
      */
-    setChannels(channels: readonly string[]): void {
-        this.desired = [...new Set(channels)].slice(0, PUSH_MAX_CHANNELS);
+    setChannels(channels: readonly string[], group = DEFAULT_CHANNEL_GROUP): void {
+        if (channels.length > 0) {
+            this.groups.set(group, [...channels]);
+        } else {
+            this.groups.delete(group);
+        }
+        const ordered = [...this.groups.entries()].sort(([a], [b]) => Number(a === DEFAULT_CHANNEL_GROUP) - Number(b === DEFAULT_CHANNEL_GROUP));
+        this.desired = [...new Set(ordered.flatMap(([, list]) => list))].slice(0, PUSH_MAX_CHANNELS);
         if (this.ready) {
             this.syncSubscriptions();
         }

package/lib/tasks/tasksApi.ts

@@ -42,6 +42,10 @@ export function listTasks(folderUid: string, params: ListParams = {}, client?: A
     return withClient(client, `/mail/tasks?${buildQuery(params, { folderUid, sort: JSON.stringify({ dueDate: "ASC", uid: "ASC" }) })}`);
 }
 
+export function getTask(uid: string, client?: ApiClient): Promise<Task> {
+    return withClient(client, `/mail/tasks/${encodeURIComponent(uid)}`);
+}
+
 export interface CreateTaskInput {
     mailboxUid: string;
     folderUid: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",