Fix people list

src/components/PeopleList/MentionedPerson.tsx

@@ -13,6 +13,7 @@ import styles from './PeopleList.module.scss';
 const MentionedPerson: Component<{
   person: PrimalUser,
   id?: string,
+  noAbout?: boolean,
 }> = (props) => {
   const account = useAccountContext();
 
@@ -44,9 +45,11 @@ const MentionedPerson: Component<{
         </Show>
       </div>
 
-      <div class={styles.about}>
+      <Show when={!props.noAbout}>
-        {props.person.about || ''}
+        <div class={styles.about}>
-      </div>
+          {props.person.about || ''}
+        </div>
+      </Show>
     </A>
   );
 }

src/components/PeopleList/PeopleList.module.scss

@@ -76,23 +76,21 @@
 
 .peopleList {
   margin-bottom: 16px;
-  display: grid;
+  display: flex;
-  grid-template-columns: 52px 148px 72px;
+  gap: 8px;
-  grid-template-rows: 1fr;
-  grid-template-areas: "avatar content follow";
-  grid-column-gap: 14px;
   text-decoration: none;
   align-items: center;
+  width: 300px;
 
   .avatar {
     grid-area: avatar;
     display: grid;
     justify-items: center;
-    height: 52px;
+    height: 44px;
 
     .avatarImg {
-      width: 52px;
+      width: 44px;
-      height: 52px;
+      height: 44px;
       border-radius: 50%;
     }
   }
@@ -101,13 +99,16 @@
     grid-area: content;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
+    gap: 4px;
+    flex-grow: 1;
 
     .name {
       color: var(--text-primary);
       font-size: 16px;
       font-weight: 700;
       line-height: 16px;
+      max-width: 168px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;

src/components/PeopleList/PeopleList.tsx

@@ -1,11 +1,7 @@
-import { A } from '@solidjs/router';
+import { Component, Show } from 'solid-js';
-import { Component, For, Show } from 'solid-js';
 import { useAccountContext } from '../../contexts/AccountContext';
 import { hookForDev } from '../../lib/devTools';
-import { authorName, nip05Verification, truncateNpub } from '../../stores/profile';
 import { PrimalNote, PrimalUser } from '../../types/primal';
-import Avatar from '../Avatar/Avatar';
-import FollowButton from '../FollowButton/FollowButton';
 import MentionedPeople from './MentionedPeople';
 
 import styles from './PeopleList.module.scss';
@@ -19,8 +15,6 @@ const PeopleList: Component<{
   id?: string,
   note?: PrimalNote,
 }> = (props) => {
-  const account = useAccountContext();
-
   const author = () => props.note?.user;
 
   const mentioned = () => {

src/components/PeopleList/Repliers.tsx

@@ -6,6 +6,7 @@ import { authorName, nip05Verification, truncateNpub } from '../../stores/profil
 import { PrimalNote, PrimalUser } from '../../types/primal';
 import Avatar from '../Avatar/Avatar';
 import FollowButton from '../FollowButton/FollowButton';
+import MentionedPerson from './MentionedPerson';
 
 import styles from './PeopleList.module.scss';
 
@@ -25,33 +26,7 @@ const Repliers: Component<{
       <div id="trending_section" class={styles.trendingSection}>
         <For each={people()}>
           {
-            (person) =>
+            (person) => <MentionedPerson person={person} noAbout={true} />
-              <A href={`/p/${person?.npub}`} class={styles.peopleList}>
-                <div class={styles.avatar}>
-                  <Avatar
-                    size="md"
-                    user={person}
-                  />
-                </div>
-                <div class={styles.content}>
-                  <div class={styles.name}>
-                    {authorName(person)}
-                  </div>
-                  <div class={styles.verification} title={person?.nip05}>
-                    <Show when={person?.nip05}>
-                      <span
-                        class={styles.verifiedBy}
-                        title={person?.nip05}
-                      >
-                        {nip05Verification(person)}
-                      </span>
-                    </Show>
-                  </div>
-                </div>
-                <Show when={account?.publicKey !== person.pubkey || !account?.following.includes(person.pubkey)}>
-                  <FollowButton person={person} />
-                </Show>
-              </A>
           }
         </For>
       </div>

src/pages/Thread.tsx

@@ -2,7 +2,7 @@ import { Component, createEffect, createMemo, For, onCleanup, onMount, Show } fr
 import Note from '../components/Note/Note';
 import styles from './Thread.module.scss';
 import { useNavigate, useParams } from '@solidjs/router';
-import { PrimalNote, SendNoteResult } from '../types/primal';
+import { PrimalNote, PrimalUser, SendNoteResult } from '../types/primal';
 import PeopleList from '../components/PeopleList/PeopleList';
 import ReplyToNote from '../components/ReplyToNote/ReplyToNote';
 
@@ -19,6 +19,7 @@ import PageTitle from '../components/PageTitle/PageTitle';
 import NavHeader from '../components/NavHeader/NavHeader';
 import Loader from '../components/Loader/Loader';
 import { isIOS } from '../components/BannerIOS/BannerIOS';
+import { unwrap } from 'solid-js/store';
 
 
 const Thread: Component = () => {
@@ -91,7 +92,9 @@ const Thread: Component = () => {
   };
 
   const people = () => {
-    const authors = (threadContext?.notes || []).map(n => n.user);
+    const authors = (threadContext?.notes || []).
+      reduce<PrimalUser[]>((acc, n) => acc.find(u => u.pubkey === n.user.pubkey) ? [...acc] : [ ...acc, { ...n.user }], []);
+
     const mentions = Object.values(primaryNote()?.mentionedUsers || {}).
       filter((u) => !authors.find(a => u.pubkey === a.pubkey));