Add native collection, table, outline, menu, and tab controls

crates/gpui/Cargo.toml

@@ -359,3 +359,31 @@ path = "examples/native_switch.rs"
 [[example]]
 name = "native_toggle_group"
 path = "examples/native_toggle_group.rs"
+
+[[example]]
+name = "native_collection_view"
+path = "examples/native_collection_view.rs"
+
+[[example]]
+name = "native_table_view"
+path = "examples/native_table_view.rs"
+
+[[example]]
+name = "native_outline_view"
+path = "examples/native_outline_view.rs"
+
+[[example]]
+name = "native_menu_button"
+path = "examples/native_menu_button.rs"
+
+[[example]]
+name = "native_tab_view"
+path = "examples/native_tab_view.rs"
+
+[[example]]
+name = "native_table_styles"
+path = "examples/native_table_styles.rs"
+
+[[example]]
+name = "native_list_views"
+path = "examples/native_list_views.rs"

crates/gpui/examples/native_collection_view.rs

@@ -0,0 +1,84 @@
+use gpui::{
+    App, Application, Bounds, CollectionSelectEvent, Context, NativeCollectionItemStyle, Window,
+    WindowAppearance, WindowBounds, WindowOptions, div, native_collection_view, prelude::*, px,
+    rgb, size,
+};
+
+struct CollectionViewExample {
+    selected: Option<usize>,
+}
+
+impl CollectionViewExample {
+    const APPS: [&str; 12] = [
+        "Calendar",
+        "Mail",
+        "Notes",
+        "Music",
+        "Maps",
+        "Photos",
+        "Books",
+        "TV",
+        "Stocks",
+        "Weather",
+        "Shortcuts",
+        "Xcode",
+    ];
+}
+
+impl Render for CollectionViewExample {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let is_dark = matches!(
+            window.appearance(),
+            WindowAppearance::Dark | WindowAppearance::VibrantDark
+        );
+        let (bg, fg, muted) = if is_dark {
+            (rgb(0x1b1d22), rgb(0xffffff), rgb(0xb5bcc8))
+        } else {
+            (rgb(0xf4f6fa), rgb(0x1a2230), rgb(0x5d6676))
+        };
+
+        div()
+            .flex()
+            .flex_col()
+            .size_full()
+            .gap_3()
+            .p_4()
+            .bg(bg)
+            .text_color(fg)
+            .child(div().text_xl().child("Native CollectionView (Cards)"))
+            .child(
+                native_collection_view("apps", &Self::APPS)
+                    .columns(3)
+                    .item_height(72.0)
+                    .item_style(NativeCollectionItemStyle::Card)
+                    .selected_index(self.selected)
+                    .on_select(cx.listener(|this, event: &CollectionSelectEvent, _, cx| {
+                        this.selected = Some(event.index);
+                        cx.notify();
+                    }))
+                    .h(px(300.0)),
+            )
+            .child(div().text_sm().text_color(muted).child(format!(
+                "Selected: {}",
+                self.selected
+                    .map(|i| Self::APPS[i].to_string())
+                    .unwrap_or_else(|| "<none>".to_string())
+            )))
+    }
+}
+
+fn main() {
+    Application::new().run(|cx: &mut App| {
+        let bounds = Bounds::centered(None, size(px(760.), px(520.)), cx);
+        cx.open_window(
+            WindowOptions {
+                window_bounds: Some(WindowBounds::Windowed(bounds)),
+                ..Default::default()
+            },
+            |_, cx| cx.new(|_| CollectionViewExample { selected: None }),
+        )
+        .unwrap();
+
+        cx.activate(true);
+    });
+}

crates/gpui/examples/native_list_views.rs

@@ -0,0 +1,182 @@
+use gpui::{
+    App, Application, Bounds, CollectionSelectEvent, Context, NativeCollectionItemStyle,
+    NativeOutlineNode, OutlineRowSelectEvent, TableRowSelectEvent, Window, WindowAppearance,
+    WindowBounds, WindowOptions, div, native_collection_view, native_outline_view,
+    native_table_view, prelude::*, px, rgb, size,
+};
+
+struct ListViewsExample {
+    selected_collection: Option<usize>,
+    selected_table: Option<usize>,
+    selected_outline: String,
+}
+
+impl ListViewsExample {
+    const ITEMS: [&str; 10] = [
+        "Accounts",
+        "Projects",
+        "Deployments",
+        "Domains",
+        "Settings",
+        "Members",
+        "Tokens",
+        "Alerts",
+        "Logs",
+        "Billing",
+    ];
+
+    fn outline_nodes() -> Vec<NativeOutlineNode> {
+        vec![
+            NativeOutlineNode::branch(
+                "Workspace",
+                vec![
+                    NativeOutlineNode::leaf("Overview"),
+                    NativeOutlineNode::leaf("Members"),
+                    NativeOutlineNode::leaf("Audit Log"),
+                ],
+            ),
+            NativeOutlineNode::branch(
+                "Applications",
+                vec![
+                    NativeOutlineNode::leaf("Glass"),
+                    NativeOutlineNode::leaf("Console"),
+                    NativeOutlineNode::leaf("Dashboard"),
+                ],
+            ),
+        ]
+    }
+}
+
+impl Render for ListViewsExample {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let is_dark = matches!(
+            window.appearance(),
+            WindowAppearance::Dark | WindowAppearance::VibrantDark
+        );
+        let (bg, fg, muted) = if is_dark {
+            (rgb(0x171b22), rgb(0xffffff), rgb(0xb7c0ce))
+        } else {
+            (rgb(0xf5f7fb), rgb(0x1b2434), rgb(0x606a7c))
+        };
+
+        div()
+            .flex()
+            .flex_col()
+            .size_full()
+            .gap_3()
+            .p_4()
+            .bg(bg)
+            .text_color(fg)
+            .child(
+                div()
+                    .text_xl()
+                    .child("Native Lists: Collection / Table / Outline"),
+            )
+            .child(
+                div()
+                    .flex()
+                    .gap_3()
+                    .child(
+                        div()
+                            .flex()
+                            .flex_col()
+                            .gap_2()
+                            .child(div().text_sm().child("NSCollectionView (list mode)"))
+                            .child(
+                                native_collection_view("collection", &Self::ITEMS)
+                                    .columns(1)
+                                    .item_height(34.0)
+                                    .spacing(2.0)
+                                    .item_style(NativeCollectionItemStyle::Label)
+                                    .selected_index(self.selected_collection)
+                                    .on_select(cx.listener(
+                                        |this, event: &CollectionSelectEvent, _, cx| {
+                                            this.selected_collection = Some(event.index);
+                                            cx.notify();
+                                        },
+                                    ))
+                                    .w(px(260.0))
+                                    .h(px(360.0)),
+                            ),
+                    )
+                    .child(
+                        div()
+                            .flex()
+                            .flex_col()
+                            .gap_2()
+                            .child(div().text_sm().child("NSTableView (source list style)"))
+                            .child(
+                                native_table_view("table", &Self::ITEMS)
+                                    .table_style(gpui::NativeTableStyle::SourceList)
+                                    .row_size_style(gpui::NativeTableRowSizeStyle::Small)
+                                    .show_header(false)
+                                    .alternating_rows(false)
+                                    .selected_index(self.selected_table)
+                                    .on_select(cx.listener(
+                                        |this, event: &TableRowSelectEvent, _, cx| {
+                                            this.selected_table = Some(event.index);
+                                            cx.notify();
+                                        },
+                                    ))
+                                    .w(px(260.0))
+                                    .h(px(360.0)),
+                            ),
+                    )
+                    .child(
+                        div()
+                            .flex()
+                            .flex_col()
+                            .gap_2()
+                            .child(div().text_sm().child("NSOutlineView"))
+                            .child(
+                                native_outline_view("outline", &Self::outline_nodes())
+                                    .expand_all(true)
+                                    .on_select(cx.listener(
+                                        |this, event: &OutlineRowSelectEvent, _, cx| {
+                                            this.selected_outline = event.title.to_string();
+                                            cx.notify();
+                                        },
+                                    ))
+                                    .w(px(260.0))
+                                    .h(px(360.0)),
+                            ),
+                    ),
+            )
+            .child(div().text_sm().text_color(muted).child(format!(
+                    "Collection: {} | Table: {} | Outline: {}",
+                    self.selected_collection
+                        .map(|idx| Self::ITEMS[idx].to_string())
+                        .unwrap_or_else(|| "<none>".to_string()),
+                    self.selected_table
+                        .map(|idx| Self::ITEMS[idx].to_string())
+                        .unwrap_or_else(|| "<none>".to_string()),
+                    if self.selected_outline.is_empty() {
+                        "<none>".to_string()
+                    } else {
+                        self.selected_outline.clone()
+                    }
+                )))
+    }
+}
+
+fn main() {
+    Application::new().run(|cx: &mut App| {
+        let bounds = Bounds::centered(None, size(px(920.), px(540.)), cx);
+        cx.open_window(
+            WindowOptions {
+                window_bounds: Some(WindowBounds::Windowed(bounds)),
+                ..Default::default()
+            },
+            |_, cx| {
+                cx.new(|_| ListViewsExample {
+                    selected_collection: None,
+                    selected_table: None,
+                    selected_outline: String::new(),
+                })
+            },
+        )
+        .unwrap();
+
+        cx.activate(true);
+    });
+}

crates/gpui/examples/native_menu_button.rs

@@ -0,0 +1,98 @@
+use gpui::{
+    App, Application, Bounds, Context, MenuItemSelectEvent, NativeMenuItem, Window,
+    WindowAppearance, WindowBounds, WindowOptions, div, native_context_menu, native_menu_button,
+    prelude::*, px, rgb, size,
+};
+
+struct MenuExample {
+    selected_index: Option<usize>,
+}
+
+impl MenuExample {
+    fn menu() -> Vec<NativeMenuItem> {
+        vec![
+            NativeMenuItem::action("Open"),
+            NativeMenuItem::action("Duplicate"),
+            NativeMenuItem::separator(),
+            NativeMenuItem::submenu(
+                "Export",
+                vec![
+                    NativeMenuItem::action("PNG"),
+                    NativeMenuItem::action("PDF"),
+                    NativeMenuItem::action("SVG"),
+                ],
+            ),
+            NativeMenuItem::separator(),
+            NativeMenuItem::action("Delete").enabled(false),
+        ]
+    }
+}
+
+impl Render for MenuExample {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let is_dark = matches!(
+            window.appearance(),
+            WindowAppearance::Dark | WindowAppearance::VibrantDark
+        );
+        let (bg, fg, muted) = if is_dark {
+            (rgb(0x171b21), rgb(0xffffff), rgb(0xb1bbc8))
+        } else {
+            (rgb(0xf4f7fb), rgb(0x1a2434), rgb(0x5f6a7b))
+        };
+
+        let menu = Self::menu();
+
+        div()
+            .flex()
+            .flex_col()
+            .size_full()
+            .items_center()
+            .justify_center()
+            .gap_4()
+            .bg(bg)
+            .text_color(fg)
+            .child(div().text_xl().child("Native MenuButton + ContextMenu"))
+            .child(
+                native_menu_button("actions", "Actions", &menu).on_select(cx.listener(
+                    |this, event: &MenuItemSelectEvent, _, cx| {
+                        this.selected_index = Some(event.index);
+                        cx.notify();
+                    },
+                )),
+            )
+            .child(
+                native_context_menu("context", "Right click me", &menu).on_select(cx.listener(
+                    |this, event: &MenuItemSelectEvent, _, cx| {
+                        this.selected_index = Some(event.index);
+                        cx.notify();
+                    },
+                )),
+            )
+            .child(div().text_sm().text_color(muted).child(format!(
+                "Selected action index: {}",
+                self.selected_index
+                    .map(|idx| idx.to_string())
+                    .unwrap_or_else(|| "<none>".to_string())
+            )))
+    }
+}
+
+fn main() {
+    Application::new().run(|cx: &mut App| {
+        let bounds = Bounds::centered(None, size(px(560.), px(360.)), cx);
+        cx.open_window(
+            WindowOptions {
+                window_bounds: Some(WindowBounds::Windowed(bounds)),
+                ..Default::default()
+            },
+            |_, cx| {
+                cx.new(|_| MenuExample {
+                    selected_index: None,
+                })
+            },
+        )
+        .unwrap();
+
+        cx.activate(true);
+    });
+}