feat: make internal app URLs permalinks (#329)

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+import type { ComponentPublicInstance } from 'vue'
+
+definePageMeta({
+  name: 'status',
+})
+
+const route = useRoute()
+const id = $(computedEager(() => route.params.status as string))
+const main = ref<ComponentPublicInstance | null>(null)
+let bottomSpace = $ref(0)
+
+const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
+  window.history.state?.status as Status | undefined)
+  ?? await fetchStatus(id),
+)
+const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
+
+const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
+
+function scrollTo() {
+  const statusElement = unrefElement(main)
+  if (!statusElement)
+    return
+
+  const statusRect = statusElement.getBoundingClientRect()
+  bottomSpace = window.innerHeight - statusRect.height
+  statusElement.scrollIntoView(true)
+}
+
+onMounted(scrollTo)
+
+if (pendingContext) {
+  watchOnce(pendingContext, async () => {
+    await nextTick()
+    scrollTo()
+  })
+}
+
+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">
+      <div v-if="status" min-h-100vh>
+        <template v-if="context">
+          <template v-for="comment of context?.ancestors" :key="comment.id">
+            <StatusCard :status="comment" context="account" border="t base" py3 />
+          </template>
+        </template>
+
+        <StatusDetails
+          ref="main"
+          :status="status"
+          command
+          border="t base"
+          style="scroll-margin-top: 60px"
+        />
+        <PublishWidget
+          v-if="currentUser"
+          :draft-key="replyDraft!.key"
+          :initial="replyDraft!.draft"
+          border="t base"
+          @published="refreshContext()"
+        />
+
+        <template v-if="context">
+          <template v-for="comment of context?.descendants" :key="comment.id">
+            <StatusCard :status="comment" context="account" border="t base" py3 />
+          </template>
+        </template>
+
+        <div border="t base" :style="{ height: `${bottomSpace}px` }" />
+      </div>
+
+      <StatusNotFound v-else :account="$route.params.account" :status="id" />
+    </template>
+
+    <StatusCardSkeleton v-else border="b base" py-3 />
+  </MainContent>
+</template>