@rapidmx/web-client 0.3.1 → 0.5.0

package/dist/apps/www/settings/filters/[uid].js

@@ -8,7 +8,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
 import { getMailFilterRule, updateMailFilterRule, } from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
 import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import RuleBuilder from "../../../shared/components/rules/RuleBuilder.js";
+import RuleBuilder, { hasConditions } from "../../../shared/components/rules/RuleBuilder.js";
 import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "./_mailFilterRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -27,11 +27,17 @@ function MailFilterDetailContent({ uid }) {
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
+    // The folder picker lists the *rule's own* mailbox's folders, not the switcher's - a rule opened by
+    // direct link (or after switching mailboxes) can belong to a different mailbox than `mailboxUid`,
+    // and a move-to-folder action must only ever offer folders the rule can actually target.
+    const ruleMailboxUid = original?.mailboxUid;
     useEffect(() => {
-        // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same
-        // established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
-        listFolders(mailboxUid).then(setFolders).catch(() => setFolders([]));
-    }, [mailboxUid]);
+        if (!ruleMailboxUid) {
+            return;
+        }
+        listFolders(ruleMailboxUid).then(setFolders).catch(() => setFolders([]));
+    }, [ruleMailboxUid]);
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -62,6 +68,11 @@ function MailFilterDetailContent({ uid }) {
             setError("A name is required.");
             return;
         }
+        if (!hasConditions(rule.conditions)) {
+            setShowValidation(true);
+            setError("Add at least one condition. A filter without conditions would apply to every message.");
+            return;
+        }
         setSaving(true);
         setSaved(false);
         try {
@@ -81,7 +92,7 @@ function MailFilterDetailContent({ uid }) {
             setSaving(false);
         }
     }
-    if (loading || folders === null) {
+    if (loading) {
         return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
     }
     if (error && !original) {
@@ -90,5 +101,9 @@ function MailFilterDetailContent({ uid }) {
     if (!original || !rule) {
         return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: "Mail filter not found." }) }));
     }
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("a", { href: `/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All mail filters" }), _jsx("h1", { className: "text-lg font-bold tracking-tight mt-1 mb-5", children: original.name }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsx("div", { className: "bg-surface border border-border rounded-md p-6", children: _jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value) }) }) }), _jsx(RuleBuilder, { value: rule, onChange: setRule, conditionFields: MAIL_FILTER_CONDITION_FIELDS, actionTypes: buildMailFilterActionTypes(folders) }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save changes" }) })] })] }) }));
+    // The folder list is fetched for the rule's own mailbox, so it can only start once the rule has loaded.
+    if (folders === null) {
+        return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("a", { href: `/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All mail filters" }), _jsx("h1", { className: "text-lg font-bold tracking-tight mt-1 mb-5", children: original.name }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsx("div", { className: "bg-surface border border-border rounded-md p-6", children: _jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value) }) }) }), _jsx(RuleBuilder, { value: rule, onChange: setRule, conditionFields: MAIL_FILTER_CONDITION_FIELDS, actionTypes: buildMailFilterActionTypes(folders), showValidation: showValidation }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save changes" }) })] })] }) }));
 }

package/dist/apps/www/settings/filters/new/index.js

