feat: adjust setting typography

src/components/setting/setting-system.tsx

+import useSWR, { useSWRConfig } from "swr";
+import { Box, ListItemText, Switch } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import GuardState from "./guard-state";
+import SysproxyTooltip from "./sysproxy-tooltip";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingSystem = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const {
+    enable_auto_launch: startup = false,
+    enable_system_proxy: proxy = false,
+  } = vergeConfig ?? {};
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
+    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+  };
+
+  return (
+    <SettingList title="System Setting">
+      <SettingItem>
+        <ListItemText primary="Auto Launch" />
+        <GuardState
+          value={startup}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_auto_launch: e })}
+          onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText
+          primary={
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              System Proxy
+              <SysproxyTooltip />
+            </Box>
+          }
+        />
+        <GuardState
+          value={proxy}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_system_proxy: e })}
+          onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingSystem;

src/components/setting/setting-verge.tsx

 import useSWR, { useSWRConfig } from "swr";
-import { Box, ListItemText, Switch, Typography } from "@mui/material";
+import { ListItemText, Switch, Typography } from "@mui/material";
 import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
 import GuardState from "./guard-state";
 import PaletteSwitch from "./palette-switch";
-import SysproxyTooltip from "./sysproxy-tooltip";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -16,12 +15,8 @@ const SettingVerge = ({ onError }: Props) => {
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
-  const {
-    theme_mode: mode = "light",
-    theme_blur: blur = false,
-    enable_auto_launch: startup = false,
-    enable_system_proxy: proxy = false,
-  } = vergeConfig ?? {};
+  const { theme_mode: mode = "light", theme_blur: blur = false } =
+    vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
@@ -29,7 +24,7 @@ const SettingVerge = ({ onError }: Props) => {
   };
 
   return (
-    <SettingList title="Common Setting">
+    <SettingList title="Verge Setting">
       <SettingItem>
         <ListItemText primary="Theme Mode" />
         <GuardState
@@ -60,41 +55,6 @@ const SettingVerge = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
-      <SettingItem>
-        <ListItemText primary="Auto Launch" />
-        <GuardState
-          value={startup}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_auto_launch: e })}
-          onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
-        >
-          <Switch edge="end" />
-        </GuardState>
-      </SettingItem>
-
-      <SettingItem>
-        <ListItemText
-          primary={
-            <Box sx={{ display: "flex", alignItems: "center" }}>
-              System Proxy
-              <SysproxyTooltip />
-            </Box>
-          }
-        />
-        <GuardState
-          value={proxy}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_system_proxy: e })}
-          onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
-        >
-          <Switch edge="end" />
-        </GuardState>
-      </SettingItem>
-
       <SettingItem>
         <ListItemText primary="Version" />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>

src/components/setting/setting.tsx

@@ -6,9 +6,7 @@ export const SettingItem = styled(ListItem)(() => ({
   paddingBottom: 5,
 }));
 
-export const SettingList: React.FC<{
-  title: string;
-}> = (props) => (
+export const SettingList: React.FC<{ title: string }> = (props) => (
   <List>
     <ListSubheader sx={{ background: "transparent" }} disableSticky>
       {props.title}

src/pages/settings.tsx

@@ -2,16 +2,26 @@ import { Paper } from "@mui/material";
 import BasePage from "../components/base-page";
 import SettingVerge from "../components/setting/setting-verge";
 import SettingClash from "../components/setting/setting-clash";
+import SettingSystem from "../components/setting/setting-system";
+import Notice from "../components/notice";
 
 const SettingPage = () => {
+  const onError = (error: any) => {
+    error && Notice.error(error.toString());
+  };
+
   return (
     <BasePage title="Settings">
-      <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
-        <SettingVerge />
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+        <SettingClash onError={onError} />
       </Paper>
 
-      <Paper sx={{ borderRadius: 1, boxShadow: 2, mt: 3 }}>
-        <SettingClash />
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+        <SettingSystem onError={onError} />
+      </Paper>
+
+      <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
+        <SettingVerge onError={onError} />
       </Paper>
     </BasePage>
   );