From 040508824e7e884c8ed557a6f2a2e8c61dde002c Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 12 Feb 2025 18:57:18 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=A8?=
 =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC?=
 =?UTF-8?q?=E3=81=AE=E8=A8=AD=E5=AE=9A=E3=82=92=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                                |  4 ++++
 locales/ja-JP.yml                                 |  1 +
 .../src/components/MkEmojiPickerDialog.vue        |  2 +-
 .../frontend/src/pages/settings/emoji-picker.vue  | 15 +++++++++++++--
 packages/frontend/src/store.ts                    |  4 ++++
 5 files changed, 23 insertions(+), 3 deletions(-)

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
 			</MkRadios>
 
 			<MkSelect v-model="emojiPickerStyle">
-				<template #label>{{ i18n.ts.style }}</template>
+				<template #label>{{ i18n.ts.style }} ({{ i18n.ts.emojiPicker }})</template>
 				<option value="auto">{{ i18n.ts.auto }}</option>
 				<option value="popup">{{ i18n.ts.popup }}</option>
 				<option value="drawer">{{ i18n.ts.drawer }}</option>
 				<option value="window">{{ i18n.ts.window }}</option>
 			</MkSelect>
+
+			<MkSelect v-model="reactionPickerStyle">
+				<template #label>{{ i18n.ts.style }} ({{ i18n.ts.reactionPicker }})</template>
+				<option value="auto">{{ i18n.ts.auto }}</option>
+				<option value="popup">{{ i18n.ts.popup }}</option>
+				<option value="drawer">{{ i18n.ts.drawer }}</option>
+			</MkSelect>
 		</div>
 	</FormSection>
 </div>
@@ -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[],