refactor: setting page

src/components/setting-item.tsx

@@ -1,8 +0,0 @@
-import { ListItem, styled } from "@mui/material";
-
-const SettingItem = styled(ListItem)(() => ({
-  paddingTop: 5,
-  paddingBottom: 5,
-}));
-
-export default SettingItem;

src/components/setting/setting-clash.tsx

@@ -1,18 +1,16 @@
 import useSWR, { useSWRConfig } from "swr";
 import {
-  List,
   ListItemText,
-  ListSubheader,
   TextField,
   Switch,
   Select,
   MenuItem,
 } from "@mui/material";
-import { getClashConfig, updateConfigs } from "../services/api";
+import { getClashConfig, updateConfigs } from "../../services/api";
-import { patchClashConfig } from "../services/cmds";
+import { SettingList, SettingItem } from "./setting";
-import { ApiType } from "../services/types";
+import { patchClashConfig } from "../../services/cmds";
-import GuardState from "./guard-state";
+import { ApiType } from "../../services/types";
-import SettingItem from "./setting-item";
+import GuardState from "../guard-state";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -30,22 +28,16 @@ const SettingClash = ({ onError }: Props) => {
   } = clashConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
-
   const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
     mutate("getClashConfig", { ...clashConfig, ...patch }, false);
   };
-
   const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
     await updateConfigs(patch);
     await patchClashConfig(patch);
   };
 
   return (
-    <List>
+    <SettingList title="Clash Setting">
-      <ListSubheader sx={{ background: "transparent" }}>
-        Clash Setting
-      </ListSubheader>
-
       <SettingItem>
         <ListItemText primary="Allow Lan" />
         <GuardState
@@ -102,7 +94,7 @@ const SettingClash = ({ onError }: Props) => {
           disabled
         />
       </SettingItem>
-    </List>
+    </SettingList>
   );
 };
 

src/components/setting/setting-verge.tsx

@@ -1,19 +1,12 @@
 import useSWR, { useSWRConfig } from "swr";
-import {
+import { Box, ListItemText, Switch, Typography } from "@mui/material";
-  Box,
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
-  List,
+import { SettingList, SettingItem } from "./setting";
-  ListItemText,
+import { CmdType } from "../../services/types";
-  ListSubheader,
+import { version } from "../../../package.json";
-  Switch,
+import GuardState from "../guard-state";
-  Typography,
+import PaletteSwitch from "../palette-switch";
-} from "@mui/material";
+import SysproxyTooltip from "../sysproxy-tooltip";
-import { getVergeConfig, patchVergeConfig } from "../services/cmds";
-import { CmdType } from "../services/types";
-import { version } from "../../package.json";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
-import PaletteSwitch from "./palette-switch";
-import SysproxyTooltip from "./sysproxy-tooltip";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -36,11 +29,7 @@ const SettingVerge = ({ onError }: Props) => {
   };
 
   return (
-    <List>
+    <SettingList title="Common Setting">
-      <ListSubheader sx={{ background: "transparent" }}>
-        Common Setting
-      </ListSubheader>
-
       <SettingItem>
         <ListItemText primary="Theme Mode" />
         <GuardState
@@ -110,7 +99,7 @@ const SettingVerge = ({ onError }: Props) => {
         <ListItemText primary="Version" />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>
       </SettingItem>
-    </List>
+    </SettingList>
   );
 };
 

src/components/setting/setting.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { List, ListItem, ListSubheader, styled } from "@mui/material";
+
+export const SettingItem = styled(ListItem)(() => ({
+  paddingTop: 5,
+  paddingBottom: 5,
+}));
+
+export const SettingList: React.FC<{
+  title: string;
+}> = (props) => (
+  <List>
+    <ListSubheader sx={{ background: "transparent" }} disableSticky>
+      {props.title}
+    </ListSubheader>
+
+    {props.children}
+  </List>
+);

src/pages/setting.tsx

@@ -1,7 +1,7 @@
 import { Paper } from "@mui/material";
 import BasePage from "../components/base-page";
-import SettingVerge from "../components/setting-verge";
+import SettingVerge from "../components/setting/setting-verge";
-import SettingClash from "../components/setting-clash";
+import SettingClash from "../components/setting/setting-clash";
 
 const SettingPage = () => {
   return (