絵文字ピッカーを強化 + 絵文字ピッカーをリアクションピッカーとして使えるように

Resolve #5079
Resolve #3219

1 files changed, 20 insertions, 5 deletions

diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 7de2f72f61..81bb024995 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -7,6 +7,7 @@
 				{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></template>
 			</MkInput>
 			<MkButton inline @click="setDefault"><Fa :icon="faUndo"/> {{ $t('default') }}</MkButton>
+			<MkSwitch v-model:value="useFullReactionPicker">{{ $t('useFullReactionPicker') }}</MkSwitch>
 		</div>
 		<div class="_footer">
 			<MkButton @click="save()" primary inline :disabled="!changed"><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
@@ -22,6 +23,7 @@ import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '@/components/ui/input.vue';
 import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
 import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 import { defaultSettings } from '@/store';
 import * as os from '@/os';
@@ -30,6 +32,7 @@ export default defineComponent({
 	components: {
 		MkInput,
 		MkButton,
+		MkSwitch,
 	},
 
 	emits: ['info'],
@@ -50,6 +53,11 @@ export default defineComponent({
 		splited(): any {
 			return this.reactions.match(emojiRegexWithCustom);
 		},
+
+		useFullReactionPicker: {
+			get() { return this.$store.state.device.useFullReactionPicker; },
+			set(value) { this.$store.commit('device/set', { key: 'useFullReactionPicker', value: value }); }
+		},
 	},
 
 	watch: {
@@ -72,11 +80,18 @@ export default defineComponent({
 		},
 
 		preview(ev) {
-			os.popup(import('@/components/reaction-picker.vue'), {
-				reactions: this.splited,
-				showFocus: false,
-				src: ev.currentTarget || ev.target,
-			}, {}, 'closed');
+			if (this.$store.state.device.useFullReactionPicker) {
+				os.popup(import('@/components/emoji-picker.vue'), {
+					reactions: this.splited,
+					src: ev.currentTarget || ev.target,
+				}, {}, 'closed');
+			} else {
+				os.popup(import('@/components/reaction-picker.vue'), {
+					reactions: this.splited,
+					showFocus: false,
+					src: ev.currentTarget || ev.target,
+				}, {}, 'closed');
+			}
 		},
 
 		setDefault() {