@rapidmx/web-client 0.15.1 → 0.17.0

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import { useState } from "react";
 import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
@@ -54,4 +54,6 @@ function ReadReceiptsContent() {
     }
     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." }), saved && _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" }) })] })] }) }));
 }
-export default routedPage("/settings/read-receipts", SettingsReadReceiptsPage);
+export default SettingsReadReceiptsPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/settings/sharing/index.d.ts

@@ -1,4 +1,9 @@
+import React from "react";
 import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
 export type SettingsSharingPageProps = Omit<SettingsShellProps, "active">;
-declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsSharingPageProps>;
-export default _default;
+declare function SettingsSharingPage(props: SettingsSharingPageProps): React.JSX.Element;
+export default SettingsSharingPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMailboxAccess, removeMailboxAccess, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
@@ -109,4 +109,6 @@ function SharingContent() {
     }
     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: [_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: [_jsxs("span", { className: "truncate", children: [member.userOrRoleId, member.noEffect && (_jsx("span", { className: "block text-xs text-danger", children: "Not a user - this entry has no effect. Replace it with the person it was meant for, or remove it." }))] }), _jsxs("span", { className: "flex items-center gap-2 shrink-0", children: [member.noEffect && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: () => setReplacing(member), children: "Replace with a user" })), _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("div", { className: "flex flex-col gap-2", children: [_jsx("h2", { className: "text-sm font-semibold", children: replacing ? `Replace ${replacing.userOrRoleId}` : "Add someone" }), _jsx(PrincipalPicker, { mailboxUid: mailboxUid, roleLabels: ROLE_LABELS, initialPrincipal: replacing?.userOrRoleId, defaultRole: replacing?.role === "manager" ? "manager" : "viewer", placeholder: "Email address or username", onGranted: handleGranted, onCancel: replacing ? () => setReplacing(null) : undefined }, replacing?.userOrRoleId ?? "new")] })] })), _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" })] })] })] }) }));
 }
-export default routedPage("/settings/sharing", SettingsSharingPage);
+export default SettingsSharingPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/settings/signatures/[uid].d.ts

@@ -1,8 +1,13 @@
+import React from "react";
 import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
 export type SignatureDetailPageProps = Omit<SettingsShellProps, "active"> & {
     params: {
         uid: string;
     };
 };
-declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SignatureDetailPageProps>;
-export default _default;
+declare function SignatureDetailPage(props: SignatureDetailPageProps): React.JSX.Element;
+export default SignatureDetailPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailSignature, listMailSignatures, updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
@@ -97,4 +97,6 @@ function SignatureDetailContent({ uid }) {
     }
     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/signatures?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All signatures" }), _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: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4", 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) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForNewMessages, onChange: (e) => setIsDefaultForNewMessages(e.target.checked) }), "Use for new messages"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForReplyForward, onChange: (e) => setIsDefaultForReplyForward(e.target.checked) }), "Use for replies and forwards"] })] }), _jsx("div", { className: "h-64", children: _jsx(RichTextEditor, { value: contentHtml, onChange: setContentHtml, fill: true, onUploadImage: handleUploadImage }) }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save changes" }) })] })] }) }));
 }
-export default routedPage("/settings/signatures/:uid", SignatureDetailPage);
+export default SignatureDetailPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/settings/signatures/index.d.ts

@@ -1,4 +1,9 @@
+import React from "react";
 import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
 export type SettingsSignaturesPageProps = Omit<SettingsShellProps, "active">;
-declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsSignaturesPageProps>;
-export default _default;
+declare function SettingsSignaturesPage(props: SettingsSignaturesPageProps): React.JSX.Element;
+export default SettingsSignaturesPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
@@ -33,4 +33,6 @@ function SignaturesContent() {
                                             .filter(Boolean)
                                             .join(" · ") }))] }), _jsx("a", { href: `/settings/signatures/${encodeURIComponent(sig.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-primary-dark hover:underline font-medium text-sm", children: "Edit" })] }, sig.uid))) }))] }) }));
 }
-export default routedPage("/settings/signatures", SettingsSignaturesPage);
+export default SettingsSignaturesPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/settings/signatures/new/index.d.ts

@@ -1,4 +1,9 @@
+import React from "react";
 import { SettingsShellProps } from "../../../../shared/components/settings/layout/SettingsShell.js";
 export type NewSignaturePageProps = Omit<SettingsShellProps, "active">;
-declare const _default: import("../../../../shared/navigation/AppRouter.js").RoutedPageComponent<NewSignaturePageProps>;
-export default _default;
+declare function NewSignaturePage(props: NewSignaturePageProps): React.JSX.Element;
+export default NewSignaturePage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

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

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../../_routedPage.js";
-import { useNavigate } from "../../../../shared/navigation/AppRouter.js";
+import { pageTitle } from "../../../../shared/navigation/pageTitle.js";
+import { useNavigate } from "../../../../shared/navigation/index.js";
 import { useState } from "react";
 import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { clearPreviousDefaults } from "../signatureDefaults.js";
@@ -65,4 +65,6 @@ function NewSignatureForm() {
     }
     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-5", children: "New signature" }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4", 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: "Work signature" }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForNewMessages, onChange: (e) => setIsDefaultForNewMessages(e.target.checked) }), "Use for new messages"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForReplyForward, onChange: (e) => setIsDefaultForReplyForward(e.target.checked) }), "Use for replies and forwards"] })] }), _jsx("div", { className: "h-64", children: _jsx(RichTextEditor, { value: contentHtml, onChange: setContentHtml, fill: true, onUploadImage: handleUploadImage }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create signature" }), _jsx("a", { href: `/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] })] }) }));
 }
