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,94 +30,95 @@
     font-family: inherit;
     font-size: 14px;
     background: var(--background-color);
-    .compose-form__upload-wrapper { overflow: hidden; }
+  }
+}
 
-    .compose-form__uploads-wrapper {
+.compose-form__upload-wrapper { overflow: hidden; }
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
 
-      &.contains-media {
+.compose-form__uploads-wrapper {
-        padding: 5px;
+  display: flex;
-        border-top: 1px solid var(--foreground-color);
+  flex-direction: row;
-      }
+  flex-wrap: wrap;
+
+  &.contains-media {
+    padding: 5px;
+    border-top: 1px solid var(--foreground-color);
+  }
+}
+
+.compose-form__upload {
+  flex: 1 1 0;
+  min-width: 40%;
+  margin: 5px;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &__actions {
+    @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
+
+    &.active {
+      @apply opacity-100;
     }
 
-    .compose-form__upload {
+    .icon-button {
-      flex: 1 1 0;
+      @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
-      min-width: 40%;
+    }
-      margin: 5px;
+  }
-      position: relative;
-      border-radius: 4px;
-      overflow: hidden;
 
-      &__actions {
+  &-description {
-        @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
+    @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
 
-        &.active {
+    &.active {
-          @apply opacity-100;
+      @apply opacity-100;
-        }
-
-        .icon-button {
-          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
-        }
-      }
-
-      &-description {
-        @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
-
-        &.active {
-          @apply opacity-100;
-        }
-
-        textarea {
-          @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
-
-          &::placeholder {
-            @apply text-white/60;
-          }
-        }
-      }
-
-      &-preview {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: -1;
-
-        video {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
     }
 
-    .compose-form__upload-thumbnail {
+    textarea {
-      background-position: center;
+      @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
-      background-size: contain;
+
-      background-repeat: no-repeat;
+      &::placeholder {
-      height: 160px;
+        @apply text-white/60;
+      }
+    }
+  }
+
+  &-preview {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    video {
       width: 100%;
-      overflow: hidden;
+      height: 100%;
-      position: relative;
+      object-fit: cover;
-
-      &.video {
-        background-image: url('../assets/images/video-placeholder.png');
-        background-size: cover;
-      }
-
-      &.audio {
-        background-image: url('../assets/images/audio-placeholder.png');
-        background-size: cover;
-      }
     }
-  } // end .compose-form .compose-form__modifiers
+  }
-} // end .compose-form
+}
+
+.compose-form__upload-thumbnail {
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 160px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+
+  &.video {
+    background-image: url('../assets/images/video-placeholder.png');
+    background-size: cover;
+  }
+
+  &.audio {
+    background-image: url('../assets/images/audio-placeholder.png');
+    background-size: cover;
+  }
+}
 
 .privacy-dropdown__dropdown {
   @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;