agent: Improve popover trigger styles (#37800)

Danilo Leal created 2 months ago

This PR mostly adds some style treatment to popover button triggers in
the agent panel, either making them better aligned with their trigger or
adjusting the color to better clarify which button is triggering the
currently opened menu.

Moving forward, I think the selected styles at least should probably be
tackled at the component level, whether that's a context menu or a
popover, so we don't have to ever do this manually (and running the risk
of forgetting to do it).

Release Notes:

- N/A

Change summary

crates/agent_ui/src/acp/model_selector_popover.rs | 14 +++++++++++---
crates/agent_ui/src/agent_panel.rs                |  2 +-
crates/agent_ui/src/profile_selector.rs           | 11 ++++++++---
3 files changed, 20 insertions(+), 7 deletions(-)

Detailed changes

crates/agent_ui/src/acp/model_selector_popover.rs

@@ -5,7 +5,8 @@ use agent_client_protocol as acp;
 use gpui::{Entity, FocusHandle};
 use picker::popover_menu::PickerPopoverMenu;
 use ui::{
-    ButtonLike, Context, IntoElement, PopoverMenuHandle, SharedString, Tooltip, Window, prelude::*,
+    ButtonLike, Context, IntoElement, PopoverMenuHandle, SharedString, TintColor, Tooltip, Window,
+    prelude::*,
 };
 use zed_actions::agent::ToggleModelSelector;
 
@@ -58,15 +59,22 @@ impl Render for AcpModelSelectorPopover {
 
         let focus_handle = self.focus_handle.clone();
 
+        let color = if self.menu_handle.is_deployed() {
+            Color::Accent
+        } else {
+            Color::Muted
+        };
+
         PickerPopoverMenu::new(
             self.selector.clone(),
             ButtonLike::new("active-model")
                 .when_some(model_icon, |this, icon| {
-                    this.child(Icon::new(icon).color(Color::Muted).size(IconSize::XSmall))
+                    this.child(Icon::new(icon).color(color).size(IconSize::XSmall))
                 })
+                .selected_style(ButtonStyle::Tinted(TintColor::Accent))
                 .child(
                     Label::new(model_name)
-                        .color(Color::Muted)
+                        .color(color)
                         .size(LabelSize::Small)
                         .ml_0p5(),
                 )

crates/agent_ui/src/agent_panel.rs

@@ -2538,7 +2538,7 @@ impl AgentPanel {
                     }
                 },
             )
-            .anchor(Corner::TopLeft)
+            .anchor(Corner::TopRight)
             .with_handle(self.new_thread_menu_handle.clone())
             .menu({
                 let workspace = self.workspace.clone();

crates/agent_ui/src/profile_selector.rs

@@ -6,8 +6,8 @@ use gpui::{Action, Entity, FocusHandle, Subscription, prelude::*};
 use settings::{Settings as _, SettingsStore, update_settings_file};
 use std::sync::Arc;
 use ui::{
-    ContextMenu, ContextMenuEntry, DocumentationSide, PopoverMenu, PopoverMenuHandle, Tooltip,
-    prelude::*,
+    ContextMenu, ContextMenuEntry, DocumentationSide, PopoverMenu, PopoverMenuHandle, TintColor,
+    Tooltip, prelude::*,
 };
 
 /// Trait for types that can provide and manage agent profiles
@@ -170,7 +170,8 @@ impl Render for ProfileSelector {
                 .icon(IconName::ChevronDown)
                 .icon_size(IconSize::XSmall)
                 .icon_position(IconPosition::End)
-                .icon_color(Color::Muted);
+                .icon_color(Color::Muted)
+                .selected_style(ButtonStyle::Tinted(TintColor::Accent));
 
             PopoverMenu::new("profile-selector")
                 .trigger_with_tooltip(trigger_button, {
@@ -195,6 +196,10 @@ impl Render for ProfileSelector {
                 .menu(move |window, cx| {
                     Some(this.update(cx, |this, cx| this.build_context_menu(window, cx)))
                 })
+                .offset(gpui::Point {
+                    x: px(0.0),
+                    y: px(-2.0),
+                })
                 .into_any_element()
         } else {
             Button::new("tools-not-supported-button", "Tools Unsupported")