From 76dc7affe0fef3cc8d8c20a12f3a8cb182d4cb42 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 14 Mar 2025 20:29:39 +0900
Subject: [PATCH] wip

---
 packages/frontend/src/components/MkNote.vue     | 15 ++++++++++++---
 packages/frontend/src/components/global/MkA.vue |  8 +++++++-
 packages/frontend/src/di.ts                     |  3 ++-
 packages/frontend/src/nirax.ts                  |  2 +-
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 2467a423e9..360f80d6fe 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -177,7 +177,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, watch, provide } from 'vue';
+import { computed, inject, onMounted, ref, shallowRef, watch, provide, reactive, nextTick } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@@ -235,9 +235,18 @@ const props = withDefaults(defineProps<{
 	mock: false,
 });
 
-provide(DI.mock, props.mock);
+const transitionNames = reactive({
+	avatar: '',
+});
 
-const transitionName = prepareViewTransition('note-noteDetailed', props.note.id).avatar;
+provide(DI.mock, props.mock);
+provide(DI.navHook, (path, flag) => {
+	const names = prepareViewTransition(path);
+	transitionNames.avatar = names.avatar;
+	nextTick(() => {
+		router.push(path, flag);
+	});
+});
 
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue
index 173f6a849f..6398d80a99 100644
--- a/packages/frontend/src/components/global/MkA.vue
+++ b/packages/frontend/src/components/global/MkA.vue
@@ -20,6 +20,7 @@ import * as os from '@/os.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router/supplier.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	to: string;
@@ -37,6 +38,7 @@ const el = shallowRef<HTMLElement>();
 defineExpose({ $el: el });
 
 const router = useRouter();
+const navHook = inject(DI.navHook, null);
 
 const active = computed(() => {
 	if (props.activeClass == null) return false;
@@ -99,6 +101,10 @@ function nav(ev: MouseEvent) {
 		return openWindow();
 	}
 
-	router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
+	if (navHook != null) {
+		navHook(props.to, ev.ctrlKey ? 'forcePage' : null);
+	} else {
+		router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
+	}
 }
 </script>
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
index d96eeebca1..58695f4772 100644
--- a/packages/frontend/src/di.ts
+++ b/packages/frontend/src/di.ts
@@ -4,7 +4,7 @@
  */
 
 import type { InjectionKey, Ref } from 'vue';
-import type { IRouter } from '@/nirax.js';
+import type { IRouter, RouterFlag } from '@/nirax.js';
 
 export const DI = {
 	routerCurrentDepth: Symbol() as InjectionKey<number>,
@@ -12,4 +12,5 @@ export const DI = {
 	viewId: Symbol() as InjectionKey<string>,
 	viewTransitionId: Symbol() as InjectionKey<Ref<string>>,
 	mock: Symbol() as InjectionKey<boolean>,
+	navHook: Symbol() as InjectionKey<(path: string, flag?: RouterFlag) => void>,
 };
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index ea3f1fb01a..31d15faf73 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -37,7 +37,7 @@ interface RouteDefWithRedirect extends RouteDefBase {
 
 export type RouteDef = RouteDefWithComponent | RouteDefWithRedirect;
 
-export type RouterFlag = 'forcePage';
+export type RouterFlag = 'forcePage' | null;
 
 type ParsedPath = (string | {
 	name: string;