From 336e9726829a0df0246c65e80b01869f2d1d59f0 Mon Sep 17 00:00:00 2001
From: Yusyuriv <Yusyuriv@users.noreply.github.com>
Date: Fri, 3 May 2024 05:05:41 +0600
Subject: [PATCH] Fully functional Hotkey pane in the settings window

---
 Flow.Launcher/CustomShortcutSetting.xaml.cs   |   2 +-
 .../SettingsPaneGeneralViewModel.cs           |  10 +-
 .../ViewModels/SettingsPaneHotkeyViewModel.cs | 134 +++
 .../Views/SettingsPaneHotkey.xaml             | 841 +++++++++---------
 .../Views/SettingsPaneHotkey.xaml.cs          |  31 +-
 .../SettingPages/Views/SettingsPaneTheme.xaml |   8 +
 6 files changed, 558 insertions(+), 468 deletions(-)
 create mode 100644 Flow.Launcher/SettingPages/ViewModels/SettingsPaneHotkeyViewModel.cs

diff --git a/Flow.Launcher/CustomShortcutSetting.xaml.cs b/Flow.Launcher/CustomShortcutSetting.xaml.cs
index 097d6a53b..880c49787 100644
--- a/Flow.Launcher/CustomShortcutSetting.xaml.cs
+++ b/Flow.Launcher/CustomShortcutSetting.xaml.cs
@@ -47,7 +47,7 @@ namespace Flow.Launcher
             }
             // Check if key is modified or adding a new one
             if (((update && originalKey != Key) || !update)
-                && viewModel.ShortcutExists(Key))
+                && (viewModel?.ShortcutExists(Key) ?? false)) // TODO Remove this check after removing unused code from SettingWindow.xaml.cs
             {
                 MessageBox.Show(InternationalizationManager.Instance.GetTranslation("duplicateShortcut"));
                 return;
diff --git a/Flow.Launcher/SettingPages/ViewModels/SettingsPaneGeneralViewModel.cs b/Flow.Launcher/SettingPages/ViewModels/SettingsPaneGeneralViewModel.cs
index e405ccc96..a9718a0ac 100644
--- a/Flow.Launcher/SettingPages/ViewModels/SettingsPaneGeneralViewModel.cs
+++ b/Flow.Launcher/SettingPages/ViewModels/SettingsPaneGeneralViewModel.cs
@@ -7,7 +7,6 @@ using Flow.Launcher.Core;
 using Flow.Launcher.Core.Configuration;
 using Flow.Launcher.Core.Resource;
 using Flow.Launcher.Helper;
-using Flow.Launcher.Infrastructure;
 using Flow.Launcher.Infrastructure.UserSettings;
 using Flow.Launcher.Plugin;
 using Flow.Launcher.Plugin.SharedModels;
@@ -16,7 +15,7 @@ namespace Flow.Launcher.SettingPages.ViewModels;
 
 public partial class SettingsPaneGeneralViewModel : BaseModel
 {
-    public Settings Settings { get; set; }
+    public Settings Settings { get; }
     private readonly Updater _updater;
     private readonly IPortable _portable;
 
@@ -150,13 +149,6 @@ public partial class SettingsPaneGeneralViewModel : BaseModel
         .Select(v => v.ToString())
         .ToList();
 
-    public List<string> OpenResultModifiersList => new List<string>
-    {
-        KeyConstant.Alt,
-        KeyConstant.Ctrl,
-        $"{KeyConstant.Ctrl}+{KeyConstant.Alt}"
-    };
-
     public List<Language> Languages => InternationalizationManager.Instance.LoadAvailableLanguages();
     public IEnumerable<int> MaxResultsRange => Enumerable.Range(2, 16);
 
diff --git a/Flow.Launcher/SettingPages/ViewModels/SettingsPaneHotkeyViewModel.cs b/Flow.Launcher/SettingPages/ViewModels/SettingsPaneHotkeyViewModel.cs
new file mode 100644
index 000000000..f56c4a971
--- /dev/null
+++ b/Flow.Launcher/SettingPages/ViewModels/SettingsPaneHotkeyViewModel.cs
@@ -0,0 +1,134 @@
+using System.Windows;
+using CommunityToolkit.Mvvm.Input;
+using Flow.Launcher.Core.Resource;
+using Flow.Launcher.Helper;
+using Flow.Launcher.Infrastructure;
+using Flow.Launcher.Infrastructure.Hotkey;
+using Flow.Launcher.Infrastructure.UserSettings;
+using Flow.Launcher.Plugin;
+
+namespace Flow.Launcher.SettingPages.ViewModels;
+
+public partial class SettingsPaneHotkeyViewModel : BaseModel
+{
+    public Settings Settings { get; }
+
+    public CustomPluginHotkey SelectedCustomPluginHotkey { get; set; }
+    public CustomShortcutModel SelectedCustomShortcut { get; set; }
+
+    public string[] OpenResultModifiersList => new[]
+    {
+        KeyConstant.Alt,
+        KeyConstant.Ctrl,
+        $"{KeyConstant.Ctrl}+{KeyConstant.Alt}"
+    };
+
+    public SettingsPaneHotkeyViewModel(Settings settings)
+    {
+        Settings = settings;
+    }
+
+    [RelayCommand]
+    private void SetTogglingHotkey(HotkeyModel hotkey)
+    {
+        HotKeyMapper.SetHotkey(hotkey, HotKeyMapper.OnToggleHotkey);
+    }
+
+    [RelayCommand]
+    private void CustomHotkeyDelete()
+    {
+        var item = SelectedCustomPluginHotkey;
+        if (item is null)
+        {
+            MessageBox.Show(InternationalizationManager.Instance.GetTranslation("pleaseSelectAnItem"));
+            return;
+        }
+
+        var result = MessageBox.Show(
+            string.Format(
+                InternationalizationManager.Instance.GetTranslation("deleteCustomHotkeyWarning"), item.Hotkey
+            ),
+            InternationalizationManager.Instance.GetTranslation("delete"),
+            MessageBoxButton.YesNo
+        );
+
+        if (result is MessageBoxResult.Yes)
+        {
+            Settings.CustomPluginHotkeys.Remove(item);
+            HotKeyMapper.RemoveHotkey(item.Hotkey);
+        }
+    }
+
+    [RelayCommand]
+    private void CustomHotkeyEdit()
+    {
+        var item = SelectedCustomPluginHotkey;
+        if (item is null)
+        {
+            MessageBox.Show(InternationalizationManager.Instance.GetTranslation("pleaseSelectAnItem"));
+            return;
+        }
+
+        var window = new CustomQueryHotkeySetting(null, Settings);
+        window.UpdateItem(item);
+        window.ShowDialog();
+    }
+
+    [RelayCommand]
+    private void CustomHotkeyAdd()
+    {
+        new CustomQueryHotkeySetting(null, Settings).ShowDialog();
+    }
+
+    [RelayCommand]
+    private void CustomShortcutDelete()
+    {
+        var item = SelectedCustomShortcut;
+        if (item is null)
+        {
+            MessageBox.Show(InternationalizationManager.Instance.GetTranslation("pleaseSelectAnItem"));
+            return;
+        }
+
+        var result = MessageBox.Show(
+            string.Format(
+                InternationalizationManager.Instance.GetTranslation("deleteCustomShortcutWarning"), item.Key, item.Value
+            ),
+            InternationalizationManager.Instance.GetTranslation("delete"),
+            MessageBoxButton.YesNo
+        );
+
+        if (result is MessageBoxResult.Yes)
+        {
+            Settings.CustomShortcuts.Remove(item);
+        }
+    }
+
+    [RelayCommand]
+    private void CustomShortcutEdit()
+    {
+        var item = SelectedCustomShortcut;
+        if (item is null)
+        {
+            MessageBox.Show(InternationalizationManager.Instance.GetTranslation("pleaseSelectAnItem"));
+            return;
+        }
+
+        var window = new CustomShortcutSetting(item.Key, item.Value, null);
+        if (window.ShowDialog() is not true) return;
+
+        var index = Settings.CustomShortcuts.IndexOf(item);
+        Settings.CustomShortcuts[index] = new CustomShortcutModel(window.Key, window.Value);
+    }
+
+    [RelayCommand]
+    private void CustomShortcutAdd()
+    {
+        var window = new CustomShortcutSetting(null);
+        if (window.ShowDialog() is true)
+        {
+            var shortcut = new CustomShortcutModel(window.Key, window.Value);
+            Settings.CustomShortcuts.Add(shortcut);
+        }
+    }
+}
diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml b/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml
index 7afb7bdc7..170b596f0 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml
@@ -1,472 +1,433 @@
-<Page
+<ui:Page
     x:Class="Flow.Launcher.SettingPages.Views.SettingsPaneHotkey"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:cc="clr-namespace:Flow.Launcher.Resources.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:flowlauncher="clr-namespace:Flow.Launcher"
-    xmlns:local="clr-namespace:Flow.Launcher.SettingPages.Views"
+    xmlns:userSettings="clr-namespace:Flow.Launcher.Infrastructure.UserSettings;assembly=Flow.Launcher.Infrastructure"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="http://schemas.modernwpf.com/2019"
+    xmlns:viewModels="clr-namespace:Flow.Launcher.SettingPages.ViewModels"
     Title="Hotkey"
+    d:DataContext="{d:DesignInstance viewModels:SettingsPaneHotkeyViewModel}"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <Page.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceDictionary Source="pack://application:,,,/Resources/SettingWindowStyle.xaml" />
-            </ResourceDictionary.MergedDictionaries>
-            <CollectionViewSource x:Key="SortedFonts" Source="{Binding Source={x:Static Fonts.SystemFontFamilies}}" />
-        </ResourceDictionary>
-    </Page.Resources>
     <ScrollViewer
         Margin="0,0,0,0"
         Padding="0,0,6,0"
         FontSize="14"
-        ScrollViewer.CanContentScroll="True"
         VirtualizingStackPanel.IsVirtualizing="True"
         VirtualizingStackPanel.ScrollUnit="Pixel">
-        <Border>
-            <StackPanel Margin="5,18,18,10">
-                <TextBlock
-                    Grid.Row="0"
-                    Margin="0,5,0,6"
-                    FontSize="30"
-                    Style="{StaticResource PageTitle}"
-                    Text="{DynamicResource hotkeys}"
-                    TextAlignment="left" />
-                <StackPanel Grid.Row="1">
+        <StackPanel Margin="5,18,18,10">
+            <TextBlock
+                Margin="0,5,0,6"
+                FontSize="30"
+                Style="{StaticResource PageTitle}"
+                Text="{DynamicResource hotkeys}"
+                TextAlignment="left" />
+
+            <TextBlock Text="{Binding Settings.OpenResultModifiers}" />
+
+            <cc:Card
+                Title="{DynamicResource flowlauncherHotkey}"
+                Icon="&#xeda7;"
+                Sub="{DynamicResource flowlauncherHotkeyToolTip}">
+                <flowlauncher:HotkeyControl
+                    ChangeHotkey="{Binding SetTogglingHotkeyCommand}"
+                    HotkeySettings="{Binding Settings}"
+                    DefaultHotkey="Alt+Space"
+                    Hotkey="{Binding Settings.Hotkey}"
+                    ValidateKeyGesture="True"
+                    WindowTitle="{DynamicResource flowlauncherHotkey}" />
+            </cc:Card>
+
+            <cc:Card
+                Title="{DynamicResource previewHotkey}"
+                Icon="&#xe8a1;"
+                Sub="{DynamicResource previewHotkeyToolTip}">
+                <flowlauncher:HotkeyControl
+                    HotkeySettings="{Binding Settings}"
+                    DefaultHotkey="F1"
+                    Hotkey="{Binding Settings.PreviewHotkey}"
+                    ValidateKeyGesture="False"
+                    WindowTitle="{DynamicResource previewHotkey}" />
+            </cc:Card>
+
+            <cc:CardGroup Margin="0 12 0 0">
+                <cc:Card
+                    Title="{DynamicResource openResultModifiers}"
+                    Sub="{DynamicResource openResultModifiersToolTip}">
+                    <ComboBox
+                        Width="120"
+                        FontSize="14"
+                        ItemsSource="{Binding OpenResultModifiersList}"
+                        SelectedValue="{Binding Settings.OpenResultModifiers}" />
+                </cc:Card>
+
+                <cc:Card
+                    Title="{DynamicResource showOpenResultHotkey}"
+                    Sub="{DynamicResource showOpenResultHotkeyToolTip}">
+                    <ui:ToggleSwitch IsOn="{Binding Settings.ShowOpenResultHotkey}" />
+                </cc:Card>
+            </cc:CardGroup>
+
+            <cc:ExCard
+                Title="{DynamicResource hotkeyPresets}"
+                Margin="0,14,0,0"
+                Icon="&#xf0e2;"
+                Sub="{DynamicResource hotkeyPresetsToolTip}">
+                <StackPanel>
                     <cc:Card
-                        Title="{DynamicResource flowlauncherHotkey}"
-                        Icon="&#xeda7;"
-                        Sub="{DynamicResource flowlauncherHotkeyToolTip}">
+                        Title="{DynamicResource OpenContainFolderHotkey}"
+                        Icon="&#xe8b7;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Ctrl+Enter" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource RunAsAdminHotkey}"
+                        Icon="&#xe7ef;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Ctrl+Shift+Enter" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource ToggleHistoryHotkey}"
+                        Icon="&#xf738;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Ctrl+H" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource CopyFilePathHotkey}"
+                        Icon="&#xe8c8;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Ctrl+Shift+C" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource OpenContextMenuHotkey}"
+                        Icon="&#xede3;"
+                        Type="Inside">
                         <flowlauncher:HotkeyControl
