feat: show pinned posts on individual account page

[shuuji3]

resolves #305

another attempt inspired by #1921 (by @lazzzis)

Screenshot

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	5e1a818
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6622620d09db07000832778b

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	5e1a818
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6622620db0ed1b00087cdb1f
😎 Deploy Preview	https://deploy-preview-2779--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[lazzzis]

Thanks for adding this! This looks awesome! A few concerns:

1. The timeline paginator will prepend "Show {v} new items" and append "Show origin sites" in certain scenarios. Will these two buttons show in pinned timeline as well?
2. the user can pin a replied comment. Does this screenshot look good to you? link

[shuuji3]

That's good points.

1. "Show {v} new items" and "Show origin sites"

Probably the first "Show {v} new items" is only shown if a paginator has a bound stream. Both paginators (pinnedPaginator and accountPaginator) on this page are not using stream, so I think we don't have to worry about that case.

But I haven't tested the second case "Show origin sites", I'm going to check if it affects the pinned posts (maybe I need to hide that footer in the pinned timeline).

2. Does this screenshot look good to you?

This doesn't look good 😅 Let me try adjusting the position.

[shuuji3]

I adjusted the position and font style to be consistent with other badges.

I also tested the different patterns (remove the margin when there is no thread line) but I think the initial version is consistent and better.

[shuuji3]

But I haven't tested the second case "Show origin sites", I'm going to check if it affects the pinned posts (maybe I need to hide that footer in the pinned timeline).

I checked this case but found out I already set :end-massage="false" in this line so this message won't be shown.

https://github.com/elk-zone/elk/pull/2779/files#diff-ea5c53d8a780a38a4c56028e9023299518d6e00488d1d03d1b8215f97dc3d36eR39

The "Show origin sites" text is defined in the #done slot in TimelinePaginator:

elk/components/timeline/TimelinePaginator.vue

Line 42 in 3769176

<template v-if="context === 'account' " #done="{ items }">

but CommonPaginator does not show the slot if engMessage is false:

elk/components/common/CommonPaginator.vue

Line 113 in 59dda09

<slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">

[ayoayco]

I think we need this too because I don't see the "see pinned posts" we used to have in the menu when viewing a profile if I remember it correctly.👀 Don't know when we lost that.

[sloanlance]

Overall, this looks like a good PR. I'm no expert when it comes to Vue, however.

I think the paginator should be renamed, but it's a minor quibble. I'm happy to see other people not only agree that pinned posts need to be shown, but that you have the knowledge to implement it and open a PR. I hope @elk-zone approves this or even makes their own implementation.

@elk-zone: Why not approve and merge this PR? It's been waiting for about 7 months.

[sloanlance]

IMHO, I think better names for accountPaginator would be timelinePaginator, postPaginator, or normalPaginator. Because it's not accounts that are being paginated.