Render `Panel`

Marshall Bowers created

Change summary

crates/storybook2/src/ui/components/panel.rs | 16 ++-
crates/storybook2/src/workspace.rs           | 88 +++++++++++----------
2 files changed, 54 insertions(+), 50 deletions(-)

Detailed changes

crates/storybook2/src/ui/components/panel.rs 🔗

@@ -39,8 +39,9 @@ pub enum PanelSide {
 
 use std::collections::HashSet;
 
-// #[derive(Element)]
-pub struct Panel {
+#[derive(Element)]
+pub struct Panel<S: 'static + Send + Sync> {
+    state_type: PhantomData<S>,
     scroll_state: ScrollState,
     current_side: PanelSide,
     /// Defaults to PanelAllowedSides::LeftAndRight
@@ -51,7 +52,7 @@ pub struct Panel {
     // payload: HackyChildrenPayload,
 }
 
-impl Panel {
+impl<S: 'static + Send + Sync> Panel<S> {
     pub fn new(
         scroll_state: ScrollState,
         // children: HackyChildren<S>,
@@ -60,6 +61,7 @@ impl Panel {
         let token = token();
 
         Self {
+            state_type: PhantomData,
             scroll_state,
             current_side: PanelSide::default(),
             allowed_sides: PanelAllowedSides::default(),
@@ -99,7 +101,7 @@ impl Panel {
         self
     }
 
-    fn render<S: 'static + Send + Sync>(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
         let token = token();
         let theme = rose_pine_dawn();
 
@@ -112,7 +114,7 @@ impl Panel {
                     .flex_initial()
                     .h_full()
                     // .w(current_width)
-                    .w_4()
+                    .w_64()
                     .fill(theme.middle.base.default.background)
                     .border_r()
                     .border_color(theme.middle.base.default.border);
@@ -122,7 +124,7 @@ impl Panel {
                     .flex_initial()
                     .h_full()
                     // .w(current_width)
-                    .w_4()
+                    .w_64()
                     .fill(theme.middle.base.default.background)
                     .border_l()
                     .border_color(theme.middle.base.default.border);
@@ -132,7 +134,7 @@ impl Panel {
                     .flex_initial()
                     .w_full()
                     // .h(current_width)
-                    .h_4()
+                    .h_64()
                     .fill(theme.middle.base.default.background)
                     .border_t()
                     .border_color(theme.middle.base.default.border);

crates/storybook2/src/workspace.rs 🔗

@@ -30,57 +30,59 @@ impl Workspace {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<State = Self> {
         let theme = rose_pine_dawn();
 
-        // div()
-        //     .size_full()
-        //     .v_stack()
-        //     .fill(theme.lowest.base.default.background)
-        //     .child(Panel::new(ScrollState::default()))
-        //     .child(
-        //         div()
-        //             .size_full()
-        //             .h_stack()
-        //             .gap_3()
-        //             .children((0..4).map(|i| {
-        //                 div().size_full().flex().fill(gpui3::hsla(
-        //                     0. + (i as f32 / 7.),
-        //                     0. + (i as f32 / 5.),
-        //                     0.5,
-        //                     1.,
-        //                 ))
-        //             })),
-        //     )
-        //     .child(
-        //         div()
-        //             .size_full()
-        //             .flex()
-        //             .fill(theme.middle.negative.default.background),
-        //     )
-
         themed(rose_pine_dawn(), cx, |cx| {
             div()
                 .size_full()
-                .flex()
-                .flex_col()
-                .font("Courier")
-                .gap_0()
-                .justify_start()
-                .items_start()
-                .text_color(theme.lowest.base.default.foreground)
-                .fill(theme.middle.base.default.background)
-                .child(titlebar(cx))
+                .v_stack()
+                .fill(theme.lowest.base.default.background)
+                .child(Panel::new(ScrollState::default()))
                 .child(
                     div()
-                        .flex_1()
-                        .w_full()
+                        .size_full()
+                        .h_stack()
+                        .gap_3()
+                        .children((0..4).map(|i| {
+                            div().size_full().flex().fill(gpui3::hsla(
+                                0. + (i as f32 / 7.),
+                                0. + (i as f32 / 5.),
+                                0.5,
+                                1.,
+                            ))
+                        })),
+                )
+                .child(
+                    div()
+                        .size_full()
                         .flex()
-                        .flex_row()
-                        .overflow_hidden()
-                        .child(self.left_panel.clone())
-                        .child(div().h_full().flex_1())
-                        .child(self.right_panel.clone()),
+                        .fill(theme.middle.negative.default.background),
                 )
-                .child(statusbar::statusbar(cx))
         })
+
+        // themed(rose_pine_dawn(), cx, |cx| {
+        //     div()
+        //         .size_full()
+        //         .flex()
+        //         .flex_col()
+        //         .font("Courier")
+        //         .gap_0()
+        //         .justify_start()
+        //         .items_start()
+        //         .text_color(theme.lowest.base.default.foreground)
+        //         .fill(theme.middle.base.default.background)
+        //         .child(titlebar(cx))
+        //         .child(
+        //             div()
+        //                 .flex_1()
+        //                 .w_full()
+        //                 .flex()
+        //                 .flex_row()
+        //                 .overflow_hidden()
+        //                 .child(self.left_panel.clone())
+        //                 .child(div().h_full().flex_1())
+        //                 .child(self.right_panel.clone()),
+        //         )
+        //         .child(statusbar::statusbar(cx))
+        // })
     }
 }