Make .compose-form__upload more widely available

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

@@ -4,11 +4,12 @@ import React, { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
-import { IconButton, Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui';
+import Upload from 'soapbox/components/upload';
 import UploadProgress from 'soapbox/components/upload-progress';
 import { useAppDispatch } from 'soapbox/hooks';
+import { normalizeAttachment } from 'soapbox/normalizers';
 import { IChat, useChatActions } from 'soapbox/queries/chats';
-import { truncateFilename } from 'soapbox/utils/media';
 
 import ChatComposer from './chat-composer';
 import ChatMessageList from './chat-message-list';
@@ -144,31 +145,13 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
     data.append('file', files[0]);
 
     dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachment(response.data);
+      setAttachment(normalizeAttachment(response.data));
       setIsUploading(false);
     }).catch(() => {
       setIsUploading(false);
     });
   };
 
-  const renderAttachment = () => {
-    if (!attachment) return null;
-
-    return (
-      <div className='chat-box__attachment'>
-        <div className='chat-box__filename'>
-          {truncateFilename(attachment.preview_url, 20)}
-        </div>
-        <div className='chat-box__remove-attachment'>
-          <IconButton
-            src={require('@tabler/icons/x.svg')}
-            onClick={handleRemoveFile}
-          />
-        </div>
-      </div>
-    );
-  };
-
   useEffect(() => {
     if (inputRef?.current) {
       inputRef.current.focus();
@@ -181,7 +164,15 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         <ChatMessageList chat={chat} />
       </div>
 
-      {renderAttachment()}
+      {attachment && (
+        <div className='relative h-48'>
+          <Upload
+            media={attachment}
+            onDelete={handleRemoveFile}
+            withPreview
+          />
+        </div>
+      )}
 
       {isUploading && (
         <div className='p-4'>

app/styles/components/compose-form.scss

@@ -30,6 +30,9 @@
     font-family: inherit;
     font-size: 14px;
     background: var(--background-color);
+  }
+}
+
 .compose-form__upload-wrapper { overflow: hidden; }
 
 .compose-form__uploads-wrapper {
@@ -116,8 +119,6 @@
     background-size: cover;
   }
 }
-  } // end .compose-form .compose-form__modifiers
-} // end .compose-form
 
 .privacy-dropdown__dropdown {
   @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;