@rapidmx/web-client 0.31.0 → 0.33.0

package/apps/shared/components/mail/ConversationThreadPane.tsx

@@ -15,7 +15,8 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
-import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
+import { InlineComposeSlot, useCompose, useInlineCompose } from "./compose/ComposeContext.js";
+import { resumeFromDraft } from "./compose/draftResume.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -206,6 +207,11 @@ export default function ConversationThreadPane({
     // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
     // what makes the compose provider open a reply here rather than floating at the bottom right.
     const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
+    const { openCompose } = useCompose();
+    /** The draft this pane has already opened an editor for, so it is opened once per visit - closing the editor leaves the draft as a message to read. */
+    const openedDraftRef = useRef<string | null>(null);
+    const selectedUidRef = useRef(selectedUid);
+    selectedUidRef.current = selectedUid;
 
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
@@ -291,6 +297,26 @@ export default function ConversationThreadPane({
         setPendingFocusUid([...expanded][expanded.size - 1]);
     }, [conversationId, selectedUid, messages]);
 
+    // A draft the reader opens is edited where it is read: its compose window opens as the card at the top of the thread, with the draft as it was
+    // saved. It is opened once per visit to the draft (an encrypted draft, which only the server holds the ciphertext of, stays a message to read).
+    useEffect(() => {
+        if (openedDraftRef.current !== null && openedDraftRef.current !== selectedUid) {
+            openedDraftRef.current = null;
+        }
+        if (loading || loadedIdRef.current !== conversationId || !selectedUid || openedDraftRef.current === selectedUid) return;
+        const draft = messages.find((message) => message.uid === selectedUid);
+        if (!draft || folders.find((folder) => folder.uid === draft.folderUid)?.type !== "drafts") return;
+        openedDraftRef.current = draft.uid;
+        void resumeFromDraft(draft, client)
+            .then((resume) => {
+                // The reader may have moved on while it loaded.
+                if (resume && selectedUidRef.current === draft.uid) {
+                    openCompose({ mailboxUid: draft.mailboxUid, resume, inlineFor: draft.uid });
+                }
+            })
+            .catch(() => undefined);
+    }, [conversationId, selectedUid, messages, loading, folders]);
+
     useLayoutEffect(() => {
         if (!pendingFocusUid) return;
         // The row is always rendered by now: this runs after the DOM update that added the message it
@@ -301,7 +327,9 @@ export default function ConversationThreadPane({
         // took the app header and the folder rail off the screen - so the adjustment goes on whichever
         // ancestor actually scrolls, exactly as the toggle below already does it. When that is the page
         // itself, nothing inside the pane scrolls and the row is already in view, so it is left alone.
-        const row = rowRefs.current[pendingFocusUid]!;
+        const row = rowRefs.current[pendingFocusUid];
+        // None for a draft opened as the editor card (see the effect above): the card takes the view when it is placed.
+        if (!row) return;
         const scroller = scrollingAncestor(row);
         if (scroller !== document.documentElement) {
             const rect = row.getBoundingClientRect();
@@ -571,6 +599,10 @@ export default function ConversationThreadPane({
                 ))}
                 {messages.map((message) => {
                     const uid = message.uid;
+                    // A draft being edited here is the editor card above, not a message to read as well.
+                    if (inlineSessions.some((session) => session.draftUid === uid)) {
+                        return null;
+                    }
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
                     const messageUnread = isUnread(message);

package/apps/shared/components/mail/compose/ComposeContext.tsx

@@ -198,6 +198,8 @@ export interface InlineComposeSession {
     id: string;
     /** The uid of the message the window answers. */
     inlineFor: string;
+    /** The uid of the draft the window continues, when it was opened to edit one: the draft is then the card, not a message beside it. */
+    draftUid?: string;
 }
 
 interface InlineComposeValue {
@@ -258,6 +260,9 @@ export function useCompose(): ComposeContextValue {
  */
 export default function ComposeProvider({ children, userUid, trusted }: PropsWithChildren<{ userUid?: string; trusted?: boolean }>) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
+    // The sessions as of the last render, for `openCompose()` to read at the click.
+    const sessionsRef = useRef(sessions);
+    sessionsRef.current = sessions;
     const client = useApiClient();
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
@@ -283,7 +288,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     const isInline = (session: ComposeSession) => !!session.inlineFor && !parked.has(session.id) && hosted.has(session.inlineFor);
     const inlineKey = sessions.filter(isInline).map((session) => `${session.id}:${session.inlineFor}`).join("|");
     const inlineSessions = useMemo<InlineComposeSession[]>(
-        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor! })),
+        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor!, draftUid: session.resume?.draft.uid })),
         [inlineKey],
     );
     const inlineValue = useMemo<InlineComposeValue>(
@@ -354,6 +359,19 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         resume,
         inlineFor,
     }: OpenComposeInput) {
+        // A draft already being edited has its window: it is brought back to the pane that was holding it rather than opened a second time.
+        const editing = resume && sessionsRef.current.find((session) => session.resume?.draft.uid === resume.draft.uid);
+        if (editing) {
+            setParked((prev) => {
+                if (!prev.has(editing.id)) {
+                    return prev;
+                }
+                const next = new Set(prev);
+                next.delete(editing.id);
+                return next;
+            });
+            return;
+        }
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
         // The window's own element, attached to the page from the start (it is moved to its slot or the stack as soon as that is drawn).

package/apps/shared/components/mail/compose/draftResume.ts

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { type Message, type Recipient, type RecipientType, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { formatMailAddress } from "../../../../../lib/mail/mailAddress.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import type { ResumeCompose } from "../../../mail/outbox/composeBridge.js";
+import { loadOriginalMessage } from "./quotedBody.js";
+
+/** The comma-separated address text a recipient field holds, for the recipients of one type. */
+function recipientText(recipients: Recipient[], type: RecipientType): string {
+    return recipients
+        .filter((recipient) => recipient.type === type)
+        .map((recipient) => formatMailAddress(recipient))
+        .join(", ");
+}
+
+/** Plain text as the HTML paragraphs the editor holds. */
+function textToHtml(text: string): string {
+    const escape = (value: string): string => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return text
+        .split(/\n{2,}/)
+        .map((paragraph) => `<p>${escape(paragraph).replace(/\n/g, "<br>")}</p>`)
+        .join("");
+}
+
+/**
+ * What the compose window needs to continue `draft` - a message in the Drafts folder the reader opened rather than one a window of this tab
+ * saved - read back from the server: its recipients and subject from the record, its body from the server's copy (with its embedded pictures)
+ * and its attachments. `undefined` for a draft that cannot be edited here: an encrypted one holds only its ciphertext, which is never opened.
+ * Never rejects for a body that could not be loaded - the draft then opens with the preview, as a reply's quote does.
+ */
+export async function resumeFromDraft(draft: Message, client?: ApiClient): Promise<ResumeCompose | undefined> {
+    if (draft.encrypted) {
+        return undefined;
+    }
+    const [original, attachments] = await Promise.all([loadOriginalMessage(draft, null), listAttachments(draft.folderUid, draft.uid, client)]);
+    const html =
+        original.body.html !== undefined ? original.body.html : original.body.text !== undefined ? textToHtml(original.body.text) : textToHtml(draft.bodyPreview ?? "");
+    return {
+        draft,
+        mailboxUid: draft.mailboxUid,
+        to: recipientText(draft.recipients, "to"),
+        cc: recipientText(draft.recipients, "cc"),
+        bcc: recipientText(draft.recipients, "bcc"),
+        subject: draft.subject,
+        html,
+        attachments,
+        requestReceipt: !!draft.requestReceipt,
+        signEnabled: false,
+        encryptRequested: false,
+    };
+}

package/apps/www/calendar/index.tsx

@@ -217,13 +217,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             return { rangeStart: new Date(-MAX_DATE_MS), rangeEnd: new Date(MAX_DATE_MS), days: [] as Date[] };
         }
         if (view === "month") {
-            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: [] as Date[] };
         }
         if (view === "week") {
-            const start = startOfWeek(viewDate, { weekStartsOn: 1 });
-            const end = endOfWeek(viewDate, { weekStartsOn: 1 });
+            const start = startOfWeek(viewDate, { weekStartsOn: 0 });
+            const end = endOfWeek(viewDate, { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: eachDayOfInterval({ start, end }) };
         }
         if (view === "workWeek") {

package/apps/www/contacts/index.tsx

@@ -11,6 +11,7 @@ import {
     createContact,
     deleteContact,
     listContacts,
+    ensureSuggestedContacts,
     listContactsInFolders,
     listDeletedContacts,
     setContactFavorite,
@@ -91,6 +92,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     const client = useApiClient();
     const [contacts, setContacts] = useState<Contact[]>([]);
     const [deletedContacts, setDeletedContacts] = useState<Contact[]>([]);
+    // The mailbox's Suggested Contacts folder - the people it has corresponded with - once the server has made it; `null` while unknown (an older server has none).
+    const [suggestedFolderUid, setSuggestedFolderUid] = useState<string | null>(null);
+    const [suggestedContacts, setSuggestedContacts] = useState<Contact[]>([]);
     const [deletedLoading, setDeletedLoading] = useState(false);
     const [deletedError, setDeletedError] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
@@ -121,6 +125,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         }
         setLoading(true);
         setError(null);
+        if (suggestedFolderUid) {
+            void loadSuggested(suggestedFolderUid);
+        }
         return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
             .then((result) => {
                 setContacts(result.items);
@@ -134,6 +141,31 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         void reload();
     }, [folderUid]);
 
+    /** Reads the Suggested Contacts folder's contacts. A failure leaves the list as it was. */
+    function loadSuggested(suggestedUid: string): Promise<void> {
+        return listAllPages((page) => listContacts(suggestedUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then((result) => setSuggestedContacts(result.items))
+            .catch(() => undefined);
+    }
+
+    // Asks the server to turn the people this mailbox has corresponded with into suggested contacts (it does so once for each person, so this is cheap when
+    // nothing is new), then lists them. An older server, or one that refuses, simply has no such view.
+    useEffect(() => {
+        let cancelled = false;
+        // `ContactsShell` only renders this with a resolved mailbox (see the Deleted view's comment above).
+        void ensureSuggestedContacts(mailboxUid!, client)
+            .then(async (result) => {
+                if (!cancelled) {
+                    setSuggestedFolderUid(result.folderUid);
+                    await loadSuggested(result.folderUid);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid]);
+
     // 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
@@ -196,6 +228,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 return contacts;
             case "favorites":
                 return contacts.filter((c) => c.favorite);
+            case "suggested":
+                return suggestedContacts;
             case "list":
                 return contacts.filter((c) => c.contactListUid === view.uid);
             case "category":
@@ -203,7 +237,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
             case "deleted":
                 return deletedContacts;
         }
-    }, [contacts, deletedContacts, view]);
+    }, [contacts, deletedContacts, suggestedContacts, view]);
 
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
@@ -226,7 +260,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         return arr;
     }, [filtered, sortColumn, sortDesc]);
 
-    const selected = contacts.find((c) => c.uid === selectedUid) ?? null;
+    const selected = contacts.find((c) => c.uid === selectedUid) ?? suggestedContacts.find((c) => c.uid === selectedUid) ?? null;
     const isDeletedView = view.type === "deleted";
     const checkedContacts = sorted.filter((c) => checkedUids.has(c.uid));
     const allChecked = sorted.length > 0 && sorted.every((c) => checkedUids.has(c.uid));
@@ -392,6 +426,36 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         await reload();
     });
 
