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()"
>
@@ -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 @@
{{ i18n.ts.showNoteActionsOnlyHover }}
{{ i18n.ts.showClipButtonInNoteFooter }}
+ {{ i18n.ts.largeNoteReactions }}
{{ i18n.ts.collapseRenotes }}
{{ i18n.ts.enableAdvancedMfm }}
{{ i18n.ts.enableAnimatedMfm }}
@@ -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,