@rapidmx/web-client 0.28.0 → 0.30.0

package/README.md

@@ -364,6 +364,7 @@ any release.
 | `shared/components/layout/ResponsiveToolbar.js` | A toolbar whose buttons collapse into an overflow menu when space runs out. |
 | `shared/components/admin/usePagedList.js` | Loads a list a page at a time with "Load more", for tables of the plugin's own records. |
 | `shared/notifications/apiErrors.js` | `notifyApiError()`, which shows a failed API call as a notification. |
+| `shared/components/mail/compose/RecipientInput.js` | Compose's address field: chips, and suggestions from the caller's contacts and the server directory as they type. Pass `fetchSuggestions` to narrow them (for example to `searchDirectory()` entries of kind `user`, people with an account). |
 | `shared/components/admin/diagnostics/Sparkline.js` and `MetricTile.js` | A small trend line and a labelled figure, for simple dashboards. |
 
 Every www and admin page receives a `pluginNav` prop from the server. It lists the settings sections, admin sections and
@@ -408,6 +409,8 @@ section above):
 - `components/forms/FormField.js`;
 - `components/overlays/Modal.js` and `components/overlays/Drawer.js`;
 - `components/pickers/MiniDatePicker.js`;
+- `components/pickers/TimeZonePicker.js`, with `util/timeZone.js`'s `timeZoneOptions()` for its `zones`;
+- `mail/directoryApi.js`: `searchDirectory()` and `fetchRecipientSuggestions()`, the address lookups compose uses;
 - `components/avatar/ContactAvatar.js`;
 - `util/apiQuery.js`: `buildQuery()`, for paging a list route.
 

package/apps/shared/components/admin/diagnostics/DiagnosticsManager.tsx

@@ -5,9 +5,16 @@
 import React, { KeyboardEvent, useEffect, useRef, useState } from "react";
 import { HiOutlineArrowDownTray, HiOutlineArrowPath } from "react-icons/hi2";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import { DiagnosticsMetrics, getDiagnosticsMetrics, getDiagnosticsRuntime, getDiagnosticsVersions } from "./diagnosticsApi.js";
+import {
+    DiagnosticsMetrics,
+    getDiagnosticsInformation,
+    getDiagnosticsMetrics,
+    getDiagnosticsRuntime,
+    getDiagnosticsVersions,
+} from "./diagnosticsApi.js";
 import { saveTextFile, SaveFile, timestampedFilename } from "./download.js";
 import { describeError } from "./format.js";
+import InformationPanel from "./InformationPanel.js";
 import { loadInstalledPlugins } from "./InstalledPlugins.js";
 import type { LogSocketFactory } from "./logClient.js";
 import LogsPanel from "./LogsPanel.js";
@@ -16,12 +23,11 @@ import SystemPanel from "./SystemPanel.js";
 import { useDiagnosticsResource } from "./useDiagnosticsResource.js";
 import { useLogStream } from "./useLogStream.js";
 import { useMetricsPolling } from "./useMetricsPolling.js";
-import VersionsPanel from "./VersionsPanel.js";
 
