From bee566424d20c822cb5d914f1834cc28107436d5 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 30 Aug 2024 12:55:04 +0200
Subject: [PATCH] refactor: split signers and viewers in the users section

---
 src/components/UsersDetails.tsx/index.tsx | 60 ++++++++++++++---------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/components/UsersDetails.tsx/index.tsx b/src/components/UsersDetails.tsx/index.tsx
index 16ff440..bddae82 100644
--- a/src/components/UsersDetails.tsx/index.tsx
+++ b/src/components/UsersDetails.tsx/index.tsx
@@ -118,32 +118,44 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 </Tooltip>
               )
             })}
-            {viewers.map((signer) => {
-              const pubkey = npubToHex(signer)!
-              const profile = profiles[pubkey]
-
-              return (
-                <Tooltip
-                  key={signer}
-                  title={
-                    profile?.display_name || profile?.name || shorten(pubkey)
-                  }
-                  placement="top"
-                  arrow
-                  disableInteractive
-                >
-                  <TooltipChild>
-                    <DisplaySigner
-                      status={SignStatus.Viewer}
-                      profile={profile}
-                      pubkey={pubkey}
-                    />
-                  </TooltipChild>
-                </Tooltip>
-              )
-            })}
           </UserAvatarGroup>
         </div>
+
+        {viewers.length > 0 && (
+          <>
+            <p>Viewers</p>
+            <div className={styles.users}>
+              <UserAvatarGroup max={20}>
+                {viewers.map((signer) => {
+                  const pubkey = npubToHex(signer)!
+                  const profile = profiles[pubkey]
+
+                  return (
+                    <Tooltip
+                      key={signer}
+                      title={
+                        profile?.display_name ||
+                        profile?.name ||
+                        shorten(pubkey)
+                      }
+                      placement="top"
+                      arrow
+                      disableInteractive
+                    >
+                      <TooltipChild>
+                        <DisplaySigner
+                          status={SignStatus.Viewer}
+                          profile={profile}
+                          pubkey={pubkey}
+                        />
+                      </TooltipChild>
+                    </Tooltip>
+                  )
+                })}
+              </UserAvatarGroup>
+            </div>
+          </>
+        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>