From 8006e7a34d4894e7ae91e5301f9d4f8fe50473de Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 9 Oct 2021 13:12:41 +0900
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E9=80=9A=E7=9F=A5=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=A7=E9=80=9A=E7=9F=A5=E3=81=AE=E7=A8=AE?=
 =?UTF-8?q?=E9=A1=9E=E3=81=AB=E3=82=88=E3=82=8B=E3=83=95=E3=82=A3=E3=83=AB?=
 =?UTF-8?q?=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                       |  1 +
 src/client/components/ui/menu.vue  | 22 +++++++++++++++-------
 src/client/pages/notifications.vue | 27 ++++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6550db980..36cbcb01d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - クライアント: アニメーションを減らす設定をメニューのアニメーションにも適用するように
 - クライアント: MFM関数構文のサジェストを実装
 - クライアント: 未読の通知のみ表示する機能
+- クライアント: 通知ページで通知の種類によるフィルタ
 - ActivityPub: HTML -> MFMの変換を強化
 - API: i/notifications に unreadOnly オプションを追加
 - API: ap系のエンドポイントをログイン必須化+レートリミット追加
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index a55dccdd7..d144e65c8 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -27,7 +27,7 @@
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
+		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
@@ -175,6 +175,10 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
+		> * {
+			position: relative;
+		}
+
 		&.danger {
 			color: #ff2a2a;
 
@@ -195,7 +199,16 @@ export default defineComponent({
 			}
 		}
 
-		&:hover {
+		&.active {
+			color: var(--fgOnAccent);
+			opacity: 1;
+
+			&:before {
+				background: var(--accent);
+			}
+		}
+
+		&:not(:disabled):hover {
 			color: var(--accent);
 			text-decoration: none;
 
@@ -204,11 +217,6 @@ export default defineComponent({
 			}
 		}
 
-		&:active {
-			//color: var(--fgOnAccent);
-			//background: var(--accentDarken);
-		}
-
 		&:not(:active):focus-visible {
 			box-shadow: 0 0 0 2px var(--focus) inset;
 		}
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 9728b87bf..c6d7ea9b3 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -2,7 +2,7 @@
 <div>
 	<MkHeader :info="header"/>
 	<div class="clupoqwt" v-size="{ min: [800] }">
-		<XNotifications class="notifications" @before="before" @after="after" :unread-only="tab === 'unread'"/>
+		<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 	</div>
 </div>
 </template>
@@ -13,6 +13,7 @@ import Progress from '@client/scripts/loading';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
+import { notificationTypes } from '@/types';
 
 export default defineComponent({
 	components: {
@@ -27,11 +28,17 @@ export default defineComponent({
 				bg: 'var(--bg)',
 			},
 			tab: 'all',
+			includeTypes: null,
 			header: computed(() => ({
 				title: this.$ts.notifications,
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
 				actions: [{
+					text: this.$ts.filter,
+					icon: 'fas fa-filter',
+					highlighted: this.includeTypes != null,
+					handler: this.setFilter,
+				}, {
 					text: this.$ts.markAllAsRead,
 					icon: 'fas fa-check',
 					handler: () => {
@@ -58,6 +65,24 @@ export default defineComponent({
 
 		after() {
 			Progress.done();
+		},
+
+		setFilter(ev) {
+			const typeItems = notificationTypes.map(t => ({
+				text: this.$t(`_notification._types.${t}`),
+				active: this.includeTypes && this.includeTypes.includes(t),
+				action: () => {
+					this.includeTypes = [t];
+				}
+			}));
+			const items = this.includeTypes != null ? [{
+				icon: 'fas fa-times',
+				text: this.$ts.clear,
+				action: () => {
+					this.includeTypes = null;
+				}
+			}, null, ...typeItems] : typeItems;
+			os.popupMenu(items, ev.currentTarget || ev.target);
 		}
 	}
 });