Update assistant header

Nate Butler created 2 years ago

Change summary

crates/assistant2/src/assistant_panel.rs | 53 ++++++++++---------------
crates/ui2/src/components/divider.rs     | 28 ++++++++++++
crates/ui2/src/components/tab.rs         |  6 +-
3 files changed, 51 insertions(+), 36 deletions(-)

Detailed changes

crates/assistant2/src/assistant_panel.rs

@@ -55,7 +55,7 @@ use std::{
 use theme::ThemeSettings;
 use ui::{
     h_stack, prelude::*, v_stack, Button, ButtonLike, Icon, IconButton, IconElement, Label, TabBar,
-    Tooltip,
+    Tooltip, TAB_HEIGHT_IN_REMS,
 };
 use util::{paths::CONVERSATIONS_DIR, post_inc, ResultExt, TryFutureExt};
 use uuid::Uuid;
@@ -1129,45 +1129,36 @@ impl Render for AssistantPanel {
                 .border()
                 .border_color(gpui::red())
         } else {
-            let title = self
-                .active_editor()
-                .map(|editor| Label::new(editor.read(cx).title(cx)));
-
-            // let mut header = h_stack()
-            //     .p_1()
-            //     .border_b()
-            //     .border_color(cx.theme().colors().border_variant)
-            //     .bg(cx.theme().colors().toolbar_background)
-            //     .child(div().flex_1());
-
             let header = TabBar::new("assistant_header")
                 .start_child(
-                    h_stack()
-                        .gap_1()
-                        .child(Self::render_hamburger_button(cx))
-                        .children(title),
+                    h_stack().gap_1().child(Self::render_hamburger_button(cx)), // .children(title),
                 )
+                .children(self.active_editor().map(|editor| {
+                    h_stack()
+                        .h(rems(TAB_HEIGHT_IN_REMS))
+                        .flex_1()
+                        .px_2()
+                        .child(Label::new(editor.read(cx).title(cx)).into_element())
+                }))
                 .end_child(if self.focus_handle.contains_focused(cx) {
                     h_stack()
-                        .gap_1()
-                        .children(self.render_editor_tools(cx))
-                        .child(Self::render_plus_button(cx))
-                        .child(self.render_zoom_button(cx))
+                        .gap_2()
+                        .child(h_stack().gap_1().children(self.render_editor_tools(cx)))
+                        .child(
+                            ui::Divider::vertical()
+                                .inset()
+                                .color(ui::DividerColor::Border),
+                        )
+                        .child(
+                            h_stack()
+                                .gap_1()
+                                .child(Self::render_plus_button(cx))
+                                .child(self.render_zoom_button(cx)),
+                        )
                 } else {
                     div()
                 });
 
-            // if self.focus_handle.contains_focused(cx) {
-            //     header = header.child(
-            //         div()
-            //             .flex()
-            //             .gap_1()
-            //             .children(self.render_editor_tools(cx))
-            //             .child(Self::render_plus_button(cx))
-            //             .child(self.render_zoom_button(cx)),
-            //     );
-            // }
-
             v_stack()
                 .size_full()
                 .on_action(cx.listener(|this, _: &workspace::NewFile, cx| {

crates/ui2/src/components/divider.rs

@@ -1,4 +1,4 @@
-use gpui::{Div, IntoElement};
+use gpui::{Div, Hsla, IntoElement};
 
 use crate::prelude::*;
 
@@ -7,9 +7,26 @@ enum DividerDirection {
     Vertical,
 }
 
+#[derive(Default)]
+pub enum DividerColor {
+    Border,
+    #[default]
+    BorderVariant,
+}
+
+impl DividerColor {
+    pub fn hsla(self, cx: &WindowContext) -> Hsla {
+        match self {
+            DividerColor::Border => cx.theme().colors().border,
+            DividerColor::BorderVariant => cx.theme().colors().border_variant,
+        }
+    }
+}
+
 #[derive(IntoElement)]
 pub struct Divider {
     direction: DividerDirection,
+    color: DividerColor,
     inset: bool,
 }
 
@@ -26,7 +43,7 @@ impl RenderOnce for Divider {
                     this.w_px().h_full().when(self.inset, |this| this.my_1p5())
                 }
             })
-            .bg(cx.theme().colors().border_variant)
+            .bg(self.color.hsla(cx))
     }
 }
 
@@ -34,6 +51,7 @@ impl Divider {
     pub fn horizontal() -> Self {
         Self {
             direction: DividerDirection::Horizontal,
+            color: DividerColor::default(),
             inset: false,
         }
     }
@@ -41,6 +59,7 @@ impl Divider {
     pub fn vertical() -> Self {
         Self {
             direction: DividerDirection::Vertical,
+            color: DividerColor::default(),
             inset: false,
         }
     }
@@ -49,4 +68,9 @@ impl Divider {
         self.inset = true;
         self
     }
+
+    pub fn color(mut self, color: DividerColor) -> Self {
+        self.color = color;
+        self
+    }
 }

crates/ui2/src/components/tab.rs

@@ -3,6 +3,8 @@ use gpui::{AnyElement, IntoElement, Stateful};
 use smallvec::SmallVec;
 use std::cmp::Ordering;
 
+pub const TAB_HEIGHT_IN_REMS: f32 = 30. / 16.;
+
 /// The position of a [`Tab`] within a list of tabs.
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
 pub enum TabPosition {
@@ -94,8 +96,6 @@ impl RenderOnce for Tab {
     type Rendered = Stateful<Div>;
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
-        const HEIGHT_IN_REMS: f32 = 30. / 16.;
-
         let (text_color, tab_bg, _tab_hover_bg, _tab_active_bg) = match self.selected {
             false => (
                 cx.theme().colors().text_muted,
@@ -112,7 +112,7 @@ impl RenderOnce for Tab {
         };
 
         self.div
-            .h(rems(HEIGHT_IN_REMS))
+            .h(rems(TAB_HEIGHT_IN_REMS))
             .bg(tab_bg)
             .border_color(cx.theme().colors().border)
             .map(|this| match self.position {