diff --git a/app/soapbox/features/chats/components/chat.js b/app/soapbox/features/chats/components/chat.js
index d3a60f14d..1a09edd47 100644
--- a/app/soapbox/features/chats/components/chat.js
+++ b/app/soapbox/features/chats/components/chat.js
@@ -5,6 +5,7 @@ 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';
export default class Chat extends ImmutablePureComponent {
@@ -22,6 +23,8 @@ export default class Chat extends ImmutablePureComponent {
if (!chat) return null;
const account = chat.get('account');
const unreadCount = chat.get('unread');
+ const content = chat.getIn(['last_message', 'content']);
+ const parsedContent = content ? emojify(content) : '';
return (
@@ -32,6 +35,10 @@ export default class Chat extends ImmutablePureComponent {
+
{unreadCount > 0 && {shortNumberFormat(unreadCount)}}
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index 55090df10..bbf0b54c5 100644
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@@ -163,13 +163,15 @@ export const makeGetChat = () => {
[
(state, { id }) => state.getIn(['chats', id]),
(state, { id }) => state.getIn(['accounts', state.getIn(['chats', id, 'account'])]),
+ (state, { last_message }) => state.getIn(['chat_messages', last_message]),
],
- (chat, account) => {
+ (chat, account, lastMessage) => {
if (!chat) return null;
return chat.withMutations(map => {
map.set('account', account);
+ map.set('last_message', lastMessage);
});
}
);
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index f1b443b5b..a7369c53b 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -146,6 +146,22 @@
.account__display-name {
position: relative;
+
+ .display-name {
+ display: flex;
+
+ bdi {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .display-name__account {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1;
+ display: none;
+ }
+ }
}
.icon-with-badge__badge {
@@ -253,3 +269,12 @@
background: transparent;
}
}
+
+.chat {
+ &__last-message {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}