From deeb5606d0b5c1da7e5123e02e9b9cb14b410a60 Mon Sep 17 00:00:00 2001
From: horvbalint <horvbalint99@gmail.com>
Date: Sat, 8 Jul 2023 21:39:45 +0200
Subject: [PATCH 01/16] proof-of-concept view-transition-api usage

---
 components/account/AccountAvatar.vue       | 16 +++++++++++++---
 components/account/AccountBigAvatar.vue    |  3 ++-
 components/account/AccountDisplayName.vue  | 13 ++++++++++++-
 components/account/AccountHandle.vue       | 15 ++++++++++++---
 components/account/AccountInfo.vue         |  7 ++++---
 components/account/AccountInlineInfo.vue   |  5 +++--
 components/main/MainContent.vue            | 16 +++++++++++++++-
 components/nav/NavTitle.vue                | 14 +++++++++++++-
 components/status/StatusAccountDetails.vue | 10 +++++-----
 components/status/StatusActions.vue        |  7 ++++++-
 components/status/StatusCard.vue           |  8 ++++----
 components/status/StatusContent.vue        |  5 +++++
 components/status/StatusDetails.vue        |  2 +-
 components/status/StatusLink.vue           | 18 ++++++++++++++++--
 composables/viewTransition.ts              | 11 +++++++++++
 pages/[[server]]/@[account]/[status].vue   |  2 +-
 shims.d.ts                                 |  4 +++-
 17 files changed, 126 insertions(+), 30 deletions(-)
 create mode 100644 composables/viewTransition.ts

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index 26953d8de6..2849b16174 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account, status } = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
+  status?: mastodon.v1.Status
 }>()
 
 const loaded = $ref(false)
 const error = $ref(false)
+
+const viewTransitionStyle = computed(() => {
+  if (!status)
+    return
+
+  const targets = getViewTransitionTargets().value
+  if (targets.statusId === status.id && targets.accountId === account.id)
+    return { 'view-transition-name': 'account-avatar' }
+})
 </script>
 
 <template>
   <img
     :key="account.avatar"
+    v-bind="$attrs"
     width="400"
     height="400"
     select-none
@@ -21,8 +32,7 @@ const error = $ref(false)
     loading="lazy"
     class="account-avatar"
     :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
-    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
-    v-bind="$attrs"
+    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none', ...viewTransitionStyle }"
     @load="loaded = true"
     @error="error = true"
   >
diff --git a/components/account/AccountBigAvatar.vue b/components/account/AccountBigAvatar.vue
index 49ed2318e8..2bcf31df25 100644
--- a/components/account/AccountBigAvatar.vue
+++ b/components/account/AccountBigAvatar.vue
@@ -6,12 +6,13 @@ import type { mastodon } from 'masto'
 
 defineProps<{
   account: mastodon.v1.Account
+  status?: mastodon.v1.Status
   square?: boolean
 }>()
 </script>
 
 <template>
   <div :key="account.avatar" v-bind="$attrs" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :class="{ 'rounded-full': !square }" bg-base w-54px h-54px flex items-center justify-center>
-    <AccountAvatar :account="account" w-48px h-48px :square="square" />
+    <AccountAvatar :account="account" :status="status" w-48px h-48px :square="square" />
   </div>
 </template>
