feat: support clash meta memory usage display

src/components/layout/layout-traffic.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { Box, Typography } from "@mui/material";
-import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+import {
+  ArrowDownward,
+  ArrowUpward,
+  MemoryOutlined,
+} from "@mui/icons-material";
 import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { TrafficGraph, type TrafficRef } from "./traffic-graph";
@@ -12,13 +16,15 @@ import parseTraffic from "@/utils/parse-traffic";
 // setup the traffic
 const LayoutTraffic = () => {
   const { clashInfo } = useClashInfo();
+  const { verge } = useVerge();
 
   // whether hide traffic graph
-  const { verge } = useVerge();
   const trafficGraph = verge?.traffic_graph ?? true;
 
   const trafficRef = useRef<TrafficRef>(null);
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
+  const [memory, setMemory] = useState({ inuse: 0 });
+  const pageVisible = useVisibility();
 
   // setup log ws during layout
   useLogSetup();
@@ -29,8 +35,6 @@ const LayoutTraffic = () => {
     setTraffic(data);
   });
 
-  const pageVisible = useVisibility();
-
   useEffect(() => {
     if (!clashInfo || !pageVisible) return;
 
@@ -42,14 +46,38 @@ const LayoutTraffic = () => {
     };
   }, [clashInfo, pageVisible]);
 
+  /* --------- meta memory information --------- */
+  const isMetaCore = verge?.clash_core === "clash-meta";
+  const displayMemory = isMetaCore && (verge?.enable_memory_usage ?? true);
+
+  const memoryWs = useWebsocket(
+    (event) => {
+      setMemory(JSON.parse(event.data));
+    },
+    { onError: () => setMemory({ inuse: 0 }) }
+  );
+
+  useEffect(() => {
+    if (!clashInfo || !pageVisible || !displayMemory) return;
+    const { server = "", secret = "" } = clashInfo;
+    memoryWs.connect(
+      `ws://${server}/memory?token=${encodeURIComponent(secret)}`
+    );
+    return () => memoryWs.disconnect();
+  }, [clashInfo, pageVisible, displayMemory]);
+
   const [up, upUnit] = parseTraffic(traffic.up);
   const [down, downUnit] = parseTraffic(traffic.down);
+  const [inuse, inuseUnit] = parseTraffic(memory.inuse);
 
+  const iconStyle: any = {
+    sx: { mr: "8px", fontSize: 16 },
+  };
   const valStyle: any = {
     component: "span",
     color: "primary",
     textAlign: "center",
-    sx: { flex: "1 1 54px", userSelect: "none" },
+    sx: { flex: "1 1 56px", userSelect: "none" },
   };
   const unitStyle: any = {
     component: "span",
@@ -71,22 +99,37 @@ const LayoutTraffic = () => {
         </div>
       )}
 
-      <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
-        <ArrowUpward
-          sx={{ mr: 0.75, fontSize: 18 }}
-          color={+up > 0 ? "primary" : "disabled"}
-        />
-        <Typography {...valStyle}>{up}</Typography>
-        <Typography {...unitStyle}>{upUnit}/s</Typography>
-      </Box>
+      <Box display="flex" flexDirection="column" gap={0.75}>
+        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+          <ArrowUpward
+            {...iconStyle}
+            color={+up > 0 ? "primary" : "disabled"}
+          />
+          <Typography {...valStyle}>{up}</Typography>
+          <Typography {...unitStyle}>{upUnit}/s</Typography>
+        </Box>
 
-      <Box display="flex" alignItems="center" whiteSpace="nowrap">
-        <ArrowDownward
-          sx={{ mr: 0.75, fontSize: 18 }}
-          color={+down > 0 ? "primary" : "disabled"}
-        />
-        <Typography {...valStyle}>{down}</Typography>
-        <Typography {...unitStyle}>{downUnit}/s</Typography>
+        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+          <ArrowDownward
+            {...iconStyle}
+            color={+down > 0 ? "primary" : "disabled"}
+          />
+          <Typography {...valStyle}>{down}</Typography>
+          <Typography {...unitStyle}>{downUnit}/s</Typography>
+        </Box>
+
+        {displayMemory && (
+          <Box
+            display="flex"
+            alignItems="center"
+            whiteSpace="nowrap"
+            title="Memory Usage"
+          >
+            <MemoryOutlined {...iconStyle} color="disabled" />
+            <Typography {...valStyle}>{inuse}</Typography>
+            <Typography {...unitStyle}>{inuseUnit}</Typography>
+          </Box>
+        )}
       </Box>
     </Box>
   );