fix(frontend): 내 프로필에서 간헐적으로 헤더에 MkFollowButton 컴포넌트가 표시될 수 있음

CHANGELOG_CHERRYPICK.md

@@ -70,6 +70,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Fix: '모든 미디어 노트 간략화하기' 옵션을 활성화하면 미디어가 없는 노트가 잘려서 표시될 수 있음
 - Fix: 모바일 환경에서 헤더 타이틀 부분을 터치할 때 영역이 강조되어 표시될 수 있음
 - Fix: 서브 노트에서 액션 버튼의 클릭 가능 영역이 매우 작게 설정될 수 있음
+- Fix: 내 프로필에서 간헐적으로 헤더에 MkFollowButton 컴포넌트가 표시될 수 있음
 
 ### Server
 - Enhance: (dev) 개발 모드에서 locale 및 유형 정의가 자동으로 재생성됨 (misskey-dev/misskey#12481)

packages/frontend/src/components/MkFollowButton.vue

@@ -53,12 +53,10 @@ import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { $i } from '@/account.js';
 import { userName } from '@/filters/user.js';
-import { globalEvents } from '@/events.js';
 import { vibrate } from '@/scripts/vibrate.js';
 import { defaultStore } from '@/store.js';
 import { useRouter } from '@/router.js';
 
-const showFollowButton = ref(false);
 const router = useRouter();
 
 const props = withDefaults(defineProps<{
@@ -162,9 +160,6 @@ function editProfile() {
 onMounted(() => {
 	connection.on('follow', onFollowChange);
 	connection.on('unfollow', onFollowChange);
-
-	showFollowButton.value = $i != null && $i.id !== props.user.id;
-	globalEvents.emit('showFollowButton', showFollowButton);
 });
 
 onBeforeUnmount(() => {

packages/frontend/src/components/global/CPPageHeader.vue

@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</div>
 	<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
-	<div v-if="metadata && metadata.avatar && showFollowButton" :class="$style.followButton">
+	<div v-if="metadata && metadata.avatar && ($i && $i.username !== metadata.userName?.username)" :class="$style.followButton">
 		<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="!narrow"/>
 	</div>
 </div>
@@ -73,8 +73,6 @@ import { defaultStore } from '@/store.js';
 import { PageHeaderItem } from '@/types/page-header.js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 
-const showFollowButton = ref(false);
-
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
 
@@ -218,10 +216,6 @@ onMounted(() => {
 
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
-
-	globalEvents.on('showFollowButton', (showFollowButton_receive) => {
-		showFollowButton.value = showFollowButton_receive;
-	});
 });
 
 onUnmounted(() => {

packages/frontend/src/components/global/MkPageHeader.vue

@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 		</div>
 		<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
-		<div v-if="metadata && metadata.avatar && showFollowButton" :class="$style.followButton">
+		<div v-if="metadata && metadata.avatar && ($i && $i.username !== metadata.userName?.username)" :class="$style.followButton">
 			<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="!narrow"/>
 		</div>
 	</div>
@@ -81,8 +81,6 @@ import { defaultStore } from '@/store.js';
 import { PageHeaderItem } from '@/types/page-header.js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 
-const showFollowButton = ref(false);
-
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
 
@@ -170,10 +168,6 @@ onMounted(() => {
 
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
-
-	globalEvents.on('showFollowButton', (showFollowButton_receive) => {
-		showFollowButton.value = showFollowButton_receive;
-	});
 });
 
 onUnmounted(() => {