diff --git a/components/account/AccountDisplayName.vue b/components/account/AccountDisplayName.vue
index 9ffeec0276..2283db57d1 100644
--- a/components/account/AccountDisplayName.vue
+++ b/components/account/AccountDisplayName.vue
@@ -1,14 +1,25 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, hideEmojis = false } = defineProps<{
+const { account, hideEmojis = false, status } = defineProps<{
   account: mastodon.v1.Account
   hideEmojis?: boolean
+  status?: mastodon.v1.Status
 }>()
+
+const viewTransitionStyle = computed(() => {
+  if (!status)
+    return
+
+  const targets = getViewTransitionTargets().value
+  if (targets.statusId === status.id && targets.accountId === account.id)
+    return { 'view-transition-name': 'account-display-name' }
+})
 </script>
 
 <template>
   <ContentRich
+    :style="viewTransitionStyle"
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
     :hide-emojis="hideEmojis"
diff --git a/components/account/AccountHandle.vue b/components/account/AccountHandle.vue
index c2a955c532..ff8bf68ed5 100644
--- a/components/account/AccountHandle.vue
+++ b/components/account/AccountHandle.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account } = defineProps<{
+const { account, status } = defineProps<{
   account: mastodon.v1.Account
+  status?: mastodon.v1.Status
 }>()
-
 const serverName = $computed(() => getServerName(account))
+
+const viewTransitionStyle = computed(() => {
+  if (!status)
+    return
+
+  const targets = getViewTransitionTargets().value
+  if (targets.statusId === status.id && targets.accountId === account.id)
+    return { 'view-transition-name': 'account-handle' }
+})
 </script>
 
 <template>
-  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
+  <p :style="viewTransitionStyle" line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
     <!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index cf69b57978..a24d2d1e7b 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -7,6 +7,7 @@ defineOptions({
 
 const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
+  status?: mastodon.v1.Status
   as?: string
   hoverCard?: boolean
   square?: boolean
@@ -18,15 +19,15 @@ const { account, as = 'div' } = defineProps<{
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
-      <AccountBigAvatar :account="account" shrink-0 :square="square" />
+      <AccountBigAvatar :account="account" :status="status" shrink-0 :square="square" />
     </AccountHoverWrapper>
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
-        <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
+        <AccountDisplayName :account="account" :status="status" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
         <AccountLockIndicator v-if="account.bot" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
-      <AccountHandle :account="account" text-secondary-light />
+      <AccountHandle :account="account" :status="status" text-secondary-light />
     </div>
   </component>
 </template>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 70f4c54c16..c2ec59f1ae 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -5,6 +5,7 @@ const { link = true, avatar = true } = defineProps<{
   account: mastodon.v1.Account
   link?: boolean
   avatar?: boolean
+  status?: mastodon.v1.Status
 }>()
 
 const userSettings = useUserSettings()
@@ -24,8 +25,8 @@ export default {
       v-bind="$attrs"
       min-w-0 flex gap-2 items-center
     >
-      <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
+      <AccountAvatar v-if="avatar" :account="account" :status="status" w-5 h-5 />
+      <AccountDisplayName :account="account" :status="status" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 30200eca79..5ef6f09684 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -21,6 +21,20 @@ const containerClass = computed(() => {
 
   return 'lg:sticky lg:top-0'
 })
+
+function goBack() {
+  const router = useRouter()
+
+  if (document.startViewTransition === undefined) {
+    router.go(-1)
+  }
+  else {
+    document.startViewTransition(() => new Promise((resolve) => {
+      router.go(-1)
+      setTimeout(resolve, 100)
+    }))
+  }
+}
 </script>
 
 <template>
@@ -36,7 +50,7 @@ const containerClass = computed(() => {
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
             :aria-label="$t('nav.back')"
-            @click="$router.go(-1)"
+            @click="goBack()"
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index 7485061474..4c8275a52a 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -15,6 +15,18 @@ onMounted(() => {
 router.afterEach(() => {
   back.value = router.options.history.state.back
 })
+
+function goBack() {
+  if (document.startViewTransition === undefined) {
+    router.go(-1)
+  }
+  else {
+    document.startViewTransition(() => new Promise((resolve) => {
+      router.go(-1)
+      setTimeout(resolve, 100)
+    }))
+  }
+}
 </script>
 
 <template>
@@ -40,7 +52,7 @@ router.afterEach(() => {
         <NuxtLink
           :aria-label="$t('nav.back')"
           :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
-          @click="$router.go(-1)"
+          @click="goBack()"
         >
           <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
         </NuxtLink>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 224cba856f..f8aadf0426 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, link = true } = defineProps<{
-  account: mastodon.v1.Account
+const { status, link = true } = defineProps<{
+  status: mastodon.v1.Status
   link?: boolean
 }>()
 
@@ -11,11 +11,11 @@ const userSettings = useUserSettings()
 
 <template>
   <NuxtLink
-    :to="link ? getAccountRoute(account) : undefined"
+    :to="link ? getAccountRoute(status.account) : undefined"
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
-    <AccountHandle :account="account" class="zen-none" />
+    <AccountDisplayName :account="status.account" :status="status" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
+    <AccountHandle :account="status.account" :status="status" class="zen-none" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index eb75e70751..e51f5465d3 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -31,10 +31,15 @@ function reply() {
   else
     navigateToStatus({ status, focusReply: true })
 }
+
+const viewTransitionStyle = computed(() => {
+  if (getViewTransitionTargets().value.statusId === props.status.id)
+    return { 'view-transition-name': 'status-actions' }
+})
 </script>
 
 <template>
-  <div flex justify-between items-center class="status-actions">
+  <div flex justify-between items-center class="status-actions" :style="viewTransitionStyle">
     <div flex-1>
       <StatusActionButton
         :content="$t('action.reply')"
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 085c424187..a1c9560404 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -106,11 +106,11 @@ const forceShow = ref(false)
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">
               <NuxtLink :to="getAccountRoute(rebloggedBy)">
-                <AccountAvatar :account="rebloggedBy" />
+                <AccountAvatar :account="rebloggedBy" :status="status" />
               </NuxtLink>
             </AccountHoverWrapper>
           </div>
-          <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
+          <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" :status="status" text-sm />
         </div>
       </div>
     </slot>
@@ -137,7 +137,7 @@ const forceShow = ref(false)
           </div>
           <AccountHoverWrapper :account="status.account">
             <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
-              <AccountBigAvatar :account="status.account" />
+              <AccountBigAvatar :account="status.account" :status="status" />
             </NuxtLink>
           </AccountHoverWrapper>
 
@@ -151,7 +151,7 @@ const forceShow = ref(false)
           <!-- Account Info -->
           <div flex items-center space-x-1>
             <AccountHoverWrapper :account="status.account">
-              <StatusAccountDetails :account="status.account" />
+              <StatusAccountDetails :status="status" />
             </AccountHoverWrapper>
             <div flex-auto />
             <div v-show="!getPreferences(userSettings, 'zenMode')" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
diff --git a/components/status/StatusContent.vue b/components/status/StatusContent.vue
index 3ef2e3c570..a322134091 100644
--- a/components/status/StatusContent.vue
+++ b/components/status/StatusContent.vue
@@ -29,6 +29,10 @@ const hideAllMedia = computed(
     return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && !!status.mediaAttachments.length) : false
   },
 )
+const viewTransitionStyle = computed(() => {
+  if (getViewTransitionTargets().value.statusId === status.id)
+    return { 'view-transition-name': 'status-content' }
+})
 </script>
 
 <template>
@@ -38,6 +42,7 @@ const hideAllMedia = computed(
       'pt2 pb0.5 px3.5 bg-dm rounded-4 me--1': isDM,
       'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
     }"
+    :style="viewTransitionStyle"
   >
     <StatusBody v-if="(!isFiltered && isSensitiveNonSpoiler) || hideAllMedia" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
     <StatusSpoiler :enabled="hasSpoilerOrSensitiveMedia || isFiltered" :filter="isFiltered" :sensitive-non-spoiler="isSensitiveNonSpoiler || hideAllMedia" :is-d-m="isDM">
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 1b64aa24ae..0ae3f28fcf 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -34,7 +34,7 @@ useHydratedHead({
     <StatusActionsMore :status="status" absolute inset-ie-2 top-2 @after-edit="$emit('refetchStatus')" />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pe5 me-a>
       <AccountHoverWrapper :account="status.account">
-        <AccountInfo :account="status.account" />
+        <AccountInfo :account="status.account" :status="status" />
       </AccountHoverWrapper>
     </NuxtLink>
     <StatusContent :status="status" :newer="newer" context="details" />
diff --git a/components/status/StatusLink.vue b/components/status/StatusLink.vue
index 613042e5b0..79f261ecb3 100644
--- a/components/status/StatusLink.vue
+++ b/components/status/StatusLink.vue
@@ -18,13 +18,27 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
     go(evt)
 }
 
-function go(evt: MouseEvent | KeyboardEvent) {
+async function go(evt: MouseEvent | KeyboardEvent) {
   if (evt.metaKey || evt.ctrlKey) {
     window.open(statusRoute.href)
   }
   else {
+    const targets = getViewTransitionTargets()
+    targets.value.statusId = props.status.id
+    targets.value.accountId = props.status.account.id
     cacheStatus(props.status)
-    router.push(statusRoute)
+
+    await nextTick()
+
+    if (document.startViewTransition === undefined) {
+      router.push(statusRoute)
+    }
+    else {
+      document.startViewTransition(() => new Promise((resolve) => {
+        router.push(statusRoute)
+        setTimeout(resolve, 100)
+      }))
+    }
   }
 }
 </script>
diff --git a/composables/viewTransition.ts b/composables/viewTransition.ts
new file mode 100644
index 0000000000..a3cbcd94f2
--- /dev/null
+++ b/composables/viewTransition.ts
@@ -0,0 +1,11 @@
+interface ViewTransitionTargets {
+  statusId: null | string
+  accountId: null | string
+}
+
+export function getViewTransitionTargets() {
+  return useState('viewTransitionTargets', () => ({
+    statusId: null,
+    accountId: null,
+  } as ViewTransitionTargets))
+}
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index a3aa435057..89d8929cef 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -16,7 +16,7 @@ const main = ref<ComponentPublicInstance | null>(null)
 
 const { data: status, pending, refresh: refreshStatus } = useAsyncData(
   `status:${id}`,
-  () => fetchStatus(id, true),
+  () => fetchStatus(id, false),
   { watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
 )
 const { client } = $(useMasto())
diff --git a/shims.d.ts b/shims.d.ts
index e7c1bef8c2..994023573b 100644
--- a/shims.d.ts
+++ b/shims.d.ts
@@ -4,6 +4,8 @@ declare global {
       test?: boolean
     }
   }
+
+  interface Document { startViewTransition: Function | undefined }
 }
 
-export {}
+export {}
\ No newline at end of file

From 2115df249de0e146f3dbd3fbac103620e6f080e7 Mon Sep 17 00:00:00 2001
From: horvbalint <horvbalint99@gmail.com>
Date: Sun, 9 Jul 2023 18:40:41 +0200
Subject: [PATCH 02/16] built-in nuxt viewTransition + display-name animation
 fix

---
 components/main/MainContent.vue            | 16 +---------------
 components/nav/NavTitle.vue                | 14 +-------------
 components/status/StatusAccountDetails.vue |  2 +-
 components/status/StatusLink.vue           | 12 +-----------
 nuxt.config.ts                             |  1 +
 pages/[[server]]/@[account]/[status].vue   |  2 +-
 6 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 5ef6f09684..30200eca79 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -21,20 +21,6 @@ const containerClass = computed(() => {
 
   return 'lg:sticky lg:top-0'
 })
-
-function goBack() {
-  const router = useRouter()
-
-  if (document.startViewTransition === undefined) {
-    router.go(-1)
-  }
-  else {
-    document.startViewTransition(() => new Promise((resolve) => {
-      router.go(-1)
-      setTimeout(resolve, 100)
-    }))
-  }
-}
 </script>
 
 <template>
@@ -50,7 +36,7 @@ function goBack() {
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
             :aria-label="$t('nav.back')"
-            @click="goBack()"
+            @click="$router.go(-1)"
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index 4c8275a52a..7485061474 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -15,18 +15,6 @@ onMounted(() => {
 router.afterEach(() => {
   back.value = router.options.history.state.back
 })
-
-function goBack() {
-  if (document.startViewTransition === undefined) {
-    router.go(-1)
-  }
-  else {
-    document.startViewTransition(() => new Promise((resolve) => {
-      router.go(-1)
-      setTimeout(resolve, 100)
-    }))
-  }
-}
 </script>
 
 <template>
@@ -52,7 +40,7 @@ function goBack() {
         <NuxtLink
           :aria-label="$t('nav.back')"
           :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
-          @click="goBack()"
+          @click="$router.go(-1)"
         >
           <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
         </NuxtLink>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index f8aadf0426..78a1821608 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -12,7 +12,7 @@ const userSettings = useUserSettings()
 <template>
   <NuxtLink
     :to="link ? getAccountRoute(status.account) : undefined"
-    flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
+    flex="~ col" min-w-0 items-start md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
     <AccountDisplayName :account="status.account" :status="status" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
diff --git a/components/status/StatusLink.vue b/components/status/StatusLink.vue
index 79f261ecb3..6cb9513edd 100644
--- a/components/status/StatusLink.vue
+++ b/components/status/StatusLink.vue
@@ -28,17 +28,7 @@ async function go(evt: MouseEvent | KeyboardEvent) {
     targets.value.accountId = props.status.account.id
     cacheStatus(props.status)
 
-    await nextTick()
-
-    if (document.startViewTransition === undefined) {
-      router.push(statusRoute)
-    }
-    else {
-      document.startViewTransition(() => new Promise((resolve) => {
-        router.push(statusRoute)
-        setTimeout(resolve, 100)
-      }))
-    }
+    router.push(statusRoute)
   }
 }
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4f9564e894..01c213c690 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -44,6 +44,7 @@ export default defineNuxtConfig({
     payloadExtraction: false,
     inlineSSRStyles: false,
     renderJsonPayloads: true,
+    viewTransition: true,
   },
   css: [
     '@unocss/reset/tailwind.css',
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 89d8929cef..7652caf0f7 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -16,7 +16,7 @@ const main = ref<ComponentPublicInstance | null>(null)
 
 const { data: status, pending, refresh: refreshStatus } = useAsyncData(
   `status:${id}`,
-  () => fetchStatus(id, false),
+  () => fetchStatus(id),
   { watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
 )
 const { client } = $(useMasto())

From f735d216ed8452db24f04776a8a9eeced6611d04 Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Tue, 16 Jan 2024 08:17:12 +0100
Subject: [PATCH 03/16] wip

---
 .vscode/settings.json                      |  2 +-
 components/account/AccountAvatar.vue       | 12 +---
 components/account/AccountBigAvatar.vue    |  3 +-
 components/account/AccountDisplayName.vue  | 14 +---
 components/account/AccountHandle.vue       | 14 +---
 components/account/AccountHeader.vue       |  2 +
 components/account/AccountInfo.vue         |  7 +-
 components/account/AccountInlineInfo.vue   |  5 +-
 components/status/StatusAccountDetails.vue |  4 +-
 components/status/StatusActions.vue        |  5 +-
 components/status/StatusCard.vue           |  8 ++-
 components/status/StatusContent.vue        |  5 +-
 components/status/StatusDetails.vue        |  4 +-
 components/status/StatusLink.vue           | 10 +--
 composables/view-transition.ts             | 77 ++++++++++++++++++++++
 composables/viewTransition.ts              | 11 ----
 pages/[[server]]/@[account]/[status].vue   | 12 +++-
 pnpm-lock.yaml                             | 51 +++++++++-----
 18 files changed, 156 insertions(+), 90 deletions(-)
 create mode 100644 composables/view-transition.ts
 delete mode 100644 composables/viewTransition.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4b6c677a74..beffb480fe 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,7 @@
     "unstorage"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": false,
   "files.associations": {
diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index 2849b16174..882fd63d91 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, status } = defineProps<{
+const { account } = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
-  status?: mastodon.v1.Status
 }>()
 
 const loaded = $ref(false)
 const error = $ref(false)
 
-const viewTransitionStyle = computed(() => {
-  if (!status)
-    return
-
-  const targets = getViewTransitionTargets().value
-  if (targets.statusId === status.id && targets.accountId === account.id)
-    return { 'view-transition-name': 'account-avatar' }
-})
+const viewTransitionStyle = getViewTransitionStyles('account-avatar', { account })
 </script>
 
 <template>
diff --git a/components/account/AccountBigAvatar.vue b/components/account/AccountBigAvatar.vue
index 2bcf31df25..49ed2318e8 100644
--- a/components/account/AccountBigAvatar.vue
+++ b/components/account/AccountBigAvatar.vue
@@ -6,13 +6,12 @@ import type { mastodon } from 'masto'
 
 defineProps<{
   account: mastodon.v1.Account
-  status?: mastodon.v1.Status
   square?: boolean
 }>()
 </script>
 
 <template>
   <div :key="account.avatar" v-bind="$attrs" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :class="{ 'rounded-full': !square }" bg-base w-54px h-54px flex items-center justify-center>
-    <AccountAvatar :account="account" :status="status" w-48px h-48px :square="square" />
+    <AccountAvatar :account="account" w-48px h-48px :square="square" />
   </div>
 </template>
diff --git a/components/account/AccountDisplayName.vue b/components/account/AccountDisplayName.vue
index 2283db57d1..2dbeef905f 100644
--- a/components/account/AccountDisplayName.vue
+++ b/components/account/AccountDisplayName.vue
@@ -1,25 +1,17 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, hideEmojis = false, status } = defineProps<{
+const { account, hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
   hideEmojis?: boolean
-  status?: mastodon.v1.Status
 }>()
 
-const viewTransitionStyle = computed(() => {
-  if (!status)
-    return
-
-  const targets = getViewTransitionTargets().value
-  if (targets.statusId === status.id && targets.accountId === account.id)
-    return { 'view-transition-name': 'account-display-name' }
-})
+const viewTransitionStype = getViewTransitionStyles('account-display-name', { account })
 </script>
 
 <template>
   <ContentRich
-    :style="viewTransitionStyle"
+    :style="viewTransitionStype"
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
     :hide-emojis="hideEmojis"
diff --git a/components/account/AccountHandle.vue b/components/account/AccountHandle.vue
index ff8bf68ed5..d188c21c40 100644
--- a/components/account/AccountHandle.vue
+++ b/components/account/AccountHandle.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, status } = defineProps<{
+const { account } = defineProps<{
   account: mastodon.v1.Account
-  status?: mastodon.v1.Status
 }>()
-const serverName = $computed(() => getServerName(account))
-
-const viewTransitionStyle = computed(() => {
-  if (!status)
-    return
 
-  const targets = getViewTransitionTargets().value
-  if (targets.statusId === status.id && targets.accountId === account.id)
-    return { 'view-transition-name': 'account-handle' }
-})
+const serverName = $computed(() => getServerName(account))
+const viewTransitionStyle = getViewTransitionStyles('account-handle', { account })
 </script>
 
 <template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index c97cf369ba..416a2f38a3 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -10,6 +10,8 @@ const { client } = $(useMasto())
 
 const { t } = useI18n()
 
+provide(viewTransitionAccountInjectionKey, account)
+
 const createdAt = $(useFormattedDateTime(() => account.createdAt, {
   month: 'long',
   day: 'numeric',
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index f0217181b9..5730a08ab7 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -7,7 +7,6 @@ defineOptions({
 
 const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
-  status?: mastodon.v1.Status
   as?: string
   hoverCard?: boolean
   square?: boolean
@@ -19,16 +18,16 @@ const { account, as = 'div' } = defineProps<{
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
-      <AccountBigAvatar :account="account" :status="status" shrink-0 :square="square" />
+      <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
-        <AccountDisplayName :account="account" :status="status" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
+        <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
         <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
         <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
-      <AccountHandle :account="account" :status="status" text-secondary-light />
+      <AccountHandle :account="account" text-secondary-light />
     </div>
   </component>
 </template>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index c2ec59f1ae..70f4c54c16 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -5,7 +5,6 @@ const { link = true, avatar = true } = defineProps<{
   account: mastodon.v1.Account
   link?: boolean
   avatar?: boolean
-  status?: mastodon.v1.Status
 }>()
 
 const userSettings = useUserSettings()
@@ -25,8 +24,8 @@ export default {
       v-bind="$attrs"
       min-w-0 flex gap-2 items-center
     >
-      <AccountAvatar v-if="avatar" :account="account" :status="status" w-5 h-5 />
-      <AccountDisplayName :account="account" :status="status" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
+      <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
+      <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 78a1821608..e505d706c9 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -15,7 +15,7 @@ const userSettings = useUserSettings()
     flex="~ col" min-w-0 items-start md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <AccountDisplayName :account="status.account" :status="status" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
-    <AccountHandle :account="status.account" :status="status" class="zen-none" />
+    <AccountDisplayName :account="status.account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
+    <AccountHandle :account="status.account" class="zen-none" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index a55d5366f2..568a026a11 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -32,10 +32,7 @@ function reply() {
     navigateToStatus({ status, focusReply: true })
 }
 
-const viewTransitionStyle = computed(() => {
-  if (getViewTransitionTargets().value.statusId === props.status.id)
-    return { 'view-transition-name': 'status-actions' }
-})
+const viewTransitionStyle = getViewTransitionStyles('status-actions')
 </script>
 
 <template>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index ab65ecd102..a686cc6b83 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -32,6 +32,8 @@ const status = $computed(() => {
   return props.status
 })
 
+provide(viewTransitionStatusInjectionKey, status)
+
 // Use original status, avoid connecting a reblog
 const directReply = $computed(() => props.hasNewer || (!!status.inReplyToId && (status.inReplyToId === props.newer?.id || status.inReplyToId === props.newer?.reblog?.id)))
 // Use reblogged status, connect it to further replies
@@ -106,11 +108,11 @@ const forceShow = ref(false)
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">
               <NuxtLink :to="getAccountRoute(rebloggedBy)">
-                <AccountAvatar :account="rebloggedBy" :status="status" />
+                <AccountAvatar :account="rebloggedBy" />
               </NuxtLink>
             </AccountHoverWrapper>
           </div>
-          <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" :status="status" text-sm />
+          <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
         </div>
       </div>
     </slot>
@@ -137,7 +139,7 @@ const forceShow = ref(false)
           </div>
           <AccountHoverWrapper :account="status.account">
             <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
-              <AccountBigAvatar :account="status.account" :status="status" />
+              <AccountBigAvatar :account="status.account" />
             </NuxtLink>
           </AccountHoverWrapper>
 
diff --git a/components/status/StatusContent.vue b/components/status/StatusContent.vue
index 57dead25f5..8c64278be8 100644
--- a/components/status/StatusContent.vue
+++ b/components/status/StatusContent.vue
@@ -29,10 +29,7 @@ const hideAllMedia = computed(
     return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
   },
 )
-const viewTransitionStyle = computed(() => {
-  if (getViewTransitionTargets().value.statusId === status.id)
-    return { 'view-transition-name': 'status-content' }
-})
+const viewTransitionStyle = getViewTransitionStyles('status-content')
 
 const embeddedMediaPreference = $(usePreferences('experimentalEmbeddedMedia'))
 const allowEmbeddedMedia = $computed(() => status.card?.html && embeddedMediaPreference)
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 1df563da55..9674a416c2 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -20,6 +20,8 @@ const status = $computed(() => {
   return props.status
 })
 
+provide(viewTransitionStatusInjectionKey, status)
+
 const createdAt = useFormattedDateTime(status.createdAt)
 
 const { t } = useI18n()
@@ -34,7 +36,7 @@ useHydratedHead({
     <StatusActionsMore :status="status" absolute inset-ie-2 top-2 @after-edit="$emit('refetchStatus')" />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pe5 me-a>
       <AccountHoverWrapper :account="status.account">
-        <AccountInfo :account="status.account" :status="status" />
+        <AccountInfo :account="status.account" />
       </AccountHoverWrapper>
     </NuxtLink>
     <StatusContent :status="status" :newer="newer" context="details" />
diff --git a/components/status/StatusLink.vue b/components/status/StatusLink.vue
index 95ad5ce96f..a9b12b1df4 100644
--- a/components/status/StatusLink.vue
+++ b/components/status/StatusLink.vue
@@ -18,14 +18,16 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
     go(evt)
 }
 
-async function go(evt: MouseEvent | KeyboardEvent) {
+function go(evt: MouseEvent | KeyboardEvent) {
   if (evt.metaKey || evt.ctrlKey) {
     window.open(statusRoute.href)
   }
   else {
-    const targets = getViewTransitionTargets()
-    targets.value.statusId = props.status.id
-    targets.value.accountId = props.status.account.id
+    setViewTransitionTarget()
+    // getViewTransitionState().value = {
+    //   target: props.status,
+    //   setOnPath: useRoute().path,
+    // }
     cacheStatus(props.status)
 
     router.push(statusRoute)
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
new file mode 100644
index 0000000000..7e49a5d96c
--- /dev/null
+++ b/composables/view-transition.ts
@@ -0,0 +1,77 @@
+import type { mastodon } from 'masto'
+
+interface ViewTransitionSources {
+  status?: mastodon.v1.Status
+  account?: mastodon.v1.Account
+}
+
+interface ViewTransitionState {
+  targets: ViewTransitionSources
+  setOnPath: string
+}
+
+function getViewTransitionState() {
+  return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
+}
+
+export const viewTransitionStatusInjectionKey = Symbol('the status of the parent status card') as InjectionKey<mastodon.v1.Status>
+export const viewTransitionAccountInjectionKey = Symbol('the account of the viewed profile') as InjectionKey<mastodon.v1.Account>
+
+export function setViewTransitionTarget(manualSources?: ViewTransitionSources) {
+  const status = manualSources?.status || inject(viewTransitionStatusInjectionKey, undefined)
+  const account = manualSources?.account || inject(viewTransitionAccountInjectionKey, undefined) || status?.account
+
+  getViewTransitionState().value = {
+    targets: {
+      status,
+      account,
+    },
+    setOnPath: useRoute().path,
+  }
+}
+interface ViewTransitionSources {
+  status?: mastodon.v1.Status
+  account?: mastodon.v1.Account
+}
+
+export function getViewTransitionStyles(viewTransitionName: string, sources?: ViewTransitionSources) {
+  return computed(() => {
+    if (shouldTakePartInTransition(sources))
+      return { 'view-transition-name': viewTransitionName }
+    else
+      return {}
+  })
+}
+
+function shouldTakePartInTransition(manualSources?: ViewTransitionSources) {
+  const state = getViewTransitionState().value
+  if (!state)
+    return false
+
+  const sources = {
+    status: manualSources?.status || inject(viewTransitionStatusInjectionKey, null),
+    account: manualSources?.account || inject(viewTransitionAccountInjectionKey, null),
+  }
+
+  const route = useRoute()
+  const currPath = route.path
+  const onProfilePage = route.name === 'account-index'
+  const arrivingOnProfile = state?.setOnPath !== currPath && onProfilePage
+
+  if (arrivingOnProfile) {
+    if (sources.account && !sources.status)
+      return state?.targets.account?.id === sources.account.id
+  }
+  else {
+    let key: keyof ViewTransitionSources
+    for (key in state.targets) {
+      if (!state.targets[key])
+        continue
+
+      if (!sources[key] || sources[key]!.id !== state.targets[key]!.id)
+        return false
+    }
+
+    return true
+  }
+}
diff --git a/composables/viewTransition.ts b/composables/viewTransition.ts
deleted file mode 100644
index a3cbcd94f2..0000000000
--- a/composables/viewTransition.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-interface ViewTransitionTargets {
-  statusId: null | string
-  accountId: null | string
-}
-
-export function getViewTransitionTargets() {
-  return useState('viewTransitionTargets', () => ({
-    statusId: null,
-    accountId: null,
-  } as ViewTransitionTargets))
-}
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index ff2e4711a2..67bbfe666c 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -2,6 +2,7 @@
 // @ts-expect-error missing types
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import type { ComponentPublicInstance } from 'vue'
+import type { mastodon } from 'masto'
 
 definePageMeta({
   name: 'status',
@@ -16,7 +17,7 @@ const main = ref<ComponentPublicInstance | null>(null)
 
 const { data: status, pending, refresh: refreshStatus } = useAsyncData(
   `status:${id}`,
-  () => fetchStatus(id),
+  () => fetchStatus(id), // TODO: check if this change causes problems
   { watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
 )
 const { client } = $(useMasto())
@@ -29,8 +30,13 @@ const { data: context, pending: pendingContext, refresh: refreshContext } = useA
 if (pendingContext)
   watchOnce(pendingContext, scrollTo)
 
-if (pending)
-  watchOnce(pending, scrollTo)
+if (pending) {
+  watchOnce(pending, () => {
+    setViewTransitionTarget({ status: status.value })
+
+    scrollTo()
+  })
+}
 
 async function scrollTo() {
   await nextTick()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68b6afe40e..e879f29964 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -348,7 +348,7 @@ importers:
         version: 1.14.6(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)(nuxt@3.8.2)(postcss@8.4.32)(rollup@3.29.4)(vue@3.3.9)
       nuxt:
         specifier: ^3.7.0
-        version: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@4.5.0)(vue-tsc@1.8.8)
+        version: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@5.0.7)(vue-tsc@1.8.8)
 
 packages:
 
@@ -2968,7 +2968,7 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.0):
+  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@5.0.7):
     resolution: {integrity: sha512-AXNeI1dBilNryCmwuTd3lU7CrPBhzUJ5ntTFiXw9MmFwe5QT3NOxDFOv0gX7z1DFnmBEmx5mPKWysCwh7htEnQ==}
     peerDependencies:
       nuxt: ^3.8.1
@@ -2977,8 +2977,8 @@ packages:
       '@nuxt/kit': 3.8.2(rollup@3.29.4)
       '@nuxt/schema': 3.8.2(rollup@3.29.4)
       execa: 7.2.0
-      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@4.5.0)(vue-tsc@1.8.8)
-      vite: 4.5.0
+      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@5.0.7)(vue-tsc@1.8.8)
+      vite: 5.0.7
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3065,7 +3065,7 @@ packages:
       - utf-8-validate
       - xml2js
 
-  /@nuxt/devtools@1.0.4(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.0):
+  /@nuxt/devtools@1.0.4(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)(nuxt@3.8.2)(rollup@3.29.4)(vite@5.0.7):
     resolution: {integrity: sha512-G1Oo9+TaOYzePIXpNX+Zzalw/rJyIZKZpZmXfzolPlOJSA1i0JKzZX6Z7iQHdqPwNJ8t+HnVaF4PghPIpo1kwg==}
     hasBin: true
     peerDependencies:
@@ -3073,7 +3073,7 @@ packages:
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.6
-      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.0)
+      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(rollup@3.29.4)(vite@5.0.7)
       '@nuxt/devtools-wizard': 1.0.4
       '@nuxt/kit': 3.8.2(rollup@3.29.4)
       birpc: 0.2.14
@@ -3092,7 +3092,7 @@ packages:
       local-pkg: 0.5.0
       magicast: 0.3.2
       nitropack: 2.8.1(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)
-      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@4.5.0)(vue-tsc@1.8.8)
+      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@5.0.7)(vue-tsc@1.8.8)
       nypm: 0.3.3
       ofetch: 1.3.3
       ohash: 1.1.3
@@ -3106,9 +3106,9 @@ packages:
       simple-git: 3.21.0
       sirv: 2.0.3
       unimport: 3.6.0(rollup@3.29.4)
-      vite: 4.5.0
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@4.5.0)
-      vite-plugin-vue-inspector: 4.0.0(vite@4.5.0)
+      vite: 5.0.7
+      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@5.0.7)
+      vite-plugin-vue-inspector: 4.0.0(vite@5.0.7)
       which: 3.0.1
       ws: 8.14.2
     transitivePeerDependencies:
@@ -6066,7 +6066,7 @@ packages:
       '@vueuse/core': 10.2.1(vue@3.3.9)
       '@vueuse/metadata': 10.2.1
       local-pkg: 0.4.3
-      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@4.5.0)(vue-tsc@1.8.8)
+      nuxt: 3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@5.0.7)(vue-tsc@1.8.8)
       vue-demi: 0.14.5(vue@3.3.9)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -11141,7 +11141,7 @@ packages:
       - vue-tsc
       - xml2js
 
-  /nuxt@3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@4.5.0)(vue-tsc@1.8.8):
+  /nuxt@3.8.2(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(eslint@8.49.0)(idb-keyval@6.2.1)(rollup@3.29.4)(typescript@5.1.6)(vite@5.0.7)(vue-tsc@1.8.8):
     resolution: {integrity: sha512-HUAyifmqTs2zcQBGvcby3KNs2pBAk+l7ZbLjD1oCNqQQ+wBuZ1qgLC4Ebu++y4g3o3Y8WAWSvpafbKRLQZziPw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -11155,7 +11155,7 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.0.4(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)(nuxt@3.8.2)(rollup@3.29.4)(vite@4.5.0)
+      '@nuxt/devtools': 1.0.4(@upstash/redis@1.27.1)(@vercel/kv@1.0.1)(idb-keyval@6.2.1)(nuxt@3.8.2)(rollup@3.29.4)(vite@5.0.7)
       '@nuxt/kit': 3.8.2(rollup@3.29.4)
       '@nuxt/schema': 3.8.2(rollup@3.29.4)
       '@nuxt/telemetry': 2.5.2(rollup@3.29.4)
@@ -14540,7 +14540,7 @@ packages:
       - rollup
       - supports-color
 
-  /vite-plugin-inspect@0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@4.5.0):
+  /vite-plugin-inspect@0.7.42(@nuxt/kit@3.8.2)(rollup@3.29.4)(vite@5.0.7):
     resolution: {integrity: sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -14559,7 +14559,7 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 4.5.0
+      vite: 5.0.7
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -14601,6 +14601,25 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /vite-plugin-vue-inspector@4.0.0(vite@5.0.7):
+    resolution: {integrity: sha512-xNjMbRj3YrebuuInTvlC8ghPtzT+3LjMIQPeeR/5CaFd+WcbA9wBnECZmlcP3GITCVED0SxGmTyoJ3iVKsK4vQ==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0
+    dependencies:
+      '@babel/core': 7.23.5
+      '@babel/plugin-proposal-decorators': 7.23.0(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
+      '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
+      '@vue/compiler-dom': 3.3.9
+      kolorist: 1.8.0
+      magic-string: 0.30.5
+      vite: 5.0.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite@4.5.0:
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}

From 3be17277b778c7567a2a8f2dd8497d0ee6057c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=20B=C3=A1lint?= <horvbalint99@gmail.com>
Date: Tue, 16 Jan 2024 10:27:52 +0100
Subject: [PATCH 04/16] works quite good

---
 components/account/AccountInlineInfo.vue   | 15 ++++++--
 components/status/StatusAccountDetails.vue | 15 ++++++--
 components/status/StatusCard.vue           |  9 +++--
 components/status/StatusLink.vue           |  6 +---
 composables/view-transition.ts             | 40 ++++++++++------------
 5 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 70f4c54c16..580c3fa411 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -8,6 +8,16 @@ const { link = true, avatar = true } = defineProps<{
 }>()
 
 const userSettings = useUserSettings()
+
+const router = useRouter()
+const status = inject(viewTransitionStatusInjectionKey)
+function goToAccount(account: mastodon.v1.Account) {
+  if (!link)
+    return
+
+  setViewTransitionTarget({ account, status })
+  router.push(getAccountRoute(account))
+}
 </script>
 
 <script lang="ts">
@@ -19,10 +29,11 @@ export default {
 <template>
   <AccountHoverWrapper :account="account">
     <NuxtLink
-      :to="link ? getAccountRoute(account) : undefined"
       :class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
       v-bind="$attrs"
-      min-w-0 flex gap-2 items-center
+      min-w-0
+      flex gap-2 items-center
+      @click="goToAccount(account)"
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
       <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index e505d706c9..72b82df879 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -7,13 +7,22 @@ const { status, link = true } = defineProps<{
 }>()
 
 const userSettings = useUserSettings()
+
+const router = useRouter()
+function goToAccount(account: mastodon.v1.Account) {
+  if (!link)
+    return
+
+  setViewTransitionTarget({ account, status })
+  router.push(getAccountRoute(account))
+}
 </script>
 
 <template>
   <NuxtLink
-    :to="link ? getAccountRoute(status.account) : undefined"
-    flex="~ col" min-w-0 items-start md:flex="~ row gap-2" md:items-center
-    text-link-rounded
+    flex="~ col"
+    min-w-0 items-start md:flex="~ row gap-2" md:items-center text-link-rounded
+    @click="goToAccount(status.account)"
   >
     <AccountDisplayName :account="status.account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
     <AccountHandle :account="status.account" class="zen-none" />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index a686cc6b83..8769693835 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -69,6 +69,11 @@ const showUpperBorder = $computed(() => props.newer && !directReply)
 const showReplyTo = $computed(() => !replyToMain && !directReply)
 
 const forceShow = ref(false)
+
+function goToAccount(account: mastodon.v1.Account) {
+  setViewTransitionTarget({ account, status })
+  router.push(getAccountRoute(account))
+}
 </script>
 
 <template>
@@ -107,7 +112,7 @@ const forceShow = ref(false)
           <div i-ri:repeat-fill me-46px text-green w-16px h-16px class="status-boosted" />
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">
-              <NuxtLink :to="getAccountRoute(rebloggedBy)">
+              <NuxtLink @click="goToAccount(rebloggedBy)">
                 <AccountAvatar :account="rebloggedBy" />
               </NuxtLink>
             </AccountHoverWrapper>
@@ -138,7 +143,7 @@ const forceShow = ref(false)
             <div i-ri:repeat-fill text-green w-16px h-16px />
           </div>
           <AccountHoverWrapper :account="status.account">
-            <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
+            <NuxtLink rounded-full @click="goToAccount(status.account)">
               <AccountBigAvatar :account="status.account" />
             </NuxtLink>
           </AccountHoverWrapper>
diff --git a/components/status/StatusLink.vue b/components/status/StatusLink.vue
index a9b12b1df4..0dbe03ff96 100644
--- a/components/status/StatusLink.vue
+++ b/components/status/StatusLink.vue
@@ -23,11 +23,7 @@ function go(evt: MouseEvent | KeyboardEvent) {
     window.open(statusRoute.href)
   }
   else {
-    setViewTransitionTarget()
-    // getViewTransitionState().value = {
-    //   target: props.status,
-    //   setOnPath: useRoute().path,
-    // }
+    setViewTransitionTarget({ status: props.status })
     cacheStatus(props.status)
 
     router.push(statusRoute)
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index 7e49a5d96c..b59a73dac8 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -17,15 +17,9 @@ function getViewTransitionState() {
 export const viewTransitionStatusInjectionKey = Symbol('the status of the parent status card') as InjectionKey<mastodon.v1.Status>
 export const viewTransitionAccountInjectionKey = Symbol('the account of the viewed profile') as InjectionKey<mastodon.v1.Account>
 
-export function setViewTransitionTarget(manualSources?: ViewTransitionSources) {
-  const status = manualSources?.status || inject(viewTransitionStatusInjectionKey, undefined)
-  const account = manualSources?.account || inject(viewTransitionAccountInjectionKey, undefined) || status?.account
-
+export function setViewTransitionTarget(targets: ViewTransitionSources) {
   getViewTransitionState().value = {
-    targets: {
-      status,
-      account,
-    },
+    targets: calcTransitionSources(targets),
     setOnPath: useRoute().path,
   }
 }
@@ -45,13 +39,13 @@ export function getViewTransitionStyles(viewTransitionName: string, sources?: Vi
 
 function shouldTakePartInTransition(manualSources?: ViewTransitionSources) {
   const state = getViewTransitionState().value
-  if (!state)
+  if (!state || (!state.targets.account && !state.targets.status))
     return false
 
-  const sources = {
-    status: manualSources?.status || inject(viewTransitionStatusInjectionKey, null),
-    account: manualSources?.account || inject(viewTransitionAccountInjectionKey, null),
-  }
+  const sources = calcTransitionSources({
+    status: manualSources?.status || inject(viewTransitionStatusInjectionKey, undefined),
+    account: manualSources?.account || inject(viewTransitionAccountInjectionKey, undefined),
+  })
 
   const route = useRoute()
   const currPath = route.path
@@ -60,18 +54,22 @@ function shouldTakePartInTransition(manualSources?: ViewTransitionSources) {
 
   if (arrivingOnProfile) {
     if (sources.account && !sources.status)
-      return state?.targets.account?.id === sources.account.id
+      return state.targets.account?.id === sources.account.id
   }
   else {
-    let key: keyof ViewTransitionSources
-    for (key in state.targets) {
-      if (!state.targets[key])
-        continue
+    if (state.targets.account && state.targets.account.id !== sources.account?.id)
+      return false
 
-      if (!sources[key] || sources[key]!.id !== state.targets[key]!.id)
-        return false
-    }
+    if (state.targets.status && state.targets.status.id !== sources.status?.id)
+      return false
 
     return true
   }
 }
+
+function calcTransitionSources(sources: ViewTransitionSources): ViewTransitionSources {
+  return {
+    status: sources.status,
+    account: sources.account || sources.status?.account,
+  }
+}

From bf55726a7f9aef3b2ccb0a345aafda047e0c8706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=20B=C3=A1lint?= <horvbalint99@gmail.com>
Date: Tue, 16 Jan 2024 11:30:32 +0100
Subject: [PATCH 05/16] exclude accout-hover-card from viewTransitions

---
 components/account/AccountHoverCard.vue | 3 +++
 composables/view-transition.ts          | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index 4866b71855..6f56596787 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -6,6 +6,9 @@ const { account } = defineProps<{
 }>()
 
 const relationship = $(useRelationship(account))
+
+provide(viewTransitionAccountInjectionKey, undefined)
+provide(viewTransitionStatusInjectionKey, undefined)
 </script>
 
 <template>
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index b59a73dac8..4e2e733867 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -14,8 +14,8 @@ function getViewTransitionState() {
   return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
 }
 
-export const viewTransitionStatusInjectionKey = Symbol('the status of the parent status card') as InjectionKey<mastodon.v1.Status>
-export const viewTransitionAccountInjectionKey = Symbol('the account of the viewed profile') as InjectionKey<mastodon.v1.Account>
+export const viewTransitionStatusInjectionKey: InjectionKey<undefined | mastodon.v1.Status> = Symbol('the status of the parent status card')
+export const viewTransitionAccountInjectionKey: InjectionKey<undefined | mastodon.v1.Account> = Symbol('the account of the viewed profile')
 
 export function setViewTransitionTarget(targets: ViewTransitionSources) {
   getViewTransitionState().value = {

From 3061cf2776a1361ef3bae380f33f115f082ef43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=20B=C3=A1lint?= <horvbalint99@gmail.com>
Date: Tue, 16 Jan 2024 11:31:36 +0100
Subject: [PATCH 06/16] lint fix

---
 pages/[[server]]/@[account]/[status].vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 67bbfe666c..4913fa4632 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -2,7 +2,6 @@
 // @ts-expect-error missing types
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import type { ComponentPublicInstance } from 'vue'
-import type { mastodon } from 'masto'
 
 definePageMeta({
   name: 'status',

From 0b81088f8aca7ecc18c9258fda0093fd982038ff Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Fri, 19 Jan 2024 08:01:15 +0100
Subject: [PATCH 07/16] fix statuses clipping trough the header and footer
 duting transition

---
 components/main/MainContent.vue | 1 +
 layouts/default.vue             | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 1ab347462c..5a601e6dca 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -30,6 +30,7 @@ const containerClass = computed(() => {
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
       class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
+      style="view-transition-name: header"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
         <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
diff --git a/layouts/default.vue b/layouts/default.vue
index ecf6c106fd..ebef49d7a9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -54,7 +54,7 @@ const isGrayscale = usePreferences('grayscaleMode')
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>
-        <div sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
+        <div sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20" style="view-transition-name: footer">
           <CommonOfflineChecker v-if="isHydrated" />
           <NavBottom v-if="isHydrated" sm:hidden />
         </div>

From d9c2eac85a502224a53b579d92ac6f1a49ba83f6 Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sat, 2 Mar 2024 07:28:35 +0100
Subject: [PATCH 08/16] proper enabled/disabled state

---
 components/account/AccountHoverCard.vue | 3 +--
 components/main/MainContent.vue         | 2 ++
 composables/view-transition.ts          | 9 +++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index 54f5ddea42..bb13338782 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -7,8 +7,7 @@ const { account } = defineProps<{
 
 const relationship = useRelationship(account)
 
-provide(viewTransitionAccountInjectionKey, undefined)
-provide(viewTransitionStatusInjectionKey, undefined)
+provide(viewTransitionEnabledInjectionKey, false)
 </script>
 
 <template>
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 8ffae3e27c..2a5bd2cc3e 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -22,6 +22,8 @@ const containerClass = computed(() => {
 
   return 'lg:sticky lg:top-0'
 })
+
+provide(viewTransitionEnabledInjectionKey, true)
 </script>
 
 <template>
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index f323e953d0..7e708bb63f 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -14,8 +14,9 @@ function getViewTransitionState() {
   return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
 }
 
-export const viewTransitionStatusInjectionKey: InjectionKey<undefined | mastodon.v1.Status> = Symbol('the status of the parent status card')
-export const viewTransitionAccountInjectionKey: InjectionKey<undefined | mastodon.v1.Account> = Symbol('the account of the viewed profile')
+export const viewTransitionEnabledInjectionKey: InjectionKey<boolean> = Symbol('whether view-transition is enabled for this component')
+export const viewTransitionStatusInjectionKey: InjectionKey<undefined | mastodon.v1.Status> = Symbol('the status in context')
+export const viewTransitionAccountInjectionKey: InjectionKey<undefined | mastodon.v1.Account> = Symbol('the account in context')
 
 export function setViewTransitionTarget(targets: ViewTransitionSources) {
   getViewTransitionState().value = {
@@ -29,6 +30,10 @@ interface ViewTransitionSources {
 }
 
 export function getViewTransitionStyles(viewTransitionName: string, sources?: ViewTransitionSources) {
+  const isEnabled = inject(viewTransitionEnabledInjectionKey, false)
+  if (!isEnabled)
+    return {}
+
   const calcedSources = calcTransitionSources({
     status: sources?.status || inject(viewTransitionStatusInjectionKey, undefined),
     account: sources?.account || inject(viewTransitionAccountInjectionKey, undefined),

From a2cd18a097b41e8c80043fe9365752a282bc73ba Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sat, 2 Mar 2024 08:21:09 +0100
Subject: [PATCH 09/16] added preference (experimental section) + like
 notification account support

---
 components/notification/NotificationGroupedLikes.vue | 11 +++++++++--
 composables/settings/definition.ts                   |  2 ++
 composables/view-transition.ts                       |  7 ++++---
 locales/en.json                                      |  2 ++
 middleware/view-transition.global.ts                 |  4 ++++
 pages/settings/preferences/index.vue                 |  9 +++++++++
 6 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 middleware/view-transition.global.ts

diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index 045794ef86..750684d2ea 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { mastodon } from 'masto'
 import type { GroupedLikeNotifications } from '~/types'
 
 const { group } = defineProps<{
@@ -8,6 +9,12 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 const reblogs = computed(() => group.likes.filter(i => i.reblog))
 const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
+
+const router = useRouter()
+function goToAccount(account: mastodon.v1.Account) {
+  setViewTransitionTarget({ account })
+  router.push(getAccountRoute(account))
+}
 </script>
 
 <template>
@@ -18,7 +25,7 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
           <div i-ri:repeat-fill text-xl me-2 color-green />
           <template v-for="i, idx of reblogs" :key="idx">
             <AccountHoverWrapper :account="i.account">
-              <NuxtLink :to="getAccountRoute(i.account)">
+              <NuxtLink @click="goToAccount(i.account)">
                 <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
               </NuxtLink>
             </AccountHoverWrapper>
@@ -31,7 +38,7 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
           <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           <template v-for="i, idx of likes" :key="idx">
             <AccountHoverWrapper :account="i.account">
-              <NuxtLink :to="getAccountRoute(i.account)">
+              <NuxtLink @click="goToAccount(i.account)">
                 <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
               </NuxtLink>
             </AccountHoverWrapper>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 566ac0f5de..9a254a56d7 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -28,6 +28,7 @@ export interface PreferencesSettings {
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
   experimentalEmbeddedMedia: boolean
+  experimentalViewTransitions: boolean
 }
 
 export interface UserSettings {
@@ -82,6 +83,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
   experimentalEmbeddedMedia: false,
+  experimentalViewTransitions: false,
 }
 
 export function getDefaultUserSettings(locales: string[]): UserSettings {
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index 7e708bb63f..19de76a275 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -30,8 +30,9 @@ interface ViewTransitionSources {
 }
 
 export function getViewTransitionStyles(viewTransitionName: string, sources?: ViewTransitionSources) {
-  const isEnabled = inject(viewTransitionEnabledInjectionKey, false)
-  if (!isEnabled)
+  const isEnabledInPreferences = usePreferences('experimentalViewTransitions').value
+  const isEnabledInContext = inject(viewTransitionEnabledInjectionKey, false)
+  if (!isEnabledInPreferences || !isEnabledInContext)
     return {}
 
   const calcedSources = calcTransitionSources({
@@ -58,7 +59,7 @@ function shouldTakePartInTransition(sources: ViewTransitionSources) {
   const arrivingOnProfile = state?.setOnPath !== currPath && onProfilePage
 
   if (arrivingOnProfile) {
-    if (sources.account && !sources.status)
+    if (sources.account && !sources.status) // the navigation source was an avatar not a status
       return state.targets.account?.id === sources.account.id
   }
   else {
diff --git a/locales/en.json b/locales/en.json
index 0b0b62329f..2dadb8d46f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -535,6 +535,8 @@
       "use_star_favorite_icon": "Use star favorite icon",
       "user_picker": "User Picker",
       "user_picker_description": "Displays all avatars of logged accounts in the bottom-left so you can switch quickly between them.",
+      "view_transitions": "View Transitions",
+      "view_transitions_description": "Navigate pages while transitioning the common elements between them.",
       "virtual_scroll": "Virtual Scrolling",
       "virtual_scroll_description": "Use a virtual list in timelines, so a larger number of items can be rendered performantly.",
       "wellbeing": "Wellbeing",
diff --git a/middleware/view-transition.global.ts b/middleware/view-transition.global.ts
new file mode 100644
index 0000000000..16c8253a4a
--- /dev/null
+++ b/middleware/view-transition.global.ts
@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const experimentalViewTransitions = usePreferences('experimentalViewTransitions')
+  to.meta.viewTransition = experimentalViewTransitions.value
+})
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index a45a62f1f6..71856de712 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -160,5 +160,14 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.user_picker_description') }}
       </template>
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'experimentalViewTransitions')"
+      @click="togglePreferences('experimentalViewTransitions')"
+    >
+      {{ $t('settings.preferences.view_transitions') }}
+      <template #description>
+        {{ $t('settings.preferences.view_transitions_description') }}
+      </template>
+    </SettingsToggleItem>
   </MainContent>
 </template>

From e29e2bd3d481c93267951cb9bfaee1d5794516b6 Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sat, 2 Mar 2024 09:14:50 +0100
Subject: [PATCH 10/16] preference ractivity fix

---
 composables/view-transition.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index 19de76a275..49bd031033 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -30,9 +30,8 @@ interface ViewTransitionSources {
 }
 
 export function getViewTransitionStyles(viewTransitionName: string, sources?: ViewTransitionSources) {
-  const isEnabledInPreferences = usePreferences('experimentalViewTransitions').value
   const isEnabledInContext = inject(viewTransitionEnabledInjectionKey, false)
-  if (!isEnabledInPreferences || !isEnabledInContext)
+  if (!isEnabledInContext)
     return {}
 
   const calcedSources = calcTransitionSources({
@@ -41,10 +40,11 @@ export function getViewTransitionStyles(viewTransitionName: string, sources?: Vi
   })
 
   return computed(() => {
-    if (shouldTakePartInTransition(calcedSources))
-      return { 'view-transition-name': viewTransitionName }
-    else
+    const isEnabledInPreferences = usePreferences('experimentalViewTransitions').value
+    if (!isEnabledInPreferences || !shouldTakePartInTransition(calcedSources))
       return {}
+
+    return { 'view-transition-name': viewTransitionName }
   })
 }
 

From 0f1d6f16aeef55700e0d8294df99a0e8997ed5a1 Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sat, 2 Mar 2024 12:23:49 +0100
Subject: [PATCH 11/16] some review fixes

---
 .vscode/settings.json | 2 +-
 pnpm-lock.yaml        | 2 +-
 shims.d.ts            | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index beffb480fe..4b6c677a74 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,7 @@
     "unstorage"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true
   },
   "editor.formatOnSave": false,
   "files.associations": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc8100c239..c7741c7537 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
diff --git a/shims.d.ts b/shims.d.ts
index 994023573b..e7c1bef8c2 100644
--- a/shims.d.ts
+++ b/shims.d.ts
@@ -4,8 +4,6 @@ declare global {
       test?: boolean
     }
   }
-
-  interface Document { startViewTransition: Function | undefined }
 }
 
-export {}
\ No newline at end of file
+export {}

From 515da7bea77762ff3b85580a74e926c5cd5f54a5 Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sun, 17 Mar 2024 20:09:40 +0100
Subject: [PATCH 12/16] wait for transition end before rendering status context
 + review fix + context loading fix

---
 components/account/AccountHeader.vue     |  2 +-
 composables/view-transition.ts           |  5 +++++
 pages/[[server]]/@[account]/[status].vue | 21 +++++++++++++--------
 plugins/view-transition.ts               |  9 +++++++++
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 plugins/view-transition.ts

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 7380117cda..bf2292e30c 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -12,7 +12,7 @@ const { t } = useI18n()
 
 provide(viewTransitionAccountInjectionKey, account)
 
-const createdAt = useFormattedDateTime(() => account.creaedAt, { // TODO: typo
+const createdAt = useFormattedDateTime(() => account.createdAt, {
   month: 'long',
   day: 'numeric',
   year: 'numeric',
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index 49bd031033..e1ac00201b 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -1,4 +1,5 @@
 import type { mastodon } from 'masto'
+import type { ViewTransition } from '#app/plugins/view-transitions.client'
 
 interface ViewTransitionSources {
   status?: mastodon.v1.Status
@@ -14,6 +15,10 @@ function getViewTransitionState() {
   return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
 }
 
+export function getIsViewTransitionFinished() {
+  return useState<boolean>('isVewTransitionFinished', () => true)
+}
+
 export const viewTransitionEnabledInjectionKey: InjectionKey<boolean> = Symbol('whether view-transition is enabled for this component')
 export const viewTransitionStatusInjectionKey: InjectionKey<undefined | mastodon.v1.Status> = Symbol('the status in context')
 export const viewTransitionAccountInjectionKey: InjectionKey<undefined | mastodon.v1.Account> = Symbol('the account in context')
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index c099020cbf..05be8256ed 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -26,17 +26,18 @@ const { data: context, pending: pendingContext, refresh: refreshContext } = useA
   { watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
 )
 
-if (pendingContext)
-  watchOnce(pendingContext, scrollTo)
-
 if (pending) {
   watchOnce(pending, () => {
     setViewTransitionTarget({ status: status.value })
-
     scrollTo()
   })
 }
 
+const viewTransitionFinished = getIsViewTransitionFinished()
+const contextReady = computed(() => !pendingContext.value && viewTransitionFinished.value)
+if (!contextReady.value)
+  watchOnce(contextReady, scrollTo)
+
 async function scrollTo() {
   await nextTick()
 
@@ -74,7 +75,7 @@ onReactivated(() => {
     <template v-if="!pending">
       <template v-if="status">
         <div xl:mt-4 mb="50vh" border="b base">
-          <template v-if="!pendingContext">
+          <template v-if="contextReady">
             <StatusCard
               v-for="(comment, i) of context?.ancestors" :key="comment.id"
               :status="comment" :actions="comment.visibility !== 'direct'" context="account"
@@ -99,7 +100,7 @@ onReactivated(() => {
             @published="refreshContext()"
           />
 
-          <template v-if="!pendingContext">
+          <template v-if="contextReady">
             <DynamicScroller
               v-slot="{ item, index, active }"
               :items="context?.descendants || []"
@@ -121,13 +122,17 @@ onReactivated(() => {
               </DynamicScrollerItem>
             </DynamicScroller>
           </template>
+
+          <TimelineSkeleton v-else />
         </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" />
+    <template v-else>
+      <StatusCardSkeleton border="b base" />
+      <TimelineSkeleton />
+    </template>
   </MainContent>
 </template>
diff --git a/plugins/view-transition.ts b/plugins/view-transition.ts
new file mode 100644
index 0000000000..5bf983ce3d
--- /dev/null
+++ b/plugins/view-transition.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('page:view-transition:start', (transition) => {
+    const viewTransitionFinished = getIsViewTransitionFinished()
+    viewTransitionFinished.value = false
+
+    transition.finished
+      .then(() => viewTransitionFinished.value = true)
+  })
+})

From b4cd163602692d03bb747a53ef26ca668db18c6f Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Sun, 17 Mar 2024 20:17:34 +0100
Subject: [PATCH 13/16] remove unused import

---
 composables/view-transition.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index e1ac00201b..3b7c11b92b 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -1,5 +1,4 @@
 import type { mastodon } from 'masto'
-import type { ViewTransition } from '#app/plugins/view-transitions.client'
 
 interface ViewTransitionSources {
   status?: mastodon.v1.Status

From 6169787b5d8afb71003024a2856c0089f3a3612b Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Tue, 19 Mar 2024 22:25:21 +0100
Subject: [PATCH 14/16] some more fixes + setting disabled when
 view-transitions are not supported by the browser

---
 .../notification/NotificationGroupedLikes.vue    |  4 +++-
 composables/view-transition.ts                   | 16 +++++-----------
 pages/[[server]]/@[account]/[status].vue         | 15 ++++++++++++---
 pages/settings/preferences/index.vue             |  2 ++
 plugins/view-transition.ts                       |  6 +++---
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index 750684d2ea..6f011ab309 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -12,9 +12,11 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 
 const router = useRouter()
 function goToAccount(account: mastodon.v1.Account) {
-  setViewTransitionTarget({ account })
+  setViewTransitionTarget({ account, status: group.status })
   router.push(getAccountRoute(account))
 }
+
+provide(viewTransitionStatusInjectionKey, group.status)
 </script>
 
 <template>
diff --git a/composables/view-transition.ts b/composables/view-transition.ts
index 3b7c11b92b..3b0df14bdb 100644
--- a/composables/view-transition.ts
+++ b/composables/view-transition.ts
@@ -14,8 +14,8 @@ function getViewTransitionState() {
   return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
 }
 
-export function getIsViewTransitionFinished() {
-  return useState<boolean>('isVewTransitionFinished', () => true)
+export function getIsViewTransitionInProgress() {
+  return useState<boolean>('isVewTransitionFinished', () => false)
 }
 
 export const viewTransitionEnabledInjectionKey: InjectionKey<boolean> = Symbol('whether view-transition is enabled for this component')
@@ -28,10 +28,6 @@ export function setViewTransitionTarget(targets: ViewTransitionSources) {
     setOnPath: useRoute().path,
   }
 }
-interface ViewTransitionSources {
-  status?: mastodon.v1.Status
-  account?: mastodon.v1.Account
-}
 
 export function getViewTransitionStyles(viewTransitionName: string, sources?: ViewTransitionSources) {
   const isEnabledInContext = inject(viewTransitionEnabledInjectionKey, false)
@@ -58,13 +54,11 @@ function shouldTakePartInTransition(sources: ViewTransitionSources) {
     return false
 
   const route = useRoute()
-  const currPath = route.path
-  const onProfilePage = route.name === 'account-index'
-  const arrivingOnProfile = state?.setOnPath !== currPath && onProfilePage
+  const onAccountPage = route.name?.toString().startsWith('account-')
+  const arrivingOnProfile = onAccountPage && state.setOnPath !== route.path
 
   if (arrivingOnProfile) {
-    if (sources.account && !sources.status) // the navigation source was an avatar not a status
-      return state.targets.account?.id === sources.account.id
+    return !sources.status && state.targets.account!.id === sources.account?.id
   }
   else {
     if (state.targets.account && state.targets.account.id !== sources.account?.id)
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 05be8256ed..a217378d21 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -33,10 +33,19 @@ if (pending) {
   })
 }
 
-const viewTransitionFinished = getIsViewTransitionFinished()
+const viewTransitionInProgress = getIsViewTransitionInProgress()
+const viewTransitionFinished = ref(!viewTransitionInProgress.value)
+
 const contextReady = computed(() => !pendingContext.value && viewTransitionFinished.value)
-if (!contextReady.value)
-  watchOnce(contextReady, scrollTo)
+
+onActivated(() => {
+  viewTransitionFinished.value = !viewTransitionInProgress.value
+  if (!viewTransitionFinished.value)
+    watchOnce(viewTransitionInProgress, () => viewTransitionFinished.value = true)
+
+  if (!contextReady.value)
+    watchOnce(contextReady, scrollTo)
+})
 
 async function scrollTo() {
   await nextTick()
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 01cfcab7dd..62f61ea3ce 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -6,6 +6,7 @@ useHydratedHead({
 })
 
 const userSettings = useUserSettings()
+const isViewTransitionAvailable = !!document.startViewTransition
 </script>
 
 <template>
@@ -167,6 +168,7 @@ const userSettings = useUserSettings()
       </template>
     </SettingsToggleItem>
     <SettingsToggleItem
+      :disabled="!isViewTransitionAvailable"
       :checked="getPreferences(userSettings, 'experimentalViewTransitions')"
       @click="togglePreferences('experimentalViewTransitions')"
     >
diff --git a/plugins/view-transition.ts b/plugins/view-transition.ts
index 5bf983ce3d..b00f5d5180 100644
--- a/plugins/view-transition.ts
+++ b/plugins/view-transition.ts
@@ -1,9 +1,9 @@
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('page:view-transition:start', (transition) => {
-    const viewTransitionFinished = getIsViewTransitionFinished()
-    viewTransitionFinished.value = false
+    const viewTransitionInProgress = getIsViewTransitionInProgress()
+    viewTransitionInProgress.value = true
 
     transition.finished
-      .then(() => viewTransitionFinished.value = true)
+      .then(() => viewTransitionInProgress.value = false)
   })
 })

From 8069fc95989a836ee86d8313fff0bf47b54ed89f Mon Sep 17 00:00:00 2001
From: Balint Horvath <horvbalint99@gmail.com>
Date: Thu, 21 Mar 2024 08:01:26 +0100
Subject: [PATCH 15/16] use transition.finished.finally instead of .then

---
 plugins/view-transition.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/view-transition.ts b/plugins/view-transition.ts
index b00f5d5180..382b115368 100644
--- a/plugins/view-transition.ts
+++ b/plugins/view-transition.ts
@@ -4,6 +4,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     viewTransitionInProgress.value = true
 
     transition.finished
-      .then(() => viewTransitionInProgress.value = false)
+      .finally(() => viewTransitionInProgress.value = false)
   })
 })

From 2a29728da6f3be49b5ded5a037b36c5a71cd3fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=20B=C3=A1lint?=
 <40771359+horvbalint@users.noreply.github.com>
Date: Fri, 22 Mar 2024 07:26:28 +0100
Subject: [PATCH 16/16] fix typo

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
---
 components/account/AccountDisplayName.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountDisplayName.vue b/components/account/AccountDisplayName.vue
index 2dbeef905f..ccf4ecf17a 100644
--- a/components/account/AccountDisplayName.vue
+++ b/components/account/AccountDisplayName.vue
@@ -6,12 +6,12 @@ const { account, hideEmojis = false } = defineProps<{
   hideEmojis?: boolean
 }>()
 
-const viewTransitionStype = getViewTransitionStyles('account-display-name', { account })
+const viewTransitionStyle = getViewTransitionStyles('account-display-name', { account })
 </script>
 
 <template>
   <ContentRich
-    :style="viewTransitionStype"
+    :style="viewTransitionStyle"
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
     :hide-emojis="hideEmojis"