Continue collab_panel

crates/gpui2/src/style.rs

@@ -364,6 +364,30 @@ pub trait StyleHelpers: Styleable<Style = Style> {
         self
     }
 
+    fn items_start(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().align_items = Some(AlignItems::FlexStart);
+        self
+    }
+
+    fn items_end(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().align_items = Some(AlignItems::FlexEnd);
+        self
+    }
+
+    fn items_center(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().align_items = Some(AlignItems::Center);
+        self
+    }
+
     fn justify_between(mut self) -> Self
     where
         Self: Sized,

crates/storybook/src/collab_panel.rs

@@ -1,9 +1,5 @@
 use crate::theme::theme;
-use gpui2::{
+use gpui2::{elements::div, style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext};
-    elements::div,
-    style::{StyleHelpers, Styleable},
-    Element, IntoElement, ParentElement, ViewContext,
-};
 use std::marker::PhantomData;
 
 #[derive(Element)]
@@ -17,7 +13,42 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
     }
 }
 
-// fn list_item<V: 'static>(cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+// #[derive(Element)]
+// struct ListItem {
+//     label: Option<ArcCow<'static, str>>,
+// }
+
+// pub fn list_item() -> ListItem {
+//     ListItem { label: None }
+// }
+
+// impl ListItem {
+//     pub fn render<V: 'static>(
+//         &mut self,
+//         view: &mut V,
+//         cx: &mut ViewContext<Self>,
+//     ) -> impl Element<V> {
+//         let theme = theme(cx);
+
+//         div()
+//             .px_2()
+//             .flex()
+//             .justify_between()
+//             .hover()
+//             .fill(theme.middle.variant.hovered.background)
+//             .active()
+//             .fill(theme.middle.variant.pressed.background)
+//             .child(div().flex().gap_1().child("#").child(self.label))
+//             .child(div().flex().gap_1().child("v"))
+//     }
+
+//     pub fn label(mut self, label: impl Into<ArcCow<'static, str>>) -> Self {
+//         self.label = Some(label.into());
+//         self
+//     }
+// }
+
+// fn list_item<V: 'static>(cx: &mut ViewContext<V>, label: &mut str) -> impl IntoElement<V> {
 //     let theme = theme(cx);
 //     div()
 //         .px_2()
@@ -36,7 +67,6 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
 // - border (b, t, l, r, x, y)
 // - border_[foo]_[size] (border_b_2, border_t_4, etc)
 // - border_color
-// - items_[center, start, end]
 
 impl<V: 'static> CollabPanelElement<V> {
     fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
@@ -45,16 +75,17 @@ impl<V: 'static> CollabPanelElement<V> {
         // Panel
         div()
             .full()
-            .font("Zed Sans")
+            .flex()
+            .flex_col()
+            .font("Zed Sans Extended")
             .text_color(theme.middle.variant.default.foreground)
             // .border_color(theme.middle.base.default.border)
             .fill(theme.middle.base.default.background)
             // List Container
             .child(
                 div()
-                    .full()
+                    .fill(theme.lowest.base.default.background)
-                    .fill(theme.middle.variant.default.background)
+                    .pb_1()
-                    .py_2()
                     // .border_b()
                     //:: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
                     // .group()
@@ -64,20 +95,19 @@ impl<V: 'static> CollabPanelElement<V> {
                             .px_2()
                             .flex()
                             .justify_between()
-                            //:: States - https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active
+                            // .hover()
-                            .hover()
+                            // .fill(theme.middle.variant.hovered.background)
-                            .fill(theme.middle.variant.hovered.background)
+                            // .active()
-                            // .focus().fill(theme.middle.variant.active.background)
+                            // .fill(theme.middle.variant.pressed.background)
-                            .active()
-                            .fill(theme.middle.variant.pressed.background)
                             .child(
                                 div()
                                     .flex()
                                     .gap_1()
                                     //:: State based on group interaction state
                                     // .group_hover().text_color(theme.middle.variant.hovered.foreground)
+                                    .text_sm()
                                     .child("#")
-                                    .child("Collab Panel"),
+                                    .child("CRDB"),
                             )
                             .child(div().flex().gap_1().child("v")),
                     )
@@ -88,16 +118,66 @@ impl<V: 'static> CollabPanelElement<V> {
                             .h_7()
                             .flex()
                             .justify_between()
-                            // .items_center()
+                            .items_center()
                             .child(
                                 div()
                                     .flex()
+                                    .h_full()
                                     .gap_1()
-                                    .child(div().w_4().h_4().child("img"))
+                                    .items_center()
+                                    .text_sm()
+                                    .child(
+                                        div()
+                                            .w_4()
+                                            .h_4()
+                                            .fill(theme.middle.negative.default.foreground),
+                                    )
                                     .child("maxbrunsfeld"),
                             )
-                            .child(div().flex().gap_2().child("icon")),
+                            .child(
+                                div()
+                                    .flex()
+                                    .h_full()
+                                    .gap_2()
+                                    .items_center()
+                                    .child(
+                                        div()
+                                            .w_3_5()
+                                            .h_3_5()
+                                            .fill(theme.middle.negative.default.foreground),
+                                    )
+                                    .child("i"),
                             ),
+                    ),
+            )
+            .child(
+                div()
+                    .w_full()
+                    .flex()
+                    .flex_col()
+                    .gap_y_1()
+                    // List Section Header
+                    .child(
+                        div()
+                            .h_7()
+                            .px_2()
+                            .flex()
+                            .justify_between()
+                            .items_center()
+                            .child(div().flex().gap_1().text_sm().child("CHANNELS"))
+                            .child(div().flex().gap_1().text_sm().child("v")),
+                    ),
+            )
+            // Large List Item
+            .child(
+                div()
+                    .h_7()
+                    .px_2()
+                    .flex()
+                    .justify_between()
+                    .items_center()
+                    .child(div().flex().gap_1().text_sm().child("CONTACTS"))
+                    .child(div().flex().gap_1().text_sm().child("v")),
             )
     }
 }