Module ch5_components 

5. Components

The app can add todos but cannot remove or filter them. Add both operations, then separate the checkbox from the row so its visual contract does not own todo state.

Give todos stable ids

Until now each row used its position as its element id. Deleting the first row would give every later row a different id, so GPUI could attach the old row’s interaction state to the wrong todo. Give each todo a stable id instead.

Give each todo an id of its own, and find todos by id instead of by position:

struct Todo {
    id: usize,
    title: SharedString,
    done: bool,
}

impl Todos {
    fn toggle(&mut self, id: usize, cx: &mut Context<Self>) {
        if let Some(todo) = self.todos.iter_mut().find(|todo| todo.id == id) {
            todo.done = !todo.done;
            cx.notify();
        }
    }

    fn delete(&mut self, id: usize, cx: &mut Context<Self>) {
        self.todos.retain(|todo| todo.id != id);
        cx.notify();
    }
}

Add a next_id: usize field to Todos, and in add, give the new todo self.next_id and increment it.

Make a checkbox component

The checkbox needs an element ID, a checked value, and a callback; it does not need to know what a Todo is. That boundary makes it a RenderOnce component: the parent supplies state and meaning, while the component supplies the element tree.

#[derive(IntoElement)]
struct Checkbox {
    id: ElementId,
    checked: bool,
    on_toggle: Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>,
}

impl RenderOnce for Checkbox {
    fn render(self, window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let colors = Colors::for_appearance(window);

        div()
            .id(self.id)
            .size_5()
            .flex_shrink_0()
            .rounded_full()
            .border_1()
            .border_color(colors.border)
            .cursor_pointer()
            .when(self.checked, |checkbox| checkbox.bg(colors.selected))
            .on_click(self.on_toggle)
    }
}

#[derive(IntoElement)] lets you pass Checkbox to child. Unlike a view’s render, RenderOnce::render takes the component by value: GPUI consumes and rebuilds it on each frame. The component does not own todo state; its callback lets the parent decide what a toggle means.

At this point the row can be split at three different boundaries:

• A method that returns impl IntoElement, like row. It can read the view’s fields directly, so it’s the simplest choice for a piece of one view.
• A component, like Checkbox: a struct with the data it shows. Use it for pieces you reuse across views.
• A view: another entity that implements Render. Use it for pieces with state of their own, like the text field’s EditableTextState.

Elements, components and views describes all three in depth.

Delete on hover

Use the checkbox in row, then add a delete button that appears while the pointer is over the row:

fn row(&self, todo: &Todo, colors: &Colors, cx: &mut Context<Self>) -> impl IntoElement + use<> {
    let id = todo.id;
    div()
        .id(("todo", id))
        .group("row")
        .flex()
        .items_center()
        .gap_3()
        .px_2()
        .py_2()
        .rounded_md()
        .hover(|style| style.bg(colors.container))
        .child(Checkbox {
            id: ("toggle", id).into(),
            checked: todo.done,
            on_toggle: Box::new(cx.listener(move |todos, _, _, cx| todos.toggle(id, cx))),
        })
        .child(
            div()
                .flex_1()
                .when(todo.done, |title| title.line_through().text_color(colors.disabled))
                .child(todo.title.clone()),
        )
        .child(
            div()
                .id(("delete", id))
                .invisible()
                .group_hover("row", |style| style.visible())
                .text_color(colors.disabled)
                .cursor_pointer()
                .child("×")
                .on_click(cx.listener(move |todos, _, _, cx| todos.delete(id, cx))),
        )
}

group names the row, and group_hover styles the delete button when the pointer is anywhere over the group, not just over the button itself.

The ids are pairs such as ("toggle", id). An id only has to be unique among siblings, but the prefix keeps the row, checkbox, and delete button distinct as the row is rebuilt.

The move listeners outlive this call. Copying todo.id into id lets them own the value they need instead of borrowing the row that is being rebuilt.

Filter the list

Add a filter to the view’s state. An enum describes exactly the three choices:

#[derive(Clone, Copy, PartialEq)]
enum Filter {
    All,
    Active,
    Done,
}

Store filter: Filter in Todos, starting at Filter::All. A method returns the todos the filter lets through, and render shows those:

fn visible(&self) -> impl Iterator<Item = &Todo> {
    self.todos.iter().filter(|todo| match self.filter {
        Filter::All => true,
        Filter::Active => !todo.done,
        Filter::Done => todo.done,
    })
}

Then put three buttons in the footer, next to the count:

fn filter_button(&self, filter: Filter, label: &'static str, cx: &mut Context<Self>) -> impl IntoElement {
    div()
        .id(label)
        .px_2()
        .cursor_pointer()
        .when(self.filter == filter, |button| button.font_weight(FontWeight::SEMIBOLD))
        .child(label)
        .on_click(cx.listener(move |todos, _, _, cx| {
            todos.filter = filter;
            cx.notify();
        }))
}

Choosing a filter changes one field and notifies. The next render uses that field for the visible rows and the selected button. The unfinished count remains derived from the full list, so it continues to answer “how many active todos are left?” regardless of which filter is selected.

The program so far

src/main.rs

use gpui::{
    App, ClickEvent, Context, ElementId, Entity, Focusable, FontWeight, KeyBinding, QuitMode,
    SharedString, Window, WindowOptions, actions, colors::Colors, div, prelude::*, px,
};
use gpui_ce_elements::editable_text::{
    EditableTextState, StringStorage,
    actions::{DEFAULT_INPUT_CONTEXT, default_bindings},
    text_input,
};

actions!(todos, [AddTodo]);

