refactor: split signers and viewers in the users section

src/components/UsersDetails.tsx/index.tsx

@@ -118,6 +118,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 </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]
@@ -126,7 +134,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                     <Tooltip
                       key={signer}
                       title={
-                    profile?.display_name || profile?.name || shorten(pubkey)
+                        profile?.display_name ||
+                        profile?.name ||
+                        shorten(pubkey)
                       }
                       placement="top"
                       arrow
@@ -144,6 +154,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 })}
               </UserAvatarGroup>
             </div>
+          </>
+        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>