74 lines
3 KiB
Vue
74 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import type { GroupedLikeNotifications } from '#shared/types'
|
|
|
|
const { group } = defineProps<{
|
|
group: GroupedLikeNotifications
|
|
}>()
|
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
|
|
|
const reblogs = computed(() => group.likes.filter(i => i.reblog))
|
|
const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
|
|
|
|
const timeAgoOptions = useTimeAgoOptions(true)
|
|
const reblogsTimeAgoCreatedAt = computed(() => reblogs.value[0].reblog?.createdAt)
|
|
const reblogsTimeAgo = useTimeAgo(() => reblogsTimeAgoCreatedAt.value ?? '', timeAgoOptions)
|
|
const likesTimeAgoCreatedAt = computed(() => likes.value[0].favourite?.createdAt)
|
|
const likesTimeAgo = useTimeAgo(() => likesTimeAgoCreatedAt.value ?? '', timeAgoOptions)
|
|
</script>
|
|
|
|
<template>
|
|
<article flex flex-col relative>
|
|
<StatusLink :status="group.status!" pb4 pt5>
|
|
<div flex flex-col gap-3>
|
|
<div v-if="reblogs.length" flex="~ gap-1">
|
|
<div i-ri:repeat-fill text-xl me-2 color-green />
|
|
<template v-for="i, idx of reblogs" :key="idx">
|
|
<AccountHoverWrapper :account="i.account">
|
|
<NuxtLink :to="getAccountRoute(i.account)">
|
|
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
|
|
</NuxtLink>
|
|
</AccountHoverWrapper>
|
|
</template>
|
|
<div ml1>
|
|
{{ $t('notification.reblogged_post') }}
|
|
<time text-secondary :datetime="reblogsTimeAgoCreatedAt">
|
|
・{{ reblogsTimeAgo }}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
<div v-if="likes.length" flex="~ gap-1 wrap">
|
|
<div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
|
|
<template v-for="i, idx of likes" :key="idx">
|
|
<AccountHoverWrapper :account="i.account" relative me--4 border="2 bg-base" rounded-full hover:z-1 focus-within:z-1>
|
|
<NuxtLink :to="getAccountRoute(i.account)">
|
|
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
|
|
</NuxtLink>
|
|
</AccountHoverWrapper>
|
|
</template>
|
|
<div ms-4>
|
|
{{ $t('notification.favourited_post') }}
|
|
<time text-secondary :datetime="likesTimeAgoCreatedAt">
|
|
・{{ likesTimeAgo }}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ps9 mt-1>
|
|
<StatusBody :status="group.status!" text-secondary />
|
|
<!-- When no text content is presented, we show media instead -->
|
|
<template v-if="!group.status!.content">
|
|
<StatusMedia
|
|
v-if="group.status!.mediaAttachments?.length"
|
|
:status="group.status!"
|
|
:is-preview="false"
|
|
pointer-events-none
|
|
/>
|
|
<StatusPoll
|
|
v-else-if="group.status!.poll"
|
|
:status="group.status!"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</StatusLink>
|
|
</article>
|
|
</template>
|