-export default routedPage("/settings/signatures/new", NewSignaturePage);
+export default NewSignaturePage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/tasks/index.d.ts

@@ -1,3 +1,8 @@
+import React from "react";
 import { TasksShellProps } from "../../shared/components/tasks/layout/TasksShell.js";
-declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<TasksShellProps>;
-export default _default;
+declare function TasksPage(props: TasksShellProps): React.JSX.Element;
+export default TasksPage;
+/** The tab's title: `Brand: Tasks` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/tasks/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
@@ -292,7 +292,7 @@ function TasksContent() {
     const completedTasks = viewFiltered.filter((t) => t.completed);
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: () => setPendingDelete({ type: "bulk" }), onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), truncated && view.type !== "flagged" && (_jsxs(Alert, { children: ["This folder has more tasks than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] })), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { ref: addTaskRef, type: "text", "aria-label": "Add a task", ...addTaskHint, className: `${INPUT_CLASS} min-w-40 basis-40 flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), writableMailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, 
                                                 // `writableMailboxes` only has entries once `mailboxUid` has resolved.
-                                                value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
+                                                value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
                                                 const items = grouped.get(bucket);
                                                 if (items.length === 0) {
                                                     return null;
@@ -345,4 +345,6 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete })
     }
     return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm bg-surface border border-border rounded-md", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all tasks", checked: allChecked, onChange: toggleAll }) }), _jsx("th", { className: "w-8 px-3 py-2" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Title" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Due Date" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Importance" }), _jsx("th", { className: "w-8 px-3 py-2" })] }) }), _jsx("tbody", { children: tasks.map((task) => (_jsxs("tr", { className: "border-b border-border last:border-0", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(CompletionToggle, { task: task, onToggle: onToggle }) }), _jsx("td", { className: ["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), _jsx("td", { className: "px-3 py-2 text-text-muted", children: task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : "" }), _jsx("td", { className: ["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] }), _jsx("td", { className: "px-3 py-2", children: _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" }) })] }, task.uid))) })] }) }));
 }
-export default routedPage("/tasks", TasksPage);
+export default TasksPage;
+/** The tab's title: `Brand: Tasks` (see `pageTitle()`). */
+export const title = pageTitle("Tasks");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -32,6 +32,7 @@
     "trailingComma": "es5"
   },
   "peerDependencies": {
+    "@rapidrest/react": ">=2.1.0 <3",
     "react": "19.x",
     "react-dom": "19.x"
   },
@@ -39,7 +40,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.16.0",
+    "@rapidmx/react-shared": "^0.19.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",
@@ -60,6 +61,7 @@
     "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
+    "@rapidrest/react": "^2.1.0",
     "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",

package/apps/shared/navigation/AppRouter.tsx

