diff --git a/src/components/Cashu/Cashu.tsx b/src/components/Cashu/Cashu.tsx index 668b93e..85c9f72 100644 --- a/src/components/Cashu/Cashu.tsx +++ b/src/components/Cashu/Cashu.tsx @@ -90,8 +90,6 @@ const Cashu: Component< { id?: string, token: string, alternative?: boolean, noB lnurl, )}&autopay=yes`; - console.log('Redeem: ', url); - window.open(url, 'blank_'); }; diff --git a/src/components/PeopleList/MentionedPeople.tsx b/src/components/PeopleList/MentionedPeople.tsx new file mode 100644 index 0000000..169d7c2 --- /dev/null +++ b/src/components/PeopleList/MentionedPeople.tsx @@ -0,0 +1,45 @@ +import { A } from '@solidjs/router'; +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 MentionedPerson from './MentionedPerson'; + +import styles from './PeopleList.module.scss'; + + +const MentionedPeople: Component<{ + mentioned: PrimalUser[], + label: string, + id?: string, + author: PrimalUser, +}> = (props) => { + const account = useAccountContext(); + + const author = () => props.author; + const mentioned = () => props.mentioned; + + return ( + <> +
{props.label}
+ + + ); +} + +export default hookForDev(MentionedPeople); diff --git a/src/components/PeopleList/MentionedPerson.tsx b/src/components/PeopleList/MentionedPerson.tsx new file mode 100644 index 0000000..63c84cb --- /dev/null +++ b/src/components/PeopleList/MentionedPerson.tsx @@ -0,0 +1,54 @@ +import { A } from '@solidjs/router'; +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 styles from './PeopleList.module.scss'; + + +const MentionedPerson: Component<{ + person: PrimalUser, + id?: string, +}> = (props) => { + const account = useAccountContext(); + + return ( + +
+ +
+
+ {authorName(props.person)} +
+
+ + + {nip05Verification(props.person)} + + +
+
+ + + + +
+ +
+ {props.person.about || ''} +
+
+ ); +} + +export default hookForDev(MentionedPerson); diff --git a/src/components/PeopleList/PeopleList.module.scss b/src/components/PeopleList/PeopleList.module.scss index 2d9fa4b..e22837a 100644 --- a/src/components/PeopleList/PeopleList.module.scss +++ b/src/components/PeopleList/PeopleList.module.scss @@ -5,7 +5,7 @@ width: 100%; height: 44px; z-index: 5; - padding-bottom: 22px; + padding-block: 22px; display:flex; flex-direction: row; align-items: center; @@ -25,6 +25,13 @@ } } +.authorSection { + // position: -webkit-sticky; + // position: sticky; + // top: 0px; + // padding-top: 44px; +} + .trendingSection { // position: -webkit-sticky; // position: sticky; @@ -48,6 +55,25 @@ @include heading(); } +@mixin followButton { + grid-area: follow; + align-items: center; + display: flex; + align-items: center; + button { + width: 72px; + height: 28px; + background: var(--brand-gradient); + border-radius: 6px; + padding: 0px; + font-size: 12px; + font-weight: 600; + line-height: 16px; + margin: 0px; + } + +} + .peopleList { margin-bottom: 16px; display: grid; @@ -79,9 +105,9 @@ .name { color: var(--text-primary); - font-weight: 400; - font-size: 12px; - line-height: 12px; + font-size: 16px; + font-weight: 700; + line-height: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -117,6 +143,22 @@ overflow: hidden; } + .about { + font-size: 12px; + line-height: 16px; + font-weight: 400; + color: var(--text-tertiary-2); + + overflow: hidden; + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + text-overflow: ellipsis; + } + &:hover { .message, .name, .time { color: var(--text-primary); @@ -127,25 +169,6 @@ } } - @mixin followButton { - grid-area: follow; - align-items: center; - display: flex; - align-items: center; - button { - width: 72px; - height: 28px; - background: var(--brand-gradient); - border-radius: 6px; - padding: 0px; - font-size: 12px; - font-weight: 600; - line-height: 16px; - margin: 0px; - } - - } - .follow { @include followButton; } @@ -168,6 +191,126 @@ } } + +.mentionedPerson { + display: flex; + flex-direction: column; + width: 300px; + gap: 8px; + padding-block: 12px; + border-bottom: 1px solid var(--devider); + + text-decoration: none; + + + .header { + display: flex; + gap: 8px; + align-items: center; + + .content { + grid-area: content; + display: flex; + flex-direction: column; + 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; + } + + .verification { + font-size: 15px; + font-weight: 400; + line-height: 16px; + color: var(--text-tertiary-2); + max-width: 168px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .verifiedName { + font-size: 12px; + line-height: 16px; + font-weight: 700; + color: var(--text-tertiary-2); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .npub { + font-size: 12px; + line-height: 16px; + font-weight: 400; + color: var(--text-tertiary-2); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + + .follow { + @include followButton; + } + + .unfollow { + @include followButton; + button { + background-color: var(--background-card); + background: linear-gradient(var(--background-card), var(--background-card)) padding-box, + var(--brand-gradient) border-box; + border: 1px solid transparent; + } + } + + &:hover { + .name { + text-decoration: underline; + color: var(--text-primary); + } + } + } + + .about { + width: 300px; + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: var(--text-tertiary-2); + + overflow: hidden; + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + text-overflow: ellipsis; + } + + &:hover { + + .content { + .name { + color: var(--text-primary); + text-decoration: underline; + } + } + + cursor: pointer; + } +} + .verifiedIcon { width:13px; height: 12px; diff --git a/src/components/PeopleList/PeopleList.tsx b/src/components/PeopleList/PeopleList.tsx index f58c547..61c78db 100644 --- a/src/components/PeopleList/PeopleList.tsx +++ b/src/components/PeopleList/PeopleList.tsx @@ -3,58 +3,55 @@ 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 { PrimalUser } from '../../types/primal'; +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'; +import Repliers from './Repliers'; -const PeopleList: Component<{ people: PrimalUser[], label: string, id?: string }> = (props) => { +const PeopleList: Component<{ + people: PrimalUser[], + label: string, + id?: string, + note?: PrimalNote, +}> = (props) => { const account = useAccountContext(); - const people = () => props.people; + const author = () => props.note?.user; + + const mentioned = () => { + if (!props.note) return []; + + return props.people.filter(p => p.pubkey !== author()?.pubkey && (props.note?.mentionedUsers || {})[p.pubkey] !== undefined); + }; + + const repliers = () => { + if (!props.note) return props.people; + + return props.people.filter(p => p.pubkey !== author()?.pubkey && (props.note?.mentionedUsers || {})[p.pubkey] === undefined); + } + return ( -
-
{props.label}
- ); } diff --git a/src/components/PeopleList/Repliers.tsx b/src/components/PeopleList/Repliers.tsx new file mode 100644 index 0000000..9affe29 --- /dev/null +++ b/src/components/PeopleList/Repliers.tsx @@ -0,0 +1,62 @@ +import { A } from '@solidjs/router'; +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 styles from './PeopleList.module.scss'; + + +const Repliers: Component<{ + people: PrimalUser[], + label: string, + id?: string, +}> = (props) => { + const account = useAccountContext(); + + const people = () => props.people; + + return ( + <> +
{props.label}
+ + + ); +} + +export default hookForDev(Repliers); diff --git a/src/pages/Thread.tsx b/src/pages/Thread.tsx index cb3eca5..fb84ea7 100644 --- a/src/pages/Thread.tsx +++ b/src/pages/Thread.tsx @@ -160,6 +160,7 @@ const Thread: Component = () => {