Show custom emoji first in suggestions

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -203,18 +203,20 @@ function EmojiBoard({ onSelect, searchRef }) {
         return;
       }
 
-      const packs = getRelevantPacks(
-        initMatrix.matrixClient.getRoom(selectedRoomId),
-      )
-        .filter((pack) => pack.usage.indexOf('emoticon') !== -1)
-        .filter((pack) => pack.getEmojis().length !== 0);
+      const room = initMatrix.matrixClient.getRoom(selectedRoomId);
+      if (room) {
+        const packs = getRelevantPacks(room.client, [room])
+          .filter((pack) => pack.usage.includes('emoticon'))
+          .filter((pack) => pack.getEmojis().length !== 0);
 
-      // Set an index for each pack so that we know where to jump when the user uses the nav
-      for (let i = 0; i < packs.length; i += 1) {
-        packs[i].packIndex = i;
+        // Set an index for each pack so that we know where to jump when the user uses the nav
+        for (let i = 0; i < packs.length; i += 1) {
+          packs[i].packIndex = i;
+        }
+
+        console.log(packs)
+        setAvailableEmojis(packs);
       }
-
-      setAvailableEmojis(packs);
     };
 
     const onOpen = () => {
@@ -291,7 +293,8 @@ function EmojiBoard({ onSelect, searchRef }) {
           <div className="emoji-board__nav-custom">
             {
               availableEmojis.map((pack) => {
-                const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
+                const src = initMatrix.matrixClient
+                  .mxcUrlToHttp(pack.avatar ?? pack.getEmojis()[0].mxc);
                 return (
                   <IconButton
                     onClick={() => openGroup(recentOffset + pack.packIndex)}

src/app/organisms/emoji-board/custom-emoji.js

@@ -3,50 +3,58 @@ import { emojis } from './emoji';
 // https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
 
 class ImagePack {
-  static parsePack(rawPack, room) {
-    if (typeof rawPack.images === 'undefined') {
+  static parsePack(packContent, room) {
+    if (packContent.images === undefined) {
       return null;
     }
 
-    const pack = rawPack.pack ?? {};
+    const pack = packContent.pack ?? {};
 
-    const displayName = pack.display_name ?? (room ? room.name : undefined);
-    const avatar = pack.avatar_url ?? (room ? room.getMxcAvatarUrl() : undefined);
-    const usage = pack.usage ?? ['emoticon', 'sticker'];
+    const displayName = pack.display_name ?? room?.name ?? undefined;
+    const avatar = pack.avatar_url ?? room?.getMxcAvatarUrl() ?? undefined;
+    const packUsage = pack.usage ?? ['emoticon', 'sticker'];
     const { attribution } = pack;
-    const images = Object.entries(rawPack.images).flatMap((e) => {
-      const data = e[1];
-      const shortcode = e[0];
+    const emoticons = [];
+    const stickers = [];
+
+    Object.entries(packContent.images).forEach(([shortcode, data]) => {
       const mxc = data.url;
       const body = data.body ?? shortcode;
+      const usage = data.usage ?? packUsage;
       const { info } = data;
-      const usage_ = data.usage ?? usage;
 
-      if (mxc) {
-        return [{
-          shortcode, mxc, body, info, usage: usage_,
-        }];
+      if (!mxc) return;
+      const image = {
+        shortcode, mxc, body, usage, info,
+      };
+
+      if (usage.includes('emoticon')) {
+        emoticons.push(image);
+      }
+      if (usage.includes('sticker')) {
+        stickers.push(image);
       }
-      return [];
     });
 
-    return new ImagePack(displayName, avatar, usage, attribution, images);
+    return new ImagePack(displayName, avatar, packUsage, attribution, emoticons, stickers);
   }
 
-  constructor(displayName, avatar, usage, attribution, images) {
+  constructor(displayName, avatar, usage, attribution, emoticons, stickers) {
     this.displayName = displayName;
     this.avatar = avatar;
     this.usage = usage;
     this.attribution = attribution;
-    this.images = images;
+
+    this.emoticons = emoticons;
+    this.stickers = stickers;
   }
 
   getEmojis() {
-    return this.images.filter((i) => i.usage.indexOf('emoticon') !== -1);
+    return this.emoticons;
   }
 
   getStickers() {
-    return this.images.filter((i) => i.usage.indexOf('sticker') !== -1);
+    return this.stickers;
   }
 }
 
@@ -57,11 +65,11 @@ function getUserImagePack(mx) {
   }
 
   const userImagePack = ImagePack.parsePack(accountDataEmoji.event.content);
-  if (userImagePack) userImagePack.displayName ??= 'Your Emoji';
+  if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
   return userImagePack;
 }
 
-function getPacksInRoom(room) {
+function getRoomImagePacks(room) {
   const packs = room.currentState.getStateEvents('im.ponies.room_emotes');
 
   return packs
@@ -69,18 +77,23 @@ function getPacksInRoom(room) {
     .filter((p) => p !== null);
 }
 
-function getRelevantPacks(room) {
-  return [].concat(
-    getUserImagePack(room.client) ?? [],
-    getPacksInRoom(room),
-  );
+/**
+ * @param {MatrixClient} mx Provide if you want to include user personal pack
+ * @param {Room[]} rooms Provide rooms if you want to include rooms pack
+ * @returns {ImagePack[]} packs
+ */
+function getRelevantPacks(mx, rooms) {
+  const userPack = mx ? getUserImagePack(mx) : [];
+  const roomsPack = rooms?.flatMap(getRoomImagePacks) ?? [];
+
+  return [].concat(userPack, roomsPack);
 }
 
 function getShortcodeToEmoji(room) {
   const allEmoji = new Map();
 
   emojis.forEach((emoji) => {
-    if (emoji.shortcodes.constructor.name === 'Array') {
+    if (Array.isArray(emoji.shortcodes)) {
       emoji.shortcodes.forEach((shortcode) => {
         allEmoji.set(shortcode, emoji);
       });
@@ -89,7 +102,7 @@ function getShortcodeToEmoji(room) {
     }
   });
 
-  getRelevantPacks(room).reverse()
+  getRelevantPacks(room.client, [room])
     .flatMap((pack) => pack.getEmojis())
     .forEach((emoji) => {
       allEmoji.set(emoji.shortcode, emoji);
@@ -101,7 +114,7 @@ function getShortcodeToEmoji(room) {
 function getShortcodeToCustomEmoji(room) {
   const allEmoji = new Map();
 
-  getRelevantPacks(room).reverse()
+  getRelevantPacks(room.client, [room])
     .flatMap((pack) => pack.getEmojis())
     .forEach((emoji) => {
       allEmoji.set(emoji.shortcode, emoji);
@@ -112,18 +125,16 @@ function getShortcodeToCustomEmoji(room) {
 
 function getEmojiForCompletion(room) {
   const allEmoji = new Map();
-  getRelevantPacks(room).reverse()
+  getRelevantPacks(room.client, [room])
     .flatMap((pack) => pack.getEmojis())
     .forEach((emoji) => {
       allEmoji.set(emoji.shortcode, emoji);
     });
 
-  return emojis.filter((e) => !allEmoji.has(e.shortcode))
-    .concat(Array.from(allEmoji.values()));
+  return Array.from(allEmoji.values()).concat(emojis.filter((e) => !allEmoji.has(e.shortcode)));
 }
 
 export {
-  getUserImagePack,
   getShortcodeToEmoji, getShortcodeToCustomEmoji,
   getRelevantPacks, getEmojiForCompletion,
 };

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -21,7 +21,7 @@ import AsyncSearch from '../../../util/AsyncSearch';
 import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import FollowingMembers from '../../molecules/following-members/FollowingMembers';
-import { addRecentEmoji } from '../emoji-board/recent';
+import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
 
 const commands = [{
   name: 'markdown',
@@ -214,8 +214,12 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
       },
       ':': () => {
         const emojis = getEmojiForCompletion(mx.getRoom(roomId));
+        const recentEmoji = getRecentEmojis(20);
         asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
-        setCmd({ prefix, suggestions: emojis.slice(26, 46) });
+        setCmd({
+          prefix,
+          suggestions: recentEmoji.length > 0 ? recentEmoji : emojis.slice(26, 46),
+        });
       },
       '@': () => {
         const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({