@rapidmx/web-client 0.8.0 → 0.10.0

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -7,6 +7,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 
 const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
     ownership: "Ownership (TXT)",
@@ -16,6 +17,31 @@ const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
     dmarc: "DMARC",
 };
 
+/** How each record is named in a Copy button's accessible name ("Copy value for the SPF record"). */
+const RECORD_TYPE_NAMES: Record<DnsRecordCheck["type"], string> = {
+    ownership: "ownership TXT",
+    mx: "MX",
+    spf: "SPF",
+    dkim: "DKIM",
+    dmarc: "DMARC",
+};
+
+/** An MX record's recommended value is `"<priority> <mail server>"` - two separate fields in a DNS provider's form. */
+function splitMxValue(value: string): { priority: string; server: string } | null {
+    const match = /^(\d+)\s+(\S+)$/.exec(value.trim());
+    return match ? { priority: match[1], server: match[2] } : null;
+}
+
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
+function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
+    return (
+        <div className="flex items-start gap-2">
+            <code className="flex-1 min-w-0 text-xs break-all">{value}</code>
+            <CopyButton value={value} label={copyLabel} />
+        </div>
+    );
+}
+
 export interface DomainDnsSetupProps {
     uid: string;
     /** Called with the domain every time it's (re)loaded - e.g. after "Verify now". */
@@ -33,7 +59,6 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     const [error, setError] = useState<string | null>(null);
     const [verifying, setVerifying] = useState(false);
     const [verifyError, setVerifyError] = useState<string | null>(null);
-    const [copied, setCopied] = useState(false);
 
     function reload(id: string) {
         setLoading(true);
@@ -71,16 +96,6 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
         }
     }
 
-    async function handleCopy(value: string) {
-        try {
-            await navigator.clipboard.writeText(value);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        } catch {
-            // Clipboard access can be denied by the browser — the value is still selectable/copyable by hand.
-        }
-    }
-
     if (loading) {
         return <p className="text-sm text-text-muted">Loading&hellip;</p>;
     }
@@ -88,8 +103,9 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
         return <Alert>{error ?? "Domain not found."}</Alert>;
     }
 
