diff --git a/locales/en-US.yml b/locales/en-US.yml
index 09fd726c9f..ff5e30eb2f 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1032,6 +1032,7 @@ enableChartsForRemoteUser: "Generate remote user data charts"
enableChartsForFederatedInstances: "Generate remote instance data charts"
showClipButtonInNoteFooter: "Add \"Clip\" to note action menu"
reactionsDisplaySize: "Reaction display size"
+limitWidthOfReaction: "Limit Width of Reaction"
noteIdOrUrl: "Note ID or URL"
video: "Video"
videos: "Videos"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 6baed91c42..290cfdd6f7 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1035,6 +1035,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 e59a550df5..fd8b9cba6b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1032,6 +1032,7 @@ enableChartsForRemoteUser: "リモートユーザーのチャートを生成"
enableChartsForFederatedInstances: "リモートサーバーのチャートを生成"
showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
reactionsDisplaySize: "リアクションの表示サイズ"
+limitWidthOfReaction: "リアクションの横幅を制限する"
noteIdOrUrl: "ノートIDまたはURL"
video: "動画"
videos: "動画"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index aa68def1da..1af47c0128 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -1032,6 +1032,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 2b850016c5..6d4df92a06 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()"
>
-
+
{{ count }}
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 06d3789829..313b5efc46 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
+ {{ i18n.ts.limitWidthOfReaction }}
@@ -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 6d95ddba35..12660e9e8d 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,