feat(frontend/reactions): リアクションのミュートで通知からもミュートされるように (#771)

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"/>
@@ -34,6 +34,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';
 
@@ -63,7 +64,7 @@ function onNotification(notification) {
 		useStream().send('readNotification');
 	}
 
-	if (!isMuted) {
+	if (!isMuted && filterMutedNotification(notification)) {
 		pagingComponent.value?.prepend(notification);
 	}
 }

packages/frontend/src/components/MkPagination.vue

@@ -84,6 +84,7 @@ const props = withDefaults(defineProps<{
 	pagination: Paging;
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
+	filter?: (item: MisskeyEntity) => boolean;
 }>(), {
 	displayLimit: 20,
 });
@@ -178,6 +179,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;
@@ -219,6 +222,8 @@ const fetchMore = async (): Promise<void> => {
 			untilId: items.value[items.value.length - 1].id,
 		}),
 	}).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;
@@ -283,6 +288,8 @@ const fetchMoreAhead = async (): Promise<void> => {
 			sinceId: items.value[0].id,
 		}),
 	}).then(res => {
+		res = res.filter(item => !props.filter || props.filter(item));
+
 		if (res.length === 0) {
 			items.value = res.concat(items.value);
 			more.value = false;

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;
+}

packages/frontend/src/ui/_common_/common.vue

@@ -51,6 +51,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';
@@ -73,6 +74,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();