some more fixes + setting disabled when view-transitions are not supported by the browser

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>

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)

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()

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')"
     >

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)
   })
 })