From c3fe5bd6d7a1de7099d250fce8d82100a7a9855e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=82=8F=E3=82=8F=E3=82=8F=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:34:33 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend/reactions):=20=E3=83=AA=E3=82=A2?=
 =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E3=83=9F=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E3=81=A7=E9=80=9A=E7=9F=A5=E3=81=8B=E3=82=89?=
 =?UTF-8?q?=E3=82=82=E3=83=9F=E3=83=A5=E3=83=BC=E3=83=88=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(MisskeyIO#771)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkNotifications.vue  |  5 +++--
 .../frontend/src/components/MkPagination.vue     |  7 +++++++
 .../src/scripts/filter-muted-notification.ts     | 16 ++++++++++++++++
 packages/frontend/src/ui/_common_/common.vue     |  3 +++
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/scripts/filter-muted-notification.ts

diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 2dd6c21ef6..1bbfc2f4f7 100755
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkPullToRefresh :refresher="() => reload()">
-	<MkPagination ref="pagingComponent" :pagination="pagination">
+	<MkPagination ref="pagingComponent" :pagination="pagination" :filter="filterMutedNotification">
 		<template #empty>
 			<div class="_fullinfo">
 				<img :src="infoImageUrl" class="_ghost"/>
@@ -33,6 +33,7 @@ import { i18n } from '@/i18n.js';
 import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import { filterMutedNotification } from '@/scripts/filter-muted-notification.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import * as Misskey from 'misskey-js';
 
@@ -68,7 +69,7 @@ function onNotification(notification) {
 		useStream().send('readNotification');
 	}
 
-	if (!isMuted) {
+	if (!isMuted && filterMutedNotification(notification)) {
 		pagingComponent.value?.prepend(notification);
 	}
 }
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 4f2a4d2703..dc34a3e763 100755
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -97,6 +97,7 @@ const props = withDefaults(defineProps<{
 	pagination: Paging;
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
+	filter?: (item: MisskeyEntity) => boolean;
 }>(), {
 	displayLimit: 20,
 });
@@ -215,6 +216,8 @@ async function init(): Promise<void> {
 		limit: props.pagination.limit ?? 10,
 		allowPartial: true,
 	}).then(res => {
+		res = res.filter(item => !props.filter || props.filter(item));
+
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
 			if (i === 3) item._shouldInsertAd_ = true;
@@ -256,6 +259,8 @@ const fetchMore = async (): Promise<void> => {
 			untilId: Array.from(items.value.keys()).at(-1),
 		}),
 	}).then(res => {
+		res = res.filter(item => !props.filter || props.filter(item));
+
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
 			if (i === 10) item._shouldInsertAd_ = true;
@@ -321,6 +326,8 @@ const fetchMoreAhead = async (): Promise<void> => {
 			sinceId: Array.from(items.value.keys()).at(-1),
 		}),
 	}).then(res => {
+		res = res.filter(item => !props.filter || props.filter(item));
+
 		if (res.length === 0) {
 			items.value = concatMapWithArray(items.value, res);
 			more.value = false;
diff --git a/packages/frontend/src/scripts/filter-muted-notification.ts b/packages/frontend/src/scripts/filter-muted-notification.ts
new file mode 100644
index 0000000000..41d8153e53
--- /dev/null
+++ b/packages/frontend/src/scripts/filter-muted-notification.ts
@@ -0,0 +1,16 @@
+import * as Misskey from 'misskey-js';
+import { defaultStore } from '@/store.js';
+
+export function filterMutedNotification(notification: Misskey.entities.Notification): boolean {
+	switch (notification.type) {
+		case 'reaction':
+			if (defaultStore.state.mutedReactions.includes(notification.reaction.replace('@.', ''))) return false;
+			break;
+		case 'reaction:grouped':
+			notification.reactions = notification.reactions.filter(reaction => !defaultStore.state.mutedReactions.includes(reaction.reaction.replace('@.', '')));
+			if (notification.reactions.length === 0) return false;
+			break;
+	}
+
+	return true;
+}
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 4fe53ae6a3..8eb15c5e05 100755
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -53,6 +53,7 @@ import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
 import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
+import { filterMutedNotification } from '@/scripts/filter-muted-notification.js';
 import { uploads } from '@/scripts/upload.js';
 import * as sound from '@/scripts/sound.js';
 import { $i } from '@/account.js';
@@ -77,6 +78,8 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 			useStream().send('readNotification');
 		}
 
+		if (!filterMutedNotification(notification)) return;
+
 		notifications.value.unshift(notification);
 		window.setTimeout(() => {
 			if (notifications.value.length > 3) notifications.value.pop();