add right sidebar auto-open to dock panels

examples/gallery/src/main.rs

@@ -34,7 +34,7 @@ use gpui_native_data::sidebar::{Sidebar, SidebarEntry};
 use gpui_native_data::tabs::{Tab, Tabs, TabsVariant};
 use gpui_native_data::tree::{Tree, TreeItem};
 use gpui_native_icons::{IconAssets, IconRole, icon};
-use gpui_native_layout::dock::{Dock, DockState, PanelDescriptor, SplitDirection};
+use gpui_native_layout::dock::{Dock, DockSidebar, DockState, PanelDescriptor, SplitDirection};
 use gpui_native_layout::resize_handle::ResizeHandle;
 use gpui_native_layout::shell::{LayoutState, Shell};
 use gpui_native_theme::{ActiveTheme as _, Size, Theme};
@@ -155,7 +155,6 @@ impl Gallery {
     /// The app shell demo: sidebars around a center region, toggles in the
     /// center demonstrating the `LayoutState` API.
     fn render_app_shell(&self, gallery: &Entity<Self>, cx: &App) -> impl IntoElement + use<> {
-        let colors = cx.theme().colors;
         let state = self.layout_state.clone();
         let state_for_toggle = state.clone();
 
@@ -198,13 +197,8 @@ impl Gallery {
                 }
             });
 
-        let right_sidebar = v_flex()
-            .gap_1()
-            .p_2()
-            .child("Details")
-            .child("Signed by the author")
-            .text_sm()
-            .text_color(colors.muted_foreground);
+        let right_sidebar =
+            DockSidebar::new("gallery-dock-sidebar", self.dock_state.clone()).into_any_element();
 
         let open_panel = |dock: &Entity<DockState>, id: &'static str, label: &'static str| {
             let dock = dock.clone();
@@ -285,6 +279,34 @@ impl Render for DemoPanel {
     }
 }
 
+/// The right sidebar view a demo panel declares.
+struct RightDetails {
+    title: &'static str,
+    body: &'static str,
+}
+
+impl Render for RightDetails {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let colors = cx.theme().colors;
+        v_flex()
+            .size_full()
+            .gap_1()
+            .p_2()
+            .bg(colors.background)
+            .child(
+                div()
+                    .font_weight(gpui::FontWeight::MEDIUM)
+                    .child(self.title),
+            )
+            .child(
+                div()
+                    .text_sm()
+                    .text_color(colors.muted_foreground)
+                    .child(self.body),
+            )
+    }
+}
+
 impl Render for Gallery {
     fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let theme = cx.theme();
@@ -1767,6 +1789,16 @@ fn main() {
         notes_state.update(cx, |state, cx| state.set_multiline(true, cx));
         let layout_state = LayoutState::new(cx);
         let dock_state = DockState::new(cx);
+        // A panel that declares a right sidebar view asks for it to open on
+        // activation; visibility itself stays on the shell's LayoutState.
+        let layout_for_dock = layout_state.clone();
+        dock_state.update(cx, |dock, _| {
+            dock.on_open_right_sidebar(move |cx| {
+                layout_for_dock.update(cx, |state, cx| {
+                    state.set_right_sidebar_visible(true, cx);
+                });
+            });
+        });
         dock_state.update(cx, |dock, cx| {
             dock.register_panel(
                 PanelDescriptor::new("overview", "Overview", |_, cx| {
@@ -1775,6 +1807,13 @@ fn main() {
                         body: "View state survives tab switches and pane moves.",
                     })
                     .into()
+                })
+                .right_sidebar(|_, cx| {
+                    cx.new(|_| RightDetails {
+                        title: "Overview",
+                        body: "Details follow the active panel.",
+                    })
+                    .into()
                 }),
                 cx,
             );
@@ -1785,6 +1824,13 @@ fn main() {
                         body: "Right-click the tab bar for Close, Close Others, Close Pane.",
                     })
                     .into()
+                })
+                .right_sidebar(|_, cx| {
+                    cx.new(|_| RightDetails {
+                        title: "Inbox",
+                        body: "Sync status of the selected account.",
+                    })
+                    .into()
                 }),
                 cx,
             );