Start changing the way search works

app/soapbox/contexts/chat-context.tsx

@@ -22,6 +22,7 @@ const ChatProvider: React.FC = ({ children }) => {
 
   const [chat, setChat] = useState<IChat | null>(null);
   const [isEditing, setEditing] = useState<boolean>(false);
+  const [isSearching, setSearching] = useState<boolean>(false);
 
   const mainWindowState = settings.getIn(['chats', 'mainWindow']) as WindowState;
   const needsAcceptance = !chat?.accepted && chat?.created_by_account !== account?.id;
@@ -35,9 +36,11 @@ const ChatProvider: React.FC = ({ children }) => {
     needsAcceptance,
     isOpen,
     isEditing,
+    isSearching,
     setEditing,
+    setSearching,
     toggleChatPane,
-  }), [chat, needsAcceptance, isOpen, isEditing]);
+  }), [chat, needsAcceptance, isOpen, isEditing, isSearching]);
 
   return (
     <ChatContext.Provider value={value}>
@@ -48,11 +51,13 @@ const ChatProvider: React.FC = ({ children }) => {
 
 interface IChatContext {
   chat: IChat | null
-  isOpen: boolean
   isEditing: boolean
+  isOpen: boolean
+  isSearching: boolean
   needsAcceptance: boolean
   setChat: React.Dispatch<React.SetStateAction<IChat | null>>
   setEditing: React.Dispatch<React.SetStateAction<boolean>>
+  setSearching: React.Dispatch<React.SetStateAction<boolean>>
   toggleChatPane(): void
 }
 

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

@@ -15,14 +15,15 @@ import Blankslate from './chat-pane/blankslate';
 interface IChatList {
   onClickChat: (chat: any) => void,
   useWindowScroll?: boolean,
+  searchValue?: string
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
+const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue }) => {
   const dispatch = useDispatch();
 
   const chatListRef = useRef(null);
 
-  const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats();
+  const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats(searchValue);
 
   const [isNearBottom, setNearBottom] = useState<boolean>(false);
   const [isNearTop, setNearTop] = useState<boolean>(true);

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

@@ -343,12 +343,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
   }, [isFetched]);
 
   // Store the scroll position.
