From 0eeb916a290291a1cae3f42ff09cbe6baaf770ba Mon Sep 17 00:00:00 2001
From: fly_mc <me@flymc.cc>
Date: Fri, 1 Nov 2024 10:11:49 +0800
Subject: [PATCH] enhance disableReactionsViewer

---
 locales/en-US.yml                                |  2 +-
 locales/zh-CN.yml                                |  2 +-
 locales/zh-TW.yml                                |  2 +-
 packages/frontend/src/components/MkNote.vue      | 15 ++++++++-------
 .../frontend/src/components/MkNoteDetailed.vue   | 16 +++++++++-------
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index ee2a72ee8..6538c43ff 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1296,7 +1296,7 @@ showDetailTimeWhenHover: "Hover the timestamp of the note to expand the detailed
 noteClickToOpen: "Click to open note details"
 enableFallbackReactButton: "Enable fallback reaction button"
 enableMFMCheatsheet: "Enable MFM Cheatsheet in post form"
-disableReactionsViewer: "Disable reactions viewer"
+disableReactionsViewer: "Disable emoji reactions viewer"
 autoSpacing: "Auto Spacing"
 autoSpacingDescription: "Adding spaces between CJK and English characters"
 performance: "Performance"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index 2e7614bf7..76e5e6bda 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -1305,7 +1305,7 @@ showDetailTimeWhenHover: "悬浮/长按帖文时间戳时，展开详细时间"
 noteClickToOpen: "点击展开帖文详情"
 enableFallbackReactButton: "开启Fallback回应按钮"
 enableMFMCheatsheet: "在帖文编辑框中启用MFM Cheatsheet"
-disableReactionsViewer: "禁用帖文回应显示"
+disableReactionsViewer: "禁用帖文表情回应显示"
 autoSpacing: "自动空格"
 autoSpacingDescription: "在CJK字符和英文字符中添加空格"
 messageToFollower: "给关注者的消息"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index 5d1345e3e..58f5535a3 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -1305,7 +1305,7 @@ showDetailTimeWhenHover: "長按貼文時間戳記時展開詳細時間"
 noteClickToOpen: "點擊展開貼文詳情"
 enableFallbackReactButton: "啓用Fallback回應鍵"
 enableMFMCheatsheet: "在貼文編輯框中啓用MFM Cheatsheet"
-disableReactionsViewer: "禁用貼文回應顯示"
+disableReactionsViewer: "禁用貼文表情回應顯示"
 autoSpacing: "自動間距"
 autoSpacingDescription: "在CJK字符和英文字符中添加間距"
 messageToFollower: "給追隨者的訊息"
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index c419a3907..3c454309a 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -114,7 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly' && !defaultStore.state.disableReactionsViewer" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
+			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly' && !disableReactionsViewer" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
 				</template>
@@ -138,15 +138,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-else :class="$style.footerButton" class="_button" disabled>
 					<i class="ti ti-ban"></i>
 				</button>
-				<button v-if="defaultStore.state.enableFallbackReactButton && appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.footerButton" class="_button" @click.stop="like()">
+				<button v-if="defaultStore.state.enableFallbackReactButton && appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly' && !disableReactionsViewer" ref="likeButton" :class="$style.footerButton" class="_button" @click.stop="like()">
 					<i class="ti ti-heart"></i>
 				</button>
 				<button ref="reactButton" :class="$style.footerButton" class="_button" @click.stop="toggleReact()">
-					<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
+					<i v-if="(appearNote.reactionAcceptance === 'likeOnly' || disableReactionsViewer) && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
 					<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
-					<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
+					<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" || disableReactionsViewer class="ti ti-heart"></i>
 					<i v-else class="ti ti-mood-plus"></i>
-					<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
+					<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount || disableReactionsViewer) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
 				</button>
 				<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()">
 					<i class="ti ti-paperclip"></i>
@@ -306,6 +306,7 @@ const renoteCollapsed = ref(
 );
 
 const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
+const disableReactionsViewer = ref(defaultStore.reactiveState.disableReactionsViewer);
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
@@ -419,7 +420,7 @@ if (!props.mock) {
 		});
 	});
 
-	if (appearNote.value.reactionAcceptance === 'likeOnly') {
+	if (appearNote.value.reactionAcceptance === 'likeOnly' || disableReactionsViewer) {
 		useTooltip(reactButton, async (showing) => {
 			const reactions = await misskeyApiGet('notes/reactions', {
 				noteId: appearNote.value.id,
@@ -499,7 +500,7 @@ function like(): void {
 function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
-	if (appearNote.value.reactionAcceptance === 'likeOnly') {
+	if (appearNote.value.reactionAcceptance === 'likeOnly' || disableReactionsViewer) {
 		sound.playMisskeySfx('reaction');
 
 		if (props.mock) {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 45efa4f02..8cbd5ea42 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -136,7 +136,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkTime :time="appearNote.createdAt" mode="detail" colored/>
 				</MkA>
 			</div>
-			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" :note="appearNote"/>
+			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly' && !disableReactionsViewer" ref="reactionsViewer" :note="appearNote"/>
 			<div :class="$style.footerButton">
 			<button class="_button" :class="$style.noteFooterButton" @click.stop="reply()">
 				<i class="ti ti-arrow-back-up"></i>
@@ -155,15 +155,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-else class="_button" :class="$style.noteFooterButton" disabled>
 				<i class="ti ti-ban"></i>
 			</button>
-			<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
+			<button v-if="appearNote.myReaction == null && appearNote.reactionAcceptance !== 'likeOnly' && !disableReactionsViewer" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
 				<i class="ti ti-heart"></i>
 			</button>
 			<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click.stop="toggleReact()">
-				<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
+				<i v-if="(appearNote.reactionAcceptance === 'likeOnly' || disableReactionsViewer) && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
 				<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
-				<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
+				<i v-else-if="appearNote.reactionAcceptance === 'likeOnly' || disableReactionsViewer" class="ti ti-heart"></i>
 				<i v-else class="ti ti-mood-plus"></i>
-				<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
+				<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount || disableReactionsViewer) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
 			</button>
 			<button
 				v-if="appearNote.updatedAt" ref="historyMenuButton" class="_button" :class="[
@@ -345,6 +345,8 @@ type ShowingNoteHistoryState = {
 } | null;
 const showingNoteHistoryRef = ref<ShowingNoteHistoryState>(null);
 
+const disableReactionsViewer = ref(defaultStore.reactiveState.disableReactionsViewer);
+
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
 	url: `https://${host}/notes/${appearNote.value.id}`,
@@ -425,7 +427,7 @@ useTooltip(renoteButton, async (showing) => {
 	});
 });
 
-if (appearNote.value.reactionAcceptance === 'likeOnly') {
+if (appearNote.value.reactionAcceptance === 'likeOnly' || disableReactionsViewer) {
 	useTooltip(reactButton, async (showing) => {
 		const reactions = await misskeyApiGet('notes/reactions', {
 			noteId: appearNote.value.id,
@@ -493,7 +495,7 @@ function like(): void {
 function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
-	if (appearNote.value.reactionAcceptance === 'likeOnly') {
+	if (appearNote.value.reactionAcceptance === 'likeOnly' || disableReactionsViewer) {
 		sound.playMisskeySfx('reaction');
 
 		misskeyApi('notes/reactions/create', {