feat(frontend/reactions): リモートのリアクションのミュートの方法を変えた (MisskeyIO#762)

Co-authored-by: kabo2468 <28654659+kabo2468@users.noreply.github.com>

locales/index.d.ts

@@ -585,9 +585,13 @@ export interface Locale extends ILocale {
      */
     "mutedReactions": string;
     /**
-     * リモートの絵文字をミュート
+     * このリアクションをミュートする
      */
-    "remoteCustomEmojiMuted": string;
+    "muteThisReaction": string;
+    /**
+     * このリアクションのミュートを解除する
+     */
+    "unmuteThisReaction": string;
     /**
      * ブロック
      */

locales/ja-JP.yml

@@ -142,7 +142,8 @@ unmute: "ミュート解除"
 renoteMute: "リノートをミュート"
 renoteUnmute: "リノートのミュートを解除"
 mutedReactions: "リアクションのミュート"
-remoteCustomEmojiMuted: "リモートの絵文字をミュート"
+muteThisReaction: "このリアクションをミュートする"
+unmuteThisReaction: "このリアクションのミュートを解除する"
 block: "ブロック"
 unblock: "ブロック解除"
 suspend: "凍結"

packages/frontend/src/components/MkEmojiPickerDialog.vue

@@ -29,29 +29,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:max-height="maxHeight"
 		@chosen="chosen"
 	/>
-	<div v-if="manualReactionInput" :class="$style.remoteReactionInputWrapper">
-		<span>{{ i18n.ts.remoteCustomEmojiMuted }}</span>
-		<MkInput v-model="remoteReactionName" placeholder=":emojiname@host:" autocapitalize="off"/>
-		<MkButton :disabled="!(remoteReactionName && remoteReactionName[0] === ':')" @click="chosen(remoteReactionName)">
-			{{ i18n.ts.add }}
-		</MkButton>
-		<div :class="$style.emojiContainer">
-			<MkCustomEmoji v-if="remoteReactionName && remoteReactionName[0] === ':' " :class="$style.emoji" :name="remoteReactionName" :normal="true"/>
-		</div>
-	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { shallowRef, ref } from 'vue';
-import { i18n } from '@/i18n.js';
+import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store.js';
-import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 
 const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
@@ -61,14 +47,12 @@ const props = withDefaults(defineProps<{
 	asReactionPicker?: boolean;
 	targetNote?: Misskey.entities.Note;
 	choseAndClose?: boolean;
-	manualReactionInput?: boolean;
 }>(), {
 	manualShowing: null,
 	showPinned: true,
 	pinnedEmojis: undefined,
 	asReactionPicker: false,
 	choseAndClose: true,
-	manualReactionInput: false,
 });
 
 const emit = defineEmits<{
@@ -80,8 +64,6 @@ const emit = defineEmits<{
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
-const remoteReactionName = ref('');
-
 function chosen(emoji: string) {
 	emit('done', emoji);
 	if (props.choseAndClose) {
@@ -106,16 +88,4 @@ function opening() {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
-
-.remoteReactionInputWrapper {
-	margin-top: var(--margin);
-	padding: 16px;
-	border-radius: var(--radius);
-	background: var(--popup);
-}
-
-.emojiContainer {
-	height: 48px;
-	width: 48px;
-}
 </style>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -171,6 +171,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span style="margin-left: 4px;">{{ appearNote.reactions[reaction] }}</span>
 				</button>
 			</div>
+			<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabType)"> <i :class="!mutedReactions.includes(reactionTabType) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"></i> {{ !mutedReactions.includes(reactionTabType) ? i18n.ts.muteThisReaction : i18n.ts.unmuteThisReaction }} </MkButton>
 			<MkPagination v-if="reactionTabType" :key="reactionTabType" :pagination="reactionsPagination" :disableAutoLoad="true">
 				<template #default="{ items }">
 					<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
@@ -293,6 +294,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 const conversation = ref<Misskey.entities.Note[]>([]);
 const replies = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || appearNote.value.userId === $i?.id);
+const mutedReactions = ref<string[]>(defaultStore.state.mutedReactions);
 
 const keymap = {
 	'r': () => reply(true),
@@ -482,6 +484,16 @@ async function clip() {
 	os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus);
 }
 
+async function reactionMuteToggle(emojiName: string) {
+	if (!mutedReactions.value.includes(emojiName)) {
+		mutedReactions.value.push(emojiName);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	} else {
+		mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	}
+}
+
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	pleaseLogin();
@@ -767,6 +779,10 @@ function loadConversation() {
 	margin-bottom: 8px;
 }
 
+.reactionMuteButton {
+	margin-bottom: 8px;
+}
+
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--divider);