feat: view-transition-api

components/account/AccountAvatar.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account } = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
 }>()
 
 const loaded = ref(false)
 const error = ref(false)
+
+const viewTransitionStyle = getViewTransitionStyles('account-avatar', { account })
 </script>
 
 <template>
   <img
     :key="account.avatar"
+    v-bind="$attrs"
     width="400"
     height="400"
     select-none
@@ -21,8 +24,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"
   >

components/account/AccountDisplayName.vue

@@ -5,10 +5,13 @@ const { account, hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
   hideEmojis?: boolean
 }>()
+
+const viewTransitionStype = getViewTransitionStyles('account-display-name', { account })
 </script>
 
 <template>
   <ContentRich
+    :style="viewTransitionStype"
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
     :hide-emojis="hideEmojis"

components/account/AccountHandle.vue

@@ -6,10 +6,11 @@ const { account } = defineProps<{
 }>()
 
 const serverName = computed(() => getServerName(account))
+const viewTransitionStyle = getViewTransitionStyles('account-handle', { account })
 </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>

components/account/AccountHeader.vue

@@ -10,7 +10,9 @@
 
 const { t } = useI18n()
 
-const createdAt = useFormattedDateTime(() => account.createdAt, {
+provide(viewTransitionAccountInjectionKey, account)
+
+const createdAt = useFormattedDateTime(() => account.creaedAt, { // TODO: typo
   month: 'long',
   day: 'numeric',
   year: 'numeric',

components/account/AccountHoverCard.vue

@@ -6,6 +6,8 @@ const { account } = defineProps<{
 }>()
 
 const relationship = useRelationship(account)
+
+provide(viewTransitionEnabledInjectionKey, false)
 </script>
 
 <template>

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 />

components/main/MainContent.vue

@@ -22,6 +22,8 @@ const containerClass = computed(() => {
 
   return 'lg:sticky lg:top-0'
 })
+
+provide(viewTransitionEnabledInjectionKey, true)
 </script>
 
 <template>
@@ -30,6 +32,7 @@ const containerClass = computed(() => {
       sticky top-0 z10
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
+      style="view-transition-name: header"
       class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
       :class="{
         'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),

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>

components/status/StatusAccountDetails.vue

@@ -1,21 +1,30 @@
 <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
 }>()
 
 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(account) : undefined"
-    flex="~ col" min-w-0 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="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" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
+    <AccountHandle :account="status.account" class="zen-none" />
   </NuxtLink>
 </template>

components/status/StatusActions.vue

@@ -31,10 +31,12 @@ function reply() {
   else
     navigateToStatus({ status: status.value, focusReply: true })
 }
+
+const viewTransitionStyle = getViewTransitionStyles('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')"

components/status/StatusCard.vue

@@ -32,6 +32,8 @@ const status = computed(() => {
   return props.status
 })
 
+provide(viewTransitionStatusInjectionKey, status.value)
+
 // Use original status, avoid connecting a reblog
 const directReply = computed(() => props.hasNewer || (!!status.value.inReplyToId && (status.value.inReplyToId === props.newer?.id || status.value.inReplyToId === props.newer?.reblog?.id)))
 // Use reblogged status, connect it to further replies
@@ -67,6 +69,11 @@ const showUpperBorder = computed(() => props.newer && !directReply.value)
 const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
 
 const forceShow = ref(false)
+
+function goToAccount(account: mastodon.v1.Account) {
+  setViewTransitionTarget({ account, status: status.value })
+  router.push(getAccountRoute(account))
+}
 </script>
 
 <template>
@@ -105,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>
@@ -136,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>
@@ -151,7 +158,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>

components/status/StatusContent.vue

@@ -29,6 +29,8 @@ const hideAllMedia = computed(
     return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
   },
 )
+const viewTransitionStyle = getViewTransitionStyles('status-content')
+
 const embeddedMediaPreference = usePreferences('experimentalEmbeddedMedia')
 const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPreference.value)
 </script>
@@ -40,6 +42,7 @@ const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPref
       '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">

components/status/StatusDetails.vue

@@ -20,6 +20,8 @@ const status = computed(() => {
   return props.status
 })
 
+provide(viewTransitionStatusInjectionKey, status.value)
+
 const createdAt = useFormattedDateTime(status.value.createdAt)
 
 const { t } = useI18n()

components/status/StatusLink.vue

@@ -23,6 +23,7 @@ function go(evt: MouseEvent | KeyboardEvent) {
     window.open(statusRoute.value.href)
   }
   else {
+    setViewTransitionTarget({ status: props.status })
     cacheStatus(props.status)
     router.push(statusRoute.value)
   }

composables/settings/definition.ts

@@ -29,6 +29,7 @@ export interface PreferencesSettings {
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
   experimentalEmbeddedMedia: boolean
+  experimentalViewTransitions: boolean
 }
 
 export interface UserSettings {
@@ -84,6 +85,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
   experimentalEmbeddedMedia: false,
+  experimentalViewTransitions: false,
 }
 
 export function getDefaultUserSettings(locales: string[]): UserSettings {

composables/view-transition.ts

@@ -0,0 +1,81 @@
+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 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 = {
+    targets: calcTransitionSources(targets),
+    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)
+  if (!isEnabledInContext)
+    return {}
+
+  const calcedSources = calcTransitionSources({
+    status: sources?.status || inject(viewTransitionStatusInjectionKey, undefined),
+    account: sources?.account || inject(viewTransitionAccountInjectionKey, undefined),
+  })
+
+  return computed(() => {
+    const isEnabledInPreferences = usePreferences('experimentalViewTransitions').value
+    if (!isEnabledInPreferences || !shouldTakePartInTransition(calcedSources))
+      return {}
+
+    return { 'view-transition-name': viewTransitionName }
+  })
+}
+
+function shouldTakePartInTransition(sources: ViewTransitionSources) {
+  const state = getViewTransitionState().value
+  if (!state?.targets.account && !state?.targets.status)
+    return false
+
+  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) // the navigation source was an avatar not a status
+      return state.targets.account?.id === sources.account.id
+  }
+  else {
+    if (state.targets.account && state.targets.account.id !== sources.account?.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,
+  }
+}