From 16f01e1d3ff64300c89060b3374d28ed8fb2a751 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:10:24 -0400
Subject: [PATCH 01/34] Group custom emojis by pack in emoji picker

---
 src/components/emoji_picker/emoji_picker.js   | 29 ++++++++++++++-----
 src/components/emoji_picker/emoji_picker.scss | 13 +++++++++
 src/components/emoji_picker/emoji_picker.vue  | 10 +++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index f69202087..9e3981761 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -183,17 +183,32 @@ const EmojiPicker = {
     customEmojiBuffer () {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
+    groupedCustomEmojis () {
+      const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+      return this.customEmojiBuffer.reduce((res, emoji) => {
+        const pack = packOf(emoji)
+        if (!res[pack]) {
+          res[pack] = {
+            id: `custom-${pack}`,
+            text: pack,
+            /// FIXME
+            // icon: 'smile-beam',
+            image: emoji.imageUrl,
+            emojis: []
+          }
+        }
+        res[pack].emojis.push(emoji)
+        return res
+      }, {})
+    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.customEmojiBuffer
+      // const customEmojis = this.customEmojiBuffer
 
       return [
-        {
-          id: 'custom',
-          text: this.$t('emoji.custom'),
-          icon: 'smile-beam',
-          emojis: customEmojis
-        },
+        ...Object
+          .keys(this.groupedCustomEmojis)
+          .map(k => this.groupedCustomEmojis[k]),
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index a2f17c514..ccb12a2a4 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -19,6 +19,19 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
+  &-header-image {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 24px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
   .keep-open,
   .too-many-emoji {
     padding: 7px;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a72691207..16549c08d 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,17 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
+          <span
+            v-if="group.image"
+            class="emoji-picker-header-image"
+          >
+            <img
+              :alt="group.text"
+              :src="group.image"
+            >
+          </span>
           <FAIcon
+            v-else
             :icon="group.icon"
             fixed-width
           />

From d0b052a17e588b9838b136211c5db506bfd71b53 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:23:45 -0400
Subject: [PATCH 02/34] Fix load more emoji action

---
 src/components/emoji_picker/emoji_picker.js |  5 ++++-
 src/modules/instance.js                     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 9e3981761..7d5a3d8f3 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -98,7 +98,7 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom']
+      const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
       if (!ref) return
       const bottom = ref.offsetTop + ref.offsetHeight
 
@@ -217,6 +217,9 @@ const EmojiPicker = {
         }
       ]
     },
+    lastNonUnicodeGroupId () {
+      return this.emojis[this.emojis.length - 2].id
+    },
     emojisView () {
       return this.emojis.filter(value => value.emojis.length > 0)
     },
diff --git a/src/modules/instance.js b/src/modules/instance.js
index bfce6f384..23f534c34 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -164,6 +164,16 @@ const instance = {
         if (res.ok) {
           const result = await res.json()
           const values = Array.isArray(result) ? Object.assign({}, ...result) : result
+          const caseInsensitiveStrCmp = (a, b) => {
+            const la = a.toLowerCase()
+            const lb = b.toLowerCase()
+            return la > lb ? 1 : (la < lb ? -1 : 0)
+          }
+          const byPackThenByName = (a, b) => {
+            const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+            return caseInsensitiveStrCmp(packOf(a), packOf(b)) || caseInsensitiveStrCmp(a.displayText, b.displayText)
+          }
+
           const emoji = Object.entries(values).map(([key, value]) => {
             const imageUrl = value.image_url
             return {
@@ -174,7 +184,7 @@ const instance = {
             }
             // Technically could use tags but those are kinda useless right now,
             // should have been "pack" field, that would be more useful
-          }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1)
+          }).sort(byPackThenByName)
           commit('setInstanceOption', { name: 'customEmoji', value: emoji })
         } else {
           throw (res)

From c9557ef28c6f723695854b5e95f7b62c63a6e5e4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:50:58 -0400
Subject: [PATCH 03/34] Display all emoji groups on emoji picker header

---
 src/components/emoji_picker/emoji_picker.js   | 28 +++++++++++++++++--
 src/components/emoji_picker/emoji_picker.scss |  6 +++-
 src/components/emoji_picker/emoji_picker.vue  |  4 +--
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 7d5a3d8f3..d04649dcc 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -38,6 +38,8 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
+const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
@@ -174,9 +176,12 @@ const EmojiPicker = {
       }
       return 0
     },
+    allEmojis () {
+      return this.$store.state.instance.customEmoji || []
+    },
     filteredEmoji () {
       return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
+        this.allEmojis,
         trim(this.keyword)
       )
     },
@@ -184,7 +189,6 @@ const EmojiPicker = {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
     groupedCustomEmojis () {
-      const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
       return this.customEmojiBuffer.reduce((res, emoji) => {
         const pack = packOf(emoji)
         if (!res[pack]) {
@@ -201,6 +205,26 @@ const EmojiPicker = {
         return res
       }, {})
     },
+    allEmojiGroups () {
+      return this.allEmojis
+        .reduce((res, emoji) => {
+          const packName = packOf(emoji)
+          const packId = `custom-${packName}`
+          if (res.filter(k => k.id === packId).length === 0) {
+            res.push({
+              id: packId,
+              text: packName,
+              image: emoji.imageUrl
+            })
+          }
+          return res
+        }, [])
+        .concat({
+          id: 'standard',
+          text: this.$t('emoji.unicode'),
+          icon: 'box-open'
+        })
+    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
       // const customEmojis = this.customEmojiBuffer
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ccb12a2a4..0bd4363cf 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -52,6 +52,7 @@
     display: flex;
     height: 32px;
     padding: 10px 7px 5px;
+    overflow-x: auto;
   }
 
   .content {
@@ -63,6 +64,9 @@
 
   .emoji-tabs {
     flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
   }
 
   .emoji-groups {
@@ -70,6 +74,7 @@
   }
 
   .additional-tabs {
+    display: block;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -79,7 +84,6 @@
 
   .additional-tabs,
   .emoji-tabs {
-    display: block;
     min-width: 0;
     flex-basis: auto;
     flex-shrink: 1;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 16549c08d..fe60cb5ef 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,12 +3,12 @@
     <div class="heading">
       <span class="emoji-tabs">
         <span
-          v-for="group in emojis"
+          v-for="group in allEmojiGroups"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
             active: activeGroupView === group.id,
-            disabled: group.emojis.length === 0
+            disabled: false
           }"
           :title="group.text"
           @click.prevent="highlight(group.id)"

From 3733e12b888c4ada8b4c30e48115bbd5e85f63a4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 23:37:00 -0400
Subject: [PATCH 04/34] Load visible emoji groups when scrolling

---
 src/components/emoji_picker/emoji_picker.js  | 101 ++++++++++++++-----
 src/components/emoji_picker/emoji_picker.vue |   4 +-
 2 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d04649dcc..cab952f8e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -57,7 +57,8 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false
+      customEmojiLoadAllConfirmed: false,
+      groupLoadedCount: {}
     }
   },
   components: {
@@ -79,7 +80,9 @@ const EmojiPicker = {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
       this.scrolledGroup(target)
-      this.triggerLoadMore(target)
+      this.$nextTick(() => {
+        this.triggerLoadMore(target)
+      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -88,6 +91,7 @@ const EmojiPicker = {
       this.activeGroup = key
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = top + 1
+        this.loadEmoji(key)
       })
     },
     updateScrolledClass (target) {
@@ -100,28 +104,40 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
-      if (!ref) return
-      const bottom = ref.offsetTop + ref.offsetHeight
+      Object.keys(this.allCustomGroups)
+        .map(groupId => {
+          const ref = this.$refs[`group-end-${groupId}`][0]
+          if (!ref) return undefined
 
-      const scrollerBottom = target.scrollTop + target.clientHeight
-      const scrollerTop = target.scrollTop
-      const scrollerMax = target.scrollHeight
+          const bottom = ref.offsetTop + ref.offsetHeight
 
-      // Loads more emoji when they come into view
-      const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-      // Always load when at the very top in case there's no scroll space yet
-      const atTop = scrollerTop < 5
-      // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-      if (!bottomAboveViewport && (approachingBottom || atTop)) {
-        this.loadEmoji()
-      }
+          const group = this.$refs[`group-${groupId}`][0]
+          const top = group.offsetTop
+
+          const scrollerBottom = target.scrollTop + target.clientHeight
+          const scrollerTop = target.scrollTop
+          const scrollerMax = target.scrollHeight
+
+          // Loads more emoji when they come into view
+          const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
+          // Always load when at the very top in case there's no scroll space yet
+          const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+          // Don't load when looking at unicode category or at the very bottom
+          const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
+          if (!bottomAboveViewport && (approachingBottom || atTop)) {
+            return groupId
+          }
+          return undefined
+        })
+        .filter(k => k)
+        .map(k => {
+          this.loadEmoji(k)
+        })
     },
     scrolledGroup (target) {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.emojisView.forEach(group => {
+        this.allEmojiGroups.forEach(group => {
           const ref = this.$refs['group-' + group.id]
           if (ref.offsetTop <= top) {
             this.activeGroup = group.id
@@ -129,14 +145,21 @@ const EmojiPicker = {
         })
       })
     },
-    loadEmoji () {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
+    loadEmoji (loadGroup) {
+      if (!this.allCustomGroups[loadGroup]) {
+        return
+      }
+
+      const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
 
       if (allLoaded) {
         return
       }
 
-      this.customEmojiBufferSlice += LOAD_EMOJI_BY
+      this.groupLoadedCount = {
+        ...this.groupLoadedCount,
+        [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
+      }
     },
     startEmojiLoad (forceUpdate = false) {
       if (!forceUpdate) {
@@ -157,6 +180,9 @@ const EmojiPicker = {
     },
     setShowStickers (value) {
       this.showingStickers = value
+    },
+    limitedEmojis (list, groupId) {
+      return list.slice(0, this.loadedCount[groupId])
     }
   },
   watch: {
@@ -205,24 +231,36 @@ const EmojiPicker = {
         return res
       }, {})
     },
-    allEmojiGroups () {
-      return this.allEmojis
+    allCustomGroups () {
+      return this.filteredEmoji
         .reduce((res, emoji) => {
           const packName = packOf(emoji)
           const packId = `custom-${packName}`
-          if (res.filter(k => k.id === packId).length === 0) {
-            res.push({
+          if (!res[packId]) {
+            res[packId] = ({
               id: packId,
               text: packName,
-              image: emoji.imageUrl
+              image: emoji.imageUrl,
+              emojis: []
             })
           }
+          res[packId].emojis.push(emoji)
           return res
-        }, [])
+        }, {})
+    },
+    sensibleInitialAmountForAGroup () {
+      const groupCount = Object.keys(this.allCustomGroups).length
+      return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
+    },
+    allEmojiGroups () {
+      const standardEmojis = this.$store.state.instance.emoji || []
+      return Object.entries(this.allCustomGroups)
+        .map(([_, v]) => v)
         .concat({
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'box-open'
+          icon: 'box-open',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
         })
     },
     emojis () {
@@ -241,6 +279,13 @@ const EmojiPicker = {
         }
       ]
     },
+    loadedCount () {
+      return Object.keys(this.allCustomGroups)
+        .reduce((res, groupId) => {
+          res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
+          return res
+        }, {})
+    },
     lastNonUnicodeGroupId () {
       return this.emojis[this.emojis.length - 2].id
     },
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index fe60cb5ef..277d5bf62 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -67,7 +67,7 @@
           @scroll="onScroll"
         >
           <div
-            v-for="group in emojisView"
+            v-for="group in allEmojiGroups"
             :key="group.id"
             class="emoji-group"
           >
@@ -78,7 +78,7 @@
               {{ group.text }}
             </h6>
             <span
-              v-for="emoji in group.emojis"
+              v-for="emoji in limitedEmojis(group.emojis, group.id)"
               :key="group.id + emoji.displayText"
               :title="emoji.displayText"
               class="emoji-item"

From 8629da50cac80932a409c8f420049f4a4085bccd Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:03:31 -0400
Subject: [PATCH 05/34] Load emoji properly on first showing

---
 src/components/emoji_picker/emoji_picker.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index cab952f8e..322bb8baa 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -58,7 +58,8 @@ const EmojiPicker = {
       customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
       customEmojiLoadAllConfirmed: false,
-      groupLoadedCount: {}
+      groupLoadedCount: {},
+      firstLoaded: false
     }
   },
   components: {
@@ -167,6 +168,13 @@ const EmojiPicker = {
       }
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = 0
+        this.$nextTick(() => {
+          if (this.firstLoaded) {
+            return
+          }
+          this.triggerLoadMore(this.$refs['emoji-groups'])
+          this.firstLoaded = true
+        })
       })
       const bufferSize = this.customEmojiBuffer.length
       const bufferPrefilledAll = bufferSize === this.filteredEmoji.length

From 1cf2191593dc1379b3ac8a9fd7b7f4de81ee2249 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:43:35 -0400
Subject: [PATCH 06/34] Optimise emoji picker loading process

---
 src/components/emoji_picker/emoji_picker.js  | 83 ++++----------------
 src/components/emoji_picker/emoji_picker.vue |  4 +-
 src/modules/instance.js                      | 18 +++++
 3 files changed, 34 insertions(+), 71 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 322bb8baa..67c6d0ccb 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,7 @@ const EmojiPicker = {
     },
     triggerLoadMore (target) {
       Object.keys(this.allCustomGroups)
+        .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
         .map(groupId => {
           const ref = this.$refs[`group-end-${groupId}`][0]
           if (!ref) return undefined
@@ -123,9 +124,10 @@ const EmojiPicker = {
           const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
           // Always load when at the very top in case there's no scroll space yet
           const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+          const unscrollable = top - bottom < target.clientHeight
           // Don't load when looking at unicode category or at the very bottom
           const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-          if (!bottomAboveViewport && (approachingBottom || atTop)) {
+          if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
             return groupId
           }
           return undefined
@@ -176,12 +178,6 @@ const EmojiPicker = {
           this.firstLoaded = true
         })
       })
-      const bufferSize = this.customEmojiBuffer.length
-      const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
-      if (bufferPrefilledAll && !forceUpdate) {
-        return
-      }
-      this.customEmojiBufferSlice = LOAD_EMOJI_BY
     },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
@@ -191,6 +187,9 @@ const EmojiPicker = {
     },
     limitedEmojis (list, groupId) {
       return list.slice(0, this.loadedCount[groupId])
+    },
+    filterByKeyword (list, keyword) {
+      return filterByKeyword(list, keyword)
     }
   },
   watch: {
@@ -210,51 +209,8 @@ const EmojiPicker = {
       }
       return 0
     },
-    allEmojis () {
-      return this.$store.state.instance.customEmoji || []
-    },
-    filteredEmoji () {
-      return filterByKeyword(
-        this.allEmojis,
-        trim(this.keyword)
-      )
-    },
-    customEmojiBuffer () {
-      return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
-    },
-    groupedCustomEmojis () {
-      return this.customEmojiBuffer.reduce((res, emoji) => {
-        const pack = packOf(emoji)
-        if (!res[pack]) {
-          res[pack] = {
-            id: `custom-${pack}`,
-            text: pack,
-            /// FIXME
-            // icon: 'smile-beam',
-            image: emoji.imageUrl,
-            emojis: []
-          }
-        }
-        res[pack].emojis.push(emoji)
-        return res
-      }, {})
-    },
     allCustomGroups () {
-      return this.filteredEmoji
-        .reduce((res, emoji) => {
-          const packName = packOf(emoji)
-          const packId = `custom-${packName}`
-          if (!res[packId]) {
-            res[packId] = ({
-              id: packId,
-              text: packName,
-              image: emoji.imageUrl,
-              emojis: []
-            })
-          }
-          res[packId].emojis.push(emoji)
-          return res
-        }, {})
+      return this.$store.getters.groupedCustomEmojis
     },
     sensibleInitialAmountForAGroup () {
       const groupCount = Object.keys(this.allCustomGroups).length
@@ -271,21 +227,13 @@ const EmojiPicker = {
           emojis: filterByKeyword(standardEmojis, this.keyword)
         })
     },
-    emojis () {
-      const standardEmojis = this.$store.state.instance.emoji || []
-      // const customEmojis = this.customEmojiBuffer
-
-      return [
-        ...Object
-          .keys(this.groupedCustomEmojis)
-          .map(k => this.groupedCustomEmojis[k]),
-        {
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, trim(this.keyword))
-        }
-      ]
+    filteredEmojiGroups () {
+      return this.allEmojiGroups
+        .map(group => ({
+          ...group,
+          emojis: filterByKeyword(group.emojis, this.keyword)
+        }))
+        .filter(group => group.emojis.length > 0)
     },
     loadedCount () {
       return Object.keys(this.allCustomGroups)
@@ -297,9 +245,6 @@ const EmojiPicker = {
     lastNonUnicodeGroupId () {
       return this.emojis[this.emojis.length - 2].id
     },
-    emojisView () {
-      return this.emojis.filter(value => value.emojis.length > 0)
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
     }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 277d5bf62..7b2b7fc83 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,7 +3,7 @@
     <div class="heading">
       <span class="emoji-tabs">
         <span
-          v-for="group in allEmojiGroups"
+          v-for="group in filteredEmojiGroups"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -67,7 +67,7 @@
           @scroll="onScroll"
         >
           <div
-            v-for="group in allEmojiGroups"
+            v-for="group in filteredEmojiGroups"
             :key="group.id"
             class="emoji-group"
           >
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 23f534c34..8aadce77e 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -115,6 +115,24 @@ const instance = {
         .map(key => [key, state[key]])
         .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
     },
+    groupedCustomEmojis (state) {
+      return state.customEmoji
+        .reduce((res, emoji) => {
+          emoji.tags.forEach(packName => {
+            const packId = `custom-${packName}`
+            if (!res[packId]) {
+              res[packId] = ({
+                id: packId,
+                text: packName,
+                image: emoji.imageUrl,
+                emojis: []
+              })
+            }
+            res[packId].emojis.push(emoji)
+          })
+          return res
+        }, {})
+    },
     instanceDomain (state) {
       return new URL(state.server).hostname
     }

From 5fb65a4b111afcfab3be3ee52661fba6561d4030 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:53:57 -0400
Subject: [PATCH 07/34] Lint

---
 src/components/emoji_picker/emoji_picker.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 67c6d0ccb..8e11f83f6 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -38,8 +38,6 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
-const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
-
 const EmojiPicker = {
   props: {
     enableStickerPicker: {

From d9901d39140db5e076a302a66ea0005092208fe4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Oct 2021 23:23:58 -0400
Subject: [PATCH 08/34] Use lozad for lazy image loading

Ref: grouped-emoji-picker
---
 package.json                                 |  1 +
 src/components/emoji_picker/emoji_picker.js  |  6 +++++-
 src/components/emoji_picker/emoji_picker.vue |  3 ++-
 src/directives/lazy_image_container.js       | 13 +++++++++++++
 yarn.lock                                    |  5 +++++
 5 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/directives/lazy_image_container.js

diff --git a/package.json b/package.json
index 723e472b3..677d03b52 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
+    "lozad": "^1.16.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 8e11f83f6..82e5ad0b7 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import LazyImageContainer from '../../directives/lazy_image_container'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -64,6 +65,9 @@ const EmojiPicker = {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
+  directives: {
+    LazyImageContainer
+  },
   methods: {
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
@@ -184,7 +188,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     limitedEmojis (list, groupId) {
-      return list.slice(0, this.loadedCount[groupId])
+      return list // list.slice(0, this.loadedCount[groupId])
     },
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 7b2b7fc83..0e6c7e41e 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -62,6 +62,7 @@
         </div>
         <div
           ref="emoji-groups"
+          v-lazy-image-container
           class="emoji-groups"
           :class="groupsScrolledClass"
           @scroll="onScroll"
@@ -87,7 +88,7 @@
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
                 v-else
-                :src="emoji.imageUrl"
+                :data-src="emoji.imageUrl"
               >
             </span>
             <span :ref="'group-end-' + group.id" />
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
new file mode 100644
index 000000000..44adc828d
--- /dev/null
+++ b/src/directives/lazy_image_container.js
@@ -0,0 +1,13 @@
+
+import lozad from 'lozad'
+
+const LazyImageContainer = {
+  inserted (el) {
+    const images = el.querySelectorAll('img')
+    console.log(images.length)
+    el.$observer = lozad(images)
+    el.$observer.observe()
+  }
+}
+
+export default LazyImageContainer
diff --git a/yarn.lock b/yarn.lock
index 1529a091e..d861f8264 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5924,6 +5924,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lozad@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+  integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"

From cbe8a2a5d204808e4b01d0f531928034c5b2e9b4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:02:16 -0400
Subject: [PATCH 09/34] Clean up legacy code in emoji picker

Ref: grouped-emoji-picker
---
 src/components/emoji_input/emoji_input.js    |   1 -
 src/components/emoji_picker/emoji_picker.js  | 130 ++++---------------
 src/components/emoji_picker/emoji_picker.vue |   3 +-
 src/directives/lazy_image_container.js       |  13 --
 4 files changed, 28 insertions(+), 119 deletions(-)
 delete mode 100644 src/directives/lazy_image_container.js

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5ba3907ff..67f955553 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -205,7 +205,6 @@ const EmojiInput = {
     },
     triggerShowPicker () {
       this.showPicker = true
-      this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
         this.focusPickerInput()
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 82e5ad0b7..b0162479a 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,6 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
-import LazyImageContainer from '../../directives/lazy_image_container'
+import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -54,7 +54,6 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
       customEmojiLoadAllConfirmed: false,
       groupLoadedCount: {},
@@ -65,9 +64,6 @@ const EmojiPicker = {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
-  directives: {
-    LazyImageContainer
-  },
   methods: {
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
@@ -82,10 +78,6 @@ const EmojiPicker = {
     onScroll (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
-      this.scrolledGroup(target)
-      this.$nextTick(() => {
-        this.triggerLoadMore(target)
-      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -94,7 +86,6 @@ const EmojiPicker = {
       this.activeGroup = key
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = top + 1
-        this.loadEmoji(key)
       })
     },
     updateScrolledClass (target) {
@@ -106,101 +97,48 @@ const EmojiPicker = {
         this.groupsScrolledClass = 'scrolled-middle'
       }
     },
-    triggerLoadMore (target) {
-      Object.keys(this.allCustomGroups)
-        .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
-        .map(groupId => {
-          const ref = this.$refs[`group-end-${groupId}`][0]
-          if (!ref) return undefined
-
-          const bottom = ref.offsetTop + ref.offsetHeight
-
-          const group = this.$refs[`group-${groupId}`][0]
-          const top = group.offsetTop
-
-          const scrollerBottom = target.scrollTop + target.clientHeight
-          const scrollerTop = target.scrollTop
-          const scrollerMax = target.scrollHeight
-
-          // Loads more emoji when they come into view
-          const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-          // Always load when at the very top in case there's no scroll space yet
-          const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
-          const unscrollable = top - bottom < target.clientHeight
-          // Don't load when looking at unicode category or at the very bottom
-          const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-          if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
-            return groupId
-          }
-          return undefined
-        })
-        .filter(k => k)
-        .map(k => {
-          this.loadEmoji(k)
-        })
-    },
-    scrolledGroup (target) {
-      const top = target.scrollTop + 5
-      this.$nextTick(() => {
-        this.allEmojiGroups.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
-            this.activeGroup = group.id
-          }
-        })
-      })
-    },
-    loadEmoji (loadGroup) {
-      if (!this.allCustomGroups[loadGroup]) {
-        return
-      }
-
-      const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
-
-      if (allLoaded) {
-        return
-      }
-
-      this.groupLoadedCount = {
-        ...this.groupLoadedCount,
-        [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
-      }
-    },
-    startEmojiLoad (forceUpdate = false) {
-      if (!forceUpdate) {
-        this.keyword = ''
-      }
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = 0
-        this.$nextTick(() => {
-          if (this.firstLoaded) {
-            return
-          }
-          this.triggerLoadMore(this.$refs['emoji-groups'])
-          this.firstLoaded = true
-        })
-      })
-    },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
     },
     setShowStickers (value) {
       this.showingStickers = value
     },
-    limitedEmojis (list, groupId) {
-      return list // list.slice(0, this.loadedCount[groupId])
-    },
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword)
+    },
+    initializeLazyLoad () {
+      this.destroyLazyLoad()
+      this.$lozad = lozad('img', {})
+      this.$lozad.observe()
+    },
+    destroyLazyLoad () {
+      if (this.$lozad) {
+        if (this.$lozad.observer) {
+          this.$lozad.observer.disconnect()
+        }
+        if (this.$lozad.mutationObserver) {
+          this.$lozad.mutationObserver.disconnect()
+        }
+      }
     }
   },
   watch: {
     keyword () {
       this.customEmojiLoadAllConfirmed = false
       this.onScroll()
-      this.startEmojiLoad(true)
+      // Wait for the dom to change
+      this.$nextTick(() => this.initializeLazyLoad())
+    },
+    allCustomGroups () {
+      this.$nextTick(() => this.initializeLazyLoad())
     }
   },
+  mounted () {
+    this.initializeLazyLoad()
+  },
+  destroyed () {
+    this.destroyLazyLoad()
+  },
   computed: {
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
@@ -214,10 +152,6 @@ const EmojiPicker = {
     allCustomGroups () {
       return this.$store.getters.groupedCustomEmojis
     },
-    sensibleInitialAmountForAGroup () {
-      const groupCount = Object.keys(this.allCustomGroups).length
-      return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
-    },
     allEmojiGroups () {
       const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
@@ -237,16 +171,6 @@ const EmojiPicker = {
         }))
         .filter(group => group.emojis.length > 0)
     },
-    loadedCount () {
-      return Object.keys(this.allCustomGroups)
-        .reduce((res, groupId) => {
-          res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
-          return res
-        }, {})
-    },
-    lastNonUnicodeGroupId () {
-      return this.emojis[this.emojis.length - 2].id
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
     }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0e6c7e41e..0df33c241 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -62,7 +62,6 @@
         </div>
         <div
           ref="emoji-groups"
-          v-lazy-image-container
           class="emoji-groups"
           :class="groupsScrolledClass"
           @scroll="onScroll"
@@ -79,7 +78,7 @@
               {{ group.text }}
             </h6>
             <span
-              v-for="emoji in limitedEmojis(group.emojis, group.id)"
+              v-for="emoji in group.emojis"
               :key="group.id + emoji.displayText"
               :title="emoji.displayText"
               class="emoji-item"
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
deleted file mode 100644
index 44adc828d..000000000
--- a/src/directives/lazy_image_container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import lozad from 'lozad'
-
-const LazyImageContainer = {
-  inserted (el) {
-    const images = el.querySelectorAll('img')
-    console.log(images.length)
-    el.$observer = lozad(images)
-    el.$observer.observe()
-  }
-}
-
-export default LazyImageContainer

From fa482135a7413407d412dcc1c994818c566bc66d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:11:32 -0400
Subject: [PATCH 10/34] Fix scrol->highlight behaviour

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index b0162479a..31a455fde 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -78,6 +78,18 @@ const EmojiPicker = {
     onScroll (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
+      this.scrolledGroup(target)
+    },
+    scrolledGroup (target) {
+      const top = target.scrollTop + 5
+      this.$nextTick(() => {
+        this.allEmojiGroups.forEach(group => {
+          const ref = this.$refs['group-' + group.id]
+          if (ref[0].offsetTop <= top) {
+            this.activeGroup = group.id
+          }
+        })
+      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -134,6 +146,9 @@ const EmojiPicker = {
     }
   },
   mounted () {
+    if (this.defaultGroup) {
+      this.highlight(this.defaultGroup)
+    }
     this.initializeLazyLoad()
   },
   destroyed () {
@@ -152,6 +167,9 @@ const EmojiPicker = {
     allCustomGroups () {
       return this.$store.getters.groupedCustomEmojis
     },
+    defaultGroup () {
+      return Object.keys(this.allCustomGroups)[0]
+    },
     allEmojiGroups () {
       const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)

From e6fa4104e54266fdb93ff8411e49c696fde13205 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:20:35 -0400
Subject: [PATCH 11/34] Clean up unused variables

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 31a455fde..d60daab76 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -15,13 +15,6 @@ library.add(
   faSmileBeam
 )
 
-// At widest, approximately 20 emoji are visible in a row,
-// loading 3 rows, could be overkill for narrow picker
-const LOAD_EMOJI_BY = 60
-
-// When to start loading new batch emoji, in pixels
-const LOAD_EMOJI_MARGIN = 64
-
 const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
@@ -54,10 +47,7 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false,
-      groupLoadedCount: {},
-      firstLoaded: false
+      customEmojiTimeout: null
     }
   },
   components: {
@@ -136,7 +126,6 @@ const EmojiPicker = {
   },
   watch: {
     keyword () {
-      this.customEmojiLoadAllConfirmed = false
       this.onScroll()
       // Wait for the dom to change
       this.$nextTick(() => this.initializeLazyLoad())

From c06b01db85d0eb9d3f9ba54131823a40564687b4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:06:03 -0400
Subject: [PATCH 12/34] Remove useless class `disabled` in emoji picker

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0df33c241..fb2eef250 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -7,8 +7,7 @@
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
-            active: activeGroupView === group.id,
-            disabled: false
+            active: activeGroupView === group.id
           }"
           :title="group.text"
           @click.prevent="highlight(group.id)"

From b9fcf8da11a289c9cda4b5209d149cd7f31272e8 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:17:47 -0400
Subject: [PATCH 13/34] Use StillImage for emoji group header

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js  | 4 +++-
 src/components/emoji_picker/emoji_picker.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d60daab76..5b90c31e7 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import StillImage from '../still-image/still-image.vue'
 import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -52,7 +53,8 @@ const EmojiPicker = {
   },
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
-    Checkbox
+    Checkbox,
+    StillImage
   },
   methods: {
     onStickerUploaded (e) {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index fb2eef250..ed196066d 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -16,10 +16,10 @@
             v-if="group.image"
             class="emoji-picker-header-image"
           >
-            <img
+            <still-image
               :alt="group.text"
               :src="group.image"
-            >
+            />
           </span>
           <FAIcon
             v-else

From f7636247823031de114321c57d35aa2fbae37399 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:10:17 -0400
Subject: [PATCH 14/34] Fix vertical scrollbar of emoji picker header

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.scss | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 0bd4363cf..e315d2d7f 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,10 @@
 @import '../../_variables.scss';
 
+$emoji-picker-header-height: 36px;
+$emoji-picker-header-picture-width: 32px;
+$emoji-picker-header-picture-height: 32px;
+$emoji-picker-emoji-size: 32px;
+
 .emoji-picker {
   display: flex;
   flex-direction: column;
@@ -23,9 +28,11 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 30px;
-    height: 24px;
-    img {
+    width: $emoji-picker-header-picture-width;
+    max-width: $emoji-picker-header-picture-width;
+    height: $emoji-picker-header-picture-height;
+    max-height: $emoji-picker-header-picture-height;
+    .still-image {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
@@ -50,7 +57,7 @@
 
   .heading {
     display: flex;
-    height: 32px;
+    //height: $emoji-picker-header-height;
     padding: 10px 7px 5px;
     overflow-x: auto;
   }
@@ -87,11 +94,19 @@
     min-width: 0;
     flex-basis: auto;
     flex-shrink: 1;
+    display: flex;
+    align-content: center;
 
     &-item {
       padding: 0 7px;
       cursor: pointer;
       font-size: 1.85em;
+      width: $emoji-picker-header-picture-width;
+      max-width: $emoji-picker-header-picture-width;
+      height: $emoji-picker-header-picture-height;
+      max-height: $emoji-picker-header-picture-height;
+      display: flex;
+      align-items: center;
 
       &.disabled {
         opacity: 0.5;
@@ -181,11 +196,11 @@
     }
 
     &-item {
-      width: 32px;
-      height: 32px;
+      width: $emoji-picker-emoji-size;
+      height: $emoji-picker-emoji-size;
       box-sizing: border-box;
       display: flex;
-      font-size: 32px;
+      font-size: $emoji-picker-emoji-size;
       align-items: center;
       justify-content: center;
       margin: 4px;

From f92a25cfab6a39af015d5bda663b885c668718bb Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:46:00 -0400
Subject: [PATCH 15/34] Fix sticker picker heading tab

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index e315d2d7f..ea8b60378 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -57,9 +57,7 @@ $emoji-picker-emoji-size: 32px;
 
   .heading {
     display: flex;
-    //height: $emoji-picker-header-height;
     padding: 10px 7px 5px;
-    overflow-x: auto;
   }
 
   .content {
@@ -74,6 +72,7 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    overflow-x: auto;
   }
 
   .emoji-groups {
@@ -81,7 +80,8 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .additional-tabs {
-    display: block;
+    display: flex;
+    flex: 1;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -91,9 +91,8 @@ $emoji-picker-emoji-size: 32px;
 
   .additional-tabs,
   .emoji-tabs {
-    min-width: 0;
     flex-basis: auto;
-    flex-shrink: 1;
+    // flex-shrink: 1;
     display: flex;
     align-content: center;
 

From 2161067423993bef7f559fbd7d1fb10a3b851524 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:09:24 -0400
Subject: [PATCH 16/34] Lazy-load emoji picker in post form

When clicking the reply button, we used to load the whole emoji picker.
This causes a considerable delay even if the user is not going to use
the emoji picker. Now the content of the emoji picker is loaded only
after the user has explicitly opened the emoji picker.

Ref: grouped-emoji-picker
---
 src/components/emoji_input/emoji_input.vue   |  1 +
 src/components/emoji_picker/emoji_picker.js  | 24 ++++++++++++++++----
 src/components/emoji_picker/emoji_picker.vue |  9 ++++++--
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 7d95ab7e5..3c9d72120 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -19,6 +19,7 @@
         v-if="enableEmojiPicker"
         ref="picker"
         :class="{ hide: !showPicker }"
+        :showing="showPicker"
         :enable-sticker-picker="enableStickerPicker"
         class="emoji-picker-panel"
         @emoji="insert"
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5b90c31e7..8b4f302f8 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -39,6 +39,10 @@ const EmojiPicker = {
       required: false,
       type: Boolean,
       default: false
+    },
+    showing: {
+      required: true,
+      type: Boolean
     }
   },
   data () {
@@ -48,7 +52,9 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiTimeout: null
+      customEmojiTimeout: null,
+      // Lazy-load only after the first time `showing` becomes true.
+      contentLoaded: false
     }
   },
   components: {
@@ -115,6 +121,9 @@ const EmojiPicker = {
       this.$lozad = lozad('img', {})
       this.$lozad.observe()
     },
+    waitForDomAndInitializeLazyLoad() {
+      this.$nextTick(() => this.initializeLazyLoad())
+    },
     destroyLazyLoad () {
       if (this.$lozad) {
         if (this.$lozad.observer) {
@@ -129,18 +138,23 @@ const EmojiPicker = {
   watch: {
     keyword () {
       this.onScroll()
-      // Wait for the dom to change
-      this.$nextTick(() => this.initializeLazyLoad())
+      this.waitForDomAndInitializeLazyLoad()
     },
     allCustomGroups () {
-      this.$nextTick(() => this.initializeLazyLoad())
+      this.waitForDomAndInitializeLazyLoad()
+    },
+    showing (val) {
+      if (val) {
+        this.contentLoaded = true
+        this.waitForDomAndInitializeLazyLoad()
+      }
     }
   },
   mounted () {
     if (this.defaultGroup) {
       this.highlight(this.defaultGroup)
     }
-    this.initializeLazyLoad()
+    this.waitForDomAndInitializeLazyLoad()
   },
   destroyed () {
     this.destroyLazyLoad()
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ed196066d..b92bccd74 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="emoji-picker panel panel-default panel-body">
+  <div
+    class="emoji-picker panel panel-default panel-body"
+  >
     <div class="heading">
       <span class="emoji-tabs">
         <span
@@ -45,7 +47,10 @@
         </span>
       </span>
     </div>
-    <div class="content">
+    <div
+      v-if="contentLoaded"
+      class="content"
+    >
       <div
         class="emoji-content"
         :class="{hidden: showingStickers}"

From f50b3f5b0548530f023366acb0fda203ff4ae3fa Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:25:13 -0400
Subject: [PATCH 17/34] Lint

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 8b4f302f8..aeee867d4 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -121,7 +121,7 @@ const EmojiPicker = {
       this.$lozad = lozad('img', {})
       this.$lozad.observe()
     },
-    waitForDomAndInitializeLazyLoad() {
+    waitForDomAndInitializeLazyLoad () {
       this.$nextTick(() => this.initializeLazyLoad())
     },
     destroyLazyLoad () {

From 1a5638238bdd18940d0b32ba9b62ae668f7c6830 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:30:55 -0400
Subject: [PATCH 18/34] Group emojis only by pack and remove pack: prefix

Ref: grouped-emoji-picker
---
 src/modules/instance.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 8aadce77e..a7a91d99c 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -116,9 +116,15 @@ const instance = {
         .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
     },
     groupedCustomEmojis (state) {
+      const packsOf = emoji => {
+        return emoji.tags
+          .filter(k => k.startsWith('pack:'))
+          .map(k => k.slice(5)) // remove 'pack:' prefix
+      }
+
       return state.customEmoji
         .reduce((res, emoji) => {
-          emoji.tags.forEach(packName => {
+          packsOf(emoji).forEach(packName => {
             const packId = `custom-${packName}`
             if (!res[packId]) {
               res[packId] = ({

From 347fe8707141c97ee43791991af0d88a9cfd6a1f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:47:39 -0400
Subject: [PATCH 19/34] Fix error on emoji picker first load

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index aeee867d4..ea53a972a 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -133,6 +133,18 @@ const EmojiPicker = {
           this.$lozad.mutationObserver.disconnect()
         }
       }
+    },
+    onShowing () {
+      const oldContentLoaded = this.contentLoaded
+      this.contentLoaded = true
+      this.waitForDomAndInitializeLazyLoad()
+      if (!oldContentLoaded) {
+        this.$nextTick(() => {
+          if (this.defaultGroup) {
+            this.highlight(this.defaultGroup)
+          }
+        })
+      }
     }
   },
   watch: {
@@ -145,16 +157,14 @@ const EmojiPicker = {
     },
     showing (val) {
       if (val) {
-        this.contentLoaded = true
-        this.waitForDomAndInitializeLazyLoad()
+        this.onShowing()
       }
     }
   },
   mounted () {
-    if (this.defaultGroup) {
-      this.highlight(this.defaultGroup)
+    if (this.showing) {
+      this.onShowing()
     }
-    this.waitForDomAndInitializeLazyLoad()
   },
   destroyed () {
     this.destroyLazyLoad()

From 7c35b17d7f99ef12b1d0072e9e44061ecc63898a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:35:16 -0500
Subject: [PATCH 20/34] Use StillImage to render emojis in emoji picker

---
 src/components/emoji_picker/emoji_picker.js  | 15 +++++++++++++--
 src/components/emoji_picker/emoji_picker.vue |  5 +++--
 src/components/still-image/still-image.js    | 19 +++++++++++++++++--
 src/components/still-image/still-image.vue   |  5 +++--
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ea53a972a..315364d5b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -118,8 +118,19 @@ const EmojiPicker = {
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
-      this.$lozad = lozad('img', {})
-      this.$lozad.observe()
+      this.$nextTick(() => {
+        this.$lozad = lozad('.still-image.emoji-picker-emoji', {
+          load: el => {
+            const vn = el.__vue__
+            if (!vn) {
+              return
+            }
+
+            vn.loadLazy()
+          }
+        })
+        this.$lozad.observe()
+      })
     },
     waitForDomAndInitializeLazyLoad () {
       this.$nextTick(() => this.initializeLazyLoad())
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b92bccd74..19cc46b54 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -89,10 +89,11 @@
               @click.stop.prevent="onEmoji(emoji)"
             >
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
-              <img
+              <still-image
                 v-else
+                class="emoji-picker-emoji"
                 :data-src="emoji.imageUrl"
-              >
+              />
             </span>
             <span :ref="'group-end-' + group.id" />
           </div>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index d7abbcb5e..1806d33b0 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -7,16 +7,23 @@ const StillImage = {
     'imageLoadHandler',
     'alt',
     'height',
-    'width'
+    'width',
+    'dataSrc'
   ],
   data () {
     return {
+      // for lazy loading, see loadLazy()
+      realSrc: this.src,
       stopGifs: this.$store.getters.mergedConfig.stopGifs
     }
   },
   computed: {
     animated () {
-      return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+      if (!this.realSrc) {
+        return false
+      }
+
+      return this.stopGifs && (this.mimetype === 'image/gif' || this.realSrc.endsWith('.gif'))
     },
     style () {
       const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
@@ -27,7 +34,15 @@ const StillImage = {
     }
   },
   methods: {
+    loadLazy () {
+      if (this.dataSrc) {
+        this.realSrc = this.dataSrc
+      }
+    },
     onLoad () {
+      if (!this.realSrc) {
+        return
+      }
       const image = this.$refs.src
       if (!image) return
       this.imageLoadHandler && this.imageLoadHandler(image)
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index ab3080c8c..633fb229b 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,10 +11,11 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
-      :key="src"
+      :key="realSrc"
       :alt="alt"
       :title="alt"
-      :src="src"
+      :data-src="dataSrc"
+      :src="realSrc"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
       @error="onError"

From 056f3f8bc55039b9104e9abef2b59370fc8cde2c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:37:19 -0500
Subject: [PATCH 21/34] Clean up emoji picker css

---
 src/components/emoji_picker/emoji_picker.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ea8b60378..222749d01 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -92,7 +92,6 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs,
   .emoji-tabs {
     flex-basis: auto;
-    // flex-shrink: 1;
     display: flex;
     align-content: center;
 

From ebe517992c2ae937e1f42709a3e3b14e5f02ab3e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 02:17:59 -0500
Subject: [PATCH 22/34] Scroll active tab header into view in emoji picker

---
 src/components/emoji_picker/emoji_picker.js  | 18 ++++++++++++++++++
 src/components/emoji_picker/emoji_picker.vue |  6 +++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 315364d5b..26c767ac4 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -87,8 +87,26 @@ const EmojiPicker = {
             this.activeGroup = group.id
           }
         })
+        this.scrollHeader()
       })
     },
+    scrollHeader () {
+      // Scroll the active tab's header into view
+      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const left = headerRef.offsetLeft
+      const right = left + headerRef.offsetWidth
+      const headerCont = this.$refs.header
+      const currentScroll = headerCont.scrollLeft
+      const currentScrollRight = currentScroll + headerCont.clientWidth
+      const setScroll = s => { headerCont.scrollLeft = s }
+
+      const margin = 7 // .emoji-tabs-item: padding
+      if (left - margin < currentScroll) {
+        setScroll(left - margin)
+      } else if (right + margin > currentScrollRight) {
+        setScroll(right + margin - headerCont.clientWidth)
+      }
+    },
     highlight (key) {
       const ref = this.$refs['group-' + key]
       const top = ref.offsetTop
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 19cc46b54..e8d42c243 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,9 +3,13 @@
     class="emoji-picker panel panel-default panel-body"
   >
     <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        ref="header"
+        class="emoji-tabs"
+      >
         <span
           v-for="group in filteredEmojiGroups"
+          :ref="'group-header-' + group.id"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{

From ee14424a58a56eff03d5a1b345bdd11a7dab608a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:13:02 -0500
Subject: [PATCH 23/34] Generate grouped unicode emojis from unicode-emoji-json

---
 .gitignore            |    1 +
 build/build.js        |    3 +
 build/dev-server.js   |    3 +
 build/update-emoji.js |   27 +
 package.json          |    1 +
 static/emoji.json     | 1431 -----------------------------------------
 yarn.lock             |    5 +
 7 files changed, 40 insertions(+), 1431 deletions(-)
 create mode 100644 build/update-emoji.js
 delete mode 100644 static/emoji.json

diff --git a/.gitignore b/.gitignore
index 479d57c40..4df5ec838 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
+static/emoji.json
diff --git a/build/build.js b/build/build.js
index b3c9aad41..35969eb64 100644
--- a/build/build.js
+++ b/build/build.js
@@ -18,6 +18,9 @@ console.log(
 var spinner = ora('building for production...')
 spinner.start()
 
+var updateEmoji = require('./update-emoji').updateEmoji
+updateEmoji()
+
 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
 rm('-rf', assetsPath)
 mkdir('-p', assetsPath)
diff --git a/build/dev-server.js b/build/dev-server.js
index 854efa0bf..e51ba9484 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -10,6 +10,9 @@ var webpackConfig = process.env.NODE_ENV === 'testing'
   ? require('./webpack.prod.conf')
   : require('./webpack.dev.conf')
 
+var updateEmoji = require('./update-emoji').updateEmoji
+updateEmoji()
+
 // default port where dev server listens for incoming traffic
 var port = process.env.PORT || config.dev.port
 // Define HTTP proxies to your custom API backend
diff --git a/build/update-emoji.js b/build/update-emoji.js
new file mode 100644
index 000000000..5336a95bd
--- /dev/null
+++ b/build/update-emoji.js
@@ -0,0 +1,27 @@
+
+module.exports = {
+  updateEmoji () {
+    const emojis = require('unicode-emoji-json/data-by-group')
+    const fs = require('fs')
+
+    Object.keys(emojis)
+      .map(k => {
+        emojis[k].map(e => {
+          delete e.unicode_version
+          delete e.emoji_version
+          delete e.skin_tone_support_unicode_version
+        })
+      })
+
+    const res = {}
+    Object.keys(emojis)
+      .map(k => {
+        const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
+        res[groupId] = emojis[k]
+      })
+
+    console.log('Updating emojis...')
+    fs.writeFileSync('static/emoji.json', JSON.stringify(res))
+    console.log('Done.')
+  }
+}
diff --git a/package.json b/package.json
index 677d03b52..d2a708291 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
     "vue-loader": "^17.0.0",
+    "unicode-emoji-json": "^0.3.0",
     "vue-style-loader": "4.1.3",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "3.7.3",
diff --git a/static/emoji.json b/static/emoji.json
deleted file mode 100644
index 12b91b3f6..000000000
--- a/static/emoji.json
+++ /dev/null
@@ -1,1431 +0,0 @@
-{
-  "100": "💯",
-  "1234": "🔢",
-  "1st_place_medal": "🥇",
-  "2nd_place_medal": "🥈",
-  "3rd_place_medal": "🥉",
-  "8ball": "🎱",
-  "a_button_blood_type": "🅰",
-  "ab": "🆎",
-  "abacus": "🧮",
-  "abc": "🔤",
-  "abcd": "🔡",
-  "accept": "🉑",
-  "adhesive_bandage": "🩹",
-  "admission_tickets": "🎟",
-  "adult": "🧑",
-  "aerial_tramway": "🚡",
-  "airplane": "✈",
-  "airplane_arriving": "🛬",
-  "airplane_departure": "🛫",
-  "alarm_clock": "⏰",
-  "alembic": "⚗️",
-  "alien": "👽",
-  "ambulance": "🚑",
-  "amphora": "🏺",
-  "anchor": "⚓",
-  "angel": "👼",
-  "anger": "💢",
-  "anger_right": "🗯",
-  "angry": "😠",
-  "anguished": "😧",
-  "ant": "🐜",
-  "apple": "🍎",
-  "aquarius": "♒",
-  "aries": "♈",
-  "arrow_backward": "◀️",
-  "arrow_double_down": "⏬",
-  "arrow_double_up": "⏫",
-  "arrow_down": "⬇️",
-  "arrow_down_small": "🔽",
-  "arrow_forward": "▶️",
-  "arrow_heading_down": "⤵️",
-  "arrow_heading_up": "⤴️",
-  "arrow_left": "⬅️",
-  "arrow_lower_left": "↙️",
-  "arrow_lower_right": "↘️",
-  "arrow_right": "➡",
-  "arrow_right_hook": "↪️",
-  "arrow_up": "⬆️",
-  "arrow_up_down": "↕",
-  "arrow_up_small": "🔼",
-  "arrow_upper_left": "↖",
-  "arrow_upper_right": "↗️",
-  "arrows_clockwise": "🔃",
-  "arrows_counterclockwise": "🔄",
-  "art": "🎨",
-  "articulated_lorry": "🚛",
-  "artist_palette": "🎨",
-  "asterisk": "*⃣",
-  "astonished": "😲",
-  "athletic_shoe": "👟",
-  "atm": "🏧",
-  "atom": "⚛",
-  "atom_symbol": "⚛️",
-  "auto_rickshaw": "🛺",
-  "automobile": "🚗",
-  "avocado": "🥑",
-  "axe": "🪓",
-  "b_button_blood_type": "🅱",
-  "baby": "👶",
-  "baby_bottle": "🍼",
-  "baby_chick": "🐤",
-  "baby_symbol": "🚼",
-  "back": "🔙",
-  "bacon": "🥓",
-  "badger": "🦡",
-  "badminton": "🏸",
-  "bagel": "🥯",
-  "baggage_claim": "🛄",
-  "baguette_bread": "🥖",
-  "balance_scale": "⚖️",
-  "bald": "🦲",
-  "ballet_shoes": "🩰",
-  "balloon": "🎈",
-  "ballot_box": "🗳",
-  "ballot_box_with_check": "☑️",
-  "bamboo": "🎍",
-  "banana": "🍌",
-  "bangbang": "‼️",
-  "banjo": "🪕",
-  "bank": "🏦",
-  "bar_chart": "📊",
-  "barber": "💈",
-  "baseball": "⚾",
-  "basket": "🧺",
-  "basketball": "🏀",
-  "basketballer": "⛹",
-  "bat": "🦇",
-  "bath": "🛀",
-  "bathtub": "🛁",
-  "battery": "🔋",
-  "beach_umbrella": "⛱",
-  "beach_with_umbrella": "🏖",
-  "bear": "🐻",
-  "beard": "🧔",
-  "bearded_person": "🧔",
-  "bed": "🛏",
-  "bee": "🐝",
-  "beer": "🍺",
-  "beers": "🍻",
-  "beetle": "🐞",
-  "beginner": "🔰",
-  "bell": "🔔",
-  "bellhop_bell": "🛎",
-  "bento": "🍱",
-  "beverage_box": "🧃",
-  "bicyclist": "🚴",
-  "bike": "🚲",
-  "bikini": "👙",
-  "billed_cap": "🧢",
-  "biohazard": "☣️",
-  "bird": "🐦",
-  "birthday": "🎂",
-  "black_circle": "⚫",
-  "black_heart": "🖤",
-  "black_joker": "🃏",
-  "black_large_square": "⬛",
-  "black_medium_small_square": "◾",
-  "black_medium_square": "◼",
-  "black_nib": "✒️",
-  "black_small_square": "▪",
-  "black_square_button": "🔲",
-  "blond_haired_person": "👱",
-  "blossom": "🌼",
-  "blowfish": "🐡",
-  "blue_book": "📘",
-  "blue_car": "🚙",
-  "blue_circle": "🔵",
-  "blue_heart": "💙",
-  "blue_square": "🟦",
-  "blush": "😊",
-  "boar": "🐗",
-  "bomb": "💣",
-  "bone": "🦴",
-  "book": "📖",
-  "bookmark": "🔖",
-  "bookmark_tabs": "📑",
-  "books": "📚",
-  "boom": "💥",
-  "boot": "👢",
-  "bouquet": "💐",
-  "bow": "🙇",
-  "bow_and_arrow": "🏹",
-  "bowl_with_spoon": "🥣",
-  "bowling": "🎳",
-  "boxing_glove": "🥊",
-  "boy": "👦",
-  "brain": "🧠",
-  "bread": "🍞",
-  "breast_feeding": "🤱",
-  "breastfeeding": "🤱",
-  "brick": "🧱",
-  "bride_with_veil": "👰",
-  "bridge_at_night": "🌉",
-  "briefcase": "💼",
-  "briefs": "🩲",
-  "broccoli": "🥦",
-  "broken_heart": "💔",
-  "broom": "🧹",
-  "brown_circle": "🟤",
-  "brown_heart": "🤎",
-  "bug": "🐛",
-  "building_construction": "🏗",
-  "bulb": "💡",
-  "bullettrain_front": "🚅",
-  "bullettrain_side": "🚄",
-  "burrito": "🌯",
-  "bus": "🚌",
-  "busstop": "🚏",
-  "bust_in_silhouette": "👤",
-  "busts_in_silhouette": "👥",
-  "butter": "🧈",
-  "butterfly": "🦋",
-  "cactus": "🌵",
-  "cake": "🍰",
-  "calendar": "📆",
-  "call_me": "🤙",
-  "call_me_hand": "🤙",
-  "calling": "📲",
-  "camel": "🐫",
-  "camera": "📷",
-  "camera_with_flash": "📸",
-  "camping": "🏕",
-  "cancer": "♋",
-  "candle": "🕯",
-  "candy": "🍬",
-  "canned_food": "🥫",
-  "canoe": "🛶",
-  "capital_abcd": "🔠",
-  "capricorn": "♑",
-  "card_file_box": "🗃",
-  "card_index": "📇",
-  "card_index_dividers": "🗂",
-  "carousel_horse": "🎠",
-  "carrot": "🥕",
-  "cat": "🐱",
-  "cat2": "🐈",
-  "cd": "💿",
-  "chains": "⛓️",
-  "chair": "🪑",
-  "champagne": "🍾",
-  "champagne_glass": "🥂",
-  "chart": "💹",
-  "chart_with_downwards_trend": "📉",
-  "chart_with_upwards_trend": "📈",
-  "check_box_with_check": "☑",
-  "check_mark": "✔",
-  "checkered_flag": "🏁",
-  "cheese": "🧀",
-  "cheese_wedge": "🧀",
-  "cherries": "🍒",
-  "cherry_blossom": "🌸",
-  "chess_pawn": "♟",
-  "chestnut": "🌰",
-  "chicken": "🐔",
-  "child": "🧒",
-  "children_crossing": "🚸",
-  "chipmunk": "🐿",
-  "chocolate_bar": "🍫",
-  "chopsticks": "🥢",
-  "christmas_tree": "🎄",
-  "church": "⛪",
-  "cinema": "🎦",
-  "circled_m": "Ⓜ",
-  "circus_tent": "🎪",
-  "city_dusk": "🌆",
-  "city_sunset": "🌇",
-  "cityscape": "🏙",
-  "cityscape_at_dusk": "🌆",
-  "cl": "🆑",
-  "clap": "👏",
-  "clapper": "🎬",
-  "classical_building": "🏛",
-  "clinking_glasses": "🥂",
-  "clipboard": "📋",
-  "clock1": "🕐",
-  "clock10": "🕙",
-  "clock1030": "🕥",
-  "clock11": "🕚",
-  "clock1130": "🕦",
-  "clock12": "🕛",
-  "clock1230": "🕧",
-  "clock130": "🕜",
-  "clock2": "🕑",
-  "clock230": "🕝",
-  "clock3": "🕒",
-  "clock330": "🕞",
-  "clock4": "🕓",
-  "clock430": "🕟",
-  "clock5": "🕔",
-  "clock530": "🕠",
-  "clock6": "🕕",
-  "clock630": "🕡",
-  "clock7": "🕖",
-  "clock730": "🕢",
-  "clock8": "🕗",
-  "clock830": "🕣",
-  "clock9": "🕘",
-  "clock930": "🕤",
-  "closed_book": "📕",
-  "closed_lock_with_key": "🔐",
-  "closed_umbrella": "🌂",
-  "cloud": "☁️",
-  "cloud_with_lightning": "🌩",
-  "cloud_with_lightning_and_rain": "⛈️",
-  "cloud_with_rain": "🌧",
-  "cloud_with_snow": "🌨",
-  "clown": "🤡",
-  "clown_face": "🤡",
-  "club_suit": "♣️",
-  "clubs": "♣",
-  "coat": "🧥",
-  "cocktail": "🍸",
-  "coconut": "🥥",
-  "coffee": "☕",
-  "coffin": "⚰️",
-  "cold_face": "🥶",
-  "cold_sweat": "😰",
-  "comet": "☄️",
-  "compass": "🧭",
-  "compression": "🗜",
-  "computer": "💻",
-  "computer_mouse": "🖱",
-  "confetti_ball": "🎊",
-  "confounded": "😖",
-  "confused": "😕",
-  "congratulations": "㊗",
-  "construction": "🚧",
-  "construction_worker": "👷",
-  "control_knobs": "🎛",
-  "convenience_store": "🏪",
-  "cookie": "🍪",
-  "cooking": "🍳",
-  "cool": "🆒",
-  "cop": "👮",
-  "copyright": "©",
-  "corn": "🌽",
-  "couch_and_lamp": "🛋",
-  "couple": "👫",
-  "couple_with_heart": "💑",
-  "couplekiss": "💏",
-  "cow": "🐮",
-  "cow2": "🐄",
-  "cowboy": "🤠",
-  "cowboy_hat_face": "🤠",
-  "crab": "🦀",
-  "crayon": "🖍",
-  "crazy_face": "🤪",
-  "credit_card": "💳",
-  "crescent_moon": "🌙",
-  "cricket": "🦗",
-  "cricket_game": "🏏",
-  "crocodile": "🐊",
-  "croissant": "🥐",
-  "cross": "✝️",
-  "crossed_fingers": "🤞",
-  "crossed_flags": "🎌",
-  "crossed_swords": "⚔️",
-  "crown": "👑",
-  "cry": "😢",
-  "crying_cat_face": "😿",
-  "crystal_ball": "🔮",
-  "cucumber": "🥒",
-  "cup_with_straw": "🥤",
-  "cupcake": "🧁",
-  "cupid": "💘",
-  "curling_stone": "🥌",
-  "curly_hair": "🦱",
-  "curly_loop": "➰",
-  "currency_exchange": "💱",
-  "curry": "🍛",
-  "custard": "🍮",
-  "customs": "🛃",
-  "cut_of_meat": "🥩",
-  "cyclone": "🌀",
-  "dagger": "🗡",
-  "dancer": "💃",
-  "dancers": "👯",
-  "dango": "🍡",
-  "dark_skin_tone": "🏿",
-  "dark_sunglasses": "🕶",
-  "dart": "🎯",
-  "dash": "💨",
-  "date": "📅",
-  "deaf_person": "🧏",
-  "deciduous_tree": "🌳",
-  "deer": "🦌",
-  "department_store": "🏬",
-  "derelict_house": "🏚",
-  "desert": "🏜",
-  "desert_island": "🏝",
-  "desktop_computer": "🖥",
-  "detective": "🕵",
-  "diamond_shape_with_a_dot_inside": "💠",
-  "diamond_suit": "♦️",
-  "diamonds": "♦",
-  "disappointed": "😞",
-  "disappointed_relieved": "😥",
-  "diving_mask": "🤿",
-  "diya_lamp": "🪔",
-  "dizzy": "💫",
-  "dizzy_face": "😵",
-  "dna": "🧬",
-  "do_not_litter": "🚯",
-  "dog": "🐶",
-  "dog2": "🐕",
-  "dollar": "💵",
-  "dolls": "🎎",
-  "dolphin": "🐬",
-  "door": "🚪",
-  "double_exclamation_mark": "‼",
-  "doughnut": "🍩",
-  "dove": "🕊",
-  "down_arrow": "⬇",
-  "downleft_arrow": "↙",
-  "downright_arrow": "↘",
-  "dragon": "🐉",
-  "dragon_face": "🐲",
-  "dress": "👗",
-  "dromedary_camel": "🐪",
-  "drooling_face": "🤤",
-  "drop_of_blood": "🩸",
-  "droplet": "💧",
-  "drum": "🥁",
-  "duck": "🦆",
-  "dumpling": "🥟",
-  "dvd": "📀",
-  "e-mail": "📧",
-  "eagle": "🦅",
-  "ear": "👂",
-  "ear_of_rice": "🌾",
-  "ear_with_hearing_aid": "🦻",
-  "earth_africa": "🌍",
-  "earth_americas": "🌎",
-  "earth_asia": "🌏",
-  "egg": "🥚",
-  "eggplant": "🍆",
-  "eight": "8⃣",
-  "eight_pointed_black_star": "✴️",
-  "eight_spoked_asterisk": "✳️",
-  "eightpointed_star": "✴",
-  "eightspoked_asterisk": "✳",
-  "eject_button": "⏏",
-  "electric_plug": "🔌",
-  "elephant": "🐘",
-  "elf": "🧝",
-  "end": "🔚",
-  "envelope": "✉",
-  "envelope_with_arrow": "📩",
-  "euro": "💶",
-  "european_castle": "🏰",
-  "european_post_office": "🏤",
-  "evergreen_tree": "🌲",
-  "exclamation": "❗",
-  "exclamation_question_mark": "⁉",
-  "exploding_head": "🤯",
-  "expressionless": "😑",
-  "eye": "👁",
-  "eyeglasses": "👓",
-  "eyes": "👀",
-  "face_vomiting": "🤮",
-  "face_with_hand_over_mouth": "🤭",
-  "face_with_headbandage": "🤕",
-  "face_with_monocle": "🧐",
-  "face_with_raised_eyebrow": "🤨",
-  "face_with_symbols_on_mouth": "🤬",
-  "face_with_symbols_over_mouth": "🤬",
-  "face_with_thermometer": "🤒",
-  "factory": "🏭",
-  "fairy": "🧚",
-  "falafel": "🧆",
-  "fallen_leaf": "🍂",
-  "family": "👪",
-  "fast_forward": "⏩",
-  "fax": "📠",
-  "fearful": "😨",
-  "feet": "🐾",
-  "female_sign": "♀",
-  "ferris_wheel": "🎡",
-  "ferry": "⛴️",
-  "field_hockey": "🏑",
-  "file_cabinet": "🗄",
-  "file_folder": "📁",
-  "film_frames": "🎞",
-  "film_projector": "📽",
-  "fingers_crossed": "🤞",
-  "fire": "🔥",
-  "fire_engine": "🚒",
-  "fire_extinguisher": "🧯",
-  "firecracker": "🧨",
-  "fireworks": "🎆",
-  "first_place": "🥇",
-  "first_quarter_moon": "🌓",
-  "first_quarter_moon_with_face": "🌛",
-  "fish": "🐟",
-  "fish_cake": "🍥",
-  "fishing_pole_and_fish": "🎣",
-  "fist": "✊",
-  "five": "5⃣",
-  "flag_black": "🏴",
-  "flag_white": "🏳",
-  "flags": "🎏",
-  "flamingo": "🦩",
-  "flashlight": "🔦",
-  "flat_shoe": "🥿",
-  "fleur-de-lis": "⚜",
-  "fleurde-lis": "⚜️",
-  "floppy_disk": "💾",
-  "flower_playing_cards": "🎴",
-  "flushed": "😳",
-  "flying_disc": "🥏",
-  "flying_saucer": "🛸",
-  "fog": "🌫",
-  "foggy": "🌁",
-  "foot": "🦶",
-  "football": "🏈",
-  "footprints": "👣",
-  "fork_and_knife": "🍴",
-  "fork_and_knife_with_plate": "🍽",
-  "fortune_cookie": "🥠",
-  "fountain": "⛲",
-  "fountain_pen": "🖋",
-  "four": "4⃣",
-  "four_leaf_clover": "🍀",
-  "fox": "🦊",
-  "framed_picture": "🖼",
-  "free": "🆓",
-  "french_bread": "🥖",
-  "fried_shrimp": "🍤",
-  "fries": "🍟",
-  "frog": "🐸",
-  "frowning": "😦",
-  "frowning_face": "☹️",
-  "fuelpump": "⛽",
-  "full_moon": "🌕",
-  "full_moon_with_face": "🌝",
-  "funeral_urn": "⚱️",
-  "game_die": "🎲",
-  "garlic": "🧄",
-  "gear": "⚙️",
-  "gem": "💎",
-  "gemini": "♊",
-  "genie": "🧞",
-  "ghost": "👻",
-  "gift": "🎁",
-  "gift_heart": "💝",
-  "giraffe": "🦒",
-  "girl": "👧",
-  "glass_of_milk": "🥛",
-  "globe_with_meridians": "🌐",
-  "gloves": "🧤",
-  "goal": "🥅",
-  "goal_net": "🥅",
-  "goat": "🐐",
-  "goggles": "🥽",
-  "golf": "⛳",
-  "golfer": "🏌",
-  "gorilla": "🦍",
-  "grapes": "🍇",
-  "green_apple": "🍏",
-  "green_book": "📗",
-  "green_circle": "🟢",
-  "green_heart": "💚",
-  "green_salad": "🥗",
-  "green_square": "🟩",
-  "grey_exclamation": "❕",
-  "grey_question": "❔",
-  "grimacing": "😬",
-  "grin": "😁",
-  "grinning": "😀",
-  "guard": "💂",
-  "guardsman": "💂",
-  "guide_dog": "🦮",
-  "guitar": "🎸",
-  "gun": "🔫",
-  "haircut": "💇",
-  "hamburger": "🍔",
-  "hammer": "🔨",
-  "hammer_and_pick": "⚒️",
-  "hammer_and_wrench": "🛠",
-  "hamster": "🐹",
-  "hand_with_fingers_splayed": "🖐",
-  "handbag": "👜",
-  "handshake": "🤝",
-  "hash": "#⃣",
-  "hatched_chick": "🐥",
-  "hatching_chick": "🐣",
-  "head_bandage": "🤕",
-  "headphones": "🎧",
-  "hear_no_evil": "🙉",
-  "heart": "❤️",
-  "heart_decoration": "💟",
-  "heart_exclamation": "❣",
-  "heart_eyes": "😍",
-  "heart_eyes_cat": "😻",
-  "heart_suit": "♥️",
-  "heartbeat": "💓",
-  "heartpulse": "💗",
-  "hearts": "♥",
-  "heavy_check_mark": "✔️",
-  "heavy_division_sign": "➗",
-  "heavy_dollar_sign": "💲",
-  "heavy_minus_sign": "➖",
-  "heavy_multiplication_x": "✖️",
-  "heavy_plus_sign": "➕",
-  "hedgehog": "🦔",
-  "helicopter": "🚁",
-  "herb": "🌿",
-  "hibiscus": "🌺",
-  "high_brightness": "🔆",
-  "high_heel": "👠",
-  "hiking_boot": "🥾",
-  "hindu_temple": "🛕",
-  "hippopotamus": "🦛",
-  "hockey": "🏒",
-  "hole": "🕳",
-  "honey_pot": "🍯",
-  "horse": "🐴",
-  "horse_racing": "🏇",
-  "hospital": "🏥",
-  "hot_face": "🥵",
-  "hot_pepper": "🌶",
-  "hot_springs": "♨",
-  "hotdog": "🌭",
-  "hotel": "🏨",
-  "hotsprings": "♨️",
-  "hourglass": "⌛",
-  "hourglass_flowing_sand": "⏳",
-  "house": "🏠",
-  "house_with_garden": "🏡",
-  "houses": "🏘",
-  "hugging": "🤗",
-  "hundred_points": "💯",
-  "hushed": "😯",
-  "ice": "🧊",
-  "ice_cream": "🍨",
-  "ice_hockey": "🏒",
-  "ice_skate": "⛸️",
-  "icecream": "🍦",
-  "id": "🆔",
-  "ideograph_advantage": "🉐",
-  "imp": "👿",
-  "inbox_tray": "📥",
-  "incoming_envelope": "📨",
-  "index_pointing_up": "☝",
-  "infinity": "♾",
-  "information": "ℹ️",
-  "information_desk_person": "💁",
-  "information_source": "ℹ",
-  "innocent": "😇",
-  "input_numbers": "🔢",
-  "interrobang": "⁉️",
-  "iphone": "📱",
-  "izakaya_lantern": "🏮",
-  "jack_o_lantern": "🎃",
-  "japan": "🗾",
-  "japanese_castle": "🏯",
-  "japanese_congratulations_button": "㊗️",
-  "japanese_free_of_charge_button": "🈚",
-  "japanese_goblin": "👺",
-  "japanese_ogre": "👹",
-  "japanese_reserved_button": "🈯",
-  "japanese_secret_button": "㊙️",
-  "japanese_service_charge_button": "🈂",
-  "jeans": "👖",
-  "joy": "😂",
-  "joy_cat": "😹",
-  "joystick": "🕹",
-  "kaaba": "🕋",
-  "kangaroo": "🦘",
-  "key": "🔑",
-  "keyboard": "⌨️",
-  "keycap_ten": "🔟",
-  "kick_scooter": "🛴",
-  "kimono": "👘",
-  "kiss": "💋",
-  "kissing": "😗",
-  "kissing_cat": "😽",
-  "kissing_closed_eyes": "😚",
-  "kissing_heart": "😘",
-  "kissing_smiling_eyes": "😙",
-  "kitchen_knife": "🔪",
-  "kite": "🪁",
-  "kiwi": "🥝",
-  "kiwi_fruit": "🥝",
-  "knife": "🔪",
-  "koala": "🐨",
-  "koko": "🈁",
-  "lab_coat": "🥼",
-  "label": "🏷",
-  "lacrosse": "🥍",
-  "large_blue_diamond": "🔷",
-  "large_orange_diamond": "🔶",
-  "last_quarter_moon": "🌗",
-  "last_quarter_moon_with_face": "🌜",
-  "last_track_button": "⏮️",
-  "latin_cross": "✝",
-  "laughing": "😆",
-  "leafy_green": "🥬",
-  "leaves": "🍃",
-  "ledger": "📒",
-  "left_arrow": "⬅",
-  "left_arrow_curving_right": "↪",
-  "left_facing_fist": "🤛",
-  "left_luggage": "🛅",
-  "left_right_arrow": "↔",
-  "leftfacing_fist": "🤛",
-  "leftright_arrow": "↔️",
-  "leftwards_arrow_with_hook": "↩️",
-  "leg": "🦵",
-  "lemon": "🍋",
-  "leo": "♌",
-  "leopard": "🐆",
-  "level_slider": "🎚",
-  "libra": "♎",
-  "light_rail": "🚈",
-  "light_skin_tone": "🏻",
-  "link": "🔗",
-  "linked_paperclips": "🖇",
-  "lion_face": "🦁",
-  "lips": "👄",
-  "lipstick": "💄",
-  "lizard": "🦎",
-  "llama": "🦙",
-  "lobster": "🦞",
-  "lock": "🔒",
-  "lock_with_ink_pen": "🔏",
-  "lollipop": "🍭",
-  "loop": "➿",
-  "lotion_bottle": "🧴",
-  "loud_sound": "🔊",
-  "loudspeaker": "📢",
-  "love_hotel": "🏩",
-  "love_letter": "💌",
-  "love_you_gesture": "🤟",
-  "loveyou_gesture": "🤟",
-  "low_brightness": "🔅",
-  "luggage": "🧳",
-  "lying_face": "🤥",
-  "m": "Ⓜ️",
-  "mag": "🔍",
-  "mag_right": "🔎",
-  "mage": "🧙",
-  "magnet": "🧲",
-  "mahjong": "🀄",
-  "mailbox": "📫",
-  "mailbox_closed": "📪",
-  "mailbox_with_mail": "📬",
-  "mailbox_with_no_mail": "📭",
-  "male_sign": "♂",
-  "man": "👨",
-  "man_dancing": "🕺",
-  "man_in_suit": "🕴",
-  "man_in_tuxedo": "🤵",
-  "man_with_chinese_cap": "👲",
-  "man_with_gua_pi_mao": "👲",
-  "man_with_turban": "👳",
-  "mango": "🥭",
-  "mans_shoe": "👞",
-  "mantelpiece_clock": "🕰",
-  "manual_wheelchair": "🦽",
-  "maple_leaf": "🍁",
-  "martial_arts_uniform": "🥋",
-  "mask": "😷",
-  "massage": "💆",
-  "mate": "🧉",
-  "meat_on_bone": "🍖",
-  "mechanical_arm": "🦾",
-  "mechanical_leg": "🦿",
-  "medal": "🏅",
-  "medical_symbol": "⚕",
-  "medium_skin_tone": "🏽",
-  "mediumdark_skin_tone": "🏾",
-  "mediumlight_skin_tone": "🏼",
-  "mega": "📣",
-  "melon": "🍈",
-  "memo": "📝",
-  "menorah": "🕎",
-  "mens": "🚹",
-  "merperson": "🧜",
-  "metal": "🤘",
-  "metro": "🚇",
-  "microbe": "🦠",
-  "microphone": "🎤",
-  "microscope": "🔬",
-  "middle_finger": "🖕",
-  "military_medal": "🎖",
-  "milk": "🥛",
-  "milky_way": "🌌",
-  "minibus": "🚐",
-  "minidisc": "💽",
-  "mobile_phone_off": "📴",
-  "money_mouth": "🤑",
-  "money_with_wings": "💸",
-  "moneybag": "💰",
-  "moneymouth_face": "🤑",
-  "monkey": "🐒",
-  "monkey_face": "🐵",
-  "monorail": "🚝",
-  "moon_cake": "🥮",
-  "mortar_board": "🎓",
-  "mosque": "🕌",
-  "mosquito": "🦟",
-  "motor_boat": "🛥",
-  "motor_scooter": "🛵",
-  "motorcycle": "🏍",
-  "motorized_wheelchair": "🦼",
-  "motorway": "🛣",
-  "mount_fuji": "🗻",
-  "mountain": "⛰️",
-  "mountain_bicyclist": "🚵",
-  "mountain_cableway": "🚠",
-  "mountain_railway": "🚞",
-  "mouse": "🐭",
-  "mouse2": "🐁",
-  "movie_camera": "🎥",
-  "moyai": "🗿",
-  "mrs_claus": "🤶",
-  "multiplication_sign": "✖",
-  "muscle": "💪",
-  "mushroom": "🍄",
-  "musical_keyboard": "🎹",
-  "musical_note": "🎵",
-  "musical_score": "🎼",
-  "mute": "🔇",
-  "nail_care": "💅",
-  "name_badge": "📛",
-  "national_park": "🏞",
-  "nauseated_face": "🤢",
-  "nazar_amulet": "🧿",
-  "necktie": "👔",
-  "negative_squared_cross_mark": "❎",
-  "nerd": "🤓",
-  "neutral_face": "😐",
-  "new": "🆕",
-  "new_moon": "🌑",
-  "new_moon_with_face": "🌚",
-  "newspaper": "📰",
-  "next_track_button": "⏭️",
-  "ng": "🆖",
-  "night_with_stars": "🌃",
-  "nine": "9⃣",
-  "no_bell": "🔕",
-  "no_bicycles": "🚳",
-  "no_entry": "⛔",
-  "no_entry_sign": "🚫",
-  "no_good": "🙅",
-  "no_mobile_phones": "📵",
-  "no_mouth": "😶",
-  "no_pedestrians": "🚷",
-  "no_smoking": "🚭",
-  "non-potable_water": "🚱",
-  "nose": "👃",
-  "notebook": "📓",
-  "notebook_with_decorative_cover": "📔",
-  "notes": "🎶",
-  "nut_and_bolt": "🔩",
-  "o": "⭕",
-  "o_button_blood_type": "🅾",
-  "ocean": "🌊",
-  "octagonal_sign": "🛑",
-  "octopus": "🐙",
-  "oden": "🍢",
-  "office": "🏢",
-  "oil_drum": "🛢",
-  "ok": "🆗",
-  "ok_hand": "👌",
-  "ok_woman": "🙆",
-  "old_key": "🗝",
-  "older_adult": "🧓",
-  "older_man": "👴",
-  "older_person": "🧓",
-  "older_woman": "👵",
-  "om_symbol": "🕉",
-  "on": "🔛",
-  "oncoming_automobile": "🚘",
-  "oncoming_bus": "🚍",
-  "oncoming_fist": "👊",
-  "oncoming_police_car": "🚔",
-  "oncoming_taxi": "🚖",
-  "one": "1⃣",
-  "onepiece_swimsuit": "🩱",
-  "onion": "🧅",
-  "open_file_folder": "📂",
-  "open_hands": "👐",
-  "open_mouth": "😮",
-  "ophiuchus": "⛎",
-  "orange_book": "📙",
-  "orange_circle": "🟠",
-  "orange_heart": "🧡",
-  "orange_square": "🟧",
-  "orangutan": "🦧",
-  "orthodox_cross": "☦️",
-  "otter": "🦦",
-  "outbox_tray": "📤",
-  "owl": "🦉",
-  "ox": "🐂",
-  "oyster": "🦪",
-  "p_button": "🅿",
-  "package": "📦",
-  "page_facing_up": "📄",
-  "page_with_curl": "📃",
-  "pager": "📟",
-  "paintbrush": "🖌",
-  "palm_tree": "🌴",
-  "palms_up_together": "🤲",
-  "pancakes": "🥞",
-  "panda_face": "🐼",
-  "paperclip": "📎",
-  "parachute": "🪂",
-  "parrot": "🦜",
-  "part_alternation_mark": "〽",
-  "partly_sunny": "⛅",
-  "partying_face": "🥳",
-  "passenger_ship": "🛳",
-  "passport_control": "🛂",
-  "pause_button": "⏸️",
-  "peace": "☮",
-  "peace_symbol": "☮️",
-  "peach": "🍑",
-  "peacock": "🦚",
-  "peanuts": "🥜",
-  "pear": "🍐",
-  "pen": "🖊",
-  "pencil": "📝",
-  "pencil2": "✏",
-  "penguin": "🐧",
-  "pensive": "😔",
-  "people_with_bunny_ears_partying": "👯",
-  "people_wrestling": "🤼",
-  "performing_arts": "🎭",
-  "persevere": "😣",
-  "person": "🧑",
-  "person_biking": "🚴",
-  "person_bouncing_ball": "⛹️",
-  "person_bowing": "🙇",
-  "person_cartwheeling": "🤸",
-  "person_climbing": "🧗",
-  "person_doing_cartwheel": "🤸",
-  "person_facepalming": "🤦",
-  "person_fencing": "🤺",
-  "person_frowning": "🙍",
-  "person_gesturing_no": "🙅",
-  "person_gesturing_ok": "🙆",
-  "person_getting_haircut": "💇",
-  "person_getting_massage": "💆",
-  "person_in_lotus_position": "🧘",
-  "person_in_steamy_room": "🧖",
-  "person_juggling": "🤹",
-  "person_kneeling": "🧎",
-  "person_mountain_biking": "🚵",
-  "person_playing_handball": "🤾",
-  "person_playing_water_polo": "🤽",
-  "person_pouting": "🙎",
-  "person_raising_hand": "🙋",
-  "person_rowing_boat": "🚣",
-  "person_running": "🏃",
-  "person_shrugging": "🤷",
-  "person_standing": "🧍",
-  "person_surfing": "🏄",
-  "person_swimming": "🏊",
-  "person_tipping_hand": "💁",
-  "person_walking": "🚶",
-  "person_wearing_turban": "👳",
-  "person_with_blond_hair": "👱",
-  "person_with_pouting_face": "🙎",
-  "petri_dish": "🧫",
-  "pick": "⛏️",
-  "pie": "🥧",
-  "pig": "🐷",
-  "pig2": "🐖",
-  "pig_nose": "🐽",
-  "pill": "💊",
-  "pinching_hand": "🤏",
-  "pineapple": "🍍",
-  "ping_pong": "🏓",
-  "pisces": "♓",
-  "pizza": "🍕",
-  "place_of_worship": "🛐",
-  "play_button": "▶",
-  "play_or_pause_button": "⏯️",
-  "play_pause": "⏯",
-  "pleading_face": "🥺",
-  "point_down": "👇",
-  "point_left": "👈",
-  "point_right": "👉",
-  "point_up": "☝️",
-  "point_up_2": "👆",
-  "police_car": "🚓",
-  "police_officer": "👮",
-  "poodle": "🐩",
-  "poop": "💩",
-  "popcorn": "🍿",
-  "post_office": "🏣",
-  "postal_horn": "📯",
-  "postbox": "📮",
-  "potable_water": "🚰",
-  "potato": "🥔",
-  "pouch": "👝",
-  "poultry_leg": "🍗",
-  "pound": "💷",
-  "pouting_cat": "😾",
-  "pray": "🙏",
-  "prayer_beads": "📿",
-  "pregnant_woman": "🤰",
-  "pretzel": "🥨",
-  "prince": "🤴",
-  "princess": "👸",
-  "printer": "🖨",
-  "probing_cane": "🦯",
-  "punch": "👊",
-  "purple_circle": "🟣",
-  "purple_heart": "💜",
-  "purse": "👛",
-  "pushpin": "📌",
-  "put_litter_in_its_place": "🚮",
-  "puzzle_piece": "🧩",
-  "question": "❓",
-  "rabbit": "🐰",
-  "rabbit2": "🐇",
-  "raccoon": "🦝",
-  "racehorse": "🐎",
-  "racing_car": "🏎",
-  "radio": "📻",
-  "radio_button": "🔘",
-  "radioactive": "☢️",
-  "rage": "😡",
-  "railway_car": "🚃",
-  "railway_track": "🛤",
-  "rainbow": "🌈",
-  "raised_back_of_hand": "🤚",
-  "raised_hand": "✋",
-  "raised_hands": "🙌",
-  "raising_hand": "🙋",
-  "ram": "🐏",
-  "ramen": "🍜",
-  "rat": "🐀",
-  "razor": "🪒",
-  "receipt": "🧾",
-  "record_button": "⏺️",
-  "recycle": "♻",
-  "recycling_symbol": "♻️",
-  "red_car": "🚗",
-  "red_circle": "🔴",
-  "red_envelope": "🧧",
-  "red_hair": "🦰",
-  "red_heart": "❤",
-  "red_square": "🟥",
-  "regional_indicator_a": "🇦",
-  "regional_indicator_b": "🇧",
-  "regional_indicator_c": "🇨",
-  "regional_indicator_d": "🇩",
-  "regional_indicator_e": "🇪",
-  "regional_indicator_f": "🇫",
-  "regional_indicator_g": "🇬",
-  "regional_indicator_h": "🇭",
-  "regional_indicator_i": "🇮",
-  "regional_indicator_j": "🇯",
-  "regional_indicator_k": "🇰",
-  "regional_indicator_l": "🇱",
-  "regional_indicator_m": "🇲",
-  "regional_indicator_n": "🇳",
-  "regional_indicator_o": "🇴",
-  "regional_indicator_p": "🇵",
-  "regional_indicator_q": "🇶",
-  "regional_indicator_r": "🇷",
-  "regional_indicator_s": "🇸",
-  "regional_indicator_t": "🇹",
-  "regional_indicator_u": "🇺",
-  "regional_indicator_v": "🇻",
-  "regional_indicator_w": "🇼",
-  "regional_indicator_x": "🇽",
-  "regional_indicator_y": "🇾",
-  "regional_indicator_z": "🇿",
-  "registered": "®",
-  "relieved": "😌",
-  "reminder_ribbon": "🎗",
-  "repeat": "🔁",
-  "repeat_one": "🔂",
-  "rescue_worker’s_helmet": "⛑️",
-  "restroom": "🚻",
-  "reverse_button": "◀",
-  "revolving_hearts": "💞",
-  "rewind": "⏪",
-  "rhino": "🦏",
-  "rhinoceros": "🦏",
-  "ribbon": "🎀",
-  "rice": "🍚",
-  "rice_ball": "🍙",
-  "rice_cracker": "🍘",
-  "rice_scene": "🎑",
-  "right_arrow": "➡️",
-  "right_arrow_curving_down": "⤵",
-  "right_arrow_curving_left": "↩",
-  "right_arrow_curving_up": "⤴",
-  "right_facing_fist": "🤜",
-  "rightfacing_fist": "🤜",
-  "ring": "💍",
-  "ringed_planet": "🪐",
-  "robot": "🤖",
-  "rocket": "🚀",
-  "rofl": "🤣",
-  "roll_of_paper": "🧻",
-  "rolledup_newspaper": "🗞",
-  "roller_coaster": "🎢",
-  "rolling_eyes": "🙄",
-  "rolling_on_the_floor_laughing": "🤣",
-  "rooster": "🐓",
-  "rose": "🌹",
-  "rosette": "🏵",
-  "rotating_light": "🚨",
-  "round_pushpin": "📍",
-  "rowboat": "🚣",
-  "rugby_football": "🏉",
-  "runner": "🏃",
-  "running_shirt_with_sash": "🎽",
-  "safety_pin": "🧷",
-  "safety_vest": "🦺",
-  "sagittarius": "♐",
-  "sailboat": "⛵",
-  "sake": "🍶",
-  "salad": "🥗",
-  "salt": "🧂",
-  "sandal": "👡",
-  "sandwich": "🥪",
-  "santa": "🎅",
-  "sari": "🥻",
-  "satellite": "📡",
-  "sauropod": "🦕",
-  "saxophone": "🎷",
-  "scales": "⚖",
-  "scarf": "🧣",
-  "school": "🏫",
-  "school_satchel": "🎒",
-  "scissors": "✂",
-  "scooter": "🛴",
-  "scorpion": "🦂",
-  "scorpius": "♏",
-  "scream": "😱",
-  "scream_cat": "🙀",
-  "scroll": "📜",
-  "seat": "💺",
-  "second_place": "🥈",
-  "secret": "㊙",
-  "see_no_evil": "🙈",
-  "seedling": "🌱",
-  "selfie": "🤳",
-  "seven": "7⃣",
-  "shallow_pan_of_food": "🥘",
-  "shamrock": "☘️",
-  "shark": "🦈",
-  "shaved_ice": "🍧",
-  "sheep": "🐑",
-  "shell": "🐚",
-  "shield": "🛡",
-  "shinto_shrine": "⛩️",
-  "ship": "🚢",
-  "shirt": "👕",
-  "shopping_bags": "🛍",
-  "shopping_cart": "🛒",
-  "shorts": "🩳",
-  "shower": "🚿",
-  "shrimp": "🦐",
-  "shushing_face": "🤫",
-  "sign_of_the_horns": "🤘",
-  "signal_strength": "📶",
-  "six": "6⃣",
-  "six_pointed_star": "🔯",
-  "skateboard": "🛹",
-  "ski": "🎿",
-  "skier": "⛷️",
-  "skull": "💀",
-  "skull_and_crossbones": "☠️",
-  "skull_crossbones": "☠",
-  "skunk": "🦨",
-  "sled": "🛷",
-  "sleeping": "😴",
-  "sleeping_accommodation": "🛌",
-  "sleepy": "😪",
-  "slight_frown": "🙁",
-  "slight_smile": "🙂",
-  "slightly_frowning_face": "🙁",
-  "slot_machine": "🎰",
-  "sloth": "🦥",
-  "small_airplane": "🛩",
-  "small_blue_diamond": "🔹",
-  "small_orange_diamond": "🔸",
-  "small_red_triangle": "🔺",
-  "small_red_triangle_down": "🔻",
-  "smile": "😄",
-  "smile_cat": "😸",
-  "smiley": "😃",
-  "smiley_cat": "😺",
-  "smiling": "☺️",
-  "smiling_face": "☺",
-  "smiling_face_with_hearts": "🥰",
-  "smiling_imp": "😈",
-  "smirk": "😏",
-  "smirk_cat": "😼",
-  "smoking": "🚬",
-  "snail": "🐌",
-  "snake": "🐍",
-  "sneezing_face": "🤧",
-  "snowboarder": "🏂",
-  "snowcapped_mountain": "🏔",
-  "snowflake": "❄",
-  "snowman": "⛄",
-  "soap": "🧼",
-  "sob": "😭",
-  "soccer": "⚽",
-  "socks": "🧦",
-  "softball": "🥎",
-  "soon": "🔜",
-  "sos": "🆘",
-  "sound": "🔉",
-  "space_invader": "👾",
-  "spade_suit": "♠️",
-  "spades": "♠",
-  "spaghetti": "🍝",
-  "sparkle": "❇",
-  "sparkler": "🎇",
-  "sparkles": "✨",
-  "sparkling_heart": "💖",
-  "speak_no_evil": "🙊",
-  "speaker": "🔈",
-  "speaking_head": "🗣",
-  "speech_balloon": "💬",
-  "speech_left": "🗨",
-  "speedboat": "🚤",
-  "spider": "🕷",
-  "spider_web": "🕸",
-  "spiral_calendar": "🗓",
-  "spiral_notepad": "🗒",
-  "sponge": "🧽",
-  "spoon": "🥄",
-  "squid": "🦑",
-  "stadium": "🏟",
-  "star": "⭐",
-  "star2": "🌟",
-  "star_and_crescent": "☪️",
-  "star_of_david": "✡",
-  "star_struck": "🤩",
-  "stars": "🌠",
-  "starstruck": "🤩",
-  "station": "🚉",
-  "statue_of_liberty": "🗽",
-  "steam_locomotive": "🚂",
-  "stethoscope": "🩺",
-  "stew": "🍲",
-  "stop_button": "⏹️",
-  "stopwatch": "⏱️",
-  "straight_ruler": "📏",
-  "strawberry": "🍓",
-  "stuck_out_tongue": "😛",
-  "stuck_out_tongue_closed_eyes": "😝",
-  "stuck_out_tongue_winking_eye": "😜",
-  "studio_microphone": "🎙",
-  "stuffed_flatbread": "🥙",
-  "sun": "☀",
-  "sun_behind_large_cloud": "🌥",
-  "sun_behind_rain_cloud": "🌦",
-  "sun_behind_small_cloud": "🌤",
-  "sun_with_face": "🌞",
-  "sunflower": "🌻",
-  "sunglasses": "😎",
-  "sunny": "☀️",
-  "sunrise": "🌅",
-  "sunrise_over_mountains": "🌄",
-  "superhero": "🦸",
-  "supervillain": "🦹",
-  "surfer": "🏄",
-  "sushi": "🍣",
-  "suspension_railway": "🚟",
-  "swan": "🦢",
-  "sweat": "😓",
-  "sweat_drops": "💦",
-  "sweat_smile": "😅",
-  "sweet_potato": "🍠",
-  "swimmer": "🏊",
-  "symbols": "🔣",
-  "synagogue": "🕍",
-  "syringe": "💉",
-  "t_rex": "🦖",
-  "taco": "🌮",
-  "tada": "🎉",
-  "takeout_box": "🥡",
-  "tanabata_tree": "🎋",
-  "tangerine": "🍊",
-  "taurus": "♉",
-  "taxi": "🚕",
-  "tea": "🍵",
-  "teddy_bear": "🧸",
-  "telephone": "☎",
-  "telephone_receiver": "📞",
-  "telescope": "🔭",
-  "tennis": "🎾",
-  "tent": "⛺",
-  "test_tube": "🧪",
-  "thermometer": "🌡",
-  "thermometer_face": "🤒",
-  "thinking": "🤔",
-  "third_place": "🥉",
-  "thought_balloon": "💭",
-  "thread": "🧵",
-  "three": "3⃣",
-  "thumbsdown": "👎",
-  "thumbsup": "👍",
-  "ticket": "🎫",
-  "tiger": "🐯",
-  "tiger2": "🐅",
-  "timer_clock": "⏲️",
-  "tired_face": "😫",
-  "tm": "™",
-  "toilet": "🚽",
-  "tokyo_tower": "🗼",
-  "tomato": "🍅",
-  "tone1": "🏻",
-  "tone2": "🏼",
-  "tone3": "🏽",
-  "tone4": "🏾",
-  "tone5": "🏿",
-  "tongue": "👅",
-  "toolbox": "🧰",
-  "tooth": "🦷",
-  "top": "🔝",
-  "tophat": "🎩",
-  "tornado": "🌪",
-  "track_next": "⏭",
-  "track_previous": "⏮",
-  "trackball": "🖲",
-  "tractor": "🚜",
-  "trade_mark": "™️",
-  "traffic_light": "🚥",
-  "train": "🚋",
-  "train2": "🚆",
-  "tram": "🚊",
-  "trex": "🦖",
-  "triangular_flag_on_post": "🚩",
-  "triangular_ruler": "📐",
-  "trident": "🔱",
-  "triumph": "😤",
-  "trolleybus": "🚎",
-  "trophy": "🏆",
-  "tropical_drink": "🍹",
-  "tropical_fish": "🐠",
-  "truck": "🚚",
-  "trumpet": "🎺",
-  "tulip": "🌷",
-  "tumbler_glass": "🥃",
-  "turkey": "🦃",
-  "turtle": "🐢",
-  "tv": "📺",
-  "twisted_rightwards_arrows": "🔀",
-  "two": "2⃣",
-  "two_hearts": "💕",
-  "two_men_holding_hands": "👬",
-  "two_women_holding_hands": "👭",
-  "u5272": "🈹",
-  "u5408": "🈴",
-  "u55b6": "🈺",
-  "u6307": "🈯",
-  "u6708": "🈷",
-  "u6709": "🈶",
-  "u6e80": "🈵",
-  "u7121": "🈚",
-  "u7533": "🈸",
-  "u7981": "🈲",
-  "u7a7a": "🈳",
-  "umbrella": "☔",
-  "umbrella_on_ground": "⛱️",
-  "unamused": "😒",
-  "underage": "🔞",
-  "unicorn": "🦄",
-  "unlock": "🔓",
-  "up": "🆙",
-  "up_arrow": "⬆",
-  "updown_arrow": "↕️",
-  "upleft_arrow": "↖️",
-  "upright_arrow": "↗",
-  "upside_down": "🙃",
-  "v": "✌️",
-  "vampire": "🧛",
-  "vertical_traffic_light": "🚦",
-  "vhs": "📼",
-  "vibration_mode": "📳",
-  "victory_hand": "✌",
-  "video_camera": "📹",
-  "video_game": "🎮",
-  "violin": "🎻",
-  "virgo": "♍",
-  "volcano": "🌋",
-  "volleyball": "🏐",
-  "vs": "🆚",
-  "vulcan": "🖖",
-  "vulcan_salute": "🖖",
-  "waffle": "🧇",
-  "walking": "🚶",
-  "waning_crescent_moon": "🌘",
-  "waning_gibbous_moon": "🌖",
-  "warning": "⚠",
-  "wastebasket": "🗑",
-  "watch": "⌚",
-  "water_buffalo": "🐃",
-  "watermelon": "🍉",
-  "wave": "👋",
-  "wavy_dash": "〰️",
-  "waxing_crescent_moon": "🌒",
-  "waxing_gibbous_moon": "🌔",
-  "wc": "🚾",
-  "weary": "😩",
-  "wedding": "💒",
-  "weightlifter": "🏋",
-  "whale": "🐳",
-  "whale2": "🐋",
-  "wheel_of_dharma": "☸️",
-  "wheelchair": "♿",
-  "white_check_mark": "✅",
-  "white_circle": "⚪",
-  "white_flower": "💮",
-  "white_hair": "🦳",
-  "white_heart": "🤍",
-  "white_large_square": "⬜",
-  "white_medium_small_square": "◽",
-  "white_medium_square": "◻️",
-  "white_small_square": "▫️",
-  "white_square_button": "🔳",
-  "wilted_flower": "🥀",
-  "wilted_rose": "🥀",
-  "wind_blowing_face": "🌬",
-  "wind_chime": "🎐",
-  "wine_glass": "🍷",
-  "wink": "😉",
-  "wolf": "🐺",
-  "woman": "👩",
-  "woman_with_headscarf": "🧕",
-  "womans_clothes": "👚",
-  "womans_hat": "👒",
-  "womens": "🚺",
-  "woozy_face": "🥴",
-  "world_map": "🗺",
-  "worried": "😟",
-  "wrench": "🔧",
-  "writing_hand": "✍️",
-  "x": "❌",
-  "yarn": "🧶",
-  "yawning_face": "🥱",
-  "yellow_circle": "🟡",
-  "yellow_heart": "💛",
-  "yellow_square": "🟨",
-  "yen": "💴",
-  "yin_yang": "☯️",
-  "yoyo": "🪀",
-  "yum": "😋",
-  "zany_face": "🤪",
-  "zap": "⚡",
-  "zebra": "🦓",
-  "zero": "0⃣",
-  "zipper_mouth": "🤐",
-  "zombie": "🧟",
-  "zzz": "💤"
-}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index d861f8264..42f039294 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8497,6 +8497,11 @@ unicode-canonical-property-names-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
   integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
 
+unicode-emoji-json@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/unicode-emoji-json/-/unicode-emoji-json-0.3.0.tgz#965e097ef8a367081c5036f81873015a95a5c1ad"
+  integrity sha512-yImheILedqhZtVEEenRELu9AnX347ZTA3bVMWAU5WMUv7pdU2hcfpwo2mKN8Rns9uHLmOZP90/4B4SPS5aF/iw==
+
 unicode-match-property-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"

From 28f33b385597bc39ac2ade74720541d5f45d05da Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:55:00 -0500
Subject: [PATCH 24/34] Make emoji picker use grouped unicode emojis

---
 src/components/emoji_input/suggestor.js       |  2 +-
 src/components/emoji_picker/emoji_picker.js   | 16 ++++----
 .../post_status_form/post_status_form.js      |  6 +--
 src/components/react_button/react_button.js   |  4 +-
 .../settings_modal/tabs/profile_tab.js        |  4 +-
 src/modules/instance.js                       | 38 +++++++++++++++----
 6 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index e8efbd1e0..befe82be6 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -2,7 +2,7 @@
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
  * data.emoji - optional, an array of all emoji available i.e.
- *   (state.instance.emoji + state.instance.customEmoji)
+ *   (getters.standardEmojiList + state.instance.customEmoji)
  * data.users - optional, an array of all known users
  * updateUsersList - optional, a function to search and append to users
  *
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 26c767ac4..4990afb3e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -214,16 +214,18 @@ const EmojiPicker = {
     defaultGroup () {
       return Object.keys(this.allCustomGroups)[0]
     },
+    unicodeEmojiGroups () {
+      return this.$store.getters.standardEmojiGroupList.map(group => ({
+        id: `standard-${group.id}`,
+        text: this.$t(`emoji.unicode_groups.${group.id}`),
+        icon: 'box-open',
+        emojis: group.emojis
+      }))
+    },
     allEmojiGroups () {
-      const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
         .map(([_, v]) => v)
-        .concat({
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        })
+        .concat(this.unicodeEmojiGroups)
     },
     filteredEmojiGroups () {
       return this.allEmojiGroups
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c0d80b20e..7b537c5ce 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -164,7 +164,7 @@ const PostStatusForm = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -173,13 +173,13 @@ const PostStatusForm = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })
     },
     emoji () {
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     customEmoji () {
       return this.$store.state.instance.customEmoji || []
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 37d6e7d04..4b2016260 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -46,7 +46,7 @@ const ReactButton = {
       if (this.filterWord !== '') {
         const filterWordLowercase = trim(this.filterWord.toLowerCase())
         const orderedEmojiList = []
-        for (const emoji of this.$store.state.instance.emoji) {
+        for (const emoji of this.$store.getters.standardEmojiList) {
           if (emoji.replacement === this.filterWord) return [emoji]
 
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
@@ -59,7 +59,7 @@ const ReactButton = {
         }
         return orderedEmojiList.flat()
       }
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 376248efd..b86faef0e 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -64,7 +64,7 @@ const ProfileTab = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -73,7 +73,7 @@ const ProfileTab = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })
diff --git a/src/modules/instance.js b/src/modules/instance.js
index a7a91d99c..2fcb059c5 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 
+const SORTED_EMOJI_GROUP_IDS = [
+  'smileys-and-emotion',
+  'people-and-body',
+  'animals-and-nature',
+  'food-and-drink',
+  'travel-and-places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags'
+]
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -64,7 +76,7 @@ const defaultState = {
   // Nasty stuff
   customEmoji: [],
   customEmojiFetched: false,
-  emoji: [],
+  emoji: {},
   emojiFetched: false,
   pleromaBackend: true,
   postFormats: [],
@@ -139,6 +151,17 @@ const instance = {
           return res
         }, {})
     },
+    standardEmojiList (state) {
+      return SORTED_EMOJI_GROUP_IDS
+        .map(groupId => state.emoji[groupId] || [])
+        .reduce((a, b) => a.concat(b), [])
+    },
+    standardEmojiGroupList (state) {
+      return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+        id: groupId,
+        emojis: state.emoji[groupId] || []
+      }))
+    },
     instanceDomain (state) {
       return new URL(state.server).hostname
     }
@@ -165,13 +188,14 @@ const instance = {
         const res = await window.fetch('/static/emoji.json')
         if (res.ok) {
           const values = await res.json()
-          const emoji = Object.keys(values).map((key) => {
-            return {
-              displayText: key,
+          const emoji = Object.keys(values).reduce((res, groupId) => {
+            res[groupId] = values[groupId].map(e => ({
+              displayText: e.name,
               imageUrl: false,
-              replacement: values[key]
-            }
-          }).sort((a, b) => a.name > b.name ? 1 : -1)
+              replacement: e.emoji
+            }))
+            return res
+          }, {})
           commit('setInstanceOption', { name: 'emoji', value: emoji })
         } else {
           throw (res)

From 6c7b65207c4bf774f3605b43ca1a9f50ae12bf45 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:14:23 -0500
Subject: [PATCH 25/34] Add icons for unicode emoji groups

---
 src/components/emoji_picker/emoji_picker.js | 36 +++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 4990afb3e..bf4a98d4d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -6,16 +6,46 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 } from '@fortawesome/free-solid-svg-icons'
 import { trim } from 'lodash'
 
 library.add(
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 )
 
+const UNICODE_EMOJI_GROUP_ICON = {
+  'smileys-and-emotion': 'smile',
+  'people-and-body': 'user',
+  'animals-and-nature': 'paw',
+  'food-and-drink': 'ice-cream',
+  'travel-and-places': 'bus',
+  'activities': 'basketball-ball',
+  'objects': 'lightbulb',
+  'symbols': 'code',
+  'flags': 'flag',
+}
+
 const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
@@ -218,7 +248,7 @@ const EmojiPicker = {
       return this.$store.getters.standardEmojiGroupList.map(group => ({
         id: `standard-${group.id}`,
         text: this.$t(`emoji.unicode_groups.${group.id}`),
-        icon: 'box-open',
+        icon: UNICODE_EMOJI_GROUP_ICON[group.id],
         emojis: group.emojis
       }))
     },

From 9d73d7f96811086167572baa9df93234fa782202 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:16:48 -0500
Subject: [PATCH 26/34] Add English translation for unicode emoji group names

---
 src/i18n/en.json | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2e8459597..c84ae4be5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -191,6 +191,17 @@
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
     "unicode": "Unicode emoji",
+    "unicode_groups": {
+      "activities": "Activities",
+      "animals-and-nature": "Animals & Nature",
+      "flags": "Flags",
+      "food-and-drink": "Food & Drink",
+      "objects": "Objects",
+      "people-and-body": "People & Body",
+      "smileys-and-emotion": "Smileys & Emotion",
+      "symbols": "Symbols",
+      "travel-and-places": "Travel & Places"
+    },
     "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
     "load_all": "Loading all {emojiAmount} emoji"
   },

From baf6082a257abc72474754785dd4075eaaea8b27 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:17:32 -0500
Subject: [PATCH 27/34] Lint

---
 src/components/emoji_picker/emoji_picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bf4a98d4d..07f4b0053 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -43,7 +43,7 @@ const UNICODE_EMOJI_GROUP_ICON = {
   'activities': 'basketball-ball',
   'objects': 'lightbulb',
   'symbols': 'code',
-  'flags': 'flag',
+  'flags': 'flag'
 }
 
 const filterByKeyword = (list, keyword = '') => {

From 1a1d6b464e6a587d59d98edef4f9f38510d0ea2f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 17 Jan 2022 23:41:11 -0500
Subject: [PATCH 28/34] Make StillImage react to src changes

---
 src/components/still-image/still-image.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 1806d33b0..200ef147d 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -57,6 +57,14 @@ const StillImage = {
     onError () {
       this.imageLoadError && this.imageLoadError()
     }
+  },
+  watch: {
+    src () {
+      this.realSrc = this.src
+    },
+    dataSrc () {
+      this.$el.removeAttribute('data-loaded')
+    }
   }
 }
 

From a3821d0eca4a780cb6e9ea5f5bfa5a539d05b31e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 21:29:50 -0400
Subject: [PATCH 29/34] Make emoji picker work with vue3

---
 src/components/emoji_picker/emoji_picker.js  | 21 ++++++++++++++------
 src/components/emoji_picker/emoji_picker.vue |  8 +++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 07f4b0053..677ef5e47 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -84,7 +84,9 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiTimeout: null,
       // Lazy-load only after the first time `showing` becomes true.
-      contentLoaded: false
+      contentLoaded: false,
+      groupRefs: {},
+      emojiRefs: {}
     }
   },
   components: {
@@ -93,6 +95,12 @@ const EmojiPicker = {
     StillImage
   },
   methods: {
+    setGroupRef (name) {
+      return el => { this.groupRefs[name] = el }
+    },
+    setEmojiRef (name) {
+      return el => { this.emojiRefs[name] = el }
+    },
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
     },
@@ -112,8 +120,8 @@ const EmojiPicker = {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
         this.allEmojiGroups.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          const ref = this.groupRefs['group-' + group.id]
+          if (ref && ref.offsetTop <= top) {
             this.activeGroup = group.id
           }
         })
@@ -122,7 +130,7 @@ const EmojiPicker = {
     },
     scrollHeader () {
       // Scroll the active tab's header into view
-      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const headerRef = this.groupRefs['group-header-' + this.activeGroup]
       const left = headerRef.offsetLeft
       const right = left + headerRef.offsetWidth
       const headerCont = this.$refs.header
@@ -138,7 +146,7 @@ const EmojiPicker = {
       }
     },
     highlight (key) {
-      const ref = this.$refs['group-' + key]
+      const ref = this.groupRefs['group-' + key]
       const top = ref.offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
@@ -169,7 +177,8 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.$lozad = lozad('.still-image.emoji-picker-emoji', {
           load: el => {
-            const vn = el.__vue__
+            const name = el.getAttribute('data-emoji-name')
+            const vn = this.emojiRefs[name]
             if (!vn) {
               return
             }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index e8d42c243..a6a634110 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -9,7 +9,7 @@
       >
         <span
           v-for="group in filteredEmojiGroups"
-          :ref="'group-header-' + group.id"
+          :ref="setGroupRef('group-header-' + group.id)"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -80,7 +80,7 @@
             class="emoji-group"
           >
             <h6
-              :ref="'group-' + group.id"
+              :ref="setGroupRef('group-' + group.id)"
               class="emoji-group-title"
             >
               {{ group.text }}
@@ -96,10 +96,12 @@
               <still-image
                 v-else
                 class="emoji-picker-emoji"
+                :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
+                :data-emoji-name="group.id + emoji.displayText"
               />
             </span>
-            <span :ref="'group-end-' + group.id" />
+            <span :ref="setGroupRef('group-end-' + group.id)" />
           </div>
         </div>
         <div class="keep-open">

From a521e9b33eab7105b3ab7f3f52cbd27161846467 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 29 Apr 2022 22:40:06 -0400
Subject: [PATCH 30/34] Limit the width of unsupported multichar emojis

---
 src/components/emoji_picker/emoji_picker.scss | 8 ++++++--
 src/components/emoji_picker/emoji_picker.vue  | 7 +++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 222749d01..af01b3ec0 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -198,18 +198,22 @@ $emoji-picker-emoji-size: 32px;
       height: $emoji-picker-emoji-size;
       box-sizing: border-box;
       display: flex;
-      font-size: $emoji-picker-emoji-size;
+      line-height: $emoji-picker-emoji-size;
       align-items: center;
       justify-content: center;
       margin: 4px;
 
       cursor: pointer;
 
-      img {
+      .emoji-picker-emoji.-custom {
         object-fit: contain;
         max-width: 100%;
         max-height: 100%;
       }
+      .emoji-picker-emoji.-unicode {
+        font-size: 24px;
+        overflow: hidden;
+      }
     }
 
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a6a634110..e5a5958ce 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -92,10 +92,13 @@
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              <span
+                v-if="!emoji.imageUrl"
+                class="emoji-picker-emoji -unicode"
+              >{{ emoji.replacement }}</span>
               <still-image
                 v-else
-                class="emoji-picker-emoji"
+                class="emoji-picker-emoji -custom"
                 :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
                 :data-emoji-name="group.id + emoji.displayText"

From 724913cabd5e28ad5847aaaaaab7cc4ada32dbc4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 20 Jun 2022 08:50:32 -0400
Subject: [PATCH 31/34] Use trimmed keyword for filtering emojis

---
 src/components/emoji_picker/emoji_picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 677ef5e47..3cb6f76d2 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -270,7 +270,7 @@ const EmojiPicker = {
       return this.allEmojiGroups
         .map(group => ({
           ...group,
-          emojis: filterByKeyword(group.emojis, this.keyword)
+          emojis: filterByKeyword(group.emojis, trim(this.keyword))
         }))
         .filter(group => group.emojis.length > 0)
     },

From 7f84e177704c88d9bc40cd49f382749bc49d8578 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Jul 2022 23:10:06 -0400
Subject: [PATCH 32/34] Tweak efficiency when changing filter keywords in emoji
 picker

---
 src/components/emoji_picker/emoji_picker.js | 31 +++++++++++++--------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3cb6f76d2..6a7b52853 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -17,7 +17,7 @@ import {
   faCode,
   faFlag
 } from '@fortawesome/free-solid-svg-icons'
-import { trim } from 'lodash'
+import { debounce, trim } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -86,7 +86,8 @@ const EmojiPicker = {
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
-      emojiRefs: {}
+      emojiRefs: {},
+      filteredEmojiGroups: []
     }
   },
   components: {
@@ -206,6 +207,7 @@ const EmojiPicker = {
       const oldContentLoaded = this.contentLoaded
       this.contentLoaded = true
       this.waitForDomAndInitializeLazyLoad()
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
           if (this.defaultGroup) {
@@ -213,15 +215,24 @@ const EmojiPicker = {
           }
         })
       }
+    },
+    getFilteredEmojiGroups () {
+      return this.allEmojiGroups
+        .map(group => ({
+          ...group,
+          emojis: filterByKeyword(group.emojis, trim(this.keyword))
+        }))
+        .filter(group => group.emojis.length > 0)
     }
   },
   watch: {
     keyword () {
       this.onScroll()
-      this.waitForDomAndInitializeLazyLoad()
+      this.debouncedHandleKeywordChange()
     },
     allCustomGroups () {
       this.waitForDomAndInitializeLazyLoad()
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
     },
     showing (val) {
       if (val) {
@@ -266,16 +277,14 @@ const EmojiPicker = {
         .map(([_, v]) => v)
         .concat(this.unicodeEmojiGroups)
     },
-    filteredEmojiGroups () {
-      return this.allEmojiGroups
-        .map(group => ({
-          ...group,
-          emojis: filterByKeyword(group.emojis, trim(this.keyword))
-        }))
-        .filter(group => group.emojis.length > 0)
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
+    },
+    debouncedHandleKeywordChange () {
+      return debounce(() => {
+        this.waitForDomAndInitializeLazyLoad()
+        this.filteredEmojiGroups = this.getFilteredEmojiGroups()
+      }, 500)
     }
   }
 }

From b376a5b8642e0c66accc4e9c532d26b6d6d04730 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:03:52 -0400
Subject: [PATCH 33/34] Fix emoji picker lint

---
 src/components/emoji_picker/emoji_picker.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 6a7b52853..c2ae76f34 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -40,10 +40,10 @@ const UNICODE_EMOJI_GROUP_ICON = {
   'animals-and-nature': 'paw',
   'food-and-drink': 'ice-cream',
   'travel-and-places': 'bus',
-  'activities': 'basketball-ball',
-  'objects': 'lightbulb',
-  'symbols': 'code',
-  'flags': 'flag'
+  activities: 'basketball-ball',
+  objects: 'lightbulb',
+  symbols: 'code',
+  flags: 'flag'
 }
 
 const filterByKeyword = (list, keyword = '') => {

From a3b01284f7fab75a6fd14849a29099cedbfa42e7 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:30:54 -0400
Subject: [PATCH 34/34] Fix emoji picker lint

---
 src/components/emoji_picker/emoji_picker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index e5a5958ce..689138e6d 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -98,8 +98,8 @@
               >{{ emoji.replacement }}</span>
               <still-image
                 v-else
-                class="emoji-picker-emoji -custom"
                 :ref="setEmojiRef(group.id + emoji.displayText)"
+                class="emoji-picker-emoji -custom"
                 :data-src="emoji.imageUrl"
                 :data-emoji-name="group.id + emoji.displayText"
               />