Outline builder

new(ident: impl Into<Ident>) -> Self

Chain onto the value.

over(list: impl Into<Ident>) -> Self
marks(marks: impl IntoIterator<Item = Mark>) -> Self
mark(mark: Mark) -> Self
slots(slots: usize) -> Self
on_select(handler: impl Fn(SharedString, &mut Window, &mut App) + 'static) -> Self

fn outline(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let mapped = |ident: &'static str, turns: usize| {
        let rows = turns * 2;
        div()
            .flex()
            // Stretched rather than given a height: the rail is as tall as the
            // list it indexes, and the list is as tall as the rows it was
            // asked for, so neither is cut through a line of text.
            .items_stretch()
            .gap(px(theme.space(Space::Sm)))
            .child(
                Outline::new(format!("{ident}.outline"))
                    .over(format!("{ident}.rows"))
                    .marks((0..turns).map(|turn| {
                        Mark::new(format!("ask-{turn}"), turn * 2, format!("Question {turn}"))
                            .detail(format!("The answer to question {turn} began here."))
                    })),
            )
            .child(
                div().w(px(440.0)).child(
                    List::new(ident, rows, move |row, _, _| {
                        let (who, what) = match row % 2 {
                            0 => ("Ada", format!("Question {}", row / 2)),
                            _ => ("Assistant", format!("Answer {}", row / 2)),
                        };
                        ListItem::new(format!("row-{row}"), div().child(format!("{who}: {what}")))
                            .text(format!("{who}: {what}"))
                    })
                    // Bounded, or the list draws every row it has and the
                    // outline has no viewport to be an outline of. Slotted
                    // rather than flowing, so the frame is a whole number of
                    // rows and the last one on screen is a whole row.
                    .visible_rows(6),
                ),
            )
    };
    stack(&theme)
        .w(px(560.0))
        .child(caption(
            &theme,
            "five exchanges: a mark for each, and the one being read is brighter",
        ))
        .child(mapped("scene.outline.short.rows", 5))
        .child(caption(
            &theme,
            "eighty exchanges: the same footprint, each mark now standing for a range",
        ))
        .child(mapped("scene.outline.long.rows", 80))
        .into_any_element()
}