separate mute and blocked tabs

src/Element/BlockList.tsx

@@ -8,20 +8,32 @@ import ProfilePreview from "Element/ProfilePreview";
 import useMutedFeed, { getMuted } from "Feed/MuteList";
 import useModeration from "Hooks/useModeration";
 
-export default function BlockList() {
+interface BlockListProps {
+  variant: "muted" | "blocked"
+}
+
+export default function BlockList({ variant }: BlockListProps) {
     const { publicKey } = useSelector((s: RootState) => s.login)
     const { blocked, muted } = useModeration();
 
     return (
         <div className="main-content">
-          <h3>Muted ({muted.length})</h3>
+          {variant === "muted"  && (
-          {muted.map(a => {
+            <>
-            return <ProfilePreview actions={<MuteButton pubkey={a} />} pubkey={a} options={{ about: false }} key={a} />
+              <h4>{muted.length} muted</h4>
-          })}
+              {muted.map(a => {
-          <h3>Blocked ({blocked.length})</h3>
+                return <ProfilePreview actions={<MuteButton pubkey={a} />} pubkey={a} options={{ about: false }} key={a} />
-          {blocked.map(a => {
+              })}
-            return <ProfilePreview actions={<BlockButton pubkey={a} />} pubkey={a} options={{ about: false }} key={a} />
+            </>
-          })}
+          )}
+          {variant === "blocked" && (
+            <>
+              <h4>{blocked.length} blocked</h4>
+              {blocked.map(a => {
+                return <ProfilePreview actions={<BlockButton pubkey={a} />} pubkey={a} options={{ about: false }} key={a} />
+              })}
+            </>
+          )}
         </div>
     )
 }

src/Pages/ProfilePage.tsx

@@ -30,7 +30,8 @@ enum ProfileTab {
     Reactions = "Reactions",
     Followers = "Followers",
     Follows = "Follows",
-    Muted = "Muted"
+    Muted = "Muted",
+    Blocked = "Blocked"
 };
 
 export default function ProfilePage() {
@@ -124,7 +125,10 @@ export default function ProfilePage() {
                 return <FollowersList pubkey={id} />
             }
             case ProfileTab.Muted: {
-                return isMe ? <BlockList /> : <MutedList pubkey={id} />
+                return isMe ? <BlockList variant="muted" /> : <MutedList pubkey={id} />
+            }
+            case ProfileTab.Blocked: {
+                return isMe ? <BlockList variant="blocked" /> : null
             }
         }
     }
@@ -165,6 +169,10 @@ export default function ProfilePage() {
         )
     }
 
+    function renderTab(v: ProfileTab) {
+      return <div className={`tab f-1${tab === v ? " active" : ""}`} key={v} onClick={() => setTab(v)}>{v}</div>
+    }
+
     return (
         <>
             <div className="profile flex">
@@ -175,9 +183,8 @@ export default function ProfilePage() {
                </div>
             </div>
             <div className="tabs">
-                {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(v => {
+                {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)}
-                    return <div className={`tab f-1${tab === v ? " active" : ""}`} key={v} onClick={() => setTab(v)}>{v}</div>
+                {isMe && renderTab(ProfileTab.Blocked)}
-                })}
             </div>
             {tabContent()}
         </>