feat: 通知ウィジェットにフィルター、全て既読にするボタンを追加

CHANGELOG_CHERRYPICK.md

@@ -53,6 +53,7 @@
 - Feat: 민감한 미디어를 돋보이게 하는 설정 추가 (misskey-dev/misskey#11851)
 - Feat: 알림에서 답글이 달린 노트의 상위 노트를 표시하지 않도록 하는 설정 추가
 - Feat: 리노트와 인용 버튼을 표시하는 방법을 선택할 수 있음
+- Feat: 알림 위젯에 필터, 모두 읽음 버튼 추가
 - Spec: 사용자 정의 이모티콘 라이센스를 여러 항목으로 추가할 수 있도록 (MisskeyIO/misskey#130)
 - Enhance: 새로운 신고가 있는 경우, 네비게이션 바의 제어판 아이콘과 제어판 페이지의 신고 섹션에 점을 표시
 - Enhance: 스크롤 시 요소 표시 기능을 Friendly 이외의 UI에도 대응

packages/frontend/src/widgets/WidgetNotifications.vue

@@ -7,10 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkContainer :style="`height: ${widgetProps.height}px;`" :showHeader="widgetProps.showHeader" :scrollable="true" data-cy-mkw-notifications class="mkw-notifications">
 	<template #icon><i class="ti ti-bell"></i></template>
 	<template #header>{{ i18n.ts.notifications }}</template>
-	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+	<template #func="{ buttonStyleClass }">
+		<button v-tooltip="i18n.ts.filter" class="_button" :class="buttonStyleClass" @click="setFilter"><i class="ti ti-filter"></i></button>
+		<button v-tooltip="i18n.ts.markAllAsRead" class="_button" :class="buttonStyleClass" @click="os.apiWithDialog('notifications/mark-all-as-read')"><i class="ti ti-check"></i></button>
+		<button v-tooltip="i18n.ts.settings" class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button>
+	</template>
 
 	<div>
-		<XNotifications :includeTypes="widgetProps.includingTypes"/>
+		<XNotifications :includeTypes="includeTypes"/>
 	</div>
 </MkContainer>
 </template>
@@ -23,6 +27,9 @@ import MkContainer from '@/components/MkContainer.vue';
 import XNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { notificationTypes } from '@/const.js';
+
+let includeTypes = $ref<string[] | null>(null);
 
 const name = 'notifications';
 
@@ -65,6 +72,24 @@ const configureNotification = () => {
 	}, 'closed');
 };
 
+const setFilter = (ev) => {
+	const typeItems = notificationTypes.map(t => ({
+		text: i18n.t(`_notification._types.${t}`),
+		active: includeTypes && includeTypes.includes(t),
+		action: () => {
+			includeTypes = [t];
+		},
+	}));
+	const items = includeTypes != null ? [{
+		icon: 'ti ti-x',
+		text: i18n.ts.clear,
+		action: () => {
+			includeTypes = null;
+		},
+	}, null, ...typeItems] : typeItems;
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+};
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,