From 2699f170ca96ce973229ca4759e886efacefebf2 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 19:18:23 -0400
Subject: [PATCH] Checkpoint - Details

---
 crates/storybook/src/ui.rs                    |  1 +
 crates/storybook/src/ui/element.rs            |  1 +
 crates/storybook/src/ui/element/details.rs    | 36 +++++++++++++++++++
 .../storybook/src/ui/module/project_panel.rs  |  5 +--
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 crates/storybook/src/ui/element/details.rs

diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
index 3e431ca448f..056ad56a2b8 100644
--- a/crates/storybook/src/ui.rs
+++ b/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::*;
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
index c5265e0ab47..e79a9c5986a 100644
--- a/crates/storybook/src/ui/element.rs
+++ b/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;
diff --git a/crates/storybook/src/ui/element/details.rs b/crates/storybook/src/ui/element/details.rs
new file mode 100644
index 00000000000..5d06862439c
--- /dev/null
+++ b/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))
+    }
+}
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
index 516817cae2b..5a9608d3e3d 100644
--- a/crates/storybook/src/ui/module/project_panel.rs
+++ b/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(|| {