@rapidmx/web-client 0.9.0 → 0.10.0

package/apps/www/settings/signatures/new/index.tsx

@@ -1,129 +1,134 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
-import { clearPreviousDefaults } from "../signatureDefaults.js";
-import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
-import RichTextEditor from "../../../../shared/components/mail/compose/RichTextEditor.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-
-const INPUT_CLASS =
-    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-
-export type NewSignaturePageProps = Omit<SettingsShellProps, "active">;
-
-export default function NewSignaturePage(props: NewSignaturePageProps) {
-    return (
-        <SettingsShell {...props} active="signatures">
-            <NewSignatureForm />
-        </SettingsShell>
-    );
-}
-
-/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are (see
- * `ComposeWindow.handleUploadImage()`) — inline images in a signature are out of scope for this phase
- * (`.claude/NOTES.md`'s Phase 12 entry), so this is a real, deliberate no-op, not a stub left unfinished. */
-async function handleUploadImage(): Promise<string | null> {
-    return null;
-}
-
-function NewSignatureForm() {
-    const { mailboxUid } = useSettingsShell();
-    const [name, setName] = useState("");
-    const [contentHtml, setContentHtml] = useState("");
-    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
-    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-
-        if (!name.trim()) {
-            setError("A name is required.");
-            return;
-        }
-
-        setSaving(true);
-        try {
-            if (isDefaultForNewMessages || isDefaultForReplyForward) {
-                const existing = await listMailSignatures(mailboxUid!, { limit: 100 });
-                await clearPreviousDefaults(existing, undefined, isDefaultForNewMessages, isDefaultForReplyForward);
-            }
-            const created = await createMailSignature({
-                mailboxUid: mailboxUid!,
-                name: name.trim(),
-                contentHtml,
-                isDefaultForNewMessages,
-                isDefaultForReplyForward,
-            });
-            window.location.href = `/settings/signatures/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`;
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the signature.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-3xl">
-                <h1 className="text-lg font-bold tracking-tight mb-5">New signature</h1>
-
-                {error && <Alert>{error}</Alert>}
-
-                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-                    <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4">
-                        <FormField label="Name" htmlFor="name">
-                            <input
-                                id="name"
-                                type="text"
-                                className={INPUT_CLASS}
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                                placeholder="Work signature"
-                            />
-                        </FormField>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={isDefaultForNewMessages}
-                                onChange={(e) => setIsDefaultForNewMessages(e.target.checked)}
-                            />
-                            Use for new messages
-                        </label>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={isDefaultForReplyForward}
-                                onChange={(e) => setIsDefaultForReplyForward(e.target.checked)}
-                            />
-                            Use for replies and forwards
-                        </label>
-                    </div>
-
-                    <div className="h-64">
-                        <RichTextEditor value={contentHtml} onChange={setContentHtml} fill onUploadImage={handleUploadImage} />
-                    </div>
-
-                    <div className="flex gap-3">
-                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                            Create signature
-                        </Button>
-                        <a href={`/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
-                            <Button type="button" variant="secondary" className="!w-auto">
-                                Cancel
-                            </Button>
-                        </a>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../../_routedPage.js";
+import { useNavigate } from "../../../../shared/navigation/AppRouter.js";
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { clearPreviousDefaults } from "../signatureDefaults.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
+import RichTextEditor from "../../../../shared/components/mail/compose/RichTextEditor.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export type NewSignaturePageProps = Omit<SettingsShellProps, "active">;
+
+function NewSignaturePage(props: NewSignaturePageProps) {
+    return (
+        <SettingsShell {...props} active="signatures">
+            <NewSignatureForm />
+        </SettingsShell>
+    );
+}
+
+/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are (see
+ * `ComposeWindow.handleUploadImage()`) — inline images in a signature are out of scope for this phase
+ * (`.claude/NOTES.md`'s Phase 12 entry), so this is a real, deliberate no-op, not a stub left unfinished. */
+async function handleUploadImage(): Promise<string | null> {
+    return null;
+}
+
+function NewSignatureForm() {
+    const navigate = useNavigate();
+    const { mailboxUid } = useSettingsShell();
+    const [name, setName] = useState("");
+    const [contentHtml, setContentHtml] = useState("");
+    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
+    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                const existing = await listMailSignatures(mailboxUid!, { limit: 100 });
+                await clearPreviousDefaults(existing, undefined, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
+            const created = await createMailSignature({
+                mailboxUid: mailboxUid!,
+                name: name.trim(),
+                contentHtml,
+                isDefaultForNewMessages,
+                isDefaultForReplyForward,
+            });
+            navigate(`/settings/signatures/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the signature.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <h1 className="text-lg font-bold tracking-tight mb-5">New signature</h1>
+
+                {error && <Alert>{error}</Alert>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4">
+                        <FormField label="Name" htmlFor="name">
+                            <input
+                                id="name"
+                                type="text"
+                                className={INPUT_CLASS}
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="Work signature"
+                            />
+                        </FormField>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForNewMessages}
+                                onChange={(e) => setIsDefaultForNewMessages(e.target.checked)}
+                            />
+                            Use for new messages
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={isDefaultForReplyForward}
+                                onChange={(e) => setIsDefaultForReplyForward(e.target.checked)}
+                            />
+                            Use for replies and forwards
+                        </label>
+                    </div>
+
+                    <div className="h-64">
+                        <RichTextEditor value={contentHtml} onChange={setContentHtml} fill onUploadImage={handleUploadImage} />
+                    </div>
+
+                    <div className="flex gap-3">
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Create signature
+                        </Button>
+                        <a href={`/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
+                            <Button type="button" variant="secondary" className="!w-auto">
+                                Cancel
+                            </Button>
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default routedPage("/settings/signatures/new", NewSignaturePage);

package/apps/www/tasks/index.tsx

@@ -2,7 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useEffect, useMemo, useState } from "react";
+import { routedPage } from "../_routedPage.js";
+import React, { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
@@ -26,11 +27,14 @@ import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import { findWellKnownFolderUid } from "../../shared/mail/findWellKnownFolderUid.js";
 import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/listAllPages.js";
+import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
+import { useShortcut } from "../../shared/keyboard/useShortcut.js";
+import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 
 const INPUT_CLASS =
     "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 
-export default function TasksPage(props: TasksShellProps) {
+function TasksPage(props: TasksShellProps) {
     return (
         <TasksShell {...props}>
             <TasksContent />
@@ -103,6 +107,14 @@ function TasksContent() {
     // checked task (the toolbar's Delete).
     const [pendingDelete, setPendingDelete] = useState<{ type: "single"; task: Task } | { type: "bulk" } | null>(null);
 
+    // "New task" from the keyboard: a task is made in the quick-add form, so this moves the caret to its title field (which the Flagged view,
+    // a list of flagged mail rather than tasks, doesn't have). A dialog open - the delete confirmation - silences it.
+    const addTaskRef = useRef<HTMLInputElement | null>(null);
+    const canAddTask = view.type !== "flagged";
+    // Registered only while the form is rendered (`canAddTask`), so its field is there.
+    useShortcut(SHORTCUTS.tasks.create, () => addTaskRef.current!.focus(), { enabled: canAddTask });
+    const addTaskHint = useShortcutProps("Add a task", SHORTCUTS.tasks.create, canAddTask);
+
     function reload(): Promise<void> {
         if (!folderUid) {
             setTasks([]);
@@ -344,8 +356,10 @@ function TasksContent() {
                         <>
                             <form onSubmit={handleCreate} className="flex items-center gap-2 bg-surface border border-border rounded-md p-2">
                                 <input
+                                    ref={addTaskRef}
                                     type="text"
                                     aria-label="Add a task"
+                                    {...addTaskHint}
                                     className={`${INPUT_CLASS} flex-1`}
                                     value={title}
                                     onChange={(e) => setTitle(e.target.value)}
@@ -636,3 +650,5 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }:
         </div>
     );
 }
+
+export default routedPage("/tasks", TasksPage);

package/dist/apps/shared/auth/accountUrl.d.ts

@@ -0,0 +1,2 @@
+/** auth-server's account page, or `undefined` when no auth-server is configured. Tolerates a configured URL with a trailing slash. */
+export declare function accountUrlOf(authServerUrl: string | undefined): string | undefined;

package/dist/apps/shared/auth/accountUrl.js

@@ -0,0 +1,8 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** auth-server's account page, or `undefined` when no auth-server is configured. Tolerates a configured URL with a trailing slash. */
+export function accountUrlOf(authServerUrl) {
+    return authServerUrl ? `${authServerUrl.replace(/\/+$/, "")}/account` : undefined;
+}

package/dist/apps/shared/auth/adminAccess.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Whether the signed-in user holds an administrator role, learned without elevating.
+ *
+ * The JWT the browser carries can't say: auth-server strips every trusted role from a token that isn't elevated
+ * (`TokenUtils.resolveTokenUser()`), so `trusted` (from the JWT) is false for a real administrator until they confirm
+ * their identity on auth-server's elevation page. The role itself lives on the caller's own `User` record, which they may
+ * always read - `GET {authServerUrl}/api/users/me` (the same call auth-server's own UI makes "to check for admin access") -
+ * so the answer is read from there, with the same cross-origin credentials the profile lookups use.
+ *
+ * This only decides whether a menu item is shown. The `/admin` pages and API stay authoritative: they check the role and
+ * the elevation themselves, and the link only navigates (`/admin` then runs the elevation redirect), so a wrong answer
+ * - a stale cache, a tampered `sessionStorage` - can show a link that leads to "no administrator access", never more.
+ */
+/** The roles the server treats as trusted when it isn't configured otherwise (`trusted_roles`, default `["admin"]`). */
+export declare const DEFAULT_TRUSTED_ROLES: readonly string[];
+/** `sessionStorage` key prefix of a remembered answer; the user's uid follows, so another account signing in in the same
+ * tab never inherits it. */
+export declare const ADMIN_ACCESS_KEY_PREFIX = "rapidmx-admin-access:";
+/** How long a remembered answer is trusted - long enough that navigating between the apps costs no request, short enough
+ * that a role granted or removed shows up within the sitting. */
+export declare const ADMIN_ACCESS_TTL_MS: number;
+/** Forgets the lookups in flight (tests). */
+export declare function resetAdminAccessLookups(): void;
+/**
+ * Resolves `true` when `userUid`'s own `User` record on auth-server carries one of `trustedRoles`, `false` when it
+ * doesn't, and `undefined` when that couldn't be established (unreachable, blocked by CORS, not signed in, an unexpected
+ * body, or a record that isn't this user's). Only a real answer is remembered; a failure is asked again on the next page.
+ * Never rejects.
+ */
+export declare function lookUpAdminAccess(authServerUrl: string, userUid: string, trustedRoles?: readonly string[], now?: number): Promise<boolean | undefined>;

package/dist/apps/shared/auth/adminAccess.js

@@ -0,0 +1,89 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { authApiFetch } from "@rapidmx/react-shared/util/api.js";
+/**
+ * Whether the signed-in user holds an administrator role, learned without elevating.
+ *
+ * The JWT the browser carries can't say: auth-server strips every trusted role from a token that isn't elevated
+ * (`TokenUtils.resolveTokenUser()`), so `trusted` (from the JWT) is false for a real administrator until they confirm
+ * their identity on auth-server's elevation page. The role itself lives on the caller's own `User` record, which they may
+ * always read - `GET {authServerUrl}/api/users/me` (the same call auth-server's own UI makes "to check for admin access") -
+ * so the answer is read from there, with the same cross-origin credentials the profile lookups use.
+ *
+ * This only decides whether a menu item is shown. The `/admin` pages and API stay authoritative: they check the role and
+ * the elevation themselves, and the link only navigates (`/admin` then runs the elevation redirect), so a wrong answer
+ * - a stale cache, a tampered `sessionStorage` - can show a link that leads to "no administrator access", never more.
+ */
+/** The roles the server treats as trusted when it isn't configured otherwise (`trusted_roles`, default `["admin"]`). */
+export const DEFAULT_TRUSTED_ROLES = ["admin"];
+/** `sessionStorage` key prefix of a remembered answer; the user's uid follows, so another account signing in in the same
+ * tab never inherits it. */
+export const ADMIN_ACCESS_KEY_PREFIX = "rapidmx-admin-access:";
+/** How long a remembered answer is trusted - long enough that navigating between the apps costs no request, short enough
+ * that a role granted or removed shows up within the sitting. */
+export const ADMIN_ACCESS_TTL_MS = 30 * 60 * 1000;
+/** Lookups in flight, by key, so two components asking at once make one request. */
+const lookups = new Map();
+/** Forgets the lookups in flight (tests). */
+export function resetAdminAccessLookups() {
+    lookups.clear();
+}
+function readRemembered(key, now) {
+    try {
+        const stored = JSON.parse(sessionStorage.getItem(key) ?? "null");
+        if (typeof stored?.admin === "boolean" && typeof stored.at === "number" && now - stored.at >= 0 && now - stored.at < ADMIN_ACCESS_TTL_MS) {
+            return stored.admin;
+        }
+    }
+    catch {
+        // Unreadable, or storage unavailable - ask again.
+    }
+    return undefined;
+}
+function remember(key, admin, now) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify({ admin, at: now }));
+    }
+    catch {
+        // Storage unavailable - the next page load asks again.
+    }
+}
+/**
+ * Resolves `true` when `userUid`'s own `User` record on auth-server carries one of `trustedRoles`, `false` when it
+ * doesn't, and `undefined` when that couldn't be established (unreachable, blocked by CORS, not signed in, an unexpected
+ * body, or a record that isn't this user's). Only a real answer is remembered; a failure is asked again on the next page.
+ * Never rejects.
+ */
+export function lookUpAdminAccess(authServerUrl, userUid, trustedRoles = DEFAULT_TRUSTED_ROLES, now = Date.now()) {
+    const key = `${ADMIN_ACCESS_KEY_PREFIX}${userUid}`;
+    const remembered = readRemembered(key, now);
+    if (remembered !== undefined) {
+        return Promise.resolve(remembered);
+    }
+    const inFlight = lookups.get(key);
+    if (inFlight) {
+        return inFlight;
+    }
+    const lookup = (async () => {
+        try {
+            const user = await authApiFetch(authServerUrl, "/users/me");
+            if (!user || user.uid !== userUid || !Array.isArray(user.roles)) {
+                return undefined;
+            }
+            const admin = user.roles.some((role) => typeof role === "string" && trustedRoles.includes(role));
+            remember(key, admin, now);
+            return admin;
+        }
+        catch {
+            return undefined;
+        }
+        finally {
+            // Answered: what was learned is in storage; a failure may be asked again.
+            lookups.delete(key);
+        }
+    })();
+    lookups.set(key, lookup);
+    return lookup;
+}

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

@@ -88,7 +88,7 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
     const ownership = dnsSetup.find((c) => c.type === "ownership");
     const ownershipValue = ownership?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
     const ownershipName = ownership?.recordName || domain.name;
-    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "text-text-muted py-2", children: "Type" }), _jsx("dd", { className: "py-2", children: "TXT" }), _jsx("dt", { className: "text-text-muted py-2", children: "Name / host" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipName, copyLabel: "Copy name for the ownership TXT record" }) }), _jsx("dt", { className: "text-text-muted py-2", children: "Value" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipValue, copyLabel: "Copy value for the ownership TXT record" }) })] }), verifyError && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: verifyError }) })), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: verifyError ? "Try again" : "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Name / host", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [RECORD_TYPE_LABELS[check.type], _jsxs("div", { className: "text-xs text-text-muted", children: ["Type: ", check.recordKind] })] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: check.recordName ? (_jsx(CopyableValue, { value: check.recordName, copyLabel: `Copy name for the ${RECORD_TYPE_NAMES[check.type]} record` })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: check.recommendedValue ? (_jsx(DnsRecordValue, { check: check, value: check.recommendedValue })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) })] }, check.type))) })] }) }), _jsxs("p", { className: "text-xs text-text-muted mt-3", children: ["Some DNS providers want the name relative to the domain (for example ", _jsx("code", { children: "@" }), " for the domain itself) rather than the full name."] })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "text-text-muted py-2", children: "Type" }), _jsx("dd", { className: "py-2", children: "TXT" }), _jsx("dt", { className: "text-text-muted py-2", children: "Name / host" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipName, copyLabel: "Copy name for the ownership TXT record" }) }), _jsx("dt", { className: "text-text-muted py-2", children: "Value" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipValue, copyLabel: "Copy value for the ownership TXT record" }) })] }), verifyError && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: verifyError }) })), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: verifyError ? "Try again" : "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Name / host", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [RECORD_TYPE_LABELS[check.type], _jsxs("div", { className: "text-xs text-text-muted", children: ["Type: ", check.recordKind] })] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted min-w-[10rem]", children: check.recordName ? (_jsx(CopyableValue, { value: check.recordName, copyLabel: `Copy name for the ${RECORD_TYPE_NAMES[check.type]} record` })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: check.recommendedValue ? (_jsx(DnsRecordValue, { check: check, value: check.recommendedValue })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) })] }, check.type))) })] }) }), _jsxs("p", { className: "text-xs text-text-muted mt-3", children: ["Some DNS providers want the name relative to the domain (for example ", _jsx("code", { children: "@" }), " for the domain itself) rather than the full name."] })] }))] }));
 }
 /** 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 }) {

package/dist/apps/shared/components/calendar/layout/CalendarShell.d.ts

@@ -37,4 +37,4 @@ export declare function useCalendarShell(): CalendarShellContextValue;
  * state — it lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between
  * views/dates must be instant (no full page reload) and this framework has no client-side router.
  */
-export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<CalendarShellProps>): React.JSX.Element;
+export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<CalendarShellProps>): React.JSX.Element;

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -10,6 +10,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
+import { useLocationSearch } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 const CalendarShellContext = createContext({
     calendarFolders: [],
@@ -29,16 +30,19 @@ export function useCalendarShell() {
  * state — it lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between
  * views/dates must be instant (no full page reload) and this framework has no client-side router.
  */
-export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }) {
+export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
     const [mailboxCalendars, setMailboxCalendars] = useState([]);
     const [requestedMailboxUid, setRequestedMailboxUid] = useState(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) {
             return;
@@ -100,5 +104,5 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
     else if (userUid && status === "ready") {
         inner = (_jsx("div", { className: "flex-1 min-w-0 flex flex-col", children: _jsx(CalendarShellContext.Provider, { value: contextValue, children: children }) }));
     }
-    return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, pluginNav: pluginNav, children: inner }));
+    return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/components/contacts/ContactsToolbar.d.ts

@@ -14,6 +14,8 @@ export interface ContactsToolbarProps {
     /** 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;
 }
 /**
  * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
@@ -22,4 +24,4 @@ export interface ContactsToolbarProps {
  * 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): React.JSX.Element;
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, }: ContactsToolbarProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactsToolbar.js

@@ -5,8 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useRef } from "react";
 import { HiOutlineArrowDownTray, HiOutlineArrowUpTray, HiOutlineEnvelope, HiOutlinePencil, HiOutlineStar, HiOutlineTag, HiOutlineTrash, HiOutlineUserPlus, HiStar, } from "react-icons/hi2";
-function ToolbarButton({ label, icon: Icon, disabled, onClick, }) {
-    return (_jsxs("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", children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
+function ToolbarButton({ label, icon: Icon, disabled, onClick, hint, }) {
+    return (_jsxs("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", children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
 }
 function Divider() {
     return _jsx("div", { className: "w-px self-stretch my-1 bg-border", "aria-hidden": "true" });
@@ -18,7 +20,8 @@ function Divider() {
  * 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, }) {
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, }) {
+    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
     const importInputRef = useRef(null);
     const hasSelection = selectedCount > 0;
     function handleImportFileChosen(e) {
@@ -28,5 +31,5 @@ export default function ContactsToolbar({ selectedCount, allSelectedFavorited, o
             onImportFile(file);
         }
     }
-    return (_jsxs("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", children: [_jsx(ToolbarButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Edit", icon: HiOutlinePencil, disabled: selectedCount !== 1, onClick: onEdit }), _jsx(ToolbarButton, { label: "Delete", icon: HiOutlineTrash, disabled: !hasSelection, onClick: onDelete }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Email", icon: HiOutlineEnvelope, disabled: !hasSelection, onClick: onEmail }), _jsx(ToolbarButton, { label: allSelectedFavorited ? "Unfavorite" : "Favorite", icon: allSelectedFavorited ? HiStar : HiOutlineStar, disabled: !hasSelection, onClick: onToggleFavorite }), _jsx(ToolbarButton, { label: "Add category", icon: HiOutlineTag, disabled: !hasSelection, onClick: onAddCategory }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Export", icon: HiOutlineArrowUpTray, disabled: !hasSelection, onClick: onExportVCard }), _jsx(ToolbarButton, { label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click() }), _jsx("input", { ref: importInputRef, type: "file", accept: ".vcf", className: "sr-only", "aria-label": "Import contacts file", onChange: handleImportFileChosen })] }));
+    return (_jsxs("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", children: [_jsx(ToolbarButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Edit", icon: HiOutlinePencil, disabled: selectedCount !== 1, onClick: onEdit }), _jsx(ToolbarButton, { label: "Delete", icon: HiOutlineTrash, disabled: !hasSelection, onClick: onDelete }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Email", icon: HiOutlineEnvelope, disabled: !hasSelection, onClick: onEmail }), _jsx(ToolbarButton, { label: allSelectedFavorited ? "Unfavorite" : "Favorite", icon: allSelectedFavorited ? HiStar : HiOutlineStar, disabled: !hasSelection, onClick: onToggleFavorite }), _jsx(ToolbarButton, { label: "Add category", icon: HiOutlineTag, disabled: !hasSelection, onClick: onAddCategory }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Export", icon: HiOutlineArrowUpTray, disabled: !hasSelection, onClick: onExportVCard }), _jsx(ToolbarButton, { label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click() }), _jsx("input", { ref: importInputRef, type: "file", accept: ".vcf", className: "sr-only", "aria-label": "Import contacts file", onChange: handleImportFileChosen })] }));
 }

package/dist/apps/shared/components/contacts/layout/ContactsShell.d.ts

@@ -18,4 +18,4 @@ export declare function useContactsShell(): ContactsShellContextValue;
  * sidebar is therefore just a mailbox switcher (when the caller has more than one); the actual contact
  * list/detail UI is `apps/www/contacts/index.tsx`'s own content, rendered as `children` here.
  */
-export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<ContactsShellProps>): React.JSX.Element;
+export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<ContactsShellProps>): React.JSX.Element;