struct Todo {
    id: usize,
    title: SharedString,
    done: bool,
}

#[derive(Clone, Copy, PartialEq)]
enum Filter {
    All,
    Active,
    Done,
}

struct Todos {
    todos: Vec<Todo>,
    next_id: usize,
    filter: Filter,
    input: Entity<EditableTextState>,
}

impl Todos {
    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
        let input = cx.new(|cx| EditableTextState::new(StringStorage::default(), cx));
        window.focus(&input.focus_handle(cx), cx);
        Self { todos: Vec::new(), next_id: 0, filter: Filter::All, input }
    }

    fn add(&mut self, _: &AddTodo, _window: &mut Window, cx: &mut Context<Self>) {
        let title = self.input.read(cx).as_str().trim().to_string();
        if title.is_empty() {
            return;
        }
        self.todos.push(Todo { id: self.next_id, title: title.into(), done: false });
        self.next_id += 1;
        self.input.update(cx, |input, cx| input.emplace("", cx));
        cx.notify();
    }

    fn toggle(&mut self, id: usize, cx: &mut Context<Self>) {
        if let Some(todo) = self.todos.iter_mut().find(|todo| todo.id == id) {
            todo.done = !todo.done;
            cx.notify();
        }
    }

    fn delete(&mut self, id: usize, cx: &mut Context<Self>) {
        self.todos.retain(|todo| todo.id != id);
        cx.notify();
    }

    fn visible(&self) -> impl Iterator<Item = &Todo> {
        self.todos.iter().filter(|todo| match self.filter {
            Filter::All => true,
            Filter::Active => !todo.done,
            Filter::Done => todo.done,
        })
    }

    fn row(&self, todo: &Todo, colors: &Colors, cx: &mut Context<Self>) -> impl IntoElement + use<> {
        let id = todo.id;
        div()
            .id(("todo", id))
            .group("row")
            .flex()
            .items_center()
            .gap_3()
            .px_2()
            .py_2()
            .rounded_md()
            .hover(|style| style.bg(colors.container))
            .child(Checkbox {
                id: ("toggle", id).into(),
                checked: todo.done,
                on_toggle: Box::new(cx.listener(move |todos, _, _, cx| todos.toggle(id, cx))),
            })
            .child(
                div()
                    .flex_1()
                    .when(todo.done, |title| title.line_through().text_color(colors.disabled))
                    .child(todo.title.clone()),
            )
            .child(
                div()
                    .id(("delete", id))
                    .invisible()
                    .group_hover("row", |style| style.visible())
                    .text_color(colors.disabled)
                    .cursor_pointer()
                    .child("×")
                    .on_click(cx.listener(move |todos, _, _, cx| todos.delete(id, cx))),
            )
    }

    fn filter_button(&self, filter: Filter, label: &'static str, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .id(label)
            .px_2()
            .cursor_pointer()
            .when(self.filter == filter, |button| button.font_weight(FontWeight::SEMIBOLD))
            .child(label)
            .on_click(cx.listener(move |todos, _, _, cx| {
                todos.filter = filter;
                cx.notify();
            }))
    }
}

impl Render for Todos {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let colors = Colors::for_appearance(window);
        let left = self.todos.iter().filter(|todo| !todo.done).count();

        div()
            .key_context("Todos")
            .on_action(cx.listener(Self::add))
            .size_full()
            .flex()
            .justify_center()
            .p_8()
            .bg(colors.background)
            .text_color(colors.text)
            .child(
                div()
                    .w_full()
                    .max_w(px(480.))
                    .flex()
                    .flex_col()
                    .gap_4()
                    .child(div().text_3xl().font_weight(FontWeight::SEMIBOLD).child("Todos"))
                    .child(
                        text_input("new-todo")
                            .state(self.input.downgrade())
                            .placeholder("What needs doing?")
                            .px_3()
                            .py_2()
                            .rounded_lg()
                            .border_1()
                            .border_color(colors.border),
                    )
                    .child(
                        div()
                            .flex()
                            .flex_col()
                            .children(self.visible().map(|todo| self.row(todo, &colors, cx))),
                    )
                    .child(
                        div()
                            .flex()
                            .justify_between()
                            .text_sm()
                            .text_color(colors.disabled)
                            .child(format!("{left} left"))
                            .child(
                                div()
                                    .flex()
                                    .child(self.filter_button(Filter::All, "All", cx))
                                    .child(self.filter_button(Filter::Active, "Active", cx))
                                    .child(self.filter_button(Filter::Done, "Done", cx)),
                            ),
                    ),
            )
    }
}

#[derive(IntoElement)]
struct Checkbox {
    id: ElementId,
    checked: bool,
    on_toggle: Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>,
}

impl RenderOnce for Checkbox {
    fn render(self, window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let colors = Colors::for_appearance(window);

        div()
            .id(self.id)
            .size_5()
            .flex_shrink_0()
            .rounded_full()
            .border_1()
            .border_color(colors.border)
            .cursor_pointer()
            .when(self.checked, |checkbox| checkbox.bg(colors.selected))
            .on_click(self.on_toggle)
    }
}

fn main() {
    gpui_platform::application()
        .with_quit_mode(QuitMode::LastWindowClosed)
        .run(|cx: &mut App| {
            cx.bind_keys(default_bindings().as_keybindings(Some(DEFAULT_INPUT_CONTEXT)));
            cx.bind_keys([KeyBinding::new("enter", AddTodo, Some("Todos"))]);

            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| Todos::new(window, cx))
            })
            .unwrap();
            cx.activate(true);
        });
}

Deleting is currently instant and final. In the next chapter, a task keeps an undo message alive for four seconds after a delete.