assistant2: Adjust thread history list item visuals (#21998)

Danilo Leal created 1 year ago

Most notably, adding the `outlined` property in the `ListItem`
component.

<img width="800" alt="Screenshot 2024-12-13 at 20 35 39"
src="https://github.com/user-attachments/assets/adac4463-66f9-4b5e-b1c0-93c34f068dc4"
/>

Release Notes:

- N/A

Change summary

crates/assistant2/src/assistant_panel.rs   |  9 +++++----
crates/assistant2/src/thread_history.rs    | 14 +++++++++++---
crates/ui/src/components/list/list_item.rs | 15 ++++++++++++++-
3 files changed, 30 insertions(+), 8 deletions(-)

Detailed changes

crates/assistant2/src/assistant_panel.rs

@@ -323,10 +323,11 @@ impl AssistantPanel {
             .when(!recent_threads.is_empty(), |parent| {
                 parent
                     .child(
-                        h_flex()
-                            .w_full()
-                            .justify_center()
-                            .child(Label::new("Recent Threads:").size(LabelSize::Small)),
+                        h_flex().w_full().justify_center().child(
+                            Label::new("Recent Threads:")
+                                .size(LabelSize::Small)
+                                .color(Color::Muted),
+                        ),
                     )
                     .child(
                         v_flex().gap_2().children(

crates/assistant2/src/thread_history.rs

@@ -2,7 +2,7 @@ use gpui::{
     uniform_list, AppContext, FocusHandle, FocusableView, Model, UniformListScrollHandle, WeakView,
 };
 use time::{OffsetDateTime, UtcOffset};
-use ui::{prelude::*, IconButtonShape, ListItem};
+use ui::{prelude::*, IconButtonShape, ListItem, ListItemSpacing, Tooltip};
 
 use crate::thread::Thread;
 use crate::thread_store::ThreadStore;
@@ -117,17 +117,25 @@ impl RenderOnce for PastThread {
                 .unwrap_or(UtcOffset::UTC),
             time_format::TimestampFormat::EnhancedAbsolute,
         );
+
         ListItem::new(("past-thread", self.thread.entity_id()))
+            .outlined()
             .start_slot(Icon::new(IconName::MessageBubbles))
-            .child(Label::new(summary))
+            .spacing(ListItemSpacing::Sparse)
+            .child(Label::new(summary).size(LabelSize::Small))
             .end_slot(
                 h_flex()
                     .gap_2()
-                    .child(Label::new(thread_timestamp).color(Color::Disabled))
+                    .child(
+                        Label::new(thread_timestamp)
+                            .color(Color::Disabled)
+                            .size(LabelSize::Small),
+                    )
                     .child(
                         IconButton::new("delete", IconName::TrashAlt)
                             .shape(IconButtonShape::Square)
                             .icon_size(IconSize::Small)
+                            .tooltip(|cx| Tooltip::text("Delete Thread", cx))
                             .on_click({
                                 let assistant_panel = self.assistant_panel.clone();
                                 let id = id.clone();

crates/ui/src/components/list/list_item.rs

@@ -38,6 +38,7 @@ pub struct ListItem {
     on_secondary_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
     children: SmallVec<[AnyElement; 2]>,
     selectable: bool,
+    outlined: bool,
     overflow_x: bool,
     focused: Option<bool>,
 }
@@ -62,6 +63,7 @@ impl ListItem {
             tooltip: None,
             children: SmallVec::new(),
             selectable: true,
+            outlined: false,
             overflow_x: false,
             focused: None,
         }
@@ -138,6 +140,11 @@ impl ListItem {
         self
     }
 
+    pub fn outlined(mut self) -> Self {
+        self.outlined = true;
+        self
+    }
+
     pub fn overflow_x(mut self) -> Self {
         self.overflow_x = true;
         self
@@ -203,6 +210,7 @@ impl RenderOnce for ListItem {
             .child(
                 h_flex()
                     .id("inner_list_item")
+                    .group("list_item")
                     .w_full()
                     .relative()
                     .items_center()
@@ -212,7 +220,6 @@ impl RenderOnce for ListItem {
                         ListItemSpacing::Dense => this,
                         ListItemSpacing::Sparse => this.py_1(),
                     })
-                    .group("list_item")
                     .when(self.inset && !self.disabled, |this| {
                         this
                             // TODO: Add focus state
@@ -238,6 +245,12 @@ impl RenderOnce for ListItem {
                     .when_some(self.on_click, |this, on_click| {
                         this.cursor_pointer().on_click(on_click)
                     })
+                    .when(self.outlined, |this| {
+                        this.border_1()
+                            .border_color(cx.theme().colors().border)
+                            .rounded_md()
+                            .overflow_hidden()
+                    })
                     .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
                         this.on_mouse_down(MouseButton::Right, move |event, cx| {
                             (on_mouse_down)(event, cx)