From 0d4d5b5de0e4dcb26ac736b97af8ba702b4a358b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 31 Mar 2023 05:56:32 -0700
Subject: [PATCH] Add reset to default for settings

---
 .../settings/components/settings-header.tsx   |  38 +-
 src/renderer/store/settings.store.ts          | 335 +++++++++---------
 2 files changed, 212 insertions(+), 161 deletions(-)

diff --git a/src/renderer/features/settings/components/settings-header.tsx b/src/renderer/features/settings/components/settings-header.tsx
index 289b2353..57fcaafc 100644
--- a/src/renderer/features/settings/components/settings-header.tsx
+++ b/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>
-        <RiSettings2Fill size="2rem" />
-        <LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title>
+        <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>
   );
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 42520641..02dabda8 100644
--- a/src/renderer/store/settings.store.ts
+++ b/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,177 +81,195 @@ export interface SettingsState {
 
 export interface SettingsSlice extends SettingsState {
   actions: {
+    reset: () => void;
     setSettings: (data: Partial<SettingsState>) => void;
   };
 }
 
+const initialState: SettingsState = {
+  general: {
+    followSystemTheme: false,
+    fontContent: 'Poppins',
+    playButtonBehavior: Play.NOW,
+    showQueueDrawerButton: false,
+    sideQueueType: 'sideDrawerQueue',
+    skipButtons: {
+      enabled: false,
+      skipBackwardSeconds: 5,
+      skipForwardSeconds: 10,
+    },
+    theme: AppTheme.DEFAULT_DARK,
+    themeDark: AppTheme.DEFAULT_DARK,
+    themeLight: AppTheme.DEFAULT_LIGHT,
+    volumeWheelStep: 5,
+  },
+  playback: {
+    audioDeviceId: undefined,
+    crossfadeDuration: 5,
+    crossfadeStyle: CrossfadeStyle.EQUALPOWER,
+    globalMediaHotkeys: false,
+    muted: false,
+    scrobble: {
+      enabled: true,
+      scrobbleAtDuration: 240,
+      scrobbleAtPercentage: 75,
+    },
+
+    style: PlaybackStyle.GAPLESS,
+    type: PlaybackType.LOCAL,
+  },
+  tab: 'general',
+  tables: {
+    fullScreen: {
+      autoFit: true,
+      columns: [
+        {
+          column: TableColumn.TITLE_COMBINED,
+          width: 500,
+        },
+        {
+          column: TableColumn.DURATION,
+          width: 100,
+        },
+        {
+          column: TableColumn.USER_FAVORITE,
+          width: 100,
+        },
+      ],
+      followCurrentSong: true,
+      rowHeight: 60,
+    },
+    nowPlaying: {
+      autoFit: true,
+      columns: [
+        {
+          column: TableColumn.ROW_INDEX,
+          width: 50,
+        },
+        {
+          column: TableColumn.TITLE,
+          width: 500,
+        },
+        {
+          column: TableColumn.DURATION,
+          width: 100,
+        },
+        {
+          column: TableColumn.ALBUM,
+          width: 100,
+        },
+        {
+          column: TableColumn.ALBUM_ARTIST,
+          width: 100,
+        },
+        {
+          column: TableColumn.GENRE,
+          width: 100,
+        },
+        {
+          column: TableColumn.YEAR,
+          width: 100,
+        },
+      ],
+      followCurrentSong: true,
+      rowHeight: 30,
+    },
+    sideDrawerQueue: {
+      autoFit: true,
+      columns: [
+        {
+          column: TableColumn.TITLE_COMBINED,
+          width: 500,
+        },
+        {
+          column: TableColumn.DURATION,
+          width: 100,
+        },
+      ],
+      followCurrentSong: true,
+      rowHeight: 60,
+    },
+    sideQueue: {
+      autoFit: true,
+      columns: [
+        {
+          column: TableColumn.ROW_INDEX,
+          width: 50,
+        },
+        {
+          column: TableColumn.TITLE_COMBINED,
+          width: 500,
+        },
+        {
+          column: TableColumn.DURATION,
+          width: 100,
+        },
+      ],
+      followCurrentSong: true,
+      rowHeight: 60,
+    },
+    songs: {
+      autoFit: true,
+      columns: [
+        {
+          column: TableColumn.ROW_INDEX,
+          width: 50,
+        },
+        {
+          column: TableColumn.TITLE_COMBINED,
+          width: 500,
+        },
+        {
+          column: TableColumn.DURATION,
+          width: 100,
+        },
+        {
+          column: TableColumn.ALBUM,
+          width: 300,
+        },
+        {
+          column: TableColumn.ARTIST,
+          width: 100,
+        },
+        {
+          column: TableColumn.YEAR,
+          width: 100,
+        },
+      ],
+      rowHeight: 60,
+    },
+  },
+  window: {
+    disableAutoUpdate: true,
+    exitToTray: false,
+    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 });
           },
         },
