From 2f5caad67fad868f91536e95c7f962def5c94033 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 29 Aug 2022 16:21:00 -0500
Subject: [PATCH 01/10] Chats: use compareId to sort messages (fix Pleroma)

---
 app/soapbox/queries/chats.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 8c7e214b6..a6a340f5c 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -2,6 +2,7 @@ import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
 import snackbar from 'soapbox/actions/snackbar';
+import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useApi, useAppDispatch } from 'soapbox/hooks';
 
@@ -37,11 +38,7 @@ export interface IChatMessage {
   pending?: boolean
 }
 
-const reverseOrder = (a: IChat, b: IChat): number => {
-  if (Number(a.id) < Number(b.id)) return -1;
-  if (Number(a.id) > Number(b.id)) return 1;
-  return 0;
-};
+const reverseOrder = (a: IChat, b: IChat): number => compareId(a.id, b.id);
 
 const useChatMessages = (chatId: string) => {
   const api = useApi();

From 271bc271f7e61a87223ef6dbe6436bbb6f8c217a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 29 Aug 2022 16:35:41 -0500
Subject: [PATCH 02/10] Chats: normalize chat messages from the API

---
 app/soapbox/queries/chats.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index a6a340f5c..ac2b352f8 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -5,6 +5,7 @@ import snackbar from 'soapbox/actions/snackbar';
 import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { normalizeChatMessage } from 'soapbox/normalizers';
 
 import { queryClient } from './client';
 
@@ -51,7 +52,7 @@ const useChatMessages = (chatId: string) => {
     });
 
     const hasMore = !!headers.link;
-    const result = data.sort(reverseOrder);
+    const result = data.sort(reverseOrder).map(normalizeChatMessage);
     const nextMaxId = result[0]?.id;
 
     return {

From 2f0a41cc36933112ea5afc4854e11db91a1912c7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 29 Aug 2022 16:39:39 -0500
Subject: [PATCH 03/10] ChatMessageList: fix horizontal overflow for long
 messages in UI

---
 app/soapbox/features/chats/components/chat-message-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index dc20c9467..52e21cb3e 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -275,7 +275,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
                 title={getFormattedTimestamp(chatMessage)}
                 className={
                   classNames({
-                    'text-ellipsis break-words relative rounded-md p-2': true,
+                    'text-ellipsis break-words relative rounded-md p-2 max-w-full': true,
                     'bg-primary-500 text-white mr-2': isMyMessage,
                     'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 order-2 ml-2': !isMyMessage,
                   })

From 471ee4d1792288c2cd99f683dca076021eebe142 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 30 Aug 2022 13:08:04 -0500
Subject: [PATCH 04/10] Rename chats to messages

---
 app/soapbox/components/sidebar-navigation.tsx | 4 ++--
 app/soapbox/components/thumb_navigation.tsx   | 4 ++--
 app/soapbox/features/chats/index.tsx          | 2 +-
 app/soapbox/locales/en.json                   | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 583006070..e7a65326d 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -113,9 +113,9 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/messages.svg')}
+          icon={require('@tabler/icons/mail.svg')}
           count={chatsCount}
-          text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
     }
diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
index e46f7c7c3..1935526ed 100644
--- a/app/soapbox/components/thumb_navigation.tsx
+++ b/app/soapbox/components/thumb_navigation.tsx
@@ -17,8 +17,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/messages.svg')}
-          text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+          src={require('@tabler/icons/mail.svg')}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/chats'
           exact
           count={chatsCount}
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 5635cbdc8..eeb34efcd 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -12,7 +12,7 @@ import { Column } from '../../components/ui';
 import ChatList from './components/chat-list';
 
 const messages = defineMessages({
-  title: { id: 'column.chats', defaultMessage: 'Chats' },
+  title: { id: 'column.chats', defaultMessage: 'Messages' },
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
 });
 
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 5a0f5deb5..e0ff0b13e 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -194,7 +194,7 @@
   "column.birthdays": "Birthdays",
   "column.blocks": "Blocked users",
   "column.bookmarks": "Bookmarks",
-  "column.chats": "Chats",
+  "column.chats": "Messages",
   "column.community": "Local timeline",
   "column.crypto_donate": "Donate Cryptocurrency",
   "column.developers": "Developers",

From bb535b10edc470c19af34914af74c47ae1b4842a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 30 Aug 2022 13:16:00 -0500
Subject: [PATCH 05/10] Add ChatsPage for bigger layout

---
 app/soapbox/features/ui/index.tsx |  5 +++--
 app/soapbox/pages/chats-page.tsx  | 12 ++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 app/soapbox/pages/chats-page.tsx

diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index b136ebdb8..1328999fd 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -29,6 +29,7 @@ import ThumbNavigation from 'soapbox/components/thumb_navigation';
 import { Layout } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import AdminPage from 'soapbox/pages/admin_page';
+import ChatsPage from 'soapbox/pages/chats-page';
 import DefaultPage from 'soapbox/pages/default_page';
 // import GroupsPage from 'soapbox/pages/groups_page';
 // import GroupPage from 'soapbox/pages/group_page';
@@ -265,8 +266,8 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
 
-      {features.chats && <WrappedRoute path='/chats' exact page={DefaultPage} component={ChatIndex} content={children} />}
-      {features.chats && <WrappedRoute path='/chats/:chatId' page={DefaultPage} component={ChatRoom} content={children} />}
+      {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
+      {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatRoom} content={children} />}
 
       <WrappedRoute path='/follow_requests' page={DefaultPage} component={FollowRequests} content={children} />
       <WrappedRoute path='/blocks' page={DefaultPage} component={Blocks} content={children} />
diff --git a/app/soapbox/pages/chats-page.tsx b/app/soapbox/pages/chats-page.tsx
new file mode 100644
index 000000000..b822f3d85
--- /dev/null
+++ b/app/soapbox/pages/chats-page.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+/** Custom layout for chats on desktop. */
+const ChatsPage: React.FC = ({ children }) => {
+  return (
+    <div className='md:col-span-12 lg:col-span-9 pb-36'>
+      {children}
+    </div>
+  );
+};
+
+export default ChatsPage;

From 2a5a43d914738dd99c95fd235c2cefef674df854 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 30 Aug 2022 13:34:21 -0500
Subject: [PATCH 06/10] ChatIndex: break layout into columns

---
 app/soapbox/features/chats/index.tsx | 31 ++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index eeb34efcd..43ab6160b 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -7,7 +7,7 @@ import { launchChat } from 'soapbox/actions/chats';
 import AccountSearch from 'soapbox/components/account_search';
 import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
 
-import { Column } from '../../components/ui';
+import { Column, Stack } from '../../components/ui';
 
 import ChatList from './components/chat-list';
 
@@ -31,19 +31,24 @@ const ChatIndex: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <div className='column__switch'>
-        <AudioToggle />
+      <div className='grid grid-cols-9'>
+        <Stack className='col-span-3'>
+          <div className='column__switch'>
+            <AudioToggle />
+          </div>
+
+          <AccountSearch
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            onSelected={handleSuggestion}
+          />
+
+          <ChatList
+            onClickChat={handleClickChat}
+            useWindowScroll
+          />
+        </Stack>
+        <Stack className='col-span-6'>Message area</Stack>
       </div>
-
-      <AccountSearch
-        placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        onSelected={handleSuggestion}
-      />
-
-      <ChatList
-        onClickChat={handleClickChat}
-        useWindowScroll
-      />
     </Column>
   );
 };

