assistant2: Add tiny visual adjustments (#23748)

Danilo Leal created 11 months ago

This PR adds really tiny visual adjustments to the assistant 2. I guess
the most note-worthy thing here is that I separated the `title` for
History views into two just because I wanted to render the `/` smaller
and lighter. 😬

Release Notes:

- N/A

Change summary

crates/assistant2/src/active_thread.rs   |  3 -
crates/assistant2/src/assistant_panel.rs | 30 +++++++++++++++++++++++--
crates/assistant2/src/thread_history.rs  |  8 +++---
3 files changed, 32 insertions(+), 9 deletions(-)

Detailed changes

crates/assistant2/src/active_thread.rs

@@ -298,7 +298,7 @@ impl ActiveThread {
         let styled_message = match message.role {
             Role::User => v_flex()
                 .id(("message-container", ix))
-                .py_1()
+                .pt_2p5()
                 .px_2p5()
                 .child(
                     v_flex()
@@ -350,7 +350,6 @@ impl Render for ActiveThread {
     fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
         v_flex()
             .size_full()
-            .pt_1p5()
             .child(list(self.list_state.clone()).flex_grow())
     }
 }

crates/assistant2/src/assistant_panel.rs

@@ -612,11 +612,18 @@ impl AssistantPanel {
                     SharedString::from(context_editor.read(cx).title(cx).to_string())
                 })
                 .unwrap_or_else(|| SharedString::from("Loading Summary…")),
-            ActiveView::History => "History / Thread".into(),
-            ActiveView::PromptEditorHistory => "History / Prompt Editor".into(),
+            ActiveView::History | ActiveView::PromptEditorHistory => "History".into(),
             ActiveView::Configuration => "Configuration".into(),
         };
 
+        let sub_title = match self.active_view {
+            ActiveView::Thread => None,
+            ActiveView::PromptEditor => None,
+            ActiveView::History => Some("Thread"),
+            ActiveView::PromptEditorHistory => Some("Prompt Editor"),
+            ActiveView::Configuration => None,
+        };
+
         h_flex()
             .id("assistant-toolbar")
             .px(DynamicSpacing::Base08.rems(cx))
@@ -627,7 +634,24 @@ impl AssistantPanel {
             .bg(cx.theme().colors().tab_bar_background)
             .border_b_1()
             .border_color(cx.theme().colors().border)
-            .child(h_flex().child(Label::new(title)))
+            .child(
+                h_flex()
+                    .child(Label::new(title))
+                    .when(sub_title.is_some(), |this| {
+                        this.child(
+                            h_flex()
+                                .pl_1p5()
+                                .gap_1p5()
+                                .child(
+                                    Label::new("/")
+                                        .size(LabelSize::Small)
+                                        .color(Color::Disabled)
+                                        .alpha(0.5),
+                                )
+                                .child(Label::new(sub_title.unwrap())),
+                        )
+                    }),
+            )
             .child(
                 h_flex()
                     .h_full()

crates/assistant2/src/thread_history.rs

@@ -225,16 +225,16 @@ impl RenderOnce for PastThread {
             .child(Label::new(summary).size(LabelSize::Small).text_ellipsis())
             .end_slot(
                 h_flex()
-                    .gap_2()
+                    .gap_1p5()
                     .child(
                         Label::new(thread_timestamp)
-                            .color(Color::Disabled)
-                            .size(LabelSize::Small),
+                            .color(Color::Muted)
+                            .size(LabelSize::XSmall),
                     )
                     .child(
                         IconButton::new("delete", IconName::TrashAlt)
                             .shape(IconButtonShape::Square)
-                            .icon_size(IconSize::Small)
+                            .icon_size(IconSize::XSmall)
                             .tooltip(Tooltip::text("Delete Thread"))
                             .on_click({
                                 let assistant_panel = self.assistant_panel.clone();