@@ -8,7 +8,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
 import { createMailFilterRule, } from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
 import SettingsShell, { useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
-import RuleBuilder from "../../../../shared/components/rules/RuleBuilder.js";
+import RuleBuilder, { hasConditions } from "../../../../shared/components/rules/RuleBuilder.js";
 import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "../_mailFilterRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -31,6 +31,7 @@ function NewMailFilterForm() {
     });
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
     // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
     // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
     useEffect(() => {
@@ -45,6 +46,11 @@ function NewMailFilterForm() {
             setError("A name is required.");
             return;
         }
+        if (!hasConditions(rule.conditions)) {
+            setShowValidation(true);
+            setError("Add at least one condition. A filter without conditions would apply to every message.");
+            return;
+        }
         setSaving(true);
         try {
             const created = await createMailFilterRule({ mailboxUid: mailboxUid, name: name.trim(), ...rule });
@@ -57,5 +63,5 @@ function NewMailFilterForm() {
             setSaving(false);
         }
     }
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "New mail filter" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Applied in order once a message is verdicted safe to deliver, before it reaches your Inbox." }), error && _jsx(Alert, { children: error }), folderError && _jsx(Alert, { children: folderError }), folders === null ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsx("div", { className: "bg-surface border border-border rounded-md p-6", children: _jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "File newsletters" }) }) }), _jsx(RuleBuilder, { value: rule, onChange: setRule, conditionFields: MAIL_FILTER_CONDITION_FIELDS, actionTypes: buildMailFilterActionTypes(folders) }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create filter" }), _jsx("a", { href: `/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] }))] }) }));
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "New mail filter" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Applied in order once a message is verdicted safe to deliver, before it reaches your Inbox." }), error && _jsx(Alert, { children: error }), folderError && _jsx(Alert, { children: folderError }), folders === null ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsx("div", { className: "bg-surface border border-border rounded-md p-6", children: _jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "File newsletters" }) }) }), _jsx(RuleBuilder, { value: rule, onChange: setRule, conditionFields: MAIL_FILTER_CONDITION_FIELDS, actionTypes: buildMailFilterActionTypes(folders), showValidation: showValidation }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create filter" }), _jsx("a", { href: `/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] }))] }) }));
 }

package/dist/apps/www/settings/focused-inbox/index.js

