Improve edit prediction menus rendering of keybinds on linux

Co-authored-by: Michael <michael@zed.dev>

crates/editor/src/editor.rs

@@ -5741,13 +5741,21 @@ impl Editor {
                                 },
                             )
                             .child(Label::new("Hold").size(LabelSize::Small))
-                            .children(ui::render_modifiers(
-                                &accept_keystroke.modifiers,
-                                PlatformStyle::platform(),
-                                Some(Color::Default),
-                                Some(IconSize::Small.rems().into()),
-                                true,
-                            ))
+                            .child(h_flex().children(itertools::intersperse_with(
+                                ui::render_modifiers_for_edit_prediction(
+                                    &accept_keystroke.modifiers,
+                                    PlatformStyle::platform(),
+                                    Some(Color::Default),
+                                    Some(IconSize::Small.rems().into()),
+                                ),
+                                || {
+                                    if PlatformStyle::platform() != PlatformStyle::Mac {
+                                        "+".into_any_element()
+                                    } else {
+                                        gpui::Empty.into_any_element()
+                                    }
+                                },
+                            )))
                             .into_any(),
                     );
                 }
@@ -5811,17 +5819,27 @@ impl Editor {
                         .child(
                             h_flex()
                                 .font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
-                                .gap_1()
-                                .children(ui::render_modifiers(
-                                    &accept_keystroke.modifiers,
-                                    PlatformStyle::platform(),
-                                    Some(if !has_completion {
-                                        Color::Muted
-                                    } else {
-                                        Color::Default
-                                    }),
-                                    None,
-                                    true,
+                                .when(PlatformStyle::platform() == PlatformStyle::Mac, |parent| {
+                                    parent.gap_1()
+                                })
+                                .children(itertools::intersperse_with(
+                                    ui::render_modifiers_for_edit_prediction(
+                                        &accept_keystroke.modifiers,
+                                        PlatformStyle::platform(),
+                                        Some(if !has_completion {
+                                            Color::Muted
+                                        } else {
+                                            Color::Default
+                                        }),
+                                        None,
+                                    ),
+                                    || {
+                                        if PlatformStyle::platform() != PlatformStyle::Mac {
+                                            "+".into_any_element()
+                                        } else {
+                                            gpui::Empty.into_any_element()
+                                        }
+                                    },
                                 )),
                         )
                         .child(Label::new("Preview").into_any_element())

crates/editor/src/element.rs

@@ -71,8 +71,8 @@ use sum_tree::Bias;
 use text::BufferId;
 use theme::{ActiveTheme, Appearance, PlayerColor};
 use ui::{
-    h_flex, prelude::*, ButtonLike, ButtonStyle, ContextMenu, IconButtonShape, KeyBinding, Tooltip,
-    POPOVER_Y_PADDING,
+    h_flex, prelude::*, ButtonLike, ButtonStyle, ContextMenu, IconButtonShape, Key, KeyBinding,
+    Tooltip, POPOVER_Y_PADDING,
 };
 use unicode_segmentation::UnicodeSegmentation;
 use util::{markdown::MarkdownString, RangeExt, ResultExt};
@@ -5806,22 +5806,45 @@ fn inline_completion_accept_indicator(
     let accept_binding = editor.accept_edit_prediction_keybind(window, cx);
     let accept_keystroke = accept_binding.keystroke()?;
 
+    let key_size = TextSize::XSmall.rems(cx);
+    let gen_plus_icon_on_non_mac = || {
+        if PlatformStyle::platform() != PlatformStyle::Mac {
+            // Icon::new(IconName::Plus).size(icon_size).into_any_element()
+            "+".into_any_element()
+        } else {
+            gpui::Empty.into_any_element()
+        }
+    };
     let accept_key = h_flex()
         .px_0p5()
         .font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
-        .text_size(TextSize::XSmall.rems(cx))
+        .text_size(key_size)
         .text_color(cx.theme().colors().text)
-        .gap_1()
-        .when(!editor.edit_prediction_preview_is_active(), |parent| {
-            parent.children(ui::render_modifiers(
-                &accept_keystroke.modifiers,
-                PlatformStyle::platform(),
-                Some(Color::Default),
-                None,
-                false,
-            ))
+        .when(PlatformStyle::platform() == PlatformStyle::Mac, |parent| {
+            parent.gap_1()
         })
-        .child(accept_keystroke.key.clone());
+        .when(!editor.edit_prediction_preview_is_active(), |parent| {
+            parent
+                .children(itertools::intersperse_with(
+                    ui::render_modifiers_for_edit_prediction(
+                        &accept_keystroke.modifiers,
+                        PlatformStyle::platform(),
+                        Some(Color::Default),
+                        Some(key_size.into()),
+                    ),
+                    gen_plus_icon_on_non_mac,
+                ))
+                .child(gen_plus_icon_on_non_mac())
+        })
+        .when(PlatformStyle::platform() != PlatformStyle::Mac, |parent| {
+            parent.child(
+                Key::new(accept_keystroke.key.clone(), Some(Color::Default))
+                    .size(Some(key_size.into())),
+            )
+        })
+        .when(PlatformStyle::platform() == PlatformStyle::Mac, |parent| {
+            parent.child(accept_keystroke.key.clone())
+        });
 
     let colors = cx.theme().colors();
 

crates/ui/src/components/keybinding.rs

@@ -220,6 +220,81 @@ pub fn render_modifiers(
         })
 }
 
+// TODO: Dedupe with `render_modifiers`. Since this change is close to initial launch, de-risking it
+// by not changing the rendering for all modifiers.
+pub fn render_modifiers_for_edit_prediction(
+    modifiers: &Modifiers,
+    platform_style: PlatformStyle,
+    color: Option<Color>,
+    size: Option<AbsoluteLength>,
+) -> impl Iterator<Item = AnyElement> {
+    enum KeyOrIcon {
+        Key(String),
+        Icon(IconName),
+    }
+
+    struct Modifier {
+        enabled: bool,
+        mac: KeyOrIcon,
+        linux: &'static str,
+        windows: &'static str,
+    }
+
+    let table = {
+        use KeyOrIcon::*;
+
+        [
+            Modifier {
+                enabled: modifiers.function,
+                mac: Icon(IconName::Control),
+                linux: "Fn",
+                windows: "Fn",
+            },
+            Modifier {
+                enabled: modifiers.control,
+                mac: Icon(IconName::Control),
+                linux: "Ctrl",
+                windows: "Ctrl",
+            },
+            Modifier {
+                enabled: modifiers.alt,
+                mac: Icon(IconName::Option),
+                linux: "Alt",
+                windows: "Alt",
+            },
+            Modifier {
+                enabled: modifiers.platform,
+                mac: Icon(IconName::Command),
+                linux: "Super",
+                windows: "Win",
+            },
+            Modifier {
+                enabled: modifiers.shift,
+                mac: Icon(IconName::Shift),
+                linux: "Shift",
+                windows: "Shift",
+            },
+        ]
+    };
+
+    let filtered = table
+        .into_iter()
+        .filter(|modifier| modifier.enabled)
+        .collect::<Vec<_>>();
+
+    filtered
+        .into_iter()
+        .map(move |modifier| match platform_style {
+            PlatformStyle::Mac => modifier.mac,
+            PlatformStyle::Linux => KeyOrIcon::Key(modifier.linux.to_string()),
+            PlatformStyle::Windows => KeyOrIcon::Key(modifier.windows.to_string()),
+        })
+        .map(move |key_or_icon| match key_or_icon {
+            KeyOrIcon::Key(key) => Key::new(key, color).size(size).into_any_element(),
+            KeyOrIcon::Icon(icon) => KeyIcon::new(icon, color).size(size).into_any_element(),
+        })
+}
+
 #[derive(IntoElement)]
 pub struct Key {
     key: SharedString,