Feat(Frontend): リアクションミュートを実装

Type4ny-Project · Jul 18, 2024 · 17312d1 · 17312d1
1 parent db94657
commit 17312d1
Show file tree

Hide file tree

Showing 15 changed files with 1,693 additions and 283 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -680,6 +680,10 @@ export interface Locale extends ILocale {
      * リノートのミュートを解除
      */
     "renoteUnmute": string;
+    /**
+     * リアクションのミュート
+     */
+    "mutedReactions": string;
     /**
      * ブロック
      */

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -166,6 +166,7 @@ mute: "ミュート"
 unmute: "ミュート解除"
 renoteMute: "リノートをミュート"
 renoteUnmute: "リノートのミュートを解除"
+mutedReactions: "リアクションのミュート"
 block: "ブロック"
 unblock: "ブロック解除"
 suspend: "凍結"

diff --git a/packages/backend/migration/1721320100254-reactionMute.js b/packages/backend/migration/1721320100254-reactionMute.js
@@ -0,0 +1,12 @@
+export class ReactionMute1721320100254 {
+    name = 'ReactionMute1721320100254'
+
+    async up(queryRunner) {
+
+        await queryRunner.query(`ALTER TABLE "user_profile" ADD "mutedReactions" jsonb NOT NULL DEFAULT '[]'`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "mutedReactions"`);
+    }
+}
diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts
@@ -597,6 +597,7 @@ export class UserEntityService implements OnModuleInit {
 				mutedWords: profile!.mutedWords,
 				hardMutedWords: profile!.hardMutedWords,
 				mutedInstances: profile!.mutedInstances,
+				mutedReactions: profile!.mutedReactions,
 				mutingNotificationTypes: [], // 後方互換性のため
 				notificationRecieveConfig: profile!.notificationRecieveConfig,
 				emailNotificationTypes: profile!.emailNotificationTypes,

diff --git a/packages/backend/src/models/UserProfile.ts b/packages/backend/src/models/UserProfile.ts
@@ -235,6 +235,11 @@ export class MiUserProfile {
 	})
 	public mutedInstances: string[];
 
+	@Column('jsonb', {
+		default: [],
+	})
+	public mutedReactions:  (string[] | string)[];
+
 	@Column('jsonb', {
 		default: {},
 	})

diff --git a/packages/backend/src/server/api/endpoints/i/update.ts b/packages/backend/src/server/api/endpoints/i/update.ts
@@ -183,6 +183,7 @@ export const paramDef = {
 		pinnedPageId: { type: 'string', format: 'misskey:id', nullable: true },
 		mutedWords: muteWords,
 		hardMutedWords: muteWords,
+		mutedReactions: muteWords,
 		mutedInstances: { type: 'array', items: {
 			type: 'string',
 		} },
@@ -311,6 +312,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				validateMuteWordRegex(ps.hardMutedWords);
 				profileUpdates.hardMutedWords = ps.hardMutedWords;
 			}
+			if (ps.mutedReactions !== undefined) {
+				policies ??= await this.roleService.getUserPolicies(user.id);
+				checkMuteWordCount(ps.mutedReactions, policies.wordMuteLimit);
+				validateMuteWordRegex(ps.mutedReactions);
+				profileUpdates.mutedReactions = ps.mutedReactions;
+			}
 			if (ps.mutedInstances !== undefined) profileUpdates.mutedInstances = ps.mutedInstances;
 			if (ps.notificationRecieveConfig !== undefined) profileUpdates.notificationRecieveConfig = ps.notificationRecieveConfig;
 			if (typeof ps.isLocked === 'boolean') updates.isLocked = ps.isLocked;

diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -21,6 +21,7 @@ import * as Misskey from 'misskey-js';
 import { inject, watch, ref } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { defaultStore } from '@/store.js';
+import { $i } from '@/account.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note & {
@@ -46,6 +47,7 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m
 	reactions.value[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }
 
+
 function onMockToggleReaction(emoji: string, count: number) {
 	if (!mock) return;
 
@@ -54,7 +56,13 @@ function onMockToggleReaction(emoji: string, count: number) {
 
 	emit('mockUpdateMyReaction', emoji, (count - reactions.value[i][1]));
 }
+if ($i && reactions.value){
 
+	reactions.value = reactions.value.filter(([reactionType]) =>{
+		if (reactionType === props.note.myReaction) return true;
+		if (!($i.mutedReactions.flat()).includes(reactionType)) return true;
+	} );
+}
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {
 	let newReactions: [string, number][] = [];
 	hasMoreReactions.value = Object.keys(newSource).length > maxNumber;
@@ -65,7 +73,6 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 			newReactions.push(reactions.value[i]);
 		}
 	}
-
 	const newReactionsNames = newReactions.map(([x]) => x);
 	newReactions = [
 		...newReactions,
@@ -76,11 +83,17 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 
 	newReactions = newReactions.slice(0, props.maxNumber);
 
-	if (props.note. myReaction && !newReactions.map(([x]) => x).includes(props.note.myReaction)) {
+	if (props.note.myReaction && !newReactions.map(([x]) => x).includes(props.note.myReaction)) {
 		newReactions.push([props.note.myReaction, newSource[props.note.myReaction]]);
 	}
-
-	reactions.value = newReactions;
+	if ($i){
+		reactions.value = newReactions.filter(([reactionType]) =>{
+			if (reactionType === props.note.myReaction) return true;
+			if (!($i.mutedReactions.flat()).includes(reactionType)) return true;
+		} );
+	} else {
+		reactions.value = newReactions;
+	}
 }, { immediate: true, deep: true });
 </script>
 

diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
@@ -19,6 +19,13 @@ SPDX-License-Identifier: AGPL-3.0-only
       <XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
     </MkFolder>
 
+		<MkFolder>
+      <template #icon><i class="ti ti-message-off"></i></template>
+      <template #label>{{ i18n.ts.mutedReactions }}</template>
+
+      <XWordMute :notCaption="true" :muted="$i.mutedReactions" @save="saveMutedReactions"/>
+    </MkFolder>
+
     <MkFolder>
       <template #icon><i class="ti ti-planet-off"></i></template>
       <template #label>{{ i18n.ts.instanceMute }}</template>
@@ -225,6 +232,9 @@ async function saveMutedWords(mutedWords: (string | string[])[]) {
 async function saveHardMutedWords(hardMutedWords: (string | string[])[]) {
   await misskeyApi('i/update', { hardMutedWords });
 }
+async function saveMutedReactions(mutedReactions: (string | string[])[]) {
+  await misskeyApi('i/update', { mutedReactions });
+}
 
 const headerActions = computed(() => []);
 

diff --git a/packages/frontend/src/pages/settings/mute-block.word-mute.vue b/packages/frontend/src/pages/settings/mute-block.word-mute.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
     <div>
       <MkTextarea v-model="mutedWords">
         <span>{{ i18n.ts._wordMute.muteWords }}</span>
-        <template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
+        <template v-if="!notCaption" #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
       </MkTextarea>
     </div>
     <MkButton primary inline :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
@@ -24,6 +24,7 @@ import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
   muted: (string[] | string)[];
+	notCaption?: boolean;
 }>();
 
 const emit = defineEmits<{