1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-20 02:25:11 +03:00
elk/components/status/StatusReplyingTo.vue
Joaquín Sánchez 9da77637b2
chore: bump to eslint-config v2.8.0 ()
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2024-03-05 14:48:58 +00:00

77 lines
2.1 KiB
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
import { fetchAccountById } from '~/composables/cache'
type WatcherType = [status?: mastodon.v1.Status, v?: boolean]
const props = defineProps<{
status: mastodon.v1.Status
isSelfReply: boolean
}>()
const link = ref()
const targetIsVisible = ref(false)
const isSelf = computed(() => props.status.inReplyToAccountId === props.status.account.id)
const account = ref<mastodon.v1.Account | null | undefined>(isSelf.value ? props.status.account : undefined)
useIntersectionObserver(
link,
([{ intersectionRatio }]) => {
targetIsVisible.value = intersectionRatio > 0.1
},
)
watch(
() => [props.status, targetIsVisible.value] satisfies WatcherType,
([newStatus, newVisible]) => {
if (newStatus.account && newStatus.inReplyToAccountId === newStatus.account.id) {
account.value = newStatus.account
return
}
if (!newVisible)
return
const newId = newStatus.inReplyToAccountId
if (newId) {
fetchAccountById(newStatus.inReplyToAccountId).then((acc) => {
if (newId === props.status.inReplyToAccountId)
account.value = acc
})
return
}
account.value = undefined
},
{ immediate: true, flush: 'post' },
)
</script>
<template>
<NuxtLink
v-if="status.inReplyToId"
ref="link"
flex="~ gap2" items-center h-auto text-sm text-secondary
:to="getStatusInReplyToRoute(status)"
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
text-blue saturate-50 hover:saturate-100
>
<template v-if="isSelfReply">
<div i-ri-discuss-line text-blue />
<span>{{ $t('status.show_full_thread') }}</span>
</template>
<template v-else>
<div i-ri-chat-1-line text-blue />
<div ws-nowrap flex>
<i18n-t keypath="status.replying_to">
<template v-if="account">
<AccountInlineInfo :account="account" :link="false" m-inline-2 />
</template>
<template v-else>
{{ $t('status.someone') }}
</template>
</i18n-t>
</div>
</template>
</NuxtLink>
</template>