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>
-        <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>
   );