Add hotkey settings tab

src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx

@@ -0,0 +1,10 @@
+import { Stack } from '@mantine/core';
+import { WindowHotkeySettings } from './window-hotkey-settings';
+
+export const HotkeysTab = () => {
+  return (
+    <Stack spacing="md">
+      <WindowHotkeySettings />
+    </Stack>
+  );
+};

src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx

@@ -0,0 +1,44 @@
+import isElectron from 'is-electron';
+import { SettingOption, SettingsSection } from '../settings-section';
+import { Switch } from '/@/renderer/components';
+import { useHotkeySettings, useSettingsStoreActions } from '/@/renderer/store';
+
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
+export const WindowHotkeySettings = () => {
+  const settings = useHotkeySettings();
+  const { setSettings } = useSettingsStoreActions();
+
+  const options: SettingOption[] = [
+    {
+      control: (
+        <Switch
+          aria-label="Toggle global media hotkeys"
+          defaultChecked={settings.globalMediaHotkeys}
+          disabled={!isElectron()}
+          onChange={(e) => {
+            setSettings({
+              hotkeys: {
+                ...settings,
+                globalMediaHotkeys: e.currentTarget.checked,
+              },
+            });
+            localSettings.set('global_media_hotkeys', e.currentTarget.checked);
+
+            if (e.currentTarget.checked) {
+              localSettings.enableMediaKeys();
+            } else {
+              localSettings.disableMediaKeys();
+            }
+          }}
+        />
+      ),
+      description:
+        'Enable or disable the usage of your system media hotkeys to control the audio player',
+      isHidden: !isElectron(),
+      title: 'Global media hotkeys',
+    },
+  ];
+
+  return <SettingsSection options={options} />;
+};

src/renderer/features/settings/components/playback/audio-settings.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { SelectItem, Stack } from '@mantine/core';
 import isElectron from 'is-electron';
-import { Select, FileInput, Slider, Switch, Textarea, Text, toast } from '/@/renderer/components';
+import { Select, FileInput, Slider, Textarea, Text, toast } from '/@/renderer/components';
 import {
   SettingsSection,
   SettingOption,
@@ -230,34 +230,6 @@ export const AudioSettings = () => {
       note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
       title: 'Crossfade Style',
     },
-    {
-      control: (
-        <Switch
-          aria-label="Toggle global media hotkeys"
-          defaultChecked={settings.globalMediaHotkeys}
-          disabled={!isElectron()}
-          onChange={(e) => {
-            setSettings({
-              playback: {
-                ...settings,
-                globalMediaHotkeys: e.currentTarget.checked,
-              },
-            });
-            localSettings.set('global_media_hotkeys', e.currentTarget.checked);
-
-            if (e.currentTarget.checked) {
-              localSettings.enableMediaKeys();
-            } else {
-              localSettings.disableMediaKeys();
-            }
-          }}
-        />
-      ),
-      description:
-        'Enable or disable the usage of your system media hotkeys to control the audio player (desktop only)',
-      isHidden: !isElectron(),
-      title: 'Global media hotkeys',
-    },
   ];
 
   return <SettingsSection options={audioOptions} />;

src/renderer/features/settings/components/settings-content.tsx

@@ -22,6 +22,12 @@ const ApplicationTab = lazy(() =>
   })),
 );
 
+const HotkeysTab = lazy(() =>
+  import('/@/renderer/features/settings/components/hotkeys/hotkeys-tab').then((module) => ({
+    default: module.HotkeysTab,
+  })),
+);
+
 const TabContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -45,6 +51,7 @@ export const SettingsContent = () => {
         <Tabs.List>
           <Tabs.Tab value="general">General</Tabs.Tab>
           <Tabs.Tab value="playback">Playback</Tabs.Tab>
+          <Tabs.Tab value="hotkeys">Hotkeys</Tabs.Tab>
           {isElectron() && <Tabs.Tab value="window">Window</Tabs.Tab>}
         </Tabs.List>
         <Tabs.Panel value="general">
@@ -53,6 +60,9 @@ export const SettingsContent = () => {
         <Tabs.Panel value="playback">
           <PlaybackTab />
         </Tabs.Panel>
+        <Tabs.Panel value="hotkeys">
+          <HotkeysTab />
+        </Tabs.Panel>
         {isElectron() && (
           <Tabs.Panel value="window">
             <ApplicationTab />

src/renderer/store/settings.store.ts

@@ -48,11 +48,13 @@ export interface SettingsState {
     themeLight: AppTheme;
     volumeWheelStep: number;
   };
+  hotkeys: {
+    globalMediaHotkeys: boolean;
+  };
   playback: {
     audioDeviceId?: string | null;
     crossfadeDuration: number;
     crossfadeStyle: CrossfadeStyle;
-    globalMediaHotkeys: boolean;
     muted: boolean;
     scrobble: {
       enabled: boolean;
@@ -63,7 +65,7 @@ export interface SettingsState {
     style: PlaybackStyle;
     type: PlaybackType;
   };
-  tab: 'general' | 'playback' | 'window' | string;
+  tab: 'general' | 'playback' | 'window' | 'hotkeys' | string;
   tables: {
     fullScreen: DataTableProps;
     nowPlaying: DataTableProps;
@@ -103,11 +105,13 @@ const initialState: SettingsState = {
     themeLight: AppTheme.DEFAULT_LIGHT,
     volumeWheelStep: 5,
   },
+  hotkeys: {
+    globalMediaHotkeys: false,
+  },
   playback: {
     audioDeviceId: undefined,
     crossfadeDuration: 5,
     crossfadeStyle: CrossfadeStyle.EQUALPOWER,
-    globalMediaHotkeys: false,
     muted: false,
     scrobble: {
       enabled: true,
@@ -298,3 +302,5 @@ export const usePlayButtonBehavior = () =>
   useSettingsStore((state) => state.general.playButtonBehavior, shallow);
 
 export const useWindowSettings = () => useSettingsStore((state) => state.window, shallow);
+
+export const useHotkeySettings = () => useSettingsStore((state) => state.hotkeys, shallow);