@@ -1,300 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-/**
- * The web client's client-side router: what lets Mail, Calendar, Contacts, Tasks and Settings replace one another - and a
- * folder replace a folder - without a page load.
- *
- * `@rapidrest/react` has no router of its own: every page is a server-rendered document with its own hydration entry, and
- * hydrates only the page component (never `_layout.tsx`). So the router is a component the pages render themselves - each
- * page's default export is `routedPage(path, Page)` (see `apps/www/_routedPage.tsx`), which renders `AppRouter` with the page
- * as its first content. The first load is unchanged: the server renders the same tree, the browser hydrates it.
- *
- * `AppRouter` keeps ONE `AppChrome` (the icon rail, header, user menu, impersonation banner, compose windows, unlock prompt,
- * idle-key timer, sign-out listener) mounted and swaps only what is inside it. A page's own shell (`MailShell`,
- * `CalendarShell`, ...) still renders `AppShell` as it always did; inside the frame that renders nothing but its children.
- *
- * Navigation:
- *
- * Every `<a href>` to a same-origin path in the route table is intercepted (plain left clicks only - not with a modifier key, not
- * `target`/`download`, not a hash-only link, not one marked `data-full-reload`), so pages just write ordinary links and
- * middle-click, "open in new tab" and copy-link keep working. Anything not in the table - the admin and escrow consoles, plugin
- * pages, other sites - is left to the browser. `useNavigate()` does the same for code (`navigate("/contacts")`).
- *
- * Back and forward work (`popstate`), and the URL is always the real, shareable one (`?mailboxUid=&folderUid=` and all).
- *
- * A route's code is loaded (`route.load()`) before the URL and the page change, so the old page stays up meanwhile (the frame is
- * `aria-busy`); a route that fails to load falls back to a real navigation, which also picks up a new deploy.
- *
- * The next page's code is fetched on hover, focus and pointer-down of a link to it, and for the app rail's pages when the browser
- * is idle.
- *
- * After a page change the frame moves keyboard focus to the content region, scrolls to the top, sets `document.title` and
- * announces the new page to screen readers.
- *
- * The props of every `apps/www` page are the same for all of them (`WwwRoute.fetchProps()`: the user, auth-server URL,
- * branding, plugin navigation, impersonation) except `params`, which the router recomputes from the URL - so the props of the
- * page that was loaded are what every later page gets.
- */
-import React, { ComponentType, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AppChrome, type AppShellProps } from "../components/layout/AppShell.js";
-import { AppFrameContext, AppFrameContextValue } from "./frameContext.js";
-import { whenIdle, shouldSaveData } from "./idle.js";
-import { RouteDefinition, RouteMatch, matchRoute } from "./routes.js";
-import { NavigateFn, RouterContext, RouterContextValue, RouterLocation, UNKNOWN_LOCATION, readWindowLocation } from "./routerContext.js";
-
-export { useLocation, useLocationSearch, useNavigate } from "./routerContext.js";
-export type { NavigateFn, NavigateOptions, RouterLocation } from "./routerContext.js";
-
-/** What `routedPage()` gives the router: the page component itself, without the router around it. */
-export type RoutedPageComponent<P = any> = ComponentType<P> & { page: ComponentType<P> };
-
-interface CurrentPage {
-    Page: ComponentType<any>;
-    /** The route template shown. */
-    routePath: string;
-    active: string;
-    params: Record<string, string>;
-    /** Changes with the pathname, so a different page (or the same page for a different `:uid`) mounts fresh, while a change
-     * of query string alone - a folder - keeps the page and its state. */
-    key: string;
-}
-
-export interface AppRouterProps {
-    routes: readonly RouteDefinition[];
-    /** The template of the route this document was rendered for. */
-    initialPath: string;
-    initialPage: ComponentType<any>;
-    /** The props the server rendered the page with. */
-    pageProps: Record<string, any>;
-}
-
-function pickChromeProps(props: Record<string, any>): Omit<AppShellProps, "active"> {
-    const { userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, branding, appearance } = props;
-    return { userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, branding, appearance };
-}
-
-/** The anchor a click/pointer event is on or in, if it is a link. */
-function linkOf(event: Event): HTMLAnchorElement | null {
-    const target = event.target;
-    return target instanceof Element ? target.closest("a[href]") : null;
-}
-
-/** The URL of a link the router may take over, `null` for one the browser must handle itself. */
-function routerUrlOf(link: HTMLAnchorElement): URL | null {
-    if ((link.target && link.target !== "_self") || link.hasAttribute("download") || link.hasAttribute("data-full-reload")) {
-        return null;
-    }
-    const url = new URL(link.href, window.location.href);
-    if (url.origin !== window.location.origin) {
-        return null;
-    }
-    // A link that only moves within the page (`#section`) is the browser's own.
-    if (url.hash !== "" && url.pathname === window.location.pathname && url.search === window.location.search) {
-        return null;
-    }
-    return url;
-}
-
-export default function AppRouter({ routes, initialPath, initialPage, pageProps }: AppRouterProps) {
-    const [current, setCurrent] = useState<CurrentPage>(() => ({
-        Page: initialPage,
-        routePath: initialPath,
-        active: routes.find((route) => route.path === initialPath)?.active ?? "mail",
-        params: pageProps.params ?? {},
-        key: "initial",
-    }));
-    const [location, setLocation] = useState<RouterLocation>(UNKNOWN_LOCATION);
-    const [pending, setPending] = useState(false);
-    const [takeovers, setTakeovers] = useState(0);
-
-    const currentRef = useRef(current);
-    currentRef.current = current;
-    /** Identifies the latest navigation; one that finds it changed while loading has been overtaken and does nothing. */
-    const navigationRef = useRef(0);
-    /** The page components loaded or loading, by route template - one request per page however many links are touched. */
-    const pagesRef = useRef(new Map<string, Promise<ComponentType<any>>>([[initialPath, Promise.resolve(initialPage)]]));
-    const routesRef = useRef(routes);
-    routesRef.current = routes;
-
-    /** Loads a route's page component (once). Rejects if its code can't be loaded - and then a later attempt tries again. */
-    const pageFor = useCallback((route: RouteDefinition): Promise<ComponentType<any>> => {
-        let loading = pagesRef.current.get(route.path);
-        if (!loading) {
-            loading = route.load().then((module) => {
-                const page = (module.default as Partial<RoutedPageComponent>).page;
-                if (!page) {
-                    throw new Error(`The page for ${route.path} is not a routedPage().`);
-                }
-                return page;
-            });
-            pagesRef.current.set(route.path, loading);
-            loading.catch(() => pagesRef.current.delete(route.path));
-        }
-        return loading;
-    }, []);
-
-    /** The pathname of the page on screen (the address bar's, once a navigation has been committed). */
-    const shownPathRef = useRef<string | null>(null);
-
-    /**
-     * Shows `match` (loading its page first if it is a different page from the one on screen), calling `commit` - which puts
-     * the URL in the address bar - at the moment the new page replaces the old one. Resolves `false` when the page's code
-     * couldn't be loaded, and `true` otherwise, including when a newer navigation overtook this one while it loaded.
-     */
-    const show = useCallback(
-        async (match: RouteMatch, target: RouterLocation, sequence: number, commit: () => void): Promise<boolean> => {
-            const pathChanged = target.pathname !== shownPathRef.current;
-            let Page = currentRef.current.Page;
-            if (pathChanged && match.route.path !== currentRef.current.routePath) {
-                try {
-                    Page = await pageFor(match.route);
-                } catch {
-                    return false;
-                }
-            }
-            if (sequence !== navigationRef.current) {
-                return true;
-            }
-            commit();
-            shownPathRef.current = target.pathname;
-            if (pathChanged) {
-                setCurrent({ Page, routePath: match.route.path, active: match.route.active, params: match.params, key: target.pathname });
-            }
-            setLocation(target);
-            return true;
-        },
-        [pageFor],
-    );
-
-    const navigate = useCallback<NavigateFn>(
-        (href, options = {}) => {
-            const url = new URL(href, window.location.href);
-            const leave = () => (options.replace ? window.location.replace(url.href) : (window.location.href = url.href));
-            const match = url.origin === window.location.origin ? matchRoute(routesRef.current, url.pathname) : undefined;
-            if (!match) {
-                leave();
-                return;
-            }
-            const target: RouterLocation = { pathname: url.pathname, search: url.search, hash: url.hash };
-            const now = readWindowLocation();
-            if (target.pathname === now.pathname && target.search === now.search && target.hash === now.hash) {
-                return;
-            }
-            const sequence = ++navigationRef.current;
-            setPending(true);
-            void show(match, target, sequence, () => {
-                window.history[options.replace ? "replaceState" : "pushState"](null, "", target.pathname + target.search + target.hash);
-            }).then((ok) => {
-                if (!ok) {
-                    leave();
-                }
-                if (sequence === navigationRef.current) {
-                    setPending(false);
-                }
-            });
-        },
-        [show],
-    );
-
-    // The browser's own location is read after the first render, never during it: the server can't know the query string.
-    useEffect(() => {
-        const here = readWindowLocation();
-        shownPathRef.current = here.pathname;
-        setLocation(here);
-    }, []);
-
-    // Back and forward.
-    useEffect(() => {
-        function handlePopState() {
-            const here = readWindowLocation();
-            const match = matchRoute(routesRef.current, here.pathname);
-            if (!match) {
-                window.location.reload();
-                return;
-            }
-            const sequence = ++navigationRef.current;
-            setPending(true);
-            void show(match, here, sequence, () => undefined).then((ok) => {
-                if (!ok) {
-                    window.location.reload();
-                }
-                if (sequence === navigationRef.current) {
-                    setPending(false);
-                }
-            });
-        }
-        window.addEventListener("popstate", handlePopState);
-        return () => window.removeEventListener("popstate", handlePopState);
-    }, [show]);
-
-    // Plain links, and fetching what they lead to before they are clicked.
-    useEffect(() => {
-        function handleClick(event: MouseEvent) {
-            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-                return;
-            }
-            const link = linkOf(event);
-            const url = link && routerUrlOf(link);
-            if (!url || !matchRoute(routesRef.current, url.pathname)) {
-                return;
-            }
-            event.preventDefault();
-            navigate(url.pathname + url.search + url.hash);
-        }
-        function handleIntent(event: Event) {
-            const link = linkOf(event);
-            const url = link && routerUrlOf(link);
-            const match = url && matchRoute(routesRef.current, url.pathname);
-            if (match) {
-                pageFor(match.route).catch(() => undefined);
-            }
-        }
-        document.addEventListener("click", handleClick);
-        document.addEventListener("pointerover", handleIntent);
-        document.addEventListener("pointerdown", handleIntent);
-        document.addEventListener("focusin", handleIntent);
-        return () => {
-            document.removeEventListener("click", handleClick);
-            document.removeEventListener("pointerover", handleIntent);
-            document.removeEventListener("pointerdown", handleIntent);
-            document.removeEventListener("focusin", handleIntent);
-        };
-    }, [navigate, pageFor]);
-
-    // The app rail's other pages, once the browser has nothing else to do - so that the likeliest next click is instant.
-    useEffect(() => {
-        if (shouldSaveData()) {
-            return;
-        }
-        const cancels = routesRef.current
-            .filter((route) => route.idlePrefetch)
-            .map((route) => whenIdle(() => void pageFor(route).catch(() => undefined)));
-        return () => cancels.forEach((cancel) => cancel());
-    }, [pageFor]);
-
-    const enterTakeover = useCallback(() => {
-        setTakeovers((n) => n + 1);
-        return () => setTakeovers((n) => n - 1);
-    }, []);
-    const frame = useMemo<AppFrameContextValue>(() => ({ enterTakeover }), [enterTakeover]);
-    const router = useMemo<RouterContextValue>(() => ({ location, navigate }), [location, navigate]);
-
-    const Page = current.Page;
-    return (
-        <RouterContext.Provider value={router}>
-            <AppFrameContext.Provider value={frame}>
-                <AppChrome
-                    active={current.active}
-                    routeKey={current.key}
-                    busy={pending}
-                    hideChrome={takeovers > 0}
-                    {...pickChromeProps(pageProps)}
-                >
-                    <Page key={current.key} {...pageProps} params={current.params} />
-                </AppChrome>
-            </AppFrameContext.Provider>
-        </RouterContext.Provider>
-    );
-}

