@rapidmx/web-client 0.15.1 → 0.17.0

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

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineTrash } from "react-icons/hi2";
+
+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) {
+    return (
+        <div className="flex items-center justify-between gap-2 px-3 py-1 border-b border-border text-xs text-text-muted">
+            <span>{count === undefined ? "" : `${count} ${count === 1 ? "item" : "items"}`}</span>
+            <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"
+            >
+                <HiOutlineTrash size={16} aria-hidden="true" className="shrink-0" />
+                {`Empty ${folderName}`}
+            </button>
+        </div>
+    );
+}

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

@@ -1,227 +1,240 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 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 by a pop-up (see `notifyApiError()`), raised by the page 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;
-    /** 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,
-    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>
-        </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 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 by a pop-up (see `notifyApiError()`), raised by the page 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;
+    /** 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;
+    /** 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;
+    /** Why Move to is unavailable, when the selection is spread over mailboxes and a folder can only belong to one (search results over several
+     * mailboxes). Shown as the button's tooltip. */
+    moveDisabledReason?: string;
+    /** The same for Apply label: a label belongs to one mailbox, and `labels` are one mailbox's. */
+    labelsDisabledReason?: string;
+}
+
+function actionClassName(destructive = false): string {
+    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* - 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,
+    deletesPermanently = false,
+    busy,
+    shortcuts,
+    moveDisabledReason,
+    labelsDisabledReason,
+}: MailSelectionBarProps) {
+    const env = useKeyEnvironment();
+    /** `title` and `aria-keyshortcuts` for an action the keyboard also does. */
+    const hint = (label: string, shortcut: ShortcutDef) =>
+        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
+    // 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 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 (
+        <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 || !!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" }}
+                />
+                <button
+                    type="button"
+                    onClick={() => setMovePrompt(true)}
+                    disabled={none || busy || !!moveDisabledReason}
+                    title={moveDisabledReason}
+                    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}
+                    className={actionClassName(deletesPermanently)}
+                    {...hint(deleteLabel, SHORTCUTS.mail.delete)}
+                >
+                    {deleteLabel}
+                </button>
+            </div>
+        </div>
+    );
+}

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

@@ -19,6 +19,10 @@ interface MenuItemBase {
     checked?: boolean | "mixed";
     /** A colour swatch before the label - a label's own colour. */
     swatchColor?: string;
+    /** An icon before the label, for a menu whose rows are commands (the reading pane's "More actions"). */
+    icon?: ReactNode;
+    /** A tooltip for the row - the full text of a label the row truncates. */
+    title?: string;
     disabled?: boolean;
     /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
      * before one command commits them all. */
@@ -97,8 +101,11 @@ export function menuHeight(sections: MenuSectionSpec[], width: number = DEFAULT_
 }
 
 export interface MenuButtonProps {
-    /** The trigger's visible label. */
+    /** The trigger's visible label. Not drawn (nor is the chevron) with `iconOnly`, where `aria-label` is all the trigger says. */
     label: ReactNode;
+    /** The trigger is just its `icon` - a round icon button like the reading pane's own command row, whose `className` it takes over
+     * completely. `aria-label` (and `title`) name it. */
+    iconOnly?: boolean;
     /** The trigger's accessible name, which also names the menu itself - includes the current selection
      * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
     "aria-label": string;
@@ -127,6 +134,7 @@ export interface MenuButtonProps {
  */
 export default function MenuButton({
     label,
+    iconOnly = false,
     icon,
     disabled,
     title,
@@ -190,8 +198,10 @@ export default function MenuButton({
 
     function enterSubmenu(item: MenuSubmenuSpec) {
         setSubmenuKey(item.key);
-        // Past the Back row, onto the first row of the submenu itself.
-        setActiveIndex(1 + initialActiveIndex(item.submenu.flatMap((section) => section.items)));
+        const rows = item.submenu.flatMap((section) => section.items);
+        // Past the Back row, onto the first row of the submenu itself - or, when none of them can take focus (every row is unavailable right now), onto
+        // the Back row, so the keyboard still has a place to be.
+        setActiveIndex(rows.some((row) => !row.disabled) ? 1 + initialActiveIndex(rows) : 0);
     }
 
     function leaveSubmenu() {
@@ -285,16 +295,20 @@ export default function MenuButton({
                 disabled={disabled}
                 onClick={() => (open ? closeMenu(false) : openMenu())}
                 onKeyDown={handleTriggerKeyDown}
-                className={[
-                    // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
-                    // whatever sits beside it in the toolbar off the edge of a 384px list column.
-                    "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
-                    className,
-                ].join(" ")}
+                className={
+                    iconOnly
+                        ? className
+                        : [
+                              // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
+                              // whatever sits beside it in the toolbar off the edge of a 384px list column.
+                              "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
+                              className,
+                          ].join(" ")
+                }
             >
                 {icon}
-                <span className="truncate">{label}</span>
-                <HiChevronDown size={14} aria-hidden="true" className="shrink-0 text-text-muted" />
+                {!iconOnly && <span className="truncate">{label}</span>}
+                {!iconOnly && <HiChevronDown size={14} aria-hidden="true" className="shrink-0 text-text-muted" />}
             </button>
             {open && (
                 <PopoverPortal
@@ -332,6 +346,7 @@ export default function MenuButton({
                                             type="button"
                                             role={role}
                                             disabled={item.disabled}
+                                            title={item.title}
                                             tabIndex={index === activeIndex ? 0 : -1}
                                             {...(role === "menuitem"
                                                 ? {}
@@ -352,6 +367,11 @@ export default function MenuButton({
                                             </span>
                                             <span className="min-w-0 flex-1">
                                                 <span className="flex h-5 items-center gap-1.5">
+                                                    {item.icon && (
+                                                        <span aria-hidden="true" className="shrink-0 text-text-muted">
+                                                            {item.icon}
+                                                        </span>
+                                                    )}
                                                     {item.swatchColor && (
                                                         <span
                                                             aria-hidden="true"