Improve emoji-picker (#5515)

* Improve emoji-picker

* remove unimplanted translation

* カテゴリのサジェスト

* use unique

1 files changed, 84 insertions, 28 deletions

diff --git a/src/client/app/common/views/components/emoji-picker.vue b/src/client/app/common/views/components/emoji-picker.vue
index 88761ae933..abae69e28a 100644
--- a/src/client/app/common/views/components/emoji-picker.vue
+++ b/src/client/app/common/views/components/emoji-picker.vue
@@ -11,25 +11,46 @@
 		</button>
 	</header>
 	<div class="emojis">
-		<header><fa :icon="categories.find(x => x.isActive).icon" fixed-width/> {{ categories.find(x => x.isActive).text }}</header>
-		<div v-if="categories.find(x => x.isActive).name">
-			<button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
-				:title="emoji.name"
-				@click="chosen(emoji.char)"
-				:key="emoji.name"
-			>
-				<mk-emoji :emoji="emoji.char"/>
-			</button>
-		</div>
-		<div v-else>
-			<button v-for="emoji in customEmojis"
-				:title="emoji.name"
-				@click="chosen(`:${emoji.name}:`)"
-				:key="emoji.name"
-			>
-				<img :src="emoji.url" :alt="emoji.name"/>
-			</button>
-		</div>
+		<template v-if="categories[0].isActive">
+			<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recent-emoji') }}</header>
+			<div class="list">
+				<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+					:title="emoji.name"
+					@click="chosen(emoji)"
+					:key="i"
+				>
+					<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+					<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+				</button>
+			</div>
+		</template>
+
+		<header class="category"><fa :icon="categories.find(x => x.isActive).icon" fixed-width/> {{ categories.find(x => x.isActive).text }}</header>
+		<template v-if="categories.find(x => x.isActive).name">
+			<div class="list">
+				<button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+					:title="emoji.name"
+					@click="chosen(emoji)"
+					:key="emoji.name"
+				>
+					<mk-emoji :emoji="emoji.char"/>
+				</button>
+			</div>
+		</template>
+		<template v-else>
+			<div v-for="(key, i) in Object.keys(customEmojis)" :key="i">
+				<header class="sub">{{ key || $t('no-category') }}</header>
+				<div class="list">
+					<button v-for="emoji in customEmojis[key]"
+						:title="emoji.name"
+						@click="chosen(emoji)"
+						:key="emoji.name"
+					>
+						<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+					</button>
+				</div>
+			</div>
+		</template>
 	</div>
 </div>
 </template>
@@ -38,8 +59,10 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import { emojilist } from '../../../../../misc/emojilist';
-import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice } from '@fortawesome/free-solid-svg-icons';
+import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
+import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag } from '@fortawesome/free-regular-svg-icons';
+import { groupByX } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/emoji-picker.vue'),
@@ -47,7 +70,9 @@ export default Vue.extend({
 	data() {
 		return {
 			emojilist,
-			customEmojis: [],
+			getStaticImageUrl,
+			customEmojis: {},
+			faGlobe, faHistory,
 			categories: [{
 				text: this.$t('custom-emoji'),
 				icon: faAsterisk,
@@ -97,18 +122,43 @@ export default Vue.extend({
 	},
 
 	created() {
-		this.customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
+		let local = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
+		local = groupByX(local, (x: any) => x.category || '');
+		this.customEmojis = local;
+
+		if (this.$store.state.device.activeEmojiCategoryName) {
+			this.goCategory(this.$store.state.device.activeEmojiCategoryName);
+		}
 	},
 
 	methods: {
-		go(category) {
+		go(category: any) {
+			this.goCategory(category.name);
+		},
+
+		goCategory(name: string) {
+			let matched = false;
 			for (const c of this.categories) {
-				c.isActive = c.name === category.name;
+				c.isActive = c.name === name;
+				if (c.isActive) {
+					matched = true;
+					this.$store.commit('device/set', { key: 'activeEmojiCategoryName', value: c.name });
+				}
+			}
+			if (!matched) {
+				this.categories[0].isActive = true;
 			}
 		},
 
-		chosen(emoji) {
-			this.$emit('chosen', emoji);
+		chosen(emoji: any) {
+			const getKey = (emoji: any) => emoji.char || `:${emoji.name}:`;
+
+			let recents = this.$store.state.device.recentEmojis || [];
+			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
+			recents.unshift(emoji)
+			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
+
+			this.$emit('chosen', getKey(emoji));
 		}
 	}
 });
@@ -142,7 +192,7 @@ export default Vue.extend({
 		overflow-y auto
 		overflow-x hidden
 
-		> header
+		> header.category
 			position sticky
 			top 0
 			left 0
@@ -152,7 +202,12 @@ export default Vue.extend({
 			color var(--text)
 			font-size 12px
 
-		> div
+		>>> header.sub
+			padding 4px 8px
+			color var(--text)
+			font-size 12px
+
+		>>> div.list
 			display grid
 			grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
 			gap 4px
@@ -180,6 +235,7 @@ export default Vue.extend({
 					left 0
 					width 100%
 					height 100%
+					object-fit contain
 					font-size 28px
 					transition transform 0.2s ease
 					pointer-events none