Contacs with filter & forward (no search and load more) & QR log in & minor improvements

package-lock.json

@@ -11779,6 +11779,21 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "qr-code-styling": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.0.1.tgz",
+      "integrity": "sha512-+pxRN6qMU7CJ9tJHKGfAGZS/KmNjpJFnc5I6lI/cW5/bEC9/bsGO5ADip8ob7/xeSoppH+P73ylA7Kn/07tclA==",
+      "dev": true,
+      "requires": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==",
+      "dev": true
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "npm": "^6.14.4",
     "on-build-webpack": "^0.1.0",
     "pako": "^1.0.11",
+    "qr-code-styling": "^1.0.1",
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^8.0.2",
     "streamsaver": "^2.0.4",

src/components/appForward.ts

@@ -0,0 +1,230 @@
+import appSidebarRight from "../lib/appManagers/appSidebarRight";
+import Scrollable from "./scrollable_new";
+import appProfileManager from "../lib/appManagers/appProfileManager";
+import { appPeersManager } from "../lib/services";
+import appMessagesManager from "../lib/appManagers/appMessagesManager";
+import appDialogsManager from "../lib/appManagers/appDialogsManager";
+import appChatsManager from "../lib/appManagers/appChatsManager";
+import appUsersManager from "../lib/appManagers/appUsersManager";
+import { $rootScope, findUpTag, findUpClassName, cancelEvent } from "../lib/utils";
+import { putPreloader } from "./misc";
+
+class AppSelectPeers {
+  public container = document.createElement('div');
+  private chatList = document.createElement('ul');
+  private chatsContainer = document.createElement('div');
+  private scrollable: Scrollable;
+  private selectedScrollable: Scrollable;
+  
+  private selectedContainer = document.createElement('div');
+  private searchInput = document.createElement('input');
+  
+  private selected: {[peerID: number]: HTMLDivElement} = {};
+
+  public freezed = false;
+  
+  constructor(private appendTo: HTMLDivElement, private onChange: (length: number) => void) {
+    this.container.classList.add('selector');
+
+    let topContainer = document.createElement('div');
+    topContainer.classList.add('selector-search-container');
+
+    this.selectedContainer.classList.add('selector-search');
+    this.searchInput.placeholder = 'Select chat';
+    this.searchInput.type = 'text';
+    this.selectedContainer.append(this.searchInput);
+    topContainer.append(this.selectedContainer);
+    this.selectedScrollable = new Scrollable(topContainer);
+
+    let delimiter = document.createElement('hr');
+
+    this.chatsContainer.classList.add('chats-container');
+    this.chatsContainer.append(this.chatList);
+    this.scrollable = new Scrollable(this.chatsContainer);
+
+    // в десктопе - сначала без группы, потом архивные, потом контакты без сообщений
+    let offsetIndex = 0;
+    appMessagesManager.getConversations(offsetIndex, 50, 0).then(value => {
+      let dialogs = value.dialogs;
+      let myID = $rootScope.myID;
+
+      offsetIndex = dialogs[value.dialogs.length - 1].index || 0;
+
+      if(dialogs[0].peerID != myID) {
+        dialogs.findAndSplice(d => d.peerID == myID);
+        dialogs.unshift({
+          peerID: myID,
+          pFlags: {}
+        } as any);
+      }
+
+      dialogs.forEach(dialog => {
+        let peerID = dialog.peerID;
+
+        let {dom} = appDialogsManager.addDialog(dialog, this.chatList, false, false);
+        dom.containerEl.insertAdjacentHTML('afterbegin', '<div class="checkbox"><label><input type="checkbox"><span></span></label></div>');
+
+        let subtitle = '';
+        if(peerID < 0) {
+          subtitle = appChatsManager.getChatMembersString(-peerID);
+        } else if(peerID == myID) {
+          subtitle = 'chat with yourself';
+        } else {
+          subtitle = appUsersManager.getUserStatusString(peerID);
+          if(subtitle == 'online') {
+            subtitle = `<i>${subtitle}</i>`;
+          }
+        }
+
+        dom.lastMessageSpan.innerHTML = subtitle;
+      });
+    });
+
+    this.chatList.addEventListener('click', (e) => {
+      let target = e.target as HTMLElement;
+      cancelEvent(e);
+
+      if(this.freezed) return;
+
+      if(target.tagName != 'LI') {
+        target = findUpTag(target, 'LI');
+      }
+
+      if(!target) return;
+
+      let peerID = +target.getAttribute('data-peerID');
+      target.classList.toggle('active');
+      if(peerID in this.selected) {
+        this.remove(peerID);
+      } else {
+        this.add(peerID);
+      }
+
+      let checkbox = target.querySelector('input') as HTMLInputElement;
+      checkbox.checked = !checkbox.checked;
+    });
+
+    this.selectedContainer.addEventListener('click', (e) => {
+      if(this.freezed) return;
+      let target = e.target as HTMLElement;
+      target = findUpClassName(target, 'selector-user');
+
+      if(!target) return;
+
+      let peerID = target.dataset.peerID;
+      let li = this.chatList.querySelector('[data-peerid="' + peerID + '"]') as HTMLElement;
+      li.click();
+    });
+
+    this.container.append(topContainer, delimiter, this.chatsContainer);
+    appendTo.append(this.container);
+  }
+
+  private add(peerID: number) {
+    let div = document.createElement('div');
+    div.classList.add('selector-user', 'scale-in');
+    div.dataset.peerID = '' + peerID;
+    this.selected[peerID] = div;
+    
+    let title = appPeersManager.getPeerTitle(peerID, false, true);
+
+    let avatarDiv = document.createElement('div');
+    avatarDiv.classList.add('user-avatar', 'tgico');
+    appProfileManager.putPhoto(avatarDiv, peerID);
+
+    div.innerHTML = title;
+    div.insertAdjacentElement('afterbegin', avatarDiv);
+
+    this.selectedContainer.insertBefore(div, this.searchInput);
+    this.selectedScrollable.scrollTop = this.selectedScrollable.scrollHeight;
+    this.onChange(Object.keys(this.selected).length);
+  }
+
+  private remove(peerID: number) {
+    let div = this.selected[peerID];
+    div.classList.remove('scale-in');
+    void div.offsetWidth;
+    div.classList.add('scale-out');
+    div.addEventListener('animationend', () => {
+      delete this.selected[peerID];
+      div.remove();
+      this.onChange(Object.keys(this.selected).length);
+    }, {once: true});
+  }
+
+  public getSelected() {
+    return Object.keys(this.selected).map(p => +p);
+  }
+}
+
+class AppForward {
+  private container = document.getElementById('forward-container') as HTMLDivElement;
+  private closeBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement;
+  private sendBtn = this.container.querySelector('.btn-circle') as HTMLButtonElement;
+
+  private selector: AppSelectPeers;
+  private msgIDs: number[] = [];
+
+  constructor() {
+    this.closeBtn.addEventListener('click', () => {
+      this.cleanup();
+      this.container.classList.remove('active');
+      appSidebarRight.onSidebarScroll();
+    });
+
+    this.sendBtn.addEventListener('click', () => {
+      let peerIDs = this.selector.getSelected();
+      
+      if(this.msgIDs.length && peerIDs.length) {
+        this.sendBtn.classList.remove('tgico-send');
+        this.sendBtn.disabled = true;
+        putPreloader(this.sendBtn);
+        this.selector.freezed = true;
+
+        let s = () => {
+          let promises = peerIDs.splice(0, 3).map(peerID => {
+            return appMessagesManager.forwardMessages(peerID, this.msgIDs);
+          });
+          
+          Promise.all(promises).then(() => {
+            if(peerIDs.length) {
+              return s();
+            } else {
+              this.closeBtn.click();
+            }
+          });
+        };
+        
+        s();
+      }
+    });
+  }
+
+  public cleanup() {
+    if(this.selector) {
+      this.selector.container.remove();
+      this.selector = null;
+    }
+  }
+
+  public init(ids: number[]) {
+    this.cleanup();
+    this.msgIDs = ids;
+
+    appSidebarRight.toggleSidebar(true);
+    this.container.classList.add('active');
+    this.sendBtn.innerHTML = '';
+    this.sendBtn.classList.add('tgico-send');
+    this.sendBtn.disabled = false;
+
+    this.selector = new AppSelectPeers(this.container, (length) => {
+      if(length) {
+        this.sendBtn.classList.add('is-visible');
+      } else {
+        this.sendBtn.classList.remove('is-visible');
+      }
+    });
+  }
+}
+
+export default new AppForward();

src/components/appSearch.ts

@@ -4,17 +4,19 @@ import appMessagesIDsManager from "../lib/appManagers/appMessagesIDsManager";
 import appUsersManager from "../lib/appManagers/appUsersManager";
 import appPeersManager from '../lib/appManagers/appPeersManager';
 import appMessagesManager from "../lib/appManagers/appMessagesManager";
-import { numberWithCommas, escapeRegExp } from "../lib/utils";
+import { escapeRegExp } from "../lib/utils";
 import { formatPhoneNumber } from "./misc";
