T08a menus: menu, items, groups, separators, submenus, check and radio rows, key hints, icons; dropdown, split, overflow and context hosts; overlays pick on key release

src/menus/hosts.rs

@@ -0,0 +1,225 @@
+use std::rc::Rc;
+
+use gpui::{
+    AnyElement, App, ClickEvent, Div, ElementId, Entity, InteractiveElement, IntoElement,
+    MouseButton, ParentElement, RenderOnce, SharedString, Stateful, Styled, Window, div,
+    prelude::*,
+};
+use smallvec::SmallVec;
+
+use super::{
+    menu::{Open, Spot, hang, measure_host},
+    model::Menu,
+};
+use crate::{
+    buttons::{Button, ButtonGroup, ButtonVariant, IconButton},
+    primitives::IconName,
+};
+
+type Click = Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>;
+
+fn state(id: &ElementId, window: &mut Window, cx: &mut App) -> Entity<Open> {
+    window.use_keyed_state((id.clone(), "menu"), cx, |_, _| Open::default())
+}
+
+/// Toggles the menu under the host; a keyboard press marks its first row.
+fn toggle(state: &Entity<Open>, menu: &Menu, cx: &App) -> Click {
+    let (state, menu, open) = (state.clone(), menu.clone(), state.read(cx).is_open());
+    Rc::new(move |event, window, cx| {
+        if open {
+            Open::close(&state, window, cx);
+        } else {
+            Open::show(&state, &menu, Spot::Under, event.is_keyboard(), cx);
+        }
+    })
+}
+
+/// A trigger, the canvas that measures it, and its menu while open.
+fn host(
+    id: ElementId,
+    trigger: impl IntoElement,
+    menu: &Menu,
+    state: &Entity<Open>,
+    window: &mut Window,
+    cx: &mut App,
+) -> Stateful<Div> {
+    div()
+        .id(id.clone())
+        .relative()
+        .flex_none()
+        .child(trigger)
+        .child(measure_host(state.clone()))
+        .children(hang(&id, menu, state, window, cx))
+}
+
+/// A button that opens a menu under it.
+#[derive(IntoElement)]
+pub struct DropdownMenu {
+    id: ElementId,
+    label: SharedString,
+    icon: Option<IconName>,
+    variant: ButtonVariant,
+    menu: Menu,
+}
+
+impl DropdownMenu {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            label: label.into(),
+            icon: None,
+            variant: ButtonVariant::Secondary,
+            menu,
+        }
+    }
+
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+}
+
+impl RenderOnce for DropdownMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let button = Button::new((self.id.clone(), "button"), self.label)
+            .variant(self.variant)
+            .trailing_icon(IconName::ChevronDown)
+            .when_some(self.icon, |button, icon| button.icon(icon))
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(self.id, button, &self.menu, &state, window, cx)
+    }
+}
+
+/// An icon button that opens a menu of what did not fit.
+#[derive(IntoElement)]
+pub struct OverflowMenu {
+    id: ElementId,
+    menu: Menu,
+}
+
+impl OverflowMenu {
+    pub fn new(id: impl Into<ElementId>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            menu,
+        }
+    }
+}
+
+impl RenderOnce for OverflowMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let button = IconButton::new((self.id.clone(), "button"), IconName::Ellipsis)
+            .variant(ButtonVariant::Ghost)
+            .tooltip("More")
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(self.id, button, &self.menu, &state, window, cx)
+    }
+}
+
+/// A button's main action, and related ones in a menu under its arrow.
+#[derive(IntoElement)]
+pub struct SplitButton {
+    id: ElementId,
+    label: SharedString,
+    variant: ButtonVariant,
+    menu: Menu,
+    on_click: Option<Click>,
+}
+
+impl SplitButton {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            label: label.into(),
+            variant: ButtonVariant::Secondary,
+            menu,
+            on_click: None,
+        }
+    }
+
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// The main action.
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for SplitButton {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let main = Button::new((self.id.clone(), "main"), self.label)
+            .variant(self.variant)
+            .when_some(self.on_click, |button, run| {
+                button.on_click(move |event, window, cx| run(event, window, cx))
+            });
+        let more = Button::new((self.id.clone(), "more"), "")
+            .variant(self.variant)
+            .icon(IconName::ChevronDown)
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(
+            self.id,
+            ButtonGroup::new().button(main).button(more),
+            &self.menu,
+            &state,
+            window,
+            cx,
+        )
+    }
+}
+
+/// Its children, and a menu that opens at the pointer on a right click.
+#[derive(IntoElement)]
+pub struct ContextMenu {
+    id: ElementId,
+    menu: Menu,
+    children: SmallVec<[AnyElement; 2]>,
+}
+
+impl ContextMenu {
+    pub fn new(id: impl Into<ElementId>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            menu,
+            children: SmallVec::new(),
+        }
+    }
+}
+
+impl ParentElement for ContextMenu {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
+    }
+}
+
+impl RenderOnce for ContextMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let (open, menu) = (state.clone(), self.menu.clone());
+        div()
+            .id(self.id.clone())
+            .on_mouse_down(MouseButton::Right, move |event, _, cx| {
+                log::info!("context menu: at {:?}", event.position);
+                Open::show(&open, &menu, Spot::At(event.position), false, cx);
+            })
+            .children(self.children)
+            .children(hang(&self.id, &self.menu, &state, window, cx))
+    }
+}

