mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 08:50:48 +00:00
Fix people list
This commit is contained in:
parent
28c1d6dca7
commit
de0cdd6c09
@ -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>
|
||||
|
||||
<Show when={!props.noAbout}>
|
||||
<div class={styles.about}>
|
||||
{props.person.about || ''}
|
||||
</div>
|
||||
</Show>
|
||||
</A>
|
||||
);
|
||||
}
|
||||
|
@ -76,23 +76,21 @@
|
||||
|
||||
.peopleList {
|
||||
margin-bottom: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 52px 148px 72px;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "avatar content follow";
|
||||
grid-column-gap: 14px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
|
||||
.avatar {
|
||||
grid-area: avatar;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
height: 52px;
|
||||
height: 44px;
|
||||
|
||||
.avatarImg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 44px;
|
||||
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;
|
||||
|
@ -1,11 +1,7 @@
|
||||
import { A } from '@solidjs/router';
|
||||
import { Component, For, Show } from 'solid-js';
|
||||
import { Component, 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 = () => {
|
||||
|
@ -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) =>
|
||||
<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>
|
||||
(person) => <MentionedPerson person={person} noAbout={true} />
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
|
@ -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));
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user