リモート絵文字ミュートの仕様変更

locales/ja-JP.yml

@@ -147,7 +147,8 @@ unmute: "ミュート解除"
 renoteMute: "ブーストをミュート"
 renoteUnmute: "ブーストのミュートを解除"
 mutedReactions: "リアクションのミュート"
-remoteCustomEmojiMuted: "リモートの絵文字をミュート"
+muteThisReaction: "このリアクションをミュートする"
+unmuteThisReaction: "このリアクションのミュートを解除する"
 block: "ブロック"
 unblock: "ブロック解除"
 markAsNSFW: "ユーザーのすべてのメディアをNSFWとしてマークする"

packages/frontend/src/components/MkNoteDetailed.vue

@@ -201,6 +201,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;">
@@ -331,6 +332,7 @@ const replies = ref<Misskey.entities.Note[]>([]);
 const quotes = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
+const mutedReactions = ref<string[]>(defaultStore.state.mutedReactions);
 
 watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
@@ -736,6 +738,16 @@ 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);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	} else {
+		mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	}
+}
+
 function showRenoteMenu(): void {
 	if (!isMyRenote) return;
 	pleaseLogin(undefined, pleaseLoginContext.value);
@@ -1089,6 +1101,10 @@ function animatedMFM() {
 	margin-bottom: 8px;
 }
 
+.reactionMuteButton {
+	margin-bottom: 8px;
+}
+
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--divider);

packages/frontend/src/components/SkNoteDetailed.vue

@@ -208,6 +208,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;">
@@ -339,6 +340,7 @@ const replies = ref<Misskey.entities.Note[]>([]);
 const quotes = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
+const mutedReactions = ref<string[]>(defaultStore.state.mutedReactions);
 
 watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
@@ -744,6 +746,16 @@ 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);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	} else {
+		mutedReactions.value = mutedReactions.value.filter(x => x !== emojiName);
+		defaultStore.set('mutedReactions', mutedReactions.value);
+	}
+}
+
 function showRenoteMenu(): void {
 	if (!isMyRenote) return;
 	pleaseLogin(undefined, pleaseLoginContext.value);
@@ -1156,6 +1168,10 @@ onUnmounted(() => {
 	margin-bottom: 8px;
 }
 
+.reactionMuteButton {
+	margin-bottom: 8px;
+}
+
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--divider);