-                            ChangeHotkey="{Binding SetTogglingHotkeyCommand}"
-                            DefaultHotkey="Alt+Space"
-                            Hotkey="{Binding Settings.Hotkey}"
-                            ValidateKeyGesture="True"
-                            WindowTitle="{DynamicResource flowlauncherHotkey}" />
+                            HotkeySettings="{Binding Settings}"
+                            DefaultHotkey="Ctrl+I"
+                            Hotkey="{Binding Settings.OpenContextMenuHotkey}"
+                            ValidateKeyGesture="False" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource OpenContextMenuHotkey}"
+                        Icon="&#xede3;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Shift+Enter" />
+                    </cc:Card>
+
+                    <cc:Card
+                        Title="{DynamicResource SettingWindowHotkey}"
+                        Icon="&#xe713;"
+                        Type="Inside">
+                        <flowlauncher:HotkeyControl
+                            HotkeySettings="{Binding Settings}"
+                            DefaultHotkey="Ctrl+I"
+                            Hotkey="{Binding Settings.SettingWindowHotkey}"
+                            ValidateKeyGesture="False" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource ToggleGameModeHotkey}"
+                        Icon="&#xe7fc;"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="Ctrl+F12" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource ReloadPluginHotkey}"
+                        Icon="&#xe72c;"
+                        Sub="{DynamicResource ReloadPluginHotkeyToolTip}"
+                        Type="Inside">
+                        <cc:HotkeyDisplay Keys="F5" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource SelectPrevPageHotkey}"
+                        Icon="&#xf0ad;"
+                        Type="Inside">
+                        <flowlauncher:HotkeyControl
+                            HotkeySettings="{Binding Settings}"
+                            DefaultHotkey=""
+                            Hotkey="{Binding Settings.SelectPrevPageHotkey}"
+                            ValidateKeyGesture="False" />
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource SelectNextPageHotkey}"
+                        Icon="&#xf0ae;"
+                        Type="Inside">
+                        <flowlauncher:HotkeyControl
+                            HotkeySettings="{Binding Settings}"
+                            DefaultHotkey=""
+                            Hotkey="{Binding Settings.SelectNextPageHotkey}"
+                            ValidateKeyGesture="False" />
+                    </cc:Card>
+
+                    <cc:Card
+                        Title="{DynamicResource QuickWidthHotkey}"
+                        Icon="&#xe7ea;"
+                        Type="Inside">
+                        <StackPanel Orientation="Horizontal">
+                            <cc:HotkeyDisplay Keys="Ctrl+[" />
+                            <cc:HotkeyDisplay Margin="4,0,0,0" Keys="Ctrl+]" />
+                        </StackPanel>
+                    </cc:Card>
+                    <cc:Card
+                        Title="{DynamicResource QuickHeightHotkey}"
+                        Icon="&#xe7eb;"
+                        Type="Inside">
+                        <StackPanel Orientation="Horizontal">
+                            <cc:HotkeyDisplay Keys="Ctrl+Plus" />
+                            <cc:HotkeyDisplay Margin="4,0,0,0" Keys="Ctrl+Minus" />
+                        </StackPanel>
                     </cc:Card>
                 </StackPanel>
