@rapidmx/web-client 0.2.0

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -0,0 +1,139 @@
+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 { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { useCompose } from "../compose/ComposeContext.js";
+const MailShellContext = createContext({ mailboxes: [], folders: [] });
+/** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
+export function useMailShell() {
+    return useContext(MailShellContext);
+}
+const FOLDER_LABELS = {
+    inbox: "Inbox",
+    sent_items: "Sent Items",
+    drafts: "Drafts",
+    outbox: "Outbox",
+    junk: "Junk Email",
+    deleted_items: "Deleted Items",
+};
+/** Well-known folders sort first, in Gmail/Outlook's conventional order; anything else (incl. `user`) sorts after, alphabetically. */
+const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "junk", "deleted_items"];
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see
+ * `CalendarShell`/`ContactsShell`/`TasksShell`), not Mail — `listFolders()` returns every well-known
+ * folder for the mailbox regardless of which app owns it, so Mail's own folder tree must filter down
+ * to just the mail ones itself, or those other apps' folders leak into this sidebar.
+ */
+const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
+function folderSortKey(folder) {
+    const idx = FOLDER_ORDER.indexOf(folder.type);
+    return idx === -1 ? FOLDER_ORDER.length : idx;
+}
+/**
+ * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
+ * `ComposeProvider` correctly: that provider is rendered *inside* the `AppShell` that `MailShell` itself
+ * returns, i.e. a descendant of `MailShell`, not an ancestor — a hook call made directly in `MailShell`'s
+ * own function body would see only whatever context exists *above* `MailShell`, never a provider one of
+ * its own descendants creates. This button, rendered as part of `AppShell`'s `children`, sits correctly
+ * inside that subtree.
+ */
+function ComposeButton({ mailboxUid }) {
+    const { openCompose } = useCompose();
+    return (_jsx("button", { type: "button", onClick: () => openCompose({ mailboxUid }), className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
+}
+/**
+ * Mail's own contextual sidebar (mailbox switcher + folder tree) + content area, rendered inside the shared
+ * `AppShell` chrome (icon rail, header, impersonation banner — see that component). There is no client-side
+ * router in this framework (see `ReactRoute`'s file-convention resolver) — the selected mailbox/folder live
+ * in the URL's `?mailboxUid=`/`?folderUid=` query params, read once on mount (never during the initial
+ * render itself, matching every other query-param reader in this codebase — e.g. `apps/admin/quarantine`'s
+ * `readMailboxUid()` — so the server-rendered and just-hydrated client markup match).
+ */
+export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const [mailboxes, setMailboxes] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [foldersLoading, setFoldersLoading] = useState(true);
+    const [folderError, setFolderError] = useState(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
+    const [requestedFolderUid, setRequestedFolderUid] = useState(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        setRequestedMailboxUid(params.get("mailboxUid"));
+        setRequestedFolderUid(params.get("folderUid"));
+    }, []);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            setMailboxes(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            return;
+        }
+        setFolderError(null);
+        setFoldersLoading(true);
+        listFolders(mailboxUid)
+            .then((result) => setFolders(result.filter((f) => MAIL_FOLDER_TYPES.has(f.type))))
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load folders."))
+            .finally(() => setFoldersLoading(false));
+    }, [mailboxUid]);
+    const folderUid = (requestedFolderUid && folders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
+        folders.find((f) => f.type === "inbox")?.uid;
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, mailboxes, folders }), [mailboxUid, folderUid, mailboxes, folders]);
+    const sortedFolders = useMemo(() => [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name)), [folders]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
+    // for a mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return _jsx(MailboxProvisioning, {});
+    }
+    let inner = null;
+    if (userUid && status === "checking") {
+        // Renders immediately (no network round trip needed) so switching into Mail never shows a blank
+        // pane while `listMailboxes()` is in flight — the outline below mirrors the real sidebar's shape.
+        inner = (_jsxs("aside", { className: "w-64 shrink-0 bg-surface border-r border-border flex flex-col p-3 gap-4", children: [_jsx(Skeleton, { height: "h-9", className: "rounded-sm" }), _jsx(SkeletonList, { count: 6 })] }));
+    }
+    else if (userUid && status === "error") {
+        inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — it's rendered twice (desktop `<aside>` + mobile
+        // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
+        // unmounted), so the mailbox-switcher `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct
+        // value per instance. Two elements sharing one id breaks label association (and is invalid HTML).
+        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: mailboxUid }) }), mailboxes.length > 1 && (_jsxs("div", { className: "px-3 pb-2", children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
+                                window.location.href = `/?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: folderError }) })), _jsx("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-0.5", children: foldersLoading ? (_jsx(SkeletonList, { count: 5, className: "pt-1" })) : (sortedFolders.map((folder) => (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailboxUid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
+                            "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                            folder.uid === folderUid
+                                ? "bg-primary/10 text-primary-dark font-semibold"
+                                : "text-text hover:bg-surface-alt",
+                        ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), folder.unreadCount > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: folder.unreadCount }))] }, folder.uid)))) })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+    }
+    return (_jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+}

package/dist/apps/shared/components/rules/RuleBuilder.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const INPUT_CLASS = "flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/**
+ * Shared condition-row editor and enabled/sequence/stop-processing chrome for a rule that matches
+ * conditions and runs actions in order — `TransportRule` (admin, org-wide) and `MailFilterRule`
+ * (mailbox-scoped) both have this same `{enabled, sequence, stopProcessingRules, conditions, actions}`
+ * shape. Conditions are driven by a declarative `conditionFields` list so both scopes share this one
+ * editor despite their `Conditions` types not being identical — `MailFilterConditions.importance`
+ * (`MailFilterRule`'s one condition field `TransportRuleConditions` has no equivalent of) is what forced
+ * this list beyond `"list"`/`"boolean"` to add a third `"select"` kind for a small fixed-choice field,
+ * confirming the shared editor still generalizes rather than needing a fork; actions are driven by a
+ * small per-scope `actionTypes` registry instead, since the two action vocabularies (reject/quarantine/
+ * add-header/add-recipient vs. move/copy/delete/mark-read/forward) are different enough that one
+ * component special-casing both would be worse than this split.
+ */
+export default function RuleBuilder({ value, onChange, conditionFields, actionTypes, }) {
+    const [draftText, setDraftText] = useState({});
+    const [newActionType, setNewActionType] = useState(actionTypes[0]?.value ?? "");
+    const conditions = value.conditions;
+    function patch(next) {
+        onChange({ ...value, ...next });
+    }
+    function addListEntry(key) {
+        const text = (draftText[key] ?? "").trim();
+        if (!text)
+            return;
+        const existing = conditions[key] ?? [];
+        if (existing.includes(text))
+            return;
+        patch({ conditions: { ...conditions, [key]: [...existing, text] } });
+        setDraftText({ ...draftText, [key]: "" });
+    }
+    function removeListEntry(key, entry) {
+        const existing = conditions[key] ?? [];
+        patch({ conditions: { ...conditions, [key]: existing.filter((e) => e !== entry) } });
+    }
+    function toggleBoolean(key) {
+        patch({ conditions: { ...conditions, [key]: !conditions[key] } });
+    }
+    function setSelect(key, value) {
+        patch({ conditions: { ...conditions, [key]: value || undefined } });
+    }
+    function addAction() {
+        const def = actionTypes.find((t) => t.value === newActionType);
+        if (!def)
+            return;
+        patch({ actions: [...value.actions, def.createDefault()] });
+    }
+    function updateAction(index, next) {
+        patch({ actions: value.actions.map((a, i) => (i === index ? next : a)) });
+    }
+    function removeAction(index) {
+        patch({ actions: value.actions.filter((_, i) => i !== index) });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-4", children: "Conditions" }), _jsx("div", { className: "flex flex-col gap-4", children: conditionFields.map((field) => {
+                            if (field.kind === "boolean") {
+                                return (_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: !!conditions[field.key], onChange: () => toggleBoolean(field.key) }), field.label] }, field.key));
+                            }
+                            if (field.kind === "select") {
+                                return (_jsxs("div", { children: [_jsx("label", { className: "text-sm font-semibold mb-1.5 block", htmlFor: `condition-${field.key}`, children: field.label }), _jsxs("select", { id: `condition-${field.key}`, className: INPUT_CLASS, value: conditions[field.key] ?? "", onChange: (e) => setSelect(field.key, e.target.value), children: [_jsx("option", { value: "", children: "Any" }), (field.options ?? []).map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })] }, field.key));
+                            }
+                            return (_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold mb-1.5", children: field.label }), _jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: (conditions[field.key] ?? []).map((entry) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs py-1 px-2.5 rounded-pill bg-surface-alt", children: [entry, _jsx("button", { type: "button", "aria-label": `Remove ${entry}`, onClick: () => removeListEntry(field.key, entry), className: "text-text-muted hover:text-danger", children: "\u00D7" })] }, entry))) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": field.label, className: INPUT_CLASS, placeholder: field.placeholder ?? "Add a value", value: draftText[field.key] ?? "", onChange: (e) => setDraftText({ ...draftText, [field.key]: e.target.value }), onKeyDown: (e) => {
+                                                    if (e.key === "Enter") {
+                                                        e.preventDefault();
+                                                        addListEntry(field.key);
+                                                    }
+                                                } }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => addListEntry(field.key), children: "Add" })] })] }, field.key));
+                        }) })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-4", children: "Actions" }), _jsxs("div", { className: "flex flex-col gap-3 mb-4", children: [value.actions.length === 0 && _jsx("p", { className: "text-sm text-text-muted", children: "No actions yet." }), value.actions.map((action, index) => {
+                                const def = actionTypes.find((t) => t.value === action.type);
+                                return (_jsxs("div", { className: "border border-border rounded-sm p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-semibold", children: def?.label ?? action.type }), _jsx("button", { type: "button", onClick: () => removeAction(index), className: "text-sm text-danger hover:underline", children: "Remove" })] }), def?.render(action, (next) => updateAction(index, next))] }, index));
+                            })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("select", { "aria-label": "New action type", className: INPUT_CLASS, value: newActionType, onChange: (e) => setNewActionType(e.target.value), children: actionTypes.map((t) => (_jsx("option", { value: t.value, children: t.label }, t.value))) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: addAction, children: "Add action" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-4", children: "Settings" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.enabled, onChange: (e) => patch({ enabled: e.target.checked }) }), "Enabled"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.stopProcessingRules, onChange: (e) => patch({ stopProcessingRules: e.target.checked }) }), "Stop processing more rules once this one matches"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: ["Sequence (evaluation order, ascending)", _jsx("input", { type: "number", className: "w-20 text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary", value: value.sequence, onChange: (e) => patch({ sequence: Number(e.target.value) }) })] })] })] })] }));
+}

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -0,0 +1,100 @@
+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 { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+/** Every settings section with its own sidebar entry. */
+export const SETTINGS_SECTIONS = [
+    { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
+    { id: "filters", href: "/settings/filters", label: "Mail Filters" },
+    { id: "signatures", href: "/settings/signatures", label: "Signatures" },
+    { id: "focused-inbox", href: "/settings/focused-inbox", label: "Focused Inbox" },
+    { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
+    { id: "booking-types", href: "/settings/booking-types", label: "Booking Links" },
+];
+const SettingsShellContext = createContext({ mailboxes: [] });
+/** Reads the mailbox Settings is currently scoped to, as resolved by the enclosing `SettingsShell`. */
+export function useSettingsShell() {
+    return useContext(SettingsShellContext);
+}
+/**
+ * The Settings area's shell — reached via a `UserMenu` entry rather than a 5th `AppShell` icon (per
+ * this plan's own confirmed decision), so it always passes `active="settings"` to `AppShell` regardless
+ * of which section is showing. Unlike `ContactsShell`/`TasksShell` (whose sidebar is just a mailbox
+ * switcher, since each has exactly one well-known folder), this shell's sidebar is a real list of
+ * settings sections (`SETTINGS_SECTIONS`) — full-page navigation between them, same as the top-level
+ * app rail, since this framework has no client-side router.
+ */
+export default function SettingsShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const [mailboxes, setMailboxes] = useState([]);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            setMailboxes(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+    const contextValue = useMemo(() => ({ mailboxUid, mailboxes }), [mailboxUid, mailboxes]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — same as ContactsShell/
+    // TasksShell, there's nothing else for a mailbox-less caller to configure here yet.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return _jsx(MailboxProvisioning, {});
+    }
+    let inner = null;
+    if (userUid && status === "checking") {
+        inner = (_jsxs("div", { className: "w-56 shrink-0 border-r border-border flex flex-col gap-4 p-3", children: [_jsx(Skeleton, { height: "h-9" }), _jsx(SkeletonList, { count: 3 })] }));
+    }
+    else if (userUid && status === "error") {
+        inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — same reasoning as ContactsShell's identical comment:
+        // rendered twice (desktop `<aside>` + mobile `Drawer`), possibly simultaneously mounted, so the
+        // `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct value per instance.
+        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-settings-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-settings-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
+                                // `active` always names a real entry in `SETTINGS_SECTIONS` — every settings
+                                // page passes its own section id explicitly (see `SettingsShellProps.active`'s
+                                // own doc comment), so this lookup can't miss.
+                                const section = SETTINGS_SECTIONS.find((s) => s.id === active);
+                                window.location.href = `${section.href}?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: SETTINGS_SECTIONS.map((section) => (_jsx("a", { 
+                        // `inner` (this whole branch) is only ever computed once `status === "ready"`
+                        // and `mailboxUid` has already resolved truthy — a falsy `mailboxUid` returns
+                        // `<MailboxProvisioning />` above instead (and TypeScript's own narrowing of
+                        // this `const` already reflects that, no `!` needed) — so no fallback is
+                        // needed here, matching this plan's established "dead guard the UI
+                        // structurally can't trigger" removal precedent (e.g.
+                        // `DomainDetailContent.handleVerify`).
+                        href: `${section.href}?mailboxUid=${encodeURIComponent(mailboxUid)}`, "aria-current": section.id === active ? "page" : undefined, className: [
+                            "block px-2.5 py-1.5 rounded-sm text-sm",
+                            section.id === active ? "bg-primary/10 text-primary-dark font-medium" : "text-text hover:bg-surface-alt",
+                        ].join(" "), children: section.label }, section.id))) })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
+    }
+    return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+}

package/dist/apps/shared/components/tasks/TasksSidebar.js

@@ -0,0 +1,81 @@
+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, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createTaskList, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+export function tasksViewKey(view) {
+    return view.type === "list" ? `list:${view.uid}` : view.type;
+}
+function NavItem({ label, count, active, onClick }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? "true" : undefined, className: [
+            "w-full flex items-center justify-between gap-2 text-sm text-left px-2.5 py-1.5 rounded-sm",
+            active ? "bg-primary/10 text-primary-dark font-semibold" : "text-text hover:bg-surface-alt",
+        ].join(" "), children: [_jsx("span", { className: "truncate", children: label }), count !== undefined && _jsx("span", { className: "text-xs text-text-muted shrink-0", children: count })] }));
+}
+/**
+ * Tasks' Outlook To-Do-style left sidebar. "My Day"/"Assigned to me" are real persisted fields
+ * (`Task.myDay`/`assignedTo`, from Phase 0); "Important"/"Planned" are pure smart-filters derived from
+ * already-loaded fields (`priority === "high"`/`dueDate != null`) with no backend concept of their own;
+ * "Flagged email" is a `Message` smart-filter (see `flaggedMessages.ts`), not a `Task` one at all — the
+ * page renders it as a distinct list, not the task table. "Tasks" is the flat, unfiltered default. Custom
+ * lists are real `TaskList` records, fetched here (same pattern as `ContactsSidebar`'s contact lists).
+ */
+export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSelect, refreshToken }) {
+    const [lists, setLists] = useState([]);
+    const [listsError, setListsError] = useState(null);
+    const [addingList, setAddingList] = useState(false);
+    const [newListName, setNewListName] = useState("");
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        if (!mailboxUid) {
+            setLists([]);
+            return;
+        }
+        setListsError(null);
+        listTaskLists(mailboxUid, { limit: 200 })
+            .then(setLists)
+            .catch((err) => setListsError(err instanceof ApiRequestError ? err.message : "Could not load task lists."));
+    }, [mailboxUid, refreshToken]);
+    const myDayCount = useMemo(() => tasks.filter((t) => t.myDay).length, [tasks]);
+    const importantCount = useMemo(() => tasks.filter((t) => t.priority === "high").length, [tasks]);
+    const plannedCount = useMemo(() => tasks.filter((t) => t.dueDate != null).length, [tasks]);
+    const assignedToMeCount = useMemo(() => tasks.filter((t) => t.assignedTo === userUid).length, [tasks, userUid]);
+    const listCounts = useMemo(() => {
+        const counts = new Map();
+        for (const t of tasks) {
+            if (t.taskListUid) {
+                counts.set(t.taskListUid, (counts.get(t.taskListUid) ?? 0) + 1);
+            }
+        }
+        return counts;
+    }, [tasks]);
+    async function handleAddList(e) {
+        e.preventDefault();
+        if (!mailboxUid || !newListName.trim()) {
+            return;
+        }
+        try {
+            const created = await createTaskList({ mailboxUid, name: newListName.trim() });
+            setLists((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
+            setNewListName("");
+            setAddingList(false);
+        }
+        catch (err) {
+            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+        }
+    }
+    function handleSelect(view) {
+        onSelect(view);
+        setDrawerOpen(false);
+    }
+    // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
+    // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
+    // the `idPrefix`).
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "My Day", count: myDayCount, active: active.type === "myDay", onClick: () => handleSelect({ type: "myDay" }) }), _jsx(NavItem, { label: "Important", count: importantCount, active: active.type === "important", onClick: () => handleSelect({ type: "important" }) }), _jsx(NavItem, { label: "Planned", count: plannedCount, active: active.type === "planned", onClick: () => handleSelect({ type: "planned" }) }), _jsx(NavItem, { label: "Assigned to me", count: assignedToMeCount, active: active.type === "assignedToMe", onClick: () => handleSelect({ type: "assignedToMe" }) }), _jsx(NavItem, { label: "Flagged email", active: active.type === "flagged", onClick: () => handleSelect({ type: "flagged" }) })] }), _jsx(NavItem, { label: "Tasks", count: tasks.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+}

package/dist/apps/shared/components/tasks/TasksToolbar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineCheckCircle, HiOutlineListBullet, HiOutlineSun, HiOutlineTableCells, HiOutlineTrash } from "react-icons/hi2";
+function ToolbarButton({ label, icon: Icon, active, disabled, onClick, }) {
+    return (_jsxs("button", { type: "button", "aria-label": label, "aria-pressed": active, title: label, disabled: disabled, onClick: onClick, className: [
+            "flex flex-col items-center gap-1 text-xs px-2.5 py-1.5 rounded-sm disabled:opacity-40 disabled:cursor-not-allowed",
+            active ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text",
+        ].join(" "), children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
+}
+/** Tasks' toolbar: a Grid/List view-mode toggle (local, not persisted) plus bulk actions for whatever
+ * rows are checked (Complete, Add to My Day, Delete) — deliberately presentational, matching
+ * `ContactsToolbar`'s convention, since the page owns the actual task data/selection. */
+export default function TasksToolbar({ viewMode, onViewModeChange, selectedCount, onComplete, onDelete, onAddToMyDay }) {
+    const hasSelection = selectedCount > 0;
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Tasks actions", className: "border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1", children: [_jsx(ToolbarButton, { label: "List", icon: HiOutlineListBullet, active: viewMode === "list", onClick: () => onViewModeChange("list") }), _jsx(ToolbarButton, { label: "Grid", icon: HiOutlineTableCells, active: viewMode === "grid", onClick: () => onViewModeChange("grid") }), _jsx("div", { className: "w-px self-stretch my-1 bg-border", "aria-hidden": "true" }), _jsx(ToolbarButton, { label: "Complete", icon: HiOutlineCheckCircle, disabled: !hasSelection, onClick: onComplete }), _jsx(ToolbarButton, { label: "Add to My Day", icon: HiOutlineSun, disabled: !hasSelection, onClick: onAddToMyDay }), _jsx(ToolbarButton, { label: "Delete", icon: HiOutlineTrash, disabled: !hasSelection, onClick: onDelete })] }));
+}

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -0,0 +1,92 @@
+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 { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+const TasksShellContext = createContext({ mailboxes: [] });
+/** Reads the mailbox/folder Tasks is currently showing, as resolved by the enclosing `TasksShell`. */
+export function useTasksShell() {
+    return useContext(TasksShellContext);
+}
+/**
+ * The Tasks app's shell — structurally identical to `ContactsShell` (a mailbox has exactly one
+ * well-known `tasks` folder, guaranteed to exist by `BaseMailboxRoute.create()`'s eager provisioning
+ * in `@rapidmx/restapi`), just bound to a different folder type. Kept as its own small component
+ * (rather than a single generic "SingleFolderShell" parameterized by type) so each app's sidebar can
+ * grow its own app-specific controls later without threading extra props through a shared one.
+ */
+export default function TasksShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const [mailboxes, setMailboxes] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [folderError, setFolderError] = useState(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            setMailboxes(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            return;
+        }
+        setFolderError(null);
+        listFolders(mailboxUid)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's tasks folder."));
+    }, [mailboxUid]);
+    const folderUid = folders.find((f) => f.type === "tasks")?.uid;
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, mailboxes, userUid }), [mailboxUid, folderUid, mailboxes, userUid]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
+    // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return _jsx(MailboxProvisioning, {});
+    }
+    let inner = null;
+    if (userUid && status === "checking") {
+        // Renders immediately (no network round trip needed) so switching into Tasks never shows a
+        // blank pane while `listMailboxes()` is in flight — the real sidebar (My Day/Important/Planned/
+        // lists) lives in `apps/www/tasks/index.tsx`'s own content, so this mimics its rough shape rather
+        // than the (minimal, mailbox-switcher-only) shape of this shell's own sidebar.
+        inner = (_jsxs("aside", { className: "w-56 shrink-0 bg-surface border-r border-border flex flex-col p-3 gap-4", children: [_jsx(Skeleton, { height: "h-9" }), _jsx(SkeletonList, { count: 5 })] }));
+    }
+    else if (userUid && status === "error") {
+        inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — see MailShell/ContactsShell/CalendarShell's identical
+        // comment: it's rendered twice (desktop `<aside>` + mobile `Drawer`), possibly simultaneously
+        // mounted, so the `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct value per instance.
+        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-tasks-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-tasks-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
+                                window.location.href = `/tasks?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
+    }
+    return (_jsx(AppShell, { active: "tasks", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+}