From ffbe896f284a1ac7a42724b8871d918c6b3a1da4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Mar 2023 12:49:23 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=8E=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E5=A4=A7=E3=81=8D=E3=81=8F=E8=A1=A8=E7=A4=BA=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                        |  1 +
 locales/ja-JP.yml                                   |  1 +
 .../src/components/MkReactionsViewer.reaction.vue   | 13 ++++++++++++-
 packages/frontend/src/pages/settings/general.vue    |  2 ++
 packages/frontend/src/store.ts                      |  4 ++++
 5 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84e3321518..be47a3db27 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 ### Client
 - 検索ページでURLを入力した際に照会したときと同等の挙動をするように
+- ノートのリアクションを大きく表示するオプションを追加
 
 ### Server
 -
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8bea3b8405..67f0634346 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -983,6 +983,7 @@ retryAllQueuesConfirmText: "一時的にサーバーの負荷が増大するこ
 enableChartsForRemoteUser: "リモートユーザーのチャートを生成"
 enableChartsForFederatedInstances: "リモートサーバーのチャートを生成"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
+largeNoteReactions: "ノートのリアクションを大きく表示"
 
 _achievements:
   earnedAt: "獲得日時"
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index fd0f42e9fc..9480af5102 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -3,7 +3,7 @@
 	ref="buttonEl"
 	v-ripple="canToggle"
 	class="_button"
-	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
+	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]"
 	@click="toggleReaction()"
 >
 	<MkReactionIcon :class="$style.icon" :reaction="reaction" :emoji-url="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/>
@@ -118,6 +118,17 @@ useTooltip(buttonEl, async (showing) => {
 		cursor: default;
 	}
 
+	&.large {
+		height: 42px;
+		font-size: 1.5em;
+		border-radius: 6px;
+
+		> .count {
+			font-size: 0.7em;
+			line-height: 42px;
+		}
+	}
+
 	&.reacted {
 		background: var(--accent);
 
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index dd62a32530..f88e934e1d 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -48,6 +48,7 @@
 			<div class="_gaps_s">
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
+				<MkSwitch v-model="largeNoteReactions">{{ i18n.ts.largeNoteReactions }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
@@ -145,6 +146,7 @@ const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDev
 const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
 const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
+const largeNoteReactions = computed(defaultStore.makeGetterSetter('largeNoteReactions'));
 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 c3cf48afc4..0be91bbcb4 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -294,6 +294,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	largeNoteReactions: {
+		where: 'device',
+		default: false,
+	},
 	aiChanMode: {
 		where: 'device',
 		default: false,