From 85aedf9bed1d4284a3a682e2fd120da765ea2485 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@zed.dev>
Date: Tue, 5 Sep 2023 16:40:52 -0600
Subject: [PATCH] WIP: Icons not yet rendering

---
 crates/gpui/src/app/window.rs        |  3 --
 crates/gpui2/src/element.rs          |  2 +-
 crates/gpui2/src/elements.rs         |  2 +
 crates/gpui2/src/elements/svg.rs     | 81 ++++++++++++++++++++++++++++
 crates/gpui2/src/elements/text.rs    |  8 +++
 crates/storybook/src/collab_panel.rs | 53 ++++++++++--------
 crates/storybook/src/storybook.rs    |  1 +
 crates/storybook/src/theme.rs        |  5 +-
 8 files changed, 126 insertions(+), 29 deletions(-)
 create mode 100644 crates/gpui2/src/elements/svg.rs

diff --git a/crates/gpui/src/app/window.rs b/crates/gpui/src/app/window.rs
index 18691934e5992d34f3ff80c1ef9e35f4f6235b88..2c4a758c7f45a433e6ff3d6366eae14ab5c7627e 100644
--- a/crates/gpui/src/app/window.rs
+++ b/crates/gpui/src/app/window.rs
@@ -1291,9 +1291,6 @@ impl<'a> WindowContext<'a> {
     pub fn push_text_style(&mut self, refinement: &TextStyleRefinement) -> Result<()> {
         let mut style = self.text_style();
         style.refine(refinement, self.font_cache())?;
-
-        dbg!(&style);
-
         self.window.text_style_stack.push(style);
         Ok(())
     }
diff --git a/crates/gpui2/src/element.rs b/crates/gpui2/src/element.rs
index d893b6794ca021f65338058a9b3b6903eb41befd..92a981fc5c2200257119d6d201d27f00179a6d84 100644
--- a/crates/gpui2/src/element.rs
+++ b/crates/gpui2/src/element.rs
@@ -5,7 +5,7 @@ use gpui::geometry::vector::Vector2F;
 pub use gpui::{Layout, LayoutId};
 use smallvec::SmallVec;
 
-pub trait Element<V: 'static>: 'static {
+pub trait Element<V: 'static>: 'static + IntoElement<V> {
     type PaintState;
 
     fn layout(
diff --git a/crates/gpui2/src/elements.rs b/crates/gpui2/src/elements.rs
index 1bff85259f1949e75e9a50c3ef4cba7d3f97f18f..65b8c7119fbaeb06251f52817eb68cc7cdf483fa 100644
--- a/crates/gpui2/src/elements.rs
+++ b/crates/gpui2/src/elements.rs
@@ -1,6 +1,8 @@
 pub mod div;
 pub mod hoverable;
 pub mod pressable;
+pub mod svg;
 pub mod text;
 
 pub use div::div;
+pub use svg::svg;
diff --git a/crates/gpui2/src/elements/svg.rs b/crates/gpui2/src/elements/svg.rs
new file mode 100644
index 0000000000000000000000000000000000000000..c9ee84f8c54b04c61737a10abd831f4ae04dd00c
--- /dev/null
+++ b/crates/gpui2/src/elements/svg.rs
@@ -0,0 +1,81 @@
+use crate::{
+    self as gpui2, scene,
+    style::{Style, StyleHelpers, Styleable},
+    Element, IntoElement, Layout, LayoutId, Rgba,
+};
+use refineable::RefinementCascade;
+use std::borrow::Cow;
+
+#[derive(IntoElement)]
+pub struct Svg {
+    path: Option<Cow<'static, str>>,
+    style: RefinementCascade<Style>,
+}
+
+pub fn svg() -> Svg {
+    Svg {
+        path: None,
+        style: RefinementCascade::<Style>::default(),
+    }
+}
+
+impl Svg {
+    pub fn path(mut self, path: impl Into<Cow<'static, str>>) -> Self {
+        self.path = Some(path.into());
+        self
+    }
+}
+
+impl<V: 'static> Element<V> for Svg {
+    type PaintState = ();
+
+    fn layout(
+        &mut self,
+        _: &mut V,
+        cx: &mut crate::LayoutContext<V>,
+    ) -> anyhow::Result<(LayoutId, Self::PaintState)>
+    where
+        Self: Sized,
+    {
+        let style = self.computed_style();
+        Ok((cx.add_layout_node(style, [])?, ()))
+    }
+
+    fn paint(
+        &mut self,
+        _: &mut V,
+        layout: &Layout,
+        _: &mut Self::PaintState,
+        cx: &mut crate::paint_context::PaintContext<V>,
+    ) where
+        Self: Sized,
+    {
+        let fill_color = self.computed_style().fill.and_then(|fill| fill.color());
+        if let Some((path, fill_color)) = self.path.as_ref().zip(fill_color) {
+            if let Ok(svg_tree) = cx.asset_cache.svg(path) {
+                let icon = scene::Icon {
+                    bounds: layout.bounds,
+                    svg: svg_tree,
+                    path: path.clone(),
+                    color: Rgba::from(fill_color).into(),
+                };
+
+                cx.scene.push_icon(icon);
+            }
+        }
+    }
+}
+
+impl Styleable for Svg {
+    type Style = Style;
+
+    fn style_cascade(&mut self) -> &mut refineable::RefinementCascade<Self::Style> {
+        &mut self.style
+    }
+
+    fn declared_style(&mut self) -> &mut <Self::Style as refineable::Refineable>::Refinement {
+        self.style.base()
+    }
+}
+
+impl StyleHelpers for Svg {}
diff --git a/crates/gpui2/src/elements/text.rs b/crates/gpui2/src/elements/text.rs
index 82527d8dc064e39eae849144c44d32f52b18508b..545ca508730f46ce1ea5073b24a47dc2a440568f 100644
--- a/crates/gpui2/src/elements/text.rs
+++ b/crates/gpui2/src/elements/text.rs
@@ -90,6 +90,14 @@ impl<V: 'static> Element<V> for Text {
     }
 }
 
+impl<V: 'static> IntoElement<V> for Text {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
 pub struct TextLayout {
     line_layout: Arc<LineLayout>,
     line_height: f32,
diff --git a/crates/storybook/src/collab_panel.rs b/crates/storybook/src/collab_panel.rs
index e67ac09558e7fd39f86d9a3658cc341cbd10bf9c..d9a01c2af9a747b40564e884cf08799c777a9f67 100644
--- a/crates/storybook/src/collab_panel.rs
+++ b/crates/storybook/src/collab_panel.rs
@@ -1,5 +1,9 @@
-use crate::theme::theme;
-use gpui2::{elements::div, style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext};
+use crate::theme::{theme, Theme};
+use gpui2::{
+    elements::{div, svg},
+    style::StyleHelpers,
+    Element, IntoElement, ParentElement, ViewContext,
+};
 use std::marker::PhantomData;
 
 #[derive(Element)]
@@ -112,10 +116,11 @@ impl<V: 'static> CollabPanelElement<V> {
                             )
                             .child(
                                 div().flex().h_full().gap_1().items_center().child(
-                                    div()
-                                        .w_3p5()
-                                        .h_3p5()
-                                        .fill(theme.middle.positive.default.foreground),
+                                    svg()
+                                        .path("icons/radix/caret-down.svg")
+                                        .h_3()
+                                        .w_3()
+                                        .fill(theme.middle.variant.default.foreground),
                                 ),
                             ),
                     )
