feat: profiles add menu and delete button

src/components/profile-item.tsx

@@ -8,13 +8,15 @@ import {
   LinearProgress,
   IconButton,
   keyframes,
+  MenuItem,
+  Menu,
 } from "@mui/material";
 import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../services/types";
+import { updateProfile, deleteProfile } from "../services/cmds";
 import parseTraffic from "../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { updateProfile } from "../services/cmds";
 
 dayjs.extend(relativeTime);
 
@@ -46,6 +48,8 @@ const ProfileItemComp: React.FC<Props> = (props) => {
 
   const { mutate } = useSWRConfig();
   const [loading, setLoading] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
 
   const { name = "Profile", extra, updated = 0 } = itemData;
   const { upload = 0, download = 0, total = 0 } = extra ?? {};
@@ -55,6 +59,7 @@ const ProfileItemComp: React.FC<Props> = (props) => {
   const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
 
   const onUpdate = async () => {
+    setAnchorEl(null);
     if (loading) return;
     setLoading(true);
     try {
@@ -67,37 +72,57 @@ const ProfileItemComp: React.FC<Props> = (props) => {
     }
   };
 
+  const onDelete = async () => {
+    setAnchorEl(null);
+    try {
+      await deleteProfile(index);
+      mutate("getProfiles");
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleContextMenu = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    const { clientX, clientY } = event;
+    setPosition({ top: clientY, left: clientX });
+    setAnchorEl(event.currentTarget);
+    event.preventDefault();
+  };
+
   return (
+    <>
       <Wrapper
         sx={({ palette }) => {
           const { mode, primary, text, grey } = palette;
-        const isDark = mode === "dark";
+          const key = `${mode}-${selected}`;
 
-        if (selected) {
-          const bgcolor = isDark
-            ? alpha(primary.main, 0.35)
-            : alpha(primary.main, 0.15);
+          const bgcolor = {
+            "light-true": alpha(primary.main, 0.15),
+            "light-false": palette.background.paper,
+            "dark-true": alpha(primary.main, 0.35),
+            "dark-false": alpha(grey[700], 0.35),
+          }[key]!;
 
-          return {
-            bgcolor,
-            color: isDark ? alpha(text.secondary, 0.6) : text.secondary,
-            "& h2": {
-              color: isDark ? primary.light : primary.main,
-            },
-          };
-        }
-        const bgcolor = isDark
-          ? alpha(grey[700], 0.35)
-          : palette.background.paper;
-        return {
-          bgcolor,
-          color: isDark ? alpha(text.secondary, 0.6) : text.secondary,
-          "& h2": {
-            color: isDark ? text.primary : text.primary,
-          },
-        };
+          const color = {
+            "light-true": text.secondary,
+            "light-false": text.secondary,
+            "dark-true": alpha(text.secondary, 0.6),
+            "dark-false": alpha(text.secondary, 0.6),
+          }[key]!;
+
+          const h2color = {
+            "light-true": primary.main,
+            "light-false": text.primary,
+            "dark-true": primary.light,
+            "dark-false": text.primary,
+          }[key]!;
+
+          return { bgcolor, color, "& h2": { color: h2color } };
         }}
         onClick={onClick}
+        onContextMenu={handleContextMenu}
       >
         <Box display="flex" justifyContent="space-between">
           <Typography
@@ -157,8 +182,25 @@ const ProfileItemComp: React.FC<Props> = (props) => {
           <span title="expire time">{expire}</span>
         </Box>
 
-      <LinearProgress variant="determinate" value={progress} color="inherit" />
+        <LinearProgress
+          variant="determinate"
+          value={progress}
+          color="inherit"
+        />
       </Wrapper>
+
+      <Menu
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorPosition={position}
+        anchorReference="anchorPosition"
+      >
+        <MenuItem onClick={onUpdate}>Update</MenuItem>
+        <MenuItem onClick={onDelete}>Delete</MenuItem>
+        {/* <MenuItem>Update(proxy)</MenuItem> */}
+      </Menu>
+    </>
   );
 };
 

src/pages/profile.tsx

@@ -24,16 +24,20 @@ const ProfilePage = () => {
     if (profiles.current == null) return;
     if (!profiles.items) profiles.items = [];
 
-    const profile = profiles.items![profiles.current];
+    const current = profiles.current;
+    const profile = profiles.items![current];
     if (!profile) return;
 
-    getProxies().then((proxiesData) => {
+    setTimeout(async () => {
+      const proxiesData = await getProxies();
       mutate("getProxies", proxiesData);
+
       // init selected array
       const { selected = [] } = profile;
       const selectedMap = Object.fromEntries(
         selected.map((each) => [each.name!, each.now!])
       );
+
       // todo: enhance error handle
       let hasChange = false;
       proxiesData.groups.forEach((group) => {
@@ -52,10 +56,10 @@ const ProfilePage = () => {
         name,
         now,
       }));
-      patchProfile(profiles.current!, profile).catch(console.error);
+      patchProfile(current!, profile).catch(console.error);
       // update proxies cache
       if (hasChange) mutate("getProxies", getProxies());
-    });
+    }, 100);
   }, [profiles]);
 
   const onImport = async () => {