src/menus/menu.rs

@@ -0,0 +1,484 @@
+use std::rc::Rc;
+
+use gpui::{
+    Animation, AnimationExt, AnyElement, App, Bounds, Div, ElementId, Entity, FontWeight,
+    InteractiveElement, IntoElement, MouseButton, ParentElement, Pixels, Point, Stateful, Styled,
+    Window, anchored, canvas, deferred, div, prelude::*,
+};
+
+use super::model::{Entry, Kind, Menu, MenuItem};
+use crate::{
+    forms::{Run, float, surface},
+    motion,
+    primitives::{Icon, IconName, Takeover, give_back, take_focus},
+    theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
+    typography::KbdCombo,
+};
+
+/// The menu open at `depth`, following the marked rows above it; `None` once those rows changed.
+fn at_depth<'a>(menu: &'a Menu, levels: &[Level], depth: usize) -> Option<&'a Menu> {
+    levels.get(..depth)?.iter().try_fold(menu, |menu, level| {
+        match level
+            .at
+            .and_then(|ix| menu.item_at(ix))
+            .map(|item| &item.kind)
+        {
+            Some(Kind::Sub(sub)) => Some(sub),
+            _ => None,
+        }
+    })
+}
+
+/// Fits open levels to the menu as it is now: a mark on a row gone or disabled clears, and levels under a row that no longer opens them close.
+fn settle(menu: &Menu, levels: &mut Vec<Level>) {
+    let mut here = menu;
+    for depth in 0..levels.len() {
+        let at = levels[depth]
+            .at
+            .filter(|&ix| here.item_at(ix).is_some_and(|item| !item.disabled));
+        levels[depth].at = at;
+        match at.and_then(|ix| here.item_at(ix)).map(|item| &item.kind) {
+            Some(Kind::Sub(sub)) if depth + 1 < levels.len() => here = sub,
+            _ => {
+                levels.truncate(depth + 1);
+                return;
+            }
+        }
+    }
+}
+
+/// One open level: its marked row, that row's box and its panel's box.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+struct Level {
+    at: Option<usize>,
+    row: Bounds<Pixels>,
+    panel: Bounds<Pixels>,
+}
+
+/// Where an open menu hangs: under its host's box, or at a point.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) enum Spot {
+    Under,
+    At(Point<Pixels>),
+}
+
+/// A host's menu: where it hangs, its open levels root first, the host's box, and the focus to hand back.
+#[derive(Default)]
+pub(crate) struct Open {
+    spot: Option<Spot>,
+    levels: Vec<Level>,
+    anchor: Bounds<Pixels>,
+    takeover: Option<Entity<Takeover>>,
+}
+
+impl Open {
+    pub(crate) fn is_open(&self) -> bool {
+        self.spot.is_some()
+    }
+
+    /// Opens at `spot`, with the first row marked when `marked`.
+    pub(crate) fn show(state: &Entity<Open>, menu: &Menu, spot: Spot, marked: bool, cx: &mut App) {
+        let first = menu.step(None, 1).filter(|_| marked);
+        state.update(cx, |open, cx| {
+            open.spot = Some(spot);
+            open.levels = vec![Level {
+                at: first,
+                ..Level::default()
+            }];
+            cx.notify();
+        });
+    }
+
+    /// Closes and hands focus back to whatever held it before the menu opened.
+    pub(crate) fn close(state: &Entity<Open>, window: &mut Window, cx: &mut App) {
+        let takeover = state.update(cx, |open, cx| {
+            open.spot = None;
+            open.levels.clear();
+            cx.notify();
+            open.takeover.take()
+        });
+        if let Some(takeover) = takeover {
+            give_back(&takeover, window, cx);
+        }
+    }
+}
+
+/// Marks row `at` of level `depth` and drops deeper levels; a submenu row opens when `open_sub`.
+fn mark(state: &Entity<Open>, menu: &Menu, depth: usize, at: usize, open_sub: bool, cx: &mut App) {
+    state.update(cx, |open, cx| {
+        let Some(here) = at_depth(menu, &open.levels, depth) else {
+            return;
+        };
+        let sub = matches!(here.item_at(at).map(|item| &item.kind), Some(Kind::Sub(_)));
+        open.levels.truncate(depth + 1);
+        if open.levels[depth].at != Some(at) {
+            open.levels[depth].at = Some(at);
+            open.levels[depth].row = Bounds::default();
+        }
+        if open_sub && sub {
+            open.levels.push(Level::default());
+        }
+        cx.notify();
+    });
+}
+
+/// Runs a row. A submenu opens with its first row marked; anything else closes the menu first.
+fn choose(
+    state: &Entity<Open>,
+    menu: &Menu,
+    depth: usize,
+    at: usize,
+    close: &Run,
+    window: &mut Window,
+    cx: &mut App,
+) {
+    let levels = &state.read(cx).levels;
+    let Some(item) = at_depth(menu, levels, depth)
+        .filter(|_| levels.len() > depth)
+        .and_then(|here| here.item_at(at))
+        .cloned()
+    else {
+        log::debug!("menu: a press from an older frame found row {at} of level {depth} gone");
+        return;
+    };
+    if item.disabled {
+        return;
+    }
+    if let Kind::Sub(sub) = &item.kind {
+        let first = sub.step(None, 1);
+        mark(state, menu, depth, at, false, cx);
+        state.update(cx, |open, cx| {
+            open.levels.push(Level {
+                at: first,
+                ..Level::default()
+            });
+            cx.notify();
+        });
+        return;
+    }
+    log::info!("menu: {}", item.label);
+    close(window, cx);
+    if let Some(on_click) = &item.on_click {
+        on_click(window, cx);
+    }
+}
+
+/// Arrows walk the deepest level; Right opens a submenu; Enter and Space choose; Left and Escape back out.
+fn keys(
+    menu: &Menu,
+    state: &Entity<Open>,
+    key: &str,
+    close: &Run,
+    window: &mut Window,
+    cx: &mut App,
+) -> bool {
+    let levels = state.read(cx).levels.clone();
+    let Some(depth) = levels.len().checked_sub(1) else {
+        return false;
+    };
+    let Some(here) = at_depth(menu, &levels, depth) else {
+        return false;
+    };
+    let at = levels[depth].at;
+    let sub = at
+        .and_then(|at| here.item_at(at))
+        .is_some_and(|item| matches!(item.kind, Kind::Sub(_)));
+    match (key, at) {
+        ("down" | "up", _) => {
+            let by = if key == "down" { 1 } else { -1 };
+            if let Some(to) = here.step(at, by) {
+                mark(state, menu, depth, to, false, cx);
+            }
+        }
+        ("right", Some(at)) if sub => choose(state, menu, depth, at, close, window, cx),
+        ("enter" | "space", Some(at)) => choose(state, menu, depth, at, close, window, cx),
+        ("left" | "escape", _) if depth > 0 => state.update(cx, |open, cx| {
+            open.levels.pop();
+            cx.notify();
+        }),
+        ("escape", _) => close(window, cx),
+        _ => return false,
+    }
+    true
+}
+
+/// Records a box into the host's state: the host's own, a marked row's or a panel's.
+fn measure(
+    state: Entity<Open>,
+    write: impl Fn(&mut Open, Bounds<Pixels>) -> bool + 'static,
+) -> impl IntoElement {
+    canvas(
+        move |bounds, _, cx| {
+            if state.update(cx, |open, _| write(open, bounds)) {
+                state.update(cx, |_, cx| cx.notify());
+            }
+        },
+        |_, _, _, _| {},
+    )
+    .absolute()
+    .top_0()
+    .left_0()
+    .size_full()
+}
+
+/// Measures the host's box, which a dropdown hangs under.
+pub(crate) fn measure_host(state: Entity<Open>) -> impl IntoElement {
+    measure(state, |open, bounds| {
+        let changed = open.anchor != bounds;
+        open.anchor = bounds;
+        changed
+    })
+}
+
+fn row(item: &MenuItem, ix: usize, marked: bool, cx: &App) -> Stateful<Div> {
+    let theme = cx.theme();
+    let colors = &theme.colors;
+    let fg = if item.disabled {
+        colors.fg_disabled
+    } else {
+        colors.fg
+    };
+    let (lead, lead_color) = match &item.kind {
+        Kind::Check(true) => (Some(IconName::Check), fg),
+        Kind::Radio(true) => (Some(IconName::Dot), fg),
+        _ => (item.icon, if item.disabled { fg } else { colors.fg_muted }),
+    };
+    div()
+        .id(("row", ix))
+        .relative()
+        .flex()
+        .items_center()
+        .gap_2()
+        .h(theme.control_height(ControlSize::Md))
+        .px_2()
+        .rounded(theme.radius(Radius::Md))
+        .text_color(fg)
+        .when(marked && !item.disabled, |row| row.bg(colors.hover))
+        .when(!item.disabled, |row| row.cursor_pointer())
+        .child(
+            div()
+                .flex()
+                .flex_none()
+                .items_center()
+                .justify_center()
+                .size(theme.icon_size(IconSize::Sm))
+                .when_some(lead, |slot, icon| {
+                    slot.child(Icon::new(icon).size(IconSize::Sm).color(lead_color))
+                }),
+        )
+        .child(
+            div()
+                .flex_1()
+                .min_w_0()
+                .overflow_hidden()
+                .text_ellipsis()
+                .whitespace_nowrap()
+                .child(item.label.clone()),
+        )
+        .when_some(item.keys.clone(), |row, keys| {
+            row.child(
+                div()
+                    .flex_none()
+                    .pl_4()
+                    .text_color(colors.fg_subtle)
+                    .child(KbdCombo::new(&keys)),
+            )
+        })
+        .when(matches!(item.kind, Kind::Sub(_)), |row| {
+            row.child(
+                Icon::new(IconName::ChevronRight)
+                    .size(IconSize::Xs)
+                    .color(colors.fg_subtle),
+            )
+        })
+}
+
+fn panel(
+    id: &ElementId,
+    menu: &Menu,
+    state: &Entity<Open>,
+    depth: usize,
+    close: &Run,
+    cx: &App,
+) -> Stateful<Div> {
+    let open = state.read(cx);
+    let here = at_depth(menu, &open.levels, depth).expect("settled levels follow submenu rows");
+    let at = open.levels[depth].at;
+    let theme = cx.theme();
+    let colors = &theme.colors;
+    let rows = here
+        .entries
+        .iter()
+        .enumerate()
+        .map(|(ix, entry)| match entry {
+            Entry::Separator => div().h_px().my_1().bg(colors.border).into_any_element(),
+            Entry::Heading(title) => div()
+                .px_2()
+                .pt_1p5()
+                .pb_1()
+                .text_size(theme.text_size(TextSize::Xs))
+                .font_weight(FontWeight::MEDIUM)
+                .text_color(colors.fg_subtle)
+                .child(title.clone())
+                .into_any_element(),
+            Entry::Item(item) => {
+                let marked = at == Some(ix);
+                let sub = matches!(item.kind, Kind::Sub(_));
+                let (hover, click, close, menu) =
+                    (state.clone(), state.clone(), close.clone(), menu.clone());
+                let hover_menu = menu.clone();
+                row(item, ix, marked, cx)
+                    .when(!item.disabled, |row| {
+                        row.on_mouse_move(move |_, _, cx| {
+                            let open = hover.read(cx);
+                            let Some(level) = open.levels.get(depth) else {
+                                return;
+                            };
+                            let shown = open.levels.len() > depth + 1;
+                            if level.at != Some(ix) || (sub && !shown) {
+                                mark(&hover, &hover_menu, depth, ix, true, cx);
+                            }
+                        })
+                        .on_mouse_down(
+                            MouseButton::Left,
+                            move |_, window, cx| {
+                                window.prevent_default();
+                                cx.stop_propagation();
+                                choose(&click, &menu, depth, ix, &close, window, cx);
+                            },
+                        )
+                    })
+                    .when(marked && sub, |row| {
+                        row.child(measure(state.clone(), move |open, bounds| {
+                            let level = &mut open.levels[depth];
+                            let changed = level.row != bounds;
+                            level.row = bounds;
+                            changed
+                        }))
+                    })
+                    .into_any_element()
+            }
+        });
+    surface((id.clone(), format!("panel-{depth}")), cx)
+        .relative()
+        .min_w(theme.menu_width())
+        .p_1()
+        .flex()
+        .flex_col()
+        .children(rows)
+        .child(measure(state.clone(), move |open, bounds| {
+            let level = &mut open.levels[depth];
+            let changed = level.panel != bounds;
+            level.panel = bounds;
+            changed
+        }))
+}
+
+/// The open menu of host `id`, placed at its spot. It holds focus while open and gives it back on every close.
+pub(crate) fn hang(
+    id: &ElementId,
+    menu: &Menu,
+    state: &Entity<Open>,
+    window: &mut Window,
+    cx: &mut App,
+) -> Option<AnyElement> {
+    let spot = state.read(cx).spot?;
+    let takeover = take_focus((id.clone(), "takeover"), window, cx);
+    let focus = takeover.read(cx).focus.clone();
+    if state.read(cx).takeover.is_none() {
+        state.update(cx, |open, _| open.takeover = Some(takeover));
+    }
+    let close: Run = {
+        let (state, id) = (state.clone(), id.clone());
+        Rc::new(move |window, cx| {
+            log::info!("menu {id:?}: closed");
+            Open::close(&state, window, cx);
+        })
+    };
+    if !focus.is_focused(window) {
+        log::info!("menu {id:?}: focus left");
+        close(window, cx);
+        return None;
+    }
+    let mut levels = state.read(cx).levels.clone();
+    settle(menu, &mut levels);
+    if levels != state.read(cx).levels {
+        log::info!("menu {id:?}: rows changed while open");
+        state.update(cx, |open, _| open.levels = levels);
+    }
+    let depth = state.read(cx).levels.len();
+    let enter =
+        Animation::new(motion::duration(motion::FAST, cx)).with_easing(motion::ease_out_cubic);
+    let (keyed, key_menu, key_close) = (state.clone(), menu.clone(), close.clone());
+    let (lifted, lift_menu, lift_close) = (state.clone(), menu.clone(), close.clone());
+    let (out, out_close) = (state.clone(), close.clone());
+    let root = panel(id, menu, state, 0, &close, cx)
+        .track_focus(&focus)
+        .on_key_down(move |event, window, cx| {
+            let stroke = &event.keystroke;
+            let key = stroke.key.as_str();
+            if matches!(key, "enter" | "space") {
+                if !stroke.modifiers.modified() {
+                    cx.stop_propagation();
+                }
+                return;
+            }
+            if keys(&key_menu, &keyed, key, &key_close, window, cx) {
+                cx.stop_propagation();
+            }
+        })
+        .on_key_up(move |event, window, cx| {
+            let stroke = &event.keystroke;
+            let key = stroke.key.as_str();
+            if matches!(key, "enter" | "space")
+                && !stroke.modifiers.modified()
+                && keys(&lift_menu, &lifted, key, &lift_close, window, cx)
+            {
+                cx.stop_propagation();
+            }
+        })
+        .on_mouse_down_out(move |event, window, cx| {
+            let open = out.read(cx);
+            let on_host = open.spot == Some(Spot::Under) && open.anchor.contains(&event.position);
+            if !on_host
+                && !open
+                    .levels
+                    .iter()
+                    .any(|level| level.panel.contains(&event.position))
+            {
+                out_close(window, cx);
+            }
+        });
+    let placed = match spot {
+        Spot::Under => float(state.read(cx).anchor, menu.entries.len(), root, window, cx),
+        Spot::At(point) => deferred(anchored().position(point).snap_to_window().child(
+            root.with_animation((id.clone(), "in"), enter.clone(), |root, t| root.opacity(t)),
+        ))
+        .with_priority(1)
+        .into_any_element(),
+    };
+    let subs = (1..depth).filter_map(|level| {
+        let row = state.read(cx).levels[level - 1].row;
+        (row != Bounds::default()).then(|| {
+            deferred(
+                anchored().position(row.top_right()).snap_to_window().child(
+                    panel(id, menu, state, level, &close, cx)
+                        .mt_neg_1()
+                        .with_animation(
+                            (id.clone(), format!("sub-{level}")),
+                            enter.clone(),
+                            |panel, t| panel.opacity(t).ml(motion::NUDGE * (t - 1.0)),
+                        ),
+                ),
+            )
+            .with_priority(2)
+            .into_any_element()
+        })
+    });
+    Some(
+        div()
+            .child(placed)
+            .children(subs.collect::<Vec<_>>())
+            .into_any_element(),
+    )
+}

