Group custom emojis by pack in emoji picker

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 f6920208..9e398176 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 a2f17c51..ccb12a2a 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 a7269120..16549c08 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
           />