From 7fc9631434d6583d8324ce87f53c3e2152dd06f0 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Wed, 12 Jan 2022 02:54:50 +0800
Subject: [PATCH] feat: show system proxy info

---
 src/components/setting-verge.tsx    | 11 +++++-
 src/components/sysproxy-tooltip.tsx | 53 +++++++++++++++++++++++++++++
 src/services/cmds.ts                |  4 +++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/sysproxy-tooltip.tsx

diff --git a/src/components/setting-verge.tsx b/src/components/setting-verge.tsx
index 5b27553..496b99b 100644
--- a/src/components/setting-verge.tsx
+++ b/src/components/setting-verge.tsx
@@ -1,5 +1,6 @@
 import useSWR, { useSWRConfig } from "swr";
 import {
+  Box,
   List,
   ListItemText,
   ListSubheader,
@@ -12,6 +13,7 @@ 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;
@@ -84,7 +86,14 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="System Proxy" />
+        <ListItemText
+          primary={
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              System Proxy
+              <SysproxyTooltip />
+            </Box>
+          }
+        />
         <GuardState
           value={proxy}
           valueProps="checked"
diff --git a/src/components/sysproxy-tooltip.tsx b/src/components/sysproxy-tooltip.tsx
new file mode 100644
index 0000000..8654a3d
--- /dev/null
+++ b/src/components/sysproxy-tooltip.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { InfoRounded } from "@mui/icons-material";
+import { ClickAwayListener, Tooltip } from "@mui/material";
+import { getSystemProxy } from "../services/cmds";
+
+const SysproxyTooltip = () => {
+  const [open, setOpen] = useState(false);
+  const [info, setInfo] = useState<any>({});
+
+  const onShow = async () => {
+    const data = await getSystemProxy();
+    console.log(data);
+    setInfo(data ?? {});
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => setOpen(false), 2000);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  // todo: add error info
+  const showTitle = (
+    <div>
+      <div>Enable: {(!!info.enable).toString()}</div>
+      <div>Server: {info.server}</div>
+      <div>Bypass: {info.bypass}</div>
+    </div>
+  );
+
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <Tooltip
+        PopperProps={{
+          disablePortal: true,
+        }}
+        onClose={() => setOpen(false)}
+        open={open}
+        disableFocusListener
+        disableHoverListener
+        disableTouchListener
+        placement="top"
+        title={showTitle}
+        arrow
+      >
+        <InfoRounded fontSize="small" onClick={onShow} />
+      </Tooltip>
+    </ClickAwayListener>
+  );
+};
+
+export default SysproxyTooltip;
diff --git a/src/services/cmds.ts b/src/services/cmds.ts
index 1fc1608..9508d1a 100644
--- a/src/services/cmds.ts
+++ b/src/services/cmds.ts
@@ -63,3 +63,7 @@ export async function getVergeConfig() {
 export async function patchVergeConfig(payload: CmdType.VergeConfig) {
   return invoke<void>("patch_verge_config", { payload });
 }
+
+export async function getSystemProxy() {
+  return invoke<any>("get_sys_proxy");
+}