1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-29 07:58:16 +03:00
elk/pages/[[server]]/@[account]/[status].vue

127 lines
3.8 KiB
Vue

<script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
import type { ComponentPublicInstance } from 'vue'
definePageMeta({
name: 'status',
key: route => route.path,
// GoToSocial
alias: ['/:server?/@:account/statuses/:status'],
})
const route = useRoute()
const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null)
const { data: status, pending, refresh: refreshStatus } = useAsyncData(
`status:${id}`,
() => fetchStatus(id, true),
{ watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
)
const { client } = $(useMasto())
const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(
`context:${id}`,
async () => client.v1.statuses.fetchContext(id),
{ watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
)
if (pendingContext)
watchOnce(pendingContext, scrollTo)
if (pending)
watchOnce(pending, scrollTo)
async function scrollTo() {
await nextTick()
const statusElement = unrefElement(main)
if (!statusElement)
return
statusElement.scrollIntoView(true)
}
const publishWidget = ref()
function focusEditor() {
return publishWidget.value?.focusEditor?.()
}
provide('focus-editor', focusEditor)
watch(publishWidget, () => {
if (window.history.state.focusReply)
focusEditor()
})
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
onReactivated(() => {
// Silently update data when reentering the page
// The user will see the previous content first, and any changes will be updated to the UI when the request is completed
refreshStatus()
refreshContext()
})
</script>
<template>
<MainContent back>
<template v-if="!pending">
<template v-if="status">
<div xl:mt-4 mb="50vh" border="b base">
<template v-if="!pendingContext">
<StatusCard
v-for="comment, i of context?.ancestors" :key="comment.id"
:status="comment" :actions="comment.visibility !== 'direct'" context="account"
:has-older="true" :newer="context?.ancestors[i - 1]"
/>
</template>
<StatusDetails
ref="main"
:status="status"
:newer="context?.ancestors.at(-1)"
command
style="scroll-margin-top: 60px"
@refetch-status="refreshStatus()"
/>
<PublishWidget
v-if="currentUser"
ref="publishWidget"
border="y base"
:draft-key="replyDraft!.key"
:initial="replyDraft!.draft"
@published="refreshContext()"
/>
<template v-if="!pendingContext">
<DynamicScroller
v-slot="{ item, index, active }"
:items="context?.descendants || []"
:min-item-size="200"
:buffer="800"
key-field="id"
page-mode
>
<DynamicScrollerItem :item="item" :active="active">
<StatusCard
:status="item"
context="account"
:older="context?.descendants[index + 1]"
:newer="index > 0 ? context?.descendants[index - 1] : status"
:has-newer="index === 0"
:main="status"
/>
</DynamicScrollerItem>
</DynamicScroller>
</template>
</div>
</template>
<StatusNotFound v-else :account="route.params.account as string" :status="id" />
</template>
<StatusCardSkeleton v-else border="b base" />
<TimelineSkeleton v-if="pending || pendingContext" />
</MainContent>
</template>