New revision of the Assistant Panel (#10870)

This is a crate only addition of a new version of the AssistantPanel.
We'll be putting this behind a feature flag while we iron out the new
experience.

Release Notes:

- N/A

---------

Co-authored-by: Nathan Sobo <nathan@zed.dev>
Co-authored-by: Antonio Scandurra <me@as-cii.com>
Co-authored-by: Conrad Irwin <conrad@zed.dev>
Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>
Co-authored-by: Antonio Scandurra <antonio@zed.dev>
Co-authored-by: Nate Butler <nate@zed.dev>
Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Co-authored-by: Max <max@zed.dev>

crates/ui/src/components.rs

@@ -1,6 +1,7 @@
 mod avatar;
 mod button;
 mod checkbox;
+mod collapsible_container;
 mod context_menu;
 mod disclosure;
 mod divider;
@@ -25,6 +26,7 @@ mod stories;
 pub use avatar::*;
 pub use button::*;
 pub use checkbox::*;
+pub use collapsible_container::*;
 pub use context_menu::*;
 pub use disclosure::*;
 pub use divider::*;

crates/ui/src/components/collapsible_container.rs

@@ -0,0 +1,152 @@
+use crate::{prelude::*, ButtonLike};
+use smallvec::SmallVec;
+
+use gpui::*;
+
+#[derive(Default, Clone, Copy, Debug, PartialEq)]
+pub enum ContainerStyle {
+    #[default]
+    None,
+    Card,
+}
+
+struct ContainerStyles {
+    pub background_color: Hsla,
+    pub border_color: Hsla,
+    pub text_color: Hsla,
+}
+
+#[derive(IntoElement)]
+pub struct CollapsibleContainer {
+    id: ElementId,
+    base: ButtonLike,
+    toggle: bool,
+    /// A slot for content that appears before the label, like an icon or avatar.
+    start_slot: Option<AnyElement>,
+    /// A slot for content that appears after the label, usually on the other side of the header.
+    /// This might be a button, a disclosure arrow, a face pile, etc.
+    end_slot: Option<AnyElement>,
+    style: ContainerStyle,
+    children: SmallVec<[AnyElement; 1]>,
+}
+
+impl CollapsibleContainer {
+    pub fn new(id: impl Into<ElementId>, toggle: bool) -> Self {
+        Self {
+            id: id.into(),
+            base: ButtonLike::new("button_base"),
+            toggle,
+            start_slot: None,
+            end_slot: None,
+            style: ContainerStyle::Card,
+            children: SmallVec::new(),
+        }
+    }
+
+    pub fn start_slot<E: IntoElement>(mut self, start_slot: impl Into<Option<E>>) -> Self {
+        self.start_slot = start_slot.into().map(IntoElement::into_any_element);
+        self
+    }
+
+    pub fn end_slot<E: IntoElement>(mut self, end_slot: impl Into<Option<E>>) -> Self {
+        self.end_slot = end_slot.into().map(IntoElement::into_any_element);
+        self
+    }
+
+    pub fn child<E: IntoElement>(mut self, child: E) -> Self {
+        self.children.push(child.into_any_element());
+        self
+    }
+}
+
+impl Clickable for CollapsibleContainer {
+    fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
+        self.base = self.base.on_click(handler);
+        self
+    }
+}
+
+impl RenderOnce for CollapsibleContainer {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let color = cx.theme().colors();
+
+        let styles = match self.style {
+            ContainerStyle::None => ContainerStyles {
+                background_color: color.ghost_element_background,
+                border_color: color.border_transparent,
+                text_color: color.text,
+            },
+            ContainerStyle::Card => ContainerStyles {
+                background_color: color.elevated_surface_background,
+                border_color: color.border,
+                text_color: color.text,
+            },
+        };
+
+        v_flex()
+            .id(self.id)
+            .relative()
+            .rounded_md()
+            .bg(styles.background_color)
+            .border()
+            .border_color(styles.border_color)
+            .text_color(styles.text_color)
+            .overflow_hidden()
+            .child(
+                h_flex()
+                    .overflow_hidden()
+                    .w_full()
+                    .group("toggleable_container_header")
+                    .border_b()
+                    .border_color(if self.toggle {
+                        styles.border_color
+                    } else {
+                        color.border_transparent
+                    })
+                    .child(
+                        self.base.full_width().style(ButtonStyle::Subtle).child(
+                            div()
+                                .h_7()
+                                .p_1()
+                                .flex()
+                                .flex_1()
+                                .items_center()
+                                .justify_between()
+                                .w_full()
+                                .gap_1()
+                                .cursor_pointer()
+                                .group_hover("toggleable_container_header", |this| {
+                                    this.bg(color.element_hover)
+                                })
+                                .child(
+                                    h_flex()
+                                        .gap_1()
+                                        .child(
+                                            IconButton::new(
+                                                "toggle_icon",
+                                                match self.toggle {
+                                                    true => IconName::ChevronDown,
+                                                    false => IconName::ChevronRight,
+                                                },
+                                            )
+                                            .icon_color(Color::Muted)
+                                            .icon_size(IconSize::XSmall),
+                                        )
+                                        .child(
+                                            div()
+                                                .id("label_container")
+                                                .flex()
+                                                .gap_1()
+                                                .items_center()
+                                                .children(self.start_slot),
+                                        ),
+                                )
+                                .child(h_flex().children(self.end_slot)),
+                        ),
+                    ),
+            )
+            .when(self.toggle, |this| {
+                this.child(h_flex().flex_1().w_full().p_1().children(self.children))
+            })
+    }
+}

crates/ui/src/components/title_bar/windows_window_controls.rs

@@ -110,7 +110,7 @@ impl RenderOnce for WindowsCaptionButton {
             .content_center()
             .w(width)
             .h_full()
-            .font("Segoe Fluent Icons")
+            .font_family("Segoe Fluent Icons")
             .text_size(px(10.0))
             .hover(|style| style.bg(self.hover_background_color))
             .active(|style| {

crates/ui/src/components/tooltip.rs

@@ -95,7 +95,7 @@ pub fn tooltip_container<V>(
     div().pl_2().pt_2p5().child(
         v_flex()
             .elevation_2(cx)
-            .font(ui_font)
+            .font_family(ui_font)
             .text_ui()
             .text_color(cx.theme().colors().text)
             .py_1()

crates/ui/src/styles/typography.rs

@@ -93,7 +93,7 @@ impl RenderOnce for Headline {
         let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
 
         div()
-            .font(ui_font)
+            .font_family(ui_font)
             .line_height(self.size.line_height())
             .text_size(self.size.size())
             .text_color(cx.theme().colors().text)