From 605c74bd096f179884f0d2a178e79f94d0c0c3ca Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 22 Sep 2023 17:03:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=9F=A5=E3=82=A6=E3=82=A3?=
 =?UTF-8?q?=E3=82=B8=E3=82=A7=E3=83=83=E3=83=88=E3=81=AB=E3=83=95=E3=82=A3?=
 =?UTF-8?q?=E3=83=AB=E3=82=BF=E3=83=BC=E3=80=81=E5=85=A8=E3=81=A6=E6=97=A2?=
 =?UTF-8?q?=E8=AA=AD=E3=81=AB=E3=81=99=E3=82=8B=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../src/widgets/WidgetNotifications.vue       | 29 +++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

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