Merge branch 'improve-chat-media' into 'develop'

Chats: improve design of attachments, fix sizing bug

See merge request soapbox-pub/soapbox!2188

CHANGELOG.md

@@ -12,8 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: bot badge on statuses from bot accounts.
 
 ### Changed
+- Chats: improved display of media attachments.
 
 ### Fixed
+- Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.
+- Chats: don't display "copy" button for messages without text.
 - Posts: don't have to click the play button twice for embedded videos.
 - index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
 

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

@@ -246,7 +246,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
     const menu: Menu = [];
 
-    if (navigator.clipboard) {
+    if (navigator.clipboard && chatMessage.content) {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: () => handleCopyText(chatMessage),
@@ -312,39 +312,47 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               </div>
             )}
 
-            <HStack
+            <Stack
-              alignItems='bottom'
+              space={0.5}
               className={classNames({
                 'max-w-[85%]': true,
+                'flex-1': chatMessage.attachment,
                 'order-2': isMyMessage,
                 'order-1': !isMyMessage,
               })}
-              justifyContent={isMyMessage ? 'end' : 'start'}
+              alignItems={isMyMessage ? 'end' : 'start'}
             >
-              <div
+              {maybeRenderMedia(chatMessage)}
-                title={getFormattedTimestamp(chatMessage)}
+
-                className={
+              {content && (
-                  classNames({
+                <HStack alignItems='bottom' className='max-w-full'>
-                    'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
+                  <div
-                    '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
+                    title={getFormattedTimestamp(chatMessage)}
-                    '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
+                    className={
-                    'bg-primary-500 text-white': isMyMessage,
+                      classNames({
-                    'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,
+                        'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
-                    '!bg-transparent !p-0 emoji-lg': isOnlyEmoji,
+                        'rounded-tr-sm': chatMessage.attachment && isMyMessage,
-                  })
+                        'rounded-tl-sm': chatMessage.attachment && !isMyMessage,
-                }
+                        '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
-                ref={setBubbleRef}
+                        '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
-                tabIndex={0}
+                        'bg-primary-500 text-white': isMyMessage,
-              >
+                        'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,
-                {maybeRenderMedia(chatMessage)}
+                        '!bg-transparent !p-0 emoji-lg': isOnlyEmoji,
-                <Text
+                      })
-                  size='sm'
+                    }
-                  theme='inherit'
+                    ref={setBubbleRef}
-                  className='break-word-nested'
+                    tabIndex={0}
-                  dangerouslySetInnerHTML={{ __html: content }}
+                  >
-                />
+                    <Text
-              </div>
+                      size='sm'
-            </HStack>
+                      theme='inherit'
+                      className='break-word-nested'
+                      dangerouslySetInnerHTML={{ __html: content }}
+                    />
+                  </div>
+                </HStack>
+              )}
+            </Stack>
           </HStack>
 
           <HStack

app/soapbox/features/compose/components/upload-button.tsx

@@ -22,6 +22,7 @@ export interface IUploadButton {
   resetFileKey: number | null,
   className?: string,
   iconClassName?: string,
+  icon?: string,
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
@@ -31,6 +32,7 @@ const UploadButton: React.FC<IUploadButton> = ({
   resetFileKey,
   className = 'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500',
   iconClassName,
+  icon,
 }) => {
   const intl = useIntl();
   const { configuration } = useInstance();
@@ -52,9 +54,11 @@ const UploadButton: React.FC<IUploadButton> = ({
     return null;
   }
 
-  const src = onlyImages(attachmentTypes)
+  const src = icon || (
-    ? require('@tabler/icons/photo.svg')
+    onlyImages(attachmentTypes)
-    : require('@tabler/icons/paperclip.svg');
+      ? require('@tabler/icons/photo.svg')
+      : require('@tabler/icons/paperclip.svg')
+  );
 
   return (
     <div>

app/styles/components/media-gallery.scss

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   overflow: hidden;
   border-radius: 10px;
+  isolation: isolate;
   position: relative;
   width: 100%;
   height: auto;