リアクション絵文字設定をいい感じに (#6074)

* リアクション絵文字設定をいい感じに

* みじかく

locales/ja-JP.yml

@@ -84,7 +84,7 @@ clickToShow: "クリックして表示"
 sensitive: "閲覧注意"
 add: "追加"
 reaction: "リアクション"
-reactionSettingDescription: "リアクションピッカーに表示するリアクションを改行で区切って設定します。"
+reactionSettingDescription: "リアクションピッカーに表示するリアクションを設定します。"
 rememberNoteVisibility: "公開範囲を記憶する"
 renameFile: "ファイル名を変更"
 attachCancel: "添付取り消し"
@@ -168,6 +168,7 @@ intro: "Misskeyのインストールが完了しました！管理者アカウ
 done: "完了"
 processing: "処理中"
 preview: "プレビュー"
+default: "デフォルト"
 noCustomEmojis: "絵文字はありません"
 customEmojisOfRemote: "リモートの絵文字"
 noJobs: "ジョブはありません"

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

@@ -2,11 +2,14 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
-		<mk-textarea v-model="reactions">{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template></mk-textarea>
+		<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>
+		</mk-input>
 	</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>
@@ -14,24 +17,26 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
-import MkTextarea from '../../components/ui/textarea.vue';
+import { faUndo } from '@fortawesome/free-solid-svg-icons';
+import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkReactionPicker from '../../components/reaction-picker.vue';
 import i18n from '../../i18n';
+import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		MkTextarea,
+		MkInput,
 		MkButton,
 	},
 	
 	data() {
 		return {
-			reactions: this.$store.state.settings.reactions.join('\n'),
+			reactions: this.$store.state.settings.reactions.join(''),
 			changed: false,
-			faLaugh, faSave, faEye
+			faLaugh, faSave, faEye, faUndo
 		}
 	},
 
@@ -41,22 +46,32 @@ export default Vue.extend({
 		}
 	},
 
+	computed: {
+		splited(): any {
+			return this.reactions.match(emojiRegexWithCustom);
+		},
+	},
+
 	methods: {
 		save() {
-			this.$store.dispatch('settings/set', { key: 'reactions', value: this.reactions.trim().split('\n') });
+			this.$store.dispatch('settings/set', { key: 'reactions', value: this.splited });
 			this.changed = false;
 		},
 
 		preview(ev) {
 			const picker = this.$root.new(MkReactionPicker, {
 				source: ev.currentTarget || ev.target,
-				reactions: this.reactions.trim().split('\n'),
+				reactions: this.splited,
 				showFocus: false,
 			});
 			picker.$once('chosen', reaction => {
 				picker.close();
 			});
-		}
+		},
+
+		setDefault() {
+			this.reactions = '👍❤😆🤔😮🎉💢😥😇🍮';
+		},
 	}
 });
 </script>