From 75b424192e3a6ed424c70cd3e3f67dc2e16b49f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A6=E3=81=83?=
 =?UTF-8?q?=E3=83=BC=E3=80=82?=
 <56515516+mattyatea@users.noreply.github.com>
Date: Sun, 20 Oct 2024 11:19:33 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend/reactions):=20=E3=83=AA=E3=83=A2?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E3=81=AE=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=81=AE=E3=83=9F=E3=83=A5=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E6=96=B9=E6=B3=95=E3=82=92=E5=A4=89=E3=81=88=E3=81=9F?=
 =?UTF-8?q?=20(MisskeyIO#762)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: kabo2468 <28654659+kabo2468@users.noreply.github.com>
---
 locales/index.d.ts                            |  8 +++--
 locales/ja-JP.yml                             |  3 +-
 .../src/components/MkEmojiPickerDialog.vue    | 32 +------------------
 .../src/components/MkNoteDetailed.vue         | 16 ++++++++++
 4 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 262cc0b35..482457d78 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -585,9 +585,13 @@ export interface Locale extends ILocale {
      */
     "mutedReactions": string;
     /**
-     * リモートの絵文字をミュート
+     * このリアクションをミュートする
      */
-    "remoteCustomEmojiMuted": string;
+    "muteThisReaction": string;
+    /**
+     * このリアクションのミュートを解除する
+     */
+    "unmuteThisReaction": string;
     /**
      * ブロック
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3ff82c457..1693d9c7b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -142,7 +142,8 @@ unmute: "ミュート解除"
 renoteMute: "リノートをミュート"
 renoteUnmute: "リノートのミュートを解除"
 mutedReactions: "リアクションのミュート"
-remoteCustomEmojiMuted: "リモートの絵文字をミュート"
+muteThisReaction: "このリアクションをミュートする"
+unmuteThisReaction: "このリアクションのミュートを解除する"
 block: "ブロック"
 unblock: "ブロック解除"
 suspend: "凍結"
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 65f227e9a..90b37e390 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/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>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 09fa8ef22..c43b56604 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/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);