wip

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;

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>

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>,
 };

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;