From d2b61229a38428c2e63d7f98ae007e72762db881 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Feb 2020 02:39:27 +0900
Subject: [PATCH] Improve usability

---
 src/client/pages/instance/emojis.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 84974f45c4..26e238b128 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -24,7 +24,7 @@
 		</div>
 		<div class="_content" v-if="selected">
 			<mk-input v-model="name"><span>{{ $t('name') }}</span></mk-input>
-			<mk-input v-model="category"><span>{{ $t('category') }}</span></mk-input>
+			<mk-input v-model="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
 			<mk-input v-model="aliases"><span>{{ $t('tags') }}</span></mk-input>
 			<mk-button inline primary @click="update"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 			<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
@@ -65,6 +65,7 @@ import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 import { selectFile } from '../../scripts/select-file';
+import { unique } from '../../../prelude/array';
 
 export default Vue.extend({
 	metaInfo() {
@@ -102,6 +103,16 @@ export default Vue.extend({
 		}
 	},
 
+	computed: {
+		categories() {
+			if (this.$store.state.instance.meta) {
+				return unique(this.$store.state.instance.meta.emojis.map((x: any) => x.category || '').filter((x: string) => x !== ''));
+			} else {
+				return [];
+			}
+		}
+	},
+
 	watch: {
 		host() {
 			this.$refs.remoteEmojis.reload();