Temp

src/components/appSearchSuper..ts

@@ -309,32 +309,10 @@ export default class AppSearchSuper {
   }
 
   private onTransitionStart = () => {
-    // Jolly Cobra's // Workaround for scrollable content flickering during animation.
-    const container = this.scrollable.container;
-    if(container.style.overflowY !== 'hidden') {
-      // const scrollBarWidth = container.offsetWidth - container.clientWidth;
-      container.style.overflowY = 'hidden';
-      // container.style.paddingRight = `${scrollBarWidth}px`;
-      this.container.classList.add('sliding');
-    }
+    this.container.classList.add('sliding');
   };
 
   private onTransitionEnd = () => {
-    // Jolly Cobra's // Workaround for scrollable content flickering during animation.
-    const container = this.scrollable.container;
-
-    if(isSafari) { // ! safari doesn't respect sticky header, so it flicks when overflow is changing
-      container.style.display = 'none';
-    }
-
-    container.style.overflowY = '';
-
-    if(isSafari) {
-      void container.offsetLeft; // reflow
-      container.style.display = '';
-    }
-
-    // container.style.paddingRight = '0';
     this.container.classList.remove('sliding');
   };
 

src/components/transition.ts

@@ -8,6 +8,8 @@ import rootScope from "../lib/rootScope";
 import { CancellablePromise, deferredPromise } from "../helpers/cancellablePromise";
 import { dispatchHeavyAnimationEvent } from "../hooks/useHeavyAnimationCheck";
 import whichChild from "../helpers/dom/whichChild";
+import findUpClassName from "../helpers/dom/findUpClassName";
+import { isSafari } from "../helpers/userAgent";
 
 function slideNavigation(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) {
   const width = prevTabContent.getBoundingClientRect().width;
@@ -29,6 +31,15 @@ function slideNavigation(tabContent: HTMLElement, prevTabContent: HTMLElement, t
 }
 
 function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight: boolean) {
+  // Jolly Cobra's // Workaround for scrollable content flickering during animation.
+  const scrollableContainer = findUpClassName(tabContent, 'scrollable-y');
+  if(scrollableContainer && scrollableContainer.style.overflowY !== 'hidden') {
+    // const scrollBarWidth = scrollableContainer.offsetWidth - scrollableContainer.clientWidth;
+    scrollableContainer.style.overflowY = 'hidden';
+    // scrollableContainer.style.paddingRight = `${scrollBarWidth}px`;
+    // this.container.classList.add('sliding');
+  }
+
   //window.requestAnimationFrame(() => {
     const width = prevTabContent.getBoundingClientRect().width;
     /* tabContent.style.setProperty('--width', width + 'px');
@@ -49,6 +60,23 @@ function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight
   
   return () => {
     prevTabContent.style.transform = '';
+
+    if(scrollableContainer) {
+      // Jolly Cobra's // Workaround for scrollable content flickering during animation.
+      if(isSafari) { // ! safari doesn't respect sticky header, so it flicks when overflow is changing
+        scrollableContainer.style.display = 'none';
+      }
+
+      scrollableContainer.style.overflowY = '';
+
+      if(isSafari) {
+        void scrollableContainer.offsetLeft; // reflow
+        scrollableContainer.style.display = '';
+      }
+
+      // scrollableContainer.style.paddingRight = '0';
+      // this.container.classList.remove('sliding');
+    }
   };
 }
 
@@ -211,4 +239,4 @@ const Transition = (content: HTMLElement, animationFunction: TransitionFunction,
   return selectTab;
 };
 
-export default Transition;
+export default Transition;

src/lib/appManagers/appDialogsManager.ts

@@ -259,9 +259,9 @@ export class AppDialogsManager {
     bottomPart.append(this.folders.container);
 
     this.scroll = this._scroll = new Scrollable(bottomPart, 'CL', 500);
-    this.scroll.container.addEventListener('scroll', this.onChatsRegularScroll);
+    /* this.scroll.container.addEventListener('scroll', this.onChatsRegularScroll);
     this.scroll.onScrolledTop = this.onChatsScrollTop;
-    this.scroll.onScrolledBottom = this.onChatsScroll;
+    this.scroll.onScrolledBottom = this.onChatsScroll; */
     //this.scroll.attachSentinels();
 
     /* if(isTouchSupported && isSafari) {
@@ -715,9 +715,12 @@ export class AppDialogsManager {
     //containerToAppend.append(li);
 
     const ul = this.createChatList();
-    const div = document.createElement('div');
+    const scrollable = new Scrollable(null, 'CL', 500);
+    const div = scrollable.container;
     div.append(ul);
     div.dataset.filterId = '' + filter.id;
+    scrollable.onScrolledTop = this.onChatsScrollTop;
+    scrollable.onScrolledBottom = this.onChatsScroll;
     //this.folders.container.append(div);
     positionElementByIndex(div, this.folders.container, filter.orderIndex);
 
@@ -846,7 +849,7 @@ export class AppDialogsManager {
   }
 
   private onListLengthChange = () => {
-    return;
+    //return;
     
     const emptyFolder = this.chatList.parentElement.querySelector('.empty-folder');
     if(this.scroll.loadedAll.bottom && !this.chatList.childElementCount) {

src/scss/partials/_leftSidebar.scss

@@ -236,6 +236,8 @@
 
     > div {
       background-color: transparent;
+      position: absolute;
+      top: .5rem;
     }
   }