Merge branch 'chats-attachments-icon' into 'develop'

Add icons for chat previews with attachments

See merge request soapbox-pub/soapbox-fe!884

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

@@ -2,13 +2,14 @@ import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import emojify from 'soapbox/features/emoji/emoji';
 import { makeGetChat } from 'soapbox/selectors';
-
+import Icon from 'soapbox/components/icon';
 
 const makeMapStateToProps = () => {
   const getChat = makeGetChat();
@@ -43,6 +44,8 @@ class Chat extends ImmutablePureComponent {
     const account = chat.get('account');
     const unreadCount = chat.get('unread');
     const content = chat.getIn(['last_message', 'content']);
+    const attachment = chat.getIn(['last_message', 'attachment']);
+    const image = attachment && attachment.getIn(['pleroma', 'mime_type'], '').startsWith('image/');
     const parsedContent = content ? emojify(content) : '';
 
     return (
@@ -54,10 +57,24 @@ class Chat extends ImmutablePureComponent {
               <Avatar account={account} size={36} />
             </div>
             <DisplayName account={account} />
+            {attachment && (
+              <Icon
+                className='chat__attachment-icon'
+                src={image ? require('@tabler/icons/icons/photo.svg') : require('@tabler/icons/icons/paperclip.svg')}
+              />
+            )}
+            {content ? (
               <span
                 className='chat__last-message'
                 dangerouslySetInnerHTML={{ __html: parsedContent }}
               />
+            ) : attachment && (
+              <span
+                className='chat__last-message attachment'
+              >
+                {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
+              </span>
+            )}
             {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
           </div>
         </div>

app/soapbox/locales/pl.json

@@ -138,6 +138,8 @@
   "chats.actions.delete": "Usuń wiadomość",
   "chats.actions.more": "Więcej",
   "chats.actions.report": "Zgłoś użytkownika",
+  "chats.attachment": "Załącznik",
+  "chats.attachment_image": "Zdjęcie",
   "chats.audio_toggle_off": "Wyłączono dźwięk powiadomień",
   "chats.audio_toggle_on": "Włączono dźwięk powiadomień",
   "chats.dividers.today": "Dzisiaj",

app/styles/chats.scss

@@ -450,6 +450,10 @@
 }
 
 .chat {
+  &__attachment-icon {
+    float: right;
+  }
+
   &__last-message {
     display: block;
     overflow: hidden;
@@ -459,6 +463,10 @@
     a {
       color: var(--highlight-text-color);
     }
+
+    &.attachment {
+      font-style: italic;
+    }
   }
 }