elk/pages/[[server]]/@[account]/[status].vue

110 lines
2.9 KiB
Vue
Raw Normal View History

<script setup lang="ts">
2022-11-27 00:35:19 +00:00
import type { ComponentPublicInstance } from 'vue'
definePageMeta({
name: 'status',
key: route => route.path,
})
const route = useRoute()
const id = $(computedEager(() => route.params.status as string))
2022-11-27 00:35:19 +00:00
const main = ref<ComponentPublicInstance | null>(null)
const publishWidget = ref()
const { data: status, pending, refresh: refreshStatus } = useAsyncData(
`status:${id}`,
() => fetchStatus(id),
2023-01-15 08:38:02 +00:00
{ watch: [isHydrated], immediate: isHydrated.value },
)
2023-01-15 08:38:02 +00:00
const { client } = $(useMasto())
const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(
`context:${id}`,
2023-01-15 08:38:02 +00:00
async () => client.v1.statuses.fetchContext(id),
{ watch: [isHydrated], immediate: isHydrated.value },
)
2022-11-27 00:35:19 +00:00
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
2022-11-27 00:35:19 +00:00
function scrollTo() {
const statusElement = unrefElement(main)
if (!statusElement)
return
statusElement.scrollIntoView(true)
}
onMounted(scrollTo)
2022-11-28 11:09:38 +00:00
if (pendingContext) {
watchOnce(pendingContext, async () => {
2022-11-27 00:35:19 +00:00
await nextTick()
scrollTo()
})
}
const focusEditor = () => {
publishWidget.value?.focusEditor?.()
}
provide('focus-editor', focusEditor)
watch(publishWidget, () => {
if (window.history.state.focusReply)
focusEditor()
})
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>
2022-11-26 12:58:10 +00:00
<MainContent back>
2022-11-28 11:09:38 +00:00
<template v-if="!pending">
2023-01-05 12:35:08 +00:00
<div v-if="status" xl:mt-4 border="b base" mb="50vh">
2022-12-26 07:37:42 +00:00
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account"
:has-older="true" :has-newer="true"
2022-12-26 07:37:42 +00:00
/>
</template>
2022-11-28 11:09:38 +00:00
<StatusDetails
ref="main"
:status="status"
command
2022-11-28 11:09:38 +00:00
style="scroll-margin-top: 60px"
2022-12-26 07:37:42 +00:00
:actions="status.visibility !== 'direct'"
2022-11-28 11:09:38 +00:00
/>
<PublishWidget
v-if="currentUser"
ref="publishWidget"
border="y base"
2022-11-28 11:09:38 +00:00
:draft-key="replyDraft!.key"
:initial="replyDraft!.draft"
2022-12-01 07:24:35 +00:00
@published="refreshContext()"
2022-11-28 11:09:38 +00:00
/>
<template v-for="(comment, di) of context?.descendants" :key="comment.id">
2022-12-26 07:37:42 +00:00
<StatusCard
:status="comment"
:actions="comment.visibility !== 'direct'" context="account"
:older="context?.descendants[di + 1]"
:newer="context?.descendants[di - 1]"
:has-newer="di === 0"
:main="status"
2022-12-26 07:37:42 +00:00
/>
</template>
2022-11-28 11:09:38 +00:00
</div>
2023-01-05 16:48:20 +00:00
<StatusNotFound v-else :account="route.params.account as string" :status="id" />
2022-11-28 11:09:38 +00:00
</template>
<StatusCardSkeleton v-else border="b base" />
</MainContent>
</template>