Chats: move uploading progress into the composer text box

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

@@ -44,6 +44,8 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   resetFileKey: number | null
   attachments?: Attachment[]
   onDeleteAttachment?: () => void
+  isUploading?: boolean
+  uploadProgress?: number
 }
 
 /** Textarea input for chats. */
@@ -59,6 +61,8 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   onPaste,
   attachments = [],
   onDeleteAttachment,
+  isUploading,
+  uploadProgress,
 }, ref) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -189,6 +193,8 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
               disabled={disabled}
               attachments={attachments}
               onDeleteAttachment={onDeleteAttachment}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
             />
             {isSuggestionsAvailable ? (
               <ComboboxPopover>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Textarea } from 'soapbox/components/ui';
+import { ProgressBar, Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
 
 import ChatUpload from './chat-upload';
@@ -8,10 +8,18 @@ import ChatUpload from './chat-upload';
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
   onDeleteAttachment?: () => void
+  isUploading?: boolean
+  uploadProgress?: number
 }
 
 /** Custom textarea for chats. */
-const ChatTextarea: React.FC<IChatTextarea> = ({ attachments, onDeleteAttachment, ...rest }) => {
+const ChatTextarea: React.FC<IChatTextarea> = ({
+  attachments,
+  onDeleteAttachment,
+  isUploading = false,
+  uploadProgress = 0,
+  ...rest
+}) => {
   return (
     <div className={`
       bg-white
@@ -25,8 +33,14 @@ const ChatTextarea: React.FC<IChatTextarea> = ({ attachments, onDeleteAttachment
       dark:focus-within:ring-primary-500 dark:focus-within:border-primary-500
     `}
     >
-      {(!!attachments?.length) && (
+      {(!!attachments?.length || isUploading) && (
         <div className='p-3 pb-0'>
+          {isUploading && (
+            <div className='relative p-4 inline-flex items-center justify-center w-24 h-24 rounded-lg overflow-hidden isolate bg-gray-200 dark:bg-primary-900'>
+              <ProgressBar progress={uploadProgress} />
+            </div>
+          )}
+
           {attachments?.map(attachment => (
             <ChatUpload
               key={attachment.id}

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

@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
 import { Stack } from 'soapbox/components/ui';
-import UploadProgress from 'soapbox/components/upload-progress';
 import { useAppDispatch } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { IChat, useChatActions } from 'soapbox/queries/chats';
@@ -163,12 +162,6 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         <ChatMessageList chat={chat} />
       </div>
 
-      {isUploading && (
-        <div className='p-4'>
-          <UploadProgress progress={uploadProgress * 100} />
-        </div>
-      )}
-
       <ChatComposer
         ref={inputRef}
         onKeyDown={handleKeyDown}
@@ -181,6 +174,8 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         onPaste={handlePaste}
         attachments={attachment ? [attachment] : []}
         onDeleteAttachment={handleRemoveFile}
+        isUploading={isUploading}
+        uploadProgress={uploadProgress}
       />
     </Stack>
   );