From c8db2043b5843a6ac6e6bc58ed55fc66833ce0f6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 14 Mar 2025 19:55:45 +0900
Subject: [PATCH] wip

---
 .../frontend/src/components/MkHorizontalSwipe.vue | 15 +++------------
 packages/frontend/src/components/MkNote.vue       |  1 +
 .../frontend/src/components/MkNoteDetailed.vue    |  7 ++++++-
 packages/frontend/src/di.ts                       |  1 +
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index ad85660fc4..6fcebbf04f 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -11,18 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@touchmove.passive="touchMove"
 	@touchend.passive="touchEnd"
 >
-	<Transition
-		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
-		:enterActiveClass="$style.swipeAnimation_enterActive"
-		:leaveActiveClass="$style.swipeAnimation_leaveActive"
-		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
-		:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
-		:style="`--swipe: ${pullDistance}px;`"
-	>
-		<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
-		<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
-		<slot></slot>
-	</Transition>
+	<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
+	<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
+	<slot></slot>
 </div>
 </template>
 <script lang="ts" setup>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index c43cc8f1d5..93a0be55d4 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -224,6 +224,7 @@ import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { prepareViewTransition } from '@/page.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index dd8d3567b2..328c64d27e 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article :class="$style.note" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
-			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
+			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview :style="{ viewTransitionName: transitionName }"/>
 			<div :class="$style.noteHeaderBody">
 				<div>
 					<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
@@ -255,6 +255,7 @@ import { isEnabledUrlPreview } from '@/instance.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
+import { prepareViewTransition } from '@/page.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -263,6 +264,8 @@ const props = withDefaults(defineProps<{
 	initialTab: 'replies',
 });
 
+const transitionName = prepareViewTransition('note-noteDetailed', props.note.id).avatar;
+
 const inChannel = inject('inChannel', null);
 
 const note = ref(deepClone(props.note));
@@ -669,6 +672,8 @@ function loadConversation() {
 	flex-shrink: 0;
 	width: 58px;
 	height: 58px;
+
+	contain: paint;
 }
 
 .noteHeaderBody {
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
index 6683b652c5..d96eeebca1 100644
--- a/packages/frontend/src/di.ts
+++ b/packages/frontend/src/di.ts
@@ -11,4 +11,5 @@ export const DI = {
 	router: Symbol() as InjectionKey<IRouter>,
 	viewId: Symbol() as InjectionKey<string>,
 	viewTransitionId: Symbol() as InjectionKey<Ref<string>>,
+	mock: Symbol() as InjectionKey<boolean>,
 };