From 5c6049742186b8df7bce1486965ce036f1093f9d Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sat, 26 Nov 2022 16:38:55 +0100
Subject: [PATCH] feat: scroll to status (#127)

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 components/status/StatusCard.vue    | 2 +-
 components/status/StatusDetails.vue | 2 +-
 pages/@[account]/[status].vue       | 7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index def01689..8d6c220a 100644
--- a/components/status/StatusCard.vue
+++ b/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 />
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 4b59992b..407ef4c3 100644
--- a/components/status/StatusDetails.vue
+++ b/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">
diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
index 96141732..ba8891c3 100644
--- a/pages/@[account]/[status].vue
+++ b/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>