Refactor hotkey setting UI (#506)

* refactor hotkeys setting

* update UI

* refactor

* fix toast

enjoy/src/renderer/context/hotkeys-settings-provider.tsx

@@ -47,11 +47,11 @@ const defaultKeyMap = {
   OpenPreferences: `${ControlOrCommand}+Comma`,
   // player
   PlayOrPause: "Space",
-  StartOrStopRecording: "r",
-  PlayOrPauseRecording: `${ControlOrCommand}+r`,
-  PlayPreviousSegment: "p",
-  PlayNextSegment: "n",
-  Compare: "c",
+  StartOrStopRecording: "R",
+  PlayOrPauseRecording: `${ControlOrCommand}+R`,
+  PlayPreviousSegment: "P",
+  PlayNextSegment: "N",
+  Compare: "C",
   // dev tools
   OpenDevTools: `${ControlOrCommand}+Shift+I`,
 };
@@ -76,6 +76,7 @@ type HotkeysSettingsProviderState = {
   currentHotkeys: Record<string, string>;
   recordingHotkeys?: any;
   enabled: boolean;
+  isRecording: boolean;
   startRecordingHotkeys?: () => void;
   stopRecordingHotkeys?: () => void;
   resetRecordingHotkeys?: () => void;
@@ -85,6 +86,7 @@ type HotkeysSettingsProviderState = {
 const initialState: HotkeysSettingsProviderState = {
   currentHotkeys: {},
   enabled: true,
+  isRecording: false,
 };
 
 export const HotKeysSettingsProviderContext = createContext<
@@ -215,6 +217,7 @@ export const HotKeysSettingsProvider = ({
         currentHotkeys,
         recordingHotkeys: keys,
         enabled: !isRecording,
+        isRecording,
         startRecordingHotkeys,
         stopRecordingHotkeys,
         resetRecordingHotkeys: resetKeys,