@@ -33,7 +33,9 @@ function FocusedInboxContent() {
     useEffect(reload, [mailboxUid]);
     async function handleAdd(e) {
         e.preventDefault();
-        const senderAddress = newSender.trim();
+        // Lowercased to match restapi's own `normalizeAddress()` - what gets sent is exactly what gets
+        // stored and matched against, rather than relying on the server to silently rewrite it.
+        const senderAddress = newSender.trim().toLowerCase();
         if (!senderAddress) {
             return;
         }

package/dist/apps/www/settings/privacy/index.js

@@ -17,21 +17,52 @@ const NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]
 function importFormatFromFilename(filename) {
     return filename.toLowerCase().endsWith(".pst") ? "pst" : "mbox";
 }
+/** Request statuses still waiting or running - shown as a neutral in-progress badge, never as success. Includes
+ * restapi's `processing` (exports/imports) and `in_progress` (an erasure that is running). */
+const IN_PROGRESS_STATUSES = new Set(["pending", "processing", "in_progress"]);
 function statusBadgeClass(status) {
     if (status === "failed" || status === "denied")
         return "bg-danger-bg text-danger";
-    if (status === "pending" || status === "processing")
+    if (IN_PROGRESS_STATUSES.has(status))
         return "bg-surface-alt text-text-muted";
     return "bg-success text-white";
 }
+/** A status as shown on its badge (`in_progress` -> `in progress`). */
+function statusLabel(status) {
+    return status.replace(/_/g, " ");
+}
 export default function SettingsPrivacyPage(props) {
-    return (_jsx(SettingsShell, { ...props, active: "privacy", children: _jsx(PrivacyContent, {}) }));
+    return (_jsx(SettingsShell, { ...props, active: "privacy", children: _jsx(PrivacyContent, { userUid: props.userUid }) }));
+}
+function PrivacyContent({ userUid }) {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // Data export, account erasure, and (for a non-admin) mail import all act on the *caller's own*
+    // mailbox server-side - none of these requests carries a mailbox a regular user may choose, so
+    // restapi resolves "own mailbox" itself with an unordered lookup by owner. That is only unambiguous
+    // when the caller owns exactly one mailbox, so all three are only offered while the switcher is on
+    // that single owned mailbox, and name it explicitly. (Import on any other mailbox would always be
+    // rejected: its destination folder wouldn't belong to the mailbox the server resolved.)
+    const selected = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const ownedMailboxes = mailboxes.filter((mb) => mb.ownerUserUid !== undefined && mb.ownerUserUid === userUid);
+    const ownMailbox = ownedMailboxes.length === 1 ? ownedMailboxes[0] : undefined;
+    const selectedIsOwn = selected.uid === ownMailbox?.uid;
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Privacy & Data" }), _jsx("p", { className: "text-sm text-text-muted", children: "Export or manage the data associated with this mailbox." })] }), selectedIsOwn ? (_jsxs(_Fragment, { children: [_jsx(ExportSection, { mailboxUid: mailboxUid, mailboxLabel: `${selected.displayName} (${selected.primarySmtpAddress})` }), _jsx(ImportSection, { mailboxUid: mailboxUid }), _jsx(ErasureSection, { mailboxLabel: `${selected.displayName} (${selected.primarySmtpAddress})` })] })) : (_jsx(OwnMailboxOnlyNotice, { ownedMailboxCount: ownedMailboxes.length, ownMailboxLabel: ownMailbox && `${ownMailbox.displayName} (${ownMailbox.primarySmtpAddress})` }))] }) }));
 }
-function PrivacyContent() {
-    const { mailboxUid } = useSettingsShell();
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Privacy & Data" }), _jsx("p", { className: "text-sm text-text-muted", children: "Export or manage the data associated with this mailbox." })] }), _jsx(ExportSection, { mailboxUid: mailboxUid }), _jsx(ImportSection, { mailboxUid: mailboxUid }), _jsx(ErasureSection, {})] }) }));
+function OwnMailboxOnlyNotice({ ownedMailboxCount, ownMailboxLabel }) {
+    let detail;
+    if (ownMailboxLabel) {
+        detail = `Switch to ${ownMailboxLabel} to manage them.`;
+    }
+    else if (ownedMailboxCount > 1) {
+        detail =
+            "You own more than one mailbox, so which one these would apply to can't be determined here. Ask an administrator to export, import, or erase data for a specific mailbox.";
+    }
+    else {
+        detail = "You don't have a mailbox of your own to manage here.";
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Export, import, or delete my data" }), _jsxs("p", { className: "text-xs text-text-muted", children: ["Exporting your data, importing mail, and deleting your account only apply to your own mailbox, not one shared with you. ", detail] })] }));
 }
-function ExportSection({ mailboxUid }) {
+function ExportSection({ mailboxUid, mailboxLabel }) {
     const [requests, setRequests] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
@@ -46,17 +77,18 @@ function ExportSection({ mailboxUid }) {
         const seq = ++loadSeq.current;
         return listExportRequests()
             .then((data) => {
-            if (seq === loadSeq.current)
+            if (seq === loadSeq.current) {
                 setRequests(data);
+            }
         })
             .catch((err) => {
-            if (seq === loadSeq.current)
+            if (seq === loadSeq.current) {
                 setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your export requests.");
+            }
         });
     }
     useEffect(() => {
-        loadRequests().finally(() => setLoading(false));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        void loadRequests().finally(() => setLoading(false));
     }, [mailboxUid]);
     async function handleCreate(e) {
         e.preventDefault();
@@ -73,11 +105,12 @@ function ExportSection({ mailboxUid }) {
             setCreating(false);
         }
     }
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Export my data" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Requests a copy of this mailbox\u2019s messages, contacts, calendar, tasks, and notes. This runs in the background and can take a few minutes \u2014 check back here for a download link once it\u2019s ready." }), _jsxs("form", { onSubmit: handleCreate, className: "flex items-end gap-3 mb-5", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Format" }), _jsxs("select", { "aria-label": "Export format", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: format, onChange: (e) => setFormat(e.target.value), children: [_jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "mbox", children: "Mbox" })] })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: creating, disabled: creating, children: "Request export" })] }), createError && _jsx(Alert, { children: createError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No export requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status }), request.status === "ready" && (_jsx("a", { href: exportRequestDownloadUrl(request.uid), className: "text-primary-dark hover:underline font-medium", children: "Download" }))] })] }, request.uid))) }))] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Export my data" }), _jsxs("p", { className: "text-xs text-text-muted mb-3", children: ["Requests a copy of ", _jsx("strong", { children: mailboxLabel }), "\u2019s messages, contacts, calendar, tasks, and notes. This runs in the background and can take a few minutes \u2014 check back here for a download link once it\u2019s ready."] }), _jsxs("form", { onSubmit: handleCreate, className: "flex items-end gap-3 mb-5", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Format" }), _jsxs("select", { "aria-label": "Export format", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: format, onChange: (e) => setFormat(e.target.value), children: [_jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "mbox", children: "Mbox" })] })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: creating, disabled: creating, children: "Request export" })] }), createError && _jsx(Alert, { children: createError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No export requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: statusLabel(request.status) }), request.status === "ready" && (_jsx("a", { href: exportRequestDownloadUrl(request.uid), className: "text-primary-dark hover:underline font-medium", children: "Download" }))] })] }, request.uid))) }))] }));
 }
 function ImportSection({ mailboxUid }) {
     const [folders, setFolders] = useState([]);
     const [targetFolderUid, setTargetFolderUid] = useState("");
+    const [foldersError, setFoldersError] = useState(null);
     const [requests, setRequests] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
@@ -92,26 +125,29 @@ function ImportSection({ mailboxUid }) {
         const seq = ++loadSeq.current;
         return listImportRequests()
             .then((data) => {
-            if (seq === loadSeq.current)
+            if (seq === loadSeq.current) {
                 setRequests(data);
+            }
         })
             .catch((err) => {
-            if (seq === loadSeq.current)
+            if (seq === loadSeq.current) {
                 setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your import requests.");
+            }
         });
     }
     useEffect(() => {
         // Only reachable once mailboxUid is resolved - SettingsShell never renders this page's children
         // until then, the same invariant every other settings page in this codebase already relies on.
-        Promise.all([
-            listFolders(mailboxUid).then((all) => {
+        void Promise.all([
+            listFolders(mailboxUid)
+                .then((all) => {
                 const mailFolders = all.filter((f) => !NON_MAIL_FOLDER_TYPES.has(f.type));
                 setFolders(mailFolders);
                 setTargetFolderUid(mailFolders[0]?.uid ?? "");
-            }),
+            })
+                .catch((err) => setFoldersError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders.")),
             loadRequests(),
         ]).finally(() => setLoading(false));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mailboxUid]);
     function handleFileChange(e) {
         const file = e.target.files?.[0];
@@ -126,9 +162,9 @@ function ImportSection({ mailboxUid }) {
             .catch((err) => setUploadError(err instanceof ApiRequestError ? err.message : "Could not upload this file."))
             .finally(() => setUploading(false));
     }
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Import mail" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Uploads an Mbox or PST archive and imports every message it contains into the folder you choose below. This runs in the background \u2014 check back here for its progress." }), folders.length > 0 && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm mb-3 max-w-xs", children: [_jsx("span", { className: "font-semibold", children: "Destination folder" }), _jsx("select", { "aria-label": "Destination folder", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: folders.map((folder) => (_jsx("option", { value: folder.uid, children: folder.name }, folder.uid))) })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mb-3", loading: uploading, disabled: uploading || !targetFolderUid, onClick: () => fileInputRef.current?.click(), children: "Upload Mbox or PST file" }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".mbox,.pst", "aria-label": "Upload mail archive", className: "hidden", onChange: handleFileChange }), uploadError && _jsx(Alert, { children: uploadError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No import requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "completed" && (_jsxs("span", { className: "text-text-muted", children: [" ", "\u2014 ", request.importedCount ?? 0, " imported", request.failedCount ? `, ${request.failedCount} failed` : ""] })), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status })] }, request.uid))) }))] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Import mail" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Uploads an Mbox or PST archive and imports every message it contains into the folder you choose below. This runs in the background \u2014 check back here for its progress." }), folders.length > 0 && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm mb-3 max-w-xs", children: [_jsx("span", { className: "font-semibold", children: "Destination folder" }), _jsx("select", { "aria-label": "Destination folder", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: folders.map((folder) => (_jsx("option", { value: folder.uid, children: folder.name }, folder.uid))) })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mb-3", loading: uploading, disabled: uploading || !targetFolderUid, onClick: () => fileInputRef.current?.click(), children: "Upload Mbox or PST file" }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".mbox,.pst", "aria-label": "Upload mail archive", className: "hidden", onChange: handleFileChange }), foldersError && _jsx(Alert, { children: foldersError }), uploadError && _jsx(Alert, { children: uploadError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No import requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "completed" && (_jsxs("span", { className: "text-text-muted", children: [" ", "\u2014 ", request.importedCount ?? 0, " imported", request.failedCount ? `, ${request.failedCount} failed` : ""] })), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: statusLabel(request.status) })] }, request.uid))) }))] }));
 }
