Checkpoint - Details

crates/storybook/src/ui.rs

@@ -1,5 +1,6 @@
 mod element;
 pub use element::avatar::*;
+pub use element::details::*;
 pub use element::icon::*;
 pub use element::icon_button::*;
 pub use element::indicator::*;

crates/storybook/src/ui/element.rs

@@ -1,4 +1,5 @@
 pub(crate) mod avatar;
+pub(crate) mod details;
 pub(crate) mod icon;
 pub(crate) mod icon_button;
 pub(crate) mod indicator;

crates/storybook/src/ui/element/details.rs

@@ -0,0 +1,36 @@
+use crate::theme::theme;
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, ViewContext};
+use gpui2::{IntoElement, ParentElement};
+
+#[derive(Element, Clone)]
+pub struct Details {
+    text: &'static str,
+    meta: Option<&'static str>,
+}
+
+pub fn details(text: &'static str) -> Details {
+    Details { text, meta: None }
+}
+
+impl Details {
+    pub fn meta_text(mut self, meta: &'static str) -> Self {
+        self.meta = Some(meta);
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            // .flex()
+            // .w_full()
+            .p_1()
+            .gap_0p5()
+            .text_xs()
+            .text_color(theme.lowest.base.default.foreground)
+            .child(self.text.clone())
+            .children(self.meta.map(|m| m))
+    }
+}

crates/storybook/src/ui/module/project_panel.rs

@@ -1,7 +1,7 @@
 use crate::{
     prelude::{InteractionState, ToggleState},
     theme::theme,
-    ui::{input, label, list_item, IconAsset, LabelColor},
+    ui::{details, input, label, list_item, IconAsset, LabelColor},
 };
 use gpui2::{
     elements::{div, div::ScrollState},
@@ -36,10 +36,11 @@ impl<V: 'static> ProjectPanel<V> {
             .fill(theme.middle.base.default.background)
             .child(
                 div()
-                    .w_full()
+                    .w_56()
                     .flex()
                     .flex_col()
                     .overflow_y_scroll(self.scroll_state.clone())
+                    .child(details("This is a long string that should wrap when it keeps going for a long time.").meta_text("6 h ago)"))
                     .child(
                         div().flex().flex_col().children(
                             std::iter::repeat_with(|| {