refactor: extract tooltip icon as component

src/components/base/base-tooltip-icon.tsx

@@ -0,0 +1,24 @@
+import {
+  Tooltip,
+  IconButton,
+  IconButtonProps,
+  SvgIconProps,
+} from "@mui/material";
+import { InfoRounded } from "@mui/icons-material";
+
+interface Props extends IconButtonProps {
+  title?: string;
+  icon?: React.ElementType<SvgIconProps>;
+}
+
+export const TooltipIcon: React.FC<Props> = (props: Props) => {
+  const { title = "", icon: Icon = InfoRounded } = props;
+
+  return (
+    <Tooltip title={title} placement="top">
+      <IconButton color="inherit" size="small" {...props}>
+        <Icon fontSize="inherit" style={{ cursor: "pointer", opacity: 0.75 }} />
+      </IconButton>
+    </Tooltip>
+  );
+};

src/components/setting/mods/sysproxy-viewer.tsx

@@ -20,6 +20,7 @@ import { Edit } from "@mui/icons-material";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { BaseFieldset } from "@/components/base/base-fieldset";
 import getSystem from "@/utils/get-system";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 const DEFAULT_PAC = `function FindProxyForURL(url, host) {
   return "PROXY 127.0.0.1:%mixed-port%; SOCKS5 127.0.0.1:%mixed-port%; DIRECT;";
 }`;
@@ -170,14 +171,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Proxy Guard")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <Tooltip title={t("Proxy Guard Info")}>
-            <IconButton color="inherit" size="small">
-              <InfoRounded
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </Tooltip>
+          <TooltipIcon title={t("Proxy Guard Info")} />
           <Switch
             edge="end"
             disabled={!enabled}

src/components/setting/setting-clash.tsx

@@ -1,16 +1,14 @@
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
 import {
   TextField,
   Select,
   MenuItem,
   Typography,
   IconButton,
-  Tooltip,
 } from "@mui/material";
 
-import { InfoRounded, 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";
@@ -23,6 +21,7 @@ import { invoke_uwp_tool } from "@/services/cmds";
 import getSystem from "@/utils/get-system";
 import { useVerge } from "@/hooks/use-verge";
 import { updateGeoData } from "@/services/api";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 
 const isWIN = getSystem() === "windows";
 
@@ -116,25 +115,19 @@ const SettingClash = ({ onError }: Props) => {
       <SettingItem
         label={t("Port Config")}
         extra={
-          <Tooltip title={t("Random Port")}>
-            <IconButton
-              color={enable_random_port ? "primary" : "inherit"}
-              size="small"
-              onClick={() => {
-                Notice.success(
-                  t("Restart Application to Apply Modifications"),
-                  1000
-                );
-                onChangeVerge({ enable_random_port: !enable_random_port });
-                patchVerge({ enable_random_port: !enable_random_port });
-              }}
-            >
-              <Shuffle
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </Tooltip>
+          <TooltipIcon
+            title={t("Random Port")}
+            color={enable_random_port ? "primary" : "inherit"}
+            icon={Shuffle}
+            onClick={() => {
+              Notice.success(
+                t("Restart Application to Apply Modifications"),
+                1000
+              );
+              onChangeVerge({ enable_random_port: !enable_random_port });
+              patchVerge({ enable_random_port: !enable_random_port });
+            }}
+          />
         }
       >
         <TextField
@@ -160,16 +153,10 @@ const SettingClash = ({ onError }: Props) => {
       <SettingItem
         label={t("Clash Core")}
         extra={
-          <IconButton
-            color="inherit"
-            size="small"
+          <TooltipIcon
+            icon={Settings}
             onClick={() => coreRef.current?.open()}
-          >
-            <Settings
-              fontSize="inherit"
-              style={{ cursor: "pointer", opacity: 0.75 }}
-            />
-          </IconButton>
+          />
         }
       >
         <Typography sx={{ py: "7px", pr: 1 }}>{version}</Typography>
@@ -179,18 +166,7 @@ const SettingClash = ({ onError }: Props) => {
         <SettingItem
           onClick={invoke_uwp_tool}
           label={t("Open UWP tool")}
-          extra={
-            <>
-              <Tooltip title={t("Open UWP tool Info")} placement="top">
-                <IconButton color="inherit" size="small">
-                  <InfoRounded
-                    fontSize="inherit"
-                    style={{ cursor: "pointer", opacity: 0.75 }}
-                  />
-                </IconButton>
-              </Tooltip>
-            </>
-          }
+          extra={<TooltipIcon title={t("Open UWP tool Info")} />}
         />
       )}
 

src/components/setting/setting-system.tsx

@@ -1,8 +1,7 @@
 import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton, Tooltip } from "@mui/material";
-import { PrivacyTipRounded, Settings, InfoRounded } from "@mui/icons-material";
+import { PrivacyTipRounded, Settings } from "@mui/icons-material";
 import { checkService } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
 import { DialogRef, Switch } from "@/components/base";
@@ -11,6 +10,7 @@ import { GuardState } from "./mods/guard-state";
 import { ServiceViewer } from "./mods/service-viewer";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import { TunViewer } from "./mods/tun-viewer";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -54,26 +54,11 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("Tun Mode")}
         extra={
-          <>
-            <Tooltip title={t("Tun Mode Info")} placement="top">
-              <IconButton color="inherit" size="small">
-                <InfoRounded
-                  fontSize="inherit"
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-            <IconButton
-              color="inherit"
-              size="small"
-              onClick={() => tunRef.current?.open()}
-            >
-              <Settings
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </>
+          <TooltipIcon
+            title={t("Tun Mode Info")}
+            icon={Settings}
+            onClick={() => tunRef.current?.open()}
+          />
         }
       >
         <GuardState
@@ -91,16 +76,11 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("Service Mode")}
         extra={
-          <IconButton
-            color="inherit"
-            size="small"
+          <TooltipIcon
+            title={t("Service Mode Info")}
+            icon={PrivacyTipRounded}
             onClick={() => serviceRef.current?.open()}
-          >
-            <PrivacyTipRounded
-              fontSize="inherit"
-              style={{ cursor: "pointer", opacity: 0.75 }}
-            />
-          </IconButton>
+          />
         }
       >
         <GuardState
@@ -124,24 +104,11 @@ const SettingSystem = ({ onError }: Props) => {
         label={t("System Proxy")}
         extra={
           <>
-            <Tooltip title={t("System Proxy Info")} placement="top">
-              <IconButton color="inherit" size="small">
-                <InfoRounded
-                  fontSize="inherit"
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-            <IconButton
-              color="inherit"
-              size="small"
+            <TooltipIcon
+              title={t("System Proxy Info")}
+              icon={Settings}
               onClick={() => sysproxyRef.current?.open()}
-            >
-              <Settings
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
+            />
           </>
         }
       >
@@ -172,18 +139,7 @@ const SettingSystem = ({ onError }: Props) => {
 
       <SettingItem
         label={t("Silent Start")}
-        extra={
-          <>
-            <Tooltip title={t("Silent Start Info")} placement="top">
-              <IconButton color="inherit" size="small">
-                <InfoRounded
-                  fontSize="inherit"
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-          </>
-        }
+        extra={<TooltipIcon title={t("Silent Start Info")} />}
       >
         <GuardState
           value={enable_silent_start ?? false}