From c46793cfaa81df625087a5414a63776440035fa3 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Wed, 9 Sep 2020 16:12:59 -0500
Subject: [PATCH] chat preview in user profile chat card

---
 src/views/users/show.vue | 55 +++++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 34bd8e32..5813405b 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -118,9 +118,21 @@
                 <tr v-if="statuses.length === 0" class="no-statuses">>
                   {{ $t('userProfile.noChats') }}
                 </tr>
-                <tr v-for="chat in chats" :key="chat.id" class="el-table__row">
-                  <td class="chat-item">
-                    {{ chat.account.acct }}
+                <tr v-for="chat in chats" :key="chat.id" class="el-table__row chat-item">
+                  <td>
+                    <div class="chat-card-header">
+                      <img v-if="propertyExists(chat.account, 'avatar')" :src="chat.account.avatar" class="chat-avatar-img">
+                      <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
+                      <span v-else>
+                        <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">
+                          {{ chat.account.username }}
+                        </span>
+                        <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
+                      </span>
+                    </div>
+                    <div class="chat-card-preview">
+                      <span v-if="propertyExists(chat, 'last_message')" class="chat-preview">{{ chat.last_message.content }}</span>
+                    </div>
                   </td>
                 </tr>
               </tbody>
@@ -343,17 +355,18 @@ table {
 .user-cards-container{
   display: flex;
   flex-direction: column;
+  width: 30%;
+  min-width: 300px;
+  margin: 0 20px;
+
 }
 .user-profile-card {
-  margin: 0 20px;
-  width: 30%;
-  min-width: 300px;
   height: fit-content;
+  width: auto;
+  margin-bottom: 20px;
 }
 .user-chats-card {
-  margin: 20px 20px;
-  width: 30%;
-  min-width: 300px;
+  width: auto;
   height: fit-content;
 }
 .user-profile-container {
@@ -363,6 +376,9 @@ table {
   margin: 0;
   width: inherit;
 }
+.user-chats-table {
+  width: 100%;
+}
 .user-profile-tag {
   margin: 0 4px 4px 0;
 }
@@ -371,6 +387,27 @@ table {
   font-weight: bold;
   margin: 5px 0;
 }
+.chat-card-header {
+  display: flex;
+  align-items: center;
+}
+.chat-avatar-img {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+.chat-account-name {
+  display: inline-block;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+}
+.chat-card-preview {
+  color: gray;
+  font-style: italic;
+  margin: 5px 0 0 20px;
+}
 
 @media only screen and (max-width:480px) {
   .avatar-name-container {