-        general: {
-          followSystemTheme: false,
-          fontContent: 'Poppins',
-          playButtonBehavior: Play.NOW,
-          showQueueDrawerButton: false,
-          sideQueueType: 'sideDrawerQueue',
-          skipButtons: {
-            enabled: false,
-            skipBackwardSeconds: 5,
-            skipForwardSeconds: 10,
-          },
-          theme: AppTheme.DEFAULT_DARK,
-          themeDark: AppTheme.DEFAULT_DARK,
-          themeLight: AppTheme.DEFAULT_LIGHT,
-          volumeWheelStep: 5,
-        },
-        playback: {
-          audioDeviceId: undefined,
-          crossfadeDuration: 5,
-          crossfadeStyle: CrossfadeStyle.EQUALPOWER,
-          globalMediaHotkeys: false,
-          muted: false,
-          scrobble: {
-            enabled: true,
-            scrobbleAtDuration: 240,
-            scrobbleAtPercentage: 75,
-          },
-
-          style: PlaybackStyle.GAPLESS,
-          type: PlaybackType.LOCAL,
-        },
-        tab: 'general',
-        tables: {
-          fullScreen: {
-            autoFit: true,
-            columns: [
-              {
-                column: TableColumn.TITLE_COMBINED,
-                width: 500,
-              },
-              {
-                column: TableColumn.DURATION,
-                width: 100,
-              },
-              {
-                column: TableColumn.USER_FAVORITE,
-                width: 100,
-              },
-            ],
-            followCurrentSong: true,
-            rowHeight: 60,
-          },
-          nowPlaying: {
-            autoFit: true,
-            columns: [
-              {
-                column: TableColumn.ROW_INDEX,
-                width: 50,
-              },
-              {
-                column: TableColumn.TITLE,
-                width: 500,
-              },
-              {
-                column: TableColumn.DURATION,
-                width: 100,
-              },
-              {
-                column: TableColumn.ALBUM,
-                width: 100,
-              },
-              {
-                column: TableColumn.ALBUM_ARTIST,
-                width: 100,
-              },
-              {
-                column: TableColumn.GENRE,
-                width: 100,
-              },
-              {
-                column: TableColumn.YEAR,
-                width: 100,
-              },
-            ],
-            followCurrentSong: true,
-            rowHeight: 30,
-          },
-          sideDrawerQueue: {
-            autoFit: true,
-            columns: [
-              {
-                column: TableColumn.TITLE_COMBINED,
-                width: 500,
-              },
-              {
-                column: TableColumn.DURATION,
-                width: 100,
-              },
-            ],
-            followCurrentSong: true,
-            rowHeight: 60,
-          },
-          sideQueue: {
-            autoFit: true,
-            columns: [
-              {
-                column: TableColumn.ROW_INDEX,
-                width: 50,
-              },
-              {
-                column: TableColumn.TITLE_COMBINED,
-                width: 500,
-              },
-              {
-                column: TableColumn.DURATION,
-                width: 100,
-              },
-            ],
-            followCurrentSong: true,
-            rowHeight: 60,
-          },
-          songs: {
-            autoFit: true,
-            columns: [
-              {
-                column: TableColumn.ROW_INDEX,
-                width: 50,
-              },
-              {
-                column: TableColumn.TITLE_COMBINED,
-                width: 500,
-              },
-              {
-                column: TableColumn.DURATION,
-                width: 100,
-              },
-              {
-                column: TableColumn.ALBUM,
-                width: 300,
-              },
-              {
-                column: TableColumn.ARTIST,
-                width: 100,
-              },
-              {
-                column: TableColumn.YEAR,
-                width: 100,
-              },
-            ],
-            rowHeight: 60,
-          },
-        },
-        window: {
-          disableAutoUpdate: true,
-          exitToTray: false,
-          minimizeToTray: false,
-          windowBarStyle: Platform.WEB,
-        },
+        ...initialState,
       })),
       { name: 'store_settings' },
     ),