Filter out some emojis which don't have native support yet

css/converse.css

@@ -1786,6 +1786,9 @@
             font-size: 14px;
             padding: 5px;
             z-index: 98; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a {
+              font-size: 20px; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
             background-color: #DCF9F6; }

css/inverse.css

@@ -1832,6 +1832,9 @@ body {
             font-size: 16px;
             padding: 5px;
             z-index: 98; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a {
+              font-size: 26px; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
             background-color: #DCF9F6; }

sass/_chatbox.scss

@@ -355,6 +355,11 @@
                             font-size: $font-size;
                             padding: 5px;
                             z-index: 98;
+                            &.emoji {
+                                a {
+                                    font-size: $font-size-huge;
+                                }
+                            }
                         }
                         li:hover {
                             background-color: $highlight-color;

sass/converse/_variables.scss

@@ -94,6 +94,7 @@ $font-size-tiny: 10px !default;
 $font-size-small: 12px !default;
 $font-size: 14px !default;
 $font-size-large: 16px !default;
+$font-size-huge: 20px !default;
 $legend-font-size: 16px !default;
 
 $toolbar-height: 25px !default;

src/templates/emojis.html

@@ -0,0 +1,16 @@
+<ul class="emoji-category-picker">
+    {[ _.forEach(emojis_by_category, function (obj, category) { ]}
+        <li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
+            <a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
+        </li>
+    {[ }); ]}
+</ul>
+{[ _.forEach(emojis_by_category, function (obj, category) { ]}
+    <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
+        {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
+            <li class="emoji" data-emoticon="{{{emoji._shortname}}}">
+                <a href="#" data-emoticon="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }}  </a>
+        </li>
+        {[ }); ]}
+    </ul>
+{[ }); ]}

src/utils.js

@@ -517,14 +517,15 @@
                 return value
             }));
             var tones = [':tone1:', ':tone2:', ':tone3:', ':tone4:', ':tone5:'];
+            var excluded = [':kiss_ww:', ':kiss_mm:', ':kiss_woman_man:'];
+            var excluded_substrings = [':woman', ':man', ':women_', ':men_', '_man_', '_woman_', '_woman:', '_man:'];
             var categories = _.uniq(_.map(emojis, _.partial(_.get, _, 'category')));
             var emojis_by_category = {};
             _.forEach(categories, function (cat) {
                 var list = _.sortBy(_.filter(emojis, ['category', cat]), ['uc_base']);
                 list = _.filter(list, function (item) {
-                    return !_.includes(tones, item._shortname) &&
-                        !item._shortname.startsWith(':woman_') &&
-                            !item._shortname.startsWith(':man_');
+                    return !_.includes(_.concat(tones, excluded), item._shortname) &&
+                        !_.some(excluded_substrings, _.partial(_.includes, item._shortname));
                 });
                 if (cat === 'people') {
                     var idx = _.findIndex(list, ['uc_base', '1f600']);