-function ErasureSection() {
+function ErasureSection({ mailboxLabel }) {
     const [requests, setRequests] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
@@ -141,8 +177,7 @@ function ErasureSection() {
             .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your erasure requests."));
     }
     useEffect(() => {
-        loadRequests().finally(() => setLoading(false));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        void loadRequests().finally(() => setLoading(false));
     }, []);
     const hasPending = requests.some((request) => request.status === "pending");
     function closeConfirm() {
@@ -163,5 +198,5 @@ function ErasureSection() {
             setCreating(false);
         }
     }
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Delete my account" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Permanently and irreversibly deletes this mailbox and everything in it, once a compliance administrator reviews and approves the request. There is no way to cancel a request or undo the deletion once it runs." }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [requests.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2 mb-3", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [new Date(request.dateCreated).toLocaleString(), request.status === "denied" && request.reason && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.reason] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status })] }, request.uid))) })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", disabled: hasPending, onClick: () => setConfirming(true), children: "Request account erasure" })] })), _jsxs(Modal, { open: confirming, onClose: closeConfirm, title: "Delete my account", children: [_jsx("p", { className: "text-sm mb-5", children: "This permanently deletes this mailbox and everything in it \u2014 messages, contacts, calendar, tasks, and notes \u2014 once approved. This cannot be undone and cannot be cancelled once submitted." }), createError && _jsx(Alert, { children: createError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: creating, onClick: closeConfirm, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: creating, disabled: creating, onClick: handleConfirm, children: "Request erasure" })] })] })] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Delete my account" }), _jsxs("p", { className: "text-xs text-text-muted mb-3", children: ["Permanently and irreversibly deletes ", _jsx("strong", { children: mailboxLabel }), " and everything in it, once a compliance administrator reviews and approves the request. There is no way to cancel a request or undo the deletion once it runs."] }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [requests.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2 mb-3", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [new Date(request.dateCreated).toLocaleString(), request.status === "denied" && request.reason && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.reason] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: statusLabel(request.status) })] }, request.uid))) })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", disabled: hasPending, onClick: () => setConfirming(true), children: "Request account erasure" })] })), _jsxs(Modal, { open: confirming, onClose: closeConfirm, title: "Delete my account", children: [_jsxs("p", { className: "text-sm mb-5", children: ["This permanently deletes ", mailboxLabel, " and everything in it \u2014 messages, contacts, calendar, tasks, and notes \u2014 once approved. This cannot be undone and cannot be cancelled once submitted."] }), createError && _jsx(Alert, { children: createError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: creating, onClick: closeConfirm, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: creating, disabled: creating, onClick: handleConfirm, children: "Request erasure" })] })] })] }));
 }

package/dist/apps/www/settings/read-receipts/index.js

@@ -18,9 +18,13 @@ function ReadReceiptsContent() {
     // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
     const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
     const [alwaysRequestReceiptInternal, setAlwaysRequestReceiptInternal] = useState(mailbox.alwaysRequestReceiptInternal ?? true);
+    const [alwaysRequestReceiptFederated, setAlwaysRequestReceiptFederated] = useState(mailbox.alwaysRequestReceiptFederated ?? false);
     const [alwaysRequestReceiptExternal, setAlwaysRequestReceiptExternal] = useState(mailbox.alwaysRequestReceiptExternal ?? false);
     const [autoSendReceiptsInternal, setAutoSendReceiptsInternal] = useState(mailbox.autoSendReceiptsInternal ?? true);
+    const [autoSendReceiptsFederated, setAutoSendReceiptsFederated] = useState(mailbox.autoSendReceiptsFederated ?? false);
     const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
+    // See auto-reply/index.tsx's identical note - later saves must carry the version the previous save returned.
+    const [version, setVersion] = useState(mailbox.version);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
@@ -30,14 +34,17 @@ function ReadReceiptsContent() {
         setSaved(false);
         setSaving(true);
         try {
-            await updateMailbox({
+            const updated = await updateMailbox({
                 uid: mailbox.uid,
-                version: mailbox.version,
+                version,
                 alwaysRequestReceiptInternal,
+                alwaysRequestReceiptFederated,
                 alwaysRequestReceiptExternal,
                 autoSendReceiptsInternal,
+                autoSendReceiptsFederated,
                 autoSendReceiptsExternal,
             });
+            setVersion(updated.version);
             setSaved(true);
         }
         catch (err) {
@@ -47,5 +54,5 @@ function ReadReceiptsContent() {
             setSaving(false);
         }
     }
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Read Receipts" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it responds to a receipt requested of it. A per-message \u201CRequest a read receipt\u201D checkbox in Compose always overrides the request-side settings below for that one message." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Request receipts when sending" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptInternal, onChange: (e) => setAlwaysRequestReceiptInternal(e.target.checked) }), "From internal recipients (mail to this organization)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptExternal, onChange: (e) => setAlwaysRequestReceiptExternal(e.target.checked) }), "From external recipients"] })] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Respond automatically to requests" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsInternal, onChange: (e) => setAutoSendReceiptsInternal(e.target.checked) }), "From internal senders"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsExternal, onChange: (e) => setAutoSendReceiptsExternal(e.target.checked) }), "From external senders"] }), _jsx("p", { className: "text-xs text-text-muted", children: "Unchecked means a request from that sender waits in your Inbox for you to send or decline it explicitly." })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Read Receipts" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it responds to a receipt requested of it. A per-message \u201CRequest a read receipt\u201D checkbox in Compose always overrides the request-side settings below for that one message." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Request receipts when sending" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptInternal, onChange: (e) => setAlwaysRequestReceiptInternal(e.target.checked) }), "From internal recipients (mail to this organization)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptFederated, onChange: (e) => setAlwaysRequestReceiptFederated(e.target.checked) }), "From federated recipients (partner organizations)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptExternal, onChange: (e) => setAlwaysRequestReceiptExternal(e.target.checked) }), "From external recipients"] })] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Respond automatically to requests" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsInternal, onChange: (e) => setAutoSendReceiptsInternal(e.target.checked) }), "From internal senders"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsFederated, onChange: (e) => setAutoSendReceiptsFederated(e.target.checked) }), "From federated senders (partner organizations)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsExternal, onChange: (e) => setAutoSendReceiptsExternal(e.target.checked) }), "From external senders"] }), _jsx("p", { className: "text-xs text-text-muted", children: "Unchecked means a request from that sender waits in your Inbox for you to send or decline it explicitly." })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
 }

package/dist/apps/www/settings/sharing/index.js

@@ -0,0 +1,124 @@
+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 { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMailboxAccess, lookupMailboxOwnerByEmail, removeMailboxAccess, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+const ROLE_LABELS = { viewer: "Can view", manager: "Can manage" };
+export default function SettingsSharingPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "sharing", children: _jsx(SharingContent, {}) }));
+}
+/**
+ * Manages who else can access whichever mailbox Settings is currently scoped to (the ambient mailbox from
+ * `useSettingsShell()`'s own switcher, which already lists every mailbox the caller can reach, shared ones
+ * included) - not just for shared/ownerless mailboxes specifically, matching every other settings page's
+ * own mailbox-agnostic design. A single grant here already cascades to that mailbox's calendar/contacts/
+ * tasks/mail folders (see `@rapidmx/restapi`'s `BaseMailboxAccessRoute` doc comment), so there is nothing
+ * else to configure per data type.
+ */
+function SharingContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const [members, setMembers] = useState([]);
+    const [status, setStatus] = useState("loading");
+    const [error, setError] = useState(null);
+    const [emailInput, setEmailInput] = useState("");
+    const [newRole, setNewRole] = useState("viewer");
+    const [adding, setAdding] = useState(false);
+    const [addError, setAddError] = useState(null);
+    const [pendingRoleChange, setPendingRoleChange] = useState(null);
+    const [removeTarget, setRemoveTarget] = useState(null);
+    const [removing, setRemoving] = useState(false);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved (a mailbox-less caller
+    // gets `<MailboxProvisioning />` instead) - same established precedent as the Labels/Focused Inbox
+    // settings pages, so none of the handlers below need their own `!mailboxUid` guard.
+    function reload() {
+        setStatus("loading");
+        setError(null);
+        listMailboxAccess(mailboxUid)
+            .then((result) => {
+            setMembers(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            // A 403 here is the live, server-verified "can this caller manage this mailbox's sharing"
+            // signal - the same permission threshold (ACLAction.UPDATE) this route itself requires, so
+            // no separate probe call is needed to decide which state to render.
+            if (err instanceof ApiRequestError && err.status === 403) {
+                setStatus("forbidden");
+                return;
+            }
+            setError(err instanceof ApiRequestError ? err.message : "Could not load sharing settings.");
+            setStatus("error");
+        });
+    }
+    useEffect(reload, [mailboxUid]);
+    async function handleAdd(e) {
+        e.preventDefault();
+        const email = emailInput.trim();
+        if (!email) {
+            return;
+        }
+        setAddError(null);
+        setAdding(true);
+        try {
+            const found = await lookupMailboxOwnerByEmail(email);
+            if (!found) {
+                setAddError("No one found with that email on this platform.");
+                return;
+            }
+            await setMailboxAccess(mailboxUid, found.userUid, newRole);
+            setEmailInput("");
+            setNewRole("viewer");
+            reload();
+        }
+        catch (err) {
+            setAddError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        }
+        finally {
+            setAdding(false);
+        }
+    }
+    async function handleRoleChange(userOrRoleId, role) {
+        setPendingRoleChange(userOrRoleId);
+        setError(null);
+        try {
+            await setMailboxAccess(mailboxUid, userOrRoleId, role);
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not update this member's role.");
+        }
+        finally {
+            setPendingRoleChange(null);
+        }
+    }
+    function closeRemoveModal() {
+        setRemoveTarget(null);
+    }
+    async function handleRemove() {
+        // Only reachable from the confirm modal's own "Remove" button, and `Modal` renders nothing at all
+        // unless `removeTarget` is set, so `removeTarget` is always non-null here.
+        setRemoving(true);
+        setError(null);
+        try {
+            await removeMailboxAccess(mailboxUid, removeTarget.userOrRoleId);
+            setRemoveTarget(null);
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not remove this member.");
+        }
+        finally {
+            setRemoving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Sharing" }), _jsxs("p", { className: "text-sm text-text-muted", children: ["Manage who else can access ", mailbox?.displayName ?? "this mailbox", "\u2019s mail, calendar, contacts, and tasks. Granting access here covers all of it at once - there\u2019s nothing else to configure per data type."] })] }), status === "loading" && _jsx(SkeletonList, { count: 3 }), status === "forbidden" && (_jsx(Alert, { children: "You don\u2019t have permission to manage sharing for this mailbox." })), status === "error" && error && _jsx(Alert, { children: error }), status === "ready" && (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "People with access" }), members.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No one else has access to this mailbox yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: members.map((member) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsx("span", { className: "truncate", children: member.userOrRoleId }), _jsxs("span", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("select", { "aria-label": `Role for ${member.userOrRoleId}`, className: "text-sm border border-border rounded-sm py-1 px-2 bg-surface", value: member.role, disabled: pendingRoleChange === member.userOrRoleId, onChange: (e) => handleRoleChange(member.userOrRoleId, e.target.value), children: [member.role === "custom" && (_jsx("option", { value: "custom", disabled: true, children: "Custom access" })), Object.keys(ROLE_LABELS).map((role) => (_jsx("option", { value: role, children: ROLE_LABELS[role] }, role)))] }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto text-danger", onClick: () => setRemoveTarget(member), children: "Remove" })] })] }, member.userOrRoleId))) }))] }), _jsxs("form", { onSubmit: handleAdd, className: "flex flex-col gap-2", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Add someone" }), addError && _jsx(Alert, { children: addError }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", "aria-label": "Email address", placeholder: "Email address", className: "flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: emailInput, onChange: (e) => setEmailInput(e.target.value), disabled: adding }), _jsx("select", { "aria-label": "Role to grant", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: newRole, onChange: (e) => setNewRole(e.target.value), disabled: adding, children: Object.keys(ROLE_LABELS).map((role) => (_jsx("option", { value: role, children: ROLE_LABELS[role] }, role))) }), _jsx(Button, { type: "submit", loading: adding, disabled: adding, className: "!w-auto", children: "Add" })] })] })] })), _jsxs(Modal, { open: !!removeTarget, onClose: closeRemoveModal, title: "Remove access", children: [_jsxs("p", { className: "text-sm mb-5", children: [removeTarget?.userOrRoleId, " will no longer be able to access ", mailbox?.displayName ?? "this mailbox", "."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: removing, onClick: closeRemoveModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: removing, disabled: removing, onClick: handleRemove, children: "Remove" })] })] })] }) }));
+}