Don't show empty recent emojis section

src/components/emoticonsDropdown/index.ts

@@ -204,8 +204,7 @@ export class EmoticonsDropdown extends DropdownHover {
     }
   };
 
-  public static menuOnClick = (menu: HTMLElement, scroll: Scrollable, menuScroll?: ScrollableX) => {
-    let prevId = 0;
+  public static menuOnClick = (menu: HTMLElement, scroll: Scrollable, menuScroll?: ScrollableX, prevId = 0) => {
     let jumpedTo = -1;
 
     const setActive = (id: number) => {
@@ -271,7 +270,7 @@ export class EmoticonsDropdown extends DropdownHover {
       //console.log('set scrollTop:', offsetTop);
     });
 
-    return stickyIntersector;
+    return {stickyIntersector, setActive};
   };
 
   public static onMediaClick = (e: {target: EventTarget | Element}, clearDraft = false) => {

src/components/emoticonsDropdown/tabs/emoji.ts

@@ -108,6 +108,10 @@ export default class EmojiTab implements EmoticonsTab {
 
   private scroll: Scrollable;
   private stickyIntersector: StickyIntersector;
+  private menu: HTMLElement;
+
+  private closeScrollTop = 0;
+  private setMenuActive: (id: number) => boolean;
 
   init() {
     this.content = document.getElementById('content-emoji') as HTMLDivElement;
@@ -203,7 +207,7 @@ export default class EmojiTab implements EmoticonsTab {
 
     //console.timeEnd('emojiParse');
 
-    const menu = this.content.previousElementSibling as HTMLElement;
+    const menu = this.menu = this.content.previousElementSibling as HTMLElement;
     const emojiScroll = this.scroll = new Scrollable(this.content, 'EMOJI');
 
     //emojiScroll.setVirtualContainer(emojiScroll.container);
@@ -212,7 +216,16 @@ export default class EmojiTab implements EmoticonsTab {
 
     Promise.all([
       pause(200),
-      appEmojiManager.getRecentEmojis()
+      appEmojiManager.getRecentEmojis().then(recent => {
+        const hasRecent = !!recent.length;
+        const activeId = hasRecent ? 0 : 1;
+        this.menu.children[0].classList.toggle('hide', !hasRecent);
+        this.menu.children[activeId].classList.add('active');
+        const m = EmoticonsDropdown.menuOnClick(menu, emojiScroll, undefined, activeId);
+        this.stickyIntersector = m.stickyIntersector;
+        this.setMenuActive = m.setActive;
+        return recent;
+      })
     ]).then(([_, recent]) => {
       preloader.remove();
 
@@ -238,7 +251,6 @@ export default class EmojiTab implements EmoticonsTab {
     });
 
     this.content.addEventListener('click', this.onContentClick);
-    this.stickyIntersector = EmoticonsDropdown.menuOnClick(menu, emojiScroll);
     this.init = null;
 
     rootScope.addEventListener('emoji_recent', (emoji) => {
@@ -257,6 +269,15 @@ export default class EmojiTab implements EmoticonsTab {
 
       appendEmoji(emoji, this.recentItemsDiv, true);
       this.recentItemsDiv.parentElement.classList.remove('hide');
+      this.menu.children[0].classList.remove('hide');
+
+      if(!this.closeScrollTop) {
+        this.setMenuActive(0);
+      }
+    });
+
+    emoticonsDropdown.addEventListener('close', () => {
+      this.closeScrollTop = this.scroll.scrollTop;
     });
   }
 

src/components/emoticonsDropdown/tabs/stickers.ts

@@ -300,7 +300,7 @@ export default class StickersTab implements EmoticonsTab {
     this.scroll = new Scrollable(this.content, 'STICKERS');
     this.scroll.setVirtualContainer(this.stickersDiv);
 
-    this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll);
+    this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll).stickyIntersector;
 
     const preloader = putPreloader(this.content, true);
 

src/index.hbs

@@ -117,7 +117,7 @@
         <div class="tabs-container">
           <div class="tabs-tab emoji-padding">
             <nav class="menu-horizontal-div no-stripe">
-              <button class="menu-horizontal-div-item active btn-icon tgico-recent rp"></button>
+              <button class="menu-horizontal-div-item btn-icon tgico-recent rp"></button>
               <button class="menu-horizontal-div-item btn-icon tgico-smile rp"></button>
               <button class="menu-horizontal-div-item btn-icon tgico-animals rp"></button>
               <button class="menu-horizontal-div-item btn-icon tgico-eats rp"></button>