Resolve #6091

locales/ja-JP.yml

@@ -433,6 +433,7 @@ listen: "聴く"
 none: "なし"
 volume: "音量"
 details: "詳細"
+chooseEmoji: "絵文字を選択"
 
 _sfx:
   note: "ノート"

src/client/pages/my-settings/reaction.vue

@@ -3,13 +3,13 @@
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
 		<mk-input v-model="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
-			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template>
+			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></template>
 		</mk-input>
+		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		<mk-button inline @click="preview"><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
-		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>
 </section>
 </template>
@@ -72,6 +72,15 @@ export default Vue.extend({
 		setDefault() {
 			this.reactions = '👍❤😆🤔😮🎉💢😥😇🍮';
 		},
+
+		async chooseEmoji(ev) {
+			const vm = this.$root.new(await import('../../components/emoji-picker.vue').then(m => m.default), {
+				source: ev.currentTarget || ev.target
+			}).$once('chosen', emoji => {
+				this.reactions += emoji;
+				vm.close();
+			});
+		}
 	}
 });
 </script>