Left Main: Hide tab shadow when no scroll (#6743)

src/components/left/main/ChatFolders.tsx

@@ -22,6 +22,7 @@ import useFolderTabs from '../../../hooks/useFolderTabs';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
+import useScrolledState from '../../../hooks/useScrolledState';
 import useShowTransition from '../../../hooks/useShowTransition';
 
 import StoryRibbon from '../../story/StoryRibbon';
@@ -86,10 +87,17 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
 
   const lang = useLang();
 
+  const { isAtBeginning: isNotScrolled, handleScroll, updateScrollState } = useScrolledState();
+
   useEffect(() => {
     loadChatFolders();
   }, []);
 
+  useEffect(() => {
+    const activeList = transitionRef.current?.querySelector<HTMLElement>('.chat-list.Transition_slide-active');
+    updateScrollState(activeList ?? undefined);
+  }, [activeChatFolder, updateScrollState]);
+
   const {
     ref,
     shouldRender: shouldRenderStoryRibbon,
@@ -231,6 +239,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
         isFoldersSidebarShown={isFoldersSidebarShown}
         isStoryRibbonShown={isStoryRibbonShown}
         withTags
+        onScroll={handleScroll}
       />
     );
   }
@@ -255,6 +264,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
           tabs={folderTabs}
           activeTab={activeChatFolder}
           onSwitchTab={handleSwitchTab}
+          className={!isNotScrolled ? 'scrolled' : undefined}
         />
       ) : shouldRenderPlaceholder ? (
         <div ref={placeholderRef} className="tabs-placeholder" />

src/components/left/main/ChatList.tsx

@@ -48,6 +48,7 @@ type OwnProps = {
   isFoldersSidebarShown?: boolean;
   isStoryRibbonShown?: boolean;
   foldersDispatch?: FolderEditDispatch;
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
 };
 
 const INTERSECTION_THROTTLE = 200;
@@ -66,6 +67,7 @@ const ChatList = ({
   isFoldersSidebarShown,
   isStoryRibbonShown,
   foldersDispatch,
+  onScroll,
 }: OwnProps) => {
   const {
     openChat,
@@ -227,6 +229,7 @@ const ChatList = ({
       withAbsolutePositioning
       maxHeight={chatsHeight + archiveHeight + panesHeight}
       onLoadMore={getMore}
+      onScroll={onScroll}
     >
       {isAllFolder && <ChatListPanes key="panes" onHeightChange={setPanesHeight} />}
       {shouldDisplayArchive && (

src/components/left/main/LeftMain.scss

@@ -35,11 +35,17 @@
 
       justify-content: flex-start;
 
-      border-bottom: 0;
+      border-bottom: 1px solid var(--color-borders);
 
       opacity: 1;
+      box-shadow: none;
 
-      transition: opacity var(--layer-transition);
+      transition: opacity var(--layer-transition), box-shadow 0.2s, border-color 0.2s;
+
+      &.scrolled {
+        border-bottom-color: transparent;
+        box-shadow: 0 2px 2px var(--color-light-shadow);
+      }
     }
 
     &--tabs-hidden .TabList {

src/hooks/useScrolledState.ts

@@ -15,5 +15,17 @@ export default function useScrolledState(threshold = THRESHOLD) {
     setIsAtEnd(scrollHeight - scrollTop - clientHeight < threshold);
   });
 
-  return { isAtBeginning, isAtEnd, handleScroll };
+  const updateScrollState = useLastCallback((element: HTMLElement | undefined) => {
+    if (!element) {
+      setIsAtBeginning(true);
+      setIsAtEnd(true);
+      return;
+    }
+
+    const { scrollHeight, scrollTop, clientHeight } = element;
+    setIsAtBeginning(scrollTop < threshold);
+    setIsAtEnd(scrollHeight - scrollTop - clientHeight < threshold);
+  });
+
+  return { isAtBeginning, isAtEnd, handleScroll, updateScrollState };
 }