fix dialogs sort & stickers scroll & message paddings

src/components/misc.ts

@@ -563,7 +563,7 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
     console.error('wrong doc for wrapSticker!', doc, div);
   }
   
-  console.log('wrap sticker', doc);
+  //console.log('wrap sticker', doc);
   
   if(doc.thumbs && !div.firstElementChild) {
     let thumb = doc.thumbs[0];

src/components/pageIm.ts

@@ -39,7 +39,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
   });
   (tabs.children[0] as HTMLLIElement).click(); // set media
 
-  let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: HTMLDivElement) => {
+  let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable) => {
     menu.addEventListener('click', function(e) {
       let target = e.target as HTMLLIElement;
       target = findUpTag(target, 'LI');
@@ -47,15 +47,17 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
       let index = whichChild(target);
       let y = heights[index - 1/* 2 */] || 0; // 10 == padding .scrollable
 
-      //console.log(target, index, heights, y, scroll);
+      console.log('emoticonsMenuOnClick', index, y, scroll.container.scrollHeight, scroll);
 
-      //scroll.scroll({y: y + 'px'});
+      scroll.onAddedBottom = () => { // привет, костыль, давно не виделись!
-      scroll.scrollTop = y;
+        scroll.container.scrollTop = y;
+        scroll.onAddedBottom = () => {};
+      };
+      scroll.container.scrollTop = y;
     });
   };
 
   let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement) => {
-    let pos = scroll.scroll();
     let y = scroll.scrollTop;
 
     //console.log(heights, y);
@@ -182,7 +184,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
     });
     //emojiScroll.setVirtualContainer(emojiScroll.container);
 
-    emoticonsMenuOnClick(menu, heights, emojiScroll.container);
+    emoticonsMenuOnClick(menu, heights, emojiScroll);
   }
 
   let stickersInit = () => {
@@ -354,7 +356,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
     });
     stickersScroll.setVirtualContainer(stickersDiv);
 
-    emoticonsMenuOnClick(menu, heights, stickersScroll.container);
+    emoticonsMenuOnClick(menu, heights, stickersScroll);
 
     stickersInit = null;
   };
