Moved shortcut hint in own control and used it in search

src/PixiEditor.AvaloniaUI/Models/Input/KeyCombination.cs

@@ -13,13 +13,13 @@ public record struct KeyCombination(Key Key, KeyModifiers Modifiers)
 {
     public static KeyCombination None => new(Key.None, KeyModifiers.None);
 
-    public override string ToString() => ToString(false);
+    public override string ToString() => ToString(false, false);
 
     public KeyGesture ToKeyGesture() => new(Key, Modifiers);
 
     public KeyGesture Gesture => ToKeyGesture();
 
-    private string ToString(bool forceInvariant)
+    private string ToString(bool forceInvariant, bool showNone)
     {
         StringBuilder builder = new();
 
@@ -38,7 +38,7 @@ public record struct KeyCombination(Key Key, KeyModifiers Modifiers)
             builder.Append($"{key}+");
         }
 
-        if (Key != Key.None)
+        if (Key != Key.None || showNone)
         {
             builder.Append(InputKeyHelpers.GetKeyboardKey(Key, forceInvariant));
         }
@@ -47,5 +47,5 @@ public record struct KeyCombination(Key Key, KeyModifiers Modifiers)
         return builder.ToString();
     }
 
-    private string GetDebuggerDisplay() => ToString(true);
+    private string GetDebuggerDisplay() => ToString(true, true);
 }

src/PixiEditor.AvaloniaUI/Views/Dialogs/ShortcutsPopup.axaml

@@ -11,6 +11,7 @@
                          xmlns:panels="clr-namespace:PixiEditor.AvaloniaUI.Views.Panels"
                          xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
                          xmlns:system="clr-namespace:System;assembly=System.Runtime"
+                         xmlns:shortcuts="clr-namespace:PixiEditor.AvaloniaUI.Views.Shortcuts"
                          mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
                          x:Class="PixiEditor.AvaloniaUI.Views.Dialogs.ShortcutsPopup"
                          CloseIsHide="True"
@@ -53,28 +54,7 @@
                                                 <StackPanel Orientation="Horizontal" Margin="20,0,0,0"
                                                             IsVisible="{Binding Shortcut.Key, ConverterParameter=None, Converter={converters:EqualityBoolToIsVisibleConverter Invert=True}}"
                                                             ToolTip.Tip="{Binding Description}">
-                                                    <ItemsControl
-                                                        ItemsSource="{Binding Shortcut.Modifiers, Converter={converters:ModifierFlagToModifiersConverter}}">
-                                                        <ItemsControl.ItemTemplate>
-                                                            <DataTemplate DataType="{x:Type KeyModifiers}">
-                                                                <Border Classes="KeyBorder">
-                                                                    <TextBlock
-                                                                        ui:Translator.LocalizedString="{Binding Converter={converters:KeyToStringConverter}}"
-                                                                        Classes="KeyBorderText" />
-                                                                </Border>
-                                                            </DataTemplate>
-                                                        </ItemsControl.ItemTemplate>
-                                                        <ItemsControl.ItemsPanel>
-                                                            <ItemsPanelTemplate>
-                                                                <StackPanel Orientation="Horizontal" />
-                                                            </ItemsPanelTemplate>
-                                                        </ItemsControl.ItemsPanel>
-                                                    </ItemsControl>
-                                                    <Border Classes="KeyBorder KeyBorderLast">
-                                                        <TextBlock
-                                                            Text="{Binding Shortcut.Key, Converter={converters:KeyToStringConverter}}"
-                                                            Classes="KeyBorderText" />
-                                                    </Border>
+                                                    <shortcuts:ShortcutHint Shortcut="{Binding Shortcut}"/>
 
                                                     <TextBlock Text="{Binding DisplayName}"
                                                                VerticalAlignment="Center"

src/PixiEditor.AvaloniaUI/Views/Main/CommandSearch/CommandSearchControl.axaml

@@ -6,6 +6,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:behaviours="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Behaviours"
              xmlns:search="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.Search"
+             xmlns:shortcuts="clr-namespace:PixiEditor.AvaloniaUI.Views.Shortcuts"
              mc:Ignorable="d"
              Foreground="White"
              d:DesignHeight="450" d:DesignWidth="600"
@@ -72,8 +73,7 @@
                                                        behaviours:TextBlockExtensions.BindableInlines="{Binding TextBlockContent}" />
                                         </StackPanel>
 
-                                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Classes="KeyBorder"
-                                                   HorizontalAlignment="Right" Text="{Binding Shortcut}" />
+                                        <shortcuts:ShortcutHint Grid.Column="1" VerticalAlignment="Center" Shortcut="{Binding Shortcut}" />
                                     </Grid>
                                 </Button>
                             </DataTemplate>

src/PixiEditor.AvaloniaUI/Views/Shortcuts/ShortcutHint.axaml

@@ -0,0 +1,34 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+             xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.AvaloniaUI.Views.Shortcuts.ShortcutHint"
+             Name="uc">
+    <StackPanel Orientation="Horizontal">
+        <ItemsControl
+            ItemsSource="{Binding #uc.Shortcut.Modifiers, Converter={converters:ModifierFlagToModifiersConverter}}">
+            <ItemsControl.ItemTemplate>
+                <DataTemplate DataType="{x:Type KeyModifiers}">
+                    <Border Classes="KeyBorder">
+                        <TextBlock
+                            ui:Translator.LocalizedString="{Binding Converter={converters:KeyToStringConverter}}"
+                            Classes="KeyBorderText" TextAlignment="Center" MinWidth="33" />
+                    </Border>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel Orientation="Horizontal" />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+        </ItemsControl>
+        <Border Classes="KeyBorder KeyBorderLast">
+            <TextBlock
+                Text="{Binding #uc.Shortcut.Key, Converter={converters:KeyToStringConverter}}"
+                Classes="KeyBorderText" TextAlignment="Center" MinWidth="15" />
+        </Border>
+    </StackPanel>
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Shortcuts/ShortcutHint.axaml.cs

@@ -0,0 +1,33 @@
+using Avalonia;
+using Avalonia.Controls;
+using PixiEditor.AvaloniaUI.Models.Input;
+
+namespace PixiEditor.AvaloniaUI.Views.Shortcuts;
+
+public partial class ShortcutHint : UserControl
+{
+    public static readonly StyledProperty<KeyCombination> ShortcutProperty =
+        AvaloniaProperty.Register<ShortcutHint, KeyCombination>(nameof(Shortcut));
+
+    public KeyCombination Shortcut
+    {
+        get => GetValue(ShortcutProperty);
+        set => SetValue(ShortcutProperty, value);
+    }
+    
+    public ShortcutHint()
+    {
+        var shortcutObserver = this.GetObservable(ShortcutProperty);
+        shortcutObserver.Subscribe(_ => UpdateVisibility());
+        
+        InitializeComponent();
+        
+        UpdateVisibility();
+    }
+
+    private void UpdateVisibility()
+    {
+        IsVisible = Shortcut != KeyCombination.None;
+    }
+}
+