From f7c90b58d651753c49b4c1bd0180d5315f77083f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 17 Dec 2021 16:14:31 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=AA=E3=82=A2=E3=82=AF?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC?=
 =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA=E6=96=B9=E6=B3=95=E3=82=92=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  1 +
 .../client/src/components/emoji-picker-dialog.vue  |  2 +-
 packages/client/src/pages/settings/reaction.vue    | 14 ++++++++++----
 packages/client/src/store.ts                       |  4 ++++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b76bff4a8..257f4a685 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -815,6 +815,7 @@ voteConfirm: "「{choice}」に投票しますか？"
 hide: "隠す"
 leaveGroup: "グループから抜ける"
 leaveGroupConfirm: "「{name}」から抜けますか？"
+useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue
index 703b27a3e..d2a405ef5 100644
--- a/packages/client/src/components/emoji-picker-dialog.vue
+++ b/packages/client/src/components/emoji-picker-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
 	<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/>
 </MkModal>
 </template>
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 4d500f5b4..1df61ac47 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -29,11 +29,14 @@
 		<option :value="2">{{ $ts.medium }}</option>
 		<option :value="3">{{ $ts.large }}</option>
 	</FormRadios>
+
+	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">{{ $ts.useDrawerReactionPickerForMobile }}</FormSwitch>
+
 	<FormSection>
-		<FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
-	</FormSection>
-	<FormSection>
-		<FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
+		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
+			<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
+		</div>
 	</FormSection>
 </div>
 </template>
@@ -46,6 +49,7 @@ import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import * as symbols from '@/symbols';
@@ -57,6 +61,7 @@ export default defineComponent({
 		FromSlot,
 		FormRadios,
 		FormSection,
+		FormSwitch,
 		XDraggable,
 	},
 
@@ -80,6 +85,7 @@ export default defineComponent({
 	computed: {
 		reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'),
 		reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'),
+		reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'),
 	},
 
 	watch: {
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 955d94a07..2290a2177 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -178,6 +178,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 1
 	},
+	reactionPickerUseDrawerForMobile: {
+		where: 'device',
+		default: true,
+	},
 	recentlyUsedEmojis: {
 		where: 'device',
 		default: [] as string[]