feat: adjust proxy page

src/pages/proxy.tsx

@@ -3,11 +3,12 @@ import { useEffect } from "react";
 import { Box, List, Paper, Typography } from "@mui/material";
 import { getProxies } from "../services/api";
 import ProxyGroup from "../components/proxy-group";
+import ProxyItem from "../components/proxy-item";
 
 const ProxyPage = () => {
   const { mutate } = useSWRConfig();
   const { data: proxiesData } = useSWR("getProxies", getProxies);
-  const { groups = [] } = proxiesData ?? {};
+  const { groups = [], proxies = [] } = proxiesData ?? {};
 
   useEffect(() => {
     // fix the empty proxies on the first sight
@@ -20,18 +21,31 @@ const ProxyPage = () => {
   return (
     <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
       <Typography variant="h4" component="h1" sx={{ py: 2 }}>
-        Proxy Groups
+        {groups.length ? "Proxy Groups" : "Proxies"}
       </Typography>
 
-      {groups.length > 0 && (
-        <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
+      <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
+        {groups.length > 0 && (
           <List>
             {groups.map((group) => (
               <ProxyGroup key={group.name} group={group} />
             ))}
           </List>
-        </Paper>
-      )}
+        )}
+
+        {!groups.length && (
+          <List>
+            {Object.values(proxies).map((proxy) => (
+              <ProxyItem
+                key={proxy.name}
+                proxy={proxy}
+                selected={false}
+                sx={{ py: 0, px: 2 }}
+              />
+            ))}
+          </List>
+        )}
+      </Paper>
     </Box>
   );
 };