+import appChatsManager from "../lib/appManagers/appChatsManager";
 
 export class SearchGroup {
   container: HTMLDivElement;
   nameEl: HTMLDivElement;
   list: HTMLUListElement;
 
-  constructor(public name: string, public type: string) {
+  constructor(public name: string, public type: string, private clearable = true, className?: string) {
     this.list = document.createElement('ul');
     this.container = document.createElement('div');
+    if(className) this.container.classList.add(className);
     this.nameEl = document.createElement('div');
     this.nameEl.classList.add('search-group__name');
     this.nameEl.innerText = name;
@@ -28,7 +30,10 @@ export class SearchGroup {
 
   clear() {
     this.container.style.display = 'none';
-    this.list.innerHTML = '';
+
+    if(this.clearable) {
+      this.list.innerHTML = '';
+    }
   }
 
   setActive() {
@@ -47,7 +52,7 @@ export default class AppSearch {
 
   private query = '';
 
-  private listsContainer: HTMLDivElement = null;
+  public listsContainer: HTMLDivElement = null;
 
   private peerID = 0; // 0 - means global
 
@@ -155,11 +160,7 @@ export default class AppSearch {
             if(showMembersCount && (peer.participants_count || peer.participants)) {
               let regExp = new RegExp(`(${escapeRegExp(query)})`, 'gi');
               dom.titleSpan.innerHTML = dom.titleSpan.innerHTML.replace(regExp, '<i>$1</i>');
-
-              let isChannel = appPeersManager.isChannel(peerID) && !appPeersManager.isMegagroup(peerID);
-              let participants_count = peer.participants_count || peer.participants.participants.length;
-              let subtitle = numberWithCommas(participants_count) + ' ' + (isChannel ? 'subscribers' : 'members');
-              dom.lastMessageSpan.innerText = subtitle;
+              dom.lastMessageSpan.innerText = appChatsManager.getChatMembersString(-peerID);
             } else {
               let username = appPeersManager.getPeerUsername(peerID);
               if(!username) {

src/components/bubbleGroups.ts

@@ -154,6 +154,7 @@ export default class BubbleGroups {
   
   cleanup() {
     this.bubblesByGroups = [];
+    this.groups = [];
     /* for(let value of this.updateRAFs.values()) {
       window.cancelAnimationFrame(value);
     }

src/components/chatInput.ts

@@ -393,7 +393,7 @@ export class ChatInput {
           if(!file) continue;
 
           willAttach.type = file.type.indexOf('image/') === 0 ? 'media' : "document";
-          attachFile(file);
+          attachFiles([file]);
         }
       }
     }, true);
@@ -559,12 +559,12 @@ export class ChatInput {
     this.onMessageSent(!this.editMsgID);
   };
 
-  public setTopInfo(title: string, subtitle: string, input?: string, media?: any) {
+  public setTopInfo(title: string, subtitle: string, input?: string, message?: any) {
     //appImManager.scrollPosition.prepareFor('down');
 
     if(this.replyElements.container.lastElementChild.tagName == 'DIV') {
       this.replyElements.container.lastElementChild.remove();
-      this.replyElements.container.append(wrapReply(title, subtitle, media));
+      this.replyElements.container.append(wrapReply(title, subtitle, message));
     }
     //this.replyElements.titleEl.innerHTML = title ? RichTextProcessor.wrapEmojiText(title) : '';
     //this.replyElements.subtitleEl.innerHTML = subtitle ? RichTextProcessor.wrapEmojiText(subtitle) : '';

src/components/emoticonsDropdown.ts

@@ -141,6 +141,15 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
       let div = document.createElement('div');
       div.classList.add('emoji-category');
 
+      let titleDiv = document.createElement('div');
+      titleDiv.classList.add('category-title');
+      titleDiv.innerText = category;
+
+      let itemsDiv = document.createElement('div');
+      itemsDiv.classList.add('category-items');
+
+      div.append(titleDiv, itemsDiv);
+
       let emojis = sorted[category];
       emojis.forEach(details => {
         let emoji = details.unified;
@@ -161,7 +170,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
 
         //spanEmoji = spanEmoji.firstElementChild as HTMLSpanElement;
         //spanEmoji.setAttribute('emoji', emoji);
-        div.appendChild(spanEmoji);
+        itemsDiv.appendChild(spanEmoji);
       });
 
       divs[category] = div;
@@ -272,17 +281,23 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
     let heights: number[] = [];
 
     let heightRAF = 0;
-    let categoryPush = (categoryDiv: HTMLDivElement, docs: MTDocument[], prepend?: boolean) => {
+    let categoryPush = (categoryDiv: HTMLDivElement, categoryTitle: string, docs: MTDocument[], prepend?: boolean) => {
       //if((docs.length % 5) != 0) categoryDiv.classList.add('not-full');
 
-      let container = document.createElement('div');
-      categoryDiv.append(container);
+      let itemsDiv = document.createElement('div');
+      itemsDiv.classList.add('category-items');
+
+      let titleDiv = document.createElement('div');
+      titleDiv.classList.add('category-title');
+      titleDiv.innerText = categoryTitle;
+
+      categoryDiv.append(titleDiv, itemsDiv);
 
       docs.forEach(doc => {
         let div = document.createElement('div');
         wrapSticker(doc, div, undefined, lazyLoadQueue, EMOTICONSSTICKERGROUP, true, false, true);
 
-        container.append(div);
+        itemsDiv.append(div);
       });
 
       if(prepend) stickersScroll.prepend(categoryDiv);
@@ -356,7 +371,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
   
         //stickersScroll.prepend(categoryDiv);
         
-        categoryPush(categoryDiv, stickers.stickers, true);
+        categoryPush(categoryDiv, 'Recent', stickers.stickers, true);
       }),
 
       apiManager.invokeApi('messages.getAllStickers', {hash: 0}).then(async(res) => {
@@ -413,7 +428,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
             wrapSticker(stickerSet.documents[0], li as any, undefined, undefined, EMOTICONSSTICKERGROUP); // kostil
           }
   
-          categoryPush(categoryDiv, stickerSet.documents, false);
+          categoryPush(categoryDiv, stickerSet.set.title, stickerSet.documents, false);
         }
       })
     ]);

src/components/lazyLoadQueue.ts

@@ -15,6 +15,7 @@ export default class LazyLoadQueue {
   private unlockResolve: () => void = null;
 
   private log = console.log.bind(console, '[LL]:');
+  private debug = false;
 
   constructor(private parallelLimit = 5) {
 
@@ -69,13 +70,14 @@ export default class LazyLoadQueue {
 
       let tempID = this.tempID;
 
-      this.log('will load media', this.lockPromise, item);
+      this.debug && this.log('will load media', this.lockPromise, item);
 
       try {
         if(this.lockPromise) {
           let perf = performance.now();
-          await this.lockPromise; 
-          this.log('waited lock:', performance.now() - perf);
+          await this.lockPromise;
+
+          this.debug && this.log('waited lock:', performance.now() - perf);
         }
         
         await new Promise((resolve, reject) => window.requestAnimationFrame(() => window.requestAnimationFrame(resolve)));
@@ -88,7 +90,7 @@ export default class LazyLoadQueue {
         this.loadingMedia--;
       }
 
-      this.log('loaded media');
+      this.debug && this.log('loaded media');
 
       if(this.lazyLoadMedia.length) {
         this.processQueue();

src/components/misc.ts

@@ -107,10 +107,13 @@ let set = (elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLSourceEl
 };
 
 export function renderImageFromUrl(elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLSourceElement, url: string) {
-  if(loadedURLs[url]) return set(elem, url);
+  if(loadedURLs[url]) {
+    set(elem, url);
+    return true;
+  }
 
   if(elem instanceof HTMLSourceElement) {
-    return elem.src = url;
+    elem.src = url;
   } else {
     let loader = new Image();
     loader.src = url;
@@ -119,6 +122,8 @@ export function renderImageFromUrl(elem: HTMLElement | HTMLImageElement | SVGIma
       loadedURLs[url] = true;
     };
   }
+
+  return false;
 }
 
 export function putPreloader(elem: Element, returnDiv = false) {

src/components/preloader.ts

@@ -49,11 +49,14 @@ export default class ProgressivePreloader {
       this.promise = promise;
 
       let tempID = --this.tempID;
-      promise.then(() => {
+      let onEnd = () => {
         if(tempID == this.tempID) {
           this.detach();
         }
-      });
+
+        promise.notify = null;
+      };
+      promise.then(onEnd, onEnd);
 
       promise.notify = (details: {done: number, total: number}) => {
         if(tempID != this.tempID) return;

src/components/scrollable_new.ts

@@ -64,7 +64,7 @@ export default class Scrollable {
   private virtualTempIDBottom = 0;
   private lastTopID = 0;
   private lastBottomID = 0;
-  private lastScrollDirection = true; // true = bottom
+  private lastScrollDirection = 0; // true = bottom
 
   private setVisible(element: HTMLElement) {
     if(this.visible.has(element)) return;
@@ -116,11 +116,11 @@ export default class Scrollable {
         //this.debug && this.log('intersection entry:', entry, isTop, isBottom, this.lastTopID, this.lastBottomID);
       });
 
-      if(!filtered.length) {
+      if(!filtered.length || this.lastScrollDirection === 0) {
         return;
       }
 
-      if(this.lastScrollDirection) { // bottom
+      if(this.lastScrollDirection === 1) { // bottom
         let target = filtered[filtered.length - 1].target as HTMLElement;
         this.lastBottomID = +target.dataset.virtual;
 
@@ -300,6 +300,7 @@ export default class Scrollable {
     
     this.disableHoverTimeout = setTimeout(() => {
       appendTo.classList.remove('disable-hover');
+      this.lastScrollDirection = 0;
       
       if(!this.measureMutex.isFulfilled) {
         this.measureMutex.resolve();
@@ -346,8 +347,12 @@ export default class Scrollable {
         }
       }
       
-      this.lastScrollDirection = this.lastScrollTop < scrollTop;
-      this.lastScrollTop = scrollTop;
+      if(this.lastScrollTop != scrollTop) {
+        this.lastScrollDirection = this.lastScrollTop < scrollTop ? 1 : -1;
+        this.lastScrollTop = scrollTop;
+      } else {
+        this.lastScrollDirection = 0;
+      }
       this.onScrollMeasure = 0;
     });
   }

src/components/wrappers.ts

@@ -115,6 +115,23 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
 
   let source = document.createElement('source');
   video.append(source);
+
+  let span: HTMLSpanElement;
+  if(doc.type != 'round') {
+    span = document.createElement('span');
+    span.classList.add('video-time');
+    container.append(span);
+
+    if(doc.type != 'gif') {
+      span.innerText = (doc.duration + '').toHHMMSS(false);
+
+      let spanPlay = document.createElement('span');
+      spanPlay.classList.add('video-play', 'tgico-largeplay', 'btn-circle', 'position-center');
+      container.append(spanPlay);
+    } else {
+      span.innerText = 'GIF';
+    }
+  }
   
   let loadVideo = () => {
     let promise = appDocsManager.downloadDoc(doc);
@@ -133,7 +150,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
 
       //return;
       
-      console.log('loaded doc:', doc, doc.url, blob, container);
+      //console.log('loaded doc:', doc, doc.url, blob, container);
       
       renderImageFromUrl(source, doc.url);
       source.type = doc.mime_type;
@@ -164,7 +181,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     downloadDiv.classList.add('download');
 
     let span = document.createElement('span');
-    span.classList.add('tgico-download');
+    span.classList.add('btn-circle', 'tgico-download');
     downloadDiv.append(span);
 
     downloadDiv.addEventListener('click', () => {
@@ -172,7 +189,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
       loadVideo();
     });
 
-    container.append(downloadDiv);
+    container.prepend(downloadDiv);
 
     return;
   }
@@ -642,7 +659,7 @@ export function wrapPhoto(photoID: string, message: any, container: HTMLDivEleme
     }
   }
 
-  console.log('wrapPhoto downloaded:', photo, photo.downloaded, container);
+  //console.log('wrapPhoto downloaded:', photo, photo.downloaded, container);
 
   // так нельзя делать, потому что может быть загружен неправильный размер картинки
   /* if(photo.downloaded && photo.url) {
@@ -727,6 +744,7 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
     return lazyLoadQueue ? (lazyLoadQueue.push({div, load}), Promise.resolve()) : load();
   }
   
+  let downloaded = doc.downloaded;
   let load = () => appDocsManager.downloadDoc(doc.id).then(blob => {
     //console.log('loaded sticker:', blob, div);
     if(middleware && !middleware()) return;
@@ -803,6 +821,16 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
     } else if(stickerType == 1) {
       let img = new Image();
 
+      if(!downloaded && (!div.firstElementChild || div.firstElementChild.tagName != 'IMG')) {
+        img.style.opacity = '' + 0;
+
+        img.onload = () => {
+          window.requestAnimationFrame(() => {
+            img.style.opacity = '';
+          });
+        };
+      }
+
       if(!doc.url) {
         appWebpManager.polyfillImage(img, blob).then((url) => {
           doc.url = url;
@@ -825,7 +853,7 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
   return lazyLoadQueue && (!doc.downloaded || stickerType == 2) ? (lazyLoadQueue.push({div, load, wasSeen: group == 'chat'}), Promise.resolve()) : load();
 }
 
-export function wrapReply(title: string, subtitle: string, media?: any) {
+export function wrapReply(title: string, subtitle: string, message?: any) {
   let div = document.createElement('div');
   div.classList.add('reply');
   
@@ -843,11 +871,15 @@ export function wrapReply(title: string, subtitle: string, media?: any) {
   
   replyTitle.innerHTML = title ? RichTextProcessor.wrapEmojiText(title) : '';
   
+  let media = message && message.media;
   if(media) {
-    if(media.photo) {
+    if(message.grouped_id) {
+      replySubtitle.innerHTML = 'Album';
+    } else if(media.photo) {
       replySubtitle.innerHTML = 'Photo';
     } else if(media.document && media.document.type) {
-      replySubtitle.innerHTML = media.document.type;
+      let type = media.document.type as string;
+      replySubtitle.innerHTML = type.charAt(0).toUpperCase() + type.slice(1); // capitalizeFirstLetter
     } else if(media.webpage) {
       replySubtitle.innerHTML = RichTextProcessor.wrapPlainText(media.webpage.url);
     } else {

src/lib/appManagers/apiUpdatesManager.ts

@@ -24,8 +24,8 @@ export class ApiUpdatesManager {
   };
 
   public channelStates: any = {};
-  
   public myID = 0;
+  private attached = false;
 
   constructor() {
     apiManager.getUserID().then((id) => {
@@ -501,6 +501,9 @@ export class ApiUpdatesManager {
   }
   
   public attach() {
+    if(this.attached) return;
+    
+    this.attached = true;
     apiManager.setUpdatesProcessor(this.processUpdateMessage.bind(this));
     apiManager.invokeApi('updates.getState', {}, {noErrorBox: true}).then((stateResult: any) => {
       this.updatesState.seq = stateResult.seq;

src/lib/appManagers/appChatsManager.ts

@@ -1,4 +1,4 @@
-import { $rootScope, isObject, SearchIndexManager, safeReplaceObject, copy } from "../utils";
+import { $rootScope, isObject, SearchIndexManager, safeReplaceObject, copy, numberWithCommas } from "../utils";
 import { RichTextProcessor } from "../richtextprocessor";
 import appUsersManager from "./appUsersManager";
 
@@ -78,6 +78,7 @@ export class AppChatsManager {
   }
 
   public getChat(id: number) {
+    if(id < 0) id = -id;
     return this.chats[id] || {id: id, deleted: true, access_hash: this.channelAccess[id]};
   }
 
@@ -204,6 +205,14 @@ export class AppChatsManager {
     return 'g' + id;
   }
 
+  public getChatMembersString(id: number) {
+    let chat = this.getChat(id);
+
+    let isChannel = this.isChannel(id) && !this.isMegagroup(id);
+    let participants_count = chat.participants_count || chat.participants.participants.length;
+    return numberWithCommas(participants_count) + ' ' + (isChannel ? 'subscribers' : 'members');
+  }
+
   public wrapForFull(id: number, fullChat: any) {
     var chatFull = copy(fullChat);
     var chat = this.getChat(id);

src/lib/appManagers/appDialogsManager.ts

@@ -1,8 +1,8 @@
 import { langPack, findUpClassName, $rootScope, escapeRegExp, whichChild } from "../utils";
 import appImManager, { AppImManager } from "./appImManager";
 import appPeersManager from './appPeersManager';
-import appMessagesManager, { AppMessagesManager } from "./appMessagesManager";
-import appUsersManager from "./appUsersManager";
+import appMessagesManager, { AppMessagesManager, Dialog } from "./appMessagesManager";
+import appUsersManager, { User } from "./appUsersManager";
 import { RichTextProcessor } from "../richtextprocessor";
 import { ripple, putPreloader } from "../../components/misc";
 //import Scrollable from "../../components/scrollable";
@@ -208,7 +208,7 @@ export class AppDialogsManager {
       console.time('getDialogs time');
 
       let loadCount = 50/*this.chatsLoadCount */;
-      this.loadDialogsPromise = appMessagesManager.getConversations('', offset, loadCount, +archived);
+      this.loadDialogsPromise = appMessagesManager.getConversations(offset, loadCount, +archived);
       
       let result = await this.loadDialogsPromise;
 
@@ -535,8 +535,8 @@ export class AppDialogsManager {
             let d = [];
 
             d.push(duration % 60 + ' s');
-            if(duration > 60) d.push((duration / 60 | 0) + ' min');
-            //if(duration > 3600) d.push((duration / 3600 | 0) + ' h');
+            if(duration >= 60) d.push((duration / 60 | 0) + ' min');
+            //if(duration >= 3600) d.push((duration / 3600 | 0) + ' h');
             suffix = ' (' + d.reverse().join(' ') + ')';
           }
         }
@@ -674,22 +674,33 @@ export class AppDialogsManager {
     return this.doms[peerID] || this.domsArchived[peerID];
   }
 
-  public addDialog(dialog: {
-    peerID: number,
-    pFlags: any,
-    peer: any,
-    folder_id?: number
-  }, container?: HTMLUListElement, drawStatus = true) {
+  public addDialog(_dialog: Dialog | number, container?: HTMLUListElement, drawStatus = true, rippleEnabled = true, onlyFirstName = false) {
+    let dialog: Dialog;
+    
+    if(typeof(_dialog) === 'number') {
+      let originalDialog = appMessagesManager.getDialogByPeerID(_dialog)[0];
+      if(!originalDialog) {
+        originalDialog = {
+          peerID: _dialog,
+          pFlags: {}
+        } as any;
+      }
+
+      dialog = originalDialog;
+    } else {
+      dialog = _dialog;
+    }
+
     let peerID: number = dialog.peerID;
 
     if((this.doms[peerID] || this.domsArchived[peerID]) && !container) return;
 
-    let title = appPeersManager.getPeerTitle(peerID);
+    let title = appPeersManager.getPeerTitle(peerID, false, onlyFirstName);
 
     let avatarDiv = document.createElement('div');
     avatarDiv.classList.add('user-avatar');
 
-    if(drawStatus && peerID != $rootScope.myID) {
+    if(drawStatus && peerID != $rootScope.myID && dialog.peer) {
       let peer = dialog.peer;
       
       switch(peer._) {
@@ -714,7 +725,7 @@ export class AppDialogsManager {
     titleSpan.classList.add('user-title');
 
     if(peerID == $rootScope.myID) {
-      title = 'Saved Messages';
+      title = onlyFirstName ? 'Saved' : 'Saved Messages';
     } 
 
     //console.log('trying to load photo for:', title);
@@ -733,21 +744,24 @@ export class AppDialogsManager {
     paddingDiv.classList.add('rp');
     paddingDiv.append(avatarDiv, captionDiv);
 
-    ripple(paddingDiv, (id) => {
-      this.log('dialogs click element');
-      this.lastClickID = id;
-
-      return new Promise((resolve, reject) => {
-        this.rippleCallback = resolve;
-        //setTimeout(() => resolve(), 100);
-        //window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+    if(rippleEnabled) {
+      ripple(paddingDiv, (id) => {
+        this.log('dialogs click element');
+        this.lastClickID = id;
+  
+        return new Promise((resolve, reject) => {
+          this.rippleCallback = resolve;
+          //setTimeout(() => resolve(), 100);
+          //window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+        });
+      }, (id) => {
+        //console.log('appDialogsManager: ripple onEnd called!');
+        if(id == this.lastGoodClickID) {
+          appImManager.lazyLoadQueue.unlock();
+        }
       });
-    }, (id) => {
-      //console.log('appDialogsManager: ripple onEnd called!');
-      if(id == this.lastGoodClickID) {
-        appImManager.lazyLoadQueue.unlock();
-      }
-    });
+    }
+    
 
     let li = document.createElement('li');
     li.append(paddingDiv);
@@ -807,22 +821,26 @@ export class AppDialogsManager {
     return {dom, dialog};
   }
 
-  public setTyping(dialog: any, user: any) {
+  public setTyping(dialog: Dialog, user: User) {
     let dom = this.getDialogDom(dialog.peerID);
 
     let str = '';
+    if(dialog.peerID < 0) {
+      let s = user.rFirstName || user.username;
+      if(!s) return;
+      str = s + ' ';
+    } 
 
     let senderBold = document.createElement('i');
-    if(dialog.peerID < 0) str = (user.first_name || user.last_name || user.username) + ' ';
     str += 'typing...';
-    senderBold.innerText = str;
+    senderBold.innerHTML = str;
 
     dom.lastMessageSpan.innerHTML = '';
     dom.lastMessageSpan.append(senderBold);
     dom.lastMessageSpan.classList.add('user-typing');
   }
 
-  public unsetTyping(dialog: any) {
+  public unsetTyping(dialog: Dialog) {
     let dom = this.getDialogDom(dialog.peerID);
     dom.lastMessageSpan.classList.remove('user-typing');
     this.setLastMessage(dialog, null, dom);

src/lib/appManagers/appImManager.ts

@@ -26,6 +26,7 @@ import Scrollable from '../../components/scrollable_new';
 import BubbleGroups from '../../components/bubbleGroups';
 import LazyLoadQueue from '../../components/lazyLoadQueue';
 import appDocsManager from './appDocsManager';
+import appForward from '../../components/appForward';
 
 console.log('appImManager included!');
 
@@ -333,6 +334,12 @@ export class AppImManager {
       
       if(!bubble) return;
 
+      //this.log('chatInner click:', target);
+      if(target.tagName == 'SPAN') {
+        (target.parentElement.querySelector('video') as HTMLElement).click(); // hot-fix for time and play button
+        return;
+      }
+
       if((target.tagName == 'IMG' && !target.classList.contains('emoji') && !target.parentElement.classList.contains('user-avatar')) 
         || target.tagName == 'image' 
         || target.classList.contains('album-item')
@@ -458,7 +465,9 @@ export class AppImManager {
         return;
       }
       
-      if(e.key == 'Meta' || e.key == 'Control') {
+      if(e.key == 'Escape' && this.peerID != 0) { // hide current dialog
+        this.setPeer(0);
+      } else if(e.key == 'Meta' || e.key == 'Control') {
         return;
       } else if(e.key == 'c' && (e.ctrlKey || e.metaKey) && target.tagName != 'INPUT') {
         return;
@@ -566,14 +575,18 @@ export class AppImManager {
     
     this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
       let message = appMessagesManager.getMessage(this.contextMenuMsgID);
-      this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message, undefined, message.media);
+      this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message, undefined, message);
       this.chatInputC.replyToMsgID = this.contextMenuMsgID;
       this.chatInputC.editMsgID = 0;
     });
+
+    this.contextMenu.querySelector('.menu-forward').addEventListener('click', () => {
+      appForward.init([this.contextMenuMsgID]);
+    });
     
     this.contextMenuEdit.addEventListener('click', () => {
       let message = appMessagesManager.getMessage(this.contextMenuMsgID);
-      this.chatInputC.setTopInfo('Editing', message.message, message.message, message.media);
+      this.chatInputC.setTopInfo('Editing', message.message, message.message, message);
       this.chatInputC.replyToMsgID = 0;
       this.chatInputC.editMsgID = this.contextMenuMsgID;
     });
@@ -848,40 +861,11 @@ export class AppImManager {
       if(this.myID == this.peerID) {
         this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = '';
       } else if(user && user.status) {
-        let subtitle = '';
-        switch(user.status._) {
-          case 'userStatusRecently': {
-            subtitle += 'last seen recently';
-            break;
-          }
-          
-          case 'userStatusOffline': {
-            subtitle = 'last seen ';
-          
-            let date = user.status.was_online;
-            let now = Date.now() / 1000;
-            
-            if((now - date) < 60) {
-              subtitle += ' just now';
-            } else if((now - date) < 3600) {
-              subtitle += ((now - date) / 60 | 0) + ' minutes ago';
-            } else if(now - date < 86400) {
-              subtitle += ((now - date) / 3600 | 0) + ' hours ago';
-            } else {
-              let d = new Date(date * 1000);
-              subtitle += ('0' + d.getDate()).slice(-2) + '.' + ('0' + (d.getMonth() + 1)).slice(-2) + ' at ' + 
-              ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
-            }
-            
-            break;
-          }
+        let subtitle = appUsersManager.getUserStatusString(user.id);
 
-          case 'userStatusOnline': {
-            this.subtitleEl.classList.add('online');
-            appSidebarRight.profileElements.subtitle.classList.add('online');
-            subtitle = 'online';
-            break;
-          }
+        if(subtitle == 'online') {
+          this.subtitleEl.classList.add('online');
+          appSidebarRight.profileElements.subtitle.classList.add('online');
         }
         
         appSidebarRight.profileElements.subtitle.innerText = subtitle;
@@ -951,6 +935,10 @@ export class AppImManager {
       appSidebarRight.toggleSidebar(false);
       this.topbar.style.display = this.chatInput.style.display = this.goDownBtn.style.display = 'none';
       this.cleanup();
+      if(appDialogsManager.lastActiveListElement) {
+        appDialogsManager.lastActiveListElement.classList.remove('active');
+        appDialogsManager.lastActiveListElement = null;
+      }
       return false;
     }
     
@@ -1087,9 +1075,9 @@ export class AppImManager {
         return true;
       })/* .catch(err => {
         this.log.error(err);
-      }) */,
+      }) *//* ,
       
-      appSidebarRight.fillProfileElements()/* ,
+      appSidebarRight.fillProfileElements() *//* ,
       appSidebarRight.loadSidebarMedia(true) */
     ]).catch(err => {
       this.log.error('setPeer promises error:', err);
@@ -1152,6 +1140,7 @@ export class AppImManager {
       let bubble = this.bubbles[id];
       delete this.bubbles[id];
 
+      this.bubbleGroups.removeBubble(bubble, id);
       this.unreadedObserver.unobserve(bubble);
       this.scrollable.removeElement(bubble);
       //bubble.remove();
@@ -1236,7 +1225,7 @@ export class AppImManager {
   
   // reverse means top
   public renderMessage(message: any, reverse = false, multipleRender = false, bubble: HTMLDivElement = null, updatePosition = true) {
-    this.log('message to render:', message);
+    //this.log('message to render:', message);
     if(message.deleted) return;
     else if(message.grouped_id) { // will render only last album's message
       let storage = appMessagesManager.groupedMessagesStorage[message.grouped_id];
@@ -1614,7 +1603,7 @@ export class AppImManager {
         case 'messageMediaDocument': {
           let doc = message.media.document;
 
-          this.log('messageMediaDocument', doc, bubble);
+          //this.log('messageMediaDocument', doc, bubble);
           
           if(doc.sticker/*  && doc.size <= 1e6 */) {
             bubble.classList.add('sticker');
@@ -1639,7 +1628,7 @@ export class AppImManager {
 
             break;
           } else if(doc.type == 'video' || doc.type == 'gif' || doc.type == 'round'/*  && doc.size <= 20e6 */) {
-            this.log('never get free 2', doc);
+            //this.log('never get free 2', doc);
             
             if(doc.type == 'round') {
               bubble.classList.add('round');
@@ -1700,7 +1689,7 @@ export class AppImManager {
         }
 
         case 'messageMediaContact': {
-          this.log('wrapping contact', message);
+          //this.log('wrapping contact', message);
 
           let contactDiv = document.createElement('div');
           contactDiv.classList.add('contact');
@@ -1791,7 +1780,7 @@ export class AppImManager {
             bubble.setAttribute('data-original-mid', message.reply_to_mid);
           }
           
-          bubbleContainer.append(wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage.media));
+          bubbleContainer.append(wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage));
           bubble.classList.add('is-reply');
         }
         
@@ -2033,7 +2022,7 @@ export class AppImManager {
     
     let pageCount = this.bubblesContainer.clientHeight / 38/*  * 1.25 */ | 0;
     //let loadCount = Object.keys(this.bubbles).length > 0 ? 50 : pageCount;
-    let realLoadCount = 50;
+    let realLoadCount = Object.keys(this.bubbles).length > 0 ? 40 : pageCount;//let realLoadCount = 50;
     let loadCount = realLoadCount;
     
     if(testScroll) {
@@ -2306,4 +2295,5 @@ export class AppImManager {
 }
 
 const appImManager = new AppImManager();
+(window as any).appImManager = appImManager;
 export default appImManager;

src/lib/appManagers/appMessagesManager.ts

@@ -38,7 +38,7 @@ export type HistoryResult = {
   unreadSkip: boolean
 };
 
-type Dialog = {
+export type Dialog = {
   _: 'dialog',
   top_message: number,
   read_inbox_max_id: number,
@@ -68,9 +68,14 @@ export class AppMessagesManager {
     [peerID: string]: HistoryStorage
   } = {};
   public dialogsStorage: {
-    count: any,
-    dialogs: Dialog[]
-  } = {count: null, dialogs: []};
+    count: number,
+    dialogs: {
+      [folderID: number]: Dialog[]
+    }
+  } = {
+    count: null,
+    dialogs: {}
+  };
   public pendingByRandomID: {[randomID: string]: [number, number]} = {};
   public pendingByMessageID: any = {};
   public pendingAfterMsgs: any = {};
@@ -1137,37 +1142,12 @@ export class AppMessagesManager {
     };
   }
 
-  public getConversations(query?: string, offsetIndex?: number, limit = 20, folderID = -1) {
-    //var curDialogStorage = this.dialogsStorage;
-    //var isSearch = typeof(query) == 'string' && query.length;
-    let curDialogStorage = this.dialogsStorage.dialogs;
+  public getConversations(offsetIndex?: number, limit = 20, folderID = 0) {
+    let curDialogStorage = this.dialogsStorage.dialogs[folderID] ?? (this.dialogsStorage.dialogs[folderID] = []);
 
-    if(folderID > 0) {
-      curDialogStorage = curDialogStorage.filter(d => d.folder_id == folderID);
-    } else {
-      curDialogStorage = curDialogStorage.filter(d => d.folder_id != 1);
-    }
-
-    /* if(isSearch) {
-      if(!limit || this.cachedResults.query !== query) {
-        this.cachedResults.query = query;
-
-        var results: any = SearchIndexManager.search(query, this.dialogsIndex);
-
-        this.cachedResults.dialogs = [];
-        this.dialogsStorage.dialogs.forEach((dialog: any) => {
-          if(results[dialog.peerID]) {
-            this.cachedResults.dialogs.push(dialog);
-          }
-        })
-        this.cachedResults.count = this.cachedResults.dialogs.length;
-      }
-      curDialogStorage = this.cachedResults;
-    } else { */
-      this.cachedResults.query = false;
-    //}
+    this.cachedResults.query = false;
 
-    var offset = 0;
+    let offset = 0;
     if(offsetIndex > 0) {
       for(; offset < curDialogStorage.length; offset++) {
         if(offsetIndex > curDialogStorage[offset].index) {
@@ -1176,7 +1156,7 @@ export class AppMessagesManager {
       }
     }
 
-    if(/* isSearch ||  */this.allDialogsLoaded[folderID] || curDialogStorage.length >= offset + limit) {
+    if(this.allDialogsLoaded[folderID] || curDialogStorage.length >= offset + limit) {
       return Promise.resolve({
         dialogs: curDialogStorage.slice(offset, offset + limit),
         count: curDialogStorage.length
@@ -1184,17 +1164,11 @@ export class AppMessagesManager {
     }
 
     return this.getTopMessages(limit, folderID).then(count => {
-      let curDialogStorage = this.dialogsStorage.dialogs;
-
-      if(folderID > 0) {
-        curDialogStorage = curDialogStorage.filter(d => d.folder_id == folderID);
-      } else {
-        curDialogStorage = curDialogStorage.filter(d => d.folder_id != 1);
-      }
+      let curDialogStorage = this.dialogsStorage.dialogs[folderID];
 
       offset = 0;
       if(offsetIndex > 0) {
-        for(offset = 0; offset < curDialogStorage.length; offset++) {
+        for(; offset < curDialogStorage.length; offset++) {
           if(offsetIndex > curDialogStorage[offset].index) {
             break;
           }
@@ -1210,20 +1184,14 @@ export class AppMessagesManager {
     });
   }
 
-  public getTopMessages(limit: number, folderID = -1): Promise<number> {
-    var dialogs = this.dialogsStorage.dialogs;
+  public getTopMessages(limit: number, folderID: number): Promise<number> {
+    var dialogs = this.dialogsStorage.dialogs[folderID];
     var offsetDate = 0;
     var offsetID = 0;
     var offsetPeerID = 0;
     var offsetIndex = 0;
     var flags = 0;
 
-    if(folderID > 0) {
-      dialogs = dialogs.filter(d => d.folder_id == folderID);
-    } else {
-      dialogs = dialogs.filter(d => d.folder_id != 1);
-    }
-
     if(this.dialogsOffsetDate[folderID]) {
       offsetDate = this.dialogsOffsetDate[folderID] + serverTimeManager.serverTimeOffset;
       offsetIndex = this.dialogsOffsetDate[folderID] * 0x10000;
@@ -1260,13 +1228,10 @@ export class AppMessagesManager {
 
       var maxSeenIdIncremented = offsetDate ? true : false;
       var hasPrepend = false;
-      //dialogsResult.dialogs.reverse();
       let length = dialogsResult.dialogs.length;
       let noIDsDialogs: any = {};
       for(let i = length - 1; i >= 0; --i) {
         let dialog = dialogsResult.dialogs[i];
-      //}
-      //dialogsResult.dialogs.forEach((dialog: any) => {
 
         this.saveConversation(dialog);
         if(offsetIndex && dialog.index > offsetIndex) {
@@ -1284,8 +1249,6 @@ export class AppMessagesManager {
           maxSeenIdIncremented = true;
         }
       }
-      //});
-      //dialogsResult.dialogs.reverse();
 
       if(Object.keys(noIDsDialogs).length) {
         //setTimeout(() => { // test bad situation
@@ -1315,6 +1278,54 @@ export class AppMessagesManager {
     });
   }
 
+  public forwardMessages(peerID: number, mids: number[], options: Partial<{
+    withMyScore: boolean
+  }> = {}) {
+    peerID = AppPeersManager.getPeerMigratedTo(peerID) || peerID;
+    mids = mids.sort((a, b) => a - b);
+
+    var flags = 0;
+    if(options.withMyScore) {
+      flags |= 256;
+    }
+
+    let splitted = appMessagesIDsManager.splitMessageIDsByChannels(mids);
+    let promises: any[] = [];
+
+    for(let channelID in splitted.msgIDs) {
+      let msgIDs = splitted.msgIDs[channelID];
+      let len = msgIDs.length;
+      let randomIDs = [];
+      for(let i = 0; i < len; i++) {
+        randomIDs.push([nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)]);
+      }
+
+      let sentRequestOptions: any = {};
+      if(this.pendingAfterMsgs[peerID]) {
+        sentRequestOptions.afterMessageID = this.pendingAfterMsgs[peerID].messageID;
+      }
+
+      let promise = apiManager.invokeApi('messages.forwardMessages', {
+        flags: flags,
+        from_peer: AppPeersManager.getInputPeerByID(-channelID),
+        id: msgIDs,
+        random_id: randomIDs,
+        to_peer: AppPeersManager.getInputPeerByID(peerID)
+      }, sentRequestOptions).then((updates) => {
+        apiUpdatesManager.processUpdateMessage(updates);
+      }, () => {}).then(() => {
+        if(this.pendingAfterMsgs[peerID] === sentRequestOptions) {
+          delete this.pendingAfterMsgs[peerID];
+        }
+      });
+
+      this.pendingAfterMsgs[peerID] = sentRequestOptions;
+      promises.push(promise);
+    }
+
+    return Promise.all(promises);
+  }
+
   public generateDialogIndex(date?: any) {
     if(date === undefined) {
       date = tsNow(true) + serverTimeManager.serverTimeOffset;
@@ -1322,9 +1333,9 @@ export class AppMessagesManager {
     return (date * 0x10000) + ((++this.dialogsNum) & 0xFFFF);
   }
 
-  public pushDialogToStorage(dialog: any, offsetDate?: number) {
-    var dialogs = this.dialogsStorage.dialogs/* .filter(d => d.folder_id == dialog.folder_id) */;
-    var pos = this.getDialogByPeerID(dialog.peerID)[1];
+  public pushDialogToStorage(dialog: Dialog, offsetDate?: number) {
+    let dialogs = this.dialogsStorage.dialogs[dialog.folder_id] ?? (this.dialogsStorage.dialogs[dialog.folder_id] = []);
+    let pos = this.getDialogByPeerID(dialog.peerID)[1];
     if(pos !== undefined) {
       dialogs.splice(pos, 1);
     }
@@ -1339,15 +1350,14 @@ export class AppMessagesManager {
       this.dialogsOffsetDate[dialog.folder_id] = offsetDate;
     }
 
-    var index = dialog.index;
-    var i;
-    var len = dialogs.length;
+    let index = dialog.index;
+    let len = dialogs.length;
     if(!len || index < dialogs[len - 1].index) {
       dialogs.push(dialog);
     } else if(index >= dialogs[0].index) {
       dialogs.unshift(dialog);
     } else {
-      for(i = 0; i < len; i++) {
+      for(let i = 0; i < len; i++) {
         if(index > dialogs[i].index) {
           dialogs.splice(i, 0, dialog);
           break;
@@ -1377,22 +1387,10 @@ export class AppMessagesManager {
 
   public getDialogByPeerID(peerID: number): [Dialog, number] | [] {
     let dialogs = this.dialogsStorage.dialogs;
-    let byFolders: {[id: number]: number} = {};
-    for(let i = 0, length = dialogs.length; i < length; i++) {
-      let dialog = dialogs[i];
-      if(!byFolders[dialog.folder_id]) byFolders[dialog.folder_id] = 0;
-      byFolders[dialog.folder_id]++;
-
-      if(dialog.peerID == peerID) {
-        //return [dialog, i];
-        let sum = 0;
-        for(let id in byFolders) {
-          if(+id != dialog.folder_id) {
-            sum += byFolders[id];
-          }
-        }
-
-        return [dialog, i - sum];
+    for(let folderID in dialogs) {
+      let index = dialogs[folderID].findIndex(dialog => dialog.peerID == peerID);
+      if(index !== -1) {
+        return [dialogs[folderID][index], index];
       }
     }
 
@@ -1627,7 +1625,7 @@ export class AppMessagesManager {
     })
   }
 
-  public migrateChecks(migrateFrom: any, migrateTo: any) {
+  public migrateChecks(migrateFrom: number, migrateTo: number) {
     if(!this.migratedFromTo[migrateFrom] &&
       !this.migratedToFrom[migrateTo] &&
       appChatsManager.hasChat(-migrateTo)) {
@@ -1641,9 +1639,10 @@ export class AppMessagesManager {
         setTimeout(() => {
           var foundDialog = this.getDialogByPeerID(migrateFrom);
           if(foundDialog.length) {
-            this.dialogsStorage.dialogs.splice(foundDialog[1], 1);
+            this.dialogsStorage.dialogs[foundDialog[0].folder_id].splice(foundDialog[1], 1);
             $rootScope.$broadcast('dialog_drop', {peerID: migrateFrom});
           }
+
           $rootScope.$broadcast('dialog_migrate', {migrateFrom: migrateFrom, migrateTo: migrateTo});
         }, 100);
       }
@@ -1734,7 +1733,7 @@ export class AppMessagesManager {
       } else {
         var foundDialog = this.getDialogByPeerID(peerID);
         if(foundDialog.length) {
-          this.dialogsStorage.dialogs.splice(foundDialog[1], 1);
+          this.dialogsStorage.dialogs[foundDialog[0].folder_id].splice(foundDialog[1], 1);
           $rootScope.$broadcast('dialog_drop', {peerID: peerID});
         }
       }
@@ -1853,256 +1852,8 @@ export class AppMessagesManager {
     if(channelID && dialog.pts) {
       apiUpdatesManager.addChannelState(channelID, dialog.pts);
     }
-
-    /*if(Config.Modes.packed && !channelID && dialog.unread_count > 0 &&
-      this.maxSeenID && dialog.top_message > this.maxSeenID &&
-      message.pFlags.unread && !message.pFlags.out) {
-       var notifyPeer = message.flags & 16 ? message.from_id : peerID
-      NotificationsManager.getPeerMuted(notifyPeer).then((muted: any) => {
-        if(!muted) {
-          this.notifyAboutMessage(message);
-        }
-      }); 
-    }*/ // WARNING
   }
 
-  /*public handleNotifications() {
-    clearTimeout(this.notificationsHandlePromise);
-    this.notificationsHandlePromise = 0;
-
-    var timeout = $rootScope.idle.isIDLE /* && StatusManager.isOtherDeviceActive() * ? 30000 : 1000;
-    Object.keys(this.notificationsToHandle).forEach((key: any) => {
-      let notifyPeerToHandle = this.notificationsToHandle[key];
-      notifyPeerToHandle.isMutedPromise.then((muted: boolean) => {
-        var topMessage = notifyPeerToHandle.top_message
-        if(muted ||
-          !topMessage.pFlags.unread) {
-          return;
-        }
-
-        setTimeout(() => {
-          if(topMessage.pFlags.unread) {
-            this.notifyAboutMessage(topMessage, {
-              fwd_count: notifyPeerToHandle.fwd_count
-            });
-          }
-        }, timeout);
-      });
-    });
-
-    this.notificationsToHandle = {};
-  }*/
-
-  /*public notifyAboutMessage(message: any, options: any = {}) {
-    var peerID = this.getMessagePeer(message);
-    var peerString: string;
-    var notification: any = {};
-    var notificationMessage = '',
-      notificationPhoto;
-
-    var notifySettings: any = {}; //NotificationsManager.getNotifySettings(); // warning
-
-    if(message.fwdFromID && options.fwd_count) {
-      notificationMessage = options.fwd_count;// this.fwdMessagesPluralize(options.fwd_count); // warning
-    } else if(message.message) {
-      if(notifySettings.nopreview) {
-        notificationMessage = 'conversation_message_sent';
-      } else {
-        notificationMessage = RichTextProcessor.wrapPlainText(message.message);
-      }
-    } else if(message.media) {
-      var captionEmoji = '';
-      switch (message.media._) {
-        case 'messageMediaPhoto':
-          notificationMessage = _('conversation_media_photo_raw');
-          captionEmoji = 'рџ–ј';
-          break
-        case 'messageMediaDocument':
-          switch (message.media.document.type) {
-            case 'gif':
-              notificationMessage = _('conversation_media_gif_raw');
-              captionEmoji = 'рџЋ¬'
-              break
-            case 'sticker':
-              notificationMessage = _('conversation_media_sticker');
-              var stickerEmoji = message.media.document.stickerEmojiRaw;
-              if(stickerEmoji !== undefined) {
-                notificationMessage = RichTextProcessor.wrapPlainText(stickerEmoji) + ' ' + notificationMessage;
-              }
-              break;
-            case 'video':
-              notificationMessage = _('conversation_media_video_raw');
-              captionEmoji = 'рџ“№';
-              break;
-            case 'round':
-              notificationMessage = _('conversation_media_round_raw');
-              captionEmoji = 'рџ“№';
-              break;
-            case 'voice':
-            case 'audio':
-              notificationMessage = _('conversation_media_audio_raw');
-              break;
-            default:
-              if(message.media.document.file_name) {
-                notificationMessage = RichTextProcessor.wrapPlainText('рџ“Ћ ' + message.media.document.file_name);
-              } else {
-                notificationMessage = _('conversation_media_document_raw');
-                captionEmoji = 'рџ“Ћ';
-              }
-              break;
-          }
-          break;
-
-        case 'messageMediaGeo':
-        case 'messageMediaVenue':
-          notificationMessage = _('conversation_media_location_raw');
-          captionEmoji = 'рџ“Ќ';
-          break;
-        case 'messageMediaContact':
-          notificationMessage = _('conversation_media_contact_raw');
-          break;
-        case 'messageMediaGame':
-          notificationMessage = RichTextProcessor.wrapPlainText('рџЋ® ' + message.media.game.title);
-          break;
-        case 'messageMediaUnsupported':
-          notificationMessage = _('conversation_media_unsupported_raw');
-          break;
-        default:
-          notificationMessage = _('conversation_media_attachment_raw');
-          break;
-      }
-
-      if(captionEmoji != '' &&
-          message.media.caption) {
-        notificationMessage = RichTextProcessor.wrapPlainText(captionEmoji + ' ' + message.media.caption);
-      }
-    } else if(message._ == 'messageService') {
-      switch(message.action._) {
-        case 'messageActionChatCreate':
-          notificationMessage = _('conversation_group_created_raw');
-          break
-        case 'messageActionChatEditTitle':
-          notificationMessage = _('conversation_group_renamed_raw');
-          break
-        case 'messageActionChatEditPhoto':
-          notificationMessage = _('conversation_group_photo_updated_raw');
-          break
-        case 'messageActionChatDeletePhoto':
-          notificationMessage = _('conversation_group_photo_removed_raw');
-          break
-        case 'messageActionChatAddUser':
-        case 'messageActionChatAddUsers':
-          notificationMessage = _('conversation_invited_user_message_raw');
-          break
-        case 'messageActionChatReturn':
-          notificationMessage = _('conversation_returned_to_group_raw');
-          break
-        case 'messageActionChatJoined':
-          notificationMessage = _('conversation_joined_group_raw');
-          break
-        case 'messageActionChatDeleteUser':
-          notificationMessage = _('conversation_kicked_user_message_raw');
-          break
-        case 'messageActionChatLeave':
-          notificationMessage = _('conversation_left_group_raw');
-          break
-        case 'messageActionChatJoinedByLink':
-          notificationMessage = _('conversation_joined_by_link_raw');
-          break
-        case 'messageActionChannelCreate':
-          notificationMessage = _('conversation_created_channel_raw');
-          break
-        case 'messageActionChannelEditTitle':
-          notificationMessage = _('conversation_changed_channel_name_raw');
-          break
-        case 'messageActionChannelEditPhoto':
-          notificationMessage = _('conversation_changed_channel_photo_raw')
-          break
-        case 'messageActionChannelDeletePhoto':
-          notificationMessage = _('conversation_removed_channel_photo_raw')
-          break
-        case 'messageActionPinMessage':
-          notificationMessage = _('conversation_pinned_message_raw')
-          break
-        case 'messageActionGameScore':
-          notificationMessage = message.action.score;//this.gameScorePluralize(message.action.score); // warning
-          break
-
-        case 'messageActionPhoneCall':
-          switch(message.action.type) {
-            case 'out_missed':
-              notificationMessage = _('message_service_phonecall_canceled_raw')
-              break
-            case 'in_missed':
-              notificationMessage = _('message_service_phonecall_missed_raw')
-              break
-            case 'out_ok':
-              notificationMessage = _('message_service_phonecall_outgoing_raw')
-              break
-            case 'in_ok':
-              notificationMessage = _('message_service_phonecall_incoming_raw')
-              break
-          }
-          break
-      }
-    }
-
-    if(peerID > 0) {
-      var fromUser = appUsersManager.getUser(message.from_id);
-      var fromPhoto = appUsersManager.getUserPhoto(message.from_id);
-
-      notification.title = (fromUser.first_name || '') +
-        (fromUser.first_name && fromUser.last_name ? ' ' : '') +
-        (fromUser.last_name || '')
-      if(!notification.title) {
-        notification.title = fromUser.phone || _('conversation_unknown_user_raw')
-      }
-
-      notificationPhoto = fromPhoto
-
-      peerString = appUsersManager.getUserString(peerID)
-    } else {
-      notification.title = appChatsManager.getChat(-peerID).title || _('conversation_unknown_chat_raw')
-
-      if(message.from_id > 0) {
-        var fromUser = appUsersManager.getUser(message.from_id)
-        notification.title = (fromUser.first_name || fromUser.last_name || _('conversation_unknown_user_raw')) +
-        ' @ ' +
-        notification.title
-      }
-
-      notificationPhoto = appChatsManager.getChatPhoto(-peerID)
-
-      peerString = appChatsManager.getChatString(-peerID)
-    }
-
-    notification.title = RichTextProcessor.wrapPlainText(notification.title)
-
-    notification.onclick = function () {
-      $rootScope.$broadcast('history_focus', {
-        peerString: peerString,
-        messageID: message.flags & 16 ? message.mid : 0
-      })
-    }
-
-    notification.message = notificationMessage
-    notification.key = 'msg' + message.mid
-    notification.tag = peerString
-    notification.silent = message.pFlags.silent || false
-
-    if(notificationPhoto.location && !notificationPhoto.location.empty) {
-      apiFileManager.downloadSmallFile(notificationPhoto.location/* , notificationPhoto.size *)
-      .then((blob) => {
-        if(message.pFlags.unread) {
-          notification.image = blob
-          // NotificationsManager.notify(notification) // warning
-        }
-      })
-    } else {
-      // NotificationsManager.notify(notification) // warning
-    }
-  }*/
-
   public mergeReplyKeyboard(historyStorage: any, message: any) {
     // console.log('merge', message.mid, message.reply_markup, historyStorage.reply_markup)
     if(!message.reply_markup &&
@@ -2516,15 +2267,6 @@ export class AppMessagesManager {
       }
 
       return false;
-      /* if(foundDialog) {
-        // console.log('done read history', peerID)
-        foundDialog.unread_count = 0
-        $rootScope.$broadcast('dialog_unread', {peerID: peerID, count: 0})
-        $rootScope.$broadcast('messages_read')
-        if(historyStorage && historyStorage.history.length) {
-          foundDialog.read_inbox_max_id = historyStorage.history[0]
-        }
-      } */
     }).finally(() => {
       delete historyStorage.readPromise;
     });
@@ -2593,12 +2335,12 @@ export class AppMessagesManager {
   }
 
   public handleUpdate(update: any) {
-    console.log('AMM: handleUpdate:', update._);
+    //console.log('AMM: handleUpdate:', update._);
     switch(update._) {
       case 'updateMessageID': {
         var randomID = update.random_id;
         var pendingData = this.pendingByRandomID[randomID];
-        console.log('AMM updateMessageID:', update, pendingData);
+        //console.log('AMM updateMessageID:', update, pendingData);
         if(pendingData) {
           var peerID: number = pendingData[0];
           var tempID = pendingData[1];
@@ -2720,36 +2462,10 @@ export class AppMessagesManager {
           this.newDialogsHandlePromise = window.setTimeout(this.handleNewDialogs.bind(this), 0);
         }
 
-        /*if(inboxUnread &&
-            ($rootScope.selectedPeerID != peerID || $rootScope.idle.isIDLE)) {
-          var notifyPeer = message.flags & 16 ? message.from_id : peerID;
-          var notifyPeerToHandle = this.notificationsToHandle[notifyPeer];
-          if(notifyPeerToHandle === undefined) {
-            notifyPeerToHandle = this.notificationsToHandle[notifyPeer] = {
-              isMutedPromise: Promise.resolve()/* NotificationsManager.getPeerMuted(notifyPeer), // WARNING
-              fwd_count: 0,
-              from_id: 0
-            };
-          }
-
-          if(notifyPeerToHandle.from_id != message.from_id) {
-            notifyPeerToHandle.from_id = message.from_id;
-            notifyPeerToHandle.fwd_count = 0;
-          }
-          if(message.fwdFromID) {
-            notifyPeerToHandle.fwd_count++;
-          }
-
-          notifyPeerToHandle.top_message = message;
-
-          if(!this.notificationsHandlePromise) {
-            this.notificationsHandlePromise = window.setTimeout(this.handleNotifications.bind(this), 1000);
-          }
-        } */
         break;
       }
 
-      case 'updateDialogPinned': {
+      /* case 'updateDialogPinned': {
         var peerID = AppPeersManager.getPeerID(update.peer);
         var foundDialog = this.getDialogByPeerID(peerID);
 
@@ -2826,7 +2542,7 @@ export class AppMessagesManager {
           }
         })
         break;
-      }   
+      }    */
 
       case 'updateEditMessage':
       case 'updateEditChannelMessage': {
@@ -3092,37 +2808,41 @@ export class AppMessagesManager {
           delete this.historiesStorage[peerID];
           $rootScope.$broadcast('history_forbidden', peerID);
         }
+
         if(hasDialog != needDialog) {
           if(needDialog) {
             this.reloadConversation(-channelID);
           } else {
             if(foundDialog[0]) {
-              this.dialogsStorage.dialogs.splice(foundDialog[1], 1);
+              this.dialogsStorage.dialogs[foundDialog[0].folder_id].splice(foundDialog[1], 1);
               $rootScope.$broadcast('dialog_drop', {peerID: peerID});
             }
           }
         }
+
         break;
       }
 
       case 'updateChannelReload': {
-        var channelID: number = update.channel_id;
-        var peerID = -channelID;
-        var foundDialog = this.getDialogByPeerID(peerID);
+        let channelID: number = update.channel_id;
+        let peerID = -channelID;
+        let foundDialog = this.getDialogByPeerID(peerID);
         if(foundDialog[0]) {
-          this.dialogsStorage.dialogs.splice(foundDialog[1], 1);
+          this.dialogsStorage.dialogs[foundDialog[0].folder_id].splice(foundDialog[1], 1);
         }
+
         delete this.historiesStorage[peerID];
         this.reloadConversation(-channelID).then(() => {
           $rootScope.$broadcast('history_reload', peerID);
         });
+
         break;
       }
 
       case 'updateChannelMessageViews': {
-        var views = update.views;
-        var mid = appMessagesIDsManager.getFullMessageID(update.id, update.channel_id);
-        var message = this.getMessage(mid);
+        let views = update.views;
+        let mid = appMessagesIDsManager.getFullMessageID(update.id, update.channel_id);
+        let message = this.getMessage(mid);
         if(message && message.views && message.views < views) {
           message.views = views;
           $rootScope.$broadcast('message_views', {
@@ -3567,57 +3287,6 @@ export class AppMessagesManager {
     });
   }
 
-  /* public wrapForDialog(msgID: number, dialog?: any) {
-    var useCache = msgID && dialog !== undefined;
-    var unreadCount = dialog && dialog.unread_count;
-
-    if(useCache && this.messagesForDialogs[msgID] !== undefined) {
-      delete this.messagesForDialogs[msgID].typing;
-      this.messagesForDialogs[msgID].unreadCount = unreadCount;
-      return this.messagesForDialogs[msgID];
-    }
-
-    var message = copy(this.messagesStorage[msgID]);
-
-    if(!message || !message.to_id) {
-      if(dialog && dialog.peerID) {
-        message = {
-          _: 'message',
-          to_id: AppPeersManager.getOutputPeer(dialog.peerID),
-          deleted: true,
-          date: tsNow(true),
-          pFlags: {out: true}
-        }
-      } else {
-        return message;
-      }
-    }
-
-    message.peerID = this.getMessagePeer(message);
-    message.peerData = AppPeersManager.getPeer(message.peerID);
-    message.peerString = AppPeersManager.getPeerString(message.peerID);
-    message.unreadCount = unreadCount;
-    message.index = dialog && dialog.index || (message.date * 0x10000);
-    message.pinned = dialog && dialog.pFlags.pinned || false;
-
-    if(message._ == 'messageService' && message.action.user_id) {
-      message.action.user = appUsersManager.getUser(message.action.user_id);
-    }
-
-    if(message.message && message.message.length) {
-      message.richMessage = RichTextProcessor.wrapRichText(message.message.substr(0, 128), {noLinks: true, noLinebreaks: true});
-    }
-
-    message.dateText = message.date; //dateOrTimeFilter(message.date); // warning
-
-    if(useCache) {
-      message.draft = '';//DraftsManager.getServerDraft(message.peerID); // warning
-      this.messagesForDialogs[msgID] = message;
-    }
-
-    return message;
-  } */
-
   public fetchSingleMessages() {
     if(this.fetchSingleMessagesPromise) {
       return this.fetchSingleMessagesPromise;

src/lib/appManagers/appPeersManager.ts

@@ -37,7 +37,7 @@ const AppPeersManager = {
     return false;
   },
 
-  getPeerTitle: (peerID: number | any, plainText = false) => {
+  getPeerTitle: (peerID: number | any, plainText = false, onlyFirstName = false) => {
     let peer: any = {}; 
     if(!isObject(peerID)) {
       peer = AppPeersManager.getPeer(peerID);
@@ -53,6 +53,10 @@ const AppPeersManager = {
     } else {
       title = peer.title;
     }
+
+    if(onlyFirstName) {
+      title = title.split(' ')[0];
+    }
     
     return plainText ? title : RichTextProcessor.wrapEmojiText(title);
   },

src/lib/appManagers/appPhotosManager.ts

@@ -27,6 +27,12 @@ export class AppPhotosManager {
   private photos: {
     [id: string]: MTPhoto
   } = {};
+  private documentThumbsCache: {
+    [docID: string]: {
+      downloaded: number, 
+      url: string
+    }
+  } = {};
   public windowW = 0;
   public windowH = 0;
   
@@ -243,7 +249,7 @@ export class AppPhotosManager {
       element.setAttributeNS(null, 'width', '' + w);
       element.setAttributeNS(null, 'height', '' + h);
 
-      console.log('set dimensions to svg element:', element, w, h);
+      //console.log('set dimensions to svg element:', element, w, h);
       
       if(element.firstElementChild) {
         let imageSvg = element.firstElementChild as SVGImageElement;
@@ -268,7 +274,10 @@ export class AppPhotosManager {
       photoSize = this.choosePhotoSize(photo, fullWidth, fullHeight);
     }
 
-    if(photo.downloaded >= photoSize.size && photo.url) {
+    let isDocument = photo._ == 'document';
+    let cacheContext = isDocument ? (this.documentThumbsCache[photo.id] ?? (this.documentThumbsCache[photo.id] = {downloaded: -1, url: ''})) : photo;
+
+    if(cacheContext.downloaded >= photoSize.size && cacheContext.url) {
       return Promise.resolve();
     }
 
@@ -280,7 +289,7 @@ export class AppPhotosManager {
     // maybe it's a thumb
     let isPhoto = photoSize.size && photo.access_hash && photo.file_reference;
     let location = isPhoto ? {
-      _: photo._ == 'document' ? 'inputDocumentFileLocation' : 'inputPhotoFileLocation',
+      _: isDocument ? 'inputDocumentFileLocation' : 'inputPhotoFileLocation',
       id: photo.id,
       access_hash: photo.access_hash,
       file_reference: photo.file_reference,
@@ -296,20 +305,21 @@ export class AppPhotosManager {
       promise = apiFileManager.downloadSmallFile(location);
     }
 
-    if(typeof(photoID) === 'string') {
-      let photo = this.photos[photoID]; 
-      promise.then(blob => {
-        if(!photo.downloaded || photo.downloaded < blob.size) {
-          photo.downloaded = blob.size;
-          photo.url = URL.createObjectURL(blob);
+    promise.then(blob => {
+      if(!cacheContext.downloaded || cacheContext.downloaded < blob.size) {
+        cacheContext.downloaded = blob.size;
+        cacheContext.url = URL.createObjectURL(blob);
 
-          console.log('wrote photo:', photo, photoSize, blob);
-        }
-      });
-    }
+        //console.log('wrote photo:', photo, photoSize, cacheContext, blob);
+      }
+    });
 
     return promise;
   }
+
+  public getDocumentCachedThumb(docID: string) {
+    return this.documentThumbsCache[docID];
+  }
   
   public getPhoto(photoID: any): MTPhoto {
     return isObject(photoID) ? photoID : this.photos[photoID];

src/lib/appManagers/appSidebarLeft.ts

@@ -5,6 +5,16 @@ import appImManager from "./appImManager";
 //import apiManager from '../mtproto/apiManager';
 import apiManager from '../mtproto/mtprotoworker';
 import AppSearch, { SearchGroup } from "../../components/appSearch";
+import { horizontalMenu } from "../../components/misc";
+import appUsersManager from "./appUsersManager";
+import Scrollable from "../../components/scrollable_new";
+import appPhotosManager from "./appPhotosManager";
+import { appPeersManager } from "../services";
+
+const SLIDERITEMSIDS = {
+  archived: 1,
+  contacts: 2
+};
 
 class AppSidebarLeft {
   private sidebarEl = document.getElementById('column-left') as HTMLDivElement;
@@ -16,18 +26,36 @@ class AppSidebarLeft {
   private menuEl = this.toolsBtn.querySelector('.btn-menu');
   private savedBtn = this.menuEl.querySelector('.menu-saved');
   private archivedBtn = this.menuEl.querySelector('.menu-archive');
+  private contactsBtn = this.menuEl.querySelector('.menu-contacts');
   private logOutBtn = this.menuEl.querySelector('.menu-logout');
   public archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
 
   //private log = logger('SL');
 
-  private globalSearch = new AppSearch(this.searchContainer, this.searchInput, {
+  private searchGroups = {
     contacts: new SearchGroup('Contacts and Chats', 'contacts'),
     globalContacts: new SearchGroup('Global Search', 'contacts'),
-    messages: new SearchGroup('Global Search', 'messages')
-  });
+    messages: new SearchGroup('Global Search', 'messages'),
+    people: new SearchGroup('People', 'contacts', false, 'search-group-people'),
+    recent: new SearchGroup('Recent', 'contacts', false, 'search-group-recent')
+  };
+  private globalSearch = new AppSearch(this.searchContainer, this.searchInput, this.searchGroups);
+
+  private _selectTab: (id: number) => void;
+  private historyTabIDs: number[] = [];
+
+  private contactsList: HTMLUListElement;
+  private contactsScrollable: Scrollable;
+  private contactsPromise: Promise<void>;
+  private contactsInput: HTMLInputElement;
 
   constructor() {
+    let peopleContainer = document.createElement('div');
+    peopleContainer.classList.add('search-group-scrollable');
+    peopleContainer.append(this.searchGroups.people.list);
+    this.searchGroups.people.container.append(peopleContainer);
+    let peopleScrollable = new Scrollable(peopleContainer, 'x');
+
     this.savedBtn.addEventListener('click', (e) => {
       ///////this.log('savedbtn click');
       setTimeout(() => { // menu doesn't close if no timeout (lol)
@@ -37,11 +65,12 @@ class AppSidebarLeft {
     });
     
     this.archivedBtn.addEventListener('click', (e) => {
-      appDialogsManager.chatsArchivedContainer.classList.add('active');
-      this.toolsBtn.classList.remove('active');
-      this.backBtn.classList.add('active');
-      //this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
-      //this.toolsBtn.classList.add('tgico-back');
+      this.selectTab(SLIDERITEMSIDS.archived);
+    });
+
+    this.contactsBtn.addEventListener('click', (e) => {
+      this.openContacts();
+      this.selectTab(SLIDERITEMSIDS.contacts);
     });
 
     this.logOutBtn.addEventListener('click', (e) => {
@@ -51,6 +80,8 @@ class AppSidebarLeft {
     this.searchInput.addEventListener('focus', (e) => {
       this.toolsBtn.classList.remove('active');
       this.backBtn.classList.add('active');
+      this.searchContainer.classList.remove('hide');
+      void this.searchContainer.offsetWidth; // reflow
       this.searchContainer.classList.add('active');
       
       /* if(!this.globalSearch.searchInput.value) {
@@ -59,11 +90,10 @@ class AppSidebarLeft {
         }
       } */
 
-      this.searchInput.addEventListener('blur', (e) => {
+      false && this.searchInput.addEventListener('blur', (e) => {
         if(!this.searchInput.value) {
           this.toolsBtn.classList.add('active');
           this.backBtn.classList.remove('active');
-          this.searchContainer.classList.remove('active');
           this.backBtn.click();
         }
         
@@ -78,16 +108,129 @@ class AppSidebarLeft {
       this.toolsBtn.classList.add('active');
       this.backBtn.classList.remove('active');
       this.searchContainer.classList.remove('active');
-      this.globalSearch.reset();
+
+      setTimeout(() => {
+        this.searchContainer.classList.add('hide');
+        this.globalSearch.reset();
+
+        this.searchGroups.people.setActive();
+        //this.searchGroups.recent.setActive();
+      }, 150);
     });
 
     $rootScope.$on('dialogs_archived_unread', (e: CustomEvent) => {
       this.archivedCount.innerText = '' + e.detail.count;
     });
 
-    /* appUsersManager.getTopPeers().then(categories => {
-      this.log('got top categories:', categories);
-    }); */
+    this._selectTab = horizontalMenu(null, this.sidebarEl.querySelector('.sidebar-slider') as HTMLDivElement, null, null, 420);
+    this._selectTab(0);
+
+    Array.from(this.sidebarEl.querySelectorAll('.sidebar-close-button') as any as HTMLElement[]).forEach(el => {
+      el.addEventListener('click', () => {
+        console.log('sidebar-close-button click:', this.historyTabIDs);
+        let closingID = this.historyTabIDs.pop(); // pop current
+
+        // need to clear, and left 1 page for smooth slide
+        if(closingID == SLIDERITEMSIDS.contacts) {
+          let pageCount = appPhotosManager.windowH / 72 * 1.25 | 0;
+          (Array.from(this.contactsList.children) as HTMLElement[]).slice(pageCount).forEach(el => el.remove());
+          setTimeout(() => {
+            this.contactsList.innerHTML = '';
+          }, 420);
+        }
+
+        this._selectTab(this.historyTabIDs.pop() || 0);
+      });
+    });
+
+    appUsersManager.getTopPeers().then(categories => {
+      console.log('got top categories:', categories);
+
+      let category = categories[0];
+      if(!category || !category.peers) {
+        return;
+      }
+      
+      category.peers.forEach((topPeer: {
+        _: 'topPeer',
+        peer: any,
+        rating: number
+      }) => {
+        let peerID = appPeersManager.getPeerID(topPeer.peer);
+        let {dialog, dom} = appDialogsManager.addDialog(peerID, this.searchGroups.people.list, false, true, true);
+
+        this.searchGroups.people.setActive();
+      });
+    });
+
+    let contactsContainer = this.sidebarEl.querySelector('#contacts-container');
+    this.contactsInput = contactsContainer.querySelector('#contacts-search');
+    this.contactsList = contactsContainer.querySelector('#contacts') as HTMLUListElement;
+    appDialogsManager.setListClickListener(this.contactsList);
+    this.contactsScrollable = new Scrollable(this.contactsList.parentElement);
+
+    let prevValue = '';
+    this.contactsInput.addEventListener('input', () => {
+      let value = this.contactsInput.value;
+      if(prevValue != value) {
+        this.contactsList.innerHTML = '';
+        this.openContacts(prevValue = value);
+      }
+    });
+
+    // preload contacts
+    appUsersManager.getContacts();
+  }
+
+  public openContacts(query?: string) {
+    if(this.contactsPromise) return this.contactsPromise;
+    this.contactsScrollable.onScrolledBottom = null;
+
+    this.contactsPromise = appUsersManager.getContacts(query).then(contacts => {
+      this.contactsPromise = null;
+
+      if(this.historyTabIDs[this.historyTabIDs.length - 1] != SLIDERITEMSIDS.contacts) {
+        console.warn('user closed contacts before it\'s loaded');
+        return;
+      }
+
+      let sorted = contacts
+      .map(userID => {
+        let user = appUsersManager.getUser(userID);
+        let status = appUsersManager.getUserStatusForSort(user.status);
+
+        return {user, status};
+      })
+      .sort((a, b) => b.status - a.status);
+
+      let renderPage = () => {
+        let pageCount = appPhotosManager.windowH / 72 * 1.25 | 0;
+        let arr = sorted.splice(0, pageCount);
+
+        arr.forEach(({user}) => {
+          let {dialog, dom} = appDialogsManager.addDialog(user.id, this.contactsList, false);
+  
+          let status = appUsersManager.getUserStatusString(user.id);
+          dom.lastMessageSpan.innerHTML = status == 'online' ? `<i>${status}</i>` : status;
+        });
+
+        if(!sorted.length) renderPage = undefined;
+      };
+
+      renderPage();
+      this.contactsScrollable.onScrolledBottom = () => {
+        if(renderPage) {
+          renderPage();
+        } else {
+          this.contactsScrollable.onScrolledBottom = null;
+        }
+      };
+    });
+  }
+
+  public selectTab(id: number) {
+    this.historyTabIDs.push(id);
+    this._selectTab(id);
   }
 }
 

src/lib/appManagers/appSidebarRight.ts

@@ -59,12 +59,6 @@ class AppSidebarRight {
   private sharedMediaSelected: HTMLDivElement = null;
   
   private lazyLoadQueueSidebar = new LazyLoadQueue(5);
-  /* public minMediaID: {
-    [type: string]: number
-  } = {}; */
-  public cleared: {
-    [type: string]: boolean
-  } = {};
   
   public historiesStorage: {
     [peerID: number]: {
@@ -121,7 +115,7 @@ class AppSidebarRight {
         this.scroll.scrollTop -= this.profileTabs.offsetTop;
       }
 
-      this.log('setVirtualContainer', id, this.sharedMediaSelected);
+      this.log('setVirtualContainer', id, this.sharedMediaSelected, this.sharedMediaSelected.childElementCount);
       this.scroll.setVirtualContainer(this.sharedMediaSelected);
 
       if(this.prevTabID != -1 && !this.sharedMediaSelected.childElementCount) { // quick brown fix
@@ -132,7 +126,10 @@ class AppSidebarRight {
       this.prevTabID = id;
 
       this.scroll.onScroll();
-    }, this.onSidebarScroll.bind(this));
+    }, () => {
+      this.onSidebarScroll.bind(this);
+      this.scroll.onScroll();
+    });
     
     let sidebarCloseBtn = this.sidebarEl.querySelector('.sidebar-close-button') as HTMLButtonElement;
     sidebarCloseBtn.addEventListener('click', () => {
@@ -212,24 +209,18 @@ class AppSidebarRight {
 
     this.sidebarEl.classList.toggle('active');
   }
-  
-  public performSearchResult(ids: number[], type: string) {
-    let peerID = this.peerID;
 
-    let sharedMediaDiv: HTMLDivElement;
+  public filterMessagesByType(ids: number[], type: string) {
     let messages: any[] = [];
     for(let mid of ids) {
       let message = appMessagesManager.getMessage(mid);
       if(message.media) messages.push(message);
     }
-    
-    let elemsToAppend: HTMLElement[] = [];
-    
-    // https://core.telegram.org/type/MessagesFilter
+
+    let filtered: any[] = [];
+
     switch(type) {
       case 'inputMessagesFilterPhotoVideo': {
-        sharedMediaDiv = this.sharedMedia.contentMedia;
-        
         for(let message of messages) {
           let media = message.media.photo || message.media.document || (message.media.webpage && message.media.webpage.document);
           if(!media) {
@@ -241,14 +232,85 @@ class AppSidebarRight {
             //this.log('broken video', media);
             continue;
           }
+
+          filtered.push(message);
+        }
+        
+        break;
+      }
+
+      case 'inputMessagesFilterDocument': {
+        for(let message of messages) {
+          if(!message.media.document || message.media.document.type == 'voice' || message.media.document.type == 'audio') {
+            continue;
+          }
+          
+          let doc = message.media.document;
+          if(doc.attributes) {
+            if(doc.attributes.find((a: any) => a._ == "documentAttributeSticker")) {
+              continue;
+            }
+          }
+          
+          filtered.push(message);
+        }
+        break;
+      }
+
+      case 'inputMessagesFilterUrl': {
+        for(let message of messages) {
+          if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
+            continue;
+          }
           
+          filtered.push(message);
+        }
+        
+        break;
+      }
+
+      case 'inputMessagesFilterMusic': {
+        for(let message of messages) {
+          if(!message.media.document || message.media.document.type != 'audio') {
+            continue;
+          }
+
+          filtered.push(message);
+        }
+
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    return filtered;
+  }
+  
+  public performSearchResult(messages: any[], type: string) {
+    let peerID = this.peerID;
+
+    let sharedMediaDiv: HTMLDivElement;
+    
+    let elemsToAppend: HTMLElement[] = [];
+    
+    // https://core.telegram.org/type/MessagesFilter
+    switch(type) {
+      case 'inputMessagesFilterPhotoVideo': {
+        sharedMediaDiv = this.sharedMedia.contentMedia;
+        
+        for(let message of messages) {
+          let media = message.media.photo || message.media.document || (message.media.webpage && message.media.webpage.document);
+
           let div = document.createElement('div');
           //console.log(message, photo);
           
           let isPhoto = media._ == 'photo';
           
           let photo = isPhoto ? appPhotosManager.getPhoto(media.id) : null;
-          if(!photo || !photo.downloaded) {
+          let isDownloaded = (photo && photo.downloaded) || appPhotosManager.getDocumentCachedThumb(media.id);
+          if(!isDownloaded) {
             //this.log('inputMessagesFilterPhotoVideo', message, media, photo, div);
             
             let sizes = media.sizes || media.thumbs;
@@ -260,33 +322,39 @@ class AppSidebarRight {
           }
           
           //this.log('inputMessagesFilterPhotoVideo', message, media);
+
+          if(!isPhoto) {
+            let span = document.createElement('span');
+            span.classList.add('video-time');
+            div.append(span);
+
+            if(media.type != 'gif') {
+              span.innerText = (media.duration + '').toHHMMSS(false);
+
+              /* let spanPlay = document.createElement('span');
+              spanPlay.classList.add('video-play', 'tgico-largeplay', 'btn-circle', 'position-center');
+              div.append(spanPlay); */
+            } else {
+              span.innerText = 'GIF';
+            }
+          }
           
           let load = () => appPhotosManager.preloadPhoto(isPhoto ? media.id : media, appPhotosManager.choosePhotoSize(media, 200, 200))
-          .then((blob) => {
+          .then(() => {
             if($rootScope.selectedPeerID != peerID) {
               this.log.warn('peer changed');
               return;
             }
 
-            if(photo && photo.url) {
-              renderImageFromUrl(div, photo.url);
-            } else {
-              let url = URL.createObjectURL(blob);
-              this.urlsToRevoke.push(url);
-              
-              let img = new Image();
-              img.src = url;
-              img.onload = () => {
-                div.style.backgroundImage = 'url(' + url + ')';
-              };
+            let url = (photo && photo.url) || appPhotosManager.getDocumentCachedThumb(media.id).url;
+            if(url) {
+              renderImageFromUrl(div, url);
             }
-            
-            //div.style.backgroundImage = 'url(' + url + ')';
           });
           
           div.dataset.mid = '' + message.mid;
           
-          if(photo && photo.downloaded) load();
+          if(isDownloaded) load();
           else this.lazyLoadQueueSidebar.push({div, load});
           
           this.lastSharedMediaDiv.append(div);
@@ -310,19 +378,6 @@ class AppSidebarRight {
         sharedMediaDiv = this.sharedMedia.contentDocuments;
         
         for(let message of messages) {
-          if(!message.media.document || message.media.document.type == 'voice' || message.media.document.type == 'audio') {
-            continue;
-          }
-          
-          let doc = message.media.document;
-          if(doc.attributes) {
-            if(doc.attributes.find((a: any) => a._ == "documentAttributeSticker")) {
-              continue;
-            }
-          }
-          
-          //this.log('come back down to my knees', message);
-          
           let div = wrapDocument(message.media.document, true);
           elemsToAppend.push(div);
         }
@@ -333,10 +388,6 @@ class AppSidebarRight {
         sharedMediaDiv = this.sharedMedia.contentLinks;
         
         for(let message of messages) {
-          if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
-            continue;
-          }
-          
           let webpage = message.media.webpage;
           let div = document.createElement('div');
           
@@ -391,10 +442,6 @@ class AppSidebarRight {
         sharedMediaDiv = this.sharedMedia.contentAudio;
         
         for(let message of messages) {
-          if(!message.media.document || message.media.document.type != 'audio') {
-            continue;
-          }
-
           let div = wrapAudio(message.media.document, true);
           elemsToAppend.push(div);
         }
@@ -412,8 +459,10 @@ class AppSidebarRight {
     
     if(elemsToAppend.length) {
       //window.requestAnimationFrame(() => {
-      elemsToAppend.forEach(el => this.scroll.append(el, false));
+      //elemsToAppend.forEach(el => this.scroll.append(el, false));
       //});
+
+      sharedMediaDiv.append(...elemsToAppend);
     }
     
     if(sharedMediaDiv) {
@@ -439,6 +488,8 @@ class AppSidebarRight {
     let typesToLoad = single ? [this.sharedMediaType] : this.sharedMediaTypes;
     typesToLoad = typesToLoad.filter(type => !this.loadedAllMedia[type]);
     if(!typesToLoad.length) return;
+
+    let loadCount = (appPhotosManager.windowH / 130 | 0) * 3; // that's good for all types
     
     let historyStorage = this.historiesStorage[peerID] ?? (this.historiesStorage[peerID] = {});
 
@@ -447,19 +498,35 @@ class AppSidebarRight {
       
       let history = historyStorage[type] ?? (historyStorage[type] = []);
 
-      let loadCount = (appPhotosManager.windowH / 130 | 0) * 3;
-
       // render from cache
-      if(history.length && this.usedFromHistory[type] < history.length && this.cleared[type]) {
-        let ids = history.slice(this.usedFromHistory[type], this.usedFromHistory[type] + loadCount);
-        this.log('loadSidebarMedia: will render from cache', this.usedFromHistory[type], history, ids, loadCount);
-        this.usedFromHistory[type] += ids.length;
-        this.performSearchResult(ids, type);
+      if(history.length && this.usedFromHistory[type] < history.length) {
+        let messages: any[] = [];
+        let used = this.usedFromHistory[type];
+
+        do {
+          let ids = history.slice(used, used + loadCount);
+          this.log('loadSidebarMedia: will render from cache', used, history, ids, loadCount);
+          used += ids.length;
+
+          messages.push(...this.filterMessagesByType(ids, type));
+        } while(messages.length < loadCount && used < history.length);
+        
+        // если перебор
+        if(messages.length > loadCount) {
+          let diff = messages.length - loadCount;
+          messages = messages.slice(0, messages.length - diff);
+          used -= diff;
+        }
+
+        this.usedFromHistory[type] = used;
+        if(messages.length) {
+          this.performSearchResult(messages, type);
+        }
+
         return Promise.resolve();
       }
       
       // заливать новую картинку сюда только после полной отправки!
-      //let maxID = this.minMediaID[type] || 0;
       let maxID = history[history.length - 1] || 0;
       
       let ids = !maxID && appMessagesManager.historiesStorage[peerID] 
@@ -474,7 +541,7 @@ class AppSidebarRight {
         ids = ids.concat(value.history);
         history.push(...ids);
         
-        this.log('loadSidebarMedia: search house of glass', type, value, ids, this.cleared);
+        this.log('loadSidebarMedia: search house of glass', type, value, ids);
 
         if($rootScope.selectedPeerID != peerID) {
           this.log.warn('peer changed');
@@ -484,14 +551,11 @@ class AppSidebarRight {
         if(value.history.length < loadCount) {
           this.loadedAllMedia[type] = true;
         }
-        
-        if(this.cleared[type]) {
-          //ids = history;
-          delete this.cleared[type];
-        }
+
+        this.usedFromHistory[type] = history.length;
 
         if(ids.length) {
-          this.performSearchResult(ids, type);
+          this.performSearchResult(this.filterMessagesByType(ids, type), type);
         }
       }, (err) => {
         this.log.error('load error:', err);
@@ -550,8 +614,6 @@ class AppSidebarRight {
     this.urlsToRevoke.length = 0;
     
     this.sharedMediaTypes.forEach(type => {
-      //this.minMediaID[type] = 0;
-      this.cleared[type] = true;
       this.usedFromHistory[type] = 0;
     });
     

src/lib/appManagers/appUsersManager.ts

@@ -5,14 +5,41 @@ import appChatsManager from "./appChatsManager";
 import apiManager from '../mtproto/mtprotoworker';
 import serverTimeManager from "../mtproto/serverTimeManager";
 
+export type User = {
+  _: 'user',
+  access_hash: string,
+  first_name: string,
+  last_name: string,
+  username: string,
+  flags: number,
+  id: number,
+  phone: string,
+  photo: any,
+  
+  status?: Partial<{
+    _: 'userStatusOffline' | 'userStatusOnline' | 'userStatusRecently' | 'userStatusLastWeek' | 'userStatusLastMonth' | 'userStatusEmpty',
+    wasStatus: any,
+    was_online: number,
+    expires: number
+  }>,
+  
+  initials?: string,
+  num?: number,
+  pFlags: Partial<{verified: boolean, support: boolean, self: boolean, bot: boolean, min: number, deleted: boolean}>,
+  rFirstName?: string,
+  rFullName?: string,
+  sortName?: string,
+  sortStatus?: number,
+};
+
 export class AppUsersManager {
-  public users: any = {};
-  public usernames: any = {};
-  public userAccess: {[x: number]: string} = {};
+  public users: {[userID: number]: User} = {};
+  public usernames: {[username: string]: number} = {};
+  public userAccess: {[userID: number]: string} = {};
   public cachedPhotoLocations: any = {};
   public contactsIndex = SearchIndexManager.createIndex();
-  public contactsFillPromise: any;
-  public contactsList: any;
+  public contactsFillPromise: Promise<number[]>;
+  public contactsList: number[];
   public myID: number;
 
   constructor() {
@@ -80,28 +107,27 @@ export class AppUsersManager {
     });
   }
 
-  /* public fillContacts () {
+  public fillContacts() {
     if(this.contactsFillPromise) {
       return this.contactsFillPromise;
     }
 
-    return this.contactsFillPromise = MTProto.apiManager.invokeApi('contacts.getContacts', {
+    return this.contactsFillPromise = apiManager.invokeApi('contacts.getContacts', {
       hash: 0
     }).then((result: any) => {
-      var userID, searchText;
-      var i;
+      var userID;
       this.contactsList = [];
       this.saveApiUsers(result.users);
 
-      for(var i = 0; i < result.contacts.length; i++) {
-        userID = result.contacts[i].user_id
+      result.contacts.forEach((contact: any) => {
+        userID = contact.user_id;
         this.contactsList.push(userID);
-        //SearchIndexManager.indexObject(userID, getUserSearchText(userID), contactsIndex); WARNING
-      }
+        SearchIndexManager.indexObject(userID, this.getUserSearchText(userID), this.contactsIndex);
+      });
 
       return this.contactsList;
-    })
-  } */
+    });
+  }
 
   public getUserSearchText(id: number) {
     var user = this.users[id];
@@ -120,32 +146,28 @@ export class AppUsersManager {
             ' ' + serviceText;
   }
 
-  /* function getContacts (query) {
-      return fillContacts().then(function (contactsList) {
-        if (angular.isString(query) && query.length) {
-          var results = SearchIndexManager.search(query, contactsIndex)
-          var filteredContactsList = []
+  public getContacts(query?: string) {
+    return this.fillContacts().then(contactsList => {
+      if(query) {
+        const results: any = SearchIndexManager.search(query, this.contactsIndex);
+        const filteredContactsList = contactsList.filter(id => !!results[id]);
 
-          for (var i = 0; i < contactsList.length; i++) {
-            if (results[contactsList[i]]) {
-              filteredContactsList.push(contactsList[i])
-            }
-          }
-          contactsList = filteredContactsList
+        contactsList = filteredContactsList;
+      }
+
+      contactsList.sort((userID1: number, userID2: number) => {
+        const sortName1 = (this.users[userID1] || {}).sortName || '';
+        const sortName2 = (this.users[userID2] || {}).sortName || '';
+        if(sortName1 == sortName2) {
+          return 0;
         }
 
-        contactsList.sort(function (userID1, userID2) {
-          var sortName1 = (users[userID1] || {}.sortName) || ''
-          var sortName2 = (users[userID2] || {}.sortName) || ''
-          if (sortName1 == sortName2) {
-            return 0
-          }
-          return sortName1 > sortName2 ? 1 : -1
-        })
+        return sortName1 > sortName2 ? 1 : -1;
+      });
 
-        return contactsList
-      })
-  } */
+      return contactsList;
+    });
+  }
 
   public resolveUsername(username: string) {
     return this.usernames[username] || 0;
@@ -235,7 +257,7 @@ export class AppUsersManager {
     this.userAccess[id] = accessHash;
   }
 
-  public getUserStatusForSort(status: any) {
+  public getUserStatusForSort(status: User['status']) {
     if(status) {
       var expires = status.expires || status.was_online;
       if(expires) {
@@ -255,17 +277,77 @@ export class AppUsersManager {
     return 0;
   }
 
-  public getUser(id: any) {
+  public getUser(id: any): User {
     if(isObject(id)) {
       return id;
     }
-    return this.users[id] || {id: id, deleted: true, num: 1, access_hash: this.userAccess[id]};
+
+    return this.users[id] || {id: id, pFlags: {deleted: true}, num: 1, access_hash: this.userAccess[id]} as User;
   }
 
   public getSelf() {
     return this.getUser(this.myID);
   }
 
+  public getUserStatusString(userID: number) {
+    if(this.isBot(userID)) {
+      return 'bot';
+    }
+
+    let user = this.getUser(userID);
+    if(!user || !user.status) {
+      return '';
+    }
+    
+    let str = '';
+    switch(user.status._) {
+      case 'userStatusRecently': {
+        str = 'last seen recently';
+        break;
+      }
+
+      case 'userStatusLastWeek': {
+        str = 'last seen last week';
+        break;
+      }
+
+      case 'userStatusLastMonth': {
+        str = 'last seen last month';
+        break;
+      }
+      
+      case 'userStatusOffline': {
+        str = 'last seen ';
+      
+        let date = user.status.was_online;
+        let now = Date.now() / 1000;
+        
+        if((now - date) < 60) {
+          str += ' just now';
+        } else if((now - date) < 3600) {
+          let c = (now - date) / 60 | 0;
+          str += c + ' ' + (c == 1 ? 'minute' : 'minutes') + ' ago';
+        } else if(now - date < 86400) {
+          let c = (now - date) / 3600 | 0;
+          str += c + ' ' + (c == 1 ? 'hour' : 'hours') + ' ago';
+        } else {
+          let d = new Date(date * 1000);
+          str += ('0' + d.getDate()).slice(-2) + '.' + ('0' + (d.getMonth() + 1)).slice(-2) + ' at ' + 
+          ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
+        }
+        
+        break;
+      }
+
+      case 'userStatusOnline': {
+        str = 'online';
+        break;
+      }
+    }
+
+    return str;
+  }
+
   public isBot(id: number) {
     return this.users[id] && this.users[id].pFlags.bot;
   }
@@ -345,12 +427,6 @@ export class AppUsersManager {
     }
   }
 
-  public wrapForFull(id: number) {
-    var user = this.getUser(id);
-
-    return user;
-  }
-
   /* function importContact (phone, firstName, lastName) {
       return MtpApiManager.invokeApi('contacts.importContacts', {
         contacts: [{
@@ -426,7 +502,7 @@ export class AppUsersManager {
       flags: 1,
       correspondents: true,
       offset: 0,
-      limit: 5,
+      limit: 30,
       hash: 0,
     }).then((peers: any) => {
       //console.log(peers);
@@ -477,7 +553,7 @@ export class AppUsersManager {
 
     var user = this.users[userID];
     if(user) {
-      var status = offline ? {
+      var status: any = offline ? {
         _: 'userStatusOffline',
         was_online: tsNow(true)
       } : {

src/lib/bin_utils.ts

@@ -66,7 +66,7 @@ export function bytesFromHex(hexString: string) {
   return bytes;
 }
 
-export function bytesToBase64(bytes: number[]) {
+export function bytesToBase64(bytes: number[] | Uint8Array) {
   var mod3
   var result = ''
 

src/lib/lottieLoader.ts

@@ -20,7 +20,7 @@ class LottieLoader {
   public loadLottie() {
     if(this.loaded) return this.loaded;
 
-    this.loaded = new Promise((resolve, reject) => {
+    return this.loaded = new Promise((resolve, reject) => {
       (window as any).lottieLoaded = () => {
         console.log('lottie loaded');
         this.lottie = (window as any).lottie;

src/lib/mtproto/apiManager.ts

@@ -59,6 +59,10 @@ export class ApiManager {
     $rootScope.$broadcast('user_auth', fullUserAuth);
     /// #endif
   }
+
+  public setBaseDcID(dcID: number) {
+    this.baseDcID = dcID;
+  }
   
   // mtpLogOut
   public async logOut() {
@@ -68,9 +72,7 @@ export class ApiManager {
     
     for(let dcID = 1; dcID <= 5; dcID++) {
       storageKeys.push(prefix + dcID + '_auth_key');
-      //storageKeys.push('dc' + dcID + '_auth_keyID');
-      //storageKeys.push('t_dc' + dcID + '_auth_key');
-      //storageKeys.push('t_dc' + dcID + '_auth_keyID');
+      //storageKeys.push(prefix + dcID + '_auth_keyID');
     }
     
     // WebPushApiManager.forceUnsubscribe(); // WARNING
@@ -95,9 +97,9 @@ export class ApiManager {
       error.handled = true;
       this.telegramMeNotify(false);
       this.mtpClearStorage();
-    }).then(() => {
+    })/* .then(() => {
       location.pathname = '/';
-    });
+    }) */;
   }
   
   public mtpClearStorage() {

src/lib/mtproto/mtproto.worker.js

@@ -26,15 +26,26 @@ ctx.onmessage = function(e) {
         ctx.postMessage({taskID: taskID, result: result});
       });
 
-    default:
-      return apiManager[e.data.task].apply(apiManager, e.data.args).then(result => {
-        //console.log(e.data.task + ' result:', result, taskID);
-        ctx.postMessage({taskID: taskID, result: result});
-      }).catch(err => {
-        //console.error(e.data.task + ' err:', err, taskID);
+    default: {
+      try {
+        let result = apiManager[e.data.task].apply(apiManager, e.data.args);
+        if(result instanceof Promise) {
+          result.then(result => {
+            //console.log(e.data.task + ' result:', result, taskID);
+            ctx.postMessage({taskID: taskID, result: result});
+          }).catch(err => {
+            //console.error(e.data.task + ' err:', err, taskID);
+            ctx.postMessage({taskID: taskID, error: err});
+          });
+        } else {
+          ctx.postMessage({taskID: taskID, result: result});
+        }
+      } catch(err) {
         ctx.postMessage({taskID: taskID, error: err});
-      });
+      }
+
       //throw new Error('Unknown task: ' + e.data.task);
+    }
   }
 }
 

src/lib/mtproto/mtprotoworker.ts

@@ -125,6 +125,10 @@ class ApiManagerProxy extends CryptoWorkerMethods {
     return this.performTaskWorker('invokeApi', method, params, options);
   }
 
+  public setBaseDcID(dcID: number) {
+    return this.performTaskWorker('setBaseDcID', dcID);
+  }
+
   public setUserAuth(userAuth: {id: number}) {
     $rootScope.$broadcast('user_auth', userAuth);
     return this.performTaskWorker('setUserAuth', userAuth);

src/lib/mtproto/serverTimeManager.ts

@@ -8,7 +8,7 @@ export class ServerTimeManager {
 
   public midnightOffset = this.midnightNoOffset - (Math.floor(+this.midnightOffseted / 1000));
 
-  public serverTimeOffset = 0;
+  public serverTimeOffset = 0; // in seconds
   public timeParams = {
     midnightOffset: this.midnightOffset,
     serverTimeOffset: this.serverTimeOffset

src/pages/pageSignQR.ts

@@ -0,0 +1,158 @@
+//import apiManager from '../lib/mtproto/apiManager';
+import apiManager from '../lib/mtproto/mtprotoworker';
+import Page from './page';
+import pageIm from './pageIm';
+import pagePassword from './pagePassword';
+import { App } from '../lib/mtproto/mtproto_config';
+import { bytesToBase64, bytesCmp } from '../lib/bin_utils';
+import serverTimeManager from '../lib/mtproto/serverTimeManager';
+import { User } from '../lib/appManagers/appUsersManager';
+
+/* interface Authorization {
+  _: 'authorization',
+  flags: number,
+  pFlags: Partial<{current: true, official_app: true, password_pending: true}>,
+  hash: number[],
+  device_model: string,
+  platform: string,
+  system_version: string,
+  api_id: number,
+  app_name: string,
+  app_version: string,
+  date_created: number,
+  date_active: number,
+  ip: string,
+  country: string,
+  region: string
+}; */
+
+interface AuthAuthorization {
+  flags: number,
+  pFlags: Partial<{tmp_sessions: number}>,
+  user: User
+}
+
+interface LoginToken {
+  _: 'auth.loginToken',
+  expires: number,
+  token: Uint8Array
+};
+
+interface LoginTokenMigrateTo {
+  _: 'auth.loginTokenMigrateTo',
+  dc_id: number,
+  token: Uint8Array
+};
+
+interface LoginTokenSuccess {
+  _: 'auth.loginTokenSuccess',
+  authorization: AuthAuthorization
+};
+
+let onFirstMount = async() => {
+  const pageElement = page.pageEl;
+  const imageDiv = pageElement.querySelector('.auth-image') as HTMLDivElement;
+  
+  const results = await Promise.all([
+    import('qr-code-styling' as any)
+  ]);
+  const QRCodeStyling = results[0].default;
+
+  let stop = false;
+  document.addEventListener('user_auth', () => {
+    stop = true;
+  }, {once: true});
+  
+  let options: {dcID?: number} = {};
+  let prevToken: Uint8Array;
+
+  do {
+    if(stop) {
+      break;
+    }
+
+    try {
+      let loginToken: LoginToken | LoginTokenMigrateTo | LoginTokenSuccess = await apiManager.invokeApi('auth.exportLoginToken', {
+        api_id: App.id,
+        api_hash: App.hash,
+        except_ids: []
+      }/* , options */);
+  
+      if(loginToken._ == 'auth.loginTokenMigrateTo') {
+        if(!options.dcID) {
+          options.dcID = loginToken.dc_id;
+          apiManager.setBaseDcID(loginToken.dc_id);
+          //continue;
+        }
+        
+        loginToken = await apiManager.invokeApi('auth.importLoginToken', {
+          token: loginToken.token
+        }, options) as LoginToken;
+      }
+
+      if(loginToken._ == 'auth.loginTokenSuccess') {
+        let authorization = loginToken.authorization;
+        apiManager.setUserAuth({
+          id: authorization.user.id
+        });
+        pageIm.mount();
+        break;
+      }
+
+      /* // to base64
+      var decoder = new TextDecoder('utf8');
+      var b64encoded = btoa(String.fromCharCode.apply(null, [...loginToken.token])); */
+
+      if(!prevToken || !bytesCmp(prevToken, loginToken.token)) {
+        prevToken = loginToken.token;
+
+        let encoded = bytesToBase64(loginToken.token);
+        let url = "tg://login?token=" + encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/\=+$/, "");
+  
+        imageDiv.innerHTML = '';
+        const qrCode = new QRCodeStyling({
+          width: 166,
+          height: 166,
+          data: url,
+          image: "assets/img/logo_padded.svg",
+          dotsOptions: {
+            color: "#000000",
+            type: "rounded"
+          },
+          imageOptions: {
+            imageSize: .75
+          },
+          backgroundOptions: {
+            color: "#ffffff"
+          },
+          qrOptions: {
+            errorCorrectionLevel: "L"
+          }
+        });
+        qrCode.append(imageDiv);
+      }
+
+      let timestamp = Date.now() / 1000;
+      let diff = loginToken.expires - timestamp - serverTimeManager.serverTimeOffset;
+
+      await new Promise((resolve, reject) => setTimeout(resolve, diff > 5 ? 5e3 : 1e3 * diff | 0));
+    } catch(err) {
+      switch(err.type) {
+        case 'SESSION_PASSWORD_NEEDED':
+          console.warn('pageSignQR: SESSION_PASSWORD_NEEDED');
+          err.handled = true;
+          pagePassword.mount();
+          break;
+        default:
+          console.error('pageSignQR: default error:', err);
+          break;
+      }
+    }
+  } while(true);
+};
+
+const page = new Page('page-signQR', true, () => {
+  onFirstMount();
+});
+
+export default page;

src/pages/pageSignUp.ts

@@ -5,7 +5,6 @@ import pageIm from './pageIm';
 import apiManager from '../lib/mtproto/mtprotoworker';
 import apiFileManager from '../lib/mtproto/apiFileManager';
 import Page from './page';
-import { calcImageInBox } from '../lib/utils';
 
 let authCode: {
   'phone_number': string,

src/scss/components/_global.scss

@@ -32,13 +32,6 @@ a {
   align-items: center;
 }
 
-
-// classic clearfix
-.clearfix {
-  clear: both;
-}
-
-
 // Z-levels
 .z-depth-0 {
   box-shadow: none !important;
@@ -82,54 +75,6 @@ a {
   0 11px 15px -7px rgba(0,0,0,0.2);
 }
 
-.hoverable {
-  transition: box-shadow .25s;
-  
-  &:hover {
-    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  }
-}
-
-// Icon Styles
-
-i {
-  line-height: inherit;
-  
-  &.left {
-    float: left;
-    margin-right: 15px;
-  }
-  &.right {
-    float: right;
-    margin-left: 15px;
-  }
-  &.tiny {
-    font-size: 1rem;
-  }
-  &.small {
-    font-size: 2rem;
-  }
-  &.medium {
-    font-size: 4rem;
-  }
-  &.large {
-    font-size: 6rem;
-  }
-}
-
-/*********************
-Transition Classes
-**********************/
-
-ul.staggered-list li {
-  opacity: 0;
-}
-
-.fade-in {
-  opacity: 0;
-  transform-origin: 0 50%;
-}
-
 /*******************
 Utility Classes
 *******************/
@@ -138,29 +83,11 @@ Utility Classes
   display: none !important;
 }
 
-// Text Align
-.left-align {
-  text-align: left;
-}
-.right-align {
-  text-align: right
-}
-.center, .center-align {
-  text-align: center;
-}
-
-.left {
-  float: left !important;
-}
-.right {
-  float: right !important;
-}
-
 // No Text Select
 .no-select {
   user-select: none;
 }
 
-.circle {
-  border-radius: 50%;
+.center-align {
+  text-align: center;
 }

src/scss/components/_typography.scss

@@ -1,39 +1,16 @@
-
 a {
   text-decoration: none;
 }
 
-html{
+html {
   line-height: 1.5;
 
-  /* @media only screen and (min-width: 0) {
-    font-size: 14px;
-  }
-
-  @media only screen and (min-width: $medium-screen) {
-    font-size: 14.5px;
-  }
-
-  @media only screen and (min-width: $large-screen) {
-    font-size: 15px;
-  } */
-
   font-weight: normal;
 }
 h1, h2, h3, h4, h5, h6 {
-	font-weight: 400;
 	line-height: 1.3;
 }
 
-// Header Styles
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-/* h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
-h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
-h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
-h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
-h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
-h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;} */
-
 // Text Styles
 em { font-style: italic; }
 strong { font-weight: 500; }

src/scss/partials/_chat.scss

@@ -1,4 +1,5 @@
 $chat-max-width: 696px;
+$time-background: rgba(0, 0, 0, 0.35);
 
 #bubble-contextmenu > div {
 	padding: 0 84px 0 16px;
@@ -75,6 +76,10 @@ $chat-max-width: 696px;
 
 		.chat-more-button {
 			margin-left: 8px;
+
+			.btn-menu {
+				top: calc(100% + 7px);
+			}
 		}
 		
 		.chat-info {
@@ -134,7 +139,7 @@ $chat-max-width: 696px;
 			/* position: absolute;
 			bottom: 0;
 			left: 0; */
-			position: relative;
+			//position: relative; // неизвестно зачем это было
 
 			//display: flex; // for end
 			//flex-direction: unset;
@@ -163,6 +168,10 @@ $chat-max-width: 696px;
 				width: 50px;
 				height: 50px;
 			}
+
+			&-container .preloader-circular {
+				background-color: $time-background;
+			}
 		}
 		
 		#bubbles-inner {
@@ -185,6 +194,8 @@ $chat-max-width: 696px;
 			}
 
 			&.is-channel:not(.is-chat) {
+				padding-bottom: 55px;
+
 				.bubble__container {
 					max-width: 100%;
 				}
@@ -250,9 +261,11 @@ $chat-max-width: 696px;
 		
 		.bubble {
 			padding-top: 5px;
-			display: grid;
+			/* display: grid;
 			grid-template-columns: 1fr $chat-max-width 1fr;
-			grid-row-gap: 0px;
+			grid-row-gap: 0px; */
+			max-width: $chat-max-width;
+			margin: 0 auto;
 
 			&.is-date {
 				position: -webkit-sticky;
@@ -268,10 +281,10 @@ $chat-max-width: 696px;
 				}
 			}
 			
-			&:before, &:after {
+			/* &:before, &:after {
 				content: " ";
 				width: 100%;
-			}
+			} */
 
 			&__container {
 				//min-width: 60px;
@@ -303,7 +316,8 @@ $chat-max-width: 696px;
 				padding: 5px 0;
 
 				.bubble__container {
-					justify-self: center;
+					/* justify-self: center; */
+					margin: 0 auto;
 					max-width: 100%;
 				}
 			}
@@ -536,6 +550,8 @@ $chat-max-width: 696px;
 					height: auto;
 					max-width: 100%;
 					cursor: pointer;
+					opacity: 1;
+					transition: opacity .3s ease;
 				}
 
 				.download {
@@ -550,15 +566,15 @@ $chat-max-width: 696px;
 					align-items: center;
 
 					span {
-						width: 54px;
-						height: 54px;
-						line-height: 54px;
-						background-color: rgba(0, 0, 0, .7);
-						border-radius: 50%;
+						background-color: $time-background;
 						font-size: 23px;
 						color: #fff;
 						text-align: center;
 					}
+
+					& ~ .video-play {
+						display: none;
+					}
 				}
 			}
 			
@@ -894,7 +910,7 @@ $chat-max-width: 696px;
 					bottom: .1rem;
 					right: .2rem;
 					border-radius: 12px;
-					background-color: rgba(0, 0, 0, .4);
+					background-color: $time-background;
 					padding: 0 .2rem;
 					z-index: 2;
 					
@@ -948,6 +964,32 @@ $chat-max-width: 696px;
 				}
 			}
 
+			span.video-time {
+				position: absolute;
+				top: 3px;
+				left: 3px;
+				border-radius: 12px;
+				background-color: $time-background;
+				padding: 0px 6px 0px 6px;
+				z-index: 2;
+				font-size: 12px;
+				color: white;
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+				user-select: none;
+				-webkit-user-select: none;
+			}
+
+			span.video-play {
+				background-color: $time-background;
+				color: #fff;
+				text-align: center;
+				font-size: 34px;
+				line-height: 60px;
+				cursor: pointer;
+			}
+
 			&.is-edited.channel-post .time {
 				min-width: calc(5rem + 46px);
 			}
@@ -998,6 +1040,10 @@ $chat-max-width: 696px;
 					}
 				}
 			}
+
+			&:not(.webpage):not(.is-album):not(.sticker):not(.round) .attachment, .album-item {
+				background-color: #000;
+			}
 			
 			&.hide-name:not(.is-reply):not(.is-message-empty) .message {
 				//padding-top: .2675rem;
@@ -1141,6 +1187,22 @@ $chat-max-width: 696px;
 			.audio-subtitle, .contact-number, .audio-time {
 				color: #707579 !important;
 			}
+
+			.message.audio-message {
+				.media-progress {
+					&__seek {
+						background: rgba(193, 207, 220, 0.39);
+					}
+
+					&__filled {
+						background-color: #0089ff;
+					}
+
+					input::-webkit-slider-thumb { 
+						background: #63a2e3; 
+					}
+				}
+			}
 		}
 		
 		.is-out {

src/scss/partials/_chatlist.scss

@@ -262,46 +262,57 @@
       font-weight: 500;
     }
 
-    &:not(.search-group-messages) {
-      .user-avatar {
-        width: 48px;
-        height: 48px;
-      }
-    }
-
     &-contacts {
       padding: 16px 0 7px;
 
-      li {
-        //margin-bottom: 2px;
-        padding-bottom: 4px;
-        padding-top: 2px;
-      }
-
-      li > .rp {
-        padding: 9px 11.5px !important;
-        height: 66px;
-      }
-
       .search-group__name {
         padding-bottom: 17px;
       }
+    }
+  }
+}
 
-      .user-caption {
-        padding: 1px 3.5px 1px 13px;
-      }
+// use together like class="chats-container contacts-container"
+.contacts-container, .search-group-contacts {
+  .user-avatar {
+    width: 48px;
+    height: 48px;
+  }
 
-      .user-title, b, .user-last-message b {
-        font-weight: normal;
-      }
+  li {
+    //margin-bottom: 2px;
+    padding-bottom: 4px;
+    padding-top: 2px;
+  }
 
-      p {
-        height: 24px;
-      }
+  li > .rp {
+    padding: 9px 11.5px !important;
+    height: 66px;
+  }
 
-      span.user-last-message {
-        font-size: 14px;
-      }
-    }
+  .user-caption {
+    padding: 1px 3.5px 1px 13px;
+  }
+
+  .user-title, b, .user-last-message b {
+    font-weight: normal;
+  }
+
+  p {
+    height: 24px;
+  }
+
+  span.user-last-message {
+    font-size: 14px;
+  }
+}
+
+#contacts-container {
+  .sidebar-header {
+    margin-bottom: 1px;
+  }
+  
+  .input-search {
+    margin-left: 16px;
   }
 }

src/scss/partials/_emojiDropdown.scss

@@ -49,42 +49,57 @@
 	.tabs-container {
 		/* width: 300%; */
 		height: 100%;
+
+		.category-title {
+			position: sticky;
+			top: 0;
+			font-size: .85rem;
+			color: $color-gray;
+			background: linear-gradient(to bottom,#fff 0,rgba(255,255,255,.9) 60%,rgba(255,255,255,0) 100%);
+			z-index: 2;
+			padding: .53333rem 6PX .66667rem;
+			width: 100%;
+		}
 		
 		.emoji-category {
-			font-size: 2.25rem;
-			line-height: 2.25rem;
 			padding-top: 1px;
+			position: relative;
 
-			display: grid;
-			grid-column-gap: 2.44px;
-			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+			.category-items {
+				display: grid;
+				grid-column-gap: 2.44px;
+				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+				font-size: 2.25rem;
+				line-height: 2.25rem;
+
+				> * {
+					margin: 0;
+					padding: 4px 4px;
+					line-height: inherit;
+					border-radius: 8px;
+					cursor: pointer;
+					user-select: none;
+					-webkit-user-select: none;
+					
+					width: 42px;
+					height: 42px;
+					
+					.emoji {
+						width: 100%;
+						height: 100%;
+					}
+					
+					&:hover {
+						background-color: rgba(112, 117, 121, 0.08);
+					}
+				}
+			}
 
 			&:first-child {
 				padding-top: 5px;
 			}
-			
-			> * {
-				margin: 0;
-				padding: 4px 4px;
-				line-height: inherit;
-				border-radius: 8px;
-				cursor: pointer;
-				user-select: none;
-				-webkit-user-select: none;
-				
-				width: 42px;
-    		height: 42px;
-				
-				.emoji {
-					width: 100%;
-					height: 100%;
-				}
-				
-				&:hover {
-					background-color: rgba(112, 117, 121, 0.08);
-				}
-			}
-			
+
 			/* &::after {
 				content: "";
 				flex: auto;
@@ -92,58 +107,53 @@
 		}
 		
 		.sticker-category {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			flex-wrap: wrap;
+			position: relative;
 			
 			&::after {
 				content: "";
 				flex: auto;
 			}
-		}
-		
-		.sticker-category {
+
 			/* &.not-full::after {
 				content: "";
 				flex: auto;
 			} */
 
-			> div {
+			.category-items {
 				width: 100%;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				flex-wrap: wrap;
-			}
-			
-			> div > div {
-				width: 80px;
-				height: 80px;
-				display: flex;
-				align-items: center;
-				/* overflow: hidden; */
-				cursor: pointer;
-				user-select: none;
-				-webkit-user-select: none;
-				/* margin: 3.5px 0;
-				margin-right: 6.25px; */
-				padding: 1px 2.5px;
-				justify-content: center;
-				border-radius: 12px;
-				padding: 0;
-				
-				&:hover {
-					background-color: rgba(112, 117, 121, 0.08);
-				}
-				
-				/* &:nth-child(5n+5) {
-					margin-right: 0;
-				} */
-				
-				> * {
-					max-width: 100%;
-					max-height: 100%;
+
+				> div {
+					width: 80px;
+					height: 80px;
+					display: flex;
+					align-items: center;
+					/* overflow: hidden; */
+					cursor: pointer;
+					user-select: none;
+					-webkit-user-select: none;
+					/* margin: 3.5px 0;
+					margin-right: 6.25px; */
+					padding: 1px 2.5px;
+					justify-content: center;
+					border-radius: 12px;
+					padding: 0;
+					
+					&:hover {
+						background-color: rgba(112, 117, 121, 0.08);
+					}
+					
+					/* &:nth-child(5n+5) {
+						margin-right: 0;
+					} */
+					
+					> * {
+						max-width: 100%;
+						max-height: 100%;
+					}
 				}
 			}
 		}

src/scss/partials/_ico.scss

@@ -4,3 +4,4 @@ $tgico-font-path: "../../assets/fonts" !default;
 $tgico-check: "\e900";
 $tgico-checks: "\e95a";
 $tgico-sending: "\e919";
+$tgico-close: "\e943";

src/scss/partials/_leftSidebar.scss

@@ -8,6 +8,10 @@
     position: relative;
   }
 
+  .sidebar-slider {
+    height: 100%;
+  }
+
   .sidebar-header__btn-container {
     position: relative;
     width: 39.75px;
@@ -67,5 +71,70 @@
     }
   }
 
-  
+  .search-group-people {
+    ul {
+      display: flex;
+      flex-direction: row;
+      padding-left: 4px;
+      margin-top: -1px;
+      padding-bottom: 1px;
+    }
+
+    li {
+      margin-right: 5px;
+      padding: 0;
+    }
+
+    .rp {
+      height: 98px;
+      max-height: 98px;
+      border-radius: 10px;
+      max-width: 78px;
+      width: 78px;
+      align-items: center;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      padding: 12px 0 0 !important;
+      overflow: hidden;
+      margin: 0;
+    }
+    
+    .user-avatar {
+      width: 54px;
+      height: 54px;
+    }
+
+    .user-caption {
+      max-width: 65px;
+      padding: 2px 0px 9px;
+      font-size: 12px;
+    }
+
+    .user-title {
+      max-width: unset;
+    }
+
+    .search-group-scrollable {
+      position: relative;
+      
+      > .scrollable {
+        position: relative;
+      }
+    }
+  }
+}
+
+#search-container {
+  transition: 150ms ease-in-out opacity,150ms ease-in-out transform;
+  transform: scale(1.1, 1.1);
+  opacity: 0;
+  display: flex;
+
+  &.active {
+    transform: scale(1, 1);
+    transform-origin: center;
+    opacity: 1;
+  }
 }

src/scss/partials/_mediaViewer.scss

@@ -122,12 +122,12 @@
     .media-viewer-caption {
       flex: 1;
       text-align: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
       color: $darkgrey;
       transition: .2s;
+      max-width: 50vw;
+      word-break: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:hover {
         color: #fff;

src/scss/partials/_rightSIdebar.scss

@@ -36,6 +36,14 @@
       flex: 1 1 auto;
     }
   }
+
+  .sidebar-search {
+    display: none;
+
+    &.active {
+      display: flex;
+    }
+  }
 }
 
 .profile {
@@ -201,7 +209,7 @@
         width: 100%;
         display: flex;
         flex-direction: column;
-        padding-top: 4px;
+        padding: 4px 7.5px 7.5px;
   
         > div {
           display: grid;
@@ -220,9 +228,8 @@
             background-position: center center;
   
             display: flex;
-            //background-color: #000;
-            justify-content: center;
-            align-items: center;
+            background-color: #000;
+            position: relative;
     
             &::before {
               content: "";
@@ -233,6 +240,28 @@
             }
           }
         }
+
+        span.video-time {
+          position: relative;
+          left: 5px;
+          top: 4px;
+          height: 18px;
+          border-radius: 4px;
+          background-color: $time-background;
+          padding: 0px 6px 0px 5px;
+          z-index: 2;
+          font-size: 12px;
+          color: white;
+        }
+
+        /* span.video-play {
+          background-color: $time-background;
+          color: #fff;
+          text-align: center;
+          font-size: 34px;
+          line-height: 60px;
+          cursor: pointer;
+        } */
       }
   
       #content-docs {

src/scss/partials/_selector.scss

@@ -0,0 +1,151 @@
+@keyframes scaleIn {
+  0% {
+    transform: scale(.2);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.selector {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-search-container {
+    flex: 1 1 auto;
+    position: relative;
+    max-height: 132px;
+
+    .scrollable {
+      position: relative;
+    }
+  }
+
+  &-search {
+    padding: 0 24px 0 24px;
+    display: flex;
+    flex-flow: wrap;
+
+    input {
+      border: none;
+      padding: 7px 0px 19px 0px;
+      outline: none;
+      flex: 1 1 auto;
+    }
+  }
+
+  &-user {
+    color: #000;
+    background-color: rgba(112, 117, 121, 0.08);
+    font-size: 16px;
+    padding: 0 17px 0px 0px;
+    line-height: 31px;
+    margin-left: -4px;
+    margin-right: 12px;
+    height: 32px;
+    margin-bottom: 7px;
+    border-radius: 24px;
+    user-select: none;
+    flex: 0 0 auto;
+    transition: .2s all;
+
+    &:hover {
+      background-color: #fae2e3;
+      cursor: pointer;
+
+      .user-avatar:after {
+        opacity: 1;
+      }
+    }
+    
+    &.scale-in {
+      animation: scaleIn .15s ease forwards;
+    }
+
+    &.scale-out {
+      animation: scaleIn .1s ease forwards;
+      animation-direction: reverse;
+    }
+
+    .user-avatar {
+      height: 32px !important;
+      width: 32px !important;
+      float: left;
+      margin-right: 8px;
+      overflow: hidden;
+      font-size: 14px;
+
+      &:after {
+        position: absolute;
+        content: $tgico-close;
+        left: 0;
+        top: 0;
+        background-color: #df3f40;
+        height: 100%;
+        width: 100%;
+        z-index: 2;
+        font-size: 23px;
+        line-height: 32px;
+        opacity: 0;
+        transition: .2s opacity;
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  .chats-container {
+    height: 100%;
+    flex: 1 1 auto;
+  }
+
+  ul {
+    .user-avatar {
+      height: 48px;
+      width: 48px;
+    }
+
+    .user-caption {
+      padding: 1px 3.5px 1px 12px;
+    }
+
+    p {
+      height: 24px;
+    }
+
+    span.user-title {
+      font-weight: normal;
+    }
+    
+    span.user-last-message {
+        font-size: 14px;
+    }
+
+    li {
+      padding-bottom: 0;
+
+      > .rp {
+        margin: 0px 9px 0px 8px;
+        padding: 12px 8.5px;
+      }
+    }
+  }
+
+  hr {
+    width: 100%;
+    height: 1px;
+    border: none;
+    background-color: #DADCE0;
+    margin: 0 0 8px;
+  }
+
+  [type="checkbox"] + span {
+    padding-left: calc(9px + 2.25rem);
+  }
+
+  .checkbox {
+    margin-top: 11px;
+    padding-left: 11px;
+  }
+}

src/scss/partials/_slider.scss

@@ -0,0 +1,79 @@
+.menu-horizontal {
+  color: $darkgrey;
+  border-bottom: 1px solid $lightgrey;
+  position: relative;
+
+  ul {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+  }
+  
+  li {
+    display: inline-block;
+    padding: .75rem 1rem;
+    cursor: pointer;
+    text-align: center;
+    flex: 1;
+    user-select: none;
+    font-size: 1rem;
+    font-weight: 500;
+
+    &.active {
+      color: $blue;
+    }
+  }
+
+  &__stripe {
+    position: absolute;
+    background: $blue;
+    //left: 0;
+    left: -2px;
+    transition: .3s transform, .3s width;
+    //transition: .3s transform;
+    bottom: -1px;
+    height: 4px;
+    width: 1px; // need if using transform
+    transform: scaleX(1) translateX(0px);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    z-index: 1;
+  }
+}
+
+.tabs-container {
+  min-width: 100%;
+  width: 100%;
+  display: flex;
+  /* overflow: hidden; */
+  overflow-x: hidden;
+
+  &.animated {
+    transition: .3s transform;
+  }
+  
+  > div {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    /* transition: .2s all; */
+    display: none;
+
+    &.active {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    > div:not(.scroll-padding) {
+      width: 100%;
+      max-width: 100%;
+      /* overflow: hidden; */
+      position: relative;
+    }
+  }
+}

src/scss/style.scss

@@ -42,6 +42,8 @@ $large-screen: 1680px;
 @import "partials/ckin";
 @import "partials/emojiDropdown";
 @import "partials/scrollable";
+@import "partials/slider";
+@import "partials/selector";
 
 @import "partials/popups/popup";
 @import "partials/popups/editAvatar";
@@ -169,6 +171,19 @@ input {
   }
 }
 
+.btn-corner {
+  position: absolute !important;
+  bottom: 20px;
+  right: 20px;
+  transition: .2s ease;
+  transform: translateY(calc(100% + 20px));
+  z-index: 3;
+
+  &.is-visible {
+    transform: translateY(0px);
+  }
+}
+
 .danger {
   color: $color-error!important;
 }
@@ -263,6 +278,16 @@ input {
   }
 }
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .user-avatar {
   color: #fff;
   width: 54px;
@@ -286,6 +311,10 @@ input {
     height: 100%;
     border-radius: inherit;
     user-select: none;
+
+    &.fade-in {
+      animation: fadeIn .2s ease forwards;
+    }
   }
   
   &[class*=" tgico-"] {
@@ -624,6 +653,23 @@ input {
   }
 }
 
+/* .page-signQR {
+  .auth-image {
+    position: relative;
+
+    .sign-logo {
+      width: 36px;
+      height: 36px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      border-radius: 50%;
+    }
+  }
+} */
+
 .page-signUp {
   .auth-image {
     border-radius: 50%;
@@ -837,6 +883,7 @@ input {
   
   &:not(:checked) + span:after {
     background-color: transparent;
+    border-color: #8d969c;
   }
   
   &:checked + span:after {
@@ -997,19 +1044,19 @@ input:focus, button:focus {
   }
 }
 
-/* // scaling... any units
-$width: 100px;
-
-.loader {
-  position: relative;
-  margin: 0 auto;
-  width: $width;
-  &:before {
-    content: '';
-    display: block;
-    padding-top: 100%;
+.btn-primary.btn-circle {
+  .preloader-circular {
+    height: calc(100% - 20px);
+    right: auto;
+    left: auto;
+    margin: 0;
+    top: 10px;
+    
+    .preloader-path {
+      stroke: #fff;
+    }
   }
-} */
+}
 
 .preloader {
   &-circular {
@@ -1164,6 +1211,7 @@ img.emoji {
   border-radius: 50%;
   height: 54px;
   width: 54px;
+  line-height: 54px;
   
   path {
     fill: white;
@@ -1271,91 +1319,17 @@ img.emoji {
   user-select: text;
 }
 
-.menu-horizontal {
-  color: $darkgrey;
-  border-bottom: 1px solid $lightgrey;
-  position: relative;
-
-  ul {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-  }
-  
-  li {
-    display: inline-block;
-    padding: .75rem 1rem;
-    cursor: pointer;
-    text-align: center;
-    flex: 1;
-    user-select: none;
-    font-size: 1rem;
-    font-weight: 500;
-
-    &.active {
-      color: $blue;
-    }
-  }
-
-  &__stripe {
-    position: absolute;
-    background: $blue;
-    //left: 0;
-    left: -2px;
-    transition: .3s transform, .3s width;
-    //transition: .3s transform;
-    bottom: -1px;
-    height: 4px;
-    width: 1px; // need if using transform
-    transform: scaleX(1) translateX(0px);
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    z-index: 1;
-  }
-}
-
-.tabs-container {
-  min-width: 100%;
-  width: 100%;
-  display: flex;
-  /* overflow: hidden; */
-  overflow-x: hidden;
-
-  &.animated {
-    transition: .3s transform;
-  }
-  
-  > div {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    /* transition: .2s all; */
-    display: none;
-
-    &.active {
-      display: flex;
-      flex-direction: column;
-    }
-    
-    > div:not(.scroll-padding) {
-      width: 100%;
-      padding: 7.5px;
-      max-width: 100%;
-      overflow: hidden;
-      position: relative;
-    }
-  }
-}
-
 .justify-start {
   justify-content: flex-start!important;
 }
 
+.position-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .page-chats {
   /* display: grid; */
   /* grid-template-columns: 25% 50%; */
@@ -1396,8 +1370,7 @@ img.emoji {
     }
   }
 
-  #search-container, #chats-archived-container, .sidebar-search {
-    display: none;
+  #search-container, .sidebar-search {
     flex-direction: column;
     width: 100%;
     max-height: 100%;
@@ -1408,10 +1381,6 @@ img.emoji {
     top: 0;
     z-index: 3;
     background: #fff;
-
-    &.active {
-      display: flex;
-    }
   }
 
   @media (min-width: $large-screen) {