From 3b0ec46990d9ac9ae7f22140dfed5f8b80a4190c Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 4 Oct 2025 17:00:23 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20modal=E3=81=AE=E4=B8=AD?=
 =?UTF-8?q?=E3=81=A7tabs=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E9=9A=9B=E3=81=AB=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88?=
 =?UTF-8?q?=E3=81=8C=E5=A4=89=E3=81=AA=E4=BD=8D=E7=BD=AE=E3=81=AB=E5=87=BA?=
 =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkModal.vue | 16 ++++++-
 packages/frontend/src/components/MkTabs.vue  | 48 ++++++++++++++------
 packages/frontend/src/di.ts                  |  1 +
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 660d5a26be..8be70373dc 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.transition_modal_leaveTo]: transitionName === 'modal',
 		[$style.transition_send_leaveTo]: transitionName === 'send',
 	})"
-	:duration="transitionDuration" appear @afterLeave="onClosed" @enter="emit('opening')" @afterEnter="onOpened"
+	:duration="transitionDuration" appear @afterLeave="onClosed" @enter="onOpening" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" ref="modalRootEl" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
@@ -97,6 +97,14 @@ const emit = defineEmits<{
 
 provide(DI.inModal, true);
 
+const isTransitioning = ref((() => {
+	if (!prefer.s.animation) return false;
+	if (props.manualShowing === false) return false;
+	return true;
+})());
+
+provide(DI.modalTransitioning, isTransitioning);
+
 const maxHeight = ref<number>();
 const fixed = ref(false);
 const transformOrigin = ref('center');
@@ -285,8 +293,14 @@ const align = () => {
 	content.value.style.top = top + 'px';
 };
 
+const onOpening = () => {
+	emit('opening');
+	isTransitioning.value = true;
+};
+
 const onOpened = () => {
 	emit('opened');
+	isTransitioning.value = false;
 
 	// contentの子要素にアクセスするためレンダリングの完了を待つ必要がある（nextTickが必要）
 	nextTick(() => {
diff --git a/packages/frontend/src/components/MkTabs.vue b/packages/frontend/src/components/MkTabs.vue
index 57fb6548ba..1d45a401c3 100644
--- a/packages/frontend/src/components/MkTabs.vue
+++ b/packages/frontend/src/components/MkTabs.vue
@@ -7,9 +7,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.tabs, { [$style.centered]: props.centered }]">
 	<div :class="$style.tabsInner">
 		<button
-			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
-			class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
-			@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
+			v-for="t in tabs"
+			:ref="(el) => tabRefs[t.key] = (el as HTMLElement)"
+			v-tooltip.noDelay="t.title"
+			class="_button"
+			:class="[$style.tab, {
+				[$style.active]: t.key != null && t.key === tab,
+				[$style.animate]: prefer.s.animation,
+			}]"
+			@mousedown="(ev) => onTabMousedown(t, ev)"
+			@click="(ev) => onTabClick(t, ev)"
 		>
 			<div :class="$style.tabInner">
 				<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
@@ -36,8 +43,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-export type Tab = {
-	key: string;
+export type Tab<K = string> = {
+	key: K;
 	onClick?: (ev: MouseEvent) => void;
 	iconOnly?: boolean;
 	title: string;
@@ -45,17 +52,17 @@ export type Tab = {
 };
 </script>
 
-<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
+<script lang="ts" setup generic="const T extends Tab">
+import { nextTick, onMounted, onUnmounted, useTemplateRef, ref, watch, inject } from 'vue';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
-	tabs?: Tab[];
-	tab?: string;
+	tabs?: T[];
 	centered?: boolean;
 	tabHighlightUpper?: boolean;
 }>(), {
-	tabs: () => ([] as Tab[]),
+	tabs: () => ([] as T[]),
 });
 
 const emit = defineEmits<{
@@ -63,6 +70,10 @@ const emit = defineEmits<{
 	(ev: 'tabClick', key: string);
 }>();
 
+const tab = defineModel<T['key']>('tab');
+
+const modalTransitioning = inject(DI.modalTransitioning, ref(false));
+
 const tabHighlightEl = useTemplateRef('tabHighlightEl');
 const tabRefs: Record<string, HTMLElement | null> = {};
 
@@ -88,7 +99,7 @@ function onTabClick(t: Tab, ev: MouseEvent): void {
 }
 
 function renderTab() {
-	const tabEl = props.tab ? tabRefs[props.tab] : undefined;
+	const tabEl = tab.value ? tabRefs[tab.value] : undefined;
 	if (tabEl && tabHighlightEl.value && tabHighlightEl.value.parentElement) {
 		// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 		// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
@@ -99,7 +110,7 @@ function renderTab() {
 	}
 }
 
-let entering = false;
+let entering = true;
 
 async function enter(el: Element) {
 	if (!(el instanceof HTMLElement)) return;
@@ -138,14 +149,21 @@ function afterLeave(el: Element) {
 }
 
 onMounted(() => {
-	watch([() => props.tab, () => props.tabs], () => {
+	watch([tab, () => props.tabs], () => {
 		nextTick(() => {
 			if (entering) return;
 			renderTab();
 		});
-	}, {
-		immediate: true,
 	});
+
+
+	const modalTransitioningWatchStop = watch(modalTransitioning, (to) => {
+		if (!to) {
+			entering = false;
+			renderTab();
+			modalTransitioningWatchStop();
+		}
+	}, { immediate: true });
 });
 
 onUnmounted(() => {
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
index e2590da60b..759965a98e 100644
--- a/packages/frontend/src/di.ts
+++ b/packages/frontend/src/di.ts
@@ -16,5 +16,6 @@ export const DI = {
 	currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
 	mfmEmojiReactCallback: Symbol() as InjectionKey<(emoji: string) => void>,
 	inModal: Symbol() as InjectionKey<boolean>,
+	modalTransitioning: Symbol() as InjectionKey<Ref<boolean>>,
 	inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
 };