From 1a4a6382d3d094fe437a44083c934bd03fb0de57 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 14:34:07 -0500
Subject: [PATCH 01/11] Make account.chats_onboarded true by default for
 backwards-compatibility

---
 app/soapbox/normalizers/account.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/normalizers/account.ts b/app/soapbox/normalizers/account.ts
index 64c5365db..63ad77c48 100644
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@@ -27,7 +27,7 @@ export const AccountRecord = ImmutableRecord({
   avatar_static: '',
   birthday: '',
   bot: false,
-  chats_onboarded: false,
+  chats_onboarded: true,
   created_at: '',
   discoverable: false,
   display_name: '',

From 2e728d99f9460f1e52461a57f181197464f7fed3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 14:36:46 -0500
Subject: [PATCH 02/11] ChatWidget: remove 'direct' streaming (it uses the
 'user' stream)

---
 .../features/chats/components/chat-widget.tsx      | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-widget.tsx b/app/soapbox/features/chats/components/chat-widget.tsx
index c403274ed..bd72f1e02 100644
--- a/app/soapbox/features/chats/components/chat-widget.tsx
+++ b/app/soapbox/features/chats/components/chat-widget.tsx
@@ -1,26 +1,16 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
-import { connectDirectStream } from 'soapbox/actions/streaming';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { useOwnAccount } from 'soapbox/hooks';
 
 import ChatPane from './chat-pane/chat-pane';
 
 const ChatWidget = () => {
   const account = useOwnAccount();
-  const dispatch = useAppDispatch();
 
   const path = location.pathname;
   const shouldHideWidget = Boolean(path.match(/^\/chats/));
 
-  useEffect(() => {
-    const disconnect = dispatch(connectDirectStream());
-
-    return (() => {
-      disconnect();
-    });
-  }, []);
-
   if (!account?.chats_onboarded || shouldHideWidget) {
     return null;
   }

From 46d309ae4580e9a5d1a866a1a2f2f86560979073 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 14:58:31 -0500
Subject: [PATCH 03/11] ChatListItem: restrict height of last_message content

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

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index e600f9859..5b9571870 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -38,7 +38,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
                 weight='medium'
                 theme='muted'
                 truncate
-                className='w-full truncate-child pointer-events-none'
+                className='w-full h-5 truncate-child pointer-events-none'
                 data-testid='chat-last-message'
                 dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
               />

From fa919c217ba83d48e49d099a5ad697448b63b6e3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 15:24:11 -0500
Subject: [PATCH 04/11] Create ChatSearchInput component

---
 .../chats/components/chat-pane/chat-pane.tsx  | 26 ++--------
 .../chats/components/chat-search-input.tsx    | 49 +++++++++++++++++++
 2 files changed, 53 insertions(+), 22 deletions(-)
 create mode 100644 app/soapbox/features/chats/components/chat-search-input.tsx

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 6efb92f66..02d3a0e2b 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,14 +1,14 @@
 import sumBy from 'lodash/sumBy';
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Input, Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useDebounce } from 'soapbox/hooks';
 import { IChat, useChats } from 'soapbox/queries/chats';
 
 import ChatList from '../chat-list';
 import ChatPaneHeader from '../chat-pane-header';
+import ChatSearchInput from '../chat-search-input';
 import ChatSearch from '../chat-search/chat-search';
 import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
 import ChatWindow from '../chat-window';
@@ -16,12 +16,7 @@ import { Pane } from '../ui';
 
 import Blankslate from './blankslate';
 
-const messages = defineMessages({
-  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Search inbox' },
-});
-
 const ChatPane = () => {
-  const intl = useIntl();
   const debounce = useDebounce;
 
   const [value, setValue] = useState<string>();
@@ -50,23 +45,10 @@ const ChatPane = () => {
       return (
         <Stack space={4} className='flex-grow h-full'>
           <div className='px-4'>
-            <Input
-              type='text'
-              autoFocus
-              placeholder={intl.formatMessage(messages.searchPlaceholder)}
-              className='rounded-full'
+            <ChatSearchInput
               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>
-              }
+              onClear={clearValue}
             />
           </div>
 
diff --git a/app/soapbox/features/chats/components/chat-search-input.tsx b/app/soapbox/features/chats/components/chat-search-input.tsx
new file mode 100644
index 000000000..0611354ea
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-search-input.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Icon, Input } from 'soapbox/components/ui';
+import { useDebounce } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Search inbox' },
+});
+
+interface IChatSearchInput {
+  /** Search term. */
+  value: string,
+  /** Callback when the search value changes. */
+  onChange: React.ChangeEventHandler<HTMLInputElement>,
+  /** Callback when the input is cleared. */
+  onClear: React.MouseEventHandler<HTMLButtonElement>,
+}
+
+/** Search input for filtering chats. */
+const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear }) => {
+  const intl = useIntl();
+
+  const debouncedValue = useDebounce(value, 300);
+  const hasSearchValue = Number(debouncedValue?.length) > 0;
+
+  return (
+    <Input
+      type='text'
+      autoFocus
+      placeholder={intl.formatMessage(messages.searchPlaceholder)}
+      className='rounded-full'
+      value={value}
+      onChange={onChange}
+      isSearch
+      append={
+        <button onClick={onClear}>
+          <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>
+      }
+    />
+  );
+};
+
+export default ChatSearchInput;
\ No newline at end of file

