@rapidmx/web-client 0.16.0 → 0.17.0

package/dist/apps/admin/domains/[uid].js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { deleteDomain, updateDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
@@ -17,6 +18,7 @@ export default function DomainDetailPage(props) {
     return (_jsx(AdminShell, { ...props, active: "domains", children: _jsx(DomainDetailContent, { uid: props.params.uid }) }));
 }
 function DomainDetailContent({ uid }) {
+    const { navigate } = useRouter();
     const [domain, setDomain] = useState(null);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
@@ -39,7 +41,7 @@ function DomainDetailContent({ uid }) {
         setDeleteError(null);
         try {
             await deleteDomain(domain.uid, domain.version);
-            window.location.href = "/admin/domains";
+            void navigate("/admin/domains");
         }
         catch (err) {
             setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this domain.");

package/dist/apps/admin/domains/new/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createDomain, listDomains } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
@@ -15,6 +16,7 @@ export default function NewDomainPage(props) {
     return (_jsx(AdminShell, { ...props, active: "domains", children: _jsx(NewDomainForm, {}) }));
 }
 function NewDomainForm() {
+    const { navigate } = useRouter();
     const [name, setName] = useState("");
     const [aliasOf, setAliasOf] = useState("");
     // Only an existing, non-alias domain can be aliased (no chains) - see `Domain.aliasOf`'s own doc comment
@@ -37,7 +39,7 @@ function NewDomainForm() {
         setSaving(true);
         try {
             const domain = await createDomain({ name: name.trim(), aliasOf: aliasOf || undefined });
-            window.location.href = `/admin/domains/${encodeURIComponent(domain.uid)}`;
+            void navigate(`/admin/domains/${encodeURIComponent(domain.uid)}`);
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the domain.");

package/dist/apps/admin/escrow-scopes/[uid].js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { deleteEscrowScope, getEscrowScope, updateEscrowScope, } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
@@ -95,6 +96,7 @@ export default function EscrowScopeDetailPage(props) {
     return (_jsx(AdminShell, { ...props, active: "escrowScopes", children: _jsx(EscrowScopeDetailContent, { uid: props.params.uid, adminUid: props.userUid }) }));
 }
 function EscrowScopeDetailContent({ uid, adminUid }) {
+    const { navigate } = useRouter();
     const [original, setOriginal] = useState(null);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
@@ -198,7 +200,7 @@ function EscrowScopeDetailContent({ uid, adminUid }) {
         setDeleteError(null);
         try {
             await deleteEscrowScope(original.uid, original.version);
-            window.location.href = "/admin/escrow-scopes";
+            void navigate("/admin/escrow-scopes");
         }
         catch (err) {
             // Most commonly a 409 ("referenced by an existing Matter") — see `deleteEscrowScope()`'s own

package/dist/apps/admin/escrow-scopes/new/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createEscrowScope } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
@@ -16,6 +17,7 @@ export default function NewEscrowScopePage(props) {
     return (_jsx(AdminShell, { ...props, active: "escrowScopes", children: _jsx(NewEscrowScopeForm, { adminUid: props.userUid }) }));
 }
 function NewEscrowScopeForm({ adminUid }) {
+    const { navigate } = useRouter();
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
@@ -61,7 +63,7 @@ function NewEscrowScopeForm({ adminUid }) {
                 requiredHolders: keyAndHolders.requiredHolders,
                 notifySubjectOnAccess: keyAndHolders.notifySubjectOnAccess,
             });
-            window.location.href = `/admin/escrow-scopes/${encodeURIComponent(created.uid)}`;
+            void navigate(`/admin/escrow-scopes/${encodeURIComponent(created.uid)}`);
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");

package/dist/apps/admin/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import { reopenSetup } from "@rapidmx/react-shared/admin/setupApi.js";
@@ -18,6 +19,7 @@ export default function MailboxesListPage(props) {
     return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsx(MailboxesListContent, {}) }));
 }
 function MailboxesListContent() {
+    const { navigate } = useRouter();
     const [page, setPage] = useState(0);
     const [mailboxes, setMailboxes] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -38,7 +40,7 @@ function MailboxesListContent() {
         setReopening(true);
         try {
             await reopenSetup();
-            window.location.href = "/admin/setup";
+            void navigate("/admin/setup");
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not reopen setup.");

package/dist/apps/admin/mailboxes/[uid].js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { deleteMailbox, getMailbox, impersonateUser } from "@rapidmx/react-shared/mail/mailApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
@@ -27,6 +28,7 @@ export default function MailboxDetailPage(props) {
 }
 function MailboxDetailContent({ uid, impersonationBaseUrl, currentUserUid, }) {
     const [mailbox, setMailbox] = useState(null);
+    const { navigate } = useRouter();
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [confirmingAccess, setConfirmingAccess] = useState(false);
@@ -76,7 +78,7 @@ function MailboxDetailContent({ uid, impersonationBaseUrl, currentUserUid, }) {
         try {
             await deleteMailbox(mailbox.uid, mailbox.version, { erase: eraseData });
             // The Mailboxes page it goes to lists what a delete without `erase` kept, and how far an erasure has got.
-            window.location.href = "/admin";
+            void navigate("/admin");
         }
         catch (err) {
             // Most commonly a 409 if this mailbox is a custodian on an open legal hold (restapi's own

package/dist/apps/admin/mailboxes/new/index.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from "@rapidrest/react/client";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
 import MailboxCreateForm from "../../../shared/components/admin/settings/MailboxCreateForm.js";
 export default function NewMailboxPage(props) {
+    const { navigate } = useRouter();
     return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose \"Shared mailbox\" to create a true ownerless mailbox (the Exchange \"shared mailbox\" concept) \u2014 access is then granted entirely to delegates afterward, not to a single owner. Choose \"Owned by a specific person\" and look them up to create a mailbox for a specific user instead." }), _jsx(MailboxCreateForm, { cancelHref: "/admin", onCreated: (mailbox) => {
-                        window.location.href = `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`;
+                        void navigate(`/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`);
                     } })] }) }));
 }

package/dist/apps/admin/transport-rules/new/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createTransportRule, } from "@rapidmx/react-shared/admin/transportRulesApi.js";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
@@ -17,6 +18,7 @@ export default function NewTransportRulePage(props) {
     return (_jsx(AdminShell, { ...props, active: "transportRules", children: _jsx(NewTransportRuleForm, {}) }));
 }
 function NewTransportRuleForm() {
+    const { navigate } = useRouter();
     const [name, setName] = useState("");
     const [rule, setRule] = useState({
         enabled: true,
@@ -53,7 +55,7 @@ function NewTransportRuleForm() {
         setSaving(true);
         try {
             const created = await createTransportRule({ name: name.trim(), ...rule });
-            window.location.href = `/admin/transport-rules/${encodeURIComponent(created.uid)}`;
+            void navigate(`/admin/transport-rules/${encodeURIComponent(created.uid)}`);
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the transport rule.");

package/dist/apps/escrow/matters/new/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { createMatter } from "@rapidmx/react-shared/admin/mattersApi.js";
@@ -17,6 +18,7 @@ export default function NewMatterPage(props) {
     return (_jsx(EscrowShell, { ...props, active: "matters", children: _jsx(NewMatterForm, {}) }));
 }
 function NewMatterForm() {
+    const { navigate } = useRouter();
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     // No dropdown here: `EscrowScope` (BaseEscrowScopeRoute) is trusted-admin-only end to end, so this
@@ -62,7 +64,7 @@ function NewMatterForm() {
                 dateRangeStart: new Date(dateRangeStart).toISOString(),
                 dateRangeEnd: new Date(dateRangeEnd).toISOString(),
             });
-            window.location.href = `/escrow/matters/${encodeURIComponent(created.uid)}`;
+            void navigate(`/escrow/matters/${encodeURIComponent(created.uid)}`);
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the matter.");

package/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import "../../../styles/app.css";
 import { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, HiOutlineBars3, } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
@@ -108,6 +109,7 @@ export function adminNavItems(pluginNav) {
  * 403 `api-103` (elevated, but not an administrator), any other 403, and 401 mean "no administrator access".
  */
 export default function AdminShell({ active, userUid, authServerUrl, pluginNav, children }) {
+    const { navigate } = useRouter();
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [menuOpen, setMenuOpen] = useState(false);
@@ -129,7 +131,8 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
             if (active !== "setup") {
                 try {
                     if ((await getSetupStatus()).required) {
-                        window.location.href = SETUP_ITEM.href;
+                        // Replacing this page in the history, which would otherwise send the back button round again.
+                        void navigate(SETUP_ITEM.href, { replace: true });
                         return;
                     }
                 }

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { HiCheck } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
@@ -49,6 +50,7 @@ function errorMessage(err, fallback) {
  * except the domain can be passed over and configured later from the admin console.
  */
 export default function SetupWizard({ userUid }) {
+    const { navigate } = useRouter();
     const [step, setStep] = useState(null);
     const [status, setStatus] = useState();
     const [domains, setDomains] = useState([]);
@@ -141,7 +143,7 @@ export default function SetupWizard({ userUid }) {
             // Let a step still being recorded land first, so it can't arrive after setup is marked finished.
             await progress.current.running;
             await completeSetup();
-            window.location.href = "/admin";
+            void navigate("/admin");
         }
         catch (err) {
             setError(errorMessage(err, "Could not finish setup."));

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

@@ -10,7 +10,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocationSearch } from "../../../navigation/AppRouter.js";
+import { useLocation } from "@rapidrest/react/client";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const CalendarShellContext = createContext({
@@ -40,7 +40,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
     const [folderRefreshToken, setFolderRefreshToken] = useState(0);
     // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
     // effect, not during render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
+    const { search } = useLocation();
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
     }, [search]);

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -11,7 +11,8 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import { useLocation } from "@rapidrest/react/client";
+import { useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const ContactsShellContext = createContext({ mailboxes: [] });
@@ -36,7 +37,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
     const [drawerOpen, setDrawerOpen] = useState(false);
     // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
     // effect, not during render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
+    const { search } = useLocation();
     const navigate = useNavigate();
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));

package/dist/apps/shared/components/layout/AppShell.d.ts

@@ -49,12 +49,9 @@ export interface AppDef {
 export declare const APPS: AppDef[];
 /** `APPS` followed by the plugins' `appRail` items (generic icon), core ids winning - see `mergePluginNavItems`. */
 export declare function appRailItems(pluginNav?: PluginNav): NavItem[];
-/** What only the persistent frame (`AppRouter`) passes to the chrome it keeps mounted. */
+/** What only the persistent frame (`apps/www/_shell.tsx`) passes to the chrome it keeps mounted. */
 export interface AppChromeProps extends AppShellProps {
-    /** Changes whenever the router shows a different page: the chrome then moves focus to the content, scrolls to its top,
-     * sets the document title and announces the page. Absent outside the router, when nothing does. */
-    routeKey?: string;
-    /** The router is loading the next page's code - the content is `aria-busy`. */
+    /** The router is loading the next page - the content is `aria-busy`. */
     busy?: boolean;
     /** A screen that takes over the window (`FrameTakeover`) is showing: the rail, header, banner and footer are hidden - not
      * unmounted, so what is inside them (and the page in the content region) keeps its state. */
@@ -66,14 +63,14 @@ export interface AppChromeProps extends AppShellProps {
  * Each app's own shell (e.g. `MailShell`) renders its own contextual sidebar + content as `children`, inside
  * the area to the right of the icon rail and below the header.
  *
- * Rendered by `AppRouter`, once, for the life of the page, so that moving between apps replaces only `children` - see
- * `AppShell` below for what a page's own shell renders instead.
+ * Rendered by the webmail's app shell (`apps/www/_shell.tsx`, the router's persistent client layout), once, for the life of the
+ * page, so that moving between apps replaces only `children` - see `AppShell` below for what a page's own shell renders instead.
  */
-export declare function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, routeKey, busy, hideChrome, children, }: PropsWithChildren<AppChromeProps>): React.JSX.Element;
+export declare function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, busy, hideChrome, children, }: PropsWithChildren<AppChromeProps>): React.JSX.Element;
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it
- * is the whole `AppChrome`, as it always was. Inside it (`AppRouter`) the chrome is already mounted above the page - and stays
- * mounted as the page is replaced - so this is only its children; everything it would have been given comes from the router
- * frame instead (the props are the same for every page, and `active` is the route's).
+ * is the whole `AppChrome`, as it always was. Inside it (the router's app shell, `apps/www/_shell.tsx`) the chrome is already mounted above the
+ * page - and stays mounted as the page is replaced - so this is only its children; everything it would have been given comes from
+ * the shell instead (the props are the same for every page, and `active` is the route's).
  */
 export default function AppShell(props: PropsWithChildren<AppShellProps>): React.JSX.Element;

package/dist/apps/shared/components/layout/AppShell.js

@@ -4,8 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import "../../styles/app.css";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlinePuzzlePiece, HiOutlineUsers, } from "react-icons/hi2";
+import { useRouter } from "@rapidrest/react/client";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
 import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -27,7 +28,7 @@ import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
 import { useInAppFrame } from "../../navigation/frameContext.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
-import { useNavigate } from "../../navigation/routerContext.js";
+import { useNavigate } from "../../navigation/index.js";
 import { GlobalShortcuts } from "../../keyboard/GlobalShortcuts.js";
 import { ShortcutProvider } from "../../keyboard/ShortcutProvider.js";
 import ShortcutsDialog from "../../keyboard/ShortcutsDialog.js";
@@ -84,10 +85,10 @@ export function appRailItems(pluginNav) {
  * Each app's own shell (e.g. `MailShell`) renders its own contextual sidebar + content as `children`, inside
  * the area to the right of the icon rail and below the header.
  *
- * Rendered by `AppRouter`, once, for the life of the page, so that moving between apps replaces only `children` - see
- * `AppShell` below for what a page's own shell renders instead.
+ * Rendered by the webmail's app shell (`apps/www/_shell.tsx`, the router's persistent client layout), once, for the life of the
+ * page, so that moving between apps replaces only `children` - see `AppShell` below for what a page's own shell renders instead.
  */
-export function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, routeKey, busy, hideChrome, children, }) {
+export function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, busy, hideChrome, children, }) {
     const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
     // The keyboard shortcuts dialog: opened by `?`/Ctrl+/ (`GlobalShortcuts`) and by the account menu's item.
     const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -111,6 +112,7 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     // the router (`AppShell` rendered as a page's own chrome: tests, plugin pages) it stays off, and a Mail shell owns its connection itself.
     const inFrame = useInAppFrame();
     const navigate = useNavigate();
+    const { pathname } = useRouter();
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
     // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
     useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
@@ -210,32 +212,21 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             window.location.href = "/admin";
         }
     }
-    // What the persistent frame (`AppRouter`) needs on top of a page that never changes: the document title follows the page, and
-    // after the router replaces the page the keyboard focus, the scroll position and a screen reader are told about it - a
-    // page load did all of that by itself. Nothing here runs for a page shown outside the router (`routeKey` is undefined).
-    const contentRef = useRef(null);
-    const [announcement, setAnnouncement] = useState("");
-    const firstRouteKeyRef = useRef(routeKey);
-    const pageLabel = active === "settings" ? "Settings" : appRailItems(pluginNav).find((app) => app.id === active)?.label;
+    // The tab's title in the frame is each page's own (its `title` export: rendered by the server, set again by the router on every navigation),
+    // but `useBranding()` above sets it to the branding's title once its fetch answers - a title for a page that has none. The page's is put back:
+    // the layout effect reads it before that hook's effect runs, this one (declared after it) writes it back.
+    const pageTitleRef = useRef("");
+    useLayoutEffect(() => {
+        pageTitleRef.current = document.title;
+    }, [fetchedBranding?.title]);
     useEffect(() => {
-        if (routeKey !== undefined) {
-            const brand = branding?.title || branding?.companyName || "RapidMX";
-            document.title = pageLabel ? `${brand}: ${pageLabel}` : brand;
+        if (inFrame) {
+            document.title = pageTitleRef.current;
         }
-    }, [routeKey, pageLabel, branding]);
-    // After the title effect above, so a page change (which rewrites the title) is followed by the unread count going back in front of it.
-    useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), {
-        enabled: inFrame,
-        resetKey: `${routeKey}|${pageLabel}|${branding?.title}|${branding?.companyName}`,
-    });
-    useEffect(() => {
-        if (routeKey === undefined || routeKey === firstRouteKeyRef.current) {
-            return;
-        }
-        setAnnouncement(pageLabel ?? "");
-        contentRef.current?.focus({ preventScroll: true });
-        window.scrollTo(0, 0);
-    }, [routeKey]);
+    }, [fetchedBranding?.title, inFrame]);
+    // The router sets the document's title to the page's own whenever the page changes, which drops the unread count this puts in front
+    // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
+    useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
     if (!userUid) {
         return _jsx("div", { className: "min-h-screen" });
     }
@@ -260,13 +251,13 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
                                                                 id === active
                                                                     ? "bg-primary/10 text-primary-dark"
                                                                     : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                                            ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { ref: contentRef, id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), routeKey !== undefined && (_jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
+                                                            ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
 }
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it
- * is the whole `AppChrome`, as it always was. Inside it (`AppRouter`) the chrome is already mounted above the page - and stays
- * mounted as the page is replaced - so this is only its children; everything it would have been given comes from the router
- * frame instead (the props are the same for every page, and `active` is the route's).
+ * is the whole `AppChrome`, as it always was. Inside it (the router's app shell, `apps/www/_shell.tsx`) the chrome is already mounted above the
+ * page - and stays mounted as the page is replaced - so this is only its children; everything it would have been given comes from
+ * the shell instead (the props are the same for every page, and `active` is the route's).
  */
 export default function AppShell(props) {
     const inFrame = useInAppFrame();

package/dist/apps/shared/components/mail/ConversationThreadPane.js

@@ -448,7 +448,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                                     buttonRef: (node) => {
                                         headerRefs.current[uid] = node;
                                     },
-                                }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
+                                }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, onChanged: patchMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
                                             headerRefs.current[uid] = node;
                                         }, buttonProps: {
                                             onClick: () => toggleExpanded(uid),

package/dist/apps/shared/components/mail/EmptyFolderBar.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface EmptyFolderBarProps {
+    /** The folder the list is showing ("Deleted Items", "Junk Email"). */
+    folderName: string;
+    /** How many messages it holds, when that is known. */
+    count?: number;
+    /** Nothing to empty, or not allowed to. */
+    disabled: boolean;
+    /** Why, shown as the button's tooltip while it is disabled. */
+    disabledReason?: string;
+    onEmpty: () => void;
+}
+/**
+ * Outlook's "Empty folder", at the top of the list of Deleted Items and of Junk Email: the whole folder is permanently deleted, after the
+ * page has asked (this only reports the click). A row of its own under the toolbar rather than a toolbar button, so the toolbar keeps the
+ * width a phone gives it and the action is never taken for one of the list's arrangement controls.
+ */
+export default function EmptyFolderBar({ folderName, count, disabled, disabledReason, onEmpty }: EmptyFolderBarProps): React.JSX.Element;

package/dist/apps/shared/components/mail/EmptyFolderBar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineTrash } from "react-icons/hi2";
+/**
+ * Outlook's "Empty folder", at the top of the list of Deleted Items and of Junk Email: the whole folder is permanently deleted, after the
+ * page has asked (this only reports the click). A row of its own under the toolbar rather than a toolbar button, so the toolbar keeps the
+ * width a phone gives it and the action is never taken for one of the list's arrangement controls.
+ */
+export default function EmptyFolderBar({ folderName, count, disabled, disabledReason, onEmpty }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1 border-b border-border text-xs text-text-muted", children: [_jsx("span", { children: count === undefined ? "" : `${count} ${count === 1 ? "item" : "items"}` }), _jsxs("button", { type: "button", onClick: onEmpty, disabled: disabled, title: disabled ? disabledReason : `Permanently delete everything in ${folderName}`, className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-sm text-danger hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsx(HiOutlineTrash, { size: 16, "aria-hidden": "true", className: "shrink-0" }), `Empty ${folderName}`] })] }));
+}

package/dist/apps/shared/components/mail/MailSelectionBar.d.ts

@@ -40,7 +40,12 @@ export interface MailSelectionBarProps {
      * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
+    /** Delete: moves the selection to Deleted Items - or, when `deletesPermanently`, permanently deletes it (the page asks first). */
     onDelete: () => void;
+    /** The selection is in Deleted Items, so Delete is the permanent one: the button says "Delete permanently" and is styled as the destructive
+     * action it is. The page decides (a search over several mailboxes lists messages from more than one folder, so the folder being viewed is not
+     * always the answer). */
+    deletesPermanently?: boolean;
     /** A bulk action is in flight - every action is held until it settles, since the next one would send
      * `version`s the first has already superseded. */
     busy: boolean;
@@ -58,9 +63,9 @@ export interface MailSelectionBarProps {
  * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
  * archive, move, report junk and delete.
  *
- * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
- * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
- * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
+ * "Delete" means *move to Deleted Items* - except on messages that are already in Deleted Items (`deletesPermanently`),
+ * where it is "Delete permanently": the page confirms, then erases them for good, as Outlook's Delete does there. An
+ * action whose target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }: MailSelectionBarProps): React.JSX.Element;
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, deletesPermanently, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }: MailSelectionBarProps): React.JSX.Element;

package/dist/apps/shared/components/mail/MailSelectionBar.js

@@ -9,25 +9,23 @@ import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
-function actionClassName() {
-    return "px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
+function actionClassName(destructive = false) {
+    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
  * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
  * archive, move, report junk and delete.
  *
- * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
- * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
- * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
+ * "Delete" means *move to Deleted Items* - except on messages that are already in Deleted Items (`deletesPermanently`),
+ * where it is "Delete permanently": the page confirms, then erases them for good, as Outlook's Delete does there. An
+ * action whose target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, deletesPermanently = false, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }) {
     const env = useKeyEnvironment();
-    /** `title` and `aria-keyshortcuts` for an action the keyboard also does; `reason` (why it is disabled) wins the tooltip. */
-    const hint = (label, shortcut, reason) => shortcuts
-        ? { title: reason ?? withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) }
-        : { title: reason };
+    /** `title` and `aria-keyshortcuts` for an action the keyboard also does. */
+    const hint = (label, shortcut) => shortcuts ? { title: withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) } : {};
     const selectedCount = totals?.selected ?? selected.length;
     const listedCount = totals?.listed ?? listed.length;
     // Counted on the rows that were ticked, but *emptied* on the messages: a ticked conversation whose
@@ -44,12 +42,12 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // them is already being in the folder they would move to.
     const archiveReason = currentType === "archive" ? "These messages are already in Archive" : undefined;
     const junkReason = currentType === "junk" ? "These messages are already in Junk" : undefined;
-    const deleteReason = currentType === "deleted_items" ? "These messages are already in Deleted Items" : undefined;
+    const deleteLabel = deletesPermanently ? "Delete permanently" : "Delete";
     // A label every selected message already carries starts ticked; one only some of them carry starts
     // partially applied, and is left exactly as it is unless the reader touches that row.
     const appliedToAll = labels.filter((label) => !none && selected.every((m) => m.labelUids?.includes(label.uid)));
     const appliedToSome = labels.filter((label) => selected.some((m) => m.labelUids?.includes(label.uid)) && !appliedToAll.includes(label));
     return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy || !!labelsDisabledReason, title: labelsDisabledReason, note: selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
-                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy || !!moveDisabledReason, title: moveDisabledReason, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
+                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy || !!moveDisabledReason, title: moveDisabledReason, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy, className: actionClassName(deletesPermanently), ...hint(deleteLabel, SHORTCUTS.mail.delete), children: deleteLabel })] })] }));
 }