diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7f43b59c5a..9ba9332566 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -546,6 +546,10 @@ export interface Locale extends ILocale {
* 絵文字ピッカー
*/
"emojiPicker": string;
+ /**
+ * リアクションピッカー
+ */
+ "reactionPicker": string;
/**
* リアクション時にピン留め表示する絵文字を設定できます
*/
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f723802b3a..b25107903b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -132,6 +132,7 @@ add: "追加"
reaction: "リアクション"
reactions: "リアクション"
emojiPicker: "絵文字ピッカー"
+reactionPicker: "リアクションピッカー"
pinnedEmojisForReactionSettingDescription: "リアクション時にピン留め表示する絵文字を設定できます"
pinnedEmojisSettingDescription: "絵文字入力時にピン留め表示する絵文字を設定できます"
emojiPickerDisplay: "ピッカーの表示"
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 21c712b441..42ebc0a6b9 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="modal"
v-slot="{ type, maxHeight }"
:zPriority="'middle'"
- :preferType="defaultStore.state.emojiPickerStyle"
+ :preferType="asReactionPicker ? defaultStore.state.reactionPickerStyle : defaultStore.state.emojiPickerStyle === 'window' ? 'auto' : defaultStore.state.emojiPickerStyle"
:hasInteractionWithOtherFocusTrappedEls="true"
:transparentBg="true"
:manualShowing="manualShowing"
diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
index 647a8b9e96..6be439baa3 100644
--- a/packages/frontend/src/pages/settings/emoji-picker.vue
+++ b/packages/frontend/src/pages/settings/emoji-picker.vue
@@ -114,12 +114,19 @@ SPDX-License-Identifier: AGPL-3.0-only
- {{ i18n.ts.style }}
+ {{ i18n.ts.style }} ({{ i18n.ts.emojiPicker }})
+
+
+ {{ i18n.ts.style }} ({{ i18n.ts.reactionPicker }})
+
+
+
+
@@ -152,6 +159,7 @@ const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScal
const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth'));
const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight'));
const emojiPickerStyle = computed(defaultStore.makeGetterSetter('emojiPickerStyle'));
+const reactionPickerStyle = computed(defaultStore.makeGetterSetter('reactionPickerStyle'));
const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev);
const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev);
@@ -244,7 +252,10 @@ watch(pinnedEmojis, () => {
deep: true,
});
-watch(emojiPickerStyle, async () => {
+watch([
+ emojiPickerStyle,
+ reactionPickerStyle,
+], async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index afc007a430..85895a4ad1 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -315,6 +315,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: 'auto' as 'auto' | 'popup' | 'drawer' | 'window',
},
+ reactionPickerStyle: {
+ where: 'device',
+ default: 'auto' as 'auto' | 'popup' | 'drawer',
+ },
recentlyUsedEmojis: {
where: 'device',
default: [] as string[],