typeahead: Sort emojis by categories initially.

For more consistency between the emoji picker and the typeahead, now the
initial emoji list is ordered by categories for the typeahead too.

Tachnically, this means that `emoji_picker.rebuild_catalog` now updates
the typeahead's emoji data with category wise sorted emojis. Compose box
typeahead initialisation does not update the emoji data anymore.

web/src/composebox_typeahead.js

@@ -65,9 +65,9 @@ export function get_or_set_completing_for_tests(val) {
     return completing;
 }
 
-export function update_emoji_data() {
+export function update_emoji_data(initial_emojis) {
     emoji_collection = [];
-    for (const emoji_dict of emoji.emojis_by_name.values()) {
+    for (const emoji_dict of initial_emojis) {
         const {reaction_type} = emoji.get_emoji_details_by_name(emoji_dict.name);
         if (emoji_dict.is_realm_emoji === true) {
             emoji_collection.push({
@@ -1184,8 +1184,6 @@ export function initialize_compose_typeahead(selector) {
 }
 
 export function initialize({on_enter_send}) {
-    update_emoji_data();
-
     // These handlers are at the "form" level so that they are called after typeahead
     $("form#send_message_form").on("keydown", (e) => handle_keydown(e, {on_enter_send}));
     $("form#send_message_form").on("keyup", handle_keyup);

web/src/emoji_picker.js

@@ -9,6 +9,7 @@ import render_emoji_showcase from "../templates/popovers/emoji/emoji_showcase.hb
 
 import * as blueslip from "./blueslip";
 import * as compose_ui from "./compose_ui";
+import * as composebox_typeahead from "./composebox_typeahead";
 import * as emoji from "./emoji";
 import * as keydown_util from "./keydown_util";
 import * as message_store from "./message_store";
@@ -157,6 +158,14 @@ export function rebuild_catalog() {
         icon: category.icon,
         emojis: catalog.get(category.name),
     }));
+    const emojis_by_category = complete_emoji_catalog.flatMap((category) => {
+        if (category.name === "Popular") {
+            // popular category has repeated emojis in the catalog so we skip it
+            return [];
+        }
+        return category.emojis;
+    });
+    composebox_typeahead.update_emoji_data(emojis_by_category);
 }
 
 const generate_emoji_picker_content = function (id) {

web/src/server_events_dispatch.js

@@ -15,7 +15,6 @@ import * as compose_call_ui from "./compose_call_ui";
 import * as compose_pm_pill from "./compose_pm_pill";
 import * as compose_recipient from "./compose_recipient";
 import * as compose_state from "./compose_state";
-import * as composebox_typeahead from "./composebox_typeahead";
 import * as dark_theme from "./dark_theme";
 import * as emoji from "./emoji";
 import * as emoji_picker from "./emoji_picker";
@@ -391,7 +390,6 @@ export function dispatch_normal_event(event) {
             // And then let other widgets know.
             settings_emoji.populate_emoji();
             emoji_picker.rebuild_catalog();
-            composebox_typeahead.update_emoji_data();
             break;
 
         case "realm_export":

web/tests/composebox_typeahead.test.js

@@ -41,6 +41,7 @@ const typeahead = zrequire("../shared/src/typeahead");
 const stream_topic_history = zrequire("stream_topic_history");
 const compose_state = zrequire("compose_state");
 const emoji = zrequire("emoji");
+const emoji_picker = zrequire("emoji_picker");
 const typeahead_helper = zrequire("typeahead_helper");
 const muted_users = zrequire("muted_users");
 const people = zrequire("people");
@@ -185,12 +186,6 @@ const emojis_by_name = new Map(
         headphones: emoji_headphones,
     }),
 );
-const emoji_list = [...emojis_by_name.values()].map((emoji_dict) => ({
-    emoji_name: emoji_dict.name,
-    emoji_code: emoji_dict.emoji_code,
-    reaction_type: "unicode_emoji",
-    is_realm_emoji: false,
-}));
 
 const me_slash = {
     name: "me",
@@ -259,12 +254,17 @@ for (const [key, val] of emojis_by_name.entries()) {
     name_to_codepoint[key] = val.emoji_code;
 }
 
+const codepoint_to_name = {};
+for (const [key, val] of emojis_by_name.entries()) {
+    codepoint_to_name[val.emoji_code] = key;
+}
+
 const emoji_codes = {
     name_to_codepoint,
     names: [...emojis_by_name.keys()],
     emoji_catalog: {},
     emoticon_conversions: {},
-    codepoint_to_name: {},
+    codepoint_to_name,
 };
 
 emoji.initialize({
@@ -276,6 +276,8 @@ emoji.emojis_by_name.clear();
 for (const [key, val] of emojis_by_name.entries()) {
     emoji.emojis_by_name.set(key, val);
 }
+emoji_picker.rebuild_catalog();
+const emoji_list = composebox_typeahead.emoji_collection;
 
 const ali = {
     email: "ali@zulip.com",
@@ -1696,14 +1698,14 @@ test("typeahead_results", () => {
     }
     assert_emoji_matches("da", [
         {
-            emoji_name: "tada",
-            emoji_code: "1f389",
+            emoji_name: "panda_face",
+            emoji_code: "1f43c",
             reaction_type: "unicode_emoji",
             is_realm_emoji: false,
         },
         {
-            emoji_name: "panda_face",
-            emoji_code: "1f43c",
+            emoji_name: "tada",
+            emoji_code: "1f389",
             reaction_type: "unicode_emoji",
             is_realm_emoji: false,
         },

web/tests/dispatch.test.js

@@ -29,7 +29,6 @@ const attachments_ui = mock_esm("../src/attachments_ui");
 const audible_notifications = mock_esm("../src/audible_notifications");
 const bot_data = mock_esm("../src/bot_data");
 const compose_pm_pill = mock_esm("../src/compose_pm_pill");
-const composebox_typeahead = mock_esm("../src/composebox_typeahead");
 const dark_theme = mock_esm("../src/dark_theme");
 const emoji_picker = mock_esm("../src/emoji_picker");
 const gear_menu = mock_esm("../src/gear_menu");
@@ -661,7 +660,6 @@ run_test("realm_emoji", ({override}) => {
     const ui_func_names = [
         [settings_emoji, "populate_emoji"],
         [emoji_picker, "rebuild_catalog"],
-        [composebox_typeahead, "update_emoji_data"],
     ];
 
     const ui_stubs = [];