Improve the LSP popover menu design (#34081)

- Add a slightly different bolt icon SVG so it sits better when with an
indicator
- Attempt to clarify what happens when clicking any of the menu items
- Add descriptions to the tooltips to clarify what each indicator color
means
- Add section titles to clarify in which category each menu item is
sitting on

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-07-08 19:51:24 -03:00 committed by GitHub
parent 139af02737
commit ad8b823555
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 12 deletions

View file

@ -185,15 +185,18 @@ impl LanguageServerState {
menu = menu.separator().item(button);
continue;
};
let Some(server_info) = item.server_info() else {
continue;
};
let workspace = self.workspace.clone();
let server_selector = server_info.server_selector();
// TODO currently, Zed remote does not work well with the LSP logs
// https://github.com/zed-industries/zed/issues/28557
let has_logs = lsp_store.read(cx).as_local().is_some()
&& lsp_logs.read(cx).has_server_logs(&server_selector);
let status_color = server_info
.binary_status
.and_then(|binary_status| match binary_status.status {
@ -218,16 +221,40 @@ impl LanguageServerState {
.other_servers_start_index
.is_some_and(|index| index == i)
{
menu = menu.separator();
menu = menu.separator().header("Other Buffers");
}
if i == 0 && self.other_servers_start_index.is_some() {
menu = menu.header("Current Buffer");
}
menu = menu.item(ContextMenuItem::custom_entry(
move |_, _| {
h_flex()
.gap_1()
.group("menu_item")
.w_full()
.child(Indicator::dot().color(status_color))
.child(Label::new(server_info.name.0.clone()))
.when(!has_logs, |div| div.cursor_default())
.gap_2()
.justify_between()
.child(
h_flex()
.gap_2()
.child(Indicator::dot().color(status_color))
.child(Label::new(server_info.name.0.clone())),
)
.child(
h_flex()
.visible_on_hover("menu_item")
.child(
Label::new("View Logs")
.size(LabelSize::Small)
.color(Color::Muted),
)
.child(
Icon::new(IconName::ChevronRight)
.size(IconSize::Small)
.color(Color::Muted),
),
)
.into_any_element()
},
{
@ -836,17 +863,27 @@ impl Render for LspTool {
}
}
let indicator = if has_errors {
Some(Indicator::dot().color(Color::Error))
let (indicator, description) = if has_errors {
(
Some(Indicator::dot().color(Color::Error)),
"Server with errors",
)
} else if has_warnings {
Some(Indicator::dot().color(Color::Warning))
(
Some(Indicator::dot().color(Color::Warning)),
"Server with warnings",
)
} else if has_other_notifications {
Some(Indicator::dot().color(Color::Modified))
(
Some(Indicator::dot().color(Color::Modified)),
"Server with notifications",
)
} else {
None
(None, "All Servers Operational")
};
let lsp_tool = cx.entity().clone();
div().child(
PopoverMenu::new("lsp-tool")
.menu(move |_, cx| lsp_tool.read(cx).lsp_menu.clone())
@ -858,7 +895,13 @@ impl Render for LspTool {
.icon_size(IconSize::Small)
.indicator_border_color(Some(cx.theme().colors().status_bar_background)),
move |window, cx| {
Tooltip::for_action("Language Servers", &ToggleMenu, window, cx)
Tooltip::with_meta(
"Language Servers",
Some(&ToggleMenu),
description,
window,
cx,
)
},
),
)