From fa7c5dee7156bf9ca8b88144566215c10fecfc70 Mon Sep 17 00:00:00 2001
From: Esurio <esurio@esurio1673.net>
Date: Wed, 11 Dec 2024 13:10:45 +0000
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=81=AE=E8=83=8C=E6=99=AF=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E3=81=8B=E9=81=B8=E6=8A=9E=E3=81=A7?=
 =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                                         | 4 ++++
 locales/ja-JP.yml                                          | 1 +
 .../frontend/src/components/MkReactionsViewer.reaction.vue | 7 +++++--
 packages/frontend/src/pages/settings/general.vue           | 2 ++
 packages/frontend/src/store.ts                             | 4 ++++
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 35ca04475936..0f14f3166551 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -4382,6 +4382,10 @@ export interface Locale extends ILocale {
      * リアクションの最大横幅を制限し、縮小して表示する
      */
     readonly "limitWidthOfReaction": string;
+    /**
+     * リアクションの背景を表示する
+     */
+    readonly "hideReactionBackground": string;
     /**
      * ノートIDまたはURL
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5862497db4e6..c58642aa3a67 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1091,6 +1091,7 @@ enableStatsForFederatedInstances: "リモートサーバーの情報を取得"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
 reactionsDisplaySize: "リアクションの表示サイズ"
 limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小して表示する"
+hideReactionBackground: "リアクションの背景を表示する"
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index af80fef18b24..59fab9e035f0 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@click="toggleReaction()"
 	@contextmenu.prevent.stop="menu"
 >
-	<MkReactionIcon :class="[$style.icon, { [$style.limitWidth]: defaultStore.state.limitWidthOfReaction }]" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
+	<MkReactionIcon :class="[$style.icon, { [$style.limitWidth]: defaultStore.state.limitWidthOfReaction, [$style.background]: !defaultStore.state.showReactionBackground }]" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
@@ -248,12 +248,15 @@ if (!mock) {
 	object-fit: contain;
 }
 
+.background {
+	background-color: var(--MI_THEME-panel);
+}
+
 .icon {
 	box-sizing: border-box;
 	padding: 4px;
 	height: 34px;
 	font-size: 1.5em;
-	background-color: #ffffff;
 }
 
 .count {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index f080e9da4811..26bcf4a5db82 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -65,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<option value="large">{{ i18n.ts.large }}</option>
 						</MkRadios>
 						<MkSwitch v-model="limitWidthOfReaction">{{ i18n.ts.limitWidthOfReaction }}</MkSwitch>
+						<MkSwitch v-model="showReactionBackground">{{ i18n.ts.hideReactionBackground }}</MkSwitch>
 					</div>
 
 					<MkSelect v-model="instanceTicker">
@@ -288,6 +289,7 @@ const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNot
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
+const showReactionBackground = computed(defaultStore.makeGetterSetter('showReactionBackground'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index bb8df07d03c0..bb43e746ea5f 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -375,6 +375,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	showReactionBackground: {
+		where: 'device',
+		default: false,
+	},
 	forceShowAds: {
 		where: 'device',
 		default: false,