+            </cc:ExCard>
 
-                <StackPanel Grid.Row="2">
-                    <cc:Card
-                        Title="{DynamicResource previewHotkey}"
-                        Icon="&#xe8a1;"
-                        Sub="{DynamicResource previewHotkeyToolTip}">
-                        <flowlauncher:HotkeyControl
-                            DefaultHotkey="F1"
-                            Hotkey="{Binding Settings.PreviewHotkey}"
-                            ValidateKeyGesture="False"
-                            WindowTitle="{DynamicResource previewHotkey}" />
-                    </cc:Card>
-                </StackPanel>
 
-                <Border
-                    Grid.Row="3"
-                    Margin="0,12,0,0"
-                    Padding="0"
-                    CornerRadius="5"
-                    Style="{DynamicResource SettingGroupBox}">
-                    <StackPanel Orientation="Vertical">
-                        <Border
-                            Margin="0"
-                            BorderThickness="0"
-                            Style="{DynamicResource SettingGroupBox}">
-                            <ItemsControl Style="{StaticResource SettingGrid}">
-                                <StackPanel Style="{StaticResource TextPanel}">
-                                    <TextBlock
-                                        Grid.Column="1"
-                                        VerticalAlignment="Center"
-                                        Style="{DynamicResource SettingTitleLabel}"
-                                        Text="{DynamicResource openResultModifiers}" />
-                                    <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource openResultModifiersToolTip}" />
-                                </StackPanel>
-                                <ComboBox
-                                    Grid.Column="2"
-                                    Width="120"
-                                    Margin="0,0,18,0"
-                                    FontSize="14"
-                                    ItemsSource="{Binding OpenResultModifiersList}"
-                                    SelectedItem="{Binding Settings.OpenResultModifiers}" />
-                            </ItemsControl>
-                        </Border>
+            <cc:ExCard
+                Title="{DynamicResource autoCompleteHotkey}"
+                Margin="0,14,0,0"
+                Icon="&#xe893;"
+                Sub="{DynamicResource autoCompleteHotkeyToolTip}">
+                <cc:ExCard.SideContent>
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey="Ctrl+Tab"
+                        Hotkey="{Binding Settings.AutoCompleteHotkey}"
+                        ValidateKeyGesture="False" />
+                </cc:ExCard.SideContent>
+                <cc:Card
+                    Title="{DynamicResource autoCompleteHotkey}"
+                    Sub="{DynamicResource AdditionalHotkeyToolTip}"
+                    Type="InsideFit">
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey=""
+                        Hotkey="{Binding Settings.AutoCompleteHotkey2}"
+                        ValidateKeyGesture="False" />
+                </cc:Card>
+            </cc:ExCard>
 
