From cdfc91f80f717ff52921050301aa560abde3cb20 Mon Sep 17 00:00:00 2001
From: hijiki <arumaaru@proton.me>
Date: Wed, 23 Oct 2024 15:14:16 +0900
Subject: [PATCH] fix

---
 locales/index.d.ts                            |  7 +++-
 .../src/components/MkEmojiPickerDialog.vue    | 32 +------------------
 .../src/components/MkNoteDetailed.vue         | 15 ++++++---
 .../src/components/SkNoteDetailed.vue         | 16 +++++++---
 4 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 6bc7d4abff..9c605f411c 100755
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -605,9 +605,14 @@ export interface Locale extends ILocale {
      */
     "mutedReactions": string;
     /**
-     * リモートの絵文字をミュート
+     * このリアクションをミュートする
      */
     "remoteCustomEmojiMuted": string;
+    "muteThisReaction": string;
+    /**
+     * このリアクションのミュートを解除する
+     */
+    "unmuteThisReaction": string;
     /**
      * ブロック
      */
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 78db4a3a9a..6aada1d7d0 100755
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -32,29 +32,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@chosen="chosen"
 		@esc="modal?.close()"
 	/>
-	<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;
@@ -64,14 +50,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<{
@@ -83,8 +67,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) {
@@ -109,16 +91,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 80a51a49b5..3f0a58c1a6 100755
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -201,7 +201,10 @@ 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>
+			<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabTypeTrimLocal)">
+				<i :class="!mutedReactions.includes(reactionTabTypeTrimLocal) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"/>
+				{{ !mutedReactions.includes(reactionTabTypeTrimLocal) ? 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;">
@@ -385,6 +388,7 @@ provide('react', (reaction: string) => {
 
 const tab = ref(props.initialTab);
 const reactionTabType = ref<string | null>(null);
+const reactionTabTypeTrimLocal = computed(() => reactionTabType.value?.replace('@.', '') ?? null);
 
 const renotesPagination = computed<Paging>(() => ({
 	endpoint: 'notes/renotes',
@@ -738,12 +742,13 @@ async function clip(): Promise<void> {
 	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);
+async function reactionMuteToggle(reactionName: string | null) {
+	if (reactionName == null) return;
+	if (!mutedReactions.value.includes(reactionName)) {
+		mutedReactions.value.push(reactionName);
 		defaultStore.set('mutedReactions', mutedReactions.value);
 	} else {
-		mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
+		mutedReactions.value = mutedReactions.value.filter(x => x !== reactionName);
 		defaultStore.set('mutedReactions', mutedReactions.value);
 	}
 }
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index ca433a6e6f..7eb853f8aa 100755
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -208,7 +208,10 @@ 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>
+			<MkButton v-if="reactionTabType" :class="$style.reactionMuteButton" @click="reactionMuteToggle(reactionTabTypeTrimLocal)">
+				<i :class="!mutedReactions.includes(reactionTabTypeTrimLocal) ? 'ti ti-mood-happy' : 'ti ti-mood-off'"/>
+				{{ !mutedReactions.includes(reactionTabTypeTrimLocal) ? 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;">
@@ -393,6 +396,8 @@ provide('react', (reaction: string) => {
 
 const tab = ref(props.initialTab);
 const reactionTabType = ref<string | null>(null);
+const reactionTabTypeTrimLocal = computed(() => reactionTabType.value?.replace('@.', '') ?? null);
+
 
 const renotesPagination = computed<Paging>(() => ({
 	endpoint: 'notes/renotes',
@@ -746,12 +751,13 @@ async function clip(): Promise<void> {
 	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);
+async function reactionMuteToggle(reactionName: string | null) {
+	if (reactionName == null) return;
+	if (!mutedReactions.value.includes(reactionName)) {
+		mutedReactions.value.push(reactionName);
 		defaultStore.set('mutedReactions', mutedReactions.value);
 	} else {
-		mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
+		mutedReactions.value = mutedReactions.value.filter(x => x !== reactionName);
 		defaultStore.set('mutedReactions', mutedReactions.value);
 	}
 }