feat: replace back button with HomeButton and fix view transition

- Use HomeButton component in HeaderNote for logo, hover, and view-transition-name
- Eagerly import HeaderNote in FluxNote so the logo exists in the DOM when the transition snapshot is taken
- Wait for afterEach + nextTick in the view transition hook to handle lazy-loaded routes
- Add cursor: pointer to font change button

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

src/components/FluxNote.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import {
   computed,
-  defineAsyncComponent,
   nextTick,
   onMounted,
   onUnmounted,
@@ -9,6 +8,7 @@ import {
   watch
 } from "vue"
 
+import HeaderNote from "@/components/HeaderNote.vue"
 import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedNote from "@/components/StackedNote.vue"
 import { useLinks } from "@/hooks/useLinks.hook"
@@ -21,10 +21,6 @@ import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"
 
-const HeaderNote = defineAsyncComponent(
-  () => import("@/components/HeaderNote.vue")
-)
-
 const props = withDefaults(
   defineProps<{
     user: string

src/components/HeaderNote.vue

@@ -1,32 +1,13 @@
 <script lang="ts" setup>
 import FontChange from "@/components/FontChange.vue"
+import HomeButton from "@/components/HomeButton.vue"
 
 defineProps<{ user: string; repo: string }>()
 </script>
 
 <template>
   <header class="header-note">
-    <router-link
+    <home-button />
-      :to="{ name: 'Home' }"
-      class="button is-small is-white back-button"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-arrow-narrow-left"
-        width="28"
-        height="28"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <line x1="5" y1="12" x2="19" y2="12" />
-        <line x1="5" y1="12" x2="9" y2="16" />
-        <line x1="5" y1="12" x2="9" y2="8" />
-      </svg>
-    </router-link>
     <!-- <router-link
       :to="{ name: 'SpacedRepetitionCard', params: { user, repo } }"
     >
@@ -168,14 +149,9 @@ defineProps<{ user: string; repo: string }>()
   justify-content: space-between;
   margin-top: 10px;
 
-  img {
+  button {
-    &:hover {
+    color: var(--color-accent);
     cursor: pointer;
   }
 }
-
-  button {
-    color: var(--color-accent);
-  }
-}
 </style>

src/router/router.ts

@@ -104,7 +104,12 @@ router.beforeEach(() => {
       }
     ).startViewTransition(async () => {
       resolve()
-      await nextTick()
+      await new Promise<void>((r) => {
+        const unwatch = router.afterEach(() => {
+          unwatch()
+          nextTick().then(r)
+        })
+      })
     })
   })
 })