CloudToys/elk
1
0
Fork 0
Code

feat: show pinned posts on individual account page

Browse Source
This commit is contained in:
TAKAHASHI Shuuji 2024-04-08 02:19:35 +09:00
parent 1eaaa6ce9a
commit 06e906f95e
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/status/StatusCard.vue
View File

@ -62,6 +62,7 @@ const timeago = useTimeAgo(() => status.value.createdAt, timeAgoOptions)
const isSelfReply = computed(() => status.value.inReplyToAccountId === status.value.account.id)
const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.value.account.id)
const isDM = computed(() => status.value.visibility === 'direct')
const isPinned = computed(() => status.value.pinned)
const showUpperBorder = computed(() => props.newer && !directReply.value)
const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
@ -113,6 +114,19 @@ const forceShow = ref(false)
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
</div>
</div>
<!-- Pinned status -->
<div flex="~ col" justify-between>
<div
v-if="isPinned"
flex="~" items-center
p="t-1 b-0.5 x-1px"
relative text-secondary ws-nowrap
>
<div i-ri:pushpin-line mx-1 text-orange w-16px h-16px />
<span text-primary>Pinned post</span>
</div>
</div>
</slot>
<div flex gap-3 :class="{ 'text-secondary': inNotification }">

17
pages/[[server]]/@[account]/index/index.vue
View File

@ -10,11 +10,21 @@ const { t } = useI18n()
const account = await fetchAccountByHandle(handle.value)
// we need to ensure `pinned === true` on status
// because this prop is appeared only on current account's posts
function applyPinned(statuses: mastodon.v1.Status[]) {
return statuses.map((status) => {
status.pinned = true
return status
})
}
function reorderAndFilter(items: mastodon.v1.Status[]) {
return reorderedTimeline(items, 'account')
}
const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
const pinnedPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ pinned: true })
const accountPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
if (account) {
useHydratedHead({
@ -26,6 +36,9 @@ if (account) {
<template>
<div>
<AccountTabs />
<TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" />
<TimelinePaginator :paginator="pinnedPaginator" :preprocess="applyPinned" context="account" :account="account" :end-message="false" />
<!-- Upper border -->
<div h="1px" w-auto bg-border mb-1 />
<TimelinePaginator :paginator="accountPaginator" :preprocess="reorderAndFilter" context="account" :account="account" />
</div>
</template>