nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Messages/MailClient.js

@@ -0,0 +1,410 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, iconArchive, iconArrowLeft, iconMail, iconMenu2, iconMessageCircle, iconPencil, iconRefresh, iconSearch, iconSend, iconStar, InlineIcon } from "nexus-icons";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { sameChatId } from "../../Helpers/ChatHelpers.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { formatDateTime } from "../../Helpers/DateTimeHelpers.js";
+import { followMailboxReadMarks, followMailReadMarks, mailDiscussionSource, mailFolderUnread, mailListTime, mailRowKind, mailRowTypeKey, mailTypeLabel, mailTypeOf, mailTypes, readMailSplit, writeMailSplit, } from "../../Helpers/MailClientHelpers.js";
+import { MAIL_LIST_LABELS, mailPeoplePicker, mailPreviewText } from "../../Helpers/MessageHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { SplitButton } from "../Documents/SplitButton.js";
+import { ChatFailure } from "../Chats/ChatParts.js";
+import { ChatPopup } from "../Chats/ChatPopup.js";
+import { TextBox } from "../Inputs/TextBox.js";
+import { Avatar } from "../Viewers/Avatar.js";
+import { MailComposeWindow } from "./MailCompose.js";
+import { MailReader } from "./MailReader.js";
+const FOLDERS = ["inbox", "unread", "sent", "archived"];
+const FOLDER_ICONS = {
+    inbox: _jsx(Icon, { name: "inbox" }),
+    unread: _jsx(Icon, { name: "mail-exclamation" }),
+    sent: _jsx(InlineIcon, { icon: iconSend }),
+    archived: _jsx(InlineIcon, { icon: iconArchive }),
+};
+/** The width (px) under which one pane shows at a time, and the one under which the list and the pane stack. */
+const PHONE = 700;
+const messageOf = (error, fallback) => (error instanceof Error && error.message ? error.message : fallback);
+/** A mailbox as a mail client: rail, list and reading pane, with chat popups and compose windows docked at the bottom right. */
+export function MailClient({ source, userId, title = "Message", description, headingLevel = 2, view: viewProp, defaultView, onViewChange, threadId: threadProp, onThreadChange, settings, pageSize = 50, chatSourceFor, renderDomain, onChanged, pollInterval = 60_000, className, }) {
+    const [ownView, setOwnView] = useState(defaultView ?? { list: "inbox", type: null });
+    const view = viewProp ?? ownView;
+    const [ownThread, setOwnThread] = useState(null);
+    const openId = threadProp === undefined ? ownThread : threadProp;
+    const [rows, setRows] = useState([]);
+    const [matches, setMatches] = useState(0);
+    const [listState, setListState] = useState({ status: "loading" });
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [search, setSearch] = useState("");
+    const [query, setQuery] = useState("");
+    const [selected, setSelected] = useState(() => new Set());
+    const [folders, setFolders] = useState(null);
+    const [popups, setPopups] = useState([]);
+    const [composes, setComposes] = useState([]);
+    const [revisions, setRevisions] = useState({});
+    const [split, setSplit] = useState("columns");
+    const [pane, setPane] = useState("list");
+    const [phone, setPhone] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const latest = useRef({ onChanged, onViewChange, onThreadChange });
+    latest.current = { onChanged, onViewChange, onThreadChange };
+    const root = useRef(null);
+    const listRef = useRef(null);
+    const picker = useMemo(() => mailPeoplePicker(source), [source]);
+    // The split the reader chose, read in the browser before it paints; until then the panes are not shown (`data-ready`),
+    // so a reader who chose one over the other never sees them jump from side by side.
+    const [ready, setReady] = useState(false);
+    useLayoutEffect(() => {
+        setSplit(readMailSplit(userId));
+        setReady(true);
+    }, [userId]);
+    // How wide the client is: one pane at a time under PHONE.
+    useLayoutEffect(() => {
+        const element = root.current;
+        if (!element)
+            return;
+        const read = () => {
+            if (element.clientWidth > 0)
+                setPhone(element.clientWidth < PHONE);
+        };
+        read();
+        const observer = new ResizeObserver(read);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const changeView = useCallback((next) => {
+        if (viewProp === undefined)
+            setOwnView(next);
+        latest.current.onViewChange?.(next);
+        setSelected(new Set());
+        setPane("list");
+    }, [viewProp]);
+    const changeThread = useCallback((next) => {
+        if (threadProp === undefined)
+            setOwnThread(next);
+        latest.current.onThreadChange?.(next);
+    }, [threadProp]);
+    // The search, a moment after the last key.
+    useEffect(() => {
+        const timer = setTimeout(() => setQuery(search.trim()), 300);
+        return () => clearTimeout(timer);
+    }, [search]);
+    // The list: its first page whenever the folder, the type or the search changes; quietly again on `reload`.
+    const [reload, setReload] = useState(0);
+    const shownRef = useRef("");
+    useEffect(() => {
+        const controller = new AbortController();
+        const key = `${view.list}|${view.type ?? ""}|${query}`;
+        // A new list starts from bones; the same list read again keeps its rows on screen until the answer replaces them.
+        if (shownRef.current !== key) {
+            shownRef.current = key;
+            setRows([]);
+            setListState({ status: "loading" });
+        }
+        const type = mailTypeOf(view.type);
+        source
+            .inbox({
+            list: view.list,
+            ...(query && { search: query }),
+            ...(type && { threadKind: type.threadKind }),
+            ...(type?.domainType !== undefined && { domainType: type.domainType }),
+            skip: 0,
+            take: pageSize,
+            signal: controller.signal,
+        })
+            .then(page => {
+            setRows([...page.rows]);
+            setMatches(page.matches ?? page.total ?? page.rows.length);
+            setListState({ status: "ready" });
+        }, error => {
+            if (!controller.signal.aborted)
+                setListState({ status: "failed", message: messageOf(error, "The messages could not be loaded.") });
+        });
+        return () => controller.abort();
+    }, [source, view.list, view.type, query, pageSize, reload]);
+    const [countsRead, setCountsRead] = useState(0);
+    const refreshCounts = useCallback(() => {
+        setCountsRead(count => count + 1);
+        latest.current.onChanged?.();
+    }, []);
+    // The read marks the reading pane and the chat windows send, followed: a conversation shows read as soon as it opens,
+    // before its mark reaches the server, so the counts wait for the marks on their way and are read again once each is
+    // answered (and the page's bell with them, `onChanged`).
+    const [marks] = useState(() => ({ pending: new Set(), onSettled: () => undefined }));
+    marks.onSettled = refreshCounts;
+    const followed = useMemo(() => followMailboxReadMarks(source, marks), [source, marks]);
+    // The counts beside the folders and the types, read once no read mark is on its way.
+    useEffect(() => {
+        const folders = source.folders;
+        if (!folders)
+            return;
+        const controller = new AbortController();
+        Promise.all([...marks.pending])
+            .then(() => (controller.signal.aborted ? null : folders(controller.signal)))
+            .then(next => {
+            if (next && !controller.signal.aborted)
+                setFolders(next);
+        }, () => undefined);
+        return () => controller.abort();
+    }, [source, countsRead, marks]);
+    // Read again quietly while the page is in front: new mail arrives in the list without a reload.
+    useEffect(() => {
+        if (pollInterval <= 0)
+            return;
+        const timer = setInterval(() => {
+            if (typeof document !== "undefined" && document.visibilityState === "hidden")
+                return;
+            setReload(count => count + 1);
+            setCountsRead(count => count + 1);
+        }, pollInterval);
+        return () => clearInterval(timer);
+    }, [pollInterval]);
+    async function loadMore() {
+        if (loadingMore || rows.length >= matches)
+            return;
+        setLoadingMore(true);
+        const type = mailTypeOf(view.type);
+        try {
+            const page = await source.inbox({
+                list: view.list,
+                ...(query && { search: query }),
+                ...(type && { threadKind: type.threadKind }),
+                ...(type?.domainType !== undefined && { domainType: type.domainType }),
+                skip: rows.length,
+                take: pageSize,
+            });
+            setRows(was => [...was, ...page.rows.filter(row => !was.some(held => sameChatId(held.id, row.id)))]);
+            setMatches(page.matches ?? page.total ?? matches);
+        }
+        catch (error) {
+            setActionError(messageOf(error, "More messages could not be loaded."));
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }
+    // More rows as the end of the list comes into view.
+    const sentinel = useRef(null);
+    const more = rows.length < matches && listState.status === "ready";
+    useEffect(() => {
+        const element = sentinel.current;
+        if (!element || !more)
+            return;
+        const observer = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting))
+                void loadMore();
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    });
+    const openRow = rows.find(row => openId !== null && sameChatId(row.id, openId)) ?? null;
+    // A row follows what the pane read: its unread count. The counts beside the folders are read again when the read mark
+    // is answered; a row that was simply out of date (read on another device) has them read now.
+    const rowsNow = useRef(rows);
+    rowsNow.current = rows;
+    const onSummary = useCallback((id, summary) => {
+        const held = rowsNow.current.find(row => sameChatId(row.id, id));
+        if (!held || held.unreadCount === summary.unreadCount)
+            return;
+        setRows(was => was.map(row => (sameChatId(row.id, id) ? { ...row, unreadCount: summary.unreadCount } : row)));
+        if (marks.pending.size === 0)
+            refreshCounts();
+    }, [refreshCounts, marks]);
+    function openPopup(threadId, kind, head, row) {
+        const key = `${kind}:${String(threadId)}`;
+        setPopups(was => {
+            if (was.some(entry => entry.key === key))
+                return [...was.filter(entry => entry.key !== key), was.find(entry => entry.key === key)];
+            const thread = followed.threadSource(threadId);
+            const subject = head?.subject || row?.subject || "Conversation";
+            const entry = kind === "chat"
+                ? { key, threadId, title: subject, description: "Chat", source: row && chatSourceFor ? followMailReadMarks(chatSourceFor(row), marks) : thread }
+                : { key, threadId, title: `Discussion: ${subject}`, description: "Only the thread's people read it", source: mailDiscussionSource(thread) };
+            return [...was, entry];
+        });
+    }
+    // A chat opens in its window as well as in the pane: from a click on its row, and from a link that names it (the page's
+    // `threadId`: the bell's, an e-mail copy's), once its kind is known - from its row in the list, or from its head when
+    // it is not in the list shown. Once for each opening, so a window closed stays closed while the chat is open.
+    const chatOpened = useRef(null);
+    function openChatOnce(threadId, head, row) {
+        if (chatOpened.current === String(threadId))
+            return;
+        chatOpened.current = String(threadId);
+        openPopup(threadId, "chat", head, row);
+    }
+    const openRowIsChat = openRow !== null && mailRowKind(openRow) === "chat";
+    useEffect(() => {
+        if (openId === null || chatOpened.current !== String(openId))
+            chatOpened.current = null;
+        if (openId !== null && openRow && openRowIsChat)
+            openChatOnce(openId, null, openRow);
+        // openChatOnce reads the latest rows itself; the row's kind and the conversation are what matter.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [openId, openRowIsChat]);
+    function closePopup(key) {
+        setPopups(was => was.filter(entry => entry.key !== key));
+    }
+    function open(row, from) {
+        changeThread(row.id);
+        setPane("reader");
+        // A click brings the chat's window back even when it was closed: it is this opening's window.
+        if (mailRowKind(row) === "chat") {
+            chatOpened.current = String(row.id);
+            openPopup(row.id, "chat", null, row);
+        }
+        // On a phone, and from the keyboard, the reading starts at the subject.
+        if (phone || from === "keyboard")
+            requestAnimationFrame(() => root.current?.querySelector(".nx-mailbox__reader [data-nx-focus]")?.focus({ preventScroll: true }));
+    }
+    function compose(reply) {
+        const key = reply ? `reply:${String(reply.threadId)}` : "new";
+        setComposes(was => (was.some(entry => entry.key === key) ? [...was.filter(entry => entry.key !== key), was.find(entry => entry.key === key)] : [...was, { key, reply }]));
+    }
+    function chooseSplit(next) {
+        setSplit(next);
+        writeMailSplit(userId, next);
+    }
+    // Mass actions, on the boxes ticked or on the open conversation.
+    async function act(action, ids) {
+        if (ids.length === 0)
+            return;
+        setBusy(true);
+        setActionError(null);
+        try {
+            if (action === "archive")
+                await source.archive(ids);
+            else if (action === "unarchive")
+                await source.unarchive(ids);
+            else if (action === "markRead")
+                await source.markRead?.(ids);
+            else
+                await source.markUnread?.(ids);
+            const keys = new Set(ids.map(String));
+            if (action === "archive" || action === "unarchive") {
+                // Gone from this folder: Archive takes it out of the Inbox, Move to inbox out of Archived.
+                if (view.list !== "sent")
+                    setRows(was => was.filter(row => !keys.has(String(row.id))));
+                if (view.list !== "sent")
+                    setMatches(count => Math.max(0, count - ids.length));
+                if (openId !== null && keys.has(String(openId)) && view.list !== "sent")
+                    changeThread(null);
+            }
+            else {
+                setRows(was => was.map(row => (keys.has(String(row.id)) ? { ...row, unreadCount: action === "markRead" ? 0 : Math.max(1, row.unreadCount) } : row)));
+                if (action === "markUnread" && openId !== null && keys.has(String(openId)))
+                    changeThread(null);
+            }
+            setSelected(new Set());
+            refreshCounts();
+        }
+        catch (error) {
+            setActionError(messageOf(error, "That could not be done."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function toggleStar(row) {
+        if (!source.star)
+            return;
+        const next = !row.starred;
+        setRows(was => was.map(one => (sameChatId(one.id, row.id) ? { ...one, starred: next } : one)));
+        try {
+            await source.star([row.id], next);
+        }
+        catch (error) {
+            setRows(was => was.map(one => (sameChatId(one.id, row.id) ? { ...one, starred: !next } : one)));
+            setActionError(messageOf(error, "The star could not be changed."));
+        }
+    }
+    const archivedList = view.list === "archived";
+    const massOptions = [
+        archivedList ? { value: "unarchive", label: "Move to inbox", icon: _jsx(Icon, { name: "inbox" }) } : { value: "archive", label: "Archive", icon: _jsx(InlineIcon, { icon: iconArchive }) },
+        ...(source.markRead ? [{ value: "markRead", label: "Mark read", icon: _jsx(Icon, { name: "mail-opened" }) }] : []),
+        ...(source.markUnread ? [{ value: "markUnread", label: "Mark unread", icon: _jsx(InlineIcon, { icon: iconMail }) }] : []),
+    ];
+    const types = useMemo(() => mailTypes(folders?.kinds ?? []), [folders]);
+    const typeEntry = types.find(entry => entry.key === view.type);
+    const typeName = view.type ? (typeEntry?.label ?? mailTypeLabel(mailTypeOf(view.type)?.threadKind ?? "mail", mailTypeOf(view.type)?.domainType)) : null;
+    const listName = `${MAIL_LIST_LABELS[view.list]}${typeName ? ` · ${typeName}` : ""}`;
+    const allTicked = rows.length > 0 && rows.every(row => selected.has(String(row.id)));
+    const someTicked = selected.size > 0;
+    // The arrow keys move between the rows; Enter or Space opens the one with the focus; Home and End go to the ends.
+    function onListKeyDown(event) {
+        const buttons = Array.from(listRef.current?.querySelectorAll(".nx-mailbox__open") ?? []);
+        const at = buttons.indexOf(document.activeElement);
+        let next = -1;
+        if (event.key === "ArrowDown")
+            next = at < 0 ? 0 : Math.min(buttons.length - 1, at + 1);
+        else if (event.key === "ArrowUp")
+            next = at < 0 ? 0 : Math.max(0, at - 1);
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = buttons.length - 1;
+        else
+            return;
+        if (next < 0 || !buttons[next])
+            return;
+        event.preventDefault();
+        buttons[next].focus();
+    }
+    // The row that takes Tab into the list: the open one, else the first.
+    const tabRow = openRow ? String(openRow.id) : rows[0] ? String(rows[0].id) : null;
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const time = useMemo(() => ({ ...preferences, ...(zone && { timeZone: zone }) }), [preferences, zone]);
+    const [mounted, setMounted] = useState(false);
+    // "Today" is the browser's: the server knows no zone, so a row's time is drawn once the page is in the browser.
+    useEffect(() => setMounted(true), []);
+    const Heading = `h${headingLevel}`;
+    const readerActions = openId !== null && (_jsxs(_Fragment, { children: [archivedList || openRow?.archived ? (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(Icon, { name: "inbox" }), "aria-label": "Move to inbox", title: "Move to inbox", disabled: busy, onClick: () => void act("unarchive", [openId]) })) : (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArchive }), "aria-label": "Archive", title: "Archive", disabled: busy, onClick: () => void act("archive", [openId]) })), source.markUnread && _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconMail }), "aria-label": "Mark unread", title: "Mark unread", disabled: busy, onClick: () => void act("markUnread", [openId]) })] }));
+    return (_jsxs("div", { ref: root, className: cx("nx-mailbox", className), "data-split": split, "data-pane": pane, "data-ready": ready || undefined, children: [_jsxs("header", { className: "nx-mailbox__bar", children: [title !== false && (_jsxs("div", { className: "nx-mailbox__heading-text", children: [_jsx(Heading, { className: "nx-mailbox__title", children: title }), description && (_jsx("p", { className: "nx-mailbox__lead", title: typeof description === "string" ? description : undefined, children: description }))] })), _jsx(TextBox, { className: "nx-mailbox__search", name: "nx-mailbox-search", "aria-label": "Search mail", placeholder: "Search mail", size: "sm", icon: _jsx(InlineIcon, { icon: iconSearch }), clearable: true, value: search, onValueChange: setSearch }), _jsx(Button, { size: "sm", variant: "ghost", className: "nx-mailbox__split", icon: _jsx(Icon, { name: split === "columns" ? "layout-rows" : "layout-columns" }), "aria-label": split === "columns" ? "Reading pane below the list" : "Reading pane beside the list", title: split === "columns" ? "Reading pane below the list" : "Reading pane beside the list", onClick: () => chooseSplit(split === "columns" ? "rows" : "columns") }), settings] }), _jsxs("div", { className: "nx-mailbox__main", children: [_jsxs("nav", { className: "nx-mailbox__rail", "aria-label": "Folders", children: [_jsx(Button, { variant: "primary", block: true, icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: () => compose(null), children: "Compose" }), _jsx("ul", { className: "nx-mailbox__folders", children: FOLDERS.map(list => {
+                                    const unread = mailFolderUnread(folders, list);
+                                    const current = view.list === list && !view.type;
+                                    return (_jsx("li", { children: _jsxs("button", { type: "button", className: "nx-mailbox__folder", "aria-current": current ? "page" : undefined, "data-active": view.list === list || undefined, onClick: () => changeView({ list, type: null }), children: [_jsx("span", { className: "nx-mailbox__folder-icon", "aria-hidden": "true", children: FOLDER_ICONS[list] }), _jsx("span", { className: "nx-mailbox__folder-name", children: MAIL_LIST_LABELS[list] }), unread > 0 && list !== "sent" && (_jsx("span", { className: "nx-mailbox__count", "aria-label": `${unread} unread`, children: unread }))] }) }, list));
+                                }) }), types.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h3", { className: "nx-mailbox__heading", children: "Types" }), _jsx("ul", { className: "nx-mailbox__folders", children: types.map(entry => (_jsx("li", { children: _jsxs("button", { type: "button", className: "nx-mailbox__folder", "aria-current": view.type === entry.key ? "page" : undefined, onClick: () => changeView({ list: view.list === "sent" || view.list === "archived" ? "inbox" : view.list, type: view.type === entry.key ? null : entry.key }), title: `${entry.label}: ${entry.total} in the inbox`, children: [_jsx("span", { className: "nx-mailbox__folder-icon", "aria-hidden": "true", children: entry.threadKind === "mail" ? _jsx(InlineIcon, { icon: iconMail }) : entry.threadKind === "chat" ? _jsx(InlineIcon, { icon: iconMessageCircle }) : (entry.icon ?? _jsx(Icon, { name: "clipboard-text" })) }), _jsx("span", { className: "nx-mailbox__folder-name", children: entry.label }), entry.unread > 0 && (_jsx("span", { className: "nx-mailbox__count", "aria-label": `${entry.unread} unread`, children: entry.unread }))] }) }, entry.key))) })] }))] }), _jsxs("section", { className: "nx-mailbox__list", "aria-label": listName, children: [_jsxs("div", { className: "nx-mailbox__tools", children: [_jsx(Button, { size: "sm", variant: "ghost", className: "nx-mailbox__phone-only", icon: _jsx(InlineIcon, { icon: iconMenu2 }), "aria-label": "Folders", title: "Folders", onClick: () => setPane("rail") }), _jsx("label", { className: "nx-choice nx-choice--sm nx-mailbox__check", title: allTicked ? "Select none" : "Select all", children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", "aria-label": allTicked ? "Select none" : "Select all shown", checked: allTicked, ref: element => {
+                                                if (element)
+                                                    element.indeterminate = someTicked && !allTicked;
+                                            }, disabled: rows.length === 0, onChange: () => setSelected(allTicked ? new Set() : new Set(rows.map(row => String(row.id)))) }) }), someTicked ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "nx-mailbox__picked", children: [selected.size, " selected"] }), _jsx(SplitButton, { size: "sm", variant: "secondary", options: massOptions, storageKey: "mail-client-mass", loading: busy, onAction: value => void act(value, rows.filter(row => selected.has(String(row.id))).map(row => row.id)) })] })) : (_jsx("span", { className: "nx-mailbox__where", children: listName })), _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconRefresh }), "aria-label": "Check for new messages", title: "Check for new messages", onClick: () => {
+                                            setReload(count => count + 1);
+                                            setCountsRead(count => count + 1);
+                                        } })] }), actionError && (_jsx("div", { className: "nx-mailbox__notice", children: _jsx(ChatFailure, { message: actionError }) })), _jsxs("ul", { ref: listRef, className: "nx-mailbox__rows", onKeyDown: onListKeyDown, "aria-busy": listState.status === "loading" || undefined, children: [listState.status === "loading" && rows.length === 0 && Array.from({ length: 8 }, (_, index) => _jsx(MailRowBones, {}, index)), listState.status === "failed" && (_jsx("li", { className: "nx-mailbox__message", children: _jsx(ChatFailure, { message: listState.message, onRetry: () => setReload(count => count + 1) }) })), listState.status === "ready" && rows.length === 0 && (_jsxs("li", { className: "nx-mailbox__message", children: [_jsx(Icon, { name: query ? "mail-off" : "inbox-off" }), _jsx("p", { children: query ? `Nothing in ${listName} matches "${query}".` : `Nothing in ${listName}.` })] })), rows.map(row => (_jsx(MailRow, { row: row, userId: userId, time: time, mounted: mounted, current: openId !== null && sameChatId(row.id, openId), tabbable: tabRow === String(row.id), ticked: selected.has(String(row.id)), stars: !!source.star, onTick: on => setSelected(was => {
+                                            const next = new Set(was);
+                                            if (on)
+                                                next.add(String(row.id));
+                                            else
+                                                next.delete(String(row.id));
+                                            return next;
+                                        }), onStar: () => void toggleStar(row), onOpen: from => open(row, from) }, String(row.id)))), more && (_jsx("li", { ref: sentinel, className: "nx-mailbox__more", children: _jsxs(Button, { size: "sm", variant: "ghost", loading: loadingMore, onClick: () => void loadMore(), children: ["Show more (", rows.length, " of ", matches, ")"] }) }))] })] }), _jsxs("section", { className: "nx-mailbox__reader", "aria-label": "Reading pane", children: [_jsx("div", { className: "nx-mailbox__tools nx-mailbox__phone-only", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowLeft }), onClick: () => setPane("list"), children: listName }) }), openId === null ? (_jsxs("div", { className: "nx-mailbox__message nx-mailbox__message--pane", children: [_jsx(Icon, { name: "mail-opened" }), _jsx("p", { children: "Pick a conversation to read it." })] })) : (_jsx(MailReader, { source: followed, threadId: openId, userId: userId, row: openRow, actions: readerActions, renderDomain: renderDomain, revision: revisions[String(openId)] ?? 0, onHead: head => {
+                                    if (head.threadKind === "chat")
+                                        openChatOnce(openId, head, openRow);
+                                }, onSummary: summary => onSummary(openId, summary), onDiscuss: (action) => openPopup(action.head.id, mailRowKind(openRow ?? { threadKind: action.head.threadKind, domainType: action.head.domain?.domainType ?? null }) === "chat" ? "chat" : "discussion", action.head, openRow), onReply: (action) => compose({ threadId: action.head.id, subject: action.head.subject, people: replyPeople(action.head, userId) }) }, String(openId)))] })] }), popups.map(entry => (_jsx(ChatPopup, { open: true, onClose: () => closePopup(entry.key), source: entry.source, conversationId: entry.key, userId: userId, title: entry.title, description: entry.description, onSent: () => setRevisions(was => ({ ...was, [String(entry.threadId)]: (was[String(entry.threadId)] ?? 0) + 1 })) }, entry.key))), composes.map(entry => (_jsx(MailComposeWindow, { open: true, onClose: () => setComposes(was => was.filter(one => one.key !== entry.key)), source: source, userId: userId, reply: entry.reply, picker: picker, onSent: result => {
+                    if (result.reply)
+                        setRevisions(was => ({ ...was, [String(result.threadId)]: (was[String(result.threadId)] ?? 0) + 1 }));
+                    setReload(count => count + 1);
+                    refreshCounts();
+                } }, entry.key)))] }));
+}
+/** Everyone a reply in a thread reaches but the reader: its sender and its people, as the reader may see them. */
+function replyPeople(head, userId) {
+    const all = [head.from, ...head.to, ...head.cc, ...head.bcc];
+    return all.filter((person, index) => !sameChatId(person.id, userId) && all.findIndex(one => sameChatId(one.id, person.id)) === index);
+}
+/** One conversation in the list, as mail: avatar, sender (strong while unread), subject — preview, its type, its time. */
+function MailRow({ row, userId, time, mounted, current, tabbable, ticked, stars, onTick, onStar, onOpen }) {
+    const unread = row.unreadCount > 0;
+    const kind = mailRowKind(row);
+    const sender = sameChatId(row.fromId, userId) && kind !== "chat" ? "You" : row.fromName || "Unknown";
+    const preview = mailPreviewText(row.lastPreview);
+    const when = mounted ? mailListTime(row.lastMessageTime, time) : "";
+    const label = mailTypeLabel(kind, row.domainType);
+    return (_jsxs("li", { className: "nx-mailbox__row", "data-unread": unread || undefined, "data-current": current || undefined, children: [_jsx("label", { className: "nx-choice nx-choice--sm nx-mailbox__check", children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: ticked, "aria-label": `Select ${row.subject || sender}`, onChange: event => onTick(event.currentTarget.checked) }) }), stars && (_jsx("button", { type: "button", className: "nx-mailbox__star", "aria-pressed": row.starred === true, "aria-label": row.starred ? "Starred" : "Star", title: row.starred ? "Starred" : "Star", onClick: onStar, children: row.starred ? _jsx(Icon, { name: "star", variant: "filled" }) : _jsx(InlineIcon, { icon: iconStar }) })), _jsxs("button", { type: "button", className: "nx-mailbox__open", tabIndex: tabbable ? 0 : -1, "aria-current": current || undefined, onClick: event => onOpen(event.detail === 0 ? "keyboard" : "pointer"), children: [_jsx(Avatar, { name: row.fromName || sender, src: row.fromAvatar }), _jsxs("span", { className: "nx-mailbox__from", children: [sender, row.messageCount > 1 && kind !== "chat" && _jsx("span", { className: "nx-mailbox__lines", children: row.messageCount })] }), kind === "chat" ? (_jsxs("span", { className: "nx-mailbox__text", children: [_jsx("span", { className: "nx-mailbox__subject", children: row.lastAuthorName ? `${row.lastAuthorName}:` : "" }), _jsxs("span", { className: "nx-mailbox__preview", children: [" ", preview || "No messages yet"] })] })) : (_jsxs("span", { className: "nx-mailbox__text", children: [_jsx("span", { className: "nx-mailbox__subject", children: row.subject || "(no subject)" }), preview && _jsxs("span", { className: "nx-mailbox__preview", children: [" \u2014 ", preview] })] })), _jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-mailbox__chip", "data-kind": kind, title: row.domainLabel ?? label, children: label }), _jsx("time", { className: "nx-mailbox__time", dateTime: row.lastMessageTime, title: row.lastMessageTime ? formatDateTime(row.lastMessageTime, time) : undefined, children: when }), unread && _jsx("span", { className: "nx-visually-hidden", children: ", unread" })] })] }));
+}
+/** A row's bones while the first page loads: the shape of a row, so nothing moves when it lands. */
+function MailRowBones() {
+    return (_jsxs("li", { className: "nx-mailbox__row nx-mailbox__row--bones", "aria-hidden": "true", children: [_jsx("span", { className: "nx-mailbox__check" }), _jsxs("span", { className: "nx-mailbox__open", children: [_jsx("span", { className: "nx-avatar nx-mailbox__bone-avatar" }), _jsx("span", { className: "nx-mailbox__from", children: _jsx("span", { className: "nx-table__bone", style: { width: "7rem" } }) }), _jsx("span", { className: "nx-mailbox__text", children: _jsx("span", { className: "nx-table__bone", style: { width: "80%" } }) }), _jsx("span", { className: "nx-mailbox__time", children: _jsx("span", { className: "nx-table__bone", style: { width: "2.5rem" } }) })] })] }));
+}

package/dist/Components/Messages/MailColumns.d.ts

@@ -0,0 +1,21 @@
+import type { MailInboxRow } from "../../Interfaces/MailInterfaces.ts";
+import type { TableColumn, TableRow } from "../../Interfaces/TableInterfaces.ts";
+export declare const mailInboxColumns: {
+    /** Who started the thread. */
+    from<TRow extends TableRow = MailInboxRow>(changes?: Partial<TableColumn<TRow>>): TableColumn<TRow>;
+    /**
+     * The subject, after the record it is about as a tag: first, so a long subject ending in "…" never hides it, and held
+     * to part of the column, so a long record's words never hide the subject.
+     */
+    subject<TRow extends TableRow = MailInboxRow>(changes?: Partial<TableColumn<TRow>>): TableColumn<TRow>;
+    /** The last line as text, after the name of who wrote it. */
+    lastMessage<TRow extends TableRow = MailInboxRow>(changes?: Partial<TableColumn<TRow>>): TableColumn<TRow>;
+    /** When the last line was written, as "14 min ago", the full moment on hover. */
+    when<TRow extends TableRow = MailInboxRow>(changes?: Partial<TableColumn<TRow>>): TableColumn<TRow>;
+    /** How many lines are unread, in the chat's badge. */
+    unread<TRow extends TableRow = MailInboxRow>(changes?: Partial<TableColumn<TRow>>): TableColumn<TRow>;
+};
+/** Every column of a list of threads, in the order an inbox shows them. */
+export declare function mailInboxColumnList<TRow extends TableRow = MailInboxRow>(): TableColumn<TRow>[];
+/** Whether a row of a list of threads reads strong: it holds unread lines. For a table's `rowStrong`. */
+export declare function mailRowUnread(row: TableRow): boolean;

package/dist/Components/Messages/MailColumns.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { chatBadgeText, chatTimeAgo } from "../../Helpers/ChatHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { formatDateTime } from "../../Helpers/DateTimeHelpers.js";
+import { mailPreviewText } from "../../Helpers/MessageHelpers.js";
+import { useEffect, useMemo, useState } from "react";
+const fieldsOf = (row) => row;
+/** How long ago a moment was, in the reader's settings, after the page is in the browser: the server knows no "now" or zone. */
+function MailWhen({ value }) {
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const [now, setNow] = useState(null);
+    useEffect(() => setNow(Date.now()), [value]);
+    const time = useMemo(() => ({ ...preferences, ...(zone && { timeZone: zone }) }), [preferences, zone]);
+    if (!value || now === null)
+        return null;
+    return (_jsx("time", { dateTime: value, title: formatDateTime(value, time), children: chatTimeAgo(value, time, now) }));
+}
+/** The unread count in the chat's own badge; nothing when all is read. One width either way, so nothing moves as it arrives. */
+function MailUnreadBadge({ count }) {
+    if (count <= 0)
+        return null;
+    return (_jsx("span", { className: "nx-chat-list__badge", title: count === 1 ? "1 unread" : `${count} unread`, children: chatBadgeText(count) }));
+}
+export const mailInboxColumns = {
+    /** Who started the thread. */
+    from(changes = {}) {
+        return { key: "fromName", label: "From", width: "9rem", ...changes };
+    },
+    /**
+     * The subject, after the record it is about as a tag: first, so a long subject ending in "…" never hides it, and held
+     * to part of the column, so a long record's words never hide the subject.
+     */
+    subject(changes = {}) {
+        return {
+            key: "subject",
+            label: "Subject",
+            width: "15rem",
+            render: row => {
+                const { subject, domainLabel } = fieldsOf(row);
+                return (_jsxs(_Fragment, { children: [domainLabel && (_jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-mail__label", title: domainLabel, children: domainLabel })), subject] }));
+            },
+            text: row => [fieldsOf(row).domainLabel, fieldsOf(row).subject].filter(Boolean).join(" "),
+            ...changes,
+        };
+    },
+    /** The last line as text, after the name of who wrote it. */
+    lastMessage(changes = {}) {
+        return {
+            key: "lastPreview",
+            label: "Last message",
+            sortable: false,
+            width: "14rem",
+            value: row => {
+                const { lastAuthorName, lastPreview } = fieldsOf(row);
+                const text = mailPreviewText(lastPreview);
+                return lastAuthorName ? `${lastAuthorName}: ${text}` : text;
+            },
+            ...changes,
+        };
+    },
+    /** When the last line was written, as "14 min ago", the full moment on hover. */
+    when(changes = {}) {
+        return {
+            key: "lastMessageTime",
+            label: "When",
+            width: "7rem",
+            render: row => _jsx(MailWhen, { value: fieldsOf(row).lastMessageTime }),
+            ...changes,
+        };
+    },
+    /** How many lines are unread, in the chat's badge. */
+    unread(changes = {}) {
+        return {
+            key: "unreadCount",
+            label: "Unread",
+            width: "4.5rem",
+            align: "center",
+            render: row => _jsx(MailUnreadBadge, { count: Number(fieldsOf(row).unreadCount) || 0 }),
+            ...changes,
+        };
+    },
+};
+/** Every column of a list of threads, in the order an inbox shows them. */
+export function mailInboxColumnList() {
+    return [mailInboxColumns.from(), mailInboxColumns.subject(), mailInboxColumns.lastMessage(), mailInboxColumns.when(), mailInboxColumns.unread()];
+}
+/** Whether a row of a list of threads reads strong: it holds unread lines. For a table's `rowStrong`. */
+export function mailRowUnread(row) {
+    return (Number(fieldsOf(row).unreadCount) || 0) > 0;
+}

package/dist/Components/Messages/MailCompose.d.ts

@@ -0,0 +1,46 @@
+import { type MailComposeDraft } from "../../Helpers/MailClientHelpers.ts";
+import { type PagedPickerParams } from "../../Helpers/PagedPicker.ts";
+import type { ChatId } from "../../Interfaces/ChatInterfaces.ts";
+import type { MailPerson, MessageSource } from "../../Interfaces/MailInterfaces.ts";
+import { type PopupWindowState } from "../Layouts/Popup.tsx";
+/** A reply's thread, as the compose window shows it. */
+export interface MailComposeReply {
+    threadId: ChatId;
+    subject: string;
+    /** Who will read it: the thread's people. */
+    people: readonly MailPerson[];
+}
+/** What was sent. */
+export interface MailComposeResult {
+    /** The thread: the new one, or the one replied in. */
+    threadId: ChatId;
+    /** True for a reply. */
+    reply: boolean;
+}
+export interface MailComposeWindowProps {
+    open: boolean;
+    /** Asked to close: after a send, a discard, or a close the reader confirmed. */
+    onClose: () => void;
+    /** Where the mail goes and the people come from. */
+    source: MessageSource;
+    /** Who is writing: the draft is theirs alone. */
+    userId: ChatId;
+    /** A reply in a thread, instead of a new mail. */
+    reply?: MailComposeReply | null;
+    /** What a new mail opens with when no draft is kept: people by id, a subject, a body. */
+    initial?: Partial<Pick<MailComposeDraft, "to" | "cc" | "bcc" | "subject" | "body">>;
+    /** To filled from the source's defaults when a new mail opens with no draft and no `initial` people. Default true. */
+    useDefaults?: boolean;
+    /** The people search, when the page shares one between windows. Default one of the source's own. */
+    picker?: PagedPickerParams<MailPerson>;
+    /** Where the draft is kept, under the reader. Default `new`, or `reply:<thread>`. */
+    draftKey?: string;
+    /** After a send. */
+    onSent?: (result: MailComposeResult) => void;
+    /** The window state, when the page controls it. */
+    windowState?: PopupWindowState;
+    onWindowStateChange?: (state: PopupWindowState) => void;
+    className?: string;
+}
+/** A new mail or a reply, in a docked window. */
+export declare function MailComposeWindow({ open, onClose, source, userId, reply, initial, useDefaults, picker, draftKey, onSent, windowState, onWindowStateChange, className, }: MailComposeWindowProps): import("react").JSX.Element;