fix(frontend): 알림의 '받은 멘션' 및 '다이렉트 노트' 탭에서 '알림에서 답글이 달린 노트의 상위 노트 표시하기' 옵션이 적용되지 않음

CHANGELOG_CHERRYPICK.md

@@ -60,6 +60,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)
+- Fix: 알림의 '받은 멘션' 및 '다이렉트 노트' 탭에서 '알림에서 답글이 달린 노트의 상위 노트 표시하기' 옵션이 적용되지 않음
 
 ### Server
 - Enhance: (dev) 개발 모드에서 locale 및 유형 정의가 자동으로 재생성됨 (misskey-dev/misskey#12481)

packages/frontend/src/components/MkNote.vue

@@ -251,7 +251,6 @@ const props = withDefaults(defineProps<{
   notification?: boolean;
 }>(), {
 	mock: false,
-	notification: false,
 });
 
 provide('mock', props.mock);

packages/frontend/src/components/MkNotes.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:ad="true"
 				:class="$style.notes"
 			>
-				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note" :withHardMute="true"/>
+				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note" :withHardMute="true" :notification="notification"/>
 			</MkDateSeparatedList>
 		</div>
 	</template>
@@ -33,22 +33,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { shallowRef, onMounted } from 'vue';
 import MkNote from '@/components/MkNote.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
+import { globalEvents } from '@/events.js';
 
 const props = defineProps<{
 	pagination: Paging;
 	noGap?: boolean;
 	getDate?: (any) => string; // custom function to separate notes on something that isn't createdAt
 	disableAutoLoad?: boolean;
+  notification?: boolean;
 }>();
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
+onMounted(() => {
+	globalEvents.on('reloadNotification', () => reloadNote());
+});
+
+function reloadNote() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}
+
 defineExpose({
 	pagingComponent,
 });

packages/frontend/src/components/MkNotifications.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template #default="{ items: notifications }">
 			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline || mainRouter.currentRoute.value.name !== 'my-notifications'">
-				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :notification="true" :withHardMute="true"/>
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :withHardMute="true" :notification="true"/>
 				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
 			</MkDateSeparatedList>
 		</template>

packages/frontend/src/pages/notifications.vue

@@ -11,10 +11,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XNotifications class="notifications" :excludeTypes="excludeTypes"/>
 		</div>
 		<div v-else-if="tab === 'mentions'">
-			<MkNotes :pagination="mentionsPagination"/>
+			<MkNotes :pagination="mentionsPagination" :notification="true"/>
 		</div>
 		<div v-else-if="tab === 'directNotes'">
-			<MkNotes :pagination="directNotesPagination"/>
+			<MkNotes :pagination="directNotesPagination" :notification="true"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>