Merge remote-tracking branch 'origin/chats' into chats

app/soapbox/components/account_search.tsx

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 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';
 import { InputThemes } from './ui/input/input';
@@ -25,6 +24,8 @@ interface IAccountSearch {
   hidePortal?: boolean,
   theme?: InputThemes,
   showButtons?: boolean,
+  /** Search only among people who follow you (TruthSocial). */
+  followers?: boolean,
 }
 
 /** Input to search for accounts. */

app/soapbox/components/autosuggest_account_input.tsx

@@ -22,6 +22,8 @@ interface IAutosuggestAccountInput {
   menu?: Menu,
   onKeyDown?: React.KeyboardEventHandler,
   theme?: InputThemes,
+  /** Search only among people who follow you (TruthSocial). */
+  followers?: boolean,
 }
 
 const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
@@ -29,6 +31,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
   onSelected,
   value = '',
   limit = 4,
+  followers = false,
   ...rest
 }) => {
   const dispatch = useAppDispatch();
@@ -45,7 +48,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
   };
 
   const handleAccountSearch = useCallback(throttle(q => {
-    const params = { q, limit, resolve: false };
+    const params = { q, limit, followers, resolve: false };
 
     dispatch(accountSearch(params, controller.current.signal))
       .then((accounts: { id: string }[]) => {

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

@@ -17,7 +17,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
 }
 
 /** Textarea input for chats. */
-const ChatComposer = React.forwardRef<HTMLTextAreaElement, IChatComposer>(({
+const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
   onKeyDown,
   onChange,
   value,

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
@@ -32,6 +32,8 @@ const ChatPageMain = () => {
   const intl = useIntl();
   const account = useOwnAccount();
 
+  const inputRef = useRef<HTMLTextAreaElement| null>(null);
+
   const { chat, setChat } = useChatContext();
   const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
   const { deleteChat } = useChatActions(chat?.id as string);
@@ -162,7 +164,11 @@ const ChatPageMain = () => {
       </HStack>
 
       <div className='h-full overflow-hidden'>
-        <Chat className='h-full overflow-hidden' chat={chat} />
+        <Chat
+          className='h-full overflow-hidden'
+          chat={chat}
+          inputRef={inputRef}
+        />
       </div>
     </Stack>
   );

app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx

@@ -39,6 +39,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
             showButtons={false}
             autoFocus
             className='mb-0.5'
+            followers
           />
         </HStack>
       </Stack>

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

@@ -26,7 +26,7 @@ const LinkWrapper = ({ enabled, to, children }: { enabled: boolean, to: string,
 const ChatWindow = () => {
   const { chat, setChat, isOpen, isEditing, needsAcceptance, setEditing, setSearching, toggleChatPane } = useChatContext();
 
-  const inputRef = useRef<HTMLTextAreaElement>();
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   const closeChat = () => setChat(null);
 
@@ -93,7 +93,7 @@ const ChatWindow = () => {
       />
 
       <Stack className='overflow-hidden flex-grow h-full' space={2}>
-        <Chat chat={chat} inputRef={inputRef as any} />
+        <Chat chat={chat} inputRef={inputRef} />
       </Stack>
     </>
   );

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

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import classNames from 'clsx';
-import React, { MutableRefObject, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
@@ -20,7 +20,7 @@ const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 interface ChatInterface {
   chat: IChat,
   autosize?: boolean,
-  inputRef?: MutableRefObject<HTMLTextAreaElement>,
+  inputRef?: MutableRefObject<HTMLTextAreaElement | null>,
   className?: string,
 }
 
@@ -203,6 +203,12 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
     // );
   };
 
+  useEffect(() => {
+    if (inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [chat.id, inputRef?.current]);
+
   return (
     <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
       <div className='flex-grow h-full overflow-hidden flex justify-center'>