From 5cd18be47b53d62c3f5bc6587a04ae3e0479d23c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 28 Dec 2021 18:30:34 -0500
Subject: Enable anonymous users to interact with statuses remotely

---
 src/modules/instance.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'src/modules/instance.js')

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 220463ca..6a657533 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -3,6 +3,8 @@ 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 REMOTE_INTERACTION_URL = '/main/ostatus'
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -116,6 +118,18 @@ const instance = {
     },
     instanceDomain (state) {
       return new URL(state.server).hostname
+    },
+    remoteInteractionLink (state) {
+      const server = state.server.endsWith('/') ? state.server.slice(0, -1) : state.server
+      const link = server + REMOTE_INTERACTION_URL
+
+      return ({ statusId, nickname }) => {
+        if (statusId) {
+          return `${link}?status_id=${statusId}`
+        } else {
+          return `${link}?nickname=${nickname}`
+        }
+      }
     }
   },
   actions: {
-- 
cgit v1.2.3-70-g09d2


From fcf62a13ed49359b6bc2e82e8d05f55bfe914803 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 02:01:07 +0300
Subject: don't show to anons, make it possible to disable notification
 instance-wide

---
 src/components/update_notification/update_notification.js  | 4 +++-
 src/components/update_notification/update_notification.vue | 3 ++-
 src/modules/instance.js                                    | 1 +
 static/config.json                                         | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 172be889..83fbf922 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -30,7 +30,9 @@ const UpdateNotification = {
       }
     },
     shouldShow () {
-      return this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
+      return !this.$store.state.instance.disableUpdateNotification &&
+        this.$store.state.currentUser &&
+        this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
         !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
     }
   },
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 07e91ec9..8cae3de9 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -1,6 +1,7 @@
 <template>
   <Modal
-    :is-open="shouldShow"
+    v-if="shouldShow"
+    :is-open="!!shouldShow"
     class="UpdateNotification"
     :no-background="true"
   >
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 220463ca..bfce6f38 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -41,6 +41,7 @@ const defaultState = {
   logoMargin: '.2em',
   logoMask: true,
   logoLeft: false,
+  disableUpdateNotification: false,
   minimalScopesMode: false,
   nsfwCensorImage: undefined,
   postContentType: 'text/plain',
diff --git a/static/config.json b/static/config.json
index 53a4be82..fb39ff77 100644
--- a/static/config.json
+++ b/static/config.json
@@ -14,6 +14,7 @@
   "logoMask": true,
   "logoLeft": false,
   "minimalScopesMode": false,
+  "disableUpdateNotification": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",
   "redirectRootLogin": "/main/friends",
-- 
cgit v1.2.3-70-g09d2


From ff2242e85dc89aa7479000cf469ca2bce5d60157 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:23:45 -0400
Subject: 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(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 9e398176..7d5a3d8f 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 bfce6f38..23f534c3 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)
-- 
cgit v1.2.3-70-g09d2


From 123913f34ffd91917a9ed4dd1c9d406fb547ef87 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:43:35 -0400
Subject: 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(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 322bb8ba..67c6d0cc 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 277d5bf6..7b2b7fc8 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 23f534c3..8aadce77 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
     }
-- 
cgit v1.2.3-70-g09d2


From d648a6f8dc37a2ceb851f1cecde34fd6c54d7d1f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:30:55 -0400
Subject: 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(-)

(limited to 'src/modules/instance.js')

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 8aadce77..a7a91d99 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] = ({
-- 
cgit v1.2.3-70-g09d2


From 8f4f02683f89129cf6f28f2059122cff7db02242 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:55:00 -0500
Subject: 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 +--
 src/components/settings_modal/tabs/profile_tab.js  |  4 +--
 src/modules/instance.js                            | 38 ++++++++++++++++++----
 6 files changed, 48 insertions(+), 22 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index 0ddb4d68..1765f843 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 26c767ac..4990afb3 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 77f73d04..5c536b74 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -189,7 +189,7 @@ const PostStatusForm = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -198,13 +198,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 5e052e1e..e65bfd93 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -59,7 +59,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)
@@ -72,7 +72,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 376248ef..b86faef0 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 a7a91d99..2fcb059c 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)
-- 
cgit v1.2.3-70-g09d2


From 0445d7c882a5b1d213b0ff5e54e91d6225101c66 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 31 Aug 2022 16:03:15 -0400
Subject: Make unicode emoji phrases match with _

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