-                        <Separator
-                            Width="Auto"
+            <cc:ExCard
+                Title="{DynamicResource SelectPrevItemHotkey}"
+                Margin="0,4,0,0"
+                Icon="&#xe74a;">
+                <cc:ExCard.SideContent>
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey="Shift+Tab"
+                        Hotkey="{Binding Settings.SelectPrevItemHotkey}"
+                        ValidateKeyGesture="False" />
+                </cc:ExCard.SideContent>
+                <cc:Card
+                    Title="{DynamicResource SelectPrevItemHotkey}"
+                    Sub="{DynamicResource AdditionalHotkeyToolTip}"
+                    Type="InsideFit">
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey=""
+                        Hotkey="{Binding Settings.SelectPrevItemHotkey2}"
+                        ValidateKeyGesture="False" />
+                </cc:Card>
+            </cc:ExCard>
+
+            <cc:ExCard
+                Title="{DynamicResource SelectNextItemHotkey}"
+                Margin="0,4,0,0"
+                Icon="&#xe74b;">
+                <cc:ExCard.SideContent>
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey="Tab"
+                        Hotkey="{Binding Settings.SelectNextItemHotkey}"
+                        ValidateKeyGesture="False" />
+                </cc:ExCard.SideContent>
+                <cc:Card
+                    Title="{DynamicResource SelectNextItemHotkey}"
+                    Sub="{DynamicResource AdditionalHotkeyToolTip}"
+                    Type="InsideFit">
+                    <flowlauncher:HotkeyControl
+                        HotkeySettings="{Binding Settings}"
+                        DefaultHotkey=""
+                        Hotkey="{Binding Settings.SelectNextItemHotkey2}"
+                        ValidateKeyGesture="False" />
+                </cc:Card>
+            </cc:ExCard>
+
+            <cc:ExCard
+                Title="{DynamicResource customQueryHotkey}"
+                Margin="0,20,0,0"
+                Icon="&#xf26c;">
+                <StackPanel Margin="0,0,0,0">
+                    <Separator
+                        Width="Auto"
+                        Margin="0"
+                        BorderThickness="1"
+                        Style="{StaticResource SettingSeparatorStyle}" />
+                    <StackPanel Margin="18,18,18,0">
+                        <ListView
+                            MinHeight="160"
+                            Margin="0,0,0,0"
+                            Background="{DynamicResource Color02B}"
+                            BorderBrush="DarkGray"
                             BorderThickness="1"
