Add reset to default for settings

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

@@ -1,13 +1,45 @@
+import { Flex, Group } from '@mantine/core';
+import { closeAllModals, openModal } from '@mantine/modals';
 import { RiSettings2Fill } from 'react-icons/ri';
-import { PageHeader } from '/@/renderer/components';
+import { Button, ConfirmModal, PageHeader } from '/@/renderer/components';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useSettingsStoreActions } from '../../../store/settings.store';
 
 export const SettingsHeader = () => {
+  const { reset } = useSettingsStoreActions();
+
+  const handleResetToDefault = () => {
+    reset();
+    closeAllModals();
+  };
+
+  const openResetConfirmModal = () => {
+    openModal({
+      children: <ConfirmModal onConfirm={handleResetToDefault}>Are you sure?</ConfirmModal>,
+      title: 'Reset settings to default',
+    });
+  };
+
   return (
     <PageHeader>
       <LibraryHeaderBar>
+        <Flex
+          align="center"
+          justify="space-between"
+          w="100%"
+        >
+          <Group noWrap>
             <RiSettings2Fill size="2rem" />
             <LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title>
+          </Group>
+          <Button
+            compact
+            variant="default"
+            onClick={openResetConfirmModal}
+          >
+            Reset to default
+          </Button>
+        </Flex>
       </LibraryHeaderBar>
     </PageHeader>
   );

src/renderer/store/settings.store.ts

@@ -1,5 +1,6 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import isElectron from 'is-electron';
 import merge from 'lodash/merge';
 import create from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
@@ -80,19 +81,12 @@ export interface SettingsState {
 
 export interface SettingsSlice extends SettingsState {
   actions: {
+    reset: () => void;
     setSettings: (data: Partial<SettingsState>) => void;
   };
 }
 
-export const useSettingsStore = create<SettingsSlice>()(
-  persist(
-    devtools(
-      immer((set, get) => ({
-        actions: {
-          setSettings: (data) => {
-            set({ ...get(), ...data });
-          },
-        },
+const initialState: SettingsState = {
   general: {
     followSystemTheme: false,
     fontContent: 'Poppins',
@@ -251,6 +245,31 @@ export const useSettingsStore = create<SettingsSlice>()(
     minimizeToTray: false,
     windowBarStyle: Platform.WEB,
   },
+};
+
+export const useSettingsStore = create<SettingsSlice>()(
+  persist(
+    devtools(
+      immer((set, get) => ({
+        actions: {
+          reset: () => {
+            if (!isElectron()) {
+              set({
+                ...initialState,
+                playback: {
+                  ...initialState.playback,
+                  type: PlaybackType.WEB,
+                },
+              });
+            } else {
+              set(initialState);
+            }
+          },
+          setSettings: (data) => {
+            set({ ...get(), ...data });
+          },
+        },
+        ...initialState,
       })),
       { name: 'store_settings' },
     ),