(limited to 'src/modules/instance.js')

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 2fcb059c..9df01bfd 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -190,7 +190,7 @@ const instance = {
           const values = await res.json()
           const emoji = Object.keys(values).reduce((res, groupId) => {
             res[groupId] = values[groupId].map(e => ({
-              displayText: e.name,
+              displayText: e.slug,
               imageUrl: false,
               replacement: e.emoji
             }))
-- 
cgit v1.2.3-70-g09d2


From 1c3bdda14c0edf4ce321745bcf43e395635d6bf1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 20:15:32 -0400
Subject: Load unicode emoji annotations

---
 src/i18n/languages.js   | 10 +++++++++-
 src/modules/config.js   |  1 +
 src/modules/instance.js | 24 ++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

(limited to 'src/modules/instance.js')

diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index b1cb1d7e..40cf04f2 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -38,7 +38,15 @@ const specialJsonName = {
 
 const langCodeToJsonName = (code) => specialJsonName[code] || code
 
+const langCodeToCldrName = (code) => code
+
+const ensureFinalFallback = codes => {
+  return codes.includes('en') ? codes : codes.concat(['en'])
+}
+
 module.exports = {
   languages,
-  langCodeToJsonName
+  langCodeToJsonName,
+  langCodeToCldrName,
+  ensureFinalFallback
 }
diff --git a/src/modules/config.js b/src/modules/config.js
index eeaac917..c966602e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -183,6 +183,7 @@ const config = {
           break
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
+          dispatch('loadUnicodeEmojiData', value)
           Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
           break
         case 'thirdColumnMode':
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 9df01bfd..c0c7cef0 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -2,6 +2,7 @@ import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
+import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
 
 const SORTED_EMOJI_GROUP_IDS = [
   'smileys-and-emotion',
@@ -78,6 +79,7 @@ const defaultState = {
   customEmojiFetched: false,
   emoji: {},
   emojiFetched: false,
+  unicodeEmojiAnnotations: {},
   pleromaBackend: true,
   postFormats: [],
   restrictedNicknames: [],
@@ -109,6 +111,12 @@ const defaultState = {
   }
 }
 
+const loadAnnotations = (lang) => {
+  return import(
+    `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
+  )
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -119,6 +127,9 @@ const instance = {
     },
     setKnownDomains (state, domains) {
       state.knownDomains = domains
+    },
+    setUnicodeEmojiAnnotations (state, { lang, annotations }) {
+      state.unicodeEmojiAnnotations[lang] = annotations
     }
   },
   getters: {
@@ -206,6 +217,19 @@ const instance = {
       }
     },
 
+    loadUnicodeEmojiData ({ commit, state }, language) {
+      const langList = ensureFinalFallback(Array.isArray(language) ? language : [language])
+
+      return Promise.all(
+        langList
+          .forEach(async lang => {
+            if (!state.unicodeEmojiAnnotations[lang]) {
+              const annotations = await loadAnnotations(lang)
+              commit('setUnicodeEmojiAnnotations', { lang, annotations })
+            }
+          }))
+    },
+
     async getCustomEmoji ({ commit, state }) {
       try {
         const res = await window.fetch('/api/pleroma/emoji.json')
-- 
cgit v1.2.3-70-g09d2


From a73f9731f5ad78d1e6f1bd211ad2971d21fc1379 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 20:44:52 -0400
Subject: Display localized unicode emoji names

---
 src/components/emoji_picker/emoji_picker.js  | 20 ++++++++++++++++++++
 src/components/emoji_picker/emoji_picker.vue |  2 +-
 src/i18n/languages.js                        |  3 ++-
 src/modules/instance.js                      | 18 +++++++++++++++---
 4 files changed, 38 insertions(+), 5 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index c2ae76f3..2ebead53 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import StillImage from '../still-image/still-image.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -285,6 +286,25 @@ const EmojiPicker = {
         this.waitForDomAndInitializeLazyLoad()
         this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       }, 500)
+    },
+    languages () {
+      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+    },
+    maybeLocalizedEmojiName () {
+      return emoji => {
+        if (!emoji.annotations) {
+          return emoji.displayText
+        }
+
+        for (const lang of this.languages) {
+          if (emoji.annotations[lang]?.name) {
+            return emoji.annotations[lang].name
+          }
+        }
+
+        return emoji.displayText
+      }
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 689138e6..57bb0037 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -88,7 +88,7 @@
             <span
               v-for="emoji in group.emojis"
               :key="group.id + emoji.displayText"
-              :title="emoji.displayText"
+              :title="maybeLocalizedEmojiName(emoji)"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 40cf04f2..250b3b1a 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -41,7 +41,8 @@ const langCodeToJsonName = (code) => specialJsonName[code] || code
 const langCodeToCldrName = (code) => code
 
 const ensureFinalFallback = codes => {
-  return codes.includes('en') ? codes : codes.concat(['en'])
+  const codeList = Array.isArray(codes) ? codes : [codes]
+  return codeList.includes('en') ? codeList : codeList.concat(['en'])
 }
 
 module.exports = {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c0c7cef0..5a72a6d3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -117,6 +117,18 @@ const loadAnnotations = (lang) => {
   )
 }
 
+const injectAnnotations = (emoji, annotations) => {
+  const availableLangs = Object.keys(annotations)
+
+  return {
+    ...emoji,
+    annotations: availableLangs.reduce((acc, cur) => {
+      acc[cur] = annotations[cur][emoji.replacement]
+      return acc
+    }, {})
+  }
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -164,13 +176,13 @@ const instance = {
     },
     standardEmojiList (state) {
       return SORTED_EMOJI_GROUP_IDS
-        .map(groupId => state.emoji[groupId] || [])
+        .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
         .reduce((a, b) => a.concat(b), [])
     },
     standardEmojiGroupList (state) {
       return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
         id: groupId,
-        emojis: state.emoji[groupId] || []
+        emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
       }))
     },
     instanceDomain (state) {
@@ -218,7 +230,7 @@ const instance = {
     },
 
     loadUnicodeEmojiData ({ commit, state }, language) {
-      const langList = ensureFinalFallback(Array.isArray(language) ? language : [language])
+      const langList = ensureFinalFallback(language)
 
       return Promise.all(
         langList
-- 
cgit v1.2.3-70-g09d2


From cc58b9b93d4346860e244d2093f0d406eb76954c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 21:50:40 -0400
Subject: Add regional indicators

---
 src/components/emoji_picker/emoji_picker.js | 15 +++++++++------
 src/i18n/en.json                            |  3 ++-
 src/modules/instance.js                     | 29 +++++++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 9 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bf5e0e43..fafc2af1 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -47,8 +47,8 @@ const UNICODE_EMOJI_GROUP_ICON = {
   flags: 'flag'
 }
 
-const maybeLocalizedKeywords = (emoji, languages) => {
-  const res = [emoji.displayText]
+const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
+  const res = [emoji.displayText, nameLocalizer(emoji)]
   if (emoji.annotations) {
     languages.forEach(lang => {
       const keywords = emoji.annotations[lang]?.keywords || []
@@ -59,13 +59,13 @@ const maybeLocalizedKeywords = (emoji, languages) => {
   return res
 }
 
-const filterByKeyword = (list, keyword = '', languages) => {
+const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
   const orderedEmojiList = []
   for (const emoji of list) {
-    const indices = maybeLocalizedKeywords(emoji, languages)
+    const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
       .map(k => k.toLowerCase().indexOf(keywordLowercase))
       .filter(k => k > -1)
 
@@ -189,7 +189,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     filterByKeyword (list, keyword) {
-      return filterByKeyword(list, keyword, this.languages)
+      return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
@@ -305,7 +305,6 @@ const EmojiPicker = {
       }, 500)
     },
     languages () {
-      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
       return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
     },
     maybeLocalizedEmojiName () {
@@ -314,6 +313,10 @@ const EmojiPicker = {
           return emoji.displayText
         }
 
+        if (emoji.displayTextI18n) {
+          return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+        }
+
         for (const lang of this.languages) {
           if (emoji.annotations[lang]?.name) {
             return emoji.annotations[lang].name
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2a665bd5..fb941c8d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -211,7 +211,8 @@
       "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"
+    "load_all": "Loading all {emojiAmount} emoji",
+    "regional_indicator": "Regional indicator {letter}"
   },
   "errors": {
     "storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 5a72a6d3..9be35d88 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -16,6 +16,26 @@ const SORTED_EMOJI_GROUP_IDS = [
   'flags'
 ]
 
+const REGIONAL_INDICATORS = (() => {
+  const start = 0x1F1E6
+  const end = 0x1F1FF
+  const A = 'A'.codePointAt(0)
+  const res = new Array(end - start + 1)
+  for (let i = start; i <= end; ++i) {
+    const letter = String.fromCodePoint(A + i - start)
+    res[i - start] = {
+      replacement: String.fromCodePoint(i),
+      imageUrl: false,
+      displayText: 'regional_indicator_' + letter,
+      displayTextI18n: {
+        key: 'emoji.regional_indicator',
+        args: { letter }
+      }
+    }
+  }
+  return res
+})()
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -129,6 +149,11 @@ const injectAnnotations = (emoji, annotations) => {
   }
 }
 
+const injectRegionalIndicators = groups => {
+  groups.symbols.push(...REGIONAL_INDICATORS)
+  return groups
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -219,7 +244,7 @@ const instance = {
             }))
             return res
           }, {})
-          commit('setInstanceOption', { name: 'emoji', value: emoji })
+          commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
         } else {
           throw (res)
         }
@@ -234,7 +259,7 @@ const instance = {
 
       return Promise.all(
         langList
-          .forEach(async lang => {
+          .map(async lang => {
             if (!state.unicodeEmojiAnnotations[lang]) {
               const annotations = await loadAnnotations(lang)
               commit('setUnicodeEmojiAnnotations', { lang, annotations })
-- 
cgit v1.2.3-70-g09d2


From 6fab7b9e3ffb4a9bce2788174ef0e9e6eef7b2c5 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 22:03:31 -0400
Subject: Use import() for emoji.json

---
 build/update-emoji.js   |  2 +-
 package.json            |  1 -
 src/modules/instance.js | 27 ++++++++++++---------------
 yarn.lock               |  5 -----
 4 files changed, 13 insertions(+), 22 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/build/update-emoji.js b/build/update-emoji.js
index fba7706e..9f4b4e67 100644
--- a/build/update-emoji.js
+++ b/build/update-emoji.js
@@ -1,7 +1,7 @@
 
 module.exports = {
   updateEmoji () {
-    const emojis = require('unicode-emoji-json/data-by-group')
+    const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group')
     const fs = require('fs')
 
     Object.keys(emojis)
diff --git a/package.json b/package.json
index b0c06a61..260df573 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,6 @@
     "stylelint": "13.13.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "unicode-emoji-json": "^0.3.0",
     "vue-loader": "17.0.0",
     "vue-style-loader": "4.1.3",
     "webpack": "5.74.0",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 9be35d88..9f326d26 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -135,6 +135,7 @@ const loadAnnotations = (lang) => {
   return import(
     `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
   )
+    .then(k => k.default)
 }
 
 const injectAnnotations = (emoji, annotations) => {
@@ -233,21 +234,17 @@ const instance = {
     },
     async getStaticEmoji ({ commit }) {
       try {
-        const res = await window.fetch('/static/emoji.json')
-        if (res.ok) {
-          const values = await res.json()
-          const emoji = Object.keys(values).reduce((res, groupId) => {
-            res[groupId] = values[groupId].map(e => ({
-              displayText: e.slug,
-              imageUrl: false,
-              replacement: e.emoji
-            }))
-            return res
-          }, {})
-          commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
-        } else {
-          throw (res)
-        }
+        const values = (await import('../../static/emoji.json')).default
+
+        const emoji = Object.keys(values).reduce((res, groupId) => {
+          res[groupId] = values[groupId].map(e => ({
+            displayText: e.slug,
+            imageUrl: false,
+            replacement: e.emoji
+          }))
+          return res
+        }, {})
+        commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
       } catch (e) {
         console.warn("Can't load static emoji")
         console.warn(e)
diff --git a/yarn.lock b/yarn.lock
index f1cfc7f3..a22ab65d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8138,11 +8138,6 @@ 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"
-- 
cgit v1.2.3-70-g09d2


From a758e18dceb4cb11d84d6dff1cdfddb755af60db Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 23:13:07 -0400
Subject: Make chunks named

---
 .babelrc                   | 2 +-
 build/webpack.base.conf.js | 3 ++-
 src/i18n/messages.js       | 1 +
 src/modules/instance.js    | 3 ++-
 4 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/.babelrc b/.babelrc
index 373d2c59..4ec10416 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
   "presets": ["@babel/preset-env"],
   "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
-  "comments": false
+  "comments": true
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 78b75e3f..bf946922 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -24,7 +24,8 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
-    filename: '[name].js'
+    filename: '[name].js',
+    chunkFilename: '[name].js'
   },
   optimization: {
     splitChunks: {
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 8cf25973..74a89ca8 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -14,6 +14,7 @@ const hasLanguageFile = (code) => languages.includes(code)
 const loadLanguageFile = (code) => {
   return import(
     /* webpackInclude: /\.json$/ */
+    /* webpackChunkName: "i18n/[request]" */
     `./${langCodeToJsonName(code)}.json`
   )
 }
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 9f326d26..b1bc9779 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -133,6 +133,7 @@ const defaultState = {
 
 const loadAnnotations = (lang) => {
   return import(
+    /* webpackChunkName: "emoji-annotations/[request]" */
     `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
   )
     .then(k => k.default)
@@ -234,7 +235,7 @@ const instance = {
     },
     async getStaticEmoji ({ commit }) {
       try {
-        const values = (await import('../../static/emoji.json')).default
+        const values = (await import(/* webpackChunkName: 'emoji' */ '../../static/emoji.json')).default
 
         const emoji = Object.keys(values).reduce((res, groupId) => {
           res[groupId] = values[groupId].map(e => ({
-- 
cgit v1.2.3-70-g09d2


From 876e51603a03dab45b5572bb014f2135bd4ad3e1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 31 Dec 2022 12:29:33 -0500
Subject: Include unpacked emojis in emoji picker

---
 src/components/emoji_picker/emoji_picker.js |  6 ++++-
 src/i18n/en.json                            |  1 +
 src/modules/instance.js                     | 36 +++++++++++++++++++++++++----
 3 files changed, 37 insertions(+), 6 deletions(-)

(limited to 'src/modules/instance.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index dd5e5217..2838e102 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -287,7 +287,11 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      return this.$store.getters.groupedCustomEmojis
+      const emojis = this.$store.getters.groupedCustomEmojis
+      if (emojis.unpacked) {
+        emojis.unpacked.text = this.$t('emoji.unpacked')
+      }
+      return emojis
     },
     defaultGroup () {
       return Object.keys(this.allCustomGroups)[0]
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 59ee1c17..b91f0b10 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -225,6 +225,7 @@
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
+    "unpacked": "Unpacked emoji",
     "unicode": "Unicode emoji",
     "unicode_groups": {
       "activities": "Activities",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 3b15e62e..8e8d13d3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -181,15 +181,28 @@ const instance = {
     },
     groupedCustomEmojis (state) {
       const packsOf = emoji => {
-        return emoji.tags
+        const packs = emoji.tags
           .filter(k => k.startsWith('pack:'))
-          .map(k => k.slice(5)) // remove 'pack:' prefix
+          .map(k => {
+            const packName = k.slice(5) // remove 'pack:' prefix
+            return {
+              id: `custom-${packName}`,
+              text: packName
+            }
+          })
+
+        if (!packs.length) {
+          return [{
+            id: 'unpacked'
+          }]
+        } else {
+          return packs
+        }
       }
 
       return state.customEmoji
         .reduce((res, emoji) => {
-          packsOf(emoji).forEach(packName => {
-            const packId = `custom-${packName}`
+          packsOf(emoji).forEach(({ id: packId, text: packName }) => {
             if (!res[packId]) {
               res[packId] = ({
                 id: packId,
@@ -290,9 +303,22 @@ const instance = {
             const lb = b.toLowerCase()
             return la > lb ? 1 : (la < lb ? -1 : 0)
           }
+          const noPackLast = (a, b) => {
+            const aNull = a === ''
+            const bNull = b === ''
+            if (aNull === bNull) {
+              return 0
+            } else if (aNull && !bNull) {
+              return 1
+            } else {
+              return -1
+            }
+          }
           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 packOfA = packOf(a)
+            const packOfB = packOf(b)
+            return noPackLast(packOfA, packOfB) || caseInsensitiveStrCmp(packOfA, packOfB) || caseInsensitiveStrCmp(a.displayText, b.displayText)
           }
 
           const emoji = Object.entries(values).map(([key, value]) => {
-- 
cgit v1.2.3-70-g09d2