-    const ownershipValue =
-        dnsSetup.find((c) => c.type === "ownership")?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
+    const ownership = dnsSetup.find((c) => c.type === "ownership");
+    const ownershipValue = ownership?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
+    const ownershipName = ownership?.recordName || domain.name;
 
     return (
         <div className="flex flex-col gap-5">
@@ -118,14 +134,18 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                         <p className="text-sm mb-2">
                             Add the following TXT record to <strong>{domain.name}</strong> to prove ownership, then verify:
                         </p>
-                        <div className="flex items-center gap-2">
-                            <code className="flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap">
-                                {ownershipValue}
-                            </code>
-                            <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => handleCopy(ownershipValue)}>
-                                {copied ? "Copied" : "Copy"}
-                            </Button>
-                        </div>
+                        <dl className="grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-2 text-sm">
+                            <dt className="text-text-muted py-2">Type</dt>
+                            <dd className="py-2">TXT</dd>
+                            <dt className="text-text-muted py-2">Name / host</dt>
+                            <dd className="bg-surface-alt border border-border rounded-sm py-1.5 px-3">
+                                <CopyableValue value={ownershipName} copyLabel="Copy name for the ownership TXT record" />
+                            </dd>
+                            <dt className="text-text-muted py-2">Value</dt>
+                            <dd className="bg-surface-alt border border-border rounded-sm py-1.5 px-3">
+                                <CopyableValue value={ownershipValue} copyLabel="Copy value for the ownership TXT record" />
+                            </dd>
+                        </dl>
                         {verifyError && (
                             <div className="mt-3">
                                 <Alert>{verifyError}</Alert>
@@ -145,7 +165,7 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                         <table className="w-full text-sm border-collapse">
                             <thead>
                                 <tr>
-                                    {["Record", "Status", "Recommended value"].map((h) => (
+                                    {["Record", "Status", "Name / host", "Recommended value"].map((h) => (
                                         <th
                                             key={h}
                                             className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
@@ -158,7 +178,10 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                             <tbody>
                                 {dnsSetup.map((check) => (
                                     <tr key={check.type}>
-                                        <td className="py-2.5 px-2.5 border-b border-border">{RECORD_TYPE_LABELS[check.type]}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">
+                                            {RECORD_TYPE_LABELS[check.type]}
+                                            <div className="text-xs text-text-muted">Type: {check.recordKind}</div>
+                                        </td>
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {!check.configured ? (
                                                 <span className="text-xs text-text-muted">Not configured</span>
@@ -172,16 +195,56 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                                 </span>
                                             )}
                                         </td>
+                                        {/* A floor on the name column: beside a long DKIM key (which breaks anywhere) the table gave it a few characters, and a name wrapped one letter to a line. */}
+                                        <td className="py-2.5 px-2.5 border-b border-border text-text-muted min-w-[10rem]">
+                                            {check.recordName ? (
+                                                <CopyableValue
+                                                    value={check.recordName}
+                                                    copyLabel={`Copy name for the ${RECORD_TYPE_NAMES[check.type]} record`}
+                                                />
+                                            ) : (
+                                                <code className="text-xs">—</code>
+                                            )}
+                                        </td>
                                         <td className="py-2.5 px-2.5 border-b border-border text-text-muted">
-                                            <code className="text-xs">{check.recommendedValue ?? "—"}</code>
+                                            {check.recommendedValue ? (
+                                                <DnsRecordValue check={check} value={check.recommendedValue} />
+                                            ) : (
+                                                <code className="text-xs">—</code>
+                                            )}
                                         </td>
                                     </tr>
                                 ))}
                             </tbody>
                         </table>
                     </div>
+                    <p className="text-xs text-text-muted mt-3">
+                        Some DNS providers want the name relative to the domain (for example <code>@</code> for the domain itself) rather
+                        than the full name.
+                    </p>
                 </div>
             )}
         </div>
     );
 }
+
+/** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), anything else whole. */
+function DnsRecordValue({ check, value }: { check: DnsRecordCheck; value: string }) {
+    const recordName = RECORD_TYPE_NAMES[check.type];
+    const mx = check.type === "mx" ? splitMxValue(value) : null;
+    if (!mx) {
+        return <CopyableValue value={value} copyLabel={`Copy value for the ${recordName} record`} />;
+    }
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div className="flex items-start gap-2">
+                <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
+                <CopyableValue value={mx.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+            </div>
+            <div className="flex items-start gap-2">
+                <span className="text-xs w-20 shrink-0 pt-1">Mail server</span>
+                <CopyableValue value={mx.server} copyLabel={`Copy mail server for the ${recordName} record`} />
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -9,6 +9,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
+import { useLocationSearch } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 
 export type CalendarShellProps = Omit<AppShellProps, "active">;
@@ -69,6 +70,7 @@ export default function CalendarShell({
     impersonating,
     impersonationBaseUrl,
     trusted,
+    trustedRoles,
     pluginNav,
     children,
 }: PropsWithChildren<CalendarShellProps>) {
@@ -79,9 +81,12 @@ export default function CalendarShell({
     const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
     const [folderRefreshToken, setFolderRefreshToken] = useState(0);
 
+    // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
+    // effect, not during render, so the server render and the hydrating render agree.
+    const search = useLocationSearch();
     useEffect(() => {
-        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
-    }, []);
+        setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
+    }, [search]);
 
     useEffect(() => {
         if (!userUid) {
@@ -186,6 +191,7 @@ export default function CalendarShell({
             impersonating={impersonating}
             impersonationBaseUrl={impersonationBaseUrl}
             trusted={trusted}
+            trustedRoles={trustedRoles}
             pluginNav={pluginNav}
         >
             {inner}

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -1,115 +1,125 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { ChangeEvent, useRef } from "react";
-import type { IconType } from "react-icons";
-import {
-    HiOutlineArrowDownTray,
-    HiOutlineArrowUpTray,
-    HiOutlineEnvelope,
-    HiOutlinePencil,
-    HiOutlineStar,
-    HiOutlineTag,
-    HiOutlineTrash,
-    HiOutlineUserPlus,
-    HiStar,
-} from "react-icons/hi2";
-
-export interface ContactsToolbarProps {
-    selectedCount: number;
-    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
-     * to act (and read) as a removal instead of an addition. */
-    allSelectedFavorited: boolean;
-    onNewContact: () => void;
-    onEdit: () => void;
-    onDelete: () => void;
-    onEmail: () => void;
-    onToggleFavorite: () => void;
-    onAddCategory: () => void;
-    onExportVCard: () => void;
-    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
-     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
-    onImportFile: (file: File) => void;
-}
-
-function ToolbarButton({
-    label,
-    icon: Icon,
-    disabled,
-    onClick,
-}: {
-    label: string;
-    icon: IconType;
-    disabled?: boolean;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            disabled={disabled}
-            className="flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt"
-        >
-            <Icon size={18} aria-hidden="true" />
-            <span>{label}</span>
-        </button>
-    );
-}
-
-function Divider() {
-    return <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />;
-}
-
-/**
- * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
- * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
- * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
- * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
- * "+ New list" affordance next to the "Your contact lists" heading.
- */
-export default function ContactsToolbar({
-    selectedCount,
-    allSelectedFavorited,
-    onNewContact,
-    onEdit,
-    onDelete,
-    onEmail,
-    onToggleFavorite,
-    onAddCategory,
-    onExportVCard,
-    onImportFile,
-}: ContactsToolbarProps) {
-    const importInputRef = useRef<HTMLInputElement | null>(null);
-    const hasSelection = selectedCount > 0;
-
-    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
-        const file = e.target.files?.[0];
-        e.target.value = "";
-        if (file) {
-            onImportFile(file);
-        }
-    }
-
-    return (
-        <div role="toolbar" aria-label="Contacts actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
-            <ToolbarButton label="New contact" icon={HiOutlineUserPlus} onClick={onNewContact} />
-            <Divider />
-            <ToolbarButton label="Edit" icon={HiOutlinePencil} disabled={selectedCount !== 1} onClick={onEdit} />
-            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
-            <Divider />
-            <ToolbarButton label="Email" icon={HiOutlineEnvelope} disabled={!hasSelection} onClick={onEmail} />
-            <ToolbarButton
-                label={allSelectedFavorited ? "Unfavorite" : "Favorite"}
-                icon={allSelectedFavorited ? HiStar : HiOutlineStar}
-                disabled={!hasSelection}
-                onClick={onToggleFavorite}
-            />
-            <ToolbarButton label="Add category" icon={HiOutlineTag} disabled={!hasSelection} onClick={onAddCategory} />
-            <Divider />
-            <ToolbarButton label="Export" icon={HiOutlineArrowUpTray} disabled={!hasSelection} onClick={onExportVCard} />
-            <ToolbarButton label="Import" icon={HiOutlineArrowDownTray} onClick={() => importInputRef.current?.click()} />
-            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ChangeEvent, useRef } from "react";
+import type { IconType } from "react-icons";
+import {
+    HiOutlineArrowDownTray,
+    HiOutlineArrowUpTray,
+    HiOutlineEnvelope,
+    HiOutlinePencil,
+    HiOutlineStar,
+    HiOutlineTag,
+    HiOutlineTrash,
+    HiOutlineUserPlus,
+    HiStar,
+} from "react-icons/hi2";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
+
+export interface ContactsToolbarProps {
+    selectedCount: number;
+    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
+     * to act (and read) as a removal instead of an addition. */
+    allSelectedFavorited: boolean;
+    onNewContact: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onEmail: () => void;
+    onToggleFavorite: () => void;
+    onAddCategory: () => void;
+    onExportVCard: () => void;
+    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
+     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
+    onImportFile: (file: File) => void;
+    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
+}
+
+function ToolbarButton({
+    label,
+    icon: Icon,
+    disabled,
+    onClick,
+    hint,
+}: {
+    label: string;
+    icon: IconType;
+    disabled?: boolean;
+    onClick: () => void;
+    /** `title` and `aria-keyshortcuts` for a button with a shortcut. */
+    hint?: { title: string; "aria-keyshortcuts"?: string };
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            {...hint}
+            className="flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt"
+        >
+            <Icon size={18} aria-hidden="true" />
+            <span>{label}</span>
+        </button>
+    );
+}
+
+function Divider() {
+    return <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />;
+}
+
+/**
+ * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({
+    selectedCount,
+    allSelectedFavorited,
+    onNewContact,
+    onEdit,
+    onDelete,
+    onEmail,
+    onToggleFavorite,
+    onAddCategory,
+    onExportVCard,
+    onImportFile,
+    shortcuts,
+}: ContactsToolbarProps) {
+    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
+    const importInputRef = useRef<HTMLInputElement | null>(null);
+    const hasSelection = selectedCount > 0;
+
+    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+            onImportFile(file);
+        }
+    }
+
+    return (
+        <div role="toolbar" aria-label="Contacts actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
+            <ToolbarButton label="New contact" icon={HiOutlineUserPlus} onClick={onNewContact} hint={shortcuts ? newContactHint : undefined} />
+            <Divider />
+            <ToolbarButton label="Edit" icon={HiOutlinePencil} disabled={selectedCount !== 1} onClick={onEdit} />
+            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
+            <Divider />
+            <ToolbarButton label="Email" icon={HiOutlineEnvelope} disabled={!hasSelection} onClick={onEmail} />
+            <ToolbarButton
+                label={allSelectedFavorited ? "Unfavorite" : "Favorite"}
+                icon={allSelectedFavorited ? HiStar : HiOutlineStar}
+                disabled={!hasSelection}
+                onClick={onToggleFavorite}
+            />
+            <ToolbarButton label="Add category" icon={HiOutlineTag} disabled={!hasSelection} onClick={onAddCategory} />
+            <Divider />
+            <ToolbarButton label="Export" icon={HiOutlineArrowUpTray} disabled={!hasSelection} onClick={onExportVCard} />
+            <ToolbarButton label="Import" icon={HiOutlineArrowDownTray} onClick={() => importInputRef.current?.click()} />
+            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
+        </div>
+    );
+}

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -10,6 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
+import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 
 export type ContactsShellProps = Omit<AppShellProps, "active">;
@@ -44,6 +45,7 @@ export default function ContactsShell({
     impersonating,
     impersonationBaseUrl,
     trusted,
+    trustedRoles,
     pluginNav,
     children,
 }: PropsWithChildren<ContactsShellProps>) {
@@ -55,9 +57,18 @@ export default function ContactsShell({
     const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
 
+    // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
+    // effect, not during render, so the server render and the hydrating render agree.
+    const search = useLocationSearch();
+    const navigate = useNavigate();
     useEffect(() => {
-        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
-    }, []);
+        setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
+    }, [search]);
+    // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
+    // with the page - is closed here.
+    useEffect(() => {
+        setDrawerOpen(false);
+    }, [search]);
 
     useEffect(() => {
         if (!userUid) {
@@ -142,7 +153,7 @@ export default function ContactsShell({
                             className="w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
                             value={mailboxUid}
                             onChange={(e) => {
-                                window.location.href = `/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                                navigate(`/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }}
                         >
                             {mailboxes.map((mb) => (
@@ -191,6 +202,7 @@ export default function ContactsShell({
             impersonating={impersonating}
             impersonationBaseUrl={impersonationBaseUrl}
             trusted={trusted}
+            trustedRoles={trustedRoles}
             pluginNav={pluginNav}
         >
             {inner}