-export type DiagnosticsTab = "versions" | "runtime" | "system" | "logs";
+export type DiagnosticsTab = "information" | "runtime" | "system" | "logs";
 
 const TABS: { id: DiagnosticsTab; label: string }[] = [
-    { id: "versions", label: "Versions" },
+    { id: "information", label: "Information" },
     { id: "runtime", label: "Runtime" },
     { id: "system", label: "System" },
     { id: "logs", label: "Logs" },
@@ -38,16 +44,17 @@ export interface DiagnosticsManagerProps {
 }
 
 /**
- * The Diagnostics page: what is installed (Versions), what it runs on (Runtime), how it is doing right now (System, live) and what
- * the server is logging (Logs, live, with captures). Versions and Runtime are read when the page opens and again on Refresh, and
+ * The Diagnostics page: what is installed and how it is set up (Information), what it runs on (Runtime), how it is doing right now (System, live) and what
+ * the server is logging (Logs, live, with captures). Information and Runtime are read when the page opens and again on Refresh, and
  * are not polled. The live tabs only work while they are open: System polls only on its tab, and the log stream is opened the
  * first time the Logs tab is (and closes with the page, or on Stop).
  */
 export default function DiagnosticsManager({ createLogSocket, saveFile = saveTextFile }: DiagnosticsManagerProps) {
-    const [tab, setTab] = useState<DiagnosticsTab>("versions");
+    const [tab, setTab] = useState<DiagnosticsTab>("information");
     const [reloadKey, setReloadKey] = useState(0);
     const [preparingReport, setPreparingReport] = useState(false);
     const versions = useDiagnosticsResource(getDiagnosticsVersions, reloadKey, "Could not read the server's versions.");
+    const information = useDiagnosticsResource(getDiagnosticsInformation, reloadKey, "Could not read the server's environment and configuration.");
     const runtime = useDiagnosticsResource(getDiagnosticsRuntime, reloadKey, "Could not read the runtime.");
     const plugins = useDiagnosticsResource(loadInstalledPlugins, reloadKey, "Could not read the installed plugins.");
     const polling = useMetricsPolling(tab === "system");
@@ -62,7 +69,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         }
     }, [tab]);
 
-    const refreshing = versions.loading || runtime.loading || plugins.loading;
+    const refreshing = versions.loading || information.loading || runtime.loading || plugins.loading;
 
     function handleTabKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
         const index = TABS.findIndex((item) => item.id === tab);
@@ -83,7 +90,10 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         document.getElementById(tabId(TABS[next].id))?.focus();
     }
 