-                            Style="{StaticResource SettingSeparatorStyle}" />
-                        <Border
+                            ItemsSource="{Binding Settings.CustomPluginHotkeys}"
+                            SelectedItem="{Binding SelectedCustomPluginHotkey}"
+                            Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
+                            <ListView.View>
+                                <GridView>
+                                    <GridViewColumn Width="180" Header="{DynamicResource hotkey}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="userSettings:CustomPluginHotkey">
+                                                <TextBlock Text="{Binding Hotkey}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                    <GridViewColumn Width="430" Header="{DynamicResource customQuery}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="userSettings:CustomPluginHotkey">
+                                                <TextBlock Text="{Binding ActionKeyword}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                </GridView>
+                            </ListView.View>
+                        </ListView>
+                        <StackPanel
                             Margin="0"
-                            Padding="0,10,0,10"
-                            BorderThickness="0"
-                            Style="{DynamicResource SettingGroupBox}">
-                            <ItemsControl Style="{StaticResource SettingGrid}">
-                                <StackPanel Style="{StaticResource TextPanel}">
-                                    <TextBlock
-                                        Grid.Column="1"
-                                        VerticalAlignment="Center"
-                                        Style="{DynamicResource SettingTitleLabel}"
-                                        Text="{DynamicResource showOpenResultHotkey}" />
-                                    <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource showOpenResultHotkeyToolTip}" />
-                                </StackPanel>
-                                <ui:ToggleSwitch
-                                    Grid.Column="2"
-                                    Margin="0,0,18,0"
-                                    IsOn="{Binding Settings.ShowOpenResultHotkey}" />
-                            </ItemsControl>
-                        </Border>
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top"
+                            Orientation="Horizontal">
+                            <Button
+                                MinWidth="100"
+                                Margin="10"
+                                Command="{Binding CustomHotkeyDeleteCommand}"
+                                Content="{DynamicResource delete}" />
+                            <Button
+                                MinWidth="100"
+                                Margin="10"
+                                Command="{Binding CustomHotkeyEditCommand}"
+                                Content="{DynamicResource edit}" />
+                            <Button
+                                MinWidth="100"
+                                Margin="10,10,0,10"
+                                Command="{Binding CustomHotkeyAddCommand}"
+                                Content="{DynamicResource add}" />
+                        </StackPanel>
                     </StackPanel>
