sidebar: Improve scrollbar overlap with thread item icon buttons (#54469)

Danilo Leal created 23 hours ago

This PR removes the overlap between the sidebar scrollbar and the thread
item icon buttons. Now, they don't render on top of each other anymore
:)

Release Notes:

- Agent: Improved the scrollbar overlap with the thread item icon
buttons in the threads sidebar.

Change summary

crates/agent_ui/src/threads_archive_view.rs | 14 +++++++++++---
crates/sidebar/src/sidebar.rs               | 12 +++++++++---
crates/ui/src/components/ai/thread_item.rs  |  7 ++++---
3 files changed, 24 insertions(+), 9 deletions(-)

Detailed changes

crates/agent_ui/src/threads_archive_view.rs

@@ -31,8 +31,9 @@ use project::{AgentId, AgentServerStore};
 use settings::Settings as _;
 use theme::ActiveTheme;
 use ui::{
-    AgentThreadStatus, Divider, KeyBinding, ListItem, ListItemSpacing, ListSubHeader, Tab,
-    ThreadItem, Tooltip, WithScrollbar, prelude::*, utils::platform_title_bar_height,
+    AgentThreadStatus, Divider, KeyBinding, ListItem, ListItemSpacing, ListSubHeader, ScrollAxes,
+    Scrollbars, Tab, ThreadItem, Tooltip, WithScrollbar, prelude::*,
+    utils::platform_title_bar_height,
 };
 use ui_input::ErasedEditor;
 use util::ResultExt;
@@ -914,6 +915,7 @@ impl ThreadsArchiveView {
             )
             .child(
                 h_flex()
+                    .gap_1()
                     .child(
                         IconButton::new("thread-import", IconName::Download)
                             .icon_size(IconSize::Small)
@@ -1011,7 +1013,13 @@ impl Render for ThreadsArchiveView {
                     .flex_1()
                     .size_full(),
                 )
-                .vertical_scrollbar_for(&self.list_state, window, cx)
+                .custom_scrollbars(
+                    Scrollbars::new(ScrollAxes::Vertical)
+                        .tracked_scroll_handle(&self.list_state)
+                        .width_sm(),
+                    window,
+                    cx,
+                )
                 .into_any_element()
         };
 

crates/sidebar/src/sidebar.rs

@@ -45,8 +45,8 @@ use std::sync::Arc;
 use theme::ActiveTheme;
 use ui::{
     AgentThreadStatus, CommonAnimationExt, ContextMenu, Divider, GradientFade, HighlightedLabel,
-    KeyBinding, PopoverMenu, PopoverMenuHandle, Tab, ThreadItem, ThreadItemWorktreeInfo, TintColor,
-    Tooltip, WithScrollbar, prelude::*, render_modifiers,
+    KeyBinding, PopoverMenu, PopoverMenuHandle, ScrollAxes, Scrollbars, Tab, ThreadItem,
+    ThreadItemWorktreeInfo, TintColor, Tooltip, WithScrollbar, prelude::*, render_modifiers,
 };
 use util::ResultExt as _;
 use util::path_list::PathList;
@@ -5008,7 +5008,13 @@ impl Render for Sidebar {
                                         this.child(self.render_no_results(cx))
                                     })
                                     .when_some(sticky_header, |this, header| this.child(header))
-                                    .vertical_scrollbar_for(&self.list_state, window, cx),
+                                    .custom_scrollbars(
+                                        Scrollbars::new(ScrollAxes::Vertical)
+                                            .tracked_scroll_handle(&self.list_state)
+                                            .width_sm(),
+                                        window,
+                                        cx,
+                                    ),
                             )
                         }
                     }),

crates/ui/src/components/ai/thread_item.rs

@@ -417,14 +417,15 @@ impl RenderOnce for ThreadItem {
                     .when(self.hovered, |this| {
                         this.when_some(self.action_slot, |this, slot| {
                             let overlay = GradientFade::new(base_bg, hover_bg, hover_bg)
-                                .width(px(64.0))
-                                .right(px(6.))
-                                .gradient_stop(0.75)
+                                .width(px(80.0))
+                                .right(px(8.))
+                                .gradient_stop(0.80)
                                 .group_name("thread-item");
 
                             this.child(
                                 h_flex()
                                     .relative()
+                                    .pr_1p5()
                                     .on_mouse_down(MouseButton::Left, |_, _, cx| {
                                         cx.stop_propagation()
                                     })