fix: リアクションピッカーと絵文字ピッカーの設定を分離

locales/index.d.ts

@@ -546,6 +546,10 @@ export interface Locale extends ILocale {
      * 絵文字ピッカー
      */
     "emojiPicker": string;
+    /**
+     * リアクションピッカー
+     */
+    "reactionPicker": string;
     /**
      * リアクション時にピン留め表示する絵文字を設定できます
      */

locales/ja-JP.yml

@@ -132,6 +132,7 @@ add: "追加"
 reaction: "リアクション"
 reactions: "リアクション"
 emojiPicker: "絵文字ピッカー"
+reactionPicker: "リアクションピッカー"
 pinnedEmojisForReactionSettingDescription: "リアクション時にピン留め表示する絵文字を設定できます"
 pinnedEmojisSettingDescription: "絵文字入力時にピン留め表示する絵文字を設定できます"
 emojiPickerDisplay: "ピッカーの表示"

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"

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 });
 });
 

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[],