src/menus/mod.rs

@@ -0,0 +1,8 @@
+mod hosts;
+mod menu;
+mod model;
+#[cfg(all(test, feature = "test-support"))]
+mod tests;
+
+pub use hosts::{ContextMenu, DropdownMenu, OverflowMenu, SplitButton};
+pub use model::{Menu, MenuItem};

src/menus/model.rs

@@ -0,0 +1,141 @@
+use std::rc::Rc;
+
+use gpui::{App, SharedString, Window};
+
+use crate::{forms::Run, primitives::IconName};
+
+/// What a row does when chosen.
+#[derive(Clone)]
+pub(super) enum Kind {
+    Run,
+    Check(bool),
+    Radio(bool),
+    Sub(Menu),
+}
+
+/// One row of a menu. Its keys are shown, not bound.
+#[derive(Clone)]
+pub struct MenuItem {
+    pub(super) label: SharedString,
+    pub(super) icon: Option<IconName>,
+    pub(super) keys: Option<SharedString>,
+    pub(super) kind: Kind,
+    pub(super) disabled: bool,
+    pub(super) on_click: Option<Run>,
+}
+
+impl MenuItem {
+    fn with(label: impl Into<SharedString>, kind: Kind) -> Self {
+        Self {
+            label: label.into(),
+            icon: None,
+            keys: None,
+            kind,
+            disabled: false,
+            on_click: None,
+        }
+    }
+
+    pub fn new(label: impl Into<SharedString>) -> Self {
+        Self::with(label, Kind::Run)
+    }
+
+    /// A row with a check; the owner flips `checked` in `on_click`.
+    pub fn check(label: impl Into<SharedString>, checked: bool) -> Self {
+        Self::with(label, Kind::Check(checked))
+    }
+
+    /// One of a set; the owner moves `selected` in `on_click`.
+    pub fn radio(label: impl Into<SharedString>, selected: bool) -> Self {
+        Self::with(label, Kind::Radio(selected))
+    }
+
+    /// A row that opens `menu` beside it.
+    pub fn submenu(label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self::with(label, Kind::Sub(menu))
+    }
+
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    /// Its chord at the row's end, in gpui key syntax.
+    pub fn keys(mut self, keys: impl Into<SharedString>) -> Self {
+        self.keys = Some(keys.into());
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    pub fn on_click(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+#[derive(Clone)]
+pub(super) enum Entry {
+    Item(MenuItem),
+    Separator,
+    Heading(SharedString),
+}
+
+/// Rows, separators and titled groups. A row can open a submenu.
+#[derive(Clone, Default)]
+pub struct Menu {
+    pub(super) entries: Vec<Entry>,
+}
+
+impl Menu {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn item(mut self, item: MenuItem) -> Self {
+        self.entries.push(Entry::Item(item));
+        self
+    }
+
+    pub fn separator(mut self) -> Self {
+        self.entries.push(Entry::Separator);
+        self
+    }
+
+    /// A titled run of rows, set off from the rows before it.
+    pub fn group(
+        mut self,
+        title: impl Into<SharedString>,
+        items: impl IntoIterator<Item = MenuItem>,
+    ) -> Self {
+        if !self.entries.is_empty() {
+            self.entries.push(Entry::Separator);
+        }
+        self.entries.push(Entry::Heading(title.into()));
+        self.entries.extend(items.into_iter().map(Entry::Item));
+        self
+    }
+
+    pub(super) fn item_at(&self, ix: usize) -> Option<&MenuItem> {
+        match self.entries.get(ix) {
+            Some(Entry::Item(item)) => Some(item),
+            _ => None,
+        }
+    }
+
+    /// The next enabled row from `from`, stepping by `by` and wrapping.
+    pub(super) fn step(&self, from: Option<usize>, by: isize) -> Option<usize> {
+        let count = self.entries.len() as isize;
+        let mut at = from.map_or(if by > 0 { -1 } else { count }, |at| at as isize);
+        for _ in 0..count {
+            at = (at + by).rem_euclid(count);
+            if self.item_at(at as usize).is_some_and(|item| !item.disabled) {
+                return Some(at as usize);
+            }
+        }
+        None
+    }
+}

src/menus/tests.rs

@@ -0,0 +1,267 @@
+use gpui::{
+    App, Context, FocusHandle, InteractiveElement, IntoElement, KeyUpEvent, Keystroke, Modifiers,
+    MouseButton, ParentElement, Render, SharedString, Styled, TestAppContext, VisualTestContext,
+    Window, div, point, px,
+};
+
+use super::{ContextMenu, DropdownMenu, Menu, MenuItem};
+use crate::{primitives::FocusScope, theme::Theme};
+
+/// What the rows did, and the state the check and radio rows show.
+struct Desk {
+    root: FocusHandle,
+    ran: Vec<SharedString>,
+    wrap: bool,
+    theme: SharedString,
+    view_rows: bool,
+    enters_above: usize,
+}
+
+impl Desk {
+    fn menu(&self, cx: &mut Context<Self>) -> Menu {
+        let run = |name: &'static str| {
+            let view = cx.entity();
+            move |_: &mut Window, cx: &mut App| {
+                view.update(cx, |desk, cx| {
+                    desk.ran.push(name.into());
+                    cx.notify();
+                })
+            }
+        };
+        let (wrap, light, dark) = (cx.entity(), cx.entity(), cx.entity());
+        let theme = Menu::new()
+            .item(
+                MenuItem::radio("Light", self.theme == "light")
+                    .on_click(move |_, cx| light.update(cx, |desk, _| desk.theme = "light".into())),
+            )
+            .item(
+                MenuItem::radio("Dark", self.theme == "dark")
+                    .on_click(move |_, cx| dark.update(cx, |desk, _| desk.theme = "dark".into())),
+            );
+        let edit = Menu::new()
+            .item(
+                MenuItem::new("Cut")
+                    .keys("secondary-x")
+                    .on_click(run("cut")),
+            )
+            .item(MenuItem::new("Copy").disabled(true).on_click(run("copy")))
+            .item(MenuItem::new("Paste").on_click(run("paste")));
+        if !self.view_rows {
+            return edit;
+        }
+        edit.group(
+            "View",
+            [
+                MenuItem::check("Word wrap", self.wrap)
+                    .on_click(move |_, cx| wrap.update(cx, |desk, _| desk.wrap = !desk.wrap)),
+                MenuItem::submenu("Theme", theme),
+            ],
+        )
+    }
+}
+
+impl Render for Desk {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let menu = self.menu(cx);
+        let above = cx.entity();
+        div()
+            .size_full()
+            .on_key_down(move |event, _, cx| {
+                if event.keystroke.key == "enter" {
+                    above.update(cx, |desk, _| desk.enters_above += 1);
+                }
+            })
+            .child(
+                FocusScope::new(&self.root)
+                    .size_full()
+                    .child(DropdownMenu::new("edit", "Edit", menu.clone()))
+                    .child(ContextMenu::new("area", menu).child(div().w(px(200.0)).h(px(120.0)))),
+            )
+    }
+}
+
+fn settle(cx: &mut VisualTestContext) {
+    cx.run_until_parked();
+    cx.update(|window, _| window.refresh());
+    cx.run_until_parked();
+}
+
+/// Presses and releases `key`, with a frame in between as on a real keyboard.
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    settle(cx);
+}
+
+fn desk(cx: &mut TestAppContext) -> (gpui::Entity<Desk>, &mut VisualTestContext) {
+    cx.update(Theme::init);
+    let (view, cx) = cx.add_window_view(|_, cx| Desk {
+        root: cx.focus_handle(),
+        ran: Vec::new(),
+        wrap: false,
+        theme: "light".into(),
+        view_rows: true,
+        enters_above: 0,
+    });
+    settle(cx);
+    (view, cx)
+}
+
+fn ran(view: &gpui::Entity<Desk>, cx: &mut VisualTestContext) -> Vec<SharedString> {
+    view.read_with(cx, |desk, _| desk.ran.clone())
+}
+
+fn click(x: f32, y: f32, cx: &mut VisualTestContext) {
+    let at = point(px(x), px(y));
+    cx.simulate_mouse_move(at, None, Modifiers::none());
+    cx.simulate_click(at, Modifiers::none());
+    settle(cx);
+}
+
+#[gpui::test]
+fn the_keyboard_opens_walks_past_disabled_rows_and_runs(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["paste"]);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["paste"], "the release left the menu shut");
+}
+
+#[gpui::test]
+fn submenus_open_right_and_close_left(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("right", cx);
+    press("down", cx);
+    press("left", cx);
+    press("right", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(view.read_with(cx, |desk, _| desk.theme.clone()), "dark");
+}
+
+#[gpui::test]
+fn a_check_row_reports_to_its_owner(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("up", cx);
+    press("enter", cx);
+    assert!(view.read_with(cx, |desk, _| desk.wrap));
+}
+
+#[gpui::test]
+fn escape_backs_out_one_level_then_closes(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("right", cx);
+    press("escape", cx);
+    press("up", cx);
+    press("enter", cx);
+    assert!(
+        view.read_with(cx, |desk, _| desk.wrap),
+        "one escape left the root open"
+    );
+    press("enter", cx);
+    press("escape", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(
+        ran(&view, cx).is_empty(),
+        "the second escape closed the menu"
+    );
+}
+
+#[gpui::test]
+fn a_right_click_opens_the_context_menu_where_it_lands(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    let at = point(px(60.0), px(80.0));
+    cx.simulate_mouse_move(at, None, Modifiers::none());
+    cx.simulate_mouse_down(at, MouseButton::Right, Modifiers::none());
+    cx.simulate_mouse_up(at, MouseButton::Right, Modifiers::none());
+    settle(cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}
+
+#[gpui::test]
+fn the_trigger_toggles_and_a_press_outside_closes(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    click(12.0, 12.0, cx);
+    click(12.0, 12.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(
+        ran(&view, cx).is_empty(),
+        "the second press on the trigger closed it"
+    );
+    click(12.0, 12.0, cx);
+    click(600.0, 400.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(ran(&view, cx).is_empty(), "the press outside closed it");
+}
+
+#[gpui::test]
+fn rows_the_owner_removes_leave_the_menu_usable(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    view.update(cx, |desk, cx| {
+        desk.view_rows = false;
+        cx.notify();
+    });
+    settle(cx);
+    press("enter", cx);
+    assert!(ran(&view, cx).is_empty(), "the removed row ran");
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}
+
+#[gpui::test]
+fn closing_from_the_trigger_hands_focus_back(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    click(12.0, 12.0, cx);
+    press("enter", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"], "focus came back to the trigger");
+}
+
+#[gpui::test]
+fn confirm_keys_stay_inside_the_menu(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    click(12.0, 12.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+    assert_eq!(view.read_with(cx, |desk, _| desk.enters_above), 0);
+}
+
+#[gpui::test]
+fn modified_confirm_keys_do_not_pick(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("ctrl-enter", cx);
+    press("shift-space", cx);
+    assert!(ran(&view, cx).is_empty(), "a modified key picked");
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}