@rapidmx/web-client 0.9.0 → 0.10.0

package/apps/shared/components/mail/LazyReadingPane.tsx

@@ -0,0 +1,115 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ComponentType, useEffect, useState } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import type MessageDetailPaneType from "./MessageDetailPane.js";
+import type ConversationThreadPaneType from "./ConversationThreadPane.js";
+
+/**
+ * The reading pane (`MessageDetailPane`, and the thread pane that stacks it) is only rendered once a message is selected, and
+ * it is the heaviest piece of the inbox after the compose window - message security, the body sanitizer, the labels and move
+ * menus - so it is a chunk of its own, downloaded when the browser is idle after the list has loaded (`prefetchReadingPane()`)
+ * and, at the latest, on the first selection. Nothing about the pane changes: these wrap the same components, with a skeleton
+ * while the chunk loads and a reload prompt if it can't.
+ *
+ * Deliberately not `React.lazy()` + `<Suspense>`: a boundary that has shown its fallback holds the content back for up to 300 ms
+ * after the code arrives (React's fallback throttle), which would put a fifth of a second between a click and a pane whose
+ * code was already fetched. This reads the loaded component synchronously when there is one, so an already-loaded pane renders
+ * on the click's own frame, and it can retry a failed download.
+ */
+function lazyComponent<P extends object>(load: () => Promise<{ default: ComponentType<P> }>) {
+    let loaded: ComponentType<P> | undefined;
+    let loading: Promise<ComponentType<P>> | undefined;
+
+    /** Starts (once) loading the component's code. Rejects if it can't be downloaded - and then a later call tries again. */
+    function start(): Promise<ComponentType<P>> {
+        loading ??= load().then(
+            (module) => (loaded = module.default),
+            (err) => {
+                loading = undefined;
+                throw err;
+            },
+        );
+        return loading;
+    }
+
+    function Lazy(props: P) {
+        const [, setLoadedNow] = useState(0);
+        const [failed, setFailed] = useState(false);
+        useEffect(() => {
+            if (loaded) {
+                return;
+            }
+            let cancelled = false;
+            start().then(
+                () => !cancelled && setLoadedNow((n) => n + 1),
+                () => !cancelled && setFailed(true),
+            );
+            return () => {
+                cancelled = true;
+            };
+        }, []);
+        if (loaded) {
+            const Component = loaded;
+            return <Component {...props} />;
+        }
+        return failed ? <ChunkFailed /> : <PaneSkeleton />;
+    }
+
+    return { Lazy, start };
+}
+
+function PaneSkeleton() {
+    return (
+        <div role="status" aria-busy="true" className="flex-1 p-6 flex flex-col gap-3">
+            <span className="sr-only">Loading the message</span>
+            <Skeleton width="w-2/3" height="h-6" />
+            <Skeleton width="w-1/3" />
+            <Skeleton height="h-40" />
+        </div>
+    );
+}
+
+/** A chunk that can't be downloaded (offline, or replaced by a deploy since this page loaded) is the one failure a reading
+ * pane can't recover from by itself: say so, with the fix, rather than leaving a blank pane. */
+function ChunkFailed() {
+    return (
+        <div className="flex-1 p-6">
+            <Alert>
+                <p className="mb-2">This part of the page couldn&rsquo;t be loaded. Check your connection, then reload.</p>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => window.location.reload()}>
+                    Reload
+                </Button>
+            </Alert>
+        </div>
+    );
+}
+
+const messageDetailPane = lazyComponent<React.ComponentProps<typeof MessageDetailPaneType>>(() => import("./MessageDetailPane.js"));
+const conversationThreadPane = lazyComponent<React.ComponentProps<typeof ConversationThreadPaneType>>(() => import("./ConversationThreadPane.js"));
+
+/** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
+export function prefetchReadingPane(): void {
+    messageDetailPane.start().catch(() => undefined);
+    conversationThreadPane.start().catch(() => undefined);
+}
+
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export function LazyMessageDetailPane(props: React.ComponentProps<typeof MessageDetailPaneType>) {
+    if (!props.message) {
+        return <p className="p-8 text-sm text-text-muted">Select a message to read it.</p>;
+    }
+    return <messageDetailPane.Lazy {...props} />;
+}
+
+export function LazyConversationThreadPane(props: React.ComponentProps<typeof ConversationThreadPaneType>) {
+    if (!props.conversation) {
+        return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
+    }
+    return <conversationThreadPane.Lazy {...props} />;
+}

package/apps/shared/components/mail/MailSelectionBar.tsx

@@ -1,222 +1,235 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useState } from "react";
-import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import LabelMenuButton from "./labelMenu.js";
-import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
-
-export interface MailSelectionBarProps {
-    selected: Message[];
-    /** Every message currently listed - what "Select all" selects and what `allSelected` is measured against. */
-    listed: Message[];
-    /** What the bar *counts*, when the rows being ticked aren't messages themselves: the conversation list
-     * ticks conversations, each standing for several messages, so "3 conversations selected" is what the
-     * reader picked while `selected` stays the messages every action below acts on. Left out by the flat
-     * message list, which counts `selected`/`listed` directly. */
-    totals?: { selected: number; listed: number; noun: string };
-    onSelectAll: () => void;
-    onClearSelection: () => void;
-    /** Leaves select mode entirely (and clears the selection). */
-    onCancel: () => void;
-    folders: Folder[];
-    currentFolderUid?: string;
-    /** Every label this mailbox has, for the Apply label action. */
-    labels: Label[];
-    /** The mailbox a label created from Apply label belongs to. */
-    mailboxUid: string;
-    onLabelCreated: (label: Label) => void;
-    /** A folder created from the Move to prompt, for the caller's own folder list and the sidebar. */
-    onFolderCreated: (folder: Folder) => void;
-    /** Sets the selection's labels: every message ends up with `labelUids`, plus whichever of
-     * `keepPartial` it already had (those rows were left partially applied, so each message keeps what
-     * it has). */
-    onApplyLabels: (labelUids: string[], keepPartial: string[]) => void;
-    onSetRead: (read: boolean) => void;
-    onSetFlagged: (flagged: boolean) => void;
-    onArchive: () => void;
-    /** Moves the selection into `folderUid`, resolving once the bulk update has settled. It resolves
-     * whether or not that update was rejected: a bulk update is applied element by element, so a failure
-     * is explained in this bar (along with the reload it triggers) rather than in the prompt, which would
-     * be claiming the move simply didn't happen. */
-    onMoveTo: (folderUid: string) => Promise<void>;
-    onReportJunk: () => void;
-    onDelete: () => void;
-    /** 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;
-    error: string | null;
-}
-
-function actionClassName(): string {
-    return "px-2 py-1 rounded-md text-sm 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
- * 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,
-    error,
-}: MailSelectionBarProps) {
-    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
-    // messages are still being fetched has nothing for an action to act on yet.
-    const none = selectedCount === 0 || selected.length === 0;
-    const allSelected = listedCount > 0 && selectedCount === listedCount;
-    const currentType = folders.find((folder) => folder.uid === currentFolderUid)?.type;
-    const moveTargets = folders.filter((folder) => MOVE_TARGET_TYPES.has(folder.type) && folder.uid !== currentFolderUid);
-    // The same prompt the reading pane's own Move to opens, so one list of destinations and one way to
-    // create a folder serve both.
-    const [movePrompt, setMovePrompt] = useState(false);
-
-    // None of the three needs its folder to exist first - the caller creates or lazily provisions it (see
-    // `resolveFolderOfType()` and `bulkArchive()` in `apps/www/index.tsx`) - so the only thing that disables
-    // 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;
-
-    // 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 (
-        <div className="border-b border-border">
-            <MoveToFolderDialog
-                open={movePrompt}
-                onClose={() => setMovePrompt(false)}
-                mailboxUid={mailboxUid}
-                folders={folders}
-                currentFolderUid={currentFolderUid}
-                count={selected.length}
-                onMove={onMoveTo}
-                onFolderCreated={onFolderCreated}
-            />
-            <div className="flex items-center gap-2 px-3 py-1.5 bg-surface-alt">
-                <span aria-live="polite" className="text-sm font-semibold text-text">
-                    {selectedCount}
-                    {totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : ""} selected
-                </span>
-                <button type="button" onClick={onSelectAll} disabled={allSelected || listedCount === 0} className={actionClassName()}>
-                    Select all
-                </button>
-                <button type="button" onClick={onClearSelection} disabled={selectedCount === 0} className={actionClassName()}>
-                    Clear
-                </button>
-                <button type="button" onClick={onCancel} className={`${actionClassName()} ml-auto`}>
-                    Cancel
-                </button>
-            </div>
-            <div className="flex flex-wrap items-center gap-0.5 px-1.5 py-1">
-                <button type="button" onClick={() => onSetRead(true)} disabled={none || busy} className={actionClassName()}>
-                    Mark read
-                </button>
-                <button type="button" onClick={() => onSetRead(false)} disabled={none || busy} className={actionClassName()}>
-                    Mark unread
-                </button>
-                <button type="button" onClick={() => onSetFlagged(true)} disabled={none || busy} className={actionClassName()}>
-                    Flag
-                </button>
-                <button type="button" onClick={() => onSetFlagged(false)} disabled={none || busy} className={actionClassName()}>
-                    Unflag
-                </button>
-                <button
-                    type="button"
-                    onClick={onArchive}
-                    disabled={none || busy || !!archiveReason}
-                    title={archiveReason}
-                    className={actionClassName()}
-                >
-                    Archive
-                </button>
-                <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}
-                    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" }}
-                />
-                <button
-                    type="button"
-                    onClick={() => setMovePrompt(true)}
-                    disabled={none || busy}
-                    className={actionClassName()}
-                >
-                    Move to
-                </button>
-                <button
-                    type="button"
-                    onClick={onReportJunk}
-                    disabled={none || busy || !!junkReason}
-                    title={junkReason}
-                    className={actionClassName()}
-                >
-                    Report junk
-                </button>
-                <button
-                    type="button"
-                    onClick={onDelete}
-                    disabled={none || busy || !!deleteReason}
-                    title={deleteReason}
-                    className={actionClassName()}
-                >
-                    Delete
-                </button>
-            </div>
-            {error && (
-                <div className="px-3 pb-2">
-                    <Alert>{error}</Alert>
-                </div>
-            )}
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import LabelMenuButton from "./labelMenu.js";
+import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
+import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
+import { SHORTCUTS, ShortcutDef } from "../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
+
+export interface MailSelectionBarProps {
+    selected: Message[];
+    /** Every message currently listed - what "Select all" selects and what `allSelected` is measured against. */
+    listed: Message[];
+    /** What the bar *counts*, when the rows being ticked aren't messages themselves: the conversation list
+     * ticks conversations, each standing for several messages, so "3 conversations selected" is what the
+     * reader picked while `selected` stays the messages every action below acts on. Left out by the flat
+     * message list, which counts `selected`/`listed` directly. */
+    totals?: { selected: number; listed: number; noun: string };
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    /** Leaves select mode entirely (and clears the selection). */
+    onCancel: () => void;
+    folders: Folder[];
+    currentFolderUid?: string;
+    /** Every label this mailbox has, for the Apply label action. */
+    labels: Label[];
+    /** The mailbox a label created from Apply label belongs to. */
+    mailboxUid: string;
+    onLabelCreated: (label: Label) => void;
+    /** A folder created from the Move to prompt, for the caller's own folder list and the sidebar. */
+    onFolderCreated: (folder: Folder) => void;
+    /** Sets the selection's labels: every message ends up with `labelUids`, plus whichever of
+     * `keepPartial` it already had (those rows were left partially applied, so each message keeps what
+     * it has). */
+    onApplyLabels: (labelUids: string[], keepPartial: string[]) => void;
+    onSetRead: (read: boolean) => void;
+    onSetFlagged: (flagged: boolean) => void;
+    onArchive: () => void;
+    /** Moves the selection into `folderUid`, resolving once the bulk update has settled. It resolves
+     * whether or not that update was rejected: a bulk update is applied element by element, so a failure
+     * is explained in this bar (along with the reload it triggers) rather than in the prompt, which would
+     * be claiming the move simply didn't happen. */
+    onMoveTo: (folderUid: string) => Promise<void>;
+    onReportJunk: () => void;
+    onDelete: () => void;
+    /** 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;
+    error: string | null;
+    /** The keyboard acts on this selection (Delete, Ctrl+Q, Ctrl+U, Insert - registered by the page): Mark read, Mark unread, Flag and
+     * Delete name their shortcut in the tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
+}
+
+function actionClassName(): string {
+    return "px-2 py-1 rounded-md text-sm 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
+ * 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,
+    error,
+    shortcuts,
+}: MailSelectionBarProps) {
+    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: string, shortcut: ShortcutDef, reason?: string) =>
+        shortcuts
+            ? { title: reason ?? withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) }
+            : { title: reason };
+    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
+    // messages are still being fetched has nothing for an action to act on yet.
+    const none = selectedCount === 0 || selected.length === 0;
+    const allSelected = listedCount > 0 && selectedCount === listedCount;
+    const currentType = folders.find((folder) => folder.uid === currentFolderUid)?.type;
+    const moveTargets = folders.filter((folder) => MOVE_TARGET_TYPES.has(folder.type) && folder.uid !== currentFolderUid);
+    // The same prompt the reading pane's own Move to opens, so one list of destinations and one way to
+    // create a folder serve both.
+    const [movePrompt, setMovePrompt] = useState(false);
+
+    // None of the three needs its folder to exist first - the caller creates or lazily provisions it (see
+    // `resolveFolderOfType()` and `bulkArchive()` in `apps/www/index.tsx`) - so the only thing that disables
+    // 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;
+
+    // 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 (
+        <div className="border-b border-border">
+            <MoveToFolderDialog
+                open={movePrompt}
+                onClose={() => setMovePrompt(false)}
+                mailboxUid={mailboxUid}
+                folders={folders}
+                currentFolderUid={currentFolderUid}
+                count={selected.length}
+                onMove={onMoveTo}
+                onFolderCreated={onFolderCreated}
+            />
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-surface-alt">
+                <span aria-live="polite" className="text-sm font-semibold text-text">
+                    {selectedCount}
+                    {totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : ""} selected
+                </span>
+                <button type="button" onClick={onSelectAll} disabled={allSelected || listedCount === 0} className={actionClassName()}>
+                    Select all
+                </button>
+                <button type="button" onClick={onClearSelection} disabled={selectedCount === 0} className={actionClassName()}>
+                    Clear
+                </button>
+                <button type="button" onClick={onCancel} className={`${actionClassName()} ml-auto`}>
+                    Cancel
+                </button>
+            </div>
+            <div className="flex flex-wrap items-center gap-0.5 px-1.5 py-1">
+                <button type="button" onClick={() => onSetRead(true)} disabled={none || busy} className={actionClassName()} {...hint("Mark read", SHORTCUTS.mail.markRead)}>
+                    Mark read
+                </button>
+                <button type="button" onClick={() => onSetRead(false)} disabled={none || busy} className={actionClassName()} {...hint("Mark unread", SHORTCUTS.mail.markUnread)}>
+                    Mark unread
+                </button>
+                <button type="button" onClick={() => onSetFlagged(true)} disabled={none || busy} className={actionClassName()} {...hint("Flag", SHORTCUTS.mail.flag)}>
+                    Flag
+                </button>
+                <button type="button" onClick={() => onSetFlagged(false)} disabled={none || busy} className={actionClassName()}>
+                    Unflag
+                </button>
+                <button
+                    type="button"
+                    onClick={onArchive}
+                    disabled={none || busy || !!archiveReason}
+                    title={archiveReason}
+                    className={actionClassName()}
+                >
+                    Archive
+                </button>
+                <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}
+                    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" }}
+                />
+                <button
+                    type="button"
+                    onClick={() => setMovePrompt(true)}
+                    disabled={none || busy}
+                    className={actionClassName()}
+                >
+                    Move to
+                </button>
+                <button
+                    type="button"
+                    onClick={onReportJunk}
+                    disabled={none || busy || !!junkReason}
+                    title={junkReason}
+                    className={actionClassName()}
+                >
+                    Report junk
+                </button>
+                <button
+                    type="button"
+                    onClick={onDelete}
+                    disabled={none || busy || !!deleteReason}
+                    className={actionClassName()}
+                    {...hint("Delete", SHORTCUTS.mail.delete, deleteReason)}
+                >
+                    Delete
+                </button>
+            </div>
+            {error && (
+                <div className="px-3 pb-2">
+                    <Alert>{error}</Alert>
+                </div>
+            )}
+        </div>
+    );
+}