-                </Border>
-
-                <StackPanel Grid.Row="2">
-                    <cc:ExCard
-                        Title="{DynamicResource hotkeyPresets}"
-                        Margin="0,14,0,0"
-                        Icon="&#xf0e2;"
-                        Sub="{DynamicResource hotkeyPresetsToolTip}">
-                        <StackPanel>
-                            <cc:Card
-                                Title="{DynamicResource OpenContainFolderHotkey}"
-                                Icon="&#xe8b7;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Ctrl+Enter" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource RunAsAdminHotkey}"
-                                Icon="&#xe7ef;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Ctrl+Shift+Enter" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource ToggleHistoryHotkey}"
-                                Icon="&#xf738;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Ctrl+H" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource CopyFilePathHotkey}"
-                                Icon="&#xe8c8;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Ctrl+Shift+C" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource OpenContextMenuHotkey}"
-                                Icon="&#xede3;"
-                                Type="Inside">
-                                <flowlauncher:HotkeyControl
-                                    DefaultHotkey="Ctrl+I"
-                                    Hotkey="{Binding Settings.OpenContextMenuHotkey}"
-                                    ValidateKeyGesture="False" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource OpenContextMenuHotkey}"
-                                Icon="&#xede3;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Shift+Enter" />
-                            </cc:Card>
-
-                            <cc:Card
-                                Title="{DynamicResource SettingWindowHotkey}"
-                                Icon="&#xe713;"
-                                Type="Inside">
-                                <flowlauncher:HotkeyControl
-                                    DefaultHotkey="Ctrl+I"
-                                    Hotkey="{Binding Settings.SettingWindowHotkey}"
-                                    ValidateKeyGesture="False" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource ToggleGameModeHotkey}"
-                                Icon="&#xe7fc;"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="Ctrl+Shift+C" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource ReloadPluginHotkey}"
-                                Icon="&#xe72c;"
-                                Sub="{DynamicResource ReloadPluginHotkeyToolTip}"
-                                Type="Inside">
-                                <cc:HotkeyDisplay Keys="F5" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource SelectPrevPageHotkey}"
-                                Icon="&#xf0ad;"
-                                Type="Inside">
-                                <flowlauncher:HotkeyControl
-                                    DefaultHotkey=""
-                                    Hotkey="{Binding Settings.SelectPrevPageHotkey}"
-                                    ValidateKeyGesture="False" />
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource SelectNextPageHotkey}"
-                                Icon="&#xf0ae;"
-                                Type="Inside">
-                                <flowlauncher:HotkeyControl
-                                    DefaultHotkey=""
-                                    Hotkey="{Binding Settings.SelectNextPageHotkey}"
-                                    ValidateKeyGesture="False" />
-                            </cc:Card>
-
-                            <cc:Card
-                                Title="{DynamicResource QuickWidthHotkey}"
-                                Icon="&#xe7ea;"
-                                Type="Inside">
-                                <StackPanel Orientation="Horizontal">
-                                    <cc:HotkeyDisplay Keys="Ctrl+[" />
-                                    <cc:HotkeyDisplay Margin="4,0,0,0" Keys="Ctrl+]" />
-                                </StackPanel>
-                            </cc:Card>
-                            <cc:Card
-                                Title="{DynamicResource QuickHeightHotkey}"
-                                Icon="&#xe7eb;"
-                                Type="Inside">
-                                <StackPanel Orientation="Horizontal">
-                                    <cc:HotkeyDisplay Keys="Ctrl+Plus" />
-                                    <cc:HotkeyDisplay Margin="4,0,0,0" Keys="Ctrl+Minus" />
-                                </StackPanel>
-                            </cc:Card>
-                        </StackPanel>
-                    </cc:ExCard>
-
-
-                    <cc:ExCard
-                        Title="{DynamicResource autoCompleteHotkey}"
-                        Margin="0,14,0,0"
-                        Icon="&#xe893;"
-                        Sub="{DynamicResource autoCompleteHotkeyToolTip}">
-                        <cc:ExCard.SideContent>
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey="Ctrl+Tab"
-                                Hotkey="{Binding Settings.AutoCompleteHotkey}"
-                                ValidateKeyGesture="False" />
-                        </cc:ExCard.SideContent>
-                        <cc:Card
-                            Title="{DynamicResource autoCompleteHotkey}"
-                            Sub="{DynamicResource AdditionalHotkeyToolTip}"
-                            Type="InsideFit">
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey=""
-                                Hotkey="{Binding Settings.AutoCompleteHotkey2}"
-                                ValidateKeyGesture="False" />
-                        </cc:Card>
-                    </cc:ExCard>
-
-                    <cc:ExCard
-                        Title="{DynamicResource SelectPrevItemHotkey}"
-                        Margin="0,4,0,0"
-                        Icon="&#xe74a;">
-                        <cc:ExCard.SideContent>
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey="Shift+Tab"
-                                Hotkey="{Binding Settings.SelectPrevItemHotkey}"
-                                ValidateKeyGesture="False" />
-                        </cc:ExCard.SideContent>
-                        <cc:Card
-                            Title="{DynamicResource SelectPrevItemHotkey}"
-                            Sub="{DynamicResource AdditionalHotkeyToolTip}"
-                            Type="InsideFit">
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey=""
-                                Hotkey="{Binding Settings.SelectPrevItemHotkey2}"
-                                ValidateKeyGesture="False" />
-                        </cc:Card>
-                    </cc:ExCard>
-
-                    <cc:ExCard
-                        Title="{DynamicResource SelectNextItemHotkey}"
-                        Margin="0,4,0,0"
-                        Icon="&#xe74b;">
-                        <cc:ExCard.SideContent>
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey="Tab"
-                                Hotkey="{Binding Settings.SelectNextItemHotkey}"
-                                ValidateKeyGesture="False" />
-                        </cc:ExCard.SideContent>
-                        <cc:Card
-                            Title="{DynamicResource SelectNextItemHotkey}"
-                            Sub="{DynamicResource AdditionalHotkeyToolTip}"
-                            Type="InsideFit">
-                            <flowlauncher:HotkeyControl
-                                DefaultHotkey=""
-                                Hotkey="{Binding Settings.SelectNextItemHotkey2}"
-                                ValidateKeyGesture="False" />
-                        </cc:Card>
-                    </cc:ExCard>
-
-                    <cc:ExCard
-                        Title="{DynamicResource customQueryHotkey}"
-                        Margin="0,20,0,0"
-                        Icon="&#xf26c;">
-                        <StackPanel Margin="0,0,0,0">
-                            <Separator
-                                Width="Auto"
-                                Margin="0"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <StackPanel Margin="18,18,18,0">
-                                <ListView
-                                    Grid.Row="5"
-                                    MinHeight="160"
-                                    Margin="0,0,0,0"
-                                    Background="{DynamicResource Color02B}"
-                                    BorderBrush="DarkGray"
-                                    BorderThickness="1"
-                                    ItemsSource="{Binding Settings.CustomPluginHotkeys}"
-                                    SelectedItem="{Binding SelectedCustomPluginHotkey}"
-                                    Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
-                                    <ListView.View>
-                                        <GridView>
-                                            <GridViewColumn Width="180" Header="{DynamicResource hotkey}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate DataType="userSettings:CustomPluginHotkey">
-                                                        <TextBlock Text="{Binding Hotkey}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                            <GridViewColumn Width="430" Header="{DynamicResource customQuery}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate DataType="userSettings:CustomPluginHotkey">
-                                                        <TextBlock Text="{Binding ActionKeyword}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                        </GridView>
-                                    </ListView.View>
-                                </ListView>
-                                <StackPanel
-                                    Grid.Row="6"
-                                    Margin="0"
-                                    HorizontalAlignment="Right"
-                                    VerticalAlignment="Top"
-                                    Orientation="Horizontal">
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10"
-                                        Content="{DynamicResource delete}" />
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10"
-                                        Content="{DynamicResource edit}" />
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10,10,0,10"
-                                        Content="{DynamicResource add}" />
-                                </StackPanel>
-                            </StackPanel>
-                        </StackPanel>
-                    </cc:ExCard>
-
-                    <cc:ExCard
-                        Title="{DynamicResource customQueryShortcut}"
-                        Margin="0,4,0,0"
-                        Icon="&#xf26b;">
-                        <StackPanel>
-                            <Separator
-                                Width="Auto"
-                                Margin="0"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <StackPanel Margin="18,12,18,0">
-                                <ListView
-                                    Grid.Row="8"
-                                    MinHeight="160"
-                                    Margin="0,6,0,0"
-                                    Background="{DynamicResource Color02B}"
-                                    BorderBrush="DarkGray"
-                                    BorderThickness="1"
-                                    ItemsSource="{Binding CustomShortcuts}"
-                                    SelectedItem="{Binding SelectedCustomShortcut}"
-                                    Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
-                                    <ListView.View>
-                                        <GridView>
-                                            <GridViewColumn Width="180" Header="{DynamicResource customShortcut}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate>
-                                                        <TextBlock Text="{Binding Key}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                            <GridViewColumn Width="430" Header="{DynamicResource customShortcutExpansion}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate>
-                                                        <TextBlock Text="{Binding Value}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                        </GridView>
-                                    </ListView.View>
-                                </ListView>
-                                <StackPanel
-                                    Grid.Row="9"
-                                    Margin="0"
-                                    HorizontalAlignment="Right"
-                                    VerticalAlignment="Top"
-                                    Orientation="Horizontal">
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10"
-                                        Content="{DynamicResource delete}" />
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10"
-                                        Content="{DynamicResource edit}" />
-                                    <Button
-                                        MinWidth="100"
-                                        Margin="10,10,0,10"
-                                        Content="{DynamicResource add}" />
-                                </StackPanel>
-                            </StackPanel>
-                        </StackPanel>
-                    </cc:ExCard>
-
-                    <cc:ExCard
-                        Title="{DynamicResource builtinShortcuts}"
-                        Margin="0,4,0,14"
-                        Icon="&#xf158;">
-                        <StackPanel>
-                            <Separator
-                                Width="Auto"
-                                Margin="0"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <StackPanel Margin="16,8,16,0">
-                                <ListView
-                                    Grid.Row="11"
-                                    MinHeight="160"
-                                    Margin="0,6,0,16"
-                                    Background="{DynamicResource Color02B}"
-                                    BorderBrush="DarkGray"
-                                    BorderThickness="1"
-                                    ItemsSource="{Binding BuiltinShortcuts}"
-                                    Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
-                                    <ListView.View>
-                                        <GridView>
-                                            <GridViewColumn Width="180" Header="{DynamicResource customShortcut}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate>
-                                                        <TextBlock Text="{Binding Key}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                            <GridViewColumn Width="430" Header="{DynamicResource builtinShortcutDescription}">
-                                                <GridViewColumn.CellTemplate>
-                                                    <DataTemplate>
-                                                        <TextBlock Text="{Binding Description, Converter={StaticResource TranslationConverter}}" />
-                                                    </DataTemplate>
-                                                </GridViewColumn.CellTemplate>
-                                            </GridViewColumn>
-                                        </GridView>
-                                    </ListView.View>
-                                </ListView>
-                            </StackPanel>
-                        </StackPanel>
-                    </cc:ExCard>
                 </StackPanel>
