reorganize and redesign settings

src/renderer/features/settings/components/window/cache-settngs.tsx

@@ -94,5 +94,10 @@ export const CacheSettings = () => {
         },
     ];
 
-    return <SettingsSection divider={false} options={options} />;
+    return (
+        <SettingsSection
+            options={options}
+            title={t('page.setting.cache', { postProcess: 'sentenceCase' })}
+        />
+    );
 };

src/renderer/features/settings/components/window/discord-settings.tsx

@@ -268,5 +268,10 @@ export const DiscordSettings = () => {
         },
     ];
 
-    return <SettingsSection options={discordOptions} />;
+    return (
+        <SettingsSection
+            options={discordOptions}
+            title={t('page.setting.discord', { postProcess: 'sentenceCase' })}
+        />
+    );
 };

src/renderer/features/settings/components/window/update-settings.tsx

@@ -85,5 +85,10 @@ export const UpdateSettings = () => {
         },
     ];
 
-    return <SettingsSection divider={true} options={updateOptions} />;
+    return (
+        <SettingsSection
+            options={updateOptions}
+            title={t('page.setting.updates', { postProcess: 'sentenceCase' })}
+        />
+    );
 };

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

@@ -233,5 +233,10 @@ export const WindowSettings = () => {
         },
     ];
 
-    return <SettingsSection options={windowOptions} />;
+    return (
+        <SettingsSection
+            options={windowOptions}
+            title={t('page.setting.application', { postProcess: 'sentenceCase' })}
+        />
+    );
 };

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

@@ -1,22 +1,29 @@
 import isElectron from 'is-electron';
+import { Fragment } from 'react/jsx-runtime';
 
 import { DiscordSettings } from '/@/renderer/features/settings/components/window/discord-settings';
 import { PasswordSettings } from '/@/renderer/features/settings/components/window/password-settings';
 import { WindowSettings } from '/@/renderer/features/settings/components/window/window-settings';
+import { Divider } from '/@/shared/components/divider/divider';
 import { Stack } from '/@/shared/components/stack/stack';
 
 const utils = isElectron() ? window.api.utils : null;
 
+const sections = [
+    { component: WindowSettings, key: 'window' },
+    { component: DiscordSettings, key: 'discord' },
+    { component: PasswordSettings, hidden: !utils?.isLinux(), key: 'password' },
+];
+
 export const WindowTab = () => {
     return (
         <Stack gap="md">
-            <WindowSettings />
-            <DiscordSettings />
-            {utils?.isLinux() && (
-                <>
-                    <PasswordSettings />
-                </>
-            )}
+            {sections.map(({ component: Section, hidden, key }, index) => (
+                <Fragment key={key}>
+                    {!hidden && <Section />}
+                    {index < sections.length - 1 && <Divider />}
+                </Fragment>
+            ))}
         </Stack>
     );
 };