Fix scroll interrupting by message render

Fix is-selected render message
Hide chat input for deleted account

src/components/scrollable.ts

@@ -1,3 +1,4 @@
+import { CancellablePromise, deferredPromise } from "../helpers/cancellablePromise";
 import { isTouchSupported } from "../helpers/touchSupport";
 import { logger, LogLevels } from "../lib/logger";
 import smoothscroll, { SCROLL_TIME, SmoothScrollToOptions } from '../vendor/smoothscroll';
@@ -55,6 +56,7 @@ export class ScrollableBase {
   public getScrollValue: () => number;
 
   public scrollLocked = 0;
+  public scrollLockedPromise: CancellablePromise<void> = Promise.resolve();
 
   constructor(public el: HTMLElement, logPrefix = '', public appendTo = el, public container: HTMLElement = document.createElement('div')) {
     this.container.classList.add('scrollable');
@@ -103,13 +105,13 @@ export class ScrollableBase {
     }
 
     if(this.scrollLocked) clearTimeout(this.scrollLocked);
-    /* else {
+    else {
       this.scrollLockedPromise = deferredPromise<void>();
-    } */
+    }
 
     this.scrollLocked = window.setTimeout(() => {
       this.scrollLocked = 0;
-      //this.scrollLockedPromise.resolve();
+      this.scrollLockedPromise.resolve();
       //this.onScroll();
       this.container.dispatchEvent(new CustomEvent('scroll'));
     }, scrollTime);
@@ -156,7 +158,6 @@ export default class Scrollable extends ScrollableBase {
   /* private onScrolledTopFired = false;
   private onScrolledBottomFired = false; */
 
-  //public scrollLockedPromise: CancellablePromise<void> = Promise.resolve();
   public isVisible = false;
 
   private reorderTimeout: number;

src/lib/appManagers/appImManager.ts

@@ -334,6 +334,10 @@ export class AppImManager {
           });
         }
         
+        /* const promise = (this.scrollable.scrollLocked && this.scrollable.scrollLockedPromise) || Promise.resolve();
+        promise.then(() => {
+
+        }); */
         this.needUpdate.forEachReverse((obj, idx) => {
           if(obj.replyMid == mid) {
             let {mid, replyMid} = this.needUpdate.splice(idx, 1)[0];
@@ -1268,7 +1272,10 @@ export class AppImManager {
     const hasRights = isChannel && appChatsManager.hasRights(-peerID, 'send');
     this.chatInner.classList.toggle('has-rights', hasRights);
 
-    this.chatInput.style.display = !isChannel || hasRights ? '' : 'none';
+    const canWrite = (!isChannel || hasRights) && (peerID < 0 || !appUsersManager.getUser(peerID).pFlags.deleted);
+    this.chatInput.style.display = canWrite ? '' : 'none';
+
+    this.chatInner.classList.toggle('is-chat-input-hidden', !canWrite);
 
     this.topbar.classList.remove('is-pinned-shown');
     this.topbar.style.display = '';
@@ -1498,6 +1505,12 @@ export class AppImManager {
           this.messagesQueue.length = 0;
 
           const promises = queue.reduce((acc, {promises}) => acc.concat(promises), []);
+
+          // * это нужно для того, чтобы если захочет подгрузить reply или какое-либо сообщение, то скролл не прервался
+          if(this.scrollable.scrollLocked) {
+            promises.push(this.scrollable.scrollLockedPromise);
+          }
+
           //this.log('promises to call', promises, queue);
           Promise.all(promises).then(() => {
             if(this.chatInner != chatInner) {
@@ -1566,7 +1579,11 @@ export class AppImManager {
       bubble.appendChild(bubbleContainer);
       this.bubbles[+message.mid] = bubble;
     } else {
-      bubble.className = 'bubble';
+      const save = ['is-selected'];
+      const wasClassNames = bubble.className.split(' ');
+      const classNames = ['bubble'].concat(save.filter(c => wasClassNames.includes(c)));
+      bubble.className = classNames.join(' ');
+
       bubbleContainer = bubble.firstElementChild as HTMLDivElement;
       bubbleContainer.innerHTML = '';
       bubbleContainer.style.marginBottom = '';

src/scss/partials/_chat.scss

@@ -1088,10 +1088,10 @@
 				max-width: calc(100% - var(--message-beside-button-margin)) !important;
 			}
 		}
+	}
 
-		&:not(.has-rights) {
+	&.is-chat-input-hidden {
-			padding-bottom: 55px;
+		padding-bottom: 55px;
-		}
 	}
 
 	&:not(.is-channel), &.is-chat {