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

@ -1,3 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.75776 5.50003H8.49988C8.70769 5.50003 8.89518 5.62971 8.95455 5.82346C9.04049 6.01876 8.9858 6.23906 8.82956 6.37656L4.82971 9.87643C4.65315 10.0295 4.39488 10.042 4.20614 9.90455C4.01724 9.76705 3.94849 9.51706 4.04052 9.30301L5.24219 6.49999H3.48601C3.2918 6.49999 3.10524 6.37031 3.03197 6.17657C2.9587 5.98126 3.014 5.76096 3.1708 5.62346L7.17018 2.12375C7.34674 1.97001 7.60454 1.95829 7.7936 2.09547C7.98265 2.23275 8.0514 2.48218 7.95922 2.69695L6.75776 5.50003Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.98749 1.67322C7.08029 1.71878 7.15543 1.79374 7.20121 1.88643C7.24699 1.97912 7.26084 2.08434 7.24061 2.18572L6.72812 4.75007H9.28122C9.37107 4.75006 9.45903 4.77588 9.53463 4.82445C9.61022 4.87302 9.67027 4.94229 9.70761 5.02402C9.74495 5.10574 9.75801 5.19648 9.74524 5.28542C9.73247 5.37437 9.69441 5.45776 9.63559 5.52569L5.57313 10.2131C5.50536 10.2912 5.41366 10.3447 5.31233 10.3653C5.211 10.3858 5.10571 10.3723 5.01285 10.3268C4.92 10.2813 4.8448 10.2064 4.79896 10.1137C4.75311 10.021 4.7392 9.9158 4.75939 9.81439L5.27188 7.25004H2.71878C2.62893 7.25005 2.54097 7.22423 2.46537 7.17566C2.38978 7.12709 2.32973 7.05782 2.29239 6.97609C2.25505 6.89437 2.24199 6.80363 2.25476 6.71469C2.26753 6.62574 2.30559 6.54235 2.36441 6.47443L6.42687 1.78697C6.49466 1.70879 6.58641 1.65524 6.68782 1.63467C6.78923 1.61409 6.89459 1.62765 6.98749 1.67322Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 601 B

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

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,
)
},
),
)