feat: add View Transitions API hero animation for favicon between pages

The favicon animates from its large position in the WelcomeWorld title
to the smaller header position in PublicNoteListView and PublicNoteListByDidView.

src/router/router.ts

@@ -1,3 +1,4 @@
+import { nextTick } from "vue"
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
 
 import Home from "@/views/HomeApp.vue"
@@ -93,3 +94,13 @@ export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
+
+router.beforeEach(() => {
+  if (!("startViewTransition" in document)) return
+  return new Promise<void>((resolve) => {
+    ;(document as Document & { startViewTransition: (cb: () => Promise<void>) => void }).startViewTransition(async () => {
+      resolve()
+      await nextTick()
+    })
+  })
+})