From 25c471f9e47438c575a253ecbbbf3c70026f3a37 Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Mon, 11 Mar 2024 15:57:31 -0400
Subject: [PATCH] Render `+` separators for keybindings on non-macOS platforms
 (#9194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adjusts the rendering of keybindings on non-macOS platforms to
have a `+` separator instead of just a blank space.

<img width="952" alt="Screenshot 2024-03-11 at 3 18 17 PM"
src="https://github.com/zed-industries/zed/assets/1486634/1573823d-4329-41f0-bef4-7a6c09f3e632">

<img width="584" alt="Screenshot 2024-03-11 at 3 16 25 PM"
src="https://github.com/zed-industries/zed/assets/1486634/aae41b22-dfde-40a6-9e0e-cee855522d3a">

Release Notes:

- N/A
---
 crates/ui/src/components/keybinding.rs | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/crates/ui/src/components/keybinding.rs b/crates/ui/src/components/keybinding.rs
index b5ff8783deaa7e4ad7ae23a5b56e20abda0bec03..5e64c0b879fbf74f5b3fcef421d9d34de0434e51 100644
--- a/crates/ui/src/components/keybinding.rs
+++ b/crates/ui/src/components/keybinding.rs
@@ -97,37 +97,44 @@ impl RenderOnce for KeyBinding {
 
                 h_flex()
                     .flex_none()
-                    .gap_0p5()
+                    .map(|el| match self.display {
+                        KeyBindingDisplay::Mac => el.gap_0p5(),
+                        KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => el,
+                    })
                     .p_0p5()
                     .rounded_sm()
                     .text_color(cx.theme().colors().text_muted)
                     .when(keystroke.modifiers.function, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(Key::new("fn")),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Fn"))
+                            el.child(Key::new("Fn")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.control, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Control)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Ctrl"))
+                            el.child(Key::new("Ctrl")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.alt, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Option)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Alt"))
+                            el.child(Key::new("Alt")).child(Key::new("+"))
                         }
                     })
                     .when(keystroke.modifiers.command, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Command)),
-                        KeyBindingDisplay::Linux => el.child(Key::new("Super")),
-                        KeyBindingDisplay::Windows => el.child(Key::new("Win")),
+                        KeyBindingDisplay::Linux => {
+                            el.child(Key::new("Super")).child(Key::new("+"))
+                        }
+                        KeyBindingDisplay::Windows => {
+                            el.child(Key::new("Win")).child(Key::new("+"))
+                        }
                     })
                     .when(keystroke.modifiers.shift, |el| match self.display {
                         KeyBindingDisplay::Mac => el.child(KeyIcon::new(IconName::Option)),
                         KeyBindingDisplay::Linux | KeyBindingDisplay::Windows => {
-                            el.child(Key::new("Shift"))
+                            el.child(Key::new("Shift")).child(Key::new("+"))
                         }
                     })
                     .map(|el| match key_icon {