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}
+
+
+
+
+ {(person) =>
+
+ }
+
+
+ >
+ );
+}
+
+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 (
+
+
+
+
+ {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 = () => {