package/apps/shared/navigation/idle.ts

@@ -1,45 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/** How long an idle callback may be held back on a busy page before it runs anyway. */
-export const IDLE_TIMEOUT_MS = 3_000;
-
-/** The delay used where the browser has no `requestIdleCallback` (Safari). */
-export const IDLE_FALLBACK_DELAY_MS = 200;
-
-/**
- * Runs `callback` once the page has finished loading (the window `load` event, which waits for every script and image the page
- * asked for) and the browser has nothing better to do (`requestIdleCallback`), or shortly after where there is no such thing.
- * For work that only makes later things faster - fetching a code chunk, warming a cache - and must never compete with what
- * the user is waiting for. Returns a function that cancels it if it hasn't run yet.
- */
-export function whenIdle(callback: () => void): () => void {
-    let cancelIdle: () => void = () => undefined;
-    function schedule() {
-        if (typeof window.requestIdleCallback === "function") {
-            const handle = window.requestIdleCallback(callback, { timeout: IDLE_TIMEOUT_MS });
-            cancelIdle = () => window.cancelIdleCallback(handle);
-        } else {
-            const timer = setTimeout(callback, IDLE_FALLBACK_DELAY_MS);
-            cancelIdle = () => clearTimeout(timer);
-        }
-    }
-    if (document.readyState === "complete") {
-        schedule();
-    } else {
-        window.addEventListener("load", schedule, { once: true });
-    }
-    return () => {
-        window.removeEventListener("load", schedule);
-        cancelIdle();
-    };
-}
-
-/** `true` when the user has asked the browser to save data (or is on a very slow connection): work that only speculates
- * about what will be needed - prefetching - should not run then. */
-export function shouldSaveData(): boolean {
-    const connection = (navigator as Navigator & { connection?: { saveData?: boolean; effectiveType?: string } }).connection;
-    return connection?.saveData === true || connection?.effectiveType === "slow-2g" || connection?.effectiveType === "2g";
-}