Fix rendering new message with active selection

Fix jumping by peer name
Fix flickering date bubble

src/components/chat/bubbles.ts

@@ -846,19 +846,28 @@ export default class ChatBubbles {
     const timestamps = Object.keys(this.dateMessages).map(k => +k).sort((a, b) => b - a);
     let lastVisible: HTMLElement;
 
+    // if(this.chatInner.classList.contains('is-scrolling')) {
       const {scrollTop} = this.scrollable.container;
       const isOverflown = scrollTop > 0;
-    if(isOverflown) for(const timestamp of timestamps) {
+      if(isOverflown) {
+        for(const timestamp of timestamps) {
           const dateMessage = this.dateMessages[timestamp];
-      if(getVisibleRect(dateMessage.container, this.scrollable.container)) {
+          const visibleRect = getVisibleRect(dateMessage.container, this.scrollable.container);
+          if(visibleRect && visibleRect.overflow.top) {
             lastVisible = dateMessage.div;
           } else if(lastVisible) {
             break;
           }
         }
+      }
+    // }
+
+    if(lastVisible === this.previousStickyDate) {
+      return;
+    }
 
     if(lastVisible) {
-      const needReflow = !!this.chat.setPeerPromise;
+      const needReflow = /* !!this.chat.setPeerPromise ||  */!this.previousStickyDate;
       if(needReflow) {
         lastVisible.classList.add('no-transition');
       }
@@ -1439,8 +1448,6 @@ export default class ChatBubbles {
     if(this.isHeavyAnimationInProgress && this.scrolledDown) return;
     //lottieLoader.checkAnimations(false, 'chat');
 
-    this.setStickyDateManually();
-
     const distanceToEnd = this.scrollable.getDistanceToEnd();
     if(!IS_TOUCH_SUPPORTED && this.scrollable.lastScrollDirection !== 0 && distanceToEnd > 0) {
       if(this.isScrollingTimeout) {
@@ -1466,6 +1473,8 @@ export default class ChatBubbles {
     if(this.chat.topbar.pinnedMessage) {
       this.chat.topbar.pinnedMessage.setCorrectIndex(this.scrollable.lastScrollDirection);
     }
+
+    this.setStickyDateManually();
   };
 
   public setScroll() {
@@ -1585,6 +1594,7 @@ export default class ChatBubbles {
     
     animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP);
     this.deleteEmptyDateGroups();
+    this.onScroll();
   }
   
   public renderNewMessagesByIds(mids: number[], scrolledDown?: boolean) {
@@ -1963,11 +1973,17 @@ export default class ChatBubbles {
     this.resolveLadderAnimation = undefined;
     this.emptyPlaceholderMid = undefined;
     this.sponsoredMessage = undefined;
+    this.previousStickyDate = undefined;
 
     this.scrollingToBubble = undefined;
     ////console.timeEnd('appImManager cleanup');
 
     this.isTopPaddingSet = false;
+
+    if(this.isScrollingTimeout) {
+      clearTimeout(this.isScrollingTimeout);
+      this.isScrollingTimeout = 0;
+    }
   }
 
   public setPeer(peerId: PeerId, lastMsgId?: number, startParam?: string): {cached?: boolean, promise: Chat['setPeerPromise']} {
@@ -2196,7 +2212,6 @@ export default class ChatBubbles {
       }
 
       this.onScroll();
-      this.setStickyDateManually();
 
       const middleware = this.getMiddleware();
       const afterSetPromise = Promise.all([setPeerPromise, getHeavyAnimationPromise()]);
@@ -2366,6 +2381,7 @@ export default class ChatBubbles {
           }
 
           this.setUnreadDelimiter(); // не нашёл места лучше
+          // this.setStickyDateManually();
         }).catch(reject);
       }, 0);
     });
@@ -3582,6 +3598,9 @@ export default class ChatBubbles {
       //this.scrollable.scrollTop = this.scrollable.scrollHeight;
       //isTouchSupported && isApple && (this.scrollable.container.style.overflow = '');
 
+      this.scrollable.lastScrollTop = newScrollTop;
+      this.scrollable.lastScrollDirection = 0;
+
       if(IS_SAFARI/*  && !isAppleMobile */) { // * fix blinking and jumping
         reflowScrollableElement(this.scrollable.container);
       }
@@ -3738,6 +3757,8 @@ export default class ChatBubbles {
 
     // fastRaf(() => {
     fastRaf(() => {
+      this.setStickyDateManually(); // ! maybe it's not efficient
+
       setBubbles.forEach(contentWrapper => {
         contentWrapper.classList.remove('zoom-fade');
       });
@@ -3888,6 +3909,8 @@ export default class ChatBubbles {
     if(isSponsored) {
       let text: LangPackKey, mid: number, startParam: string, callback: () => void;
 
+      bubble.classList.add('avoid-selection');
+
       const sponsoredMessage = this.sponsoredMessage = (message as Message.message).sponsoredMessage;
       const peerId = this.appPeersManager.getPeerId(sponsoredMessage.from_id);
       // const peer = this.appPeersManager.getPeer(peerId);
@@ -4428,6 +4451,11 @@ export default class ChatBubbles {
         }
         delete this.dateMessages[i];
         deleted = true;
+
+        // * no sense in it
+        /* if(dateMessage.div === this.previousStickyDate) {
+          this.previousStickyDate = undefined;
+        } */
       }
     }
 

src/components/chat/selection.ts

@@ -820,7 +820,10 @@ export default class ChatSelection extends AppSelection {
   }
 
   public canSelectBubble(bubble: HTMLElement) {
-    return !bubble.classList.contains('service') && !bubble.classList.contains('is-sending') && !bubble.classList.contains('bubble-first') && bubble.parentElement.classList.contains('bubbles-date-group');
+    return !bubble.classList.contains('service') && 
+      !bubble.classList.contains('is-sending') && 
+      !bubble.classList.contains('bubble-first') && 
+      !bubble.classList.contains('avoid-selection');
   }
 
   protected onToggleSelection = (forwards: boolean, animate: boolean) => {

src/components/peerTitle.ts

@@ -58,7 +58,7 @@ export default class PeerTitle {
     if(options) {
       for(let i in options) {
         // @ts-ignore
-        // this.element.dataset[i] = options[i] ? '' + (typeof(options[i]) === 'boolean' ? +options[i] : options[i]) : '0';
+        this.element.dataset[i] = options[i] ? '' + (typeof(options[i]) === 'boolean' ? +options[i] : options[i]) : '0';
         // @ts-ignore
         this[i] = options[i];
       }

src/scss/partials/_chatBubble.scss

@@ -336,6 +336,7 @@ $bubble-beside-button-width: 38px;
 
     &.is-sticky {
       opacity: .00001; // for safari
+      // position: sticky;
 
       .bubbles-inner:not(.is-scrolling) & {
         //transition-delay: 1.35s;