feat: profile item ui

src/components/profile-item.tsx

@@ -59,6 +59,9 @@ const ProfileItem: React.FC<Props> = (props) => {
   const progress = Math.round(((download + upload) * 100) / (total + 0.1));
   const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
 
+  // url or file mode
+  const isUrlMode = itemData.url && extra;
+
   const onView = async () => {
     setAnchorEl(null);
     try {
@@ -111,6 +114,13 @@ const ProfileItem: React.FC<Props> = (props) => {
     event.preventDefault();
   };
 
+  const boxStyle = {
+    height: 26,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  };
+
   return (
     <>
       <Wrapper
@@ -155,10 +165,11 @@ const ProfileItem: React.FC<Props> = (props) => {
             {name}
           </Typography>
 
+          {isUrlMode && (
             <IconButton
               sx={{
-              width: 30,
+                width: 26,
-              height: 30,
+                height: 26,
                 animation: loading ? `1s linear infinite ${round}` : "none",
               }}
               color="inherit"
@@ -170,9 +181,12 @@ const ProfileItem: React.FC<Props> = (props) => {
             >
               <RefreshRounded />
             </IconButton>
+          )}
         </Box>
 
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        {isUrlMode ? (
+          <>
+            <Box sx={boxStyle}>
               <Typography noWrap title={`From: ${from}`}>
                 {from}
               </Typography>
@@ -188,19 +202,26 @@ const ProfileItem: React.FC<Props> = (props) => {
               </Typography>
             </Box>
 
-        <Box
+            <Box sx={{ ...boxStyle, fontSize: 14 }}>
-          sx={{
-            my: 0.5,
-            fontSize: 14,
-            display: "flex",
-            justifyContent: "space-between",
-          }}
-        >
               <span title="used / total">
                 {parseTraffic(upload + download)} / {parseTraffic(total)}
               </span>
               <span title="expire time">{expire}</span>
             </Box>
+          </>
+        ) : (
+          <>
+            <Box sx={boxStyle}>
+              <Typography noWrap title={itemData.desc}>
+                {itemData.desc}
+              </Typography>
+            </Box>
+
+            <Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
+              <span title="updated time">{parseExpire(updated)}</span>
+            </Box>
+          </>
+        )}
 
         <LinearProgress
           variant="determinate"

src/services/types.ts

@@ -87,6 +87,7 @@ export namespace CmdType {
 
   export interface ProfileItem {
     name?: string;
+    desc?: string;
     file?: string;
     mode?: string;
     url?: string;