Display localized unicode emoji names

src/components/emoji_picker/emoji_picker.js

@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import StillImage from '../still-image/still-image.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -285,6 +286,25 @@ const EmojiPicker = {
         this.waitForDomAndInitializeLazyLoad()
         this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       }, 500)
+    },
+    languages () {
+      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+    },
+    maybeLocalizedEmojiName () {
+      return emoji => {
+        if (!emoji.annotations) {
+          return emoji.displayText
+        }
+
+        for (const lang of this.languages) {
+          if (emoji.annotations[lang]?.name) {
+            return emoji.annotations[lang].name
+          }
+        }
+
+        return emoji.displayText
+      }
     }
   }
 }

src/components/emoji_picker/emoji_picker.vue

@@ -88,7 +88,7 @@
             <span
               v-for="emoji in group.emojis"
               :key="group.id + emoji.displayText"
-              :title="emoji.displayText"
+              :title="maybeLocalizedEmojiName(emoji)"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >

src/i18n/languages.js

@@ -41,7 +41,8 @@ const langCodeToJsonName = (code) => specialJsonName[code] || code
 const langCodeToCldrName = (code) => code
 
 const ensureFinalFallback = codes => {
-  return codes.includes('en') ? codes : codes.concat(['en'])
+  const codeList = Array.isArray(codes) ? codes : [codes]
+  return codeList.includes('en') ? codeList : codeList.concat(['en'])
 }
 
 module.exports = {

src/modules/instance.js

@@ -117,6 +117,18 @@ const loadAnnotations = (lang) => {
   )
 }
 
+const injectAnnotations = (emoji, annotations) => {
+  const availableLangs = Object.keys(annotations)
+
+  return {
+    ...emoji,
+    annotations: availableLangs.reduce((acc, cur) => {
+      acc[cur] = annotations[cur][emoji.replacement]
+      return acc
+    }, {})
+  }
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -164,13 +176,13 @@ const instance = {
     },
     standardEmojiList (state) {
       return SORTED_EMOJI_GROUP_IDS
-        .map(groupId => state.emoji[groupId] || [])
+        .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
         .reduce((a, b) => a.concat(b), [])
     },
     standardEmojiGroupList (state) {
       return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
         id: groupId,
-        emojis: state.emoji[groupId] || []
+        emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
       }))
     },
     instanceDomain (state) {
@@ -218,7 +230,7 @@ const instance = {
     },
 
     loadUnicodeEmojiData ({ commit, state }, language) {
-      const langList = ensureFinalFallback(Array.isArray(language) ? language : [language])
+      const langList = ensureFinalFallback(language)
 
       return Promise.all(
         langList