-  useLayoutEffect(() => {
+  // useLayoutEffect(() => {
-    if (node.current) {
+  //   if (node.current) {
-      const { scrollHeight, scrollTop } = node.current;
+  //     const { scrollHeight, scrollTop } = node.current;
-      scrollBottom.current = scrollHeight - scrollTop;
+  //     scrollBottom.current = scrollHeight - scrollTop;
-    }
+  //   }
-  });
+  // });
 
   // Stick scrollbar to bottom.
   useEffect(() => {

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

@@ -13,7 +13,15 @@ interface IChatPaneHeader {
 }
 
 const ChatPaneHeader = (props: IChatPaneHeader) => {
-  const { onToggle, isOpen, isToggleable = true, title, unreadCount, secondaryAction, secondaryActionIcon } = props;
+  const {
+    isOpen,
+    isToggleable = true,
+    onToggle,
+    secondaryAction,
+    secondaryActionIcon,
+    title,
+    unreadCount,
+  } = props;
 
   const ButtonComp = isToggleable ? 'button' : 'div';
   const buttonProps: HTMLAttributes<HTMLButtonElement | HTMLDivElement> = {};

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

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import snackbar from 'soapbox/actions/snackbar';
-import { Avatar, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch, useDebounce } from 'soapbox/hooks';
@@ -15,11 +15,12 @@ import useAccountSearch from 'soapbox/queries/search';
 
 import ChatList from '../chat-list';
 import ChatPaneHeader from '../chat-pane-header';
+import ChatSearch from '../chat-search';
 import ChatWindow from '../chat-window';
 import { Pane } from '../ui';
 
 const messages = defineMessages({
-  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Search inbox' },
 });
 
 const ChatPane = () => {
@@ -27,31 +28,24 @@ const ChatPane = () => {
   const dispatch = useAppDispatch();
   const debounce = useDebounce;
 
-  const { chat, setChat, isOpen, toggleChatPane } = useChatContext();
-  const { chatsQuery: { data: chats }, getOrCreateChatByAccountId } = useChats();
-
   const [value, setValue] = useState<string>();
   const debouncedValue = debounce(value as string, 300);
 
-  const { data: accounts } = useAccountSearch(debouncedValue);
+  const { chat, setChat, isOpen, isSearching, setSearching, toggleChatPane } = useChatContext();
+  const { chatsQuery: { data: chats } } = useChats(debouncedValue);
+  // const chats: IChat[] = [];
+
+  // Screens
+  // 1. Search + Chats
+  // 2. Search + empty
+  // 3. User search
+
 
   const unreadCount = sumBy(chats, (chat) => chat.unread);
 
-  const isSearching = accounts && accounts.length > 0;
+  const hasSearchValue = Number(value?.length) > 0;
-  const hasSearchValue = value && value.length > 0;
+  console.log('hasSearchValue', hasSearchValue);
 
-  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']);
-    },
-  });
 
   const handleClickChat = (chat: IChat) => setChat(chat);
 
@@ -62,53 +56,8 @@ const ChatPane = () => {
   };
 
   const renderBody = () => {
-    if (isSearching) {
+    if (hasSearchValue || Number(chats?.length) > 0) {
       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 dark:hover:bg-gray-800'
-              onClick={() => {
-                handleClickOnSearchResult.mutate(account.id);
-                clearValue();
-              }}
-            >
-              <HStack alignItems='center' space={2}>
-                <Avatar src={account.avatar} size={40} />
-
-                <Stack alignItems='start'>
-                  <div className='flex items-center space-x-1 flex-grow'>
-                    <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
-                    {account.verified && <VerificationBadge />}
-                  </div>
-                  <Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
-                </Stack>
-              </HStack>
-            </button>
-          ))}
-        </Stack>
-      );
-    } else {
-      return <ChatList onClickChat={handleClickChat} useWindowScroll={false} />;
-    }
-  };
-
-  // Active chat
-  if (chat?.id) {
-    return (
-      <Pane isOpen={isOpen} index={0} main>
-        <ChatWindow />
-      </Pane>
-    );
-  }
-
-  return (
-    <Pane isOpen={isOpen} index={0} main>
-      <ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={isOpen} onToggle={toggleChatPane} />
-
-      {isOpen ? (
         <Stack space={4} className='flex-grow h-full'>
           <div className='px-4'>
             <Input
@@ -131,9 +80,64 @@ const ChatPane = () => {
             />
           </div>
 
-          {renderBody()}
+          {Number(chats?.length) > 0 ? (
+            <ChatList
+              searchValue={debouncedValue}
+              onClickChat={handleClickChat}
+              useWindowScroll={false}
+            />
+          ) : (
+            <Text>no results</Text>
+          )}
         </Stack>
-      ) : null}
+      );
+    } else if (chats?.length === 0) {
+      return (
+        <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
+          <Stack space={4}>
+            <Stack space={1} className='max-w-[85%] mx-auto'>
+              <Text size='lg' weight='bold' align='center'>No messages yet</Text>
+              <Text theme='muted' align='center'>
+                You can start a conversation with anyone that follows you.
+              </Text>
+            </Stack>
+
+            <div className='mx-auto'>
+              <Button theme='primary' onClick={() => setSearching(true)}>
+                Message someone
+              </Button>
+            </div>
+          </Stack>
+        </Stack>
+      );
+    }
+  };
+
+  // Active chat
+  if (chat?.id) {
+    return (
+      <Pane isOpen={isOpen} index={0} main>
+        <ChatWindow />
+      </Pane>
+    );
+  }
+
+  if (isSearching) {
+    return <ChatSearch />;
+  }
+
+  return (
+    <Pane isOpen={isOpen} index={0} main>
+      <ChatPaneHeader
+        title='Messages'
+        unreadCount={unreadCount}
+        isOpen={isOpen}
+        onToggle={toggleChatPane}
+        secondaryAction={() => setSearching(true)}
+        secondaryActionIcon={require('@tabler/icons/edit.svg')}
+      />
+
+      {isOpen ? renderBody() : null}
     </Pane>
   );
 };

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

@@ -0,0 +1,124 @@
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import React, { useState } from 'react';
+
+import snackbar from 'soapbox/actions/snackbar';
+import { Avatar, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useAppDispatch, useDebounce } from 'soapbox/hooks';
+import { useChats } from 'soapbox/queries/chats';
+import { queryClient } from 'soapbox/queries/client';
+import useAccountSearch from 'soapbox/queries/search';
+
+import ChatPaneHeader from './chat-pane-header';
+import { Pane } from './ui';
+
+const ChatSearch = () => {
+  const debounce = useDebounce;
+  const dispatch = useAppDispatch();
+
+  const { isOpen, setChat, setSearching, toggleChatPane } = useChatContext();
+  const { getOrCreateChatByAccountId } = useChats();
+
+  const [value, setValue] = useState<string>();
+  const debouncedValue = debounce(value as string, 300);
+
+  const { data: accounts } = useAccountSearch(debouncedValue);
+
+  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);
+      queryClient.invalidateQueries(['chats']);
+    },
+  });
+
+  const clearValue = () => {
+    if (hasSearchValue) {
+      setValue('');
+    }
+  };
+
+  return (
+    <Pane isOpen={isOpen} index={0} main>
+      <ChatPaneHeader
+        title={
+          <HStack alignItems='center' space={2}>
+            <button onClick={() => setSearching(false)}>
+              <Icon
+                src={require('@tabler/icons/arrow-left.svg')}
+                className='h-6 w-6 text-gray-600 dark:text-gray-400'
+              />
+            </button>
+
+            <Text size='sm' weight='bold' truncate>Messages</Text>
+          </HStack>
+        }
+        isOpen={isOpen}
+        isToggleable={false}
+        onToggle={toggleChatPane}
+      />
+
+      {isOpen ? (
+        <Stack space={4} className='flex-grow h-full'>
+          <div className='px-4'>
+            <Input
+              type='text'
+              autoFocus
+              placeholder='Type a name'
+              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>
+
+          <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 dark:hover:bg-gray-800'
+                onClick={() => {
+                  handleClickOnSearchResult.mutate(account.id);
+                  clearValue();
+                }}
+              >
+                <HStack alignItems='center' space={2}>
+                  <Avatar src={account.avatar} size={40} />
+
+                  <Stack alignItems='start'>
+                    <div className='flex items-center space-x-1 flex-grow'>
+                      <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
+                      {account.verified && <VerificationBadge />}
+                    </div>
+                    <Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
+                  </Stack>
+                </HStack>
+              </button>
+            ))}
+          </Stack>
+        </Stack>
+      ) : null}
+    </Pane>
+  );
+};
+
+export default ChatSearch;

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

