Steal just the updated emoji picker from Akkoma's pleroma-fe

src/components/emoji_picker/emoji_picker.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -5,6 +6,7 @@ import {
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
+import { trim, escapeRegExp, startCase } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -19,23 +21,6 @@ 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
-
-  const keywordLowercase = keyword.toLowerCase()
-  let orderedEmojiList = []
-  for (const emoji of list) {
-    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
-    if (indexOfKeyword > -1) {
-      if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
-        orderedEmojiList[indexOfKeyword] = []
-      }
-      orderedEmojiList[indexOfKeyword].push(emoji)
-    }
-  }
-  return orderedEmojiList.flat()
-}
-
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
@@ -47,7 +32,7 @@ const EmojiPicker = {
   data () {
     return {
       keyword: '',
-      activeGroup: 'custom',
+      activeGroup: 'standard',
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
@@ -57,7 +42,7 @@ const EmojiPicker = {
     }
   },
   components: {
-    StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
+    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
   methods: {
@@ -77,14 +62,13 @@ const EmojiPicker = {
       this.scrolledGroup(target)
       this.triggerLoadMore(target)
     },
+    onWheel (e) {
+      e.preventDefault()
+      this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
+    },
     highlight (key) {
-      const ref = this.$refs['group-' + key]
-      const top = ref[0].offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = top + 1
-      })
     },
     updateScrolledClass (target) {
       if (target.scrollTop <= 5) {
@@ -96,7 +80,7 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom'][0]
+      const ref = this.$refs['group-end-custom']
       if (!ref) return
       const bottom = ref.offsetTop + ref.offsetHeight
 
@@ -119,7 +103,7 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.emojisView.forEach(group => {
           const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          if (ref.offsetTop <= top) {
             this.activeGroup = group.id
           }
         })
@@ -153,6 +137,13 @@ const EmojiPicker = {
     },
     setShowStickers (value) {
       this.showingStickers = value
+    },
+    filterByKeyword (list) {
+      if (this.keyword === '') return list
+      const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i')
+      return list.filter(emoji => {
+        return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
+      })
     }
   },
   watch: {
@@ -173,9 +164,8 @@ const EmojiPicker = {
       return 0
     },
     filteredEmoji () {
-      return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
-        this.keyword
+      return this.filterByKeyword(
+        this.$store.state.instance.customEmoji || []
       )
     },
     customEmojiBuffer () {
@@ -183,28 +173,53 @@ const EmojiPicker = {
     },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.customEmojiBuffer
-
+      const customEmojis = this.sortedEmoji
+      const emojiPacks = []
+      customEmojis.forEach((pack, id) => {
+        emojiPacks.push({
+          id: id.replace(/^pack:/, ''),
+          text: startCase(id.replace(/^pack:/, '')),
+          first: pack[0],
+          emojis: this.filterByKeyword(pack)
+        })
+      })
       return [
-        {
-          id: 'custom',
-          text: this.$t('emoji.custom'),
-          icon: 'smile-beam',
-          emojis: customEmojis
-        },
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
+          first: {
+            imageUrl: '',
+            replacement: '🥴'
+          },
+          emojis: this.filterByKeyword(standardEmojis)
         }
-      ]
+      ].concat(emojiPacks)
+    },
+    sortedEmoji () {
+      const customEmojis = this.$store.state.instance.customEmoji || []
+      const sortedEmojiGroups = new Map()
+      customEmojis.forEach((emoji) => {
+        if (!sortedEmojiGroups.has(emoji.tags[0])) {
+          sortedEmojiGroups.set(emoji.tags[0], [emoji])
+        } else {
+          sortedEmojiGroups.get(emoji.tags[0]).push(emoji)
+        }
+      })
+      return new Map([...sortedEmojiGroups.entries()].sort())
     },
     emojisView () {
-      return this.emojis.filter(value => value.emojis.length > 0)
+      if (this.keyword === '') {
+        return this.emojis.filter(pack => {
+          return pack.id === this.activeGroup
+        })
+      } else {
+        return this.emojis.filter(pack => {
+          return pack.emojis.length > 0
+        })
+      }
     },
     stickerPickerEnabled () {
-      return (this.$store.state.instance.stickers || []).length !== 0
+      return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
     }
   }
 }

src/components/emoji_picker/emoji_picker.scss

@@ -26,7 +26,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
@@ -54,9 +54,8 @@
   }
 
   .heading {
-    display: flex;
-    height: 32px;
-    padding: 10px 7px 5px;
+    margin-top: 10px;
+    height: 4.8em;
   }
 
   .content {
@@ -84,20 +83,40 @@
 
   .additional-tabs,
   .emoji-tabs {
+    position: absolute;
     display: block;
-    min-width: 0;
-    flex-basis: auto;
-    flex-shrink: 1;
+    flex-wrap: nowrap;
+
+    overflow: auto;
+    width: 100%;
+
+    white-space: nowrap;
 
     &-item {
-      padding: 0 7px;
+      vertical-align: top;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: .4em;
       cursor: pointer;
-      font-size: 24px;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      span {
+        font-size: 1.9em;
+      }
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+
       &.active {
         border-bottom: 4px solid;
 
@@ -106,6 +125,9 @@
           color: var(--lightText, $fallback--lightText);
         }
       }
+      .fa-sticky-note {
+        font-size: 2em;
+      }
     }
   }
 
@@ -170,9 +192,10 @@
       justify-content: left;
 
       &-title {
-        font-size: 12px;
+        font-size: 0.85em;
         width: 100%;
         margin: 0;
+
         &.disabled {
           display: none;
         }

src/components/emoji_picker/emoji_picker.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="emoji-picker panel panel-default panel-body">
     <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        class="emoji-tabs"
+        @wheel="onWheel"
+        ref="emoji-tabs"
+      >
         <span
           v-for="group in emojis"
           :key="group.id"
@@ -13,18 +17,15 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <FAIcon
-            :icon="group.icon"
-            fixed-width
-          />
+          <span v-if="!group.first.imageUrl">{{ group.first.replacement }}</span>
+          <img
+            v-else
+            :src="group.first.imageUrl"
+          >
         </span>
-      </span>
-      <span
-        v-if="stickerPickerEnabled"
-        class="additional-tabs"
-      >
         <span
-          class="stickers-tab-icon additional-tabs-item"
+          v-if="stickerPickerEnabled"
+          class="stickers-tab-icon emoji-tabs-item"
           :class="{active: showingStickers}"
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
@@ -47,6 +48,7 @@
             type="text"
             class="form-control"
             :placeholder="$t('emoji.search_emoji')"
+            @input="$event.target.composing = false"
           >
         </div>
         <div