@@ -159,23 +164,7 @@ impl<V: 'static> CollabPanelElement<V> {
                     .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().h_full().gap_1().items_center().child(
-                                    div()
-                                        .w_3p5()
-                                        .h_3p5()
-                                        .fill(theme.middle.positive.default.foreground),
-                                ),
-                            ),
-                    ),
+                    .child(self.list_section_header(theme)),
             )
             // Large List Item
             .child(
@@ -196,4 +185,22 @@ impl<V: 'static> CollabPanelElement<V> {
                     ),
             )
     }
+
+    fn list_section_header(&self, theme: &Theme) -> impl Element<V> {
+        div()
+            .h_7()
+            .px_2()
+            .flex()
+            .justify_between()
+            .items_center()
+            .child(div().flex().gap_1().text_sm().child("CHANNELS"))
+            .child(
+                div().flex().h_full().gap_1().items_center().child(
+                    div()
+                        .w_3p5()
+                        .h_3p5()
+                        .fill(theme.middle.positive.default.foreground),
+                ),
+            )
+    }
 }
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index 5fe45af3b9e8fade436a8d27ac6c8ed54a39f62a..03a8cfce0d933c4e34caa745c8ea3f49901a5b5c 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -69,6 +69,7 @@ use rust_embed::RustEmbed;
 #[folder = "../../assets"]
 #[include = "themes/**/*"]
 #[include = "fonts/**/*"]
+#[include = "icons/**/*"]
 #[exclude = "*.DS_Store"]
 pub struct Assets;
 
diff --git a/crates/storybook/src/theme.rs b/crates/storybook/src/theme.rs
index 921a8453087b3153e21c62684bcc212ecc28fb63..b17abd3138212d70e8bdc8b0a7fa30ed1be33b36 100644
--- a/crates/storybook/src/theme.rs
+++ b/crates/storybook/src/theme.rs
@@ -2,7 +2,7 @@ use gpui2::{
     color::Hsla,
     element::{Element, PaintContext},
     layout_context::LayoutContext,
-    serde_json, AppContext, WindowContext,
+    serde_json, AppContext, IntoElement, WindowContext,
 };
 use serde::{de::Visitor, Deserialize, Deserializer};
 use std::{collections::HashMap, fmt, marker::PhantomData};
@@ -133,7 +133,8 @@ where
     deserializer.deserialize_map(SyntaxVisitor)
 }
 
-pub struct Themed<V: 'static, E> {
+#[derive(IntoElement)]
+pub struct Themed<V: 'static, E: Element<V>> {
     pub(crate) theme: Theme,
     pub(crate) child: E,
     pub(crate) view_type: PhantomData<V>,