Add unread message marker in the chat view

src/App.vue

@@ -427,7 +427,6 @@ export default {
 
 				// this.$store.dispatch('purgeConversationsStore')
 				this.$store.dispatch('addConversation', response.data.ocs.data)
-				this.$store.dispatch('markConversationRead', token)
 
 				/**
 				 * Emits a global event that is used in App.vue to update the page title once the

src/FilesSidebarTabApp.vue

@@ -264,7 +264,6 @@ export default {
 
 			const response = await fetchConversation(this.token)
 			this.$store.dispatch('addConversation', response.data.ocs.data)
-			this.$store.dispatch('markConversationRead', this.token)
 		},
 
 		/**

src/PublicShareAuthSidebar.vue

@@ -167,7 +167,6 @@ export default {
 			try {
 				const response = await fetchConversation(this.token)
 				this.$store.dispatch('addConversation', response.data.ocs.data)
-				this.$store.dispatch('markConversationRead', this.token)
 
 				// Although the current participant is automatically added to
 				// the participants store it must be explicitly set in the

src/PublicShareSidebar.vue

@@ -203,7 +203,6 @@ export default {
 			try {
 				const response = await fetchConversation(this.token)
 				this.$store.dispatch('addConversation', response.data.ocs.data)
-				this.$store.dispatch('markConversationRead', this.token)
 
 				// Although the current participant is automatically added to
 				// the participants store it must be explicitly set in the

src/components/ChatView.vue

@@ -47,6 +47,7 @@
 			:aria-label="t('spreed', 'Conversation messages')"
 			:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
 			:token="token"
+			:is-visible="isVisible"
 			@setChatScrolledToBottom="setScrollStatus" />
 		<NewMessageForm
 			role="region"
@@ -70,6 +71,13 @@ export default {
 		NewMessageForm,
 	},
 
+	props: {
+		isVisible: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
 	data: function() {
 		return {
 			isDraggingOver: false,

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -57,6 +57,11 @@
 				@click.stop.prevent="copyLinkToConversation">
 				{{ t('spreed', 'Copy link') }}
 			</ActionButton>
+			<ActionButton
+				:close-after-click="true"
+				@click.prevent.exact="markConversationAsRead">
+				{{ t('spreed', 'Mark as read') }}
+			</ActionButton>
 
 			<ActionSeparator />
 
@@ -313,6 +318,10 @@ export default {
 			}
 		},
 
+		markConversationAsRead() {
+			this.$store.dispatch('clearLastReadMessage', { token: this.item.token })
+		},
+
 		/**
 		 * Deletes the conversation.
 		 */

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -115,7 +115,6 @@ export default {
 			}
 			if (to.name === 'conversation') {
 				joinConversation(to.params.token)
-				this.$store.dispatch('markConversationRead', to.params.token)
 			}
 		},
 

src/components/LeftSidebar/LeftSidebar.vue

@@ -442,9 +442,6 @@ export default {
 				this.$store.dispatch('purgeConversationsStore')
 				conversations.data.ocs.data.forEach(conversation => {
 					this.$store.dispatch('addConversation', conversation)
-					if (conversation.token === this.$store.getters.getToken()) {
-						this.$store.dispatch('markConversationRead', this.$store.getters.getToken())
-					}
 				})
 				/**
 				 * Emits a global event that is used in App.vue to update the page title once the