refactor: setting page

src/components/setting/setting-clash.tsx

@@ -0,0 +1,101 @@
+import useSWR, { useSWRConfig } from "swr";
+import {
+  ListItemText,
+  TextField,
+  Switch,
+  Select,
+  MenuItem,
+} from "@mui/material";
+import { getClashConfig, updateConfigs } from "../../services/api";
+import { SettingList, SettingItem } from "./setting";
+import { patchClashConfig } from "../../services/cmds";
+import { ApiType } from "../../services/types";
+import GuardState from "../guard-state";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingClash = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
+
+  const {
+    ipv6 = false,
+    "allow-lan": allowLan = false,
+    "log-level": logLevel = "silent",
+    "mixed-port": mixedPort = 7890,
+  } = 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 (
+    <SettingList title="Clash Setting">
+      <SettingItem>
+        <ListItemText primary="Allow Lan" />
+        <GuardState
+          value={allowLan}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ "allow-lan": e })}
+          onGuard={(e) => onUpdateData({ "allow-lan": e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="IPv6" />
+        <GuardState
+          value={ipv6}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ ipv6: e })}
+          onGuard={(e) => onUpdateData({ ipv6: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Log Level" />
+        <GuardState
+          value={logLevel}
+          onCatch={onError}
+          onFormat={(e: any) => e.target.value}
+          onChange={(e) => onChangeData({ "log-level": e })}
+          onGuard={(e) => onUpdateData({ "log-level": e })}
+        >
+          <Select size="small" sx={{ width: 120 }}>
+            <MenuItem value="debug">Debug</MenuItem>
+            <MenuItem value="info">Info</MenuItem>
+            <MenuItem value="warning">Warning</MenuItem>
+            <MenuItem value="error">Error</MenuItem>
+            <MenuItem value="silent">Silent</MenuItem>
+          </Select>
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Mixed Port" />
+        <TextField
+          size="small"
+          value={mixedPort!}
+          sx={{ width: 120 }}
+          disabled
+        />
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingClash;

src/components/setting/setting-verge.tsx

@@ -0,0 +1,106 @@
+import useSWR, { useSWRConfig } from "swr";
+import { Box, 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;
+}
+
+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 onSwitchFormat = (_e: any, value: boolean) => value;
+  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
+    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+  };
+
+  return (
+    <SettingList title="Common Setting">
+      <SettingItem>
+        <ListItemText primary="Theme Mode" />
+        <GuardState
+          value={mode === "dark"}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
+          onGuard={(c) =>
+            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+          }
+        >
+          <PaletteSwitch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Theme Blur" />
+        <GuardState
+          value={blur}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_blur: e })}
+          onGuard={(e) => patchVergeConfig({ theme_blur: e })}
+        >
+          <Switch edge="end" />
+        </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>
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingVerge;

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