From 7fc732d0d051cf41c2602f6e9202ceb99ed210e7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 31 Aug 2022 12:04:33 -0500
Subject: [PATCH 07/10] Chat: fix various overflow issues

---
 .../features/chats/components/chat.tsx        | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index fa559ec5f..d668ae956 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -20,17 +20,17 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
       className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
-        <HStack alignItems='center' space={2}>
-          <Avatar src={chat.account?.avatar} size={40} />
+        <HStack alignItems='center' space={2} className='overflow-hidden'>
+          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
 
-          <Stack alignItems='start'>
-            <div className='flex items-center space-x-1 flex-grow'>
-              <Text weight='bold' size='sm' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+          <Stack alignItems='start' className='overflow-hidden'>
+            <div className='flex items-center space-x-1 flex-grow w-full'>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
               {chat.account?.verified && <VerificationBadge />}
             </div>
 
             {chat.last_message?.content && (
-              <Text align='left' size='sm' weight='medium' theme='muted' truncate className='max-w-[200px]'>
+              <Text align='left' size='sm' weight='medium' theme='muted' truncate className='w-full'>
                 {chat.last_message?.content}
               </Text>
             )}
@@ -43,7 +43,12 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
               <div className='w-2 h-2 rounded-full bg-secondary-500' />
             )}
 
-            <RelativeTimestamp timestamp={chat.last_message.created_at} size='sm' />
+            <RelativeTimestamp
+              timestamp={chat.last_message.created_at}
+              align='right'
+              size='xs'
+              truncate
+            />
           </HStack>
         )}
       </HStack>

From 90ece157e65331deceebe0e4c71f164afca633a3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 31 Aug 2022 12:05:01 -0500
Subject: [PATCH 08/10] ChatIndex: improve the desktop layout

---
 app/soapbox/components/ui/stack/stack.tsx |  3 ++-
 app/soapbox/features/chats/index.tsx      | 23 +++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index bac3ce89b..33f3a20c8 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 10
 
 const spaces = {
   0: 'space-y-0',
@@ -12,6 +12,7 @@ const spaces = {
   3: 'space-y-3',
   4: 'space-y-4',
   5: 'space-y-5',
+  6: 'space-y-6',
   10: 'space-y-10',
 };
 
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 43ab6160b..58f84f284 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -5,9 +5,8 @@ import { useHistory } from 'react-router-dom';
 
 import { launchChat } from 'soapbox/actions/chats';
 import AccountSearch from 'soapbox/components/account_search';
-import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
 
-import { Column, Stack } from '../../components/ui';
+import { Card, CardTitle, Stack } from '../../components/ui';
 
 import ChatList from './components/chat-list';
 
@@ -30,26 +29,26 @@ const ChatIndex: React.FC = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)}>
+    <Card className='p-0' variant='rounded'>
       <div className='grid grid-cols-9'>
-        <Stack className='col-span-3'>
-          <div className='column__switch'>
-            <AudioToggle />
-          </div>
+        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
+          <CardTitle title={intl.formatMessage(messages.title)} />
 
           <AccountSearch
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             onSelected={handleSuggestion}
           />
 
-          <ChatList
-            onClickChat={handleClickChat}
-            useWindowScroll
-          />
+          <div className='-mx-3'>
+            <ChatList
+              onClickChat={handleClickChat}
+              useWindowScroll
+            />
+          </div>
         </Stack>
         <Stack className='col-span-6'>Message area</Stack>
       </div>
-    </Column>
+    </Card>
   );
 };
 

From 624720a7bcf1202e8486d9bd06a1eb4f4cfabec2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 31 Aug 2022 13:31:18 -0500
Subject: [PATCH 09/10] ChatIndex: clamp to screen height-ish

---
 .../features/chats/components/chat-list.tsx   | 31 +++++++++++--------
 .../chats/components/chat-pane/chat-pane.tsx  |  2 +-
 app/soapbox/features/chats/index.tsx          | 31 +++++++++++--------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index cd3d5f05a..f016370e9 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/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
-        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,
-          'opacity-100': !isNearBottom,
-        })}
-      />
+      {fade && (
+        <>
+          <div
+            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,
+              'opacity-100': !isNearBottom,
+            })}
+          />
+        </>
+      )}
     </div>
   );
 };
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index 2ab917f25..6f6b73f73 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/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 />;
     }
   };
 
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 58f84f284..f064f8fae 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/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 }) => {
-    history.push(`/chats/${chat.id}`);
+  const handleClickChat = (chat: any) => {
+    // history.push(`/chats/${chat.id}`);
+    setChat(chat);
   };
 
   return (
-    <Card className='p-0' variant='rounded'>
-      <div className='grid grid-cols-9'>
-        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
+    <Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
+      <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 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'>
-            <ChatList
-              onClickChat={handleClickChat}
-              useWindowScroll
-            />
-          </div>
+          <Stack className='-mx-3 flex-grow h-full'>
+            <ChatList onClickChat={handleClickChat} />
+          </Stack>
+        </Stack>
+        <Stack className='col-span-6 h-full overflow-hidden'>
+          {chat && (
+            <ChatBox chat={chat} onSetInputRef={() => {}} />
+          )}
         </Stack>
-        <Stack className='col-span-6'>Message area</Stack>
       </div>
     </Card>
   );

From 0ac3b0824bcf8d0370fa1cfb5a810175c838ecc4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Sep 2022 13:07:22 -0500
Subject: [PATCH 10/10] Add header to desktop chats

---
 app/soapbox/features/chats/components/chat-box.tsx | 8 +++++---
 app/soapbox/features/chats/index.tsx               | 8 +++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-box.tsx b/app/soapbox/features/chats/components/chat-box.tsx
index 9553dec34..b1dab49a8 100644
--- a/app/soapbox/features/chats/components/chat-box.tsx
+++ b/app/soapbox/features/chats/components/chat-box.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import classNames from 'classnames';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
@@ -31,14 +32,15 @@ interface IChatBox {
   chat: IChat,
   onSetInputRef: (el: HTMLTextAreaElement) => void,
   autosize?: boolean,
-  inputRef?: MutableRefObject<HTMLTextAreaElement>
+  inputRef?: MutableRefObject<HTMLTextAreaElement>,
+  className?: string,
 }
 
 /**
  * Chat UI with just the messages and textarea.
  * Reused between floating desktop chats and fullscreen/mobile chats.
  */
-const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef }) => {
+const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef, className }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chat.id, ImmutableOrderedSet<string>()));
@@ -214,7 +216,7 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef }
   };
 
   return (
-    <Stack className='overflow-hidden flex flex-grow' onMouseOver={handleMouseOver}>
+    <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
       <div className='flex-grow h-full overflow-hidden flex justify-center'>
         <ChatMessageList chat={chat} autosize />
       </div >
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index f064f8fae..507167461 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -8,6 +8,7 @@ import AccountSearch from 'soapbox/components/account_search';
 
 import { Card, CardTitle, Stack } from '../../components/ui';
 
+import Chat from './components/chat';
 import ChatBox from './components/chat-box';
 import ChatList from './components/chat-list';
 
@@ -49,7 +50,12 @@ const ChatIndex: React.FC = () => {
         </Stack>
         <Stack className='col-span-6 h-full overflow-hidden'>
           {chat && (
-            <ChatBox chat={chat} onSetInputRef={() => {}} />
+            <Stack className='h-full overflow-hidden'>
+              <Chat chat={chat} onClick={() => {}} />
+              <div className='h-full overflow-hidden'>
+                <ChatBox className='h-full overflow-hidden' chat={chat} onSetInputRef={() => {}} />
+              </div>
+            </Stack>
           )}
         </Stack>
       </div>