From 30b443de5594ef5b93717925961cd3ae290b67c1 Mon Sep 17 00:00:00 2001
From: Camilla Ett <camilla.ett@gmail.com>
Date: Fri, 24 Nov 2023 08:37:27 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=83=AA=E3=82=A2=E3=82=AF?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E6=A8=AA=E5=B9=85=E3=82=92?=
 =?UTF-8?q?150px=E3=81=AB=E5=88=B6=E9=99=90=E3=81=99=E3=82=8B=E3=81=8B?=
 =?UTF-8?q?=E3=81=A9=E3=81=86=E3=81=8B=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=81=8C=E9=81=B8=E3=81=B9=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20(#12416)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): リアクションの横幅を150pxに制限するかどうかユーザーが選べるように

* localesの変更をjs-JP.ymlのみに修正し、日本語をより分かりやすく

* クラス名を.icon から .limitWidthに変更
---
 locales/index.d.ts                                            | 1 +
 locales/ja-JP.yml                                             | 1 +
 .../frontend/src/components/MkReactionsViewer.reaction.vue    | 4 ++--
 packages/frontend/src/pages/settings/general.vue              | 3 +++
 packages/frontend/src/store.ts                                | 4 ++++
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 654b64891..e6761641a 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1040,6 +1040,7 @@ export interface Locale {
     "enableChartsForFederatedInstances": string;
     "showClipButtonInNoteFooter": string;
     "reactionsDisplaySize": string;
+		"limitWidthOfReaction": string;
     "noteIdOrUrl": string;
     "video": string;
     "videos": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 26deccd36..58e0dd0b1 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1037,6 +1037,7 @@ enableChartsForRemoteUser: "リモートユーザーのチャートを生成"
 enableChartsForFederatedInstances: "リモートサーバーのチャートを生成"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
 reactionsDisplaySize: "リアクションの表示サイズ"
+limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小して表示する"
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 2b850016c..9a107c367 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
 	@click="toggleReaction()"
 >
-	<MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
+	<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
@@ -188,7 +188,7 @@ if (!mock) {
 	}
 }
 
-.icon {
+.limitWidth {
 	max-width: 150px;
 }
 
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 06d378982..313b5efc4 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -56,6 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="medium">{{ i18n.ts.medium }}</option>
 					<option value="large">{{ i18n.ts.large }}</option>
 				</MkRadios>
+				<MkSwitch v-model="limitWidthOfReaction">{{ i18n.ts.limitWidthOfReaction }}</MkSwitch>
 			</div>
 
 			<MkSelect v-model="instanceTicker">
@@ -226,6 +227,7 @@ const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serve
 const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
+const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
@@ -290,6 +292,7 @@ watch([
 	overridedDeviceKind,
 	mediaListWithOneImageAppearance,
 	reactionsDisplaySize,
+	limitWidthOfReaction,
 	highlightSensitiveMedia,
 	keepScreenOn,
 	disableStreamingTimeline,
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 6d95ddba3..12660e9e8 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -330,6 +330,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'medium' as 'small' | 'medium' | 'large',
 	},
+	limitWidthOfReaction: {
+		where: 'device',
+		default: true,
+	},
 	forceShowAds: {
 		where: 'device',
 		default: false,