-    /** Saves the versions, the runtime and the latest metrics sample (asking for one if the System tab has not sampled): no logs. */
+    /**
+     * Saves the versions, the environment and configuration (the server has already withheld every secret), the runtime and the
+     * latest metrics sample (asking for one if the System tab has not sampled): no logs.
+     */
     async function downloadReport() {
         setPreparingReport(true);
         const generatedAt = new Date();
@@ -99,6 +109,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         const report = {
             generatedAt: generatedAt.toISOString(),
             versions: versions.data ?? null,
+            information: information.data ?? null,
             runtime: runtime.data ?? null,
             // Only what each plugin is and which version is loaded: a plugin's settings can hold secrets.
             plugins: plugins.data
@@ -110,6 +121,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
             metrics: metrics ?? null,
             errors: {
                 versions: versions.error ?? null,
+                information: information.error ?? null,
                 runtime: runtime.error ?? null,
                 plugins: plugins.error ?? null,
                 metrics: metricsError ?? null,
@@ -163,7 +175,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
             </div>
 
             <div role="tabpanel" id={panelId(tab)} aria-labelledby={tabId(tab)}>
-                {tab === "versions" && <VersionsPanel versions={versions} plugins={plugins} />}
+                {tab === "information" && <InformationPanel versions={versions} plugins={plugins} information={information} />}
                 {tab === "runtime" && <RuntimePanel runtime={runtime} />}
                 {tab === "system" && <SystemPanel polling={polling} />}
                 {tab === "logs" && <LogsPanel stream={logStream} saveFile={saveFile} />}

package/apps/shared/components/admin/diagnostics/InformationPanel.tsx

@@ -0,0 +1,60 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import type { DiagnosticsInformation, DiagnosticsVersions } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+import ComponentsTable from "./ComponentsTable.js";
+import InstalledPlugins, { InstalledPluginsData } from "./InstalledPlugins.js";
+import PackagesTable from "./PackagesTable.js";
+import ServerVersionCard from "./ServerVersionCard.js";
+import SettingsTable from "./SettingsTable.js";
+
+export interface InformationPanelProps {
+    versions: DiagnosticsResource<DiagnosticsVersions>;
+    plugins: DiagnosticsResource<InstalledPluginsData>;
+    information: DiagnosticsResource<DiagnosticsInformation>;
+}
+
+/**
+ * The Information tab: the server, the install's other containers, the installed plugins, the server's environment variables and
+ * configuration (secrets withheld by the server), and every installed package. The environment and configuration come from their
+ * own request, so a server that predates them leaves the rest of the tab working and says so in their place.
+ */
+export default function InformationPanel({ versions, plugins, information }: InformationPanelProps) {
+    const { data, error, loading } = versions;
+    return (
+        <div className="space-y-6">
+            {error && <Alert>{error}</Alert>}
+            {!data && loading && <p className="text-sm text-text-muted">Loading&hellip;</p>}
+            {data && (
+                <>
+                    <ServerVersionCard server={data.server} />
+                    <ComponentsTable components={data.components ?? []} kubernetes={data.kubernetes ?? { available: false }} />
+                    <InstalledPlugins data={plugins.data} error={plugins.error} loading={plugins.loading} />
+                    {information.error && <Alert>{information.error}</Alert>}
+                    {!information.data && information.loading && <p className="text-sm text-text-muted">Loading the environment&hellip;</p>}
+                    {information.data && (
+                        <>
+                            <SettingsTable
+                                id="diagnostics-environment"
+                                title="Environment variables"
+                                description="The server process's environment. Only variables known to be harmless show their value; the value of a secret, or of anything unrecognized, is withheld by the server and never sent."
+                                settings={information.data.environment ?? []}
+                            />
+                            <SettingsTable
+                                id="diagnostics-configuration"
+                                title="Configuration"
+                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Passwords, tokens, keys, certificates and the credentials in URLs are withheld by the server and never sent."
+                                settings={information.data.configuration ?? []}
+                            />
+                        </>
+                    )}
+                    <PackagesTable packages={data.packages ?? []} />
+                </>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/admin/diagnostics/SettingsTable.tsx

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useMemo, useState } from "react";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import type { DiagnosticsSetting } from "./diagnosticsApi.js";
+
+/** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
+export const SETTINGS_PAGE_SIZE = 100;
+
+/** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
+export const HIDDEN_VALUE = "•••• (hidden)";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export interface SettingsTableProps {
+    /** The section's heading, which also names its filter box and labels the section. */
+    title: string;
+    /** What the section lists, under the heading. */
+    description: string;
+    /** Also the prefix of the heading's element id. */
+    id: string;
+    settings: DiagnosticsSetting[];
+}
+
+/**
+ * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
+ * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
+ */
+export default function SettingsTable({ title, description, id, settings }: SettingsTableProps) {
+    const [query, setQuery] = useState("");
+    const [limit, setLimit] = useState(SETTINGS_PAGE_SIZE);
+
+    const matching = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return settings.filter((item) => needle === "" || `${item.name} ${item.redacted ? "" : (item.value ?? "")}`.toLowerCase().includes(needle));
+    }, [settings, query]);
+    const shown = matching.slice(0, limit);
+    const hiddenCount = settings.filter((item) => item.redacted).length;
+
+    return (
+        <section aria-labelledby={`${id}-heading`} className="rounded-md border border-border bg-surface p-4">
+            <h2 id={`${id}-heading`} className="text-base font-bold uppercase tracking-wide mb-1">
+                {title}
+            </h2>
+            <p className="mb-3 text-xs text-text-muted">{description}</p>
+            <div className="mb-3">
+                <input
+                    type="search"
+                    aria-label={`Filter ${title.toLowerCase()}`}
+                    className={INPUT_CLASS}
+                    placeholder="Filter by name or value"
+                    value={query}
+                    onChange={(event) => {
+                        setQuery(event.target.value);
+                        setLimit(SETTINGS_PAGE_SIZE);
+                    }}
+                />
+            </div>
+            <p role="status" className="mb-2 text-xs text-text-muted">
+                {(matching.length === settings.length ? `${settings.length} settings` : `${matching.length} of ${settings.length} settings match`) +
+                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "")}
+            </p>
+            {matching.length === 0 ? (
+                <p className="text-sm text-text-muted">{settings.length === 0 ? "Nothing is set." : "No settings match."}</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Name", "Value"].map((heading) => (
+                                    <th
+                                        key={heading}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {heading}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {shown.map((item) => (
+                                <tr key={item.name}>
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">{item.name}</td>
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">
+                                        {item.redacted ? <span className="text-text-muted">{HIDDEN_VALUE}</span> : item.value}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+            {shown.length < matching.length && (
+                <div className="mt-3 flex items-center gap-3">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setLimit(limit + SETTINGS_PAGE_SIZE)}>
+                        Show more
+                    </Button>
+                    <span className="text-xs text-text-muted">
+                        Showing {shown.length} of {matching.length}
+                    </span>
+                </div>
+            )}
+        </section>
+    );
+}

package/apps/shared/components/admin/diagnostics/diagnosticsApi.ts

@@ -5,7 +5,7 @@
 import { apiFetch } from "../../../../../lib/util/api.js";
 
 /**
- * The client of the server's `/admin/diagnostics/*` endpoints (`versions`, `runtime`, `metrics`). All three are GET,
+ * The client of the server's `/admin/diagnostics/*` endpoints (`versions`, `information`, `runtime`, `metrics`). All four are GET,
  * trusted-administrator only and `@RequiresElevation()`: an elevated token is required (403 `api-104`, see
  * `../elevation.ts`), and any other 403 means the caller is not an administrator. The server may leave any optional
  * field out, so a caller reads them defensively.
@@ -75,6 +75,22 @@ export interface DiagnosticsVersions {
     kubernetes: { available: boolean; reason?: string };
 }
 
+/**
+ * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds every secret-like
+ * or unrecognized value and never sends it, so there is nothing for the client to hide.
+ */
+export interface DiagnosticsSetting {
+    name: string;
+    value?: string;
+    redacted: boolean;
+}
+
+/** The server's environment variables and effective configuration, each sorted by name. */
+export interface DiagnosticsInformation {
+    environment: DiagnosticsSetting[];
+    configuration: DiagnosticsSetting[];
+}
+
 /** A node that runs some of this install's pods, derived from the pods: nothing else about the node is readable. */
 export interface DiagnosticsNode {
     name: string;
@@ -205,6 +221,14 @@ export function getDiagnosticsVersions(): Promise<DiagnosticsVersions> {
     return apiFetch<DiagnosticsVersions>("/admin/diagnostics/versions");
 }
 
+/**
+ * The server's environment variables and configuration, secrets withheld. A server that predates it answers 404, which the
+ * Information tab reports beside the rest of the tab, which still works.
+ */
+export function getDiagnosticsInformation(): Promise<DiagnosticsInformation> {
+    return apiFetch<DiagnosticsInformation>("/admin/diagnostics/information");
+}
+
 /** The Kubernetes version, and the nodes the install's pods run on. */
 export function getDiagnosticsRuntime(): Promise<DiagnosticsRuntime> {
     return apiFetch<DiagnosticsRuntime>("/admin/diagnostics/runtime");

package/apps/shared/components/calendar/CalendarSearchBox.tsx

@@ -0,0 +1,83 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineChevronDown, HiOutlineChevronUp, HiOutlineMagnifyingGlass, HiOutlineXMark } from "react-icons/hi2";
+
+export interface CalendarSearchBoxProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Enter: run the search now rather than after the typing pause (and, when it has already run, step on to the next result). */
+    onSubmit: (backwards: boolean) => void;
+    /** The clear button or Escape: leave search mode. */
+    onClear: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    /** Whether a search is running (its query is not blank); the result count and stepping buttons show only then. */
+    active: boolean;
+    /** How many occurrences match. */
+    count: number;
+    /** The current result's place in the list (0-based), `-1` when none is current. */
+    position: number;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+
+/** The text announced (and, compactly, shown) for a search's results. */
+export function searchStatusText(count: number, position: number): string {
+    if (count === 0) {
+        return "No matches";
+    }
+    return position >= 0 ? `${position + 1} of ${count}` : `${count} ${count === 1 ? "result" : "results"}`;
+}
+
+/** The calendar toolbar's search: a magnifier, the query, a clear button and - while searching - the match count with Previous/Next match buttons. */
+export default function CalendarSearchBox({ value, onChange, onSubmit, onClear, onPrevious, onNext, active, count, position, inputRef }: CalendarSearchBoxProps) {
+    const status = searchStatusText(count, position);
+    const stepClass = "w-6 h-6 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:hover:bg-transparent";
+    return (
+        <div role="search" className="ml-auto flex items-center gap-1 h-8 px-2 min-w-0 flex-1 md:flex-none md:w-80 rounded-sm border border-border bg-surface focus-within:border-primary">
+            <HiOutlineMagnifyingGlass size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
+            <input
+                ref={inputRef}
+                type="text"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        onSubmit(e.shiftKey);
+                    } else if (e.key === "Escape") {
+                        e.preventDefault();
+                        onClear();
+                    }
+                }}
+                placeholder="Search events"
+                aria-label="Search events"
+                autoComplete="off"
+                className="flex-1 min-w-0 bg-transparent text-sm outline-none placeholder:text-text-muted"
+            />
+            {active && (
+                <>
+                    <span aria-hidden="true" className="shrink-0 text-xs text-text-muted whitespace-nowrap">
+                        {status}
+                    </span>
+                    <button type="button" className={stepClass} aria-label="Previous match" title="Previous match (Shift+Enter)" disabled={count === 0} onClick={onPrevious}>
+                        <HiOutlineChevronUp size={16} aria-hidden="true" />
+                    </button>
+                    <button type="button" className={stepClass} aria-label="Next match" title="Next match (Enter)" disabled={count === 0} onClick={onNext}>
+                        <HiOutlineChevronDown size={16} aria-hidden="true" />
+                    </button>
+                </>
+            )}
+            {value !== "" && (
+                <button type="button" className={stepClass} aria-label="Clear search" title="Clear search (Esc)" onClick={onClear}>
+                    <HiOutlineXMark size={16} aria-hidden="true" />
+                </button>
+            )}
+            <span role="status" aria-live="polite" className="sr-only">
+                {active ? status : ""}
+            </span>
+        </div>
+    );
+}

package/apps/shared/components/calendar/EventMatchNav.tsx

@@ -0,0 +1,72 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect } from "react";
+import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi2";
+import { isTextEntry } from "../../keyboard/targets.js";
+
+export interface EventMatchNavProps {
+    onPrevious: () => void;
+    onNext: () => void;
+    /** Whether there is an event before / after this one to go to (default: yes). A button with none is disabled, and its arrow key does nothing. */
+    canPrevious?: boolean;
+    canNext?: boolean;
+    /** What is stepped through, for the buttons' names: the matches of a search, or the events of the calendar. */
+    noun?: "match" | "event";
+}
+
+/**
+ * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
+ * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
+ * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
+ * a field is taking them.
+ */
+export default function EventMatchNav({ onPrevious, onNext, canPrevious = true, canNext = true, noun = "match" }: EventMatchNavProps) {
+    useEffect(() => {
+        function handleKeyDown(event: KeyboardEvent) {
+            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || isTextEntry(event.target)) {
+                return;
+            }
+            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+                return;
+            }
+            event.preventDefault();
+            if (event.key === "ArrowLeft" ? canPrevious : canNext) {
+                (event.key === "ArrowLeft" ? onPrevious : onNext)();
+            }
+        }
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [onPrevious, onNext, canPrevious, canNext]);
+
+    // The card is centered, at most 480px wide (`DETAILS_WIDTH`): 240px either side of the middle, then a gap and the button itself.
+    const buttonClass =
+        "fixed bottom-4 md:bottom-auto md:top-1/2 md:-translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-surface border border-border shadow-modal text-text-muted";
+    const enabledClass = "hover:bg-surface-alt hover:text-text";
+    const disabledClass = "opacity-40 cursor-not-allowed";
+    return (
+        <>
+            <button
+                type="button"
+                aria-label={`Previous ${noun}`}
+                aria-disabled={canPrevious ? undefined : true}
+                title={`Previous ${noun} (Left arrow)`}
+                onClick={canPrevious ? onPrevious : undefined}
+                className={`${buttonClass} ${canPrevious ? enabledClass : disabledClass} left-4 md:left-[calc(50vw-296px)]`}
+            >
+                <HiOutlineChevronLeft size={20} aria-hidden="true" />
+            </button>
+            <button
+                type="button"
+                aria-label={`Next ${noun}`}
+                aria-disabled={canNext ? undefined : true}
+                title={`Next ${noun} (Right arrow)`}
+                onClick={canNext ? onNext : undefined}
+                className={`${buttonClass} ${canNext ? enabledClass : disabledClass} right-4 md:right-[calc(50vw-296px)]`}
+            >
+                <HiOutlineChevronRight size={20} aria-hidden="true" />
+            </button>
+        </>
+    );
+}

package/apps/shared/components/calendar/EventModal.tsx

@@ -10,7 +10,9 @@ import Button from "../../../../lib/components/buttons/Button.js";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
+import EventMatchNav from "./EventMatchNav.js";
 import EventShell, { EventAnchor, EventShellVariant } from "./EventShell.js";
+import SlideIn, { SlideFrom } from "./SlideIn.js";
 import { QuickTab } from "./QuickCreateTabs.js";
 
 export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
@@ -51,6 +53,18 @@ export interface EventModalProps {
     /** Where the booking plugin's Settings pages are (`/settings/booking-types`) when it is running: a new event then has an Appointment
      * schedule tab, and its More options opens the plugin's own new-link page. Without it there are only the Event and Task tabs. */
     bookingHref?: string;
+    /** The existing event's card gets Previous / Next buttons either side, which call these: the previous or next match while the calendar's
+     * search is running, the previous or next event otherwise (`canPrevious` / `canNext` false: none that way, so the button is disabled). */
+    matchNav?: {
+        onPrevious: () => void;
+        onNext: () => void;
+        canPrevious?: boolean;
+        canNext?: boolean;
+        noun?: "match" | "event";
+        /** The step that moved the card on, if one did: the card slides in from the side it came from - left for a Previous, right for a Next - when
+         * `occurrenceKey` is the event now showing (a card that changed any other way does not slide). */
+        slide?: { from: SlideFrom; occurrenceKey: string };
+    };
     onSaved: () => void;
     onDeleted: () => void;
 }
@@ -92,6 +106,7 @@ export default function EventModal({
     initialAllDay,
     anchor,
     bookingHref,
+    matchNav,
     onSaved,
     onDeleted,
 }: EventModalProps) {
@@ -188,19 +203,25 @@ export default function EventModal({
                     }
                 />
             ) : (
-                <EventDetails
-                    occurrence={occurrence}
-                    isInvited={isInvited}
-                    myResponse={canRespond ? myAttendee.responseStatus : undefined}
-                    isOwnAddress={isOwnAddress}
-                    calendarName={calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name}
-                    calendarColor={folderColors?.[occurrence.folderUid]}
-                    onClose={onClose}
-                    onModify={() => setEditing(true)}
-                    onSaved={onSaved}
-                    onDeleted={onDeleted}
-                />
+                <SlideIn
+                    key={occurrence.occurrenceKey}
+                    from={matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined}
+                >
+                    <EventDetails
+                        occurrence={occurrence}
+                        isInvited={isInvited}
+                        myResponse={canRespond ? myAttendee.responseStatus : undefined}
+                        isOwnAddress={isOwnAddress}
+                        calendarName={calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name}
+                        calendarColor={folderColors?.[occurrence.folderUid]}
+                        onClose={onClose}
+                        onModify={() => setEditing(true)}
+                        onSaved={onSaved}
+                        onDeleted={onDeleted}
+                    />
+                </SlideIn>
             )}
+            {!isForm && matchNav && <EventMatchNav onPrevious={matchNav.onPrevious} onNext={matchNav.onNext} canPrevious={matchNav.canPrevious} canNext={matchNav.canNext} noun={matchNav.noun} />}
         </EventShell>
     );
 }