Improve the LSP popover menu design (#34081)

Danilo Leal created 

- 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

Change summary

assets/icons/bolt_filled_alt.svg      |  2 
crates/language_tools/src/lsp_tool.rs | 65 ++++++++++++++++++++++++----
2 files changed, 55 insertions(+), 12 deletions(-)

Detailed changes

assets/icons/bolt_filled_alt.svg 🔗 

@@ -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>

crates/language_tools/src/lsp_tool.rs 🔗 

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