enhance(frontend): 페이지를 새로 불러오지 않고 알림 컴포넌트를 갱신할 수 있음

CHANGELOG_CHERRYPICK.md

@@ -57,6 +57,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
   - 기존 데이터 절약 모드 설정이 재설정됩니다.
 - Enhance: 컴포넌트만 새로 고쳐도 적용할 수 있는 설정은 페이지를 새로 고치지 않고 설정을 반영함
   - 각 기능이 적용되는 컴포넌트(타임라인, 알림)에 따라 해당 컴포넌트만 새로 로드됩니다.
+- Enhance: 페이지를 새로 불러오지 않고 알림 컴포넌트를 갱신할 수 있음
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)

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

@@ -15,8 +15,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
 		<div v-if="!thin_ && (actions && actions.length > 1) && isFriendly" :class="$style.buttonsLeft" style="min-width: initial; margin-right: initial;">
 			<div v-if="!narrow && canBack" style="width: 50px; margin-right: 8px;"/>
+			<div v-if="actions.length >= 3" style="width: 42px;"/>
 			<div style="width: 34px;"/>
 		</div>
+		<div v-if="!thin_ && !narrow && (actions && actions.length == 1) && isFriendly && mainRouter.currentRoute.value.name === 'my-notifications'">
+			<div style="width: 50px; margin-right: 8px;"/>
+		</div>
 		<div v-if="!thin_ && !narrow && (actions && actions.length > 1) && !isFriendly && mainRouter.currentRoute.value.name === 'index'" :class="$style.buttonsLeft" style="margin-right: auto;">
 			<div style="width: 84px;"/>
 		</div>

packages/frontend/src/pages/notifications.vue

@@ -28,10 +28,16 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { notificationTypes } from '@/const.js';
+import { deviceKind } from '@/scripts/device-kind.js';
+import { globalEvents } from '@/events.js';
 
 const tab = ref('all');
 const includeTypes = ref<string[] | null>(null);
-const excludeTypes = computed(() => includeTypes.value ? notificationTypes.filter(t => !includeTypes.value.includes(t)) : null);
+const excludeTypes = computed(() => includeTypes.value ? notificationTypes.filter(t => !includeTypes.value.includes(t)) : undefined);
+
+const props = defineProps<{
+	disableRefreshButton?: boolean;
+}>();
 
 const mentionsPagination = {
 	endpoint: 'notes/mentions' as const,
@@ -64,7 +70,13 @@ function setFilter(ev) {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = computed(() => [tab.value === 'all' ? {
+const headerActions = computed(() => [deviceKind === 'desktop' && !props.disableRefreshButton ? {
+	icon: 'ti ti-refresh',
+	text: i18n.ts.reload,
+	handler: (ev: Event) => {
+		globalEvents.emit('reloadNotification');
+	},
+} : undefined, tab.value === 'all' ? {
 	text: i18n.ts.filter,
 	icon: 'ti ti-filter',
 	highlighted: includeTypes.value != null,

packages/frontend/src/ui/friendly.vue

@@ -126,7 +126,7 @@ import { globalEvents } from '@/events.js';
 import CPAvatar from '@/components/global/CPAvatar-Friendly.vue';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XNotifications = defineAsyncComponent(() => import('@/pages/notifications.vue'));
+const XNotifications = defineAsyncComponent(() => import('@/ui/friendly/notifications.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/friendly/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));

packages/frontend/src/ui/friendly/notifications.vue

@@ -0,0 +1,12 @@
+<!--
+SPDX-FileCopyrightText: syuilo and noridev and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<XNotifications disableRefreshButton/>
+</template>
+
+<script lang="ts" setup>
+import XNotifications from '@/pages/notifications.vue';
+</script>