@@ -10,15 +10,16 @@ import ChatSettings from './chat-settings';
 
 /** Floating desktop chat window. */
 const ChatWindow = () => {
-  const { chat, setChat, isOpen, isEditing, needsAcceptance, setEditing, toggleChatPane } = useChatContext();
+  const { chat, setChat, isOpen, isEditing, needsAcceptance, setEditing, setSearching, toggleChatPane } = useChatContext();
 
   const inputRef = useRef<HTMLTextAreaElement>();
 
   const closeChat = () => setChat(null);
 
-  const openAndFocusChat = () => {
+  const openSearch = () => {
     toggleChatPane();
-    inputRef.current?.focus();
+    setSearching(true);
+    setChat(null);
   };
 
   const openChatSettings = () => setEditing(true);
@@ -28,7 +29,7 @@ const ChatWindow = () => {
       return undefined;
     }
 
-    return isOpen ? openChatSettings : openAndFocusChat;
+    return isOpen ? openChatSettings : openSearch;
   };
 
   if (!chat) return null;

app/soapbox/locales/ar.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ast.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/bg.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/bn.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/br.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ca.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Notificació amb so desactivada",
   "chats.audio_toggle_on": "Notificació amb so activada",
   "chats.dividers.today": "Avui",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Esperant aprovació",
   "column.admin.dashboard": "Tauler",
   "column.admin.moderation_log": "Registre de moderació",

app/soapbox/locales/co.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/cs.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio upozornění vypnuté",
   "chats.audio_toggle_on": "Audio upozornění zapnoté",
   "chats.dividers.today": "Dnes",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/cy.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/da.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/el.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/en.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/eo.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/es-AR.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/es.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/et.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/eu.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/fa.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/fi.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/fr.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ga.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/gl.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/hi.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/hr.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/hu.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/hy.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/id.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/io.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ja.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "音声通知をOFF",
   "chats.audio_toggle_on": "音声通知をON",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ka.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/kk.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ko.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/lt.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/lv.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/mk.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ms.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/nl.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/nn.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/no.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/oc.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/pt-BR.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/pt.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Notificação de Som desligada",
   "chats.audio_toggle_on": "Notificação de Som ligada",
   "chats.dividers.today": "Hoje",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Aguardando Aprovação",
   "column.admin.dashboard": "Painel de Controlo",
   "column.admin.moderation_log": "Histórico de moderação",

app/soapbox/locales/ro.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ru.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Отключить аудио увидомление",
   "chats.audio_toggle_on": "Включить аудио увидомление",
   "chats.dividers.today": "Сегодня",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Ожидает Одобрения",
   "column.admin.dashboard": "Стена",
   "column.admin.moderation_log": "Лог модерации",

app/soapbox/locales/sk.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/sl.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/sq.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/sr-Latn.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/sr.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/sv.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/ta.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/te.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/th.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/tr.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/uk.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Приборна панель",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/zh-HK.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/locales/zh-TW.json

@@ -176,7 +176,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Type a name",
+  "chats.search_placeholder": "Search inbox",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",

app/soapbox/queries/chats.ts

@@ -89,7 +89,7 @@ const useChatMessages = (chatId: string) => {
   };
 };
 
-const useChats = () => {
+const useChats = (search?: string) => {
   const api = useApi();
   const dispatch = useAppDispatch();
 
@@ -97,6 +97,7 @@ const useChats = () => {
     const { data, headers } = await api.get<IChat[]>('/api/v1/pleroma/chats', {
       params: {
         max_id: pageParam?.maxId,
+        search,
       },
     });
 
@@ -113,7 +114,7 @@ const useChats = () => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['chats'], ({ pageParam }) => getChats(pageParam), {
+  const queryInfo = useInfiniteQuery(['chats', search], ({ pageParam }) => getChats(pageParam), {
     keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {