@rapidmx/web-client 0.2.0

package/dist/apps/www/settings/booking-types/[uid].js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { deleteBookingType, getBookingType, updateBookingType, } from "@rapidmx/react-shared/booking/bookingApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import AvailabilityEditor from "../../../shared/components/booking/AvailabilityEditor.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";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.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 default function BookingTypeDetailPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(BookingTypeDetailContent, { uid: props.params.uid }) }));
+}
+function BookingTypeDetailContent({ uid }) {
+    const { mailboxUid } = useSettingsShell();
+    const [bookingType, setBookingType] = useState(null);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [hostDisplayName, setHostDisplayName] = useState("");
+    const [durationMinutes, setDurationMinutes] = useState(30);
+    const [timezone, setTimezone] = useState("");
+    const [availability, setAvailability] = useState([]);
+    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
+    const [bookingWindowDays, setBookingWindowDays] = useState(30);
+    const [requiresApproval, setRequiresApproval] = useState(false);
+    const [enabled, setEnabled] = useState(true);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getBookingType(uid)
+            .then((bt) => {
+            setBookingType(bt);
+            setName(bt.name);
+            setDescription(bt.description ?? "");
+            setHostDisplayName(bt.hostDisplayName);
+            setDurationMinutes(bt.durationMinutes);
+            setTimezone(bt.timezone);
+            setAvailability(bt.availability);
+            setMinimumNoticeMinutes(bt.minimumNoticeMinutes);
+            setBookingWindowDays(bt.bookingWindowDays);
+            setRequiresApproval(bt.requiresApproval);
+            setEnabled(bt.enabled);
+        })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this booking link."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateBookingType({
+                uid: bookingType.uid,
+                version: bookingType.version,
+                name,
+                description: description.trim() || undefined,
+                hostDisplayName,
+                durationMinutes,
+                timezone,
+                availability,
+                minimumNoticeMinutes,
+                bookingWindowDays,
+                requiresApproval,
+                enabled,
+            });
+            setBookingType(updated);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this booking link.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function handleCopy(value) {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Clipboard access can be denied by the browser — the value is still selectable/copyable by hand.
+        }
+    }
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteBookingType(bookingType.uid, bookingType.version);
+            window.location.href = `/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+        }
+        catch (err) {
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this booking link.");
+            setDeleting(false);
+        }
+    }
+    if (loading) {
+        return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error || !bookingType) {
+        // `error` is always set whenever `bookingType` is falsy here: the load effect above destructures
+        // every field off the resolved value directly (`bt.name`, `bt.hostDisplayName`, ...), so a
+        // successful-but-empty response throws into `.catch()` — which sets `error` — before this
+        // component ever renders past the `loading` guard above. `!bookingType` alone (with `error` still
+        // `null`) is therefore unreachable, unlike e.g. `messages/[uid].tsx`'s identical-looking check,
+        // which stores its fetched value whole rather than destructuring it.
+        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: error }) }));
+    }
+    // `bookingType` only ever becomes non-null via the client-only fetch above, so by the time this line
+    // runs `window` is always defined — the `!bookingType` early return just above covers every real SSR
+    // pass, where `bookingType` is still `null`.
+    const publicUrl = `${window.location.origin}/book/${encodeURIComponent(bookingType.slug)}`;
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-2xl", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [_jsxs("div", { children: [_jsx("a", { href: `/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All booking links" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: bookingType.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete" })] }), _jsxs("div", { className: "flex items-center gap-2 mb-5", children: [_jsx("code", { className: "flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap", children: publicUrl }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => handleCopy(publicUrl), children: copied ? "Copied" : "Copy" })] }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm mb-3", children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked) }), "Enabled (publicly bookable)"] }), _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(FormField, { label: "Description (optional)", htmlFor: "description", children: _jsx("textarea", { id: "description", className: INPUT_CLASS, rows: 2, value: description, onChange: (e) => setDescription(e.target.value) }) }), _jsx(FormField, { label: "Host name shown to visitors", htmlFor: "hostDisplayName", children: _jsx("input", { id: "hostDisplayName", type: "text", className: INPUT_CLASS, value: hostDisplayName, onChange: (e) => setHostDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Duration (minutes)", htmlFor: "durationMinutes", children: _jsx("input", { id: "durationMinutes", type: "number", min: 1, className: INPUT_CLASS, value: durationMinutes, onChange: (e) => setDurationMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Minimum notice (minutes)", htmlFor: "minimumNoticeMinutes", children: _jsx("input", { id: "minimumNoticeMinutes", type: "number", min: 0, className: INPUT_CLASS, value: minimumNoticeMinutes, onChange: (e) => setMinimumNoticeMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Booking window (days ahead)", htmlFor: "bookingWindowDays", children: _jsx("input", { id: "bookingWindowDays", type: "number", min: 1, className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(Number(e.target.value)) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm my-3", children: [_jsx("input", { type: "checkbox", checked: requiresApproval, onChange: (e) => setRequiresApproval(e.target.checked) }), "Require my approval before confirming a booking"] }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Weekly availability" }), _jsx(AvailabilityEditor, { value: availability, onChange: setAvailability })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] }), _jsxs(Modal, { open: confirmingDelete, onClose: () => setConfirmingDelete(false), title: "Delete booking link", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Are you sure you want to delete ", _jsx("strong", { children: bookingType.name }), "? Its public link will stop working immediately. This cannot be undone."] }), deleteError && _jsx(Alert, { children: deleteError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: deleting, onClick: () => setConfirmingDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: deleting, disabled: deleting, onClick: handleDelete, children: "Delete" })] })] })] }) }));
+}

package/dist/apps/www/settings/booking-types/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { listBookingTypes } from "@rapidmx/react-shared/booking/bookingApi.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";
+export default function SettingsBookingTypesPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(BookingTypesContent, {}) }));
+}
+function BookingTypesContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [bookingTypes, setBookingTypes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/filters/index.tsx`.
+    useEffect(() => {
+        listBookingTypes(mailboxUid)
+            .then(setBookingTypes)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load your booking links."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Booking Links" }), _jsx("a", { href: `/settings/booking-types/new?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New booking link" }) })] }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Share a link and let anyone pick a real open slot on your calendar \u2014 no account needed on their end." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : bookingTypes.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No booking links yet." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Link", "Duration", "Enabled", ""].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: bookingTypes.map((bookingType) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: bookingType.name }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: ["/book/", bookingType.slug] }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [bookingType.durationMinutes, " min"] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: bookingType.enabled ? "Yes" : "No" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-right", children: _jsx("a", { href: `/settings/booking-types/${encodeURIComponent(bookingType.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-primary-dark hover:underline font-medium", children: "View" }) })] }, bookingType.uid))) })] }) }))] }) }));
+}

package/dist/apps/www/settings/booking-types/new/index.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import { createBookingType } from "@rapidmx/react-shared/booking/bookingApi.js";
+import SettingsShell, { useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
+import AvailabilityEditor from "../../../../shared/components/booking/AvailabilityEditor.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 default function NewBookingTypePage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(NewBookingTypeForm, {}) }));
+}
+function NewBookingTypeForm() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // Same established non-null pattern as `apps/www/settings/filters/new/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const [calendarFolderUid, setCalendarFolderUid] = useState(null);
+    const [folderError, setFolderError] = useState(null);
+    const [slug, setSlug] = useState("");
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [hostDisplayName, setHostDisplayName] = useState(mailbox.displayName);
+    const [durationMinutes, setDurationMinutes] = useState(30);
+    const [timezone, setTimezone] = useState(mailbox.timezone);
+    const [availability, setAvailability] = useState([]);
+    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
+    const [bookingWindowDays, setBookingWindowDays] = useState(30);
+    const [requiresApproval, setRequiresApproval] = useState(false);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        listFolders(mailboxUid)
+            .then((folders) => {
+            const calendar = folders.find((f) => f.type === "calendar");
+            if (!calendar) {
+                setFolderError("This mailbox has no Calendar folder yet.");
+                return;
+            }
+            setCalendarFolderUid(calendar.uid);
+        })
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
+    }, [mailboxUid]);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!slug.trim() || !name.trim() || !hostDisplayName.trim()) {
+            setError("Slug, name, and host name are all required.");
+            return;
+        }
+        if (!calendarFolderUid) {
+            setError("This mailbox has no Calendar folder yet.");
+            return;
+        }
+        setSaving(true);
+        try {
+            const created = await createBookingType({
+                mailboxUid: mailboxUid,
+                calendarFolderUid,
+                slug: slug.trim(),
+                name: name.trim(),
+                description: description.trim() || undefined,
+                hostDisplayName: hostDisplayName.trim(),
+                durationMinutes,
+                timezone,
+                availability,
+                minimumNoticeMinutes,
+                bookingWindowDays,
+                requiresApproval,
+            });
+            window.location.href = `/settings/booking-types/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create this booking link.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-2xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "New booking link" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Anyone with the link can pick an open slot from your live availability below \u2014 no account needed on their end." }), error && _jsx(Alert, { children: error }), folderError && _jsx(Alert, { children: folderError }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", 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: "30 Minute Intro Call" }) }), _jsx(FormField, { label: "Slug (used in the public link)", htmlFor: "slug", children: _jsx("input", { id: "slug", type: "text", className: INPUT_CLASS, value: slug, onChange: (e) => setSlug(e.target.value), placeholder: "intro-call" }) }), _jsx(FormField, { label: "Description (optional)", htmlFor: "description", children: _jsx("textarea", { id: "description", className: INPUT_CLASS, rows: 2, value: description, onChange: (e) => setDescription(e.target.value) }) }), _jsx(FormField, { label: "Host name shown to visitors", htmlFor: "hostDisplayName", children: _jsx("input", { id: "hostDisplayName", type: "text", className: INPUT_CLASS, value: hostDisplayName, onChange: (e) => setHostDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Duration (minutes)", htmlFor: "durationMinutes", children: _jsx("input", { id: "durationMinutes", type: "number", min: 1, className: INPUT_CLASS, value: durationMinutes, onChange: (e) => setDurationMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "America/New_York" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Minimum notice (minutes)", htmlFor: "minimumNoticeMinutes", children: _jsx("input", { id: "minimumNoticeMinutes", type: "number", min: 0, className: INPUT_CLASS, value: minimumNoticeMinutes, onChange: (e) => setMinimumNoticeMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Booking window (days ahead)", htmlFor: "bookingWindowDays", children: _jsx("input", { id: "bookingWindowDays", type: "number", min: 1, className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(Number(e.target.value)) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm my-3", children: [_jsx("input", { type: "checkbox", checked: requiresApproval, onChange: (e) => setRequiresApproval(e.target.checked) }), "Require my approval before confirming a booking"] }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Weekly availability" }), _jsx(AvailabilityEditor, { value: availability, onChange: setAvailability })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create" }) })] })] }) }));
+}

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { 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 { 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";
+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 default function MailFilterDetailPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "filters", children: _jsx(MailFilterDetailContent, { uid: props.params.uid }) }));
+}
+function MailFilterDetailContent({ uid }) {
+    const { mailboxUid } = useSettingsShell();
+    const [original, setOriginal] = useState(null);
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState(null);
+    const [folders, setFolders] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    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]);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMailFilterRule(uid)
+            .then((loaded) => {
+            setOriginal(loaded);
+            if (loaded) {
+                setName(loaded.name);
+                setRule({
+                    enabled: loaded.enabled,
+                    sequence: loaded.sequence,
+                    stopProcessingRules: loaded.stopProcessingRules,
+                    conditions: loaded.conditions,
+                    actions: loaded.actions,
+                });
+            }
+        })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this mail filter."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+    // Only ever invoked from the form below, which itself only renders once `original`/`rule` are
+    // loaded (the early returns above cover every other state) — the non-null assertions reflect that
+    // real invariant, matching `TransportRuleDetailContent.handleSubmit`'s identical pattern.
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        setSaving(true);
+        setSaved(false);
+        try {
+            const updated = await updateMailFilterRule({
+                uid: original.uid,
+                version: original.version,
+                name: name.trim(),
+                ...rule,
+            });
+            setOriginal(updated);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this mail filter.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    if (loading || folders === null) {
+        return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error && !original) {
+        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: error }) }));
+    }
+    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" }) })] })] }) }));
+}

package/dist/apps/www/settings/filters/_mailFilterRuleConfig.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FIELD_INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** Folder types a mail filter can't meaningfully move/copy a message into — a mailbox's single
+ * well-known `calendar`/`contacts`/`tasks`/`notes` folder holds a different entity type entirely, not
+ * messages. */
+const NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]);
+export const MAIL_FILTER_CONDITION_FIELDS = [
+    { key: "fromContains", label: "From contains", kind: "list" },
+    { key: "subjectContains", label: "Subject contains", kind: "list" },
+    { key: "bodyContains", label: "Body contains", kind: "list" },
+    { key: "toCcContains", label: "Any To/Cc recipient equals", kind: "list" },
+    { key: "hasAttachment", label: "Has an attachment", kind: "boolean" },
+    {
+        key: "importance",
+        label: "Importance",
+        kind: "select",
+        options: [
+            { value: "low", label: "Low" },
+            { value: "normal", label: "Normal" },
+            { value: "high", label: "High" },
+        ],
+    },
+];
+/**
+ * Builds the mail-filter action-type registry for `RuleBuilder`, closing over `folders` so the
+ * move/copy-to-folder actions can render a real folder picker. `RuleBuilder`'s own `render()` contract
+ * is synchronous, so this resolves `folders` once up front (the caller already loads them for the page
+ * itself) rather than each action row fetching independently.
+ */
+export function buildMailFilterActionTypes(folders) {
+    const destinationFolders = folders.filter((f) => !NON_MAIL_FOLDER_TYPES.has(f.type));
+    const folderSelect = (action, onChange) => (_jsxs("select", { "aria-label": "Destination folder", className: FIELD_INPUT_CLASS, value: action.folderUid ?? "", onChange: (e) => onChange({ ...action, folderUid: e.target.value }), children: [_jsx("option", { value: "", children: "Choose a folder\u2026" }), destinationFolders.map((folder) => (_jsx("option", { value: folder.uid, children: folder.name }, folder.uid)))] }));
+    return [
+        {
+            value: "move_to_folder",
+            label: "Move to folder",
+            createDefault: () => ({ type: "move_to_folder", folderUid: "" }),
+            render: folderSelect,
+        },
+        {
+            value: "copy_to_folder",
+            label: "Copy to folder",
+            createDefault: () => ({ type: "copy_to_folder", folderUid: "" }),
+            render: folderSelect,
+        },
+        {
+            value: "delete",
+            label: "Delete the message",
+            createDefault: () => ({ type: "delete" }),
+            render: () => null,
+        },
+        {
+            value: "mark_as_read",
+            label: "Mark as read",
+            createDefault: () => ({ type: "mark_as_read" }),
+            render: () => null,
+        },
+        {
+            value: "forward",
+            label: "Forward to",
+            createDefault: () => ({ type: "forward", forwardTo: "" }),
+            render: (action, onChange) => (_jsx("input", { type: "email", "aria-label": "Forward to address", className: FIELD_INPUT_CLASS, placeholder: "assistant@example.com", value: action.forwardTo ?? "", onChange: (e) => onChange({ ...action, forwardTo: e.target.value }) })),
+        },
+    ];
+}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { listMailFilterRules } from "@rapidmx/react-shared/mail/mailFilterRulesApi.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";
+export default function SettingsFiltersPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "filters", children: _jsx(FiltersContent, {}) }));
+}
+function FiltersContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [rules, setRules] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listMailFilterRules(mailboxUid)
+            .then(setRules)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mail filters."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+    const sorted = [...rules].sort((a, b) => a.sequence - b.sequence);
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Mail Filters" }), _jsx("a", { href: `/settings/filters/new?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New filter" }) })] }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Applied in order once a message is verdicted safe to deliver, before it reaches your Inbox." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No mail filters yet." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Sequence", "Name", "Enabled", "Actions", ""].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: sorted.map((rule) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: rule.sequence }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: rule.name }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: rule.enabled ? "Yes" : "No" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: rule.actions.length }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-right", children: _jsx("a", { href: `/settings/filters/${encodeURIComponent(rule.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-primary-dark hover:underline font-medium", children: "View" }) })] }, rule.uid))) })] }) }))] }) }));
+}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { 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 { 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";
+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 default function NewMailFilterPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "filters", children: _jsx(NewMailFilterForm, {}) }));
+}
+function NewMailFilterForm() {
+    const { mailboxUid } = useSettingsShell();
+    const [folders, setFolders] = useState(null);
+    const [folderError, setFolderError] = useState(null);
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState({
+        enabled: true,
+        sequence: 0,
+        stopProcessingRules: false,
+        conditions: {},
+        actions: [],
+    });
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = 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(() => {
+        listFolders(mailboxUid)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
+    }, [mailboxUid]);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        setSaving(true);
+        try {
+            const created = await createMailFilterRule({ mailboxUid: mailboxUid, name: name.trim(), ...rule });
+            window.location.href = `/settings/filters/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the mail filter.");
+        }
+        finally {
+            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" }) })] })] }))] }) }));
+}

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { createFocusedInboxOverride, deleteFocusedInboxOverride, listFocusedInboxOverrides, } from "@rapidmx/react-shared/mail/focusedInboxOverridesApi.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";
+export default function SettingsFocusedInboxPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "focused-inbox", children: _jsx(FocusedInboxContent, {}) }));
+}
+function FocusedInboxContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [overrides, setOverrides] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [newSender, setNewSender] = useState("");
+    const [newClassifyAs, setNewClassifyAs] = useState("other");
+    function reload() {
+        setLoading(true);
+        setError(null);
+        // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same
+        // established non-null pattern as `apps/www/settings/filters/index.tsx`.
+        listFocusedInboxOverrides(mailboxUid)
+            .then(setOverrides)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load your Focused Inbox rules."))
+            .finally(() => setLoading(false));
+    }
+    useEffect(reload, [mailboxUid]);
+    async function handleAdd(e) {
+        e.preventDefault();
+        const senderAddress = newSender.trim();
+        if (!senderAddress) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            await createFocusedInboxOverride({ mailboxUid: mailboxUid, senderAddress, classifyAs: newClassifyAs });
+            setNewSender("");
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not add this rule.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function handleRemove(override) {
+        setSaving(true);
+        setError(null);
+        try {
+            await deleteFocusedInboxOverride(override.uid, override.version);
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not remove this rule.");
+        }
+        finally {
+            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: "Focused Inbox" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Mail from a sender listed here always goes to the matching half of your Inbox, overriding the automatic Focused/Other classification. Add one directly, or use \u201CAlways for this sender\u201D when moving a message." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("ul", { className: "flex flex-col gap-2 mb-4", children: [overrides.length === 0 && _jsx("li", { className: "text-sm text-text-muted", children: "No rules yet." }), overrides.map((override) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: override.senderAddress }), _jsxs("div", { className: "text-xs text-text-muted", children: ["Always ", override.classifyAs === "other" ? "Other" : "Focused"] })] }), _jsx("button", { type: "button", onClick: () => handleRemove(override), disabled: saving, className: "text-sm text-danger hover:underline disabled:opacity-55", children: "Remove" })] }, override.uid)))] })), _jsxs("form", { onSubmit: handleAdd, className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": "Sender address", value: newSender, onChange: (e) => setNewSender(e.target.value), placeholder: "sender@example.com", className: "flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary" }), _jsxs("select", { "aria-label": "Classify as", value: newClassifyAs, onChange: (e) => setNewClassifyAs(e.target.value), className: "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary", children: [_jsx("option", { value: "other", children: "Other" }), _jsx("option", { value: "focused", children: "Focused" })] }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Add" })] })] }) }));
+}