From c12999a4388ef851a9f015e0ce66f88325481527 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 16:04:52 -0500
Subject: [PATCH 05/11] Chats: use v2 endpoint if supported

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

diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 0c472b36d..784fbb5e5 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -6,7 +6,7 @@ import snackbar from 'soapbox/actions/snackbar';
 import { getNextLink } from 'soapbox/api';
 import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeChatMessage } from 'soapbox/normalizers';
 
 import { queryClient } from './client';
@@ -102,10 +102,12 @@ const useChatMessages = (chatId: string) => {
 const useChats = (search?: string) => {
   const api = useApi();
   const dispatch = useAppDispatch();
+  const features = useFeatures();
 
   const getChats = async(pageParam?: any): Promise<PaginatedResult<IChat>> => {
+    const endpoint = features.chatsV2 ? '/api/v2/pleroma/chats' : '/api/v1/pleroma/chats';
     const nextPageLink = pageParam?.link;
-    const uri = nextPageLink || '/api/v1/pleroma/chats';
+    const uri = nextPageLink || endpoint;
     const response = await api.get<IChat[]>(uri, {
       params: {
         search,

From 075cb159409b978ba163e8bb761bb5f11e80f484 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 16:28:05 -0500
Subject: [PATCH 06/11] Add utils/queries, refactor streaming

---
 app/soapbox/actions/streaming.ts | 22 +++--------------
 app/soapbox/queries/chats.ts     | 11 +++------
 app/soapbox/utils/queries.ts     | 42 ++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 app/soapbox/utils/queries.ts

diff --git a/app/soapbox/actions/streaming.ts b/app/soapbox/actions/streaming.ts
index e4434d237..5ec405464 100644
--- a/app/soapbox/actions/streaming.ts
+++ b/app/soapbox/actions/streaming.ts
@@ -1,6 +1,6 @@
 import { getSettings } from 'soapbox/actions/settings';
 import messages from 'soapbox/locales/messages';
-import { queryClient } from 'soapbox/queries/client';
+import { updatePageItem, appendPageItem } from 'soapbox/utils/queries';
 import { play, soundCache } from 'soapbox/utils/sounds';
 
 import { connectStream } from '../stream';
@@ -24,8 +24,6 @@ import {
   processTimelineUpdate,
 } from './timelines';
 
-import type { InfiniteData } from '@tanstack/react-query';
-import type { PaginatedResult } from 'soapbox/queries/chats';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity, Chat, ChatMessage } from 'soapbox/types/entities';
 
@@ -56,24 +54,10 @@ interface ChatPayload extends Omit<Chat, 'last_message'> {
 const updateChat = (payload: ChatPayload) => {
   const { last_message: lastMessage } = payload;
 
-  queryClient.setQueriesData<InfiniteData<PaginatedResult<Chat>>>(['chats', 'search'], (data) => {
-    if (data) {
-      const pages = data.pages.map(page => {
-        const result = page.result.map(chat => chat.id === payload.id ? payload as any : chat);
-        return { ...page, result };
-      });
-      return { ...data, pages };
-    }
-  });
+  updatePageItem<Chat>(['chats', 'search'], payload as any, (o, n) => o.id === n.id);
 
   if (lastMessage) {
-    queryClient.setQueryData<InfiniteData<PaginatedResult<ChatMessage>>>(['chats', 'messages', payload.id], (data) => {
-      if (data) {
-        const pages = [...data.pages];
-        pages[0] = { ...pages[0], result: [...pages[0].result, lastMessage] };
-        return { ...data, pages };
-      }
-    });
+    appendPageItem(['chats', 'messages', payload.id], lastMessage);
   }
 };
 
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 784fbb5e5..d327a4eee 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -8,6 +8,7 @@ import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeChatMessage } from 'soapbox/normalizers';
+import { flattenPages } from 'soapbox/utils/queries';
 
 import { queryClient } from './client';
 
@@ -88,10 +89,7 @@ const useChatMessages = (chatId: string) => {
     },
   });
 
-  const data = queryInfo.data?.pages.reduce<IChatMessage[]>(
-    (prev: IChatMessage[], curr) => [...curr.result, ...prev],
-    [],
-  );
+  const data = flattenPages(queryInfo);
 
   return {
     ...queryInfo,
@@ -139,10 +137,7 @@ const useChats = (search?: string) => {
     },
   });
 
-  const data = queryInfo.data?.pages.reduce<IChat[]>(
-    (prev: IChat[], curr) => [...prev, ...curr.result],
-    [],
-  );
+  const data = flattenPages(queryInfo);
 
   const chatsQuery = {
     ...queryInfo,
diff --git a/app/soapbox/utils/queries.ts b/app/soapbox/utils/queries.ts
new file mode 100644
index 000000000..1a9961b43
--- /dev/null
+++ b/app/soapbox/utils/queries.ts
@@ -0,0 +1,42 @@
+import { queryClient } from 'soapbox/queries/client';
+
+import type { InfiniteData, QueryKey, UseInfiniteQueryResult } from '@tanstack/react-query';
+import type { PaginatedResult } from 'soapbox/queries/chats';
+
+/** Flatten paginated results into a single array. */
+const flattenPages = <T>(queryInfo: UseInfiniteQueryResult<PaginatedResult<T>>) => {
+  return queryInfo.data?.pages.reduce<T[]>(
+    (prev: T[], curr) => [...prev, ...curr.result],
+    [],
+  );
+};
+
+/** Traverse pages and update the item inside if found. */
+const updatePageItem = <T>(queryKey: QueryKey, newItem: T, isItem: (item: T, newItem: T) => boolean) => {
+  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+    if (data) {
+      const pages = data.pages.map(page => {
+        const result = page.result.map(item => isItem(item, newItem) ? newItem : item);
+        return { ...page, result };
+      });
+      return { ...data, pages };
+    }
+  });
+};
+
+/** Insert the new item at the beginning of the first page. */
+const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
+  queryClient.setQueryData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+    if (data) {
+      const pages = [...data.pages];
+      pages[0] = { ...pages[0], result: [...pages[0].result, newItem] };
+      return { ...data, pages };
+    }
+  });
+};
+
+export {
+  flattenPages,
+  updatePageItem,
+  appendPageItem,
+};
\ No newline at end of file

