outline_panel: Fix inconsistent keybinding label casing (#54307)

galuis116 , Danilo Leal , and Danilo Leal created 3 weeks ago

Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content is consistent with the [UI/UX
checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

Closes #54305 
Release Notes:

- Fixed inconsistent keybinding hint casing in the outline panel
(“Toggle Panel With …”) by using standard keybinding rendering.

---------

Co-authored-by: Danilo Leal <[e-mail]>
Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/outline_panel/src/outline_panel.rs | 39 ++++++++++++++++--------
1 file changed, 26 insertions(+), 13 deletions(-)

Detailed changes

crates/outline_panel/src/outline_panel.rs

@@ -51,7 +51,8 @@ use theme::SyntaxTheme;
 use theme_settings::ThemeSettings;
 use ui::{
     ContextMenu, FluentBuilder, HighlightedLabel, IconButton, IconButtonShape, IndentGuideColors,
-    IndentGuideLayout, ListItem, ScrollAxes, Scrollbars, Tab, Tooltip, WithScrollbar, prelude::*,
+    IndentGuideLayout, KeyBinding, ListItem, ScrollAxes, Scrollbars, Tab, Tooltip, WithScrollbar,
+    prelude::*,
 };
 use util::{RangeExt, ResultExt, TryFutureExt, debug_panic, rel_path::RelPath};
 use workspace::{
@@ -4561,18 +4562,30 @@ impl OutlinePanel {
                             .child(Label::new(query)),
                     )
                 })
-                .child(h_flex().justify_center().child({
-                    let keystroke = match self.position(window, cx) {
-                        DockPosition::Left => window.keystroke_text_for(&workspace::ToggleLeftDock),
-                        DockPosition::Bottom => {
-                            window.keystroke_text_for(&workspace::ToggleBottomDock)
-                        }
-                        DockPosition::Right => {
-                            window.keystroke_text_for(&workspace::ToggleRightDock)
-                        }
-                    };
-                    Label::new(format!("Toggle Panel With {keystroke}")).color(Color::Muted)
-                }))
+                .child(
+                    h_flex()
+                        .gap_1()
+                        .justify_center()
+                        .child(Label::new("Toggle Panel With").color(Color::Muted))
+                        .child({
+                            let key_binding = match self.position(window, cx) {
+                                DockPosition::Left => {
+                                    KeyBinding::for_action(&workspace::ToggleLeftDock, cx)
+                                        .into_any_element()
+                                }
+                                DockPosition::Bottom => {
+                                    KeyBinding::for_action(&workspace::ToggleBottomDock, cx)
+                                        .into_any_element()
+                                }
+                                DockPosition::Right => {
+                                    KeyBinding::for_action(&workspace::ToggleRightDock, cx)
+                                        .into_any_element()
+                                }
+                            };
+
+                            key_binding
+                        }),
+                )
         } else {
             let list_contents = {
                 let items_len = self.cached_entries.len();