+            </cc:ExCard>
+
+            <cc:ExCard
+                Title="{DynamicResource customQueryShortcut}"
+                Margin="0,4,0,0"
+                Icon="&#xf26b;">
+                <StackPanel>
+                    <Separator
+                        Width="Auto"
+                        Margin="0"
+                        BorderThickness="1"
+                        Style="{StaticResource SettingSeparatorStyle}" />
+                    <StackPanel Margin="18,12,18,0">
+                        <ListView
+                            MinHeight="160"
+                            Margin="0,6,0,0"
+                            Background="{DynamicResource Color02B}"
+                            BorderBrush="DarkGray"
+                            BorderThickness="1"
+                            ItemsSource="{Binding Settings.CustomShortcuts}"
+                            SelectedItem="{Binding SelectedCustomShortcut}"
+                            Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
+                            <ListView.View>
+                                <GridView>
+                                    <GridViewColumn Width="180" Header="{DynamicResource customShortcut}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="{x:Type userSettings:CustomShortcutModel}">
+                                                <TextBlock Text="{Binding Key}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                    <GridViewColumn Width="430" Header="{DynamicResource customShortcutExpansion}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="{x:Type userSettings:CustomShortcutModel}">
+                                                <TextBlock Text="{Binding Value}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                </GridView>
+                            </ListView.View>
+                        </ListView>
+                        <StackPanel
+                            Margin="0"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top"
+                            Orientation="Horizontal">
+                            <Button
+                                MinWidth="100"
+                                Margin="10"
+                                Command="{Binding CustomShortcutDeleteCommand}"
+                                Content="{DynamicResource delete}" />
+                            <Button
+                                MinWidth="100"
+                                Margin="10"
+                                Command="{Binding CustomShortcutEditCommand}"
+                                Content="{DynamicResource edit}" />
+                            <Button
+                                MinWidth="100"
+                                Margin="10,10,0,10"
+                                Command="{Binding CustomShortcutAddCommand}"
+                                Content="{DynamicResource add}" />
+                        </StackPanel>
+                    </StackPanel>
+                </StackPanel>
+            </cc:ExCard>
+
+            <cc:ExCard
+                Title="{DynamicResource builtinShortcuts}"
+                Margin="0,4,0,14"
+                Icon="&#xf158;">
+                <StackPanel>
+                    <Separator
+                        Width="Auto"
+                        Margin="0"
+                        BorderThickness="1"
+                        Style="{StaticResource SettingSeparatorStyle}" />
+                    <StackPanel Margin="16,8,16,0">
+                        <ListView
+                            MinHeight="160"
+                            Margin="0,6,0,16"
+                            Background="{DynamicResource Color02B}"
+                            BorderBrush="DarkGray"
+                            BorderThickness="1"
+                            ItemsSource="{Binding Settings.BuiltinShortcuts}"
+                            Style="{StaticResource {x:Static GridView.GridViewStyleKey}}">
+                            <ListView.View>
+                                <GridView>
+                                    <GridViewColumn Width="180" Header="{DynamicResource customShortcut}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="{x:Type userSettings:BuiltinShortcutModel}">
+                                                <TextBlock Text="{Binding Key}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                    <GridViewColumn Width="430" Header="{DynamicResource builtinShortcutDescription}">
+                                        <GridViewColumn.CellTemplate>
+                                            <DataTemplate DataType="{x:Type userSettings:BuiltinShortcutModel}">
+                                                <TextBlock
+                                                    Text="{Binding Description, Converter={StaticResource TranslationConverter}}" />
+                                            </DataTemplate>
+                                        </GridViewColumn.CellTemplate>
+                                    </GridViewColumn>
+                                </GridView>
+                            </ListView.View>
+                        </ListView>
+                    </StackPanel>
+                </StackPanel>
+            </cc:ExCard>
 
 
-
-            </StackPanel>
-        </Border>
+        </StackPanel>
     </ScrollViewer>