From 10b9a4eb4e0ae46cb1f188fa6df8ae04bccda066 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 16:34:20 -0500
Subject: [PATCH 07/11] Chats: don't make mark as read hit the API again

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

diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index d327a4eee..0de56b8b4 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -8,7 +8,7 @@ import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeChatMessage } from 'soapbox/normalizers';
-import { flattenPages } from 'soapbox/utils/queries';
+import { flattenPages, updatePageItem } from 'soapbox/utils/queries';
 
 import { queryClient } from './client';
 
@@ -155,7 +155,7 @@ const useChat = (chatId: string) => {
 
   const markChatAsRead = (lastReadId: string) => {
     api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/read`, { last_read_id: lastReadId })
-      .then(() => queryClient.invalidateQueries(['chats', 'search']))
+      .then(({ data }) => updatePageItem(['chats', 'search'], data, (o, n) => o.id === n.id))
       .catch(() => null);
   };
 

From 7cf19433649d3176f6335c26d4c899f358a0b5ee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 16:52:31 -0500
Subject: [PATCH 08/11] Add chatsSearch feature

---
 .../chats/components/chat-pane/chat-pane.tsx  | 19 +++++++++++--------
 app/soapbox/utils/features.ts                 |  6 ++++++
 2 files changed, 17 insertions(+), 8 deletions(-)

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 02d3a0e2b..9ab8252e0 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useDebounce } from 'soapbox/hooks';
+import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat, useChats } from 'soapbox/queries/chats';
 
 import ChatList from '../chat-list';
@@ -17,6 +17,7 @@ import { Pane } from '../ui';
 import Blankslate from './blankslate';
 
 const ChatPane = () => {
+  const features = useFeatures();
   const debounce = useDebounce;
 
   const [value, setValue] = useState<string>();
@@ -44,13 +45,15 @@ const ChatPane = () => {
     if (hasSearchValue || Number(chats?.length) > 0) {
       return (
         <Stack space={4} className='flex-grow h-full'>
-          <div className='px-4'>
-            <ChatSearchInput
-              value={value || ''}
-              onChange={(event) => setValue(event.target.value)}
-              onClear={clearValue}
-            />
-          </div>
+          {features.chatsSearch && (
+            <div className='px-4'>
+              <ChatSearchInput
+                value={value || ''}
+                onChange={(event) => setValue(event.target.value)}
+                onClear={clearValue}
+              />
+            </div>
+          )}
 
           {Number(chats?.length) > 0 ? (
             <ChatList
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index c82c5104f..211027efb 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -204,6 +204,12 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     chats: v.software === TRUTHSOCIAL || (v.software === PLEROMA && gte(v.version, '2.1.0')),
 
+    /**
+     * Ability to search among chats.
+     * @see GET /api/v1/pleroma/chats
+     */
+    chatsSearch: v.software === TRUTHSOCIAL,
+
     /**
      * Paginated chats API.
      * @see GET /api/v2/chats

From cbd70891669530ceb4358eae43180dde202f6d18 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 17:06:42 -0500
Subject: [PATCH 09/11] ChatPageSidebar: refactor search

---
 .../components/chat-page-sidebar.tsx          | 50 +++++++------------
 .../chats/components/chat-search-input.tsx    |  6 +--
 2 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index a3acb2ceb..bdaeb38c2 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,46 +1,26 @@
-import { useMutation } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
-import AccountSearch from 'soapbox/components/account_search';
 import { CardTitle, Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch } from 'soapbox/hooks';
-import { IChat, useChats } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
+import { useDebounce, useFeatures } from 'soapbox/hooks';
+import { IChat } from 'soapbox/queries/chats';
 
 import ChatList from '../../chat-list';
+import ChatSearchInput from '../../chat-search-input';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Messages' },
-  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
 });
 
 const ChatPageSidebar = () => {
-  const dispatch = useAppDispatch();
   const intl = useIntl();
+  const features = useFeatures();
 
+  const [search, setSearch] = useState('');
   const { setChat } = useChatContext();
-  const { getOrCreateChatByAccountId } = useChats();
 
-  const handleSuggestion = (accountId: string) => {
-    handleClickOnSearchResult.mutate(accountId);
-  };
-
-  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);
-      queryClient.invalidateQueries(['chats', 'search']);
-    },
-  });
+  const debouncedSearch = useDebounce(search, 300);
 
   const handleClickChat = (chat: IChat) => setChat(chat);
 
@@ -49,14 +29,20 @@ const ChatPageSidebar = () => {
       <Stack space={4} className='px-4 pt-4'>
         <CardTitle title={intl.formatMessage(messages.title)} />
 
-        <AccountSearch
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-          onSelected={handleSuggestion}
-        />
+        {features.chatsSearch && (
+          <ChatSearchInput
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            onClear={() => setSearch('')}
+          />
+        )}
       </Stack>
 
       <Stack className='flex-grow h-full'>
-        <ChatList onClickChat={handleClickChat} />
+        <ChatList
+          onClickChat={handleClickChat}
+          searchValue={debouncedSearch}
+        />
       </Stack>
     </Stack>
   );
diff --git a/app/soapbox/features/chats/components/chat-search-input.tsx b/app/soapbox/features/chats/components/chat-search-input.tsx
index 0611354ea..557e8a616 100644
--- a/app/soapbox/features/chats/components/chat-search-input.tsx
+++ b/app/soapbox/features/chats/components/chat-search-input.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon, Input } from 'soapbox/components/ui';
-import { useDebounce } from 'soapbox/hooks';
 
 const messages = defineMessages({
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Search inbox' },
@@ -21,9 +20,6 @@ interface IChatSearchInput {
 const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear }) => {
   const intl = useIntl();
 
-  const debouncedValue = useDebounce(value, 300);
-  const hasSearchValue = Number(debouncedValue?.length) > 0;
-
   return (
     <Input
       type='text'
@@ -36,7 +32,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       append={
         <button onClick={onClear}>
           <Icon
-            src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+            src={value.length ? 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'
           />

From 3c9ffd30b1adf5fa9ebbf52d01f8b67b82a15dc7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 17:18:27 -0500
Subject: [PATCH 10/11] ChatPageSidebar: add new chat icon (non-functional)

---
 .../chat-page/components/chat-page-sidebar.tsx        | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index bdaeb38c2..fec90dc40 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { CardTitle, Stack } from 'soapbox/components/ui';
+import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat } from 'soapbox/queries/chats';
@@ -27,7 +27,14 @@ const ChatPageSidebar = () => {
   return (
     <Stack space={4} className='h-full'>
       <Stack space={4} className='px-4 pt-4'>
-        <CardTitle title={intl.formatMessage(messages.title)} />
+        <HStack alignItems='center' justifyContent='between'>
+          <CardTitle title={intl.formatMessage(messages.title)} />
+
+          <IconButton
+            src={require('@tabler/icons/edit.svg')}
+            iconClassName='w-5 h-5 text-gray-600'
+          />
+        </HStack>
 
         {features.chatsSearch && (
           <ChatSearchInput

From c8adde735f1a16c36b4adc87602456005d8f83c3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 17:38:00 -0500
Subject: [PATCH 11/11] ChatPage: fix height on mobile (where ThumbNavigation
 is present)

---
 .../features/chats/components/chat-page/chat-page.tsx        | 5 ++++-
 app/soapbox/pages/chats-page.tsx                             | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 74a2e01b4..062aa5b18 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -21,7 +21,10 @@ const ChatPage = () => {
     const { top } = containerRef.current.getBoundingClientRect();
     const fullHeight = document.body.offsetHeight;
 
-    setHeight(fullHeight - top);
+    // On mobile, account for bottom navigation.
+    const offset = document.body.clientWidth < 976 ? -61 : 0;
+
+    setHeight(fullHeight - top + offset);
   };
 
   useEffect(() => {
diff --git a/app/soapbox/pages/chats-page.tsx b/app/soapbox/pages/chats-page.tsx
index 08bdf078f..ae9f5d6d9 100644
--- a/app/soapbox/pages/chats-page.tsx
+++ b/app/soapbox/pages/chats-page.tsx
@@ -3,7 +3,7 @@ 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-16 sm:pb-0'>
+    <div className='md:col-span-12 lg:col-span-9'>
       {children}
     </div>
   );