Move settings to route instead of modal

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

@@ -0,0 +1,48 @@
+import { lazy } from 'react';
+import { Box } from '@mantine/core';
+import { Tabs } from '/@/renderer/components';
+import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
+
+const GeneralTab = lazy(() =>
+  import('/@/renderer/features/settings/components/general-tab').then((module) => ({
+    default: module.GeneralTab,
+  })),
+);
+
+const PlaybackTab = lazy(() =>
+  import('/@/renderer/features/settings/components/playback-tab').then((module) => ({
+    default: module.PlaybackTab,
+  })),
+);
+
+export const SettingsContent = () => {
+  const currentTab = useSettingsStore((state) => state.tab);
+  const { setSettings } = useSettingsStoreActions();
+
+  return (
+    <Box
+      h="100%"
+      p="1rem"
+      sx={{ overflow: 'scroll' }}
+    >
+      <Tabs
+        keepMounted={false}
+        orientation="horizontal"
+        value={currentTab}
+        variant="default"
+        onTabChange={(e) => e && setSettings({ tab: e })}
+      >
+        <Tabs.List>
+          <Tabs.Tab value="general">General</Tabs.Tab>
+          <Tabs.Tab value="playback">Playback</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="general">
+          <GeneralTab />
+        </Tabs.Panel>
+        <Tabs.Panel value="playback">
+          <PlaybackTab />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+};