@@ -431,6 +433,7 @@ export default () => import('../lib/services').then(services => {
   document.addEventListener('dialogs_multiupdate', (e: CustomEvent) => {
     let dialogs = e.detail;
 
+    let performed = 0;
     for(let id in dialogs) {
       let dialog = dialogs[id];
 
@@ -442,9 +445,13 @@ export default () => import('../lib/services').then(services => {
       } 
 
       appDialogsManager.setLastMessage(dialog);
+
+      ++performed;
     }
 
-    appDialogsManager.sortDom();
+    if(performed) {
+      appDialogsManager.sortDom();
+    }
   });
 
   // @ts-ignore

src/components/scrollable.ts

@@ -27,6 +27,8 @@ export default class Scrollable {
 
   public splitUp: HTMLElement;
 
+  public onAddedBottom: () => void = null;
+
   /* public topObserver: IntersectionObserver;
   public isTopIntersecting: boolean;
   public bottomObserver: IntersectionObserver;
@@ -129,14 +131,9 @@ export default class Scrollable {
 
   public setVirtualContainer(el: HTMLElement) {
     this.splitUp = el;
-    this.hiddenElements = {
+    
-      up: [],
+    this.hiddenElements.up.length = this.hiddenElements.down.length = 0;
-      down: []
+    this.paddings.up = this.paddings.down = 0;
-    };
-    this.paddings = {
-      up: 0,
-      down: 0
-    };
 
     if(this.paddingTopDiv.parentElement) {
       this.paddingTopDiv.style.height = '';
@@ -235,6 +232,8 @@ export default class Scrollable {
         this.paddings.down -= child.scrollHeight;
         this.paddingBottomDiv.style.height = this.paddings.down + 'px';
       }
+
+      if(this.onAddedBottom) this.onAddedBottom();
     }
 
     //console.log('onscroll', container, firstVisible, lastVisible, hiddenElements);

src/lib/appManagers/appDialogsManager.ts

@@ -134,7 +134,6 @@ export class AppDialogsManager {
   }
 
   public sortDom() {
-    console.log('sortDom');
     //return;
 
     let dialogs = appMessagesManager.dialogsStorage.dialogs;
@@ -142,11 +141,11 @@ export class AppDialogsManager {
     let inUpper: HTMLLIElement[] = [];
     let inBottom: HTMLLIElement[] = [];
 
-    let lastPinnedIndex = -1;
+    let pinnedDialogs = [];
     for(let i = 0; i < dialogs.length; ++i) {
       let dialog = dialogs[i];
       if(!dialog.pFlags.pinned) break;
-      lastPinnedIndex = i;
+      pinnedDialogs.push(dialog);
     }
 
     let sorted = dialogs
@@ -158,28 +157,45 @@ export class AppDialogsManager {
       return timeB - timeA;
     });
 
-    if(lastPinnedIndex != -1) {
+    sorted = pinnedDialogs.concat(sorted);
-      sorted = dialogs.slice(0, lastPinnedIndex + 1).concat(sorted);
-    }
 
-    let inViewportIndex = -1;
+    //console.log('sortDom', sorted, this.chatsHidden, this.chatsHidden.up, this.chatsHidden.down);
-    sorted.forEach((d: any) => {
+
+    let hiddenLength: number = this.chatsHidden.up.length;
+    let inViewportLength = this.chatList.childElementCount;
+
+    this.chatList.innerHTML = '';
+
+    let inViewportIndex = 0;
+    sorted.forEach((d: any, idx) => {
       let dom = this.getDialogDom(d.peerID);
       if(!dom) return;
 
-      if(this.chatsHidden.up.find((d: HTMLLIElement) => d === dom.listEl)) {
+      if(inUpper.length < hiddenLength) {
+        inUpper.push(dom.listEl);
+      } else if(inViewportIndex <= inViewportLength - 1) {
+        this.chatList.append(dom.listEl);
+        ++inViewportIndex;
+        //this.chatList.insertBefore(dom.listEl, this.chatList.children[inViewportIndex++]);
+      } else {
+        inBottom.push(dom.listEl);
+      }
+
+      /* if(this.chatsHidden.up.find((d: HTMLLIElement) => d === dom.listEl)) {
         inUpper.push(dom.listEl);
       } else if(isElementInViewport(dom.listEl)) {
         this.chatList.insertBefore(dom.listEl, this.chatList.children[++inViewportIndex]);
       } else if(this.chatsHidden.down.find((d: HTMLLIElement) => d === dom.listEl)) {
         inBottom.push(dom.listEl);
       } else {
-        //console.warn('found no dom!', dom, d);
+        //console.warn('sortDom found no dom!', dom, d);
-      }
+      } */
 
       //this.chatList.append(dom.listEl);
     });
 
+    console.log('sortDom', sorted.length, inUpper.length, this.chatList.childElementCount, inBottom.length);
+
     this.chatsHidden.up = inUpper;
     this.chatsHidden.down = inBottom;
   }

src/lib/appManagers/appImManager.ts

@@ -578,9 +578,11 @@ export class AppImManager {
 
     this.titleEl.innerText = appSidebarRight.profileElements.name.innerText = dom.titleSpan.innerText;
 
-    this.topbar.style.display = this.chatInput.style.display = '';
+    this.topbar.style.display = '';
     appSidebarRight.toggleSidebar(true);
 
+    this.chatInput.style.display = appPeersManager.isChannel(peerID) && !appPeersManager.isMegagroup(peerID) ? 'none' : '';
+
     return Promise.all([
       this.getHistory(lastMsgID).then(() => {
         this.log('setPeer removing preloader');
@@ -1012,11 +1014,13 @@ export class AppImManager {
           }
         } */
 
-        if(!bubble.classList.contains('sticker')) {
+        if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name');
           nameDiv.innerText = title;
           bubble.append(nameDiv);
+        } else {
+          bubble.classList.add('hide-name');
         }
   
         //bubble.prepend(avatarDiv);

src/lib/appManagers/appSidebarLeft.ts

@@ -49,8 +49,8 @@ class AppSidebarLeft {
     this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5);
     
     this.scroll = new Scrollable(this.chatsContainer as HTMLDivElement);
-    appDialogsManager.chatsHidden = this.scroll.hiddenElements;
     this.scroll.setVirtualContainer(appDialogsManager.chatList);
+    appDialogsManager.chatsHidden = this.scroll.hiddenElements;
     
     this.scroll.container.addEventListener('scroll', this.onChatsScroll.bind(this));
     
@@ -171,7 +171,7 @@ class AppSidebarLeft {
   }
   
   public onChatsScroll() {
-    //this.log(this.scroll);
+    this.log(this.scroll);
     if(this.scroll.hiddenElements.down.length > 0/*  || 1 == 1 */) return;
     
     if(!this.loadDialogsPromise) {

src/lib/appManagers/appSidebarRight.ts

@@ -297,6 +297,10 @@ class AppSidebarRight {
     this.loadSidebarMediaPromises = {};
     this.lastSharedMediaDiv = document.createElement('div');
 
+    if(this.sharedMediaSelected) {
+      this.sidebarScroll.setVirtualContainer(this.sharedMediaSelected);
+    }
+
     this.profileContentEl.parentElement.scrollTop = 0;
     this.profileElements.bio.style.display = 'none';
     this.profileElements.phone.style.display = 'none';

src/lib/mtproto/apiFileManager.ts

@@ -179,7 +179,7 @@ export class ApiFileManager {
       return Promise.reject({type: 'BROWSER_BLOB_NOT_SUPPORTED'});
     }
 
-    this.log('downloadSmallFile', location, options);
+    //this.log('downloadSmallFile', location, options);
 
     let dcID = options.dcID || location.dc_id;
     let mimeType = options.mimeType || 'image/jpeg';
@@ -210,7 +210,7 @@ export class ApiFileManager {
           limit: 1024 * 1024
         };
 
-        this.log('next small promise', params);
+        //this.log('next small promise', params);
         return apiManager.invokeApi('upload.getFile', params, {
           dcID: dcID,
           fileDownload: true,

src/scss/partials/_chat.scss

@@ -215,7 +215,8 @@
 				width: min-content;
 
 				.box.web {
-					width: min-content;
+					width: max-content;
+					/* width: min-content; */
 					max-width: 100%;
 				}
 			}
@@ -427,9 +428,8 @@
 			}
 
 			.message {
-        font-size: 1rem;
+				font-size: 1rem;
 				padding: 0 .6rem .2675rem .6rem;
-				padding-top: 0;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				max-width: 100%;
@@ -501,11 +501,6 @@
 				cursor: pointer;
 			}
 
-			&.forwarded/*  .message-empty + */ .attachment {
-				border-top-left-radius: 0;
-				border-top-right-radius: 0;
-			}
-
 			> .name {
 				padding: .2675rem .6rem 0 .6rem;
 				font-weight: 500;
@@ -519,6 +514,22 @@
 				white-space: nowrap;
 			}
 
+			&:not(.webpage) {
+				&.photo, &.video {
+					.name {
+						padding-bottom: .2675rem;
+					}
+	
+					.message:not(.message-empty) {
+						padding-top: .2675rem;
+					}
+				}
+			}
+
+			&.hide-name .message:not(.message-empty) {
+				padding-top: .2675rem;
+			}
+
 			&:not(.sticker):not(.emoji-big):last-child:after {
 				position: absolute;
 				bottom: -1px;
@@ -594,7 +605,13 @@
 
         &:first-child:last-child {
           border-radius: 12px 12px 12px 0px;
-        }
+				}
+
+				&.forwarded .attachment,
+				&:not(.hide-name):not(.sticker) .attachment {
+					border-top-left-radius: 0;
+					border-top-right-radius: 0;
+				}
 			}
 		}
 
@@ -674,7 +691,12 @@
 
         &:first-child:last-child {
 					border-radius: 12px 12px 0px 12px;
-        }
+				}
+				
+				&.forwarded .attachment {
+					border-top-left-radius: 0;
+					border-top-right-radius: 0;
+				}
 			}
 			
 			.user-avatar {

src/scss/partials/_chatlist.scss

@@ -100,7 +100,8 @@
     height: 1.7rem; // hot-fix
     
     span:not(.tgico-pinnedchat):not(.emoji):last-child {
-      font-size: .9rem;
+      /* font-size: .9rem; */
+      font-size: .8rem;
     }
   }
 
@@ -121,7 +122,7 @@
     max-width: 100%;
     max-height: 100%;
     overflow: hidden;
-    color: $placeholder-color;
+    color: $color-gray;
   }
 
   .user-title {

src/scss/style.scss

@@ -1304,7 +1304,7 @@ div.scrollable::-webkit-scrollbar-thumb {
       flex-direction: column;
     }
     
-    > div {
+    > div:not(.scroll-padding) {
       width: 100%;
       padding: 7.5px;
       max-width: 100%;