From 017e905072ec388ed76a9a16b48b204a95be00f1 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 12:39:37 -0400
Subject: [PATCH 01/12] implement SkTransitionGroup to dynamically switch
 between TransitionGroup or a native element based on the user's animation
 preference

---
 .../src/components/SkTransitionGroup.vue      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/frontend/src/components/SkTransitionGroup.vue

diff --git a/packages/frontend/src/components/SkTransitionGroup.vue b/packages/frontend/src/components/SkTransitionGroup.vue
new file mode 100644
index 0000000000..1c07186501
--- /dev/null
+++ b/packages/frontend/src/components/SkTransitionGroup.vue
@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<TransitionGroup v-if="animate ?? prefer.s.animation" v-bind="props" :class="props.class">
+	<slot></slot>
+</TransitionGroup>
+<component :is="tag" v-else :class="props.class">
+	<slot></slot>
+</component>
+</template>
+
+<script setup lang="ts">
+import type { TransitionGroupProps } from 'vue';
+import { prefer } from '@/preferences';
+
+// This is a "best guess" type.
+// If any valid :class binding produces a type error here, then please change this to match.
+type ClassBinding = string | Record<string, boolean | undefined>;
+
+// This can be an inline type, but pulling it out makes TS errors clearer.
+interface SkTransitionGroupProps extends TransitionGroupProps {
+	/**
+	 * Override CSS styles for the TransitionGroup or native element.
+	 */
+	class?: undefined | ClassBinding | ClassBinding[];
+
+	/**
+	 * If true, will render a TransitionGroup.
+	 * If false, will render a native element.
+	 * If null or undefined (default), will respect the value of prefer.s.animation.
+	 */
+	animate?: boolean | undefined | null;
+}
+
+const props = withDefaults(defineProps<SkTransitionGroupProps>(), {
+	tag: 'div',
+	class: undefined,
+	animate: undefined,
+});
+</script>

From 8028c4e8c25b06daa92b759e807545d3ebd1e21b Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 12:41:36 -0400
Subject: [PATCH 02/12] use SkTransitionGroup for all dynamic TransitionGroup
 components

---
 packages/frontend/src/components/MkDateSeparatedList.vue | 5 ++---
 packages/frontend/src/components/MkReactionsViewer.vue   | 6 +++---
 packages/frontend/src/ui/_common_/common.vue             | 8 ++++----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 82561055bc..274f206ab6 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -13,6 +13,7 @@ import * as os from '@/os.js';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
 import { getDateText } from '@/utility/timeline-date-separate.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 export default defineComponent({
 	props: {
@@ -141,14 +142,12 @@ export default defineComponent({
 			[$style['direction-up']]: props.direction === 'up',
 		};
 
-		return () => prefer.s.animation ? h(TransitionGroup, {
+		return () => h(SkTransitionGroup, {
 			class: classes,
 			name: 'list',
 			tag: 'div',
 			onBeforeLeave,
 			onLeaveCancelled,
-		}, { default: renderChildren }) : h('div', {
-			class: classes,
 		}, { default: renderChildren });
 	},
 });
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 725978179e..980eeaba7c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<component
-	:is="prefer.s.animation ? TransitionGroup : 'div'"
+<SkTransitionGroup
 	:enterActiveClass="$style.transition_x_enterActive"
 	:leaveActiveClass="$style.transition_x_leaveActive"
 	:enterFromClass="$style.transition_x_enterFrom"
@@ -25,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@reactionToggled="onMockToggleReaction"
 	/>
 	<slot v-if="hasMoreReactions" name="more"/>
-</component>
+</SkTransitionGroup>
 </template>
 
 <script lang="ts" setup>
@@ -35,6 +34,7 @@ import { TransitionGroup } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = withDefaults(defineProps<{
 	noteId: Misskey.entities.Note['id'];
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index da20d23cfd..ac5dad65df 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -65,8 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-on="popup.events"
 />
 
-<component
-	:is="prefer.s.animation ? TransitionGroup : 'div'"
+<SkTransitionGroup
 	tag="div"
 	:class="[$style.notifications, {
 		[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
@@ -85,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
 		<XNotification :notification="notification"/>
 	</div>
-</component>
+</SkTransitionGroup>
 
 <XStreamIndicator/>
 
@@ -97,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, TransitionGroup } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
@@ -111,6 +110,7 @@ import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
 import { store } from '@/store.js';
 import XNavbar from '@/ui/_common_/navbar.vue';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));

From 14bd7f50302e4d252c8c1d595053190ee9a1ff14 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 12:42:58 -0400
Subject: [PATCH 03/12] fix use of :key on "more" slot in MkReactionsViewer

---
 packages/frontend/src/components/MkReactionsViewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 980eeaba7c..b2ee568b3c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:myReaction="props.myReaction"
 		@reactionToggled="onMockToggleReaction"
 	/>
-	<slot v-if="hasMoreReactions" name="more"/>
+	<slot v-if="hasMoreReactions" :key="'$more'" name="more"/>
 </SkTransitionGroup>
 </template>
 
@@ -115,7 +115,7 @@ watch([() => props.reactions, () => props.maxNumber], ([newSource, maxNumber]) =
 	position: absolute;
 }
 
-.root {
+.root, .moreReactions {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;

From 0299e64209649c88e29a6c3339836a6fa4801f74 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 12:43:12 -0400
Subject: [PATCH 04/12] use SkTransitionGroup in all locations that hardcode
 use of TransitionGroup

---
 .../src/components/MkImgWithBlurhash.vue      | 20 ++++++++++---------
 .../components/global/StackingRouterView.vue  | 15 +++++++-------
 packages/frontend/src/pages/chat/XMessage.vue | 15 +++++++-------
 packages/frontend/src/pages/chat/room.vue     | 15 +++++++-------
 .../frontend/src/widgets/WidgetFederation.vue |  5 +++--
 .../frontend/src/widgets/WidgetTrends.vue     |  5 +++--
 6 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index e3a0a371b4..27b8660393 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<TransitionGroup
-		:duration="prefer.s.animation && props.transition?.duration || undefined"
-		:enterActiveClass="prefer.s.animation && props.transition?.enterActiveClass || undefined"
-		:leaveActiveClass="prefer.s.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
-		:enterFromClass="prefer.s.animation && props.transition?.enterFromClass || undefined"
-		:leaveToClass="prefer.s.animation && props.transition?.leaveToClass || undefined"
-		:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined"
-		:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined"
+	<SkTransitionGroup
+		:animate="props.transition != null"
+		:duration="props.transition?.duration"
+		:enterActiveClass="props.transition?.enterActiveClass"
+		:leaveActiveClass="(props.transition?.leaveActiveClass ?? $style.transition_leaveActive)"
+		:enterFromClass="props.transition?.enterFromClass"
+		:leaveToClass="props.transition?.leaveToClass"
+		:enterToClass="props.transition?.enterToClass"
+		:leaveFromClass="props.transition?.leaveFromClass"
 	>
 		<canvas
 			v-show="hide"
@@ -42,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			tabindex="-1"
 			style="-webkit-user-drag: none;"
 		/>
-	</TransitionGroup>
+	</SkTransitionGroup>
 </div>
 </template>
 
@@ -85,6 +86,7 @@ import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref
 import { v4 as uuid } from 'uuid';
 import { render } from 'buraha';
 import { prefer } from '@/preferences.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = withDefaults(defineProps<{
 	transition?: {
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index c95c74aef3..38a5c1ba23 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -4,12 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<TransitionGroup
-	:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
-	:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
-	:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
-	:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
-	:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
+<SkTransitionGroup
+	:enterActiveClass="$style.transition_x_enterActive"
+	:leaveActiveClass="$style.transition_x_leaveActive"
+	:enterFromClass="$style.transition_x_enterFrom"
+	:leaveToClass="$style.transition_x_leaveTo"
+	:moveClass="$style.transition_x_move"
 	:duration="200"
 	tag="div" :class="$style.tabs"
 >
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
-</TransitionGroup>
+</SkTransitionGroup>
 </template>
 
 <script lang="ts" setup>
@@ -47,6 +47,7 @@ import { prefer } from '@/preferences.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = defineProps<{
 	router?: Router;
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index 95f6d870dc..9e030f3028 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -28,12 +28,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA>
 			<MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA>
 		</div>
-		<TransitionGroup
-			:enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''"
-			:leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''"
-			:enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''"
-			:leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''"
-			:moveClass="prefer.s.animation ? $style.transition_reaction_move : ''"
+		<SkTransitionGroup
+			:enterActiveClass="$style.transition_reaction_enterActive"
+			:leaveActiveClass="$style.transition_reaction_leaveActive"
+			:enterFromClass="$style.transition_reaction_enterFrom"
+			:leaveToClass="$style.transition_reaction_leaveTo"
+			:moveClass="$style.transition_reaction_move"
 			tag="div" :class="$style.reactions"
 		>
 			<div v-for="record in message.reactions" :key="record.reaction + record.user.id" :class="[$style.reaction, record.user.id === $i.id ? $style.reactionMy : null]" @click="onReactionClick(record)">
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:class="$style.reactionIcon"
 				/>
 			</div>
-		</TransitionGroup>
+		</SkTransitionGroup>
 	</div>
 </div>
 </template>
@@ -73,6 +73,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const $i = ensureSignin();
 
diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue
index ac13c5fac6..0c21f0505b 100644
--- a/packages/frontend/src/pages/chat/room.vue
+++ b/packages/frontend/src/pages/chat/room.vue
@@ -31,12 +31,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
 				</div>
 
-				<TransitionGroup
-					:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
-					:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
-					:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
-					:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
-					:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
+				<SkTransitionGroup
+					:enterActiveClass="$style.transition_x_enterActive"
+					:leaveActiveClass="$style.transition_x_leaveActive"
+					:enterFromClass="$style.transition_x_enterFrom"
+					:leaveToClass="$style.transition_x_leaveTo"
+					:moveClass="$style.transition_x_move"
 					tag="div" class="_gaps"
 				>
 					<template v-for="item in timeline.toReversed()" :key="item.id">
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
 						</div>
 					</template>
-				</TransitionGroup>
+				</SkTransitionGroup>
 			</div>
 
 			<div v-if="user && (!user.canChat || user.host !== null)">
@@ -111,6 +111,7 @@ import { useRouter } from '@/router.js';
 import { useMutationObserver } from '@/composables/use-mutation-observer.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const $i = ensureSignin();
 const router = useRouter();
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index ca6f27bd09..9893233e33 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="instances">
+		<SkTransitionGroup v-else tag="div" name="chart" class="instances">
 			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
 				<img :src="getInstanceIcon(instance)" alt=""/>
 				<div class="body">
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
 			</div>
-		</TransitionGroup>
+		</SkTransitionGroup>
 	</div>
 </MkContainer>
 </template>
@@ -37,6 +37,7 @@ import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
 import { prefer } from '@/preferences.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const name = 'federation';
 
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index db09031c33..d5e2c930de 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="tags">
+		<SkTransitionGroup v-else tag="div" name="chart" class="tags">
 			<div v-for="stat in stats" :key="stat.tag">
 				<div class="tag">
 					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkMiniChart class="chart" :src="stat.chart"/>
 			</div>
-		</TransitionGroup>
+		</SkTransitionGroup>
 	</div>
 </MkContainer>
 </template>
@@ -35,6 +35,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const name = 'hashtags';
 

From d7428a1577e12bca730042170612bf4d809d51a2 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 13:13:14 -0400
Subject: [PATCH 05/12] fix :animate condition in MkImgWithBlurhash

---
 packages/frontend/src/components/MkImgWithBlurhash.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 27b8660393..a2d4a7a602 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
 	<SkTransitionGroup
-		:animate="props.transition != null"
+		:animate="prefer.s.animation && props.transition != null"
 		:duration="props.transition?.duration"
 		:enterActiveClass="props.transition?.enterActiveClass"
 		:leaveActiveClass="(props.transition?.leaveActiveClass ?? $style.transition_leaveActive)"

From 48b37e0c94bbfdbcbee22acdd60cf1607bf75e18 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 21:39:02 +0900
Subject: [PATCH 06/12] refactor: move to global

---
 packages/frontend/src/components/MkDateSeparatedList.vue     | 1 -
 packages/frontend/src/components/MkImgWithBlurhash.vue       | 5 ++---
 packages/frontend/src/components/MkReactionsViewer.vue       | 5 ++---
 .../{SkTransitionGroup.vue => global/MkTransitionGroup.vue}  | 2 +-
 .../frontend/src/components/global/StackingRouterView.vue    | 5 ++---
 packages/frontend/src/components/index.ts                    | 3 +++
 packages/frontend/src/pages/chat/XMessage.vue                | 5 ++---
 packages/frontend/src/pages/chat/room.vue                    | 5 ++---
 packages/frontend/src/ui/_common_/common.vue                 | 5 ++---
 packages/frontend/src/widgets/WidgetFederation.vue           | 5 ++---
 packages/frontend/src/widgets/WidgetTrends.vue               | 5 ++---
 11 files changed, 20 insertions(+), 26 deletions(-)
 rename packages/frontend/src/components/{SkTransitionGroup.vue => global/MkTransitionGroup.vue} (94%)

diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 274f206ab6..e31e6a2f8d 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -13,7 +13,6 @@ import * as os from '@/os.js';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
 import { getDateText } from '@/utility/timeline-date-separate.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 export default defineComponent({
 	props: {
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index a2d4a7a602..9c1f6f1c9e 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<SkTransitionGroup
+	<MkTransitionGroup
 		:animate="prefer.s.animation && props.transition != null"
 		:duration="props.transition?.duration"
 		:enterActiveClass="props.transition?.enterActiveClass"
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			tabindex="-1"
 			style="-webkit-user-drag: none;"
 		/>
-	</SkTransitionGroup>
+	</MkTransitionGroup>
 </div>
 </template>
 
@@ -86,7 +86,6 @@ import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref
 import { v4 as uuid } from 'uuid';
 import { render } from 'buraha';
 import { prefer } from '@/preferences.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = withDefaults(defineProps<{
 	transition?: {
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index b2ee568b3c..e737b27bad 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<SkTransitionGroup
+<MkTransitionGroup
 	:enterActiveClass="$style.transition_x_enterActive"
 	:leaveActiveClass="$style.transition_x_leaveActive"
 	:enterFromClass="$style.transition_x_enterFrom"
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@reactionToggled="onMockToggleReaction"
 	/>
 	<slot v-if="hasMoreReactions" :key="'$more'" name="more"/>
-</SkTransitionGroup>
+</MkTransitionGroup>
 </template>
 
 <script lang="ts" setup>
@@ -34,7 +34,6 @@ import { TransitionGroup } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = withDefaults(defineProps<{
 	noteId: Misskey.entities.Note['id'];
diff --git a/packages/frontend/src/components/SkTransitionGroup.vue b/packages/frontend/src/components/global/MkTransitionGroup.vue
similarity index 94%
rename from packages/frontend/src/components/SkTransitionGroup.vue
rename to packages/frontend/src/components/global/MkTransitionGroup.vue
index 1c07186501..bb229477cb 100644
--- a/packages/frontend/src/components/SkTransitionGroup.vue
+++ b/packages/frontend/src/components/global/MkTransitionGroup.vue
@@ -35,7 +35,7 @@ interface SkTransitionGroupProps extends TransitionGroupProps {
 	animate?: boolean | undefined | null;
 }
 
-const props = withDefaults(defineProps<SkTransitionGroupProps>(), {
+const props = withDefaults(defineProps<MkTransitionGroupProps>(), {
 	tag: 'div',
 	class: undefined,
 	animate: undefined,
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index 38a5c1ba23..2754c25168 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<SkTransitionGroup
+<MkTransitionGroup
 	:enterActiveClass="$style.transition_x_enterActive"
 	:leaveActiveClass="$style.transition_x_leaveActive"
 	:enterFromClass="$style.transition_x_enterFrom"
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
-</SkTransitionGroup>
+</MkTransitionGroup>
 </template>
 
 <script lang="ts" setup>
@@ -47,7 +47,6 @@ import { prefer } from '@/preferences.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const props = defineProps<{
 	router?: Router;
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 19766e8575..18ab530416 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -27,6 +27,7 @@ import MkLazy from './global/MkLazy.vue';
 import MkResult from './global/MkResult.vue';
 import MkSystemIcon from './global/MkSystemIcon.vue';
 import MkTip from './global/MkTip.vue';
+import MkTransitionGroup from './global/MkTransitionGroup.vue';
 import PageWithHeader from './global/PageWithHeader.vue';
 import PageWithAnimBg from './global/PageWithAnimBg.vue';
 import SearchMarker from './global/SearchMarker.vue';
@@ -67,6 +68,7 @@ export const components = {
 	MkResult: MkResult,
 	MkSystemIcon: MkSystemIcon,
 	MkTip: MkTip,
+	MkTransitionGroup: MkTransitionGroup,
 	PageWithHeader: PageWithHeader,
 	PageWithAnimBg: PageWithAnimBg,
 	SearchMarker: SearchMarker,
@@ -101,6 +103,7 @@ declare module '@vue/runtime-core' {
 		MkResult: typeof MkResult;
 		MkSystemIcon: typeof MkSystemIcon;
 		MkTip: typeof MkTip;
+		MkTransitionGroup: typeof MkTransitionGroup;
 		PageWithHeader: typeof PageWithHeader;
 		PageWithAnimBg: typeof PageWithAnimBg;
 		SearchMarker: typeof SearchMarker;
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index 9e030f3028..d8117021e0 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA>
 			<MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA>
 		</div>
-		<SkTransitionGroup
+		<MkTransitionGroup
 			:enterActiveClass="$style.transition_reaction_enterActive"
 			:leaveActiveClass="$style.transition_reaction_leaveActive"
 			:enterFromClass="$style.transition_reaction_enterFrom"
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:class="$style.reactionIcon"
 				/>
 			</div>
-		</SkTransitionGroup>
+		</MkTransitionGroup>
 	</div>
 </div>
 </template>
@@ -73,7 +73,6 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const $i = ensureSignin();
 
diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue
index 0c21f0505b..e997a9ef24 100644
--- a/packages/frontend/src/pages/chat/room.vue
+++ b/packages/frontend/src/pages/chat/room.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
 				</div>
 
-				<SkTransitionGroup
+				<MkTransitionGroup
 					:enterActiveClass="$style.transition_x_enterActive"
 					:leaveActiveClass="$style.transition_x_leaveActive"
 					:enterFromClass="$style.transition_x_enterFrom"
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
 						</div>
 					</template>
-				</SkTransitionGroup>
+				</MkTransitionGroup>
 			</div>
 
 			<div v-if="user && (!user.canChat || user.host !== null)">
@@ -111,7 +111,6 @@ import { useRouter } from '@/router.js';
 import { useMutationObserver } from '@/composables/use-mutation-observer.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const $i = ensureSignin();
 const router = useRouter();
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index ac5dad65df..afde7e76a4 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-on="popup.events"
 />
 
-<SkTransitionGroup
+<MkTransitionGroup
 	tag="div"
 	:class="[$style.notifications, {
 		[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
 		<XNotification :notification="notification"/>
 	</div>
-</SkTransitionGroup>
+</MkTransitionGroup>
 
 <XStreamIndicator/>
 
@@ -110,7 +110,6 @@ import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
 import { store } from '@/store.js';
 import XNavbar from '@/ui/_common_/navbar.vue';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 9893233e33..2187e1ec3e 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
-		<SkTransitionGroup v-else tag="div" name="chart" class="instances">
+		<MkTransitionGroup v-else tag="div" name="chart" class="instances">
 			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
 				<img :src="getInstanceIcon(instance)" alt=""/>
 				<div class="body">
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
 			</div>
-		</SkTransitionGroup>
+		</MkTransitionGroup>
 	</div>
 </MkContainer>
 </template>
@@ -37,7 +37,6 @@ import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
 import { prefer } from '@/preferences.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const name = 'federation';
 
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index d5e2c930de..221d238c6d 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
-		<SkTransitionGroup v-else tag="div" name="chart" class="tags">
+		<MkTransitionGroup v-else tag="div" name="chart" class="tags">
 			<div v-for="stat in stats" :key="stat.tag">
 				<div class="tag">
 					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkMiniChart class="chart" :src="stat.chart"/>
 			</div>
-		</SkTransitionGroup>
+		</MkTransitionGroup>
 	</div>
 </MkContainer>
 </template>
@@ -35,7 +35,6 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
 
 const name = 'hashtags';
 

From f56afe8aebbf4b0618816ffddcd7ac972b2806d7 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 21:41:04 +0900
Subject: [PATCH 07/12] refactor

---
 .../src/components/global/MkTransitionGroup.vue    | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/global/MkTransitionGroup.vue b/packages/frontend/src/components/global/MkTransitionGroup.vue
index bb229477cb..812d376211 100644
--- a/packages/frontend/src/components/global/MkTransitionGroup.vue
+++ b/packages/frontend/src/components/global/MkTransitionGroup.vue
@@ -13,26 +13,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import type { TransitionGroupProps } from 'vue';
-import { prefer } from '@/preferences';
-
-// This is a "best guess" type.
-// If any valid :class binding produces a type error here, then please change this to match.
-type ClassBinding = string | Record<string, boolean | undefined>;
+import type { TransitionGroupProps, HTMLAttributes } from 'vue';
+import { prefer } from '@/preferences.js';
 
 // This can be an inline type, but pulling it out makes TS errors clearer.
-interface SkTransitionGroupProps extends TransitionGroupProps {
+interface MkTransitionGroupProps extends TransitionGroupProps {
 	/**
 	 * Override CSS styles for the TransitionGroup or native element.
 	 */
-	class?: undefined | ClassBinding | ClassBinding[];
+	class?: HTMLAttributes['class'];
 
 	/**
 	 * If true, will render a TransitionGroup.
 	 * If false, will render a native element.
 	 * If null or undefined (default), will respect the value of prefer.s.animation.
 	 */
-	animate?: boolean | undefined | null;
+	animate?: boolean | null;
 }
 
 const props = withDefaults(defineProps<MkTransitionGroupProps>(), {

From 01c79e0bb38a6efb7b140b5e10dd4276f29f0f51 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 21:50:47 +0900
Subject: [PATCH 08/12] migrate rest of the components

---
 packages/frontend/src/components/MkDateSeparatedList.vue  | 5 +++--
 packages/frontend/src/components/MkDrive.vue              | 6 +++---
 packages/frontend/src/components/MkReactionsViewer.vue    | 1 -
 .../frontend/src/components/MkStreamingNotesTimeline.vue  | 7 +++----
 .../src/components/MkStreamingNotificationsTimeline.vue   | 8 ++++----
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index e31e6a2f8d..dab632f4cd 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -6,8 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <!-- TODO: 親からスタイルを当てにくいことや実装がトリッキーなことを鑑み廃止または使用の縮小(timeline-date-separate.tsを使う) -->
 
 <script lang="ts">
-import { defineComponent, h, TransitionGroup, useCssModule } from 'vue';
+import { defineComponent, h, useCssModule } from 'vue';
 import MkAd from '@/components/global/MkAd.vue';
+import MkTransitionGroup from '@/components/global/MkTransitionGroup.vue';
 import { isDebuggerEnabled, stackTraceInstances } from '@/debug.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
@@ -141,7 +142,7 @@ export default defineComponent({
 			[$style['direction-up']]: props.direction === 'up',
 		};
 
-		return () => h(SkTransitionGroup, {
+		return () => h(MkTransitionGroup, {
 			class: classes,
 			name: 'list',
 			tag: 'div',
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 7e955f1529..4c160b87a0 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -88,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</template>
 
-				<TransitionGroup
+				<MkTransitionGroup
 					tag="div"
 					:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
 					:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
@@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@dragstart="onFileDragstart(file, $event)"
 						@dragend="isDragSource = false"
 					/>
-				</TransitionGroup>
+				</MkTransitionGroup>
 			</MkStickyContainer>
 			<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 
@@ -130,7 +130,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed, TransitionGroup } from 'vue';
+import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import type { MenuItem } from '@/types/menu.js';
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index e737b27bad..556cef9d49 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -30,7 +30,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { inject, watch, ref } from 'vue';
-import { TransitionGroup } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
diff --git a/packages/frontend/src/components/MkStreamingNotesTimeline.vue b/packages/frontend/src/components/MkStreamingNotesTimeline.vue
index 576a0cf8cc..cf55294e9a 100644
--- a/packages/frontend/src/components/MkStreamingNotesTimeline.vue
+++ b/packages/frontend/src/components/MkStreamingNotesTimeline.vue
@@ -19,8 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.newBg2"></div>
 			<button class="_button" :class="$style.newButton" @click="releaseQueue()"><i class="ti ti-circle-arrow-up"></i> {{ i18n.ts.newNote }}</button>
 		</div>
-		<component
-			:is="prefer.s.animation ? TransitionGroup : 'div'"
+		<MkTransitionGroup
 			:class="$style.notes"
 			:enterActiveClass="$style.transition_x_enterActive"
 			:leaveActiveClass="$style.transition_x_leaveActive"
@@ -46,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
 			</template>
-		</component>
+		</MkTransitionGroup>
 		<button v-show="paginator.canFetchOlder.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.fetchingOlder.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else :inline="true"/>
@@ -56,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onUnmounted, provide, useTemplateRef, TransitionGroup, onMounted, shallowRef, ref } from 'vue';
+import { computed, watch, onUnmounted, provide, useTemplateRef, onMounted, shallowRef, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { useInterval } from '@@/js/use-interval.js';
 import { getScrollContainer, scrollToTop } from '@@/js/scroll.js';
diff --git a/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue b/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
index b12effd0d1..0baab3eece 100644
--- a/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
+++ b/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
@@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 
 	<div v-else ref="rootEl">
-		<component
-			:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
+		<MkTransitionGroup
+			:class="[$style.notifications]"
 			:enterActiveClass="$style.transition_x_enterActive"
 			:leaveActiveClass="$style.transition_x_leaveActive"
 			:enterFromClass="$style.transition_x_enterFrom"
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.content" :note="notification.note" :withHardMute="true"/>
 				<XNotification v-else :class="$style.content" :notification="notification" :withTime="true" :full="true"/>
 			</div>
-		</component>
+		</MkTransitionGroup>
 		<button v-show="paginator.canFetchOlder.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.fetchingOlder.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else/>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, useTemplateRef, TransitionGroup } from 'vue';
+import { onUnmounted, onMounted, computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { useInterval } from '@@/js/use-interval.js';
 import type { notificationTypes } from '@@/js/const.js';

From 87b6b7dd8e8a6dd8d59f6725a1e7645590bfc592 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 21:56:29 +0900
Subject: [PATCH 09/12] remove unused imports

---
 packages/frontend/src/components/MkDateSeparatedList.vue     | 1 -
 packages/frontend/src/components/MkReactionsViewer.vue       | 1 -
 .../frontend/src/components/global/StackingRouterView.vue    | 5 ++++-
 packages/frontend/src/pages/chat/room.vue                    | 1 -
 packages/frontend/src/widgets/WidgetFederation.vue           | 1 -
 packages/frontend/src/widgets/WidgetTrends.vue               | 1 -
 6 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index dab632f4cd..af70f1242f 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -12,7 +12,6 @@ import MkTransitionGroup from '@/components/global/MkTransitionGroup.vue';
 import { isDebuggerEnabled, stackTraceInstances } from '@/debug.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
-import { prefer } from '@/preferences.js';
 import { getDateText } from '@/utility/timeline-date-separate.js';
 
 export default defineComponent({
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 556cef9d49..72221ed47a 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -31,7 +31,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import * as Misskey from 'misskey-js';
 import { inject, watch, ref } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
-import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index 2754c25168..25af917729 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -43,7 +43,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { inject, provide, shallowRef } from 'vue';
 import type { Router } from '@/router.js';
-import { prefer } from '@/preferences.js';
+import {
+	
+ } from '@/
+ences.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue
index e997a9ef24..568b7b90f9 100644
--- a/packages/frontend/src/pages/chat/room.vue
+++ b/packages/frontend/src/pages/chat/room.vue
@@ -105,7 +105,6 @@ import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { definePage } from '@/page.js';
-import { prefer } from '@/preferences.js';
 import MkButton from '@/components/MkButton.vue';
 import { useRouter } from '@/router.js';
 import { useMutationObserver } from '@/composables/use-mutation-observer.js';
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 2187e1ec3e..a11bfaffd8 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -36,7 +36,6 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
-import { prefer } from '@/preferences.js';
 
 const name = 'federation';
 
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index 221d238c6d..2e6c0b8ebb 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -34,7 +34,6 @@ import MkContainer from '@/components/MkContainer.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { prefer } from '@/preferences.js';
 
 const name = 'hashtags';
 

From 1f9712a9bb70f3fbb20b7329befde32b74d0394f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 21:58:41 +0900
Subject: [PATCH 10/12] fix

---
 .../frontend/src/components/global/StackingRouterView.vue    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index 25af917729..2754c25168 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -43,10 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { inject, provide, shallowRef } from 'vue';
 import type { Router } from '@/router.js';
-import {
-	
- } from '@/
-ences.js';
+import { prefer } from '@/preferences.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';

From 686aa1dba964f2631465b51a5298d255c5a52a26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 30 May 2025 22:02:03 +0900
Subject: [PATCH 11/12] Update MkReactionsViewer.vue

---
 packages/frontend/src/components/MkReactionsViewer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 72221ed47a..e0deee0655 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -112,7 +112,7 @@ watch([() => props.reactions, () => props.maxNumber], ([newSource, maxNumber]) =
 	position: absolute;
 }
 
-.root, .moreReactions {
+.root {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;

From 83449f73a11947a331d9ae7436c58065fee9509e Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Fri, 30 May 2025 14:55:59 -0400
Subject: [PATCH 12/12] revert changes to MkImgWithBlurhash to fix CSS issue

---
 .../src/components/MkImgWithBlurhash.vue      | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 9c1f6f1c9e..e3a0a371b4 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -5,15 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<MkTransitionGroup
-		:animate="prefer.s.animation && props.transition != null"
-		:duration="props.transition?.duration"
-		:enterActiveClass="props.transition?.enterActiveClass"
-		:leaveActiveClass="(props.transition?.leaveActiveClass ?? $style.transition_leaveActive)"
-		:enterFromClass="props.transition?.enterFromClass"
-		:leaveToClass="props.transition?.leaveToClass"
-		:enterToClass="props.transition?.enterToClass"
-		:leaveFromClass="props.transition?.leaveFromClass"
+	<TransitionGroup
+		:duration="prefer.s.animation && props.transition?.duration || undefined"
+		:enterActiveClass="prefer.s.animation && props.transition?.enterActiveClass || undefined"
+		:leaveActiveClass="prefer.s.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
+		:enterFromClass="prefer.s.animation && props.transition?.enterFromClass || undefined"
+		:leaveToClass="prefer.s.animation && props.transition?.leaveToClass || undefined"
+		:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined"
+		:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined"
 	>
 		<canvas
 			v-show="hide"
@@ -43,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			tabindex="-1"
 			style="-webkit-user-drag: none;"
 		/>
-	</MkTransitionGroup>
+	</TransitionGroup>
 </div>
 </template>