ChatIndex: clamp to screen height-ish

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

@@ -15,9 +15,10 @@ import Blankslate from './chat-pane/blankslate';
 interface IChatList {
   onClickChat: (chat: any) => void,
   useWindowScroll?: boolean,
+  fade?: boolean,
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
+const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, fade }) => {
   const dispatch = useDispatch();
 
   const chatListRef = useRef(null);
@@ -74,18 +75,22 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
         )}
       </PullToRefresh>
 
-      <div
+      {fade && (
-        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,
+          <div
-          'opacity-100': !isNearTop,
+            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-100': !isNearTop,
-      <div
+            })}
-        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,
+          <div
-          'opacity-100': !isNearBottom,
+            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-100': !isNearBottom,
+            })}
+          />
+        </>
+      )}
     </div>
   );
 };

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

@@ -91,7 +91,7 @@ const ChatPane = () => {
         </Stack>
       );
     } else {
-      return <ChatList onClickChat={handleClickChat} useWindowScroll={false} />;
+      return <ChatList onClickChat={handleClickChat} fade />;
     }
   };
 

app/soapbox/features/chats/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -8,6 +8,7 @@ import AccountSearch from 'soapbox/components/account_search';
 
 import { Card, CardTitle, Stack } from '../../components/ui';
 
+import ChatBox from './components/chat-box';
 import ChatList from './components/chat-list';
 
 const messages = defineMessages({
@@ -20,18 +21,21 @@ const ChatIndex: React.FC = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
+  const [chat, setChat] = useState<any>(null);
+
   const handleSuggestion = (accountId: string) => {
     dispatch(launchChat(accountId, history, true));
   };
 
-  const handleClickChat = (chat: { id: string }) => {
+  const handleClickChat = (chat: any) => {
-    history.push(`/chats/${chat.id}`);
+    // history.push(`/chats/${chat.id}`);
+    setChat(chat);
   };
 
   return (
-    <Card className='p-0' variant='rounded'>
+    <Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
-      <div className='grid grid-cols-9'>
+      <div className='grid grid-cols-9 overflow-hidden h-full'>
-        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
+        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 overflow-hidden' space={6}>
           <CardTitle title={intl.formatMessage(messages.title)} />
 
           <AccountSearch
@@ -39,14 +43,15 @@ const ChatIndex: React.FC = () => {
             onSelected={handleSuggestion}
           />
 
-          <div className='-mx-3'>
+          <Stack className='-mx-3 flex-grow h-full'>
-            <ChatList
+            <ChatList onClickChat={handleClickChat} />
-              onClickChat={handleClickChat}
+          </Stack>
-              useWindowScroll
+        </Stack>
-            />
+        <Stack className='col-span-6 h-full overflow-hidden'>
-          </div>
+          {chat && (
+            <ChatBox chat={chat} onSetInputRef={() => {}} />
+          )}
         </Stack>
-        <Stack className='col-span-6'>Message area</Stack>
       </div>
     </Card>
   );