Don't repeat username for same Author messages

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/MessagesList/Message/Message.vue

@@ -25,11 +25,18 @@
 		:class="{ 'hover': hover }"
 		@mouseover="hover=true"
 		@mouseleave="hover=false">
-		<div class="message">
-			<div class="message-avatar">
-				<Avatar v-if="!isSameAuthor" :user="actorDisplayName" :display-name="actorDisplayName" />
-			</div>
-			<slot />
+		<div class="message-avatar">
+			<Avatar
+				v-if="!isSameAuthor"
+				:user="actorDisplayName"
+				:display-name="actorDisplayName" />
+		</div>
+		<div class="message" :class="{'same-author': isSameAuthor}">
+			<MessageBody v-bind="message" :isSameAuthor="isSameAuthor">
+				<MessageBody
+					v-if="quote !== {}"
+					v-bind="quote" />
+			</MessageBody>
 			<div v-show="isTemporary" class="message-right icon-loading-small" />
 			<div v-show="!isTemporary" class="message-right">
 				<h6>{{ messageTime }}</h6>
@@ -51,13 +58,15 @@
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import Actions from 'nextcloud-vue/dist/Components/Actions'
 import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+import MessageBody from './MessageBody/MessageBody'
 
 export default {
 	name: 'Message',
 	components: {
 		Avatar,
 		Actions,
-		ActionButton
+		ActionButton,
+		MessageBody
 	},
 	props: {
 		/**
@@ -100,6 +109,12 @@ export default {
 		 */
 		previousMessage: {
 			required: true
+		},
+		/**
+		 * The quote object
+		 */
+		quote: {
+			type: Object
 		}
 	},
 	data: function() {
@@ -142,7 +157,7 @@ export default {
 .message {
 	display: flex;
 	max-width: 600px;
-	padding: 8px 0 8px 0;
+	padding: 8px 0 8px 52px;
 	margin: auto;
 	&-avatar {
 		width: 52px;
@@ -163,4 +178,8 @@ export default {
 	}
 }
 
+.same-author {
+	padding: 0 0 8px 52px;
+}
+
 </style>

src/components/MessagesList/Message/MessageBody/MessageBody.vue

@@ -28,7 +28,7 @@ the main body of the message as well as a quote.
 	<div v-show="message"
 		:class="{ 'message-main--quote' : isQuote }"
 		class="message-main">
-		<div v-if="showAuthor" class="message-main-header">
+		<div v-if="!isSameAuthor" class="message-main-header">
 			<h6>{{ actorDisplayName }}</h6>
 		</div>
 		<slot />
@@ -69,6 +69,9 @@ export default {
 		isQuote: {
 			type: Boolean,
 			default: false
+		},
+		isSameAuthor: {
+			required: true
 		}
 	}
 }

src/components/MessagesList/MessagesList.vue

@@ -43,11 +43,9 @@ the DynamicScroller component, whose docs you can find [here.](https://github.co
 				<Message
 					v-bind="item"
 					:message="item"
+					:parent="messages[item.parent]"
 					:previous-message="messagesList[index-1]"
 					@deleteMessage="handleDeleteMessage">
-					<MessageBody v-bind="item">
-						<MessageBody v-if="item.parent" v-bind="messages[item.parent]" />
-					</MessageBody>
 				</Message>
 			</DynamicScrollerItem>
 		</template>
@@ -58,7 +56,6 @@ the DynamicScroller component, whose docs you can find [here.](https://github.co
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import Message from './Message/Message'
-import MessageBody from './MessageBody/MessageBody'
 import { fetchMessages, lookForNewMessges } from '../../services/messagesService'
 
 export default {
@@ -66,8 +63,7 @@ export default {
 	components: {
 		DynamicScroller,
 		DynamicScrollerItem,
-		Message,
-		MessageBody
+		Message
 	},
 
 	props: {