feat: adjust profile item ui

src/assets/styles/index.scss

@@ -4,6 +4,7 @@ body {
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
+  user-select: none;
 }
 
 :root {

src/components/profile/profile-item.tsx

@@ -59,8 +59,11 @@ 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
+  // local file mode
-  const isUrlMode = itemData.url && extra;
+  // remote file mode
+  // subscription url mode
+  const hasUrl = !!itemData.url;
+  const hasExtra = !!extra; // only subscription url has extra info
 
   const onView = async () => {
     setAnchorEl(null);
@@ -178,7 +181,8 @@ const ProfileItem: React.FC<Props> = (props) => {
             {name}
           </Typography>
 
-          {isUrlMode && (
+          {/* only if has url can it be updated */}
+          {hasUrl && (
             <IconButton
               sx={{
                 width: 26,
@@ -197,8 +201,8 @@ const ProfileItem: React.FC<Props> = (props) => {
           )}
         </Box>
 
-        {isUrlMode ? (
+        {/* the second line show url's info or description */}
-          <>
+        {hasUrl ? (
           <Box sx={boxStyle}>
             <Typography noWrap title={`From: ${from}`}>
               {from}
@@ -214,26 +218,26 @@ const ProfileItem: React.FC<Props> = (props) => {
               {fromnow}
             </Typography>
           </Box>
+        ) : (
+          <Box sx={boxStyle}>
+            <Typography noWrap title={itemData.desc}>
+              {itemData.desc}
+            </Typography>
+          </Box>
+        )}
 
+        {/* the third line show extra info or last updated time */}
+        {hasExtra ? (
           <Box sx={{ ...boxStyle, fontSize: 14 }}>
             <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
@@ -250,8 +254,12 @@ const ProfileItem: React.FC<Props> = (props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
       >
-        {(isUrlMode ? urlModeMenu : fileModeMenu).map((item) => (
+        {(hasUrl ? urlModeMenu : fileModeMenu).map((item) => (
-          <MenuItem key={item.label} onClick={item.handler}>
+          <MenuItem
+            key={item.label}
+            onClick={item.handler}
+            sx={{ minWidth: 133 }}
+          >
             {item.label}
           </MenuItem>
         ))}