+    // 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) {
+            try {
+                await createContact(
+                    {
+                        mailboxUid: contact.mailboxUid,
+                        folderUid: folderUid!,
+                        displayName: contact.displayName,
+                        givenName: contact.givenName,
+                        surname: contact.surname,
+                        emails: contact.emails,
+                        phones: contact.phones,
+                        addresses: contact.addresses,
+                        company: contact.company,
+                        jobTitle: contact.jobTitle,
+                        notes: contact.notes,
+                        categories: contact.categories,
+                    },
+                    client,
+                );
+                await deleteContact(contact.uid, contact.version, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't add some of the contacts");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    });
+
     function handleExportVCard() {
         downloadTextFile(
             checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf",
@@ -447,7 +511,14 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         // open-ended, so a column's `overflow` would otherwise never apply); on a phone the whole page scrolls, as it always did. Below `lg` the
         // contacts menu is a drawer (a button above the columns), so the list and the detail pane keep a usable width.
         <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">
-            <ContactsSidebar mailboxUid={mailboxUid} contacts={contacts} active={view} onSelect={handleSelectView} showDeleted={canViewDeleted} />
+            <ContactsSidebar
+                mailboxUid={mailboxUid}
+                contacts={contacts}
+                active={view}
+                onSelect={handleSelectView}
+                showDeleted={canViewDeleted}
+                suggestedCount={suggestedFolderUid ? suggestedContacts.length : undefined}
+            />
             <div className="flex-1 min-w-0 min-h-0 flex">
             {/* Hidden on mobile while the "new contact" form (the one form-pane state mobile keeps
                 in-place — see the pane's own comment below) is showing, so the two never compete for the
@@ -469,6 +540,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                     onToggleFavorite={handleToggleFavorite}
                     onAddCategory={handleAddCategory}
                     onExportVCard={handleExportVCard}
+                    onAddToContacts={view.type === "suggested" ? handleAddToContacts : undefined}
                     onImportFile={handleImportFile}
                     shortcuts
                     hideNew={isMobile}

package/apps/www/tasks/index.tsx

@@ -61,7 +61,7 @@ function bucketFor(task: Task, now: Date): Bucket {
     if (isToday(due)) {
         return "Today";
     }
-    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 1 }))) {
+    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 0 }))) {
         return "This Week";
     }
     return "Later";

package/dist/apps/shared/components/admin/diagnostics/InformationPanel.js

@@ -12,5 +12,5 @@ import SettingsTable from "./SettingsTable.js";
  */
 export default function InformationPanel({ versions, plugins, information }) {
     const { data, error, loading } = versions;
-    return (_jsxs("div", { className: "space-y-6", children: [error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data && (_jsxs(_Fragment, { children: [_jsx(ServerVersionCard, { server: data.server }), _jsx(ComponentsTable, { components: data.components ?? [], kubernetes: data.kubernetes ?? { available: false } }), _jsx(InstalledPlugins, { data: plugins.data, error: plugins.error, loading: plugins.loading }), information.error && _jsx(Alert, { children: information.error }), !information.data && information.loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading the environment\u2026" }), information.data && (_jsxs(_Fragment, { children: [_jsx(SettingsTable, { id: "diagnostics-environment", title: "Environment variables", description: "The server process's environment. Only variables known to be harmless show their value; the value of a secret, or of anything unrecognized, is withheld by the server and never sent.", settings: information.data.environment ?? [] }), _jsx(SettingsTable, { id: "diagnostics-configuration", title: "Configuration", description: "The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Passwords, tokens, keys, certificates and the credentials in URLs are withheld by the server and never sent.", settings: information.data.configuration ?? [] })] })), _jsx(PackagesTable, { packages: data.packages ?? [] })] }))] }));
+    return (_jsxs("div", { className: "space-y-6", children: [error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data && (_jsxs(_Fragment, { children: [_jsx(ServerVersionCard, { server: data.server }), _jsx(ComponentsTable, { components: data.components ?? [], kubernetes: data.kubernetes ?? { available: false } }), _jsx(InstalledPlugins, { data: plugins.data, error: plugins.error, loading: plugins.loading }), information.error && _jsx(Alert, { children: information.error }), !information.data && information.loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading the environment\u2026" }), information.data && (_jsxs(_Fragment, { children: [_jsx(SettingsTable, { id: "diagnostics-environment", title: "Environment variables", description: "The server process's environment. Every variable shows its value except those on the server's list of hidden settings, whose value is withheld by the server and never sent.", settings: information.data.environment ?? [] }), _jsx(SettingsTable, { id: "diagnostics-configuration", title: "Configuration", description: "The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Settings on the server's list of hidden settings, such as passwords, tokens and keys, are withheld by the server and never sent, and so are the credentials in URLs.", settings: information.data.configuration ?? [] })] })), _jsx(PackagesTable, { packages: data.packages ?? [] })] }))] }));
 }

package/dist/apps/shared/components/admin/diagnostics/SettingsTable.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useMemo, useState } from "react";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 /** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
 export const SETTINGS_PAGE_SIZE = 100;
 /** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
@@ -27,5 +28,5 @@ export default function SettingsTable({ title, description, id, settings }) {
                         setQuery(event.target.value);
                         setLimit(SETTINGS_PAGE_SIZE);
                     } }) }), _jsx("p", { role: "status", className: "mb-2 text-xs text-text-muted", children: (matching.length === settings.length ? `${settings.length} settings` : `${matching.length} of ${settings.length} settings match`) +
-                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "") }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: settings.length === 0 ? "Nothing is set." : "No settings match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Value"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.redacted ? _jsx("span", { className: "text-text-muted", children: HIDDEN_VALUE }) : item.value })] }, item.name))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + SETTINGS_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
+                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "") }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: settings.length === 0 ? "Nothing is set." : "No settings match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Value"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: [item.name, _jsx(CopyIconButton, { value: item.name, label: `Copy the name of ${item.name}` })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.redacted ? (_jsx("span", { className: "text-text-muted", children: HIDDEN_VALUE })) : (_jsxs(_Fragment, { children: [item.value, _jsx(CopyIconButton, { value: item.value ?? "", label: `Copy the value of ${item.name}` })] })) })] }, item.name))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + SETTINGS_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
 }

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.d.ts

@@ -63,8 +63,8 @@ export interface DiagnosticsVersions {
     };
 }
 /**
- * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds every secret-like
- * or unrecognized value and never sends it, so there is nothing for the client to hide.
+ * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds the value of every setting on its
+ * hidden list and never sends it, so there is nothing for the client to hide.
  */
 export interface DiagnosticsSetting {
     name: string;

package/dist/apps/shared/components/admin/mailboxes/MailboxTable.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 function formatBytes(bytes) {
     if (bytes >= 1000000000)
         return `${(bytes / 1000000000).toFixed(1)} GB`;
@@ -8,9 +9,13 @@ function formatBytes(bytes) {
         return `${(bytes / 1000).toFixed(1)} KB`;
     return `${bytes} B`;
 }
+/** A cell's value with the icon button that copies it. */
+function Copyable({ value, label }) {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [value, _jsx(CopyIconButton, { value: value, label: label })] }));
+}
 export default function MailboxTable({ mailboxes }) {
     if (mailboxes.length === 0) {
         return _jsx("p", { className: "text-sm text-text-muted", children: "No mailboxes found." });
     }
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Address" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Display name" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Owner" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Quota used" }), _jsx("th", { className: "border-b border-border" })] }) }), _jsx("tbody", { children: mailboxes.map((mailbox) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.primarySmtpAddress }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.displayName }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.ownerUserUid ?? (_jsx("span", { className: "inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Shared" })) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: [formatBytes(mailbox.usedBytes), " / ", formatBytes(mailbox.quotaBytes)] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle text-right", children: _jsx("a", { href: `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`, className: "text-primary-dark font-medium hover:underline", children: "View" }) })] }, mailbox.uid))) })] }) }));
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Address" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Display name" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Owner" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Quota used" }), _jsx("th", { className: "border-b border-border" })] }) }), _jsx("tbody", { children: mailboxes.map((mailbox) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: _jsx(Copyable, { value: mailbox.primarySmtpAddress, label: `Copy the address of ${mailbox.primarySmtpAddress}` }) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: _jsx(Copyable, { value: mailbox.displayName, label: `Copy the display name of ${mailbox.primarySmtpAddress}` }) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.ownerUserUid ? (_jsx(Copyable, { value: mailbox.ownerUserUid, label: `Copy the owner of ${mailbox.primarySmtpAddress}` })) : (_jsx("span", { className: "inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Shared" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: _jsx(Copyable, { value: `${formatBytes(mailbox.usedBytes)} / ${formatBytes(mailbox.quotaBytes)}`, label: `Copy the quota used of ${mailbox.primarySmtpAddress}` }) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle text-right", children: _jsx("a", { href: `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`, className: "text-primary-dark font-medium hover:underline", children: "View" }) })] }, mailbox.uid))) })] }) }));
 }

package/dist/apps/shared/components/admin/settings/DomainDnsSetup.js

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import { actionErrorMessage } from "../elevation.js";
 const RECORD_TYPE_LABELS = {
     ownership: "Ownership (TXT)",
@@ -44,9 +44,9 @@ function splitSrvValue(value) {
     const match = /^(\d+)\s+(\d+)\s+(\d+)\s+(\S+)$/.exec(value.trim());
     return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
 }
-/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
 function CopyableValue({ value, copyLabel }) {
-    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("code", { className: "flex-1 min-w-0 text-xs break-all", children: value }), _jsx(CopyButton, { value: value, label: copyLabel })] }));
+    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("code", { className: "flex-1 min-w-0 text-xs break-all", children: value }), _jsx(CopyIconButton, { value: value, label: copyLabel, className: "shrink-0" })] }));
 }
 /**
  * A domain's status, its ownership TXT record with "Verify now", and the DNS setup checklist - shared by the domain