From 84dc06db42ef30032d73902b3fe89beb904654d9 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 10 Aug 2022 08:38:49 -0400
Subject: [PATCH] d

---
 app/soapbox/components/account_search.tsx     |  39 ++-
 .../components/autosuggest_account_input.tsx  |   3 +-
 app/soapbox/components/autosuggest_input.tsx  |   5 +-
 app/soapbox/features/chats/chat-room.tsx      |   2 +-
 .../features/chats/components/chat-box.tsx    | 188 +++++++++----
 .../chats/components/chat-message-list.tsx    | 266 ++++++++++++------
 .../chats/components/chat-pane-header.tsx     |  54 ++++
 .../features/chats/components/chat-panes.tsx  | 192 ++++++++++---
 .../features/chats/components/chat-window.tsx | 137 ++++-----
 .../features/chats/components/ui/pane.tsx     |   6 +-
 app/soapbox/features/ui/index.tsx             |   2 +-
 app/soapbox/queries/chats.ts                  | 103 +++++++
 app/soapbox/queries/search.ts                 |  27 ++
 app/soapbox/utils/features.ts                 |   2 +-
 app/styles/components/dropdown-menu.scss      |   2 +-
 15 files changed, 741 insertions(+), 287 deletions(-)
 create mode 100644 app/soapbox/features/chats/components/chat-pane-header.tsx
 create mode 100644 app/soapbox/queries/chats.ts
 create mode 100644 app/soapbox/queries/search.ts

diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index bf9652b66..3b681d8d0 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -5,6 +5,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
 import Icon from 'soapbox/components/icon';
 
+import SvgIcon from './ui/icon/svg-icon';
+
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
 });
@@ -16,10 +18,14 @@ interface IAccountSearch {
   placeholder?: string,
   /** Position of results relative to the input. */
   resultsPosition?: 'above' | 'below',
+  /** Optional class for the input */
+  className?: string,
+  autoFocus?: boolean,
+  hidePortal?: boolean,
 }
 
 /** Input to search for accounts. */
-const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
+const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, ...rest }) => {
   const intl = useIntl();
 
   const [value, setValue] = useState('');
@@ -56,11 +62,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
   };
 
   return (
-    <div className='search search--account'>
-      <label>
-        <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
+    <div className='w-full'>
+      <label className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
+
+      <div className='relative'>
         <AutosuggestAccountInput
-          className='rounded-full'
+          className={classNames('rounded-full', className)}
           placeholder={intl.formatMessage(messages.placeholder)}
           value={value}
           onChange={handleChange}
@@ -68,10 +75,24 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onKeyDown={handleKeyDown}
           {...rest}
         />
-      </label>
-      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+
+        <div
+          role='button'
+          tabIndex={0}
+          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+          onClick={handleClear}
+        >
+          <SvgIcon
+            src={require('@tabler/icons/search.svg')}
+            className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+          />
+
+          <SvgIcon
+            src={require('@tabler/icons/x.svg')}
+            className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+            aria-label={intl.formatMessage(messages.placeholder)}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/app/soapbox/components/autosuggest_account_input.tsx b/app/soapbox/components/autosuggest_account_input.tsx
index 79d247fd9..ec896f82c 100644
--- a/app/soapbox/components/autosuggest_account_input.tsx
+++ b/app/soapbox/components/autosuggest_account_input.tsx
@@ -8,11 +8,12 @@ import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
 
-const noOp = () => {};
+const noOp = () => { };
 
 interface IAutosuggestAccountInput {
   onChange: React.ChangeEventHandler<HTMLInputElement>,
   onSelected: (accountId: string) => void,
+  autoFocus?: boolean,
   value: string,
   limit?: number,
   className?: string,
diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index 744160b2b..00285a14b 100644
--- a/app/soapbox/components/autosuggest_input.tsx
+++ b/app/soapbox/components/autosuggest_input.tsx
@@ -59,6 +59,7 @@ interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>,
   maxLength?: number,
   menu?: Menu,
   resultsPosition: string,
+  hidePortal?: boolean,
 }
 
 export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
@@ -284,11 +285,11 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   }
 
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
+    const { hidePortal, value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
     const { suggestionsHidden } = this.state;
     const style: React.CSSProperties = { direction: 'ltr' };
 
-    const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
+    const visible = !hidePortal && !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
     if (isRtl(value)) {
       style.direction = 'rtl';
diff --git a/app/soapbox/features/chats/chat-room.tsx b/app/soapbox/features/chats/chat-room.tsx
index 9c0ab3956..222f208a1 100644
--- a/app/soapbox/features/chats/chat-room.tsx
+++ b/app/soapbox/features/chats/chat-room.tsx
@@ -58,7 +58,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
   return (
     <Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
       <ChatBox
-        chatId={chat.id}
+        chat={chat as any}
         onSetInputRef={handleInputRef}
         autosize
       />
diff --git a/app/soapbox/features/chats/components/chat-box.tsx b/app/soapbox/features/chats/components/chat-box.tsx
index 66371bc8d..b4b609e8f 100644
--- a/app/soapbox/features/chats/components/chat-box.tsx
+++ b/app/soapbox/features/chats/components/chat-box.tsx
@@ -1,3 +1,4 @@
+import { useMutation } from '@tanstack/react-query';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React, { useRef, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
@@ -7,23 +8,25 @@ import {
   markChatRead,
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
-import IconButton from 'soapbox/components/icon_button';
+import { HStack, Icon, IconButton, Input, Stack, Textarea } from 'soapbox/components/ui';
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { IChat, useChat } from 'soapbox/queries/chats';
+import { queryClient } from 'soapbox/queries/client';
 import { truncateFilename } from 'soapbox/utils/media';
 
 import ChatMessageList from './chat-message-list';
 
 const messages = defineMessages({
-  placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
+  placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Type a message' },
   send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
 });
 
 const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 
 interface IChatBox {
-  chatId: string,
+  chat: IChat,
   onSetInputRef: (el: HTMLTextAreaElement) => void,
   autosize?: boolean,
 }
@@ -32,12 +35,15 @@ interface IChatBox {
  * Chat UI with just the messages and textarea.
  * Reused between floating desktop chats and fullscreen/mobile chats.
  */
-const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
+const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
+  const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chat.id, ImmutableOrderedSet<string>()));
+  const account = useOwnAccount();
 
-  const [content, setContent] = useState('');
+  const { createChatMessage, markChatAsRead } = useChat(chat.id);
+
+  const [content, setContent] = useState<string>('');
   const [attachment, setAttachment] = useState<any>(undefined);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
@@ -45,6 +51,61 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
 
   const inputElem = useRef<HTMLTextAreaElement | null>(null);
 
+  // TODO: needs last_read_id param
+  const markAsRead = useMutation(() => markChatAsRead(), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['chats']);
+    },
+  });
+
+  const submitMessage = useMutation(({ chatId, content }: any) => {
+    return createChatMessage(chatId, content);
+  }, {
+    onMutate: async (newMessage) => {
+      clearState();
+
+      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
+      await queryClient.cancelQueries(['chats', 'messages', chat.id]);
+
+      // Snapshot the previous value
+      const previousChatMessages = queryClient.getQueryData(['chats', 'messages', chat.id]);
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['chats', 'messages', chat.id], (prevResult: any) => {
+        const newResult = prevResult;
+        newResult.pages = prevResult.pages.map((page: any, idx: number) => {
+          if (idx === 0) {
+            return {
+              ...page,
+              result: [...page.result, {
+                ...newMessage,
+                id: String(Number(new Date())),
+                created_at: new Date(),
+                account_id: account?.id,
+                pending: true,
+              }],
+            };
+          }
+
+          return page;
+        });
+
+        return newResult;
+      });
+
+      // Return a context object with the snapshotted value
+      return { previousChatMessages };
+    },
+    // If the mutation fails, use the context returned from onMutate to roll back
+    onError: (err, newTodo, context: any) => {
+      queryClient.setQueryData(['chats', 'messages', chat.id], context.previousChatMessages);
+    },
+    // Always refetch after error or success:
+    onSettled: () => {
+      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+    },
+  });
+
   const clearState = () => {
     setContent('');
     setAttachment(undefined);
@@ -53,13 +114,6 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
     setResetFileKey(fileKeyGen());
   };
 
