Fix load more emoji action

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)
     },

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)