-</Page>
+</ui:Page>
diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml.cs b/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml.cs
index 1093b3f4a..061eabf51 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml.cs
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneHotkey.xaml.cs
@@ -1,28 +1,23 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Data;
-using System.Windows.Documents;
-using System.Windows.Input;
-using System.Windows.Media;
-using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
-using System.Windows.Shapes;
+using Flow.Launcher.SettingPages.ViewModels;
 
-namespace Flow.Launcher.SettingPages.Views
+namespace Flow.Launcher.SettingPages.Views;
+
+public partial class SettingsPaneHotkey
 {
-    /// <summary>
-    /// Hotkey.xaml에 대한 상호 작용 논리
-    /// </summary>
-    public partial class SettingsPaneHotkey : Page
+    private SettingsPaneHotkeyViewModel _viewModel = null!;
+
+    protected override void OnNavigatedTo(NavigationEventArgs e)
     {
-        public SettingsPaneHotkey()
+        if (!IsInitialized)
         {
+            if (e.ExtraData is not SettingWindow.PaneData { Settings: { } settings })
+                throw new ArgumentException("Settings are required for SettingsPaneHotkey.");
+            _viewModel = new SettingsPaneHotkeyViewModel(settings);
+            DataContext = _viewModel;
             InitializeComponent();
         }
+        base.OnNavigatedTo(e);
     }
 }
diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
index 61b0b199b..7b8f44162 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
@@ -14,6 +14,14 @@
     d:DesignWidth="800"
     Style="{DynamicResource SettingPageBasic}"
     mc:Ignorable="d">
+    <ui:Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Resources/SettingWindowStyle.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <CollectionViewSource x:Key="SortedFonts" Source="{Binding Source={x:Static Fonts.SystemFontFamilies}}" />
+        </ResourceDictionary>
+    </ui:Page.Resources>
     <ScrollViewer
         Margin="0,0,0,0"
         Padding="6,0,24,0"