feat: scroll to status (#127)

Co-authored-by: Daniel Roe <daniel@roe.dev>

components/status/StatusCard.vue

@@ -38,7 +38,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
+  <div :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />

components/status/StatusDetails.vue

@@ -17,7 +17,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
 </script>
 
 <template>
-  <div flex flex-col gap-2 py3 px-4>
+  <div flex flex-col gap-2 py3 px-4 :id="`status-${status.id}`">
     <AccountInfo :account="status.account" />
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusSpoiler :enabled="status.sensitive">

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

@@ -7,6 +7,13 @@ const main = ref<Component | null>(null)
 
 const status = window.history.state?.status ?? await fetchStatus(id)
 const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
+const unsubscribe = watch(context, async (context) => {
+  if (context) {
+    const statusElement = document.querySelector(`#status-${id}`)
+    statusElement?.scrollIntoView()
+    unsubscribe()
+  }
+}, { flush: 'post' })
 </script>
 
 <template>