From 53c444ed72a1539b7661774d1e8ce62cea41b996 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Thu, 19 Mar 2026 20:50:11 +0100
Subject: [PATCH] fix: use smoother ease-out-expo curve for logo view
 transition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.vue                           | 13 +++++++++----
 src/components/HomeButton.vue         |  8 +++++++-
 src/views/PublicNoteListByDidView.vue | 14 +-------------
 src/views/PublicNoteListView.vue      | 27 +++++++++------------------
 src/views/PublicNoteView.vue          |  9 +++++++++
 5 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index db1eac5..71ddd9a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import NewVersion from '@/components/NewVersion.vue'
-import { useATProtoLogin } from '@/hooks/useATProtoLogin.hook'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import NewVersion from "@/components/NewVersion.vue"
+import { useATProtoLogin } from "@/hooks/useATProtoLogin.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>
diff --git a/src/components/HomeButton.vue b/src/components/HomeButton.vue
index 56fe23d..3869ad8 100644
--- a/src/components/HomeButton.vue
+++ b/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>
diff --git a/src/views/PublicNoteListByDidView.vue b/src/views/PublicNoteListByDidView.vue
index 63eb727..2436f85 100644
--- a/src/views/PublicNoteListByDidView.vue
+++ b/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" />
-      <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
+      <home-button />
       <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;
   }
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index 9534a5d..8a7174b 100644
--- a/src/views/PublicNoteListView.vue
+++ b/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" />
-      <img src="/favicon.png" alt="Remanso" class="remanso-logo" />
+      <home-button class="home-button" />
     </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;
   }
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 9faa14c..4451d89 100644
--- a/src/views/PublicNoteView.vue
+++ b/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;
   }