feat: make `SettingItem` clickable (#1138)

* feat: make `SettingItem` clickable

* clean up

src/components/setting/mods/setting-comp.tsx

@@ -3,32 +3,39 @@ import {
   Box,
   List,
   ListItem,
+  ListItemButton,
   ListItemText,
   ListSubheader,
 } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
 
 interface ItemProps {
   label: ReactNode;
   extra?: ReactNode;
   children?: ReactNode;
   secondary?: ReactNode;
+  onClick?: () => void;
 }
 
 export const SettingItem: React.FC<ItemProps> = (props) => {
-  const { label, extra, children, secondary } = props;
+  const { label, extra, children, secondary, onClick } = props;
+  const clickable = !!onClick;
 
-  const primary = !extra ? (
+  const primary = (
     <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
       <span>{label}</span>
-    </Box>
-  ) : (
-    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
-      <span>{label}</span>
-      {extra}
+      {extra ? extra : null}
     </Box>
   );
 
-  return (
+  return clickable ? (
+    <ListItem disablePadding>
+      <ListItemButton onClick={onClick}>
+        <ListItemText primary={primary} secondary={secondary} />
+        <ChevronRightRounded />
+      </ListItemButton>
+    </ListItem>
+  ) : (
     <ListItem sx={{ pt: "5px", pb: "5px" }}>
       <ListItemText primary={primary} secondary={secondary} />
       {children}

src/components/setting/setting-clash.tsx

@@ -9,7 +9,7 @@ import {
   IconButton,
   Tooltip,
 } from "@mui/material";
-import { ArrowForward, Settings, Shuffle } from "@mui/icons-material";
+import { Settings, Shuffle } from "@mui/icons-material";
 import { DialogRef, Notice, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { GuardState } from "./mods/guard-state";
@@ -120,7 +120,10 @@ const SettingClash = ({ onError }: Props) => {
               color={enable_random_port ? "primary" : "inherit"}
               size="small"
               onClick={() => {
-                Notice.success(t("Restart Application to Apply Modifications"), 1000);
+                Notice.success(
+                  t("Restart Application to Apply Modifications"),
+                  1000
+                );
                 onChangeVerge({ enable_random_port: !enable_random_port });
                 patchVerge({ enable_random_port: !enable_random_port });
               }}
@@ -146,27 +149,12 @@ const SettingClash = ({ onError }: Props) => {
         />
       </SettingItem>
 
-      <SettingItem label={t("External")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => ctrlRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => ctrlRef.current?.open()}
+        label={t("External")}
+      />
 
-      <SettingItem label={t("Web UI")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => webRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={() => webRef.current?.open()} label={t("Web UI")} />
 
       <SettingItem
         label={t("Clash Core")}
@@ -187,28 +175,10 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       {isWIN && (
-        <SettingItem label={t("Open UWP tool")}>
-          <IconButton
-            color="inherit"
-            size="small"
-            sx={{ my: "2px" }}
-            onClick={invoke_uwp_tool}
-          >
-            <ArrowForward />
-          </IconButton>
-        </SettingItem>
+        <SettingItem onClick={invoke_uwp_tool} label={t("Open UWP tool")} />
       )}
 
-      <SettingItem label={t("Update GeoData")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={onUpdateGeo}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={onUpdateGeo} label={t("Update GeoData")} />
     </SettingList>
   );
 };

src/components/setting/setting-verge.tsx

@@ -2,14 +2,7 @@ import { useRef } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { open } from "@tauri-apps/api/dialog";
-import {
-  Button,
-  IconButton,
-  MenuItem,
-  Select,
-  Input,
-  Typography,
-} from "@mui/material";
+import { Button, MenuItem, Select, Input, Typography } from "@mui/material";
 import {
   exitApp,
   openAppDir,
@@ -17,7 +10,6 @@ import {
   openLogsDir,
   openDevTools,
 } from "@/services/cmds";
-import { ArrowForward } from "@mui/icons-material";
 import { checkUpdate } from "@tauri-apps/api/updater";
 import { useVerge } from "@/hooks/use-verge";
 import { version } from "@root/package.json";
@@ -213,128 +205,48 @@ const SettingVerge = ({ onError }: Props) => {
           ></Input>
         </GuardState>
       </SettingItem>
-      <SettingItem label={t("Theme Setting")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => themeRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
 
-      <SettingItem label={t("Layout Setting")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => layoutRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => themeRef.current?.open()}
+        label={t("Theme Setting")}
+      />
 
-      <SettingItem label={t("Miscellaneous")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => miscRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => layoutRef.current?.open()}
+        label={t("Layout Setting")}
+      />
 
-      <SettingItem label={t("Hotkey Setting")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => hotkeyRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => miscRef.current?.open()}
+        label={t("Miscellaneous")}
+      />
 
-      <SettingItem label={t("Runtime Config")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => configRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => hotkeyRef.current?.open()}
+        label={t("Hotkey Setting")}
+      />
 
-      <SettingItem label={t("Open App Dir")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={openAppDir}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem
+        onClick={() => configRef.current?.open()}
+        label={t("Runtime Config")}
+      />
 
-      <SettingItem label={t("Open Core Dir")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={openCoreDir}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={openAppDir} label={t("Open App Dir")} />
 
-      <SettingItem label={t("Open Logs Dir")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={openLogsDir}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={openCoreDir} label={t("Open Core Dir")} />
 
-      <SettingItem label={t("Check for Updates")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={onCheckUpdate}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={openLogsDir} label={t("Open Logs Dir")} />
 
-      <SettingItem label={t("Open Dev Tools")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={openDevTools}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={onCheckUpdate} label={t("Check for Updates")} />
 
-      <SettingItem label={t("Exit")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => {
-            exitApp();
-          }}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
+      <SettingItem onClick={openDevTools} label={t("Open Dev Tools")} />
+
+      <SettingItem
+        onClick={() => {
+          exitApp();
+        }}
+        label={t("Exit")}
+      />
 
       <SettingItem label={t("Verge Version")}>
         <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>