-  const getParams = () => {
-    return {
-      content,
-      media_id: attachment && attachment.id,
-    };
-  };
-
   const canSubmit = () => {
     const conds = [
       content.length > 0,
@@ -70,31 +124,32 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   };
 
   const sendMessage = () => {
-    if (canSubmit() && !isUploading) {
-      const params = getParams();
+    if (canSubmit() && !submitMessage.isLoading) {
+      const params = {
+        content,
+        media_id: attachment && attachment.id,
+      };
 
-      dispatch(sendChatMessage(chatId, params));
-      clearState();
+      submitMessage.mutate({ chatId: chat.id, content });
     }
   };
 
-  const insertLine = () => {
-    setContent(content + '\n');
-  };
+  const insertLine = () => setContent(content + '\n');
 
-  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+  const handleKeyDown: React.KeyboardEventHandler = (event) => {
     markRead();
-    if (e.key === 'Enter' && e.shiftKey) {
+
+    if (event.key === 'Enter' && event.shiftKey) {
+      event.preventDefault();
       insertLine();
-      e.preventDefault();
-    } else if (e.key === 'Enter') {
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
       sendMessage();
-      e.preventDefault();
     }
   };
 
-  const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    setContent(e.target.value);
+  const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    setContent(event.target.value);
   };
 
   const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
@@ -104,17 +159,11 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   };
 
   const markRead = () => {
-    dispatch(markChatRead(chatId));
+    // markAsRead.mutate();
+    // dispatch(markChatRead(chatId));
   };
 
-  const handleHover = () => {
-    markRead();
-  };
-
-  const setInputRef = (el: HTMLTextAreaElement) => {
-    inputElem.current = el;
-    onSetInputRef(el);
-  };
+  const handleMouseOver = () => markRead();
 
   const handleRemoveFile = () => {
     setAttachment(undefined);
@@ -173,27 +222,52 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   if (!chatMessageIds) return null;
 
   return (
-    <div className='chat-box' onMouseOver={handleHover}>
-      <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} autosize />
-      {renderAttachment()}
-      {isUploading && (
-        <UploadProgress progress={uploadProgress * 100} />
-      )}
-      <div className='chat-box__actions simple_form'>
-        <div className='chat-box__send'>
-          {renderActionButton()}
-        </div>
-        <textarea
-          rows={1}
-          placeholder={intl.formatMessage(messages.placeholder)}
-          onKeyDown={handleKeyDown}
-          onChange={handleContentChange}
-          onPaste={handlePaste}
-          value={content}
-          ref={setInputRef}
-        />
+    <Stack className='overflow-hidden flex flex-grow' onMouseOver={handleMouseOver}>
+      <div className='flex-grow h-full overflow-hidden'>
+        <ChatMessageList chatMessageIds={chatMessageIds} chat={chat} autosize />
       </div>
-    </div>
+
+      <div className='mt-auto p-4 shadow-3xl'>
+        <HStack alignItems='center' justifyContent='between' space={4}>
+          <div className='flex-grow'>
+            <Textarea
+              rows={1}
+              autoFocus
+              placeholder={intl.formatMessage(messages.placeholder)}
+              onKeyDown={handleKeyDown}
+              value={content}
+              onChange={handleContentChange}
+              isResizeable={false}
+            />
+          </div>
+
+          <IconButton
+            src={require('@tabler/icons/send.svg')}
+            iconClassName='w-5 h-5'
+            className='text-primary-500'
+            onClick={sendMessage}
+          />
+        </HStack>
+      </div>
+    </Stack>
+    //   {renderAttachment()}
+    //   {isUploading && (
+    //     <UploadProgress progress={uploadProgress * 100} />
+    //   )}
+    //   <div className='chat-box__actions simple_form'>
+    //     <div className='chat-box__send'>
+    //       {renderActionButton()}
+    //     </div>
+    //     <textarea
+    //       rows={1}
+    //
+    //
+    //       onPaste={handlePaste}
+    //       value={content}
+    //       ref={setInputRef}
+    //     />
+    //   </div>
+    // </div>
   );
 };
 
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index ad1a2f82d..c3bd7e69c 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -13,12 +13,13 @@ import { createSelector } from 'reselect';
 import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
 import { openModal } from 'soapbox/actions/modals';
 import { initReportById } from 'soapbox/actions/reports';
-import { Text } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import emojify from 'soapbox/features/emoji/emoji';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useAppDispatch, useRefEventHandler } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useRefEventHandler, useOwnAccount } from 'soapbox/hooks';
+import { IChat, IChatMessage, useChatMessages } from 'soapbox/queries/chats';
 import { onlyEmoji } from 'soapbox/utils/rich_content';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
@@ -35,10 +36,10 @@ const messages = defineMessages({
 
 type TimeFormat = 'today' | 'date';
 
-const timeChange = (prev: ChatMessageEntity, curr: ChatMessageEntity): TimeFormat | null => {
+const timeChange = (prev: IChatMessage, curr: IChatMessage): TimeFormat | null => {
   const prevDate = new Date(prev.created_at).getDate();
   const currDate = new Date(curr.created_at).getDate();
-  const nowDate  = new Date().getDate();
+  const nowDate = new Date().getDate();
 
   if (prevDate !== currDate) {
     return currDate === nowDate ? 'today' : 'date';
@@ -47,9 +48,9 @@ const timeChange = (prev: ChatMessageEntity, curr: ChatMessageEntity): TimeForma
   return null;
 };
 
-const makeEmojiMap = (record: any) => record.get('emojis', ImmutableList()).reduce((map: ImmutableMap<string, any>, emoji: ImmutableMap<string, any>) => {
-  return map.set(`:${emoji.get('shortcode')}:`, emoji);
-}, ImmutableMap());
+// const makeEmojiMap = (record: any) => record.get('emojis', ImmutableList()).reduce((map: ImmutableMap<string, any>, emoji: ImmutableMap<string, any>) => {
+//   return map.set(`:${emoji.get('shortcode')}:`, emoji);
+// }, ImmutableMap());
 
 const getChatMessages = createSelector(
   [(chatMessages: ImmutableMap<string, ChatMessageEntity>, chatMessageIds: ImmutableOrderedSet<string>) => (
@@ -63,7 +64,7 @@ const getChatMessages = createSelector(
 
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
-  chatId: string,
+  chat: IChat,
   /** Message IDs to render. */
   chatMessageIds: ImmutableOrderedSet<string>,
   /** Whether to make the chatbox fill the height of the screen. */
@@ -71,22 +72,27 @@ interface IChatMessageList {
 }
 
 /** Scrollable list of chat messages. */
-const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, autosize }) => {
+const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, autosize }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-
-  const me = useAppSelector(state => state.me);
-  const chatMessages = useAppSelector(state => getChatMessages(state.chat_messages, chatMessageIds));
+  const account = useOwnAccount();
 
   const [initialLoad, setInitialLoad] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  const { data: chatMessages, isFetching, isFetched, fetchNextPage, isFetchingNextPage, isPlaceholderData } = useChatMessages(chat.id);
+  const formattedChatMessages = chatMessages || [];
+
+
+  const me = useAppSelector(state => state.me);
+
 
   const node = useRef<HTMLDivElement>(null);
   const messagesEnd = useRef<HTMLDivElement>(null);
   const lastComputedScroll = useRef<number | undefined>(undefined);
   const scrollBottom = useRef<number | undefined>(undefined);
 
-  const initialCount = useMemo(() => chatMessages.count(), []);
+  const initialCount = useMemo(() => formattedChatMessages.length, []);
 
   const scrollToBottom = () => {
     messagesEnd.current?.scrollIntoView(false);
@@ -95,13 +101,13 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
   const getFormattedTimestamp = (chatMessage: ChatMessageEntity) => {
     return intl.formatDate(
       new Date(chatMessage.created_at), {
-        hour12: false,
-        year: 'numeric',
-        month: 'short',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-      },
+      hour12: false,
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    },
     );
   };
 
@@ -130,38 +136,46 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
     return scrollBottom < elem.offsetHeight * 1.5;
   };
 
-  const handleResize = throttle(() => {
-    if (isNearBottom()) {
-      scrollToBottom();
-    }
-  }, 150);
-
   const restoreScrollPosition = () => {
     if (node.current && scrollBottom.current) {
+      console.log('bottom', scrollBottom.current);
+
       lastComputedScroll.current = node.current.scrollHeight - scrollBottom.current;
       node.current.scrollTop = lastComputedScroll.current;
     }
   };
 
   const handleLoadMore = () => {
-    const maxId = chatMessages.getIn([0, 'id']) as string;
-    dispatch(fetchChatMessages(chatId, maxId as any));
-    setIsLoading(true);
+    // const maxId = chatMessages.getIn([0, 'id']) as string;
+    // dispatch(fetchChatMessages(chat.id, maxId as any));
+    // setIsLoading(true);
+    if (!isFetching) {
+      // setMaxId(formattedChatMessages[0].id);
+      fetchNextPage()
+        .then(() => {
+          if (node.current) {
+            setScrollPosition(node.current.scrollHeight - node.current.scrollTop);
+          }
+        })
+        .catch(() => null);
+    }
   };
 
-  const handleScroll = useRefEventHandler(throttle(() => {
+  const handleScroll = throttle(() => {
     if (node.current) {
       const { scrollTop, offsetHeight } = node.current;
       const computedScroll = lastComputedScroll.current === scrollTop;
-      const nearTop = scrollTop < offsetHeight * 2;
+      const nearTop = scrollTop < offsetHeight;
 
-      if (nearTop && !isLoading && !initialLoad && !computedScroll) {
+      setScrollPosition(node.current.scrollHeight - node.current.scrollTop);
+
+      if (nearTop && !isFetching && !initialLoad && !computedScroll) {
         handleLoadMore();
       }
     }
   }, 150, {
     trailing: true,
-  }));
+  });
 
   const onOpenMedia = (media: any, index: number) => {
     dispatch(openModal('MEDIA', { media, index }));
@@ -194,12 +208,20 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
     const pending = chatMessage.pending;
     const deleting = chatMessage.deleting;
     const formatted = (pending && !deleting) ? parsePendingContent(content) : content;
-    const emojiMap = makeEmojiMap(chatMessage);
-    return emojify(formatted, emojiMap.toJS());
+    return formatted;
+    // const emojiMap = makeEmojiMap(chatMessage);
+    // return emojify(formatted, emojiMap.toJS());
   };
 
   const renderDivider = (key: React.Key, text: string) => (
-    <div className='chat-messages__divider' key={key}>{text}</div>
+    <div className='relative' key={key}>
+      <div className='absolute inset-0 flex items-center' aria-hidden='true'>
+        <div className='w-full border-solid border-t border-gray-300' />
+      </div>
+      <div className='relative flex justify-center'>
+        <Text theme='muted' size='xs' className='px-2 bg-white' tag='span'>{text}</Text>
+      </div>
+    </div>
   );
 
   const handleDeleteMessage = (chatId: string, messageId: string) => {
@@ -214,7 +236,9 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
     };
   };
 
-  const renderMessage = (chatMessage: ChatMessageEntity) => {
+  const renderMessage = (chatMessage: any) => {
+    const isMyMessage = chatMessage.account_id === me;
+
     const menu: Menu = [
       {
         text: intl.formatMessage(messages.delete),
@@ -233,45 +257,97 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
     }
 
     return (
-      <div
-        className={classNames('chat-message', {
-          'chat-message--me': chatMessage.account_id === me,
-          'chat-message--pending': chatMessage.pending,
-        })}
+      <Stack
         key={chatMessage.id}
+        space={1}
+        className={classNames({
+          'group max-w-[85%]': true,
+          'ml-auto': isMyMessage,
+        })}
       >
-        <div
-          title={getFormattedTimestamp(chatMessage)}
-          className='chat-message__bubble'
-          ref={setBubbleRef}
-          tabIndex={0}
+        <HStack
+          alignItems='center'
+          justifyContent={isMyMessage ? 'end' : 'start'}
+          className={classNames({
+            'opacity-50': chatMessage.pending,
+          })}
         >
-          {maybeRenderMedia(chatMessage)}
-          <Text size='sm' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} />
-          <div className='chat-message__menu'>
-            <DropdownMenuContainer
-              items={menu}
-              src={require('@tabler/icons/dots.svg')}
-              title={intl.formatMessage(messages.more)}
-            />
+          {isMyMessage ? (
+            // <IconButton
+            //   src={require('@tabler/icons/dots.svg')}
+            //   className='hidden group-hover:block text-gray-600 mr-2'
+            //   iconClassName='w-5 h-5'
+            // />
+            <div className='hidden group-hover:block mr-2 text-gray-500'>
+              <DropdownMenuContainer
+                items={menu}
+                src={require('@tabler/icons/dots.svg')}
+                title={intl.formatMessage(messages.more)}
+              />
+            </div>
+
+          ) : null}
+
+          <div
+            title={getFormattedTimestamp(chatMessage)}
+            className={
+              classNames({
+                'text-ellipsis break-words relative rounded-md p-2': true,
+                'bg-primary-500 text-white mr-2': isMyMessage,
+                'bg-gray-200 text-gray-900 order-2 ml-2': !isMyMessage,
+              })
+            }
+            ref={setBubbleRef}
+            tabIndex={0}
+          >
+            {maybeRenderMedia(chatMessage)}
+            <Text size='sm' theme='inherit' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} />
+            <div className='chat-message__menu'>
+              <DropdownMenuContainer
+                items={menu}
+                src={require('@tabler/icons/dots.svg')}
+                title={intl.formatMessage(messages.more)}
+              />
+            </div>
           </div>
-        </div>
-      </div>
+
+          <div className={classNames({ 'order-1': !isMyMessage })}>
+            <Avatar src={isMyMessage ? account?.avatar : chat.account.avatar} size={34} />
+          </div>
+        </HStack>
+
+        <HStack
+          alignItems='center'
+          space={2}
+          className={classNames({
+            'ml-auto': isMyMessage,
+          })}
+        >
+          <Text
+            theme='muted'
+            size='xs'
+            className={classNames({
+              'text-right': isMyMessage,
+              'order-2': !isMyMessage,
+            })}
+          >
+            {intl.formatTime(chatMessage.created_at)}
+          </Text>
+
+          <div className={classNames({ 'order-1': !isMyMessage })}>
+            <div className='w-[34px]' />
+          </div>
+        </HStack>
+      </Stack>
     );
   };
 
   useEffect(() => {
-    dispatch(fetchChatMessages(chatId));
-
-    node.current?.addEventListener('scroll', e => handleScroll.current(e));
-    window.addEventListener('resize', handleResize);
-    scrollToBottom();
-
-    return () => {
-      node.current?.removeEventListener('scroll', e => handleScroll.current(e));
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+    if (isFetched) {
+      setInitialLoad(false);
+      scrollToBottom();
+    }
+  }, [isFetched]);
 
   // Store the scroll position.
   useLayoutEffect(() => {
@@ -282,35 +358,49 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
   });
 
   // Stick scrollbar to bottom.
-  useEffect(() => {
-    if (isNearBottom()) {
-      scrollToBottom();
-    }
+  // useEffect(() => {
+  //   if (isNearBottom()) {
+  //     scrollToBottom();
+  //   }
 
-    // First load.
-    if (chatMessages.count() !== initialCount) {
-      setInitialLoad(false);
-      setIsLoading(false);
-      scrollToBottom();
-    }
-  }, [chatMessages.count()]);
+  //   // First load.
+  //   // if (chatMessages.count() !== initialCount) {
+  //   //   setInitialLoad(false);
+  //   //   setIsLoading(false);
+  //   //   scrollToBottom();
+  //   // }
+  // }, [formattedChatMessages.length]);
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [messagesEnd.current]);
+  // useEffect(() => {
+  //   scrollToBottom();
+  // }, [messagesEnd.current]);
 
   // History added.
+  const lastChatId = Number(chatMessages && chatMessages[0]?.id);
+
+
   useEffect(() => {
     // Restore scroll bar position when loading old messages.
+    console.log('hii');
     if (!initialLoad) {
+
       restoreScrollPosition();
     }
-  }, [chatMessageIds.first()]);
+  }, [formattedChatMessages.length, initialLoad]);
+
+
+  if (isPlaceholderData) {
+    return (
+      <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
+        <Spinner withText={false} />
+      </Stack>
+    );
+  }
 
   return (
-    <div className='chat-messages' style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} ref={node}>
-      {chatMessages.reduce((acc, curr, idx) => {
-        const lastMessage = chatMessages.get(idx - 1);
+    <div className='h-full flex flex-col space-y-4 px-4 flex-grow overflow-y-scroll' onScroll={handleScroll} ref={node}> {/* style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} */}
+      {formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {
+        const lastMessage = formattedChatMessages[idx - 1];
 
         if (lastMessage) {
           const key = `${curr.id}_divider`;
@@ -319,7 +409,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
               acc.push(renderDivider(key, intl.formatMessage(messages.today)));
               break;
             case 'date':
-              acc.push(renderDivider(key, new Date(curr.created_at).toDateString()));
+              acc.push(renderDivider(key, intl.formatDate(new Date(curr.created_at), { weekday: 'short', hour: 'numeric', minute: '2-digit', month: 'short', day: 'numeric' })));
               break;
           }
         }
diff --git a/app/soapbox/features/chats/components/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-pane-header.tsx
new file mode 100644
index 000000000..18328baec
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-pane-header.tsx
@@ -0,0 +1,54 @@
+import React, { HTMLAttributes } from 'react';
+
+import { HStack, IconButton, Text } from 'soapbox/components/ui';
+
+interface IChatPaneHeader {
+  isOpen: boolean
+  isToggleable?: boolean
+  onToggle(): void
+  title: string | React.ReactNode
+  unreadCount?: number
+}
+
+const ChatPaneHeader = (props: IChatPaneHeader) => {
+  const { onToggle, isOpen, isToggleable = true, title, unreadCount } = props;
+
+  const ButtonComp = isToggleable ? 'button' : 'div';
+  const buttonProps: HTMLAttributes<HTMLButtonElement | HTMLDivElement> = {};
+  if (isToggleable) {
+    buttonProps.onClick = onToggle;
+  }
+
+  return (
+    <HStack alignItems='center' justifyContent='between' className='rounded-t-xl h-16 py-3 px-4'>
+      <ButtonComp
+        className='flex-grow flex items-center flex-row space-x-1 h-16'
+        {...buttonProps}
+      >
+        {typeof title === 'string' ? (
+          <Text weight='semibold'>
+            {title}
+          </Text>
+        ) : (title)}
+
+        {(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
+          <HStack alignItems='center' space={2}>
+            <Text weight='semibold'>
+              ({unreadCount})
+            </Text>
+
+            <div className='bg-accent-300 w-2.5 h-2.5 rounded-full' />
+          </HStack>
+        )}
+      </ButtonComp>
+
+      <IconButton
+        onClick={onToggle}
+        src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')}
+        iconClassName='w-5 h-5 text-gray-600'
+      />
+    </HStack>
+  );
+};
+
+export default ChatPaneHeader;
diff --git a/app/soapbox/features/chats/components/chat-panes.tsx b/app/soapbox/features/chats/components/chat-panes.tsx
index d2aae435d..58998aef9 100644
--- a/app/soapbox/features/chats/components/chat-panes.tsx
+++ b/app/soapbox/features/chats/components/chat-panes.tsx
@@ -1,24 +1,33 @@
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React from 'react';
+import sumBy from 'lodash/sumBy';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
 import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
 import { getSettings } from 'soapbox/actions/settings';
+import snackbar from 'soapbox/actions/snackbar';
 import AccountSearch from 'soapbox/components/account_search';
-import { Counter } from 'soapbox/components/ui';
+import { Avatar, Button, Counter, HStack, Icon, IconButton, Input, Spinner, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
 import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
-import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
+import { useAppDispatch, useAppSelector, useDebounce, useSettings } from 'soapbox/hooks';
+import { IChat, useChats } from 'soapbox/queries/chats';
+import useAccountSearch from 'soapbox/queries/search';
 import { RootState } from 'soapbox/store';
 import { Chat } from 'soapbox/types/entities';
 
 import ChatList from './chat-list';
+import ChatPaneHeader from './chat-pane-header';
 import ChatWindow from './chat-window';
 import { Pane, WindowState } from './ui';
 
 const messages = defineMessages({
-  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
 });
 
 const getChatsUnreadCount = (state: RootState) => {
@@ -41,67 +50,162 @@ const normalizeChatPanes = makeNormalizeChatPanes();
 const ChatPanes = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const history = useHistory();
+  const debounce = useDebounce;
+
+  const [chat, setChat] = useState<IChat | null>();
+  const [value, setValue] = useState<string>();
+  const debouncedValue = debounce(value as string, 300);
+
+  const { chatsQuery: { data: chats, isFetching }, getOrCreateChatByAccountId } = useChats();
+  const { data: accounts } = useAccountSearch(debouncedValue);
 
   const panes = useAppSelector((state) => normalizeChatPanes(state));
   const mainWindowState = useSettings().getIn(['chats', 'mainWindow']) as WindowState;
-  const unreadCount = useAppSelector((state) => getChatsUnreadCount(state));
+  const unreadCount = sumBy(chats, (chat) => chat.unread);
 
-  const handleClickChat = ((chat: Chat) => {
-    dispatch(openChat(chat.id));
+  const open = mainWindowState === 'open';
+  const isSearching = accounts && accounts.length > 0;
+  const hasSearchValue = value && value.length > 0;
+
+  const handleClickOnSearchResult = useMutation((accountId: string) => {
+    return getOrCreateChatByAccountId(accountId);
+  }, {
+    onError: (error: AxiosError) => {
+      const data = error.response?.data as any;
+      dispatch(snackbar.error(data?.error));
+    },
+    onSuccess: (response) => {
+      setChat(response.data);
+    },
   });
 
-  const handleSuggestion = (accountId: string) => {
-    dispatch(launchChat(accountId, history));
+
+  const clearValue = () => {
+    if (hasSearchValue) {
+      setValue('');
+    }
   };
 
   const handleMainWindowToggle = () => {
+    if (mainWindowState === 'open') {
+      setChat(null);
+    }
     dispatch(toggleMainWindow());
   };
 
-  const open = mainWindowState === 'open';
+  const renderBody = () => {
+    if (isFetching) {
+      return (
+        <div className='flex flex-grow h-full items-center justify-center'>
+          <Spinner withText={false} />
+        </div>
+      );
+    } else if (isSearching) {
+      return (
+        <Stack className='overflow-y-scroll flex-grow h-full' space={2}>
+          {accounts.map((account: any) => (
+            <button key={account.id} type='button' className='px-4 py-2 w-full flex flex-col hover:bg-gray-100' onClick={() => handleClickOnSearchResult.mutate(account.id)}>
+              <HStack alignItems='center' space={2}>
+                <Avatar src={account.avatar} size={40} />
 
-  const mainWindowPane = (
-    <Pane windowState={mainWindowState} index={0} main>
-      <div className='pane__header'>
-        {unreadCount > 0 && (
-          <div className='mr-2 flex-none'>
-            <Counter count={unreadCount} />
-          </div>
-        )}
-        <button className='pane__title' onClick={handleMainWindowToggle}>
-          <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
-        </button>
-        <AudioToggle />
-      </div>
-      <div className='pane__content'>
-        {open && (
-          <>
-            <ChatList
-              onClickChat={handleClickChat}
-            />
-            <AccountSearch
-              placeholder={intl.formatMessage(messages.searchPlaceholder)}
-              onSelected={handleSuggestion}
-              resultsPosition='above'
-            />
-          </>
-        )}
-      </div>
-    </Pane>
-  );
+                <Stack alignItems='start'>
+                  <div className='flex items-center space-x-1 flex-grow'>
+                    <Text weight='semibold' truncate>{account.display_name}</Text>
+                    {account.verified && <VerificationBadge />}
+                  </div>
+                  <Text theme='muted' truncate>{account.acct}</Text>
+                </Stack>
+              </HStack>
+            </button>
+          ))}
+        </Stack>
+      );
+    } else if (chats && chats.length > 0) {
+      return (
+        <Stack className='overflow-y-scroll flex-grow h-full' space={2}>
+          {chats.map((chat) => (
+            <button
+              key={chat.id}
+              type='button'
+              onClick={() => setChat(chat)}
+              className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
+            >
+              <HStack alignItems='center' space={2}>
+                <Avatar src={chat.account.avatar} size={40} />
+
+                <Stack alignItems='start'>
+                  <div className='flex items-center space-x-1 flex-grow'>
+                    <Text weight='semibold' truncate>{chat.account.display_name}</Text>
+                    {chat.account.verified && <VerificationBadge />}
+                  </div>
+                  <Text theme='muted' truncate>{chat.account.acct}</Text>
+                </Stack>
+              </HStack>
+            </button>
+          ))}
+        </Stack>
+      );
+    } else {
+      return (
+        <Stack justifyContent='center' alignItems='center' space={4} className='px-4 flex-grow'>
+          <Stack space={2}>
+            <Text weight='semibold' size='xl' align='center'>No messages yet</Text>
+            <Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
+          </Stack>
+
+          <Button theme='primary'>Message someone</Button>
+        </Stack>
+      );
+    }
+  };
 
   return (
-    <div className='chat-panes'>
-      {mainWindowPane}
-      {panes.map((pane, i) => (
+    <div>
+      <Pane windowState={mainWindowState} index={0} main>
+        {chat?.id ? (
+          <ChatWindow chat={chat} closeChat={() => setChat(null)} closePane={handleMainWindowToggle} />
+        ) : (
+          <>
+            <ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={open} onToggle={handleMainWindowToggle} />
+
+            {open ? (
+              <Stack space={4} className='flex-grow h-full'>
+                <div className='px-4'>
+                  <Input
+                    type='text'
+                    autoFocus
+                    placeholder={intl.formatMessage(messages.searchPlaceholder)}
+                    className='rounded-full'
+                    value={value || ''}
+                    onChange={(event) => setValue(event.target.value)}
+                    isSearch
+                    append={
+                      <button onClick={clearValue}>
+                        <Icon
+                          src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+                          className='h-4 w-4 text-gray-700 dark:text-gray-600'
+                          aria-hidden='true'
+                        />
+                      </button>
+                    }
+                  />
+                </div>
+
+                {renderBody()}
+              </Stack>
+            ) : null}
+          </>
+        )}
+      </Pane>
+
+      {/* {panes.map((pane, i) => (
         <ChatWindow
           idx={i + 1}
           key={pane.get('chat_id')}
           chatId={pane.get('chat_id')}
           windowState={pane.get('state')}
         />
-      ))}
+      ))} */}
     </div>
   );
 };
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 4b825ffec..188fd5acb 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -5,16 +5,18 @@ import {
   closeChat,
   toggleChat,
 } from 'soapbox/actions/chats';
-import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import IconButton from 'soapbox/components/icon_button';
-import { HStack, Counter } from 'soapbox/components/ui';
+import { Avatar, HStack, Counter, Icon, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { IChat } from 'soapbox/queries/chats';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
 
 import ChatBox from './chat-box';
+import ChatPaneHeader from './chat-pane-header';
 import { Pane, WindowState } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -22,89 +24,66 @@ import type { Account as AccountEntity } from 'soapbox/types/entities';
 const getChat = makeGetChat();
 
 interface IChatWindow {
-  /** Position of the chat window on the screen, where 0 is rightmost. */
-  idx: number,
-  /** ID of the chat entity. */
-  chatId: string,
-  /** Whether the window is open or minimized. */
-  windowState: WindowState,
+  chat: IChat
+  closeChat(): void
+  closePane(): void
 }
 
 /** Floating desktop chat window. */
-const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
-  const dispatch = useAppDispatch();
-
-  const displayFqn = useAppSelector(getDisplayFqn);
-
-  const chat = useAppSelector(state => {
-    const chat = state.chats.items.get(chatId);
-    return chat ? getChat(state, chat.toJS() as any) : undefined;
-  });
-
-  const inputElem = useRef<HTMLTextAreaElement | null>(null);
-
-  const handleChatClose = (chatId: string) => {
-    return () => {
-      dispatch(closeChat(chatId));
-    };
-  };
-
-  const handleChatToggle = (chatId: string) => {
-    return () => {
-      dispatch(toggleChat(chatId));
-    };
-  };
-
-  const handleInputRef = (el: HTMLTextAreaElement) => {
-    inputElem.current = el;
-  };
-
-  const focusInput = () => {
-    inputElem.current?.focus();
-  };
-
-  useEffect(() => {
-    if (windowState === 'open') {
-      focusInput();
-    }
-  }, [windowState]);
-
+const ChatWindow: React.FC<IChatWindow> = ({ chat, closeChat, closePane }) => {
   if (!chat) return null;
-  const account = chat.account as unknown as AccountEntity;
-  const unreadCount = chat.unread;
-
-  const unreadIcon = (
-    <div className='mr-2 flex-none'>
-      <Counter count={unreadCount} />
-    </div>
-  );
-
-  const avatar = (
-    <HoverRefWrapper accountId={account.id}>
-      <Link to={`/@${account.acct}`}>
-        <Avatar account={account} size={18} />
-      </Link>
-    </HoverRefWrapper>
-  );
 
   return (
-    <Pane windowState={windowState} index={idx}>
-      <HStack space={2} className='pane__header'>
-        {unreadCount > 0 ? unreadIcon : avatar }
-        <button className='pane__title' onClick={handleChatToggle(chat.id)}>
-          @{getAcct(account, displayFqn)}
-        </button>
-        <div className='pane__close'>
-          <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
-        </div>
-      </HStack>
-      <div className='pane__content'>
-        <ChatBox
-          chatId={chat.id}
-          onSetInputRef={handleInputRef}
-        />
-      </div>
-    </Pane>
+    <>
+      <ChatPaneHeader
+        title={
+          <HStack alignItems='center' space={2}>
+            <button onClick={closeChat}>
+              <Icon
+                src={require('@tabler/icons/arrow-left.svg')}
+                className='h-6 w-6 text-gray-600 dark:text-gray-400'
+              />
+            </button>
+
+            <HStack alignItems='center' space={3}>
+              <Avatar src={chat.account.avatar} size={40} />
+
+              <Stack alignItems='start'>
+                <div className='flex items-center space-x-1 flex-grow'>
+                  <Text weight='semibold' truncate>{chat.account.display_name}</Text>
+                  {chat.account.verified && <VerificationBadge />}
+                </div>
+                <Text theme='muted' truncate>{chat.account.acct}</Text>
+              </Stack>
+            </HStack>
+          </HStack>
+        }
+        isToggleable={false}
+        isOpen
+        onToggle={closePane}
+      />
+
+      <Stack className='overflow-hidden flex-grow h-full' space={2}>
+        <ChatBox chat={chat} onSetInputRef={() => null} />
+      </Stack>
+    </>
+    // <Pane windowState={windowState} index={idx}>
+    //   <HStack space={2} className='pane__header'>
+    //     {unreadCount > 0 ? unreadIcon : avatar }
+    //     <button className='pane__title' onClick={handleChatToggle(chat.id)}>
+    //       @{getAcct(account, displayFqn)}
+    //     </button>
+    //     <div className='pane__close'>
+    //       <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+    //     </div>
+    //   </HStack>
+    //   <div className='pane__content'>
+    //     <ChatBox
+    //       chatId={chat.id}
+    //
+    //     />
+    //   </div>
+    // </Pane>
   );
 };
 
diff --git a/app/soapbox/features/chats/components/ui/pane.tsx b/app/soapbox/features/chats/components/ui/pane.tsx
index b8eda30e0..18e57ee80 100644
--- a/app/soapbox/features/chats/components/ui/pane.tsx
+++ b/app/soapbox/features/chats/components/ui/pane.tsx
@@ -21,9 +21,9 @@ const Pane: React.FC<IPane> = ({ windowState, index, children, main = false }) =
 
   return (
     <div
-      className={classNames('pane', {
-        'pane--main': main,
-        'h-14': windowState === 'minimized',
+      className={classNames('flex flex-col shadow-3xl bg-white dark:bg-gray-900 rounded-t-lg fixed bottom-0 right-1 w-96 z-[1000]', {
+        'h-[550px] max-h-[100vh]': windowState !== 'minimized',
+        'h-16': windowState === 'minimized',
       })}
       style={{ right: `${right}px` }}
     >
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 31d555f4a..82fb9308e 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -457,7 +457,7 @@ const UI: React.FC = ({ children }) => {
     dispatch(fetchAnnouncements());
 
     if (features.chats) {
-      dispatch(fetchChats());
+      // dispatch(fetchChats());
     }
 
     if (account.staff) {
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
new file mode 100644
index 000000000..8732ebc9b
--- /dev/null
+++ b/app/soapbox/queries/chats.ts
@@ -0,0 +1,103 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks';
+
+export interface IChat {
+  id: string
+  unread: number
+  created_by_account: number
+  last_message: null | string
+  created_at: Date
+  updated_at: Date
+  accepted: boolean
+  discarded_at: null | string
+  account: any
+}
+
+export interface IChatMessage {
+  account_id: string
+  chat_id: string
+  content: string
+  created_at: Date
+  id: string
+  unread: 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 useChatMessages = (chatId: string) => {
+  const api = useApi();
+
+  const getChatMessages = async (chatId: string, pageParam?: any): Promise<{ result: IChatMessage[], maxId: string, hasMore: boolean }> => {
+    const { data, headers } = await api.get(`/api/v1/pleroma/chats/${chatId}/messages`, {
+      params: {
+        max_id: pageParam?.maxId,
+      },
+    });
+
+    const hasMore = !!headers.link;
+    const result = data.sort(reverseOrder);
+    const nextMaxId = result[0]?.id;
+
+    return {
+      result,
+      maxId: nextMaxId,
+      hasMore,
+    };
+  };
+
+  const queryInfo = useInfiniteQuery(['chats', 'messages', chatId], ({ pageParam }) => getChatMessages(chatId, pageParam), {
+    keepPreviousData: true,
+    getNextPageParam: (config) => {
+      if (config.hasMore) {
+        return { maxId: config.maxId };
+      }
+
+      return undefined;
+    },
+  });
+
+  const data = queryInfo.data?.pages.reduce<IChatMessage[]>(
+    (prev: IChatMessage[], curr) => [...curr.result, ...prev],
+    [],
+  );
+
+  return {
+    ...queryInfo,
+    data,
+  };
+};
+const useChats = () => {
+  const api = useApi();
+
+  const getChats = async () => {
+    const { data } = await api.get('/api/v1/pleroma/chats');
+    return data;
+  };
+
+  const chatsQuery = useQuery<IChat[]>(['chats'], getChats, {
+    placeholderData: [],
+  });
+
+  const getOrCreateChatByAccountId = (accountId: string) => api.post<IChat>(`/api/v1/pleroma/chats/by-account-id/${accountId}`);
+
+  return { chatsQuery, getOrCreateChatByAccountId };
+};
+
+const useChat = (chatId: string) => {
+  const api = useApi();
+
+  const markChatAsRead = () => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/read`);
+
+  const createChatMessage = (chatId: string, content: string) => {
+    return api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/messages`, { content });
+  };
+
+  return { createChatMessage, markChatAsRead };
+};
+
+export { useChat, useChats, useChatMessages };
diff --git a/app/soapbox/queries/search.ts b/app/soapbox/queries/search.ts
new file mode 100644
index 000000000..2b3fd1e70
--- /dev/null
+++ b/app/soapbox/queries/search.ts
@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks';
+
+export default function useAccountSearch(q: string) {
+  const api = useApi();
+
+  const getAccountSearch = async(q: string) => {
+    if (typeof q === 'undefined') {
+      return null;
+    }
+
+    const { data } = await api.get('/api/v1/accounts/search', {
+      params: {
+        q,
+        followers: true,
+      },
+    });
+
+    return data;
+  };
+
+  return useQuery(['search', 'accounts', q], () => getAccountSearch(q), {
+    keepPreviousData: true,
+    placeholderData: [],
+  });
+}
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index c9eac3688..0a04e0a92 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -196,7 +196,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * Pleroma chats API.
      * @see {@link https://docs.pleroma.social/backend/development/API/chats/}
      */
-    chats: v.software === PLEROMA && gte(v.version, '2.1.0'),
+    chats: v.software === TRUTHSOCIAL || (v.software === PLEROMA && gte(v.version, '2.1.0')),
 
     /**
      * Paginated chats API.
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 8be2978e3..52b061c3c 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -1,5 +1,5 @@
 .dropdown-menu {
-  @apply absolute bg-white dark:bg-gray-900 z-40 rounded-md shadow-lg py-1 w-56 dark:ring-2 dark:ring-primary-700 focus:outline-none;
+  @apply absolute bg-white dark:bg-gray-900 z-[1001] rounded-md shadow-lg py-1 w-56 dark:ring-2 dark:ring-primary-700 focus:outline-none;
 
   &.left { transform-origin: 100% 50%; }
   &.top { transform-origin: 50% 100%; }