fixed a lot of bugs with emoji picker, improved relevant components

src/components/emoji_picker/emoji_picker.vue

@@ -3,30 +3,44 @@
     <div class="panel-heading">
       <span class="emoji-tabs">
         <span
-          v-for="(value, key) in emojis"
-          :key="key"
+          v-for="group in emojis"
+          :key="group.id"
           class="emoji-tabs-item"
-          :class="{'active': activeGroup === key}"
-          :title="value.text"
-          @click.prevent="highlight(key)"
+          :class="{
+            active: activeGroupView === group.id,
+            disabled: group.emojis.length === 0
+          }"
+          :title="group.text"
+          @click.prevent="highlight(group.id)"
         >
-          <i :class="value.icon" />
+          <i :class="group.icon" />
         </span>
       </span>
-      <span class="additional-tabs">
-        <slot name="tabs" />
+      <span
+        v-if="stickerPicker"
+        class="additional-tabs"
+      >
+        <span
+          class="stickers-tab-icon additional-tabs-item"
+          :class="{active: showingStickers}"
+          :title="$t('emoji.stickers')"
+          @click.prevent="toggleStickers"
+        >
+          <i class="icon-star" />
+        </span>
       </span>
     </div>
-    <div class="panel-body emoji-dropdown-menu-content">
+    <div class="panel-body">
       <div
-        v-if="!showingAdditional"
         class="emoji-content"
+        :class="{hidden: showingStickers}"
       >
         <div class="emoji-search">
           <input
             v-model="keyword"
             type="text"
             class="form-control"
+            :placeholder="$t('emoji.search_emoji')"
           >
         </div>
         <div
@@ -35,22 +49,22 @@
           @scroll="scrolledGroup"
         >
           <div
-            v-for="(value, key) in emojis"
-            :key="key"
+            v-for="group in emojisView"
+            :key="group.id"
             class="emoji-group"
           >
             <h6
-              :ref="'group-' + key"
+              :ref="'group-' + group.id"
               class="emoji-group-title"
             >
-              {{ value.text }}
+              {{ group.text }}
             </h6>
             <span
-              v-for="emoji in value.emojis"
-              :key="key + emoji.displayText"
+              v-for="emoji in group.emojis"
+              :key="group.id + emoji.displayText"
               :title="emoji.displayText"
               class="emoji-item"
-              @click="onEmoji(emoji)"
+              @click.stop.prevent="onEmoji(emoji)"
             >
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
@@ -61,11 +75,17 @@
           </div>
         </div>
       </div>
-      <div v-if="showingAdditional" class="additional-tabs-content">
-        <slot name="tab-content" />
+      <div
+        v-if="showingStickers"
+        class="stickers-content"
+      >
+        <sticker-picker
+          @uploaded="onStickerUploaded"
+          @upload-failed="onStickerUploadFailed"
+        />
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script src="./emoji_picker.js"></script>