Emoji Pack Picker (#102)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/102
Co-authored-by: Mergan <mergan@noreply.akkoma>
Co-committed-by: Mergan <mergan@noreply.akkoma>

src/components/emoji_picker/emoji_picker.js

@@ -6,7 +6,7 @@ import {
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
-import { trim } from 'lodash'
+import { trim, escapeRegExp, startCase } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -21,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: {
@@ -49,7 +32,7 @@ const EmojiPicker = {
   data () {
     return {
       keyword: '',
-      activeGroup: 'custom',
+      activeGroup: 'standard',
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
@@ -80,13 +63,8 @@ const EmojiPicker = {
       this.triggerLoadMore(target)
     },
     highlight (key) {
-      const ref = this.$refs['group-' + key]
-      const top = ref.offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = top + 1
-      })
     },
     updateScrolledClass (target) {
       if (target.scrollTop <= 5) {
@@ -155,6 +133,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)
+      })
     }
   },
   watch: {
@@ -175,9 +160,8 @@ const EmojiPicker = {
       return 0
     },
     filteredEmoji () {
-      return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
-        trim(this.keyword)
+      return this.filterByKeyword(
+        this.$store.state.instance.customEmoji || []
       )
     },
     customEmojiBuffer () {
@@ -185,25 +169,50 @@ 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, trim(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