@rapidmx/web-client 0.16.0 → 0.17.0

package/apps/www/settings/blocked-senders/index.tsx

@@ -0,0 +1,303 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
+import React, { FormEvent, useId, useRef, useState } from "react";
+import { blockedSendersOf, isSharedWithMe, safeSendersOf } from "@rapidmx/react-shared/mail/mailApi.js";
+import {
+    MAX_SENDER_LIST_ENTRIES,
+    SenderListKind,
+    SenderListsChange,
+    addBlockedSender,
+    addSafeSender,
+    checkSenderEntry,
+    removeBlockedSender,
+    removeSafeSender,
+} from "@rapidmx/react-shared/mail/senderListsApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { useMailboxUpdateAccess } from "../../../shared/mail/useMailboxUpdateAccess.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+
+export type SettingsBlockedSendersPageProps = Omit<SettingsShellProps, "active">;
+
+function SettingsBlockedSendersPage(props: SettingsBlockedSendersPageProps) {
+    return (
+        <SettingsShell {...props} active="blocked-senders">
+            <BlockedSendersContent />
+        </SettingsShell>
+    );
+}
+
+/** What each list is called and does, in the words the page uses for it. */
+const COPY: Record<SenderListKind, { title: string; add: string; addLabel: string; verb: string; other: string; explain: string; empty: string }> = {
+    blocked: {
+        title: "Blocked senders",
+        add: "Block",
+        addLabel: "Add a blocked sender",
+        verb: "Blocked",
+        other: "safe senders",
+        explain: "Mail from these addresses and domains goes to Junk Email, without the spam filter or your filters looking at it.",
+        empty: "No blocked senders.",
+    },
+    safe: {
+        title: "Safe senders",
+        add: "Trust",
+        addLabel: "Add a safe sender",
+        verb: "Trusted",
+        other: "blocked senders",
+        explain:
+            "Mail from these addresses and domains is not sent to Junk Email because of the spam filter's verdict, as long as it passes authentication: " +
+            "a valid signature from the sender's own domain. Mail that fails it, carries a virus or is quarantined by policy is still kept out.",
+        empty: "No safe senders.",
+    },
+};
+
+const CAP = MAX_SENDER_LIST_ENTRIES.toLocaleString("en-US");
+
+interface ListSectionProps {
+    kind: SenderListKind;
+    entries: string[];
+    /** The other list, to say when an entry moves here from it. */
+    otherEntries: string[];
+    /** The reader's own addresses: they are not blocked. */
+    ownAddresses: string[];
+    editable: boolean;
+    onAdd: (entry: string) => Promise<SenderListsChange | undefined>;
+    onRemove: (entry: string) => Promise<SenderListsChange | undefined>;
+}
+
+/** One list: its count, the form that adds an address or domain to it, and its entries with a Remove button each. */
+function ListSection({ kind, entries, otherEntries, ownAddresses, editable, onAdd, onRemove }: ListSectionProps) {
+    const copy = COPY[kind];
+    const id = useId();
+    const headingRef = useRef<HTMLHeadingElement>(null);
+    const [value, setValue] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [status, setStatus] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+    const full = entries.length >= MAX_SENDER_LIST_ENTRIES;
+    const sorted = [...entries].sort();
+
+    async function handleAdd(e: FormEvent) {
+        e.preventDefault();
+        setStatus(null);
+        const checked = checkSenderEntry(value);
+        if (!checked.ok) {
+            setError(checked.message);
+            return;
+        }
+        if (kind === "blocked" && ownAddresses.includes(checked.entry)) {
+            setError("That is one of your own addresses, so it cannot be blocked.");
+            return;
+        }
+        setError(null);
+        setBusy(true);
+        try {
+            const moved = otherEntries.includes(checked.entry);
+            const result = await onAdd(checked.entry);
+            if (result) {
+                setValue("");
+                setStatus(
+                    !result.changed
+                        ? `${checked.entry} is already on this list.`
+                        : `${copy.verb} ${checked.entry}.${moved ? ` It was on your ${copy.other} and was moved here.` : ""}`,
+                );
+            }
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    async function handleRemove(entry: string) {
+        setStatus(null);
+        setBusy(true);
+        try {
+            if (await onRemove(entry)) {
+                setStatus(`Removed ${entry}.`);
+                // The button that was pressed is gone with its entry: focus goes to the list's heading rather than back to the page's start.
+                headingRef.current?.focus();
+            }
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <section aria-labelledby={`${id}-title`} className="min-w-0 rounded-md border border-border bg-surface p-4">
+            <h2 id={`${id}-title`} ref={headingRef} tabIndex={-1} className="text-base font-bold tracking-tight outline-none">
+                {copy.title}
+            </h2>
+            <p className="text-xs text-text-muted mt-0.5 mb-2">
+                {entries.length.toLocaleString("en-US")} of {CAP}
+            </p>
+            <p className="text-sm text-text-muted mb-3">{copy.explain}</p>
+
+            {editable && (
+                <form onSubmit={handleAdd} noValidate className="mb-3">
+                    <label htmlFor={`${id}-entry`} className="block text-sm font-semibold mb-1.5 text-text">
+                        {copy.addLabel}
+                    </label>
+                    <div className="flex flex-col sm:flex-row gap-2">
+                        <input
+                            id={`${id}-entry`}
+                            type="text"
+                            inputMode="email"
+                            autoComplete="off"
+                            autoCapitalize="none"
+                            spellCheck={false}
+                            value={value}
+                            disabled={full || busy}
+                            placeholder="name@example.com or example.com"
+                            aria-invalid={error ? true : undefined}
+                            aria-describedby={`${id}-hint${error ? ` ${id}-error` : ""}`}
+                            onChange={(e) => {
+                                setValue(e.target.value);
+                                setError(null);
+                            }}
+                            className="flex-1 min-w-0 text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55"
+                        />
+                        <Button type="submit" className="!w-auto shrink-0" disabled={full || busy} loading={busy}>
+                            {copy.add}
+                        </Button>
+                    </div>
+                    <p id={`${id}-hint`} className="text-xs text-text-muted mt-1">
+                        A domain such as example.com covers every address at it, but not its subdomains. An address already on your {copy.other} moves here.
+                    </p>
+                    {error && (
+                        <p id={`${id}-error`} role="alert" className="text-sm text-danger mt-1">
+                            {error}
+                        </p>
+                    )}
+                    {full && (
+                        <p className="text-sm text-danger mt-1">
+                            This list is full: it holds {CAP} senders. Remove one to add another.
+                        </p>
+                    )}
+                </form>
+            )}
+
+            <p role="status" className="text-sm text-success font-medium mb-2 empty:hidden">
+                {status}
+            </p>
+
+            {sorted.length === 0 ? (
+                <p className="text-sm text-text-muted">{copy.empty}</p>
+            ) : (
+                <ul aria-label={copy.title} className="divide-y divide-border border-y border-border">
+                    {sorted.map((entry) => (
+                        <li key={entry} className="flex items-center justify-between gap-3 py-2">
+                            <span className="min-w-0 break-all text-sm">
+                                {entry}
+                                {entry.startsWith("@") && <span className="block text-xs text-text-muted">Everyone at {entry.slice(1)}</span>}
+                            </span>
+                            {editable && (
+                                <button
+                                    type="button"
+                                    disabled={busy}
+                                    aria-label={`Remove ${entry} from ${copy.title.toLowerCase()}`}
+                                    onClick={() => void handleRemove(entry)}
+                                    className="shrink-0 text-sm font-medium text-primary-dark hover:underline disabled:opacity-55"
+                                >
+                                    Remove
+                                </button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </section>
+    );
+}
+
+function BlockedSendersContent() {
+    const { mailboxUid } = useSettingsShell();
+    // A mailbox chosen in the shell's switcher is a different set of lists: the content starts over for it.
+    return <ListsContent key={mailboxUid} />;
+}
+
+function ListsContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has resolved to one of them - same established
+    // non-null pattern as `apps/www/settings/read-receipts/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
+    const writable = useMailboxUpdateAccess(mailbox);
+    // The lists are the owner's (and a manager's) to change; the server does not say which of the two a delegate is, so one who may update is offered the
+    // forms and told what a refusal means.
+    const delegated = isSharedWithMe(mailbox);
+    // A server before the lists sends neither.
+    const supported = mailbox.blockedSenders !== undefined || mailbox.safeSenders !== undefined;
+    const [blocked, setBlocked] = useState(blockedSendersOf(mailbox));
+    const [safe, setSafe] = useState(safeSendersOf(mailbox));
+    const ownAddresses = mailboxes.flatMap((mb) => [mb.primarySmtpAddress, ...(mb.aliasAddresses ?? [])]).filter((a) => !!a).map((a) => a.toLowerCase());
+
+    async function change(action: () => Promise<SenderListsChange>, context: string): Promise<SenderListsChange | undefined> {
+        try {
+            const result = await action();
+            // The answer carries both lists as they now are: adding to one takes the entry off the other.
+            setBlocked(result.blockedSenders);
+            setSafe(result.safeSenders);
+            return result;
+        } catch (err) {
+            notifyApiError(err, context);
+            return undefined;
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-4 sm:p-6">
+            <div className="max-w-4xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Blocked and safe senders</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    These lists belong to <span className="font-medium text-text">{mailbox.displayName}</span> ({mailbox.primarySmtpAddress}). Each entry is an email address or a domain. An
+                    entry is on one list at a time: adding it to one takes it off the other.
+                </p>
+
+                {!supported ? (
+                    <p role="status" className="text-sm text-text-muted">
+                        This server does not support blocked and safe senders yet.
+                    </p>
+                ) : (
+                    <>
+                        {!writable && (
+                            <p role="status" className="text-sm rounded-md border border-border bg-surface-alt px-3 py-2 mb-4">
+                                You have view-only access to this mailbox, so you can see these lists but not change them.
+                            </p>
+                        )}
+                        {writable && delegated && (
+                            <p className="text-sm text-text-muted mb-4">
+                                Only this mailbox&rsquo;s owner, or someone with full access to it, can change these lists. If you cannot, the server says so when you try.
+                            </p>
+                        )}
+                        <div className="grid gap-4 md:grid-cols-2">
+                            <ListSection
+                                kind="blocked"
+                                entries={blocked}
+                                otherEntries={safe}
+                                ownAddresses={ownAddresses}
+                                editable={writable}
+                                onAdd={(entry) => change(() => addBlockedSender(mailbox.uid, entry), "Couldn't block this sender")}
+                                onRemove={(entry) => change(() => removeBlockedSender(mailbox.uid, entry), "Couldn't unblock this sender")}
+                            />
+                            <ListSection
+                                kind="safe"
+                                entries={safe}
+                                otherEntries={blocked}
+                                ownAddresses={ownAddresses}
+                                editable={writable}
+                                onAdd={(entry) => change(() => addSafeSender(mailbox.uid, entry), "Couldn't add this safe sender")}
+                                onRemove={(entry) => change(() => removeSafeSender(mailbox.uid, entry), "Couldn't remove this safe sender")}
+                            />
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default SettingsBlockedSendersPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/encryption/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
@@ -1284,4 +1284,7 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
     );
 }
 
-export default routedPage("/settings/encryption", SettingsEncryptionPage);
+export default SettingsEncryptionPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/filters/[uid].tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Folder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -173,4 +173,7 @@ function MailFilterDetailContent({ uid }: { uid: string }) {
     );
 }
 
-export default routedPage("/settings/filters/:uid", MailFilterDetailPage);
+export default MailFilterDetailPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/filters/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { MailFilterRule, listMailFilterRules } from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
@@ -99,4 +99,7 @@ function FiltersContent() {
     );
 }
 
-export default routedPage("/settings/filters", SettingsFiltersPage);
+export default SettingsFiltersPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/filters/new/index.tsx

@@ -2,8 +2,8 @@
 // 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 React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Folder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -33,17 +33,39 @@ function NewMailFilterPage(props: NewMailFilterPageProps) {
     );
 }
 
+/**
+ * What "Create rule" on a message (the reading pane's More actions menu) asks this page to start with: `?from=` and `?subject=` become the
+ * filter's "From contains" and "Subject contains" conditions, and the name says whose mail it is. The reader keeps, changes or removes them.
+ */
+function prefillFromSearch(search: string): { name: string; conditions: MailFilterConditions } {
+    const params = new URLSearchParams(search);
+    const from = params.get("from")?.trim();
+    const subject = params.get("subject")?.trim();
+    const conditions: MailFilterConditions = {};
+    if (from) {
+        conditions.fromContains = [from];
+    }
+    if (subject) {
+        conditions.subjectContains = [subject];
+    }
+    return { name: from ? `Messages from ${from}` : "", conditions };
+}
+
 function NewMailFilterForm() {
     const navigate = useNavigate();
     const { mailboxUid } = useSettingsShell();
+    // Read once, when the form opens, and what the reader then edits is theirs. From the browser's own location rather than the router's (which a shallow
+    // navigation could change under the form): this form is only mounted once the shell has fetched the mailbox, in the browser, so there is no
+    // server render for the two to disagree with.
+    const [prefill] = useState(() => prefillFromSearch(window.location.search));
     const [folders, setFolders] = useState<Folder[] | null>(null);
     const [folderError, setFolderError] = useState<string | null>(null);
-    const [name, setName] = useState("");
+    const [name, setName] = useState(prefill.name);
     const [rule, setRule] = useState<RuleBuilderValue<MailFilterConditions, MailFilterAction>>({
         enabled: true,
         sequence: 0,
         stopProcessingRules: false,
-        conditions: {},
+        conditions: prefill.conditions,
         actions: [],
     });
     const [error, setError] = useState<string | null>(null);
@@ -137,4 +159,7 @@ function NewMailFilterForm() {
     );
 }
 
-export default routedPage("/settings/filters/new", NewMailFilterPage);
+export default NewMailFilterPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/labels/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Label, createLabel, deleteLabel, listLabels, updateLabel } from "@rapidmx/react-shared/mail/labelsApi.js";
@@ -201,4 +201,7 @@ function LabelsContent() {
     );
 }
 
-export default routedPage("/settings/labels", SettingsLabelsPage);
+export default SettingsLabelsPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/privacy/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { ChangeEvent, FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
@@ -489,4 +489,7 @@ function ErasureSection({ mailboxLabel }: { mailboxLabel: string }) {
     );
 }
 
-export default routedPage("/settings/privacy", SettingsPrivacyPage);
+export default SettingsPrivacyPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/profile/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, useMemo, useState } from "react";
 import { FreeBusyVisibility, freeBusyVisibilityOf, isSharedWithMe, updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import { DEFAULT_TIME_ZONE, deviceTimeZone, timeZoneOptions } from "@rapidmx/react-shared/util/timeZone.js";
@@ -245,4 +245,7 @@ function ProfileContent() {
     );
 }
 
-export default routedPage("/settings/profile", SettingsProfilePage);
+export default SettingsProfilePage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/read-receipts/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, useState } from "react";
 import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
@@ -144,4 +144,7 @@ function ReadReceiptsContent() {
     );
 }
 
-export default routedPage("/settings/read-receipts", SettingsReadReceiptsPage);
+export default SettingsReadReceiptsPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/sharing/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
@@ -253,4 +253,7 @@ function SharingContent() {
     );
 }
 
-export default routedPage("/settings/sharing", SettingsSharingPage);
+export default SettingsSharingPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/signatures/[uid].tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { MailSignature, getMailSignature, listMailSignatures, updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
@@ -169,4 +169,7 @@ function SignatureDetailContent({ uid }: { uid: string }) {
     );
 }
 
-export default routedPage("/settings/signatures/:uid", SignatureDetailPage);
+export default SignatureDetailPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/signatures/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { MailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
@@ -85,4 +85,7 @@ function SignaturesContent() {
     );
 }
 
-export default routedPage("/settings/signatures", SettingsSignaturesPage);
+export default SettingsSignaturesPage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/settings/signatures/new/index.tsx

@@ -2,8 +2,8 @@
 // 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 React, { FormEvent, useState } from "react";
 import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { clearPreviousDefaults } from "../signatureDefaults.js";
@@ -132,4 +132,7 @@ function NewSignatureForm() {
     );
 }
 
-export default routedPage("/settings/signatures/new", NewSignaturePage);
+export default NewSignaturePage;
+
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/apps/www/tasks/index.tsx

@@ -2,7 +2,7 @@
 // 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 React, { FormEvent, 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";
@@ -404,6 +404,8 @@ function TasksContent() {
                                     {mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
                                     <a
                                         href={`/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`}
+                                        data-router-shallow=""
+                                        data-router-prefetch="false"
                                         className="font-medium text-primary-dark hover:underline"
                                     >
                                         View that mailbox&rsquo;s tasks
@@ -646,4 +648,7 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }:
     );
 }
 
-export default routedPage("/tasks", TasksPage);
+export default TasksPage;
+
+/** The tab's title: `Brand: Tasks` (see `pageTitle()`). */
+export const title = pageTitle("Tasks");

package/dist/apps/admin/distribution-lists/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 { createDistributionList } from "@rapidmx/react-shared/admin/distributionListsApi.js";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
@@ -15,6 +16,7 @@ export default function NewDistributionListPage(props) {
     return (_jsx(AdminShell, { ...props, active: "distributionLists", children: _jsx(NewDistributionListForm, {}) }));
 }
 function NewDistributionListForm() {
+    const { navigate } = useRouter();
     const [primarySmtpAddress, setPrimarySmtpAddress] = useState("");
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
@@ -38,7 +40,7 @@ function NewDistributionListForm() {
                 name: name.trim(),
                 description: description.trim() || undefined,
             });
-            window.location.href = `/admin/distribution-lists/${encodeURIComponent(list.uid)}`;
+            void navigate(`/admin/distribution-lists/${encodeURIComponent(list.uid)}`);
         }
         catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the distribution list.");