Shell · ColumnShell's story on the Window & Shell page, the PRD line, stories.json and AGENTS.md (#6)

examples/gallery/pages/shell/columns.rs

@@ -0,0 +1,133 @@
+use ely_gpui_component::{
+    buttons::IconButton,
+    navigation::NavItem,
+    primitives::IconName,
+    shell::{ColumnShell, ShellColumn},
+    theme::{ActiveTheme, ControlSize},
+    typography::{Caption, Paragraph},
+};
+use gpui::{App, IntoElement, ParentElement, SharedString, Styled, div, px};
+
+use super::chrome::window_frame;
+use crate::ui::{code, section, specimen};
+
+fn icon(id: &'static str, ix: usize, name: IconName) -> IconButton {
+    IconButton::new((id, ix), name).size(ControlSize::Sm)
+}
+
+fn shell(id: &'static str, cx: &App) -> ColumnShell {
+    ColumnShell::new(id)
+        .platform(cx.theme().platform)
+        .on_close(|_, _| log::info!("gallery: demo close refused"))
+}
+
+fn sidebar(id: &'static str, items: [(IconName, &'static str); 3], cx: &App) -> ShellColumn {
+    let nav = div()
+        .p_2()
+        .flex()
+        .flex_col()
+        .gap_0p5()
+        .children(items.into_iter().enumerate().map(|(ix, (glyph, label))| {
+            NavItem::new(SharedString::from(format!("{id}-{ix}")), glyph, label).active(ix == 0)
+        }));
+    ShellColumn::new(id)
+        .width(cx.theme().sidebar_width(false))
+        .leading(icon(id, 0, IconName::PanelLeft))
+        .leading(icon(id, 1, IconName::ArrowLeft))
+        .leading(icon(id, 2, IconName::ArrowRight))
+        .child(nav)
+}
+
+fn two_columns(cx: &App) -> impl IntoElement + use<> {
+    let items = [
+        (IconName::SquarePen, "New task"),
+        (IconName::Search, "Search"),
+        (IconName::Inbox, "Inbox"),
+    ];
+    let main = ShellColumn::new("cs2-main")
+        .title("New task")
+        .action(icon("cs2-main", 0, IconName::Info))
+        .action(icon("cs2-main", 1, IconName::PanelRight))
+        .child(
+            div()
+                .size_full()
+                .flex()
+                .items_center()
+                .justify_center()
+                .child(Paragraph::new("What should we build?")),
+        );
+    window_frame(640.0, 280.0, cx).child(
+        shell("cs2", cx)
+            .column(sidebar("cs2-side", items, cx))
+            .column(main),
+    )
+}
+
+fn three_columns(cx: &App) -> impl IntoElement + use<> {
+    let items = [
+        (IconName::Inbox, "Inbox"),
+        (IconName::Send, "Sent"),
+        (IconName::Archive, "Archive"),
+    ];
+    let mail = [
+        (
+            "Quarterly review",
+            "Numbers, notes and the next three moves.",
+        ),
+        ("Design sync", "Tokens for the new sidebar."),
+        ("Launch plan", "Dates for the beta."),
+    ];
+    let list = ShellColumn::new("cs3-list")
+        .width(px(220.0))
+        .title("Inbox")
+        .action(icon("cs3-list", 0, IconName::Search))
+        .child(
+            div()
+                .p_2()
+                .flex()
+                .flex_col()
+                .gap_3()
+                .children(mail.map(|(subject, line)| {
+                    div()
+                        .px_2()
+                        .flex()
+                        .flex_col()
+                        .gap_0p5()
+                        .child(Paragraph::new(subject))
+                        .child(Caption::new(line))
+                })),
+        );
+    let message = ShellColumn::new("cs3-main")
+        .title("Quarterly review")
+        .action(icon("cs3-main", 0, IconName::Reply))
+        .action(icon("cs3-main", 1, IconName::Archive))
+        .child(div().p_5().child(Paragraph::new(
+            "Revenue rose eight percent. Three moves come next: hire, ship the beta, close the books.",
+        )));
+    window_frame(760.0, 280.0, cx).child(
+        shell("cs3", cx)
+            .column(sidebar("cs3-side", items, cx))
+            .column(list)
+            .column(message),
+    )
+}
+
+pub fn column_shell(cx: &App) -> impl IntoElement + use<> {
+    section(
+        "ColumnShell / ShellColumn",
+        "The sidebar runs to the window's top; each column brings a header that drags.",
+        cx,
+    )
+    .child(
+        div()
+            .flex()
+            .flex_col()
+            .gap_6()
+            .child(specimen("Two columns", two_columns(cx), cx))
+            .child(specimen("Three columns", three_columns(cx), cx)),
+    )
+    .child(code(
+        "ColumnShell::new(id) with no platform leaves the first header room for the real macOS lights.",
+        cx,
+    ))
+}

examples/gallery/pages/shell/mod.rs

@@ -1,5 +1,6 @@
 mod bars;
 mod chrome;
+mod columns;
 mod status;
 mod system;
 mod windows;
@@ -102,6 +103,7 @@ const SCRIPT: &[Step] = &[
 fn render(window: &mut Window, cx: &mut App) -> AnyElement {
     div()
         .child(chrome::title_bar(cx))
+        .child(columns::column_shell(cx))
         .child(chrome::window_controls(cx))
         .child(chrome::drag_area(window, cx))
         .child(chrome::resize_border(cx))