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] 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';