fix: use smoother ease-out-expo curve for logo view transition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import NewVersion from '@/components/NewVersion.vue'
+import NewVersion from "@/components/NewVersion.vue"
-import { useATProtoLogin } from '@/hooks/useATProtoLogin.hook'
+import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 
 const { isReady } = useGitHubLogin()
 const { isATProtoReady } = useATProtoLogin()
@@ -29,6 +29,11 @@ const { isATProtoReady } = useATProtoLogin()
 
 ::view-transition-group(remanso-logo) {
   animation-duration: 0.4s;
-  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+::view-transition-old(remanso-logo),
+::view-transition-new(remanso-logo) {
+  object-fit: contain;
 }
 </style>

src/components/HomeButton.vue

@@ -7,7 +7,7 @@ const goHome = () => router.push({ name: "Home" })
 
 <template>
   <a class="btn btn-ghost btn-circle btn-lg" @click="goHome">
-    <img src="/favicon.png" alt="Remanso icon" />
+    <img src="/favicon.png" alt="Remanso icon" class="remanso-logo" />
   </a>
 </template>
 
@@ -15,4 +15,10 @@ const goHome = () => router.push({ name: "Home" })
 img {
   box-shadow: none;
 }
+
+.remanso-logo {
+  width: 32px;
+  height: 32px;
+  view-transition-name: remanso-logo;
+}
 </style>

src/views/PublicNoteListByDidView.vue

@@ -19,8 +19,7 @@ const author = computedAsync(async () => getAuthor(did.value))
 <template>
   <main class="public-note-list-view">
     <div class="header">
-      <home-button class="back-button" />
+      <home-button />
-      <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
       <h1 v-if="author">{{ author.handle }}</h1>
       <div v-else class="skeleton h-8 w-40"></div>
     </div>
@@ -62,17 +61,6 @@ const author = computedAsync(async () => getAuthor(did.value))
     margin-bottom: 0;
   }
 
-  .back-button {
-    position: absolute;
-  }
-
-  .remanso-logo {
-    width: 32px;
-    height: 32px;
-    box-shadow: none;
-    view-transition-name: remanso-logo;
-  }
-
   @media screen and (min-width: 769px) {
     overflow-y: auto;
   }

src/views/PublicNoteListView.vue

@@ -33,8 +33,7 @@ const following = useFollowingNoteList(follows, followingEnabled)
 <template>
   <main class="public-note-list-view">
     <div class="header">
-      <home-button class="back-button" />
+      <home-button class="home-button" />
-      <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
     </div>
 
     <div v-if="isLoggedIn" role="tablist" class="tabs tabs-border">
@@ -64,7 +63,10 @@ const following = useFollowingNoteList(follows, followingEnabled)
       <template #meta="{ note }">
         <router-link
           v-if="all.getAuthor(note.did)"
-          :to="{ name: 'PublicNoteListByDidView', params: { shortDid: toShortDid(note.did) } }"
+          :to="{
+            name: 'PublicNoteListByDidView',
+            params: { shortDid: toShortDid(note.did) },
+          }"
           class="link link-hover"
         >
           {{ all.getAuthor(note.did) }}
@@ -86,7 +88,10 @@ const following = useFollowingNoteList(follows, followingEnabled)
       <template #meta="{ note }">
         <router-link
           v-if="following.getAuthor(note.did)"
-          :to="{ name: 'PublicNoteListByDidView', params: { shortDid: toShortDid(note.did) } }"
+          :to="{
+            name: 'PublicNoteListByDidView',
+            params: { shortDid: toShortDid(note.did) },
+          }"
           class="link link-hover"
         >
           {{ following.getAuthor(note.did) }}
@@ -132,20 +137,6 @@ const following = useFollowingNoteList(follows, followingEnabled)
     margin-bottom: 0;
   }
 
-  .back-button {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    position: absolute;
-  }
-
-  .remanso-logo {
-    width: 32px;
-    height: 32px;
-    box-shadow: none;
-    view-transition-name: remanso-logo;
-  }
-
   @media screen and (min-width: 769px) {
     overflow-y: auto;
   }

src/views/PublicNoteView.vue

@@ -131,6 +131,8 @@ watch(
           :prefer-fallback="false"
         />
 
+        <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
+
         <theme-swap />
       </div>
       <div class="subheader">
@@ -191,6 +193,13 @@ watch(
     gap: 1rem;
   }
 
+  .remanso-logo {
+    width: 32px;
+    height: 32px;
+    box-shadow: none;
+    view-transition-name: remanso-logo;
+  }
+
   .subheader {
     margin: 1rem auto 0;
   }