Fix fade when scrolling on ChatList

app/soapbox/features/chats/components/chat-list-item.tsx

@@ -110,6 +110,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
 
         <HStack alignItems='center' space={2}>
           <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
+            {/* TODO: fix nested buttons here */}
             <DropdownMenuContainer
               items={menu}
               src={require('@tabler/icons/dots.svg')}

app/soapbox/features/chats/components/chat-list.tsx

@@ -14,11 +14,10 @@ import ChatListItem from './chat-list-item';
 interface IChatList {
   onClickChat: (chat: any) => void,
   useWindowScroll?: boolean,
-  fade?: boolean,
   searchValue?: string
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue, fade }) => {
+const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue }) => {
   const dispatch = useAppDispatch();
 
   const chatListRef = useRef(null);
@@ -76,22 +75,20 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
         )}
       </PullToRefresh>
 
-      {fade && (
+      <>
-        <>
+        <div
-          <div
+          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-            className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearTop,
-              'opacity-0': isNearTop,
+            'opacity-100': !isNearTop,
-              'opacity-100': !isNearTop,
+          })}
-            })}
+        />
-          />
+        <div
-          <div
+          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-            className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearBottom,
-              'opacity-0': isNearBottom,
+            'opacity-100': !isNearBottom,
-              'opacity-100': !isNearBottom,
+          })}
-            })}
+        />
-          />
+      </>
-        </>
-      )}
     </div>
   );
 };

app/soapbox/features/chats/components/chat-pane/chat-pane.tsx

@@ -59,7 +59,6 @@ const ChatPane = () => {
             <ChatList
               searchValue={debouncedValue}
               onClickChat={handleClickChat}
-              fade
             />
           ) : (
             <EmptyResultsBlankslate />