Profile: follower and following counts

README.md

@@ -18,7 +18,7 @@ Tutu trys to push the Web technology to its limit. Some features might not be av
 
 The "next" branch of the app is built on every commit pushed into "master". You can tatse latest change but risks your data.
 
-[Launch Tutu (Next)](https://next.tututheapp.pages.dev)
+[Launch Tutu (Next)](https://master.tututheapp.pages.dev)
 
 ## Build & Depoly
 

src/profiles/Profile.css

@@ -8,6 +8,21 @@
     gap: 16px;
   }
 
+  .banner {
+    width: 100%;
+    margin-top: calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)));
+
+    >img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+
+      &::before {
+        visibility: hidden;
+      }
+    }
+  }
+
   .description {
     & a {
       color: inherit;
@@ -23,11 +38,11 @@
     gap: 16px;
     align-items: center;
 
-    & > :nth-child(2) {
+    &> :nth-child(2) {
       flex-grow: 1;
     }
 
-    & > :last-child {
+    &> :last-child {
       flex-grow: 1;
       text-align: right;
     }
@@ -51,14 +66,14 @@
   table.acct-fields {
     word-break: break-all;
 
-    & td > a {
+    & td>a {
       display: inline-flex;
       align-items: center;
       color: inherit;
       min-height: 44px;
     }
 
-    & a > .invisible {
+    & a>.invisible {
       display: none;
     }
 
@@ -89,4 +104,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}

src/profiles/Profile.tsx

@@ -23,6 +23,7 @@ import {
   IconButton,
   ListItemAvatar,
   ListItemIcon,
+  ListItemSecondaryAction,
   ListItemText,
   MenuItem,
   Toolbar,
@@ -38,8 +39,8 @@ import {
   PlaylistAdd,
   Send,
   Share,
-  SmartToy,
   SmartToySharp,
+  Subject,
   Translate,
   Verified,
 } from "@suid/icons-material";
@@ -295,7 +296,23 @@ const Profile: Component = () => {
           <ListItemIcon>
             <Group />
           </ListItemIcon>
-          <ListItemText>Subscribers</ListItemText>
+          <ListItemText>Followers</ListItemText>
+          <ListItemSecondaryAction>
+            <span aria-label="The number of the account follower">
+              {profile()?.followersCount ?? ""}
+            </span>
+          </ListItemSecondaryAction>
+        </MenuItem>
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Subject />
+          </ListItemIcon>
+          <ListItemText>Following</ListItemText>
+          <ListItemSecondaryAction>
+            <span aria-label="The number the account following">
+              {profile()?.followingCount ?? ""}
+            </span>
+          </ListItemSecondaryAction>
         </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
@@ -303,12 +320,6 @@ const Profile: Component = () => {
           </ListItemIcon>
           <ListItemText>Blocklist</ListItemText>
         </MenuItem>
-        <MenuItem disabled>
-          <ListItemIcon>
-            <Translate />
-          </ListItemIcon>
-          <ListItemText>Translate Name and Bio...</ListItemText>
-        </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <Send />
@@ -336,21 +347,14 @@ const Profile: Component = () => {
       </Menu>
       <div
         style={{
-          width: "100%",
           height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
-          "margin-top":
-            "calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)))",
         }}
+        class="banner"
         role="presentation"
       >
         <img
           ref={(e) => obx.observe(e)}
           src={bannerImg()}
-          style={{
-            "object-fit": "cover",
-            width: "100%",
-            height: "100%",
-          }}
           crossOrigin="anonymous"
           alt={`Banner image for ${profile()?.displayName || "the user"}`}
           onLoad={(event) => {