diff --git a/src/components/AsyncLoadLink.vue b/src/components/AsyncLoadLink.vue new file mode 100644 index 0000000..0f620ce --- /dev/null +++ b/src/components/AsyncLoadLink.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/pages/profile/Profile.vue b/src/pages/profile/Profile.vue index f2fb7a4..ae75604 100644 --- a/src/pages/profile/Profile.vue +++ b/src/pages/profile/Profile.vue @@ -18,6 +18,16 @@ {{ followers?.length ? `${followers?.length}+` : 0 }} Followers

+

+ + + Send private message + + + + Tip with Bitcoin Lightning + +

@@ -47,7 +57,7 @@ actions /> - + - + - + @@ -85,21 +95,27 @@ import ListPost from 'components/Post/ListPost.vue' import Thread from 'components/Post/Thread.vue' import ListPlaceholder from 'components/ListPlaceholder.vue' import FollowButton from 'components/User/FollowButton.vue' +import BaseIcon from 'components/BaseIcon/index.vue' +import AsyncLoadLink from 'components/AsyncLoadLink.vue' import {useAppStore} from 'stores/App' import {useNostrStore} from 'src/nostr/NostrStore' import {bech32ToHex, hexToBech32} from 'src/utils/utils' import Defer from 'src/utils/Defer' +import {EventKind} from 'src/nostr/model/Event' +import DateUtils from 'src/utils/DateUtils' export default defineComponent({ name: 'Profile', components: { - FollowButton, - ListPlaceholder, - Thread, PageHeader, UserAvatar, UserName, + BaseIcon, + FollowButton, + Thread, + ListPlaceholder, ListPost, + AsyncLoadLink, }, mixins: [Defer()], setup() { @@ -127,7 +143,7 @@ export default defineComponent({ return this.nostr.getPostsByAuthor(this.pubkey) }, posts() { - return this.notes?.filter(note => !note.hasAncestor()).slice(0, 50) + return this.notes?.filter(note => !note.hasAncestor()) }, replies() { return this.notes?.filter(note => note.hasAncestor()) @@ -151,6 +167,24 @@ export default defineComponent({ }, }, methods: { + loadMorePosts() { + const oldest = this.notes?.[this.notes.length - 1]?.createdAt || DateUtils.now() + return this.nostr.fetch({ + kinds: [EventKind.NOTE], + authors: [this.pubkey], + until: oldest, + limit: 100, + }) + }, + loadMoreReactions() { + const oldest = this.reactions?.[this.reactions.length - 1]?.createdAt || DateUtils.now() + return this.nostr.fetch({ + kinds: [EventKind.REACTION], + authors: [this.pubkey], + until: oldest, + limit: 100, + }) + }, goToFollowers(tab = 'following') { this.$router.push({ name: 'followers', @@ -159,7 +193,15 @@ export default defineComponent({ tab, } }) - } + }, + goToConversation() { + this.$router.push({ + name: 'conversation', + params: { + pubkey: hexToBech32(this.pubkey, 'npub'), + } + }) + }, }, watch: { activeTab() { @@ -207,6 +249,9 @@ export default defineComponent({ flex-grow: 1; } } + p:last-child { + margin-bottom: 0; + } .followers { a { cursor: pointer; @@ -222,6 +267,27 @@ export default defineComponent({ margin-left: 1rem; } } + .actions { + display: flex; + a { + svg, i { + width: 24px; + height: 24px; + color: $color-light-gray; + fill: $color-light-gray; + //fill: $color-fg; + transition: 120ms ease; + } + &:hover svg, &:hover i { + fill: $color-fg; + color: $color-fg; + //fill: $color-primary; + } + } + a + a { + margin-left: .5rem; + } + } } } &-tabs {