From abe329c79005fd7a2bbf4c658f0300f2b4c380aa Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Thu, 18 Jun 2020 17:30:00 +0200
Subject: [PATCH 01/17] Add unread message marker in the chat view

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../MessagesGroup/Message/Message.vue         | 266 ++++++++++--------
 .../MessagesGroup/MessagesGroup.vue           |  10 +-
 src/components/MessagesList/MessagesList.vue  |  23 +-
 3 files changed, 175 insertions(+), 124 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index ffded0e6a76..c3de6042050 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -32,138 +32,144 @@ the main body of the message as well as a quote.
 		:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
-		<div v-if="isFirstMessage && showAuthor"
-			class="message__author"
-			role="heading"
-			aria-level="4">
-			{{ actorDisplayName }}
-		</div>
-		<div
-			ref="messageMain"
-			class="message__main">
-			<div v-if="isSingleEmoji"
-				class="message__main__text">
-				<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
-				<div class="single-emoji">
-					{{ message }}
-				</div>
-			</div>
-			<div v-else-if="showJoinCallButton" class="message__main__text call-started">
-				<RichText :text="message" :arguments="richParameters" :autolink="true" />
-				<CallButton />
-			</div>
-			<div v-else-if="isDeletedMessage" class="message__main__text deleted-message">
-				<RichText :text="message" :arguments="richParameters" :autolink="true" />
+		<div>
+			<div v-if="isFirstMessage && showAuthor"
+				class="message__author"
+				role="heading"
+				aria-level="4">
+				{{ actorDisplayName }}
 			</div>
-			<div v-else class="message__main__text" :class="{'system-message': isSystemMessage}">
-				<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
-				<RichText :text="message" :arguments="richParameters" :autolink="true" />
-			</div>
-			<div v-if="!isDeletedMessage" class="message__main__right">
-				<span
-					v-tooltip.auto="messageDate"
-					class="date"
-					:style="{'visibility': hasDate ? 'visible' : 'hidden'}"
-					:class="{'date--self': showSentIcon}">{{ messageTime }}</span>
-				<!-- Message delivery status indicators -->
-				<div v-if="sendingFailure"
-					v-tooltip.auto="sendingErrorIconTooltip"
-					class="message-status sending-failed"
-					:class="{'retry-option': sendingErrorCanRetry}"
-					:aria-label="sendingErrorIconTooltip"
-					tabindex="0"
-					@mouseover="showReloadButton = true"
-					@focus="showReloadButton = true"
-					@mouseleave="showReloadButton = true"
-					@blur="showReloadButton = true">
-					<button
-						v-if="sendingErrorCanRetry && showReloadButton"
-						class="nc-button nc-button__main--dark"
-						@click="handleRetry">
-						<Reload
-							decorative
-							title=""
-							:size="16" />
-					</button>
-					<AlertCircle v-else
-						decorative
-						title=""
-						:size="16" />
+			<div
+				ref="messageMain"
+				class="message__main">
+				<div v-if="isSingleEmoji"
+					class="message__main__text">
+					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
+					<div class="single-emoji">
+						{{ message }}
+					</div>
 				</div>
-				<div v-else-if="isTemporary && !isTemporaryUpload || isDeleting"
-					v-tooltip.auto="loadingIconTooltip"
-					class="icon-loading-small message-status"
-					:aria-label="loadingIconTooltip" />
-				<div v-else-if="showCommonReadIcon"
-					v-tooltip.auto="commonReadIconTooltip"
-					class="message-status"
-					:aria-label="commonReadIconTooltip">
-					<CheckAll decorative
-						title=""
-						:size="16" />
+				<div v-else-if="showJoinCallButton" class="message__main__text call-started">
+					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<CallButton />
 				</div>
-				<div v-else-if="showSentIcon"
-					v-tooltip.auto="sentIconTooltip"
-					class="message-status"
-					:aria-label="sentIconTooltip">
-					<Check decorative
-						title=""
-						:size="16" />
+				<div v-else-if="isDeletedMessage" class="message__main__text deleted-message">
+					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 				</div>
-				<!-- Message Actions -->
-				<div
-					v-show="showActions"
-					class="message__main__right__actions"
-					:class="{ 'tall' : isTallEnough }">
-					<Actions
-						v-show="isReplyable">
-						<ActionButton
-							icon="icon-reply"
-							@click.stop="handleReply">
-							{{ t('spreed', 'Reply') }}
-						</ActionButton>
-					</Actions>
-					<Actions
-						v-show="hasActionsMenu"
-						:force-menu="true"
-						container="#content-vue">
-						<ActionButton
-							v-if="isPrivateReplyable"
-							icon="icon-user"
-							:close-after-click="true"
-							@click.stop="handlePrivateReply">
-							{{ t('spreed', 'Reply privately') }}
-						</ActionButton>
-						<ActionButton
-							v-if="isReplyable"
-							icon="icon-external"
-							:close-after-click="true"
-							@click.stop.prevent="handleCopyMessageLink">
-							{{ t('spreed', 'Copy message link') }}
-						</ActionButton>
-						<ActionSeparator v-if="messageActions.length > 0" />
-						<template
-							v-for="action in messageActions">
+				<div v-else class="message__main__text" :class="{'system-message': isSystemMessage}">
+					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
+					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+				</div>
+				<div v-if="!isDeletedMessage" class="message__main__right">
+					<span
+						v-tooltip.auto="messageDate"
+						class="date"
+						:style="{'visibility': hasDate ? 'visible' : 'hidden'}"
+						:class="{'date--self': showSentIcon}">{{ messageTime }}</span>
+					<!-- Message delivery status indicators -->
+					<div v-if="sendingFailure"
+						v-tooltip.auto="sendingErrorIconTooltip"
+						class="message-status sending-failed"
+						:class="{'retry-option': sendingErrorCanRetry}"
+						:aria-label="sendingErrorIconTooltip"
+						tabindex="0"
+						@mouseover="showReloadButton = true"
+						@focus="showReloadButton = true"
+						@mouseleave="showReloadButton = true"
+						@blur="showReloadButton = true">
+						<button
+							v-if="sendingErrorCanRetry && showReloadButton"
+							class="nc-button nc-button__main--dark"
+							@click="handleRetry">
+							<Reload
+								decorative
+								title=""
+								:size="16" />
+						</button>
+						<AlertCircle v-else
+							decorative
+							title=""
+							:size="16" />
+					</div>
+					<div v-else-if="isTemporary && !isTemporaryUpload || isDeleting"
+						v-tooltip.auto="loadingIconTooltip"
+						class="icon-loading-small message-status"
+						:aria-label="loadingIconTooltip" />
+					<div v-else-if="showCommonReadIcon"
+						v-tooltip.auto="commonReadIconTooltip"
+						class="message-status"
+						:aria-label="commonReadIconTooltip">
+						<CheckAll decorative
+							title=""
+							:size="16" />
+					</div>
+					<div v-else-if="showSentIcon"
+						v-tooltip.auto="sentIconTooltip"
+						class="message-status"
+						:aria-label="sentIconTooltip">
+						<Check decorative
+							title=""
+							:size="16" />
+					</div>
+					<!-- Message Actions -->
+					<div
+						v-show="showActions"
+						class="message__main__right__actions"
+						:class="{ 'tall' : isTallEnough }">
+						<Actions
+							v-show="isReplyable">
+							<ActionButton
+								icon="icon-reply"
+								@click.stop="handleReply">
+								{{ t('spreed', 'Reply') }}
+							</ActionButton>
+						</Actions>
+						<Actions
+							v-show="hasActionsMenu"
+							:force-menu="true"
+							container="#content-vue">
 							<ActionButton
-								:key="action.label"
-								:icon="action.icon"
+								v-if="isPrivateReplyable"
+								icon="icon-user"
 								:close-after-click="true"
-								@click="action.callback(messageAPIData)">
-								{{ action.label }}
+								@click.stop="handlePrivateReply">
+								{{ t('spreed', 'Reply privately') }}
 							</ActionButton>
-						</template>
-						<template v-if="isDeleteable">
-							<ActionSeparator v-if="isReplyable || messageActions.length > 0" />
 							<ActionButton
-								icon="icon-delete"
+								v-if="isReplyable"
+								icon="icon-external"
 								:close-after-click="true"
-								@click.stop="handleDelete">
-								{{ t('spreed', 'Delete') }}
+								@click.stop.prevent="handleCopyMessageLink">
+								{{ t('spreed', 'Copy message link') }}
 							</ActionButton>
-						</template>
-					</Actions>
+							<ActionSeparator v-if="messageActions.length > 0" />
+							<template
+								v-for="action in messageActions">
+								<ActionButton
+									:key="action.label"
+									:icon="action.icon"
+									:close-after-click="true"
+									@click="action.callback(messageAPIData)">
+									{{ action.label }}
+								</ActionButton>
+							</template>
+							<template v-if="isDeleteable">
+								<ActionSeparator v-if="isReplyable || messageActions.length > 0" />
+								<ActionButton
+									icon="icon-delete"
+									:close-after-click="true"
+									@click.stop="handleDelete">
+									{{ t('spreed', 'Delete') }}
+								</ActionButton>
+							</template>
+						</Actions>
+					</div>
 				</div>
 			</div>
+			<div v-if="lastReadMessage === id"
+				class="new-message-marker">
+				<span>{{ t('spreed', 'New messages') }}</span>
+			</div>
 		</div>
 	</li>
 </template>
@@ -335,6 +341,14 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Id of the last read message when the chat was opened
+		 */
+		lastReadMessage: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	data() {
@@ -775,6 +789,18 @@ export default {
 	100% { background-color: rgba(var(--color-background-hover), 0); }
 }
 
+.new-message-marker {
+	margin: 20px 0;
+	text-align: center;
+
+	span {
+		background-color: var(--color-primary-light);
+		color: var(--color-text-lighter);
+		padding: 10px  20px;
+		border-radius: var(--border-radius);
+	}
+}
+
 .message-status {
 	margin: -8px 0;
 	width: $clickable-area;
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 5702e735510..cc8be161bc4 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -45,7 +45,8 @@
 					:actor-id="actorId"
 					:actor-display-name="actorDisplayName"
 					:show-author="!isSystemMessage"
-					:is-temporary="message.timestamp === 0" />
+					:is-temporary="message.timestamp === 0"
+					:last-read-message="lastReadMessage" />
 			</ul>
 		</div>
 	</div>
@@ -86,6 +87,13 @@ export default {
 			type: Array,
 			required: true,
 		},
+		/**
+		 * Id of the last read message when the chat was opened
+		 */
+		lastReadMessage: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	computed: {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 67e742f6f86..3df3b04f5b2 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -45,6 +45,7 @@ get the messagesList array and loop through the list to generate the messages.
 			:style="{ height: item.height + 'px' }"
 			v-bind="item"
 			:messages="item"
+			:last-read-message="unreadMessageMarkerId"
 			@deleteMessage="handleDeleteMessage" />
 		<template v-if="!messagesGroupedByAuthor.length">
 			<LoadingPlaceholder
@@ -133,6 +134,8 @@ export default {
 			pollingErrorTimeout: 1,
 
 			oldMessagesPromise: null,
+
+			lastReadMessage: 0,
 		}
 	},
 
@@ -226,6 +229,13 @@ export default {
 		scroller() {
 			return this.$refs.scroller
 		},
+
+		unreadMessageMarkerId() {
+			if (this.lastReadMessage !== this.$store.getters.getLastKnownMessageId(this.token)) {
+				return this.lastReadMessage
+			}
+			return 0
+		},
 	},
 
 	watch: {
@@ -236,6 +246,7 @@ export default {
 			},
 		},
 	},
+
 	mounted() {
 		this.scrollToBottom()
 		EventBus.$on('scrollChatToBottom', this.handleScrollChatToBottomEvent)
@@ -245,6 +256,7 @@ export default {
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
 	},
+
 	beforeDestroy() {
 		EventBus.$off('scrollChatToBottom', this.handleScrollChatToBottomEvent)
 		EventBus.$off('smoothScrollChatToBottom', this.smoothScrollToBottom)
@@ -357,6 +369,7 @@ export default {
 
 		handleStartGettingMessagesPreconditions() {
 			if (this.token && this.isParticipant && !this.isInLobby) {
+				this.lastReadMessage = this.conversation.lastReadMessage
 				if (this.$store.getters.getFirstKnownMessageId(this.token) === null) {
 					this.$store.dispatch('setFirstKnownMessageId', {
 						token: this.token,
@@ -406,7 +419,10 @@ export default {
 					return
 				}
 
-				this.getNewMessages()
+				const followInNewMessages = this.conversation.lastMessage
+					&& this.conversation.lastReadMessage === this.conversation.lastMessage.id
+
+				this.getNewMessages(followInNewMessages)
 			})
 		},
 
@@ -470,8 +486,9 @@ export default {
 
 		/**
 		 * Creates a long polling request for a new message.
+		 * @param {boolean} scrollToBottom Whether we should try to automatically scroll to the bottom
 		 */
-		async getNewMessages() {
+		async getNewMessages(scrollToBottom = true) {
 			if (!this.cancelLookForNewMessages) {
 				return
 			}
@@ -505,7 +522,7 @@ export default {
 				})
 
 				// Scroll to the last message if sticky
-				if (this.isSticky) {
+				if (scrollToBottom && this.isSticky) {
 					this.smoothScrollToBottom()
 				}
 			} catch (exception) {

From c4e739c9a12b5ebf26f6f12bf9bb19527334a84b Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 10 Feb 2021 14:52:05 +0100
Subject: [PATCH 02/17] Update last read message marker on scroll

Moved marker behavior from server to client by passing setReadMarker=0
to queries.

Added scroll handler that detects whether the read marker was seen and
scrolled past, if yes it will set the read marker to the first message
visible at the top.

Keep the marker when the document is not focussed.

When opening a conversation, scrolls to the read marker.

The lastMessage attribute of a conversation is now updated earlier to
make sure the read marker can update properly when there are new
messages appended.

Instead of waiting for the next refresh cycle, this fix immediately
updates lastMessage and lastReadMessage after posting a message.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         |  33 ++-
 .../MessagesGroup/MessagesGroup.vue           |  10 +-
 src/components/MessagesList/MessagesList.vue  | 252 +++++++++++++++---
 .../NewMessageForm/NewMessageForm.vue         |  19 +-
 src/services/messagesService.js               |  20 ++
 src/store/conversationsStore.js               |  16 ++
 src/store/messagesStore.js                    |  25 +-
 7 files changed, 315 insertions(+), 60 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index c3de6042050..86f636ab358 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -166,9 +166,11 @@ the main body of the message as well as a quote.
 					</div>
 				</div>
 			</div>
-			<div v-if="lastReadMessage === id"
-				class="new-message-marker">
-				<span>{{ t('spreed', 'New messages') }}</span>
+			<div v-if="isLastReadMessage"
+				v-observe-visibility="lastReadMessageVisibilityChanged">
+				<div v-if="!isLastMessage" class="new-message-marker">
+					<span>{{ t('spreed', 'New messages') }}</span>
+				</div>
 			</div>
 		</div>
 	</li>
@@ -341,14 +343,6 @@ export default {
 			type: String,
 			default: '',
 		},
-
-		/**
-		 * Id of the last read message when the chat was opened
-		 */
-		lastReadMessage: {
-			type: Number,
-			default: 0,
-		},
 	},
 
 	data() {
@@ -358,10 +352,21 @@ export default {
 			isTallEnough: false,
 			showReloadButton: false,
 			isDeleting: false,
+			// whether the message was seen, only used if this was marked as last read message
+			seen: false,
 		}
 	},
 
 	computed: {
+		isLastMessage() {
+			return this.conversation.lastMessage
+				&& this.id === this.conversation.lastMessage.id
+		},
+
+		isLastReadMessage() {
+			return this.id === this.conversation.lastReadMessage
+		},
+
 		messageObject() {
 			return this.$store.getters.message(this.token, this.id)
 		},
@@ -583,6 +588,12 @@ export default {
 	},
 
 	methods: {
+		lastReadMessageVisibilityChanged(isVisible) {
+			if (isVisible) {
+				this.seen = true
+			}
+		},
+
 		highlightAnimation() {
 			// trigger CSS highlight animation by setting a class
 			this.$refs.message.classList.add('highlight-animation')
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index cc8be161bc4..5702e735510 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -45,8 +45,7 @@
 					:actor-id="actorId"
 					:actor-display-name="actorDisplayName"
 					:show-author="!isSystemMessage"
-					:is-temporary="message.timestamp === 0"
-					:last-read-message="lastReadMessage" />
+					:is-temporary="message.timestamp === 0" />
 			</ul>
 		</div>
 	</div>
@@ -87,13 +86,6 @@ export default {
 			type: Array,
 			required: true,
 		},
-		/**
-		 * Id of the last read message when the chat was opened
-		 */
-		lastReadMessage: {
-			type: Number,
-			default: 0,
-		},
 	},
 
 	computed: {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 3df3b04f5b2..abd81f3f8d0 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -45,7 +45,6 @@ get the messagesList array and loop through the list to generate the messages.
 			:style="{ height: item.height + 'px' }"
 			v-bind="item"
 			:messages="item"
-			:last-read-message="unreadMessageMarkerId"
 			@deleteMessage="handleDeleteMessage" />
 		<template v-if="!messagesGroupedByAuthor.length">
 			<LoadingPlaceholder
@@ -134,12 +133,28 @@ export default {
 			pollingErrorTimeout: 1,
 
 			oldMessagesPromise: null,
-
-			lastReadMessage: 0,
 		}
 	},
 
 	computed: {
+		isWindowVisible() {
+			return this.$store.getters.windowIsVisible()
+		},
+
+		/**
+		 * Finds the first unread message component
+		 *
+		 * @returns {object} Vue component of the message or null if not found
+		 */
+		unreadMessageComponent() {
+			let el = document.getElementById('message_' + this.conversation.lastReadMessage)
+			if (el) {
+				el = el.closest('.message')
+			}
+
+			return el?.__vue__
+		},
+
 		/**
 		 * Gets the messages array. We need this because the DynamicScroller needs an array to
 		 * loop through.
@@ -229,16 +244,14 @@ export default {
 		scroller() {
 			return this.$refs.scroller
 		},
-
-		unreadMessageMarkerId() {
-			if (this.lastReadMessage !== this.$store.getters.getLastKnownMessageId(this.token)) {
-				return this.lastReadMessage
-			}
-			return 0
-		},
 	},
 
 	watch: {
+		isWindowVisible(visible) {
+			if (visible) {
+				this.onWindowFocus()
+			}
+		},
 		chatIdentifier: {
 			immediate: true,
 			handler() {
@@ -255,9 +268,11 @@ export default {
 		EventBus.$on('routeChange', this.onRouteChange)
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
+		window.addEventListener('focus', this.onWindowFocus)
 	},
 
 	beforeDestroy() {
+		window.removeEventListener('focus', this.onWindowFocus)
 		EventBus.$off('scrollChatToBottom', this.handleScrollChatToBottomEvent)
 		EventBus.$off('smoothScrollChatToBottom', this.smoothScrollToBottom)
 		EventBus.$off('focusMessage', this.focusMessage)
@@ -367,10 +382,13 @@ export default {
 			return moment.unix(message.timestamp)
 		},
 
-		handleStartGettingMessagesPreconditions() {
+		async handleStartGettingMessagesPreconditions() {
 			if (this.token && this.isParticipant && !this.isInLobby) {
-				this.lastReadMessage = this.conversation.lastReadMessage
+				// prevent sticky mode before we have loaded anything
+				this.setChatScrolledToBottom(false)
+
 				if (this.$store.getters.getFirstKnownMessageId(this.token) === null) {
+					// first time load, initialize important properties
 					this.$store.dispatch('setFirstKnownMessageId', {
 						token: this.token,
 						id: this.conversation.lastReadMessage,
@@ -380,10 +398,43 @@ export default {
 						id: this.conversation.lastReadMessage,
 					})
 
-					this.getMessages(true)
+					// get history + new messages
+					await this.getMessages(true)
 				} else {
-					this.getMessages(false)
+					// get only new messages
+					await this.getMessages(false)
 				}
+
+				// focus on next tick to make sure the DOM elements
+				// for known messages are already rendered
+				this.$nextTick(() => {
+					let focussed = null
+					if (this.$route?.hash?.startsWith('#message_')) {
+						// scroll to message in URL anchor
+						focussed = this.focusMessage(this.$route.hash.substr(9), false)
+					}
+
+					if (!focussed && this.conversation.lastReadMessage) {
+						// scroll to last read message if visible in the current pages
+						focussed = this.focusMessage(this.conversation.lastReadMessage, false, false)
+					}
+
+					// TODO: in case the element is not in a page but does exist in the DB,
+					// we need to scroll up / down to the page where it would exist after
+					// loading said pages
+
+					if (!focussed) {
+						// if no anchor was present or the message to focus on did not exist,
+						// scroll to bottom
+						this.scrollToBottom()
+					}
+
+					// if no scrollbars, clear read marker directly as scrolling is not possible for the user to clear it
+					// also clear in case lastReadMessage is zero which is due to an older bug
+					if (this.conversation.lastReadMessage === 0 || (document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)) {
+						this.$store.dispatch('clearLastReadMessage', { token: this.token })
+					}
+				})
 			} else if (this.cancelLookForNewMessages) {
 				this.cancelLookForNewMessages()
 			}
@@ -395,35 +446,21 @@ export default {
 		 * @param {boolean} loadOldMessages In case it is the first visit of this conversation, we need to load the history
 		 */
 		async getMessages(loadOldMessages) {
-			let focussed = false
 			if (loadOldMessages) {
 				// Gets the history of the conversation.
 				await this.getOldMessages(true)
-
-				if (this.$route?.hash?.startsWith('#message_')) {
-					// scroll to message in URL anchor
-					focussed = this.focusMessage(this.$route.hash.substr(9), false)
-				}
-			}
-
-			if (!focussed) {
-				// if no anchor was present or the message to focus on did not exist,
-				// simply scroll to bottom
-				this.scrollToBottom()
 			}
 
 			// Once the history is received, starts looking for new messages.
-			this.$nextTick(() => {
-				if (this._isBeingDestroyed || this._isDestroyed) {
-					console.debug('Prevent getting new messages on a destroyed MessagesList')
-					return
-				}
+			if (this._isBeingDestroyed || this._isDestroyed) {
+				console.debug('Prevent getting new messages on a destroyed MessagesList')
+				return
+			}
 
-				const followInNewMessages = this.conversation.lastMessage
-					&& this.conversation.lastReadMessage === this.conversation.lastMessage.id
+			const followInNewMessages = this.conversation.lastMessage
+				&& this.conversation.lastReadMessage === this.conversation.lastMessage.id
 
-				this.getNewMessages(followInNewMessages)
-			})
+			await this.getNewMessages(followInNewMessages)
 		},
 
 		/**
@@ -505,6 +542,7 @@ export default {
 
 			// Make the request
 			try {
+				let lastMessage = null
 				const messages = await request({ token, lastKnownMessageId })
 				this.pollingErrorTimeout = 1
 
@@ -514,6 +552,9 @@ export default {
 						this.$store.dispatch('forceGuestName', message)
 					}
 					this.$store.dispatch('processMessage', message)
+					if (!lastMessage || message.id > lastMessage.id) {
+						lastMessage = message
+					}
 				})
 
 				this.$store.dispatch('setLastKnownMessageId', {
@@ -521,6 +562,13 @@ export default {
 					id: parseInt(messages.headers['x-chat-last-given'], 10),
 				})
 
+				if (this.conversation.lastMessage && lastMessage.id > this.conversation.lastMessage.id) {
+					this.$store.dispatch('updateConversationLastMessage', {
+						token: token,
+						lastMessage: lastMessage,
+					})
+				}
+
 				// Scroll to the last message if sticky
 				if (scrollToBottom && this.isSticky) {
 					this.smoothScrollToBottom()
@@ -600,6 +648,121 @@ export default {
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
 			}
+
+			this.debounceUpdateReadMarkerAfterScroll()
+		},
+
+		/**
+		 * Find the next message element following the given message DOM element.
+		 *
+		 * This traverses the next messages and message groups to find the next one.
+		 *
+		 * @param {object} messageEl DOM element for message to start with
+		 * @returns {object} DOM element for the next message or null if none found
+		 */
+		findNextMessageElement(messageEl) {
+			// pick the previous message
+			let searchEl = messageEl.nextElementSibling
+			while (searchEl && !searchEl.matches('.message')) {
+				searchEl = searchEl.nextElementSibling
+			}
+
+			if (searchEl) {
+				return searchEl
+			} else {
+				// nothing found, then need to search in the next message group
+				searchEl = messageEl.closest('.message-group').nextElementSibling
+				while (searchEl && !searchEl.matches('.message-group')) {
+					searchEl = searchEl.nextElementSibling
+				}
+
+				// found the next message group
+				if (searchEl) {
+					// pick the first message
+					searchEl = searchEl.querySelector('.message:first-child')
+				}
+
+				if (searchEl) {
+					// we found it!
+					return searchEl
+				}
+			}
+
+			return null
+		},
+
+		/**
+		 * Finds the last message that is fully visible in the scroller viewport
+		 *
+		 * Starts searching forward after the given message element until we reach
+		 * the bottom of the viewport.
+		 *
+		 * @param {object} messageEl message element after which to start searching
+		 * @returns {object} DOM element for the last visible message
+		 */
+		findFirstVisibleMessage(messageEl) {
+			let el = messageEl
+			let previousEl = el
+			const scrollTop = this.scroller.scrollTop
+			while (el) {
+				// is the message element fully visible with no intersection with the bottom border ?
+				if (el.offsetTop - scrollTop >= 0) {
+					// this means that the previous message we had was fully visible,
+					// so we return that
+					return previousEl
+				}
+
+				previousEl = el
+				// note: for scability reasons we don't simply "get all elements"
+				el = this.findNextMessageElement(el)
+			}
+
+			return previousEl
+		},
+
+		debounceUpdateReadMarkerAfterScroll: debounce(function() {
+			this.updateReadMarkerAfterScroll()
+		}, 3000),
+
+		updateReadMarkerAfterScroll() {
+			if (!this.conversation) {
+				return
+			}
+
+			if (this.conversation.lastReadMessage === this.conversation.lastMessage?.id) {
+				// already at bottom, nothing to do
+				return
+			}
+
+			const unreadMessage = this.unreadMessageComponent
+			if (!unreadMessage?.seen) {
+				return
+			}
+
+			// if we're at bottom of the chat and focussed, then simply clear the marker
+			if (this.isSticky && document.hasFocus()) {
+				this.$store.dispatch('clearLastReadMessage', { token: this.token })
+				return
+			}
+
+			if (this.unreadMessageComponent.$refs.message.offsetTop - this.scroller.scrollTop > 0) {
+				// still visible, hasn't disappeared at the top yet
+				return
+			}
+
+			const firstVisibleMessage = this.findFirstVisibleMessage(unreadMessage.$refs.message)
+			if (!firstVisibleMessage) {
+				console.warn('First visible message not found: ', firstVisibleMessage)
+				return
+			}
+
+			const messageId = firstVisibleMessage.__vue__.id
+			if (messageId <= this.conversation.lastReadMessage) {
+				// it was probably a scroll up, don't update
+				return
+			}
+
+			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: messageId })
 		},
 
 		/**
@@ -618,13 +781,14 @@ export default {
 		 */
 		smoothScrollToBottom() {
 			this.$nextTick(function() {
-				if (this.$store.getters.windowIsVisible()) {
+				if (this.isWindowVisible && document.hasFocus()) {
 					// scrollTo is used when the user is watching
 					this.scroller.scrollTo({
 						top: this.scroller.scrollHeight,
 						behavior: 'smooth',
 					})
 					this.setChatScrolledToBottom(true)
+
 				} else {
 					// Otherwise we jump half a message and stop autoscrolling, so the user can read up
 					if (this.scroller.scrollHeight - this.scroller.scrollTop - this.scroller.offsetHeight < 40) {
@@ -654,9 +818,10 @@ export default {
 		 *
 		 * @param {string} messageId message id
 		 * @param {boolean} smooth true to smooth scroll, false to jump directly
+		 * @param {boolean} highlightAnimation true to highlight the focussed message
 		 * @returns {bool} true if element was found, false otherwise
 		 */
-		focusMessage(messageId, smooth = true) {
+		focusMessage(messageId, smooth = true, highlightAnimation = true) {
 			const element = document.getElementById(`message_${messageId}`)
 			if (!element) {
 				// TODO: in some cases might need to trigger a scroll up if this is an older message
@@ -665,13 +830,20 @@ export default {
 			}
 
 			this.$nextTick(async() => {
+				// FIXME: this doesn't wait for the smooth scroll to end
 				await element.scrollIntoView({
 					behavior: smooth ? 'smooth' : 'auto',
 					block: 'center',
 					inline: 'nearest',
 				})
+				if (!smooth) {
+					// scroll the viewport slightly further to make sure the element is about 1/3 from the top
+					this.scroller.scrollTop += this.scroller.offsetHeight / 4
+				}
 				element.focus()
-				element.highlightAnimation()
+				if (highlightAnimation) {
+					element.highlightAnimation()
+				}
 			})
 
 			return true
@@ -734,6 +906,10 @@ export default {
 		setChatScrolledToBottom(boolean) {
 			this.$emit('setChatScrolledToBottom', boolean)
 		},
+
+		onWindowFocus() {
+			this.updateReadMarkerAfterScroll()
+		},
 	},
 }
 </script>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 3bdb5e4cbb6..a545488d681 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -324,9 +324,26 @@ export default {
 
 					// If successful, deletes the temporary message from the store
 					this.$store.dispatch('removeTemporaryMessageFromStore', temporaryMessage)
+
+					const message = response.data.ocs.data
 					// And adds the complete version of the message received
 					// by the server
-					this.$store.dispatch('processMessage', response.data.ocs.data)
+					this.$store.dispatch('processMessage', message)
+
+					// update lastMessage and lastReadMessage
+					// do it conditionally because there could have been more messages appearing concurrently
+					if (this.conversation.lastMessage && message.id > this.conversation.lastMessage.id) {
+						this.$store.dispatch('updateConversationLastMessage', {
+							token: this.token,
+							lastMessage: message,
+						})
+					}
+					if (message.id > this.conversation.lastReadMessage) {
+						this.$store.dispatch('updateConversationLastReadMessage', {
+							token: this.token,
+							lastReadMessage: message.id,
+						})
+					}
 				} catch (error) {
 					let statusCode = null
 					console.debug(`error while submitting message ${error}`, error)
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
index 8a2b14951b8..f07af5d9558 100644
--- a/src/services/messagesService.js
+++ b/src/services/messagesService.js
@@ -36,6 +36,7 @@ import Hex from 'crypto-js/enc-hex'
 const fetchMessages = async function({ token, lastKnownMessageId, includeLastKnown }, options) {
 	const response = await axios.get(generateOcsUrl('apps/spreed/api/v1/chat', 2) + token, Object.assign(options, {
 		params: {
+			setReadMarker: 0,
 			lookIntoFuture: 0,
 			lastKnownMessageId,
 			includeLastKnown: includeLastKnown || 0,
@@ -64,6 +65,7 @@ const fetchMessages = async function({ token, lastKnownMessageId, includeLastKno
 const lookForNewMessages = async({ token, lastKnownMessageId }, options) => {
 	const response = await axios.get(generateOcsUrl('apps/spreed/api/v1/chat', 2) + token, Object.assign(options, {
 		params: {
+			setReadMarker: 0,
 			lookIntoFuture: 1,
 			lastKnownMessageId,
 			includeLastKnown: 0,
@@ -138,10 +140,28 @@ const postRichObjectToConversation = async function(token, { objectType, objectI
 	})
 }
 
+/**
+ * Updates the last read message id
+ *
+ * @param {string} token The token of the conversation to be removed from favorites
+ * @param {int} lastReadMessage id of the last read message to set
+ */
+const updateLastReadMessage = async function(token, lastReadMessage) {
+	try {
+		const response = await axios.post(generateOcsUrl('apps/spreed/api/v1', 2) + `chat/${token}/read`, {
+			lastReadMessage,
+		})
+		return response
+	} catch (error) {
+		console.error(`Error while updating the last read message to {lastReadMessage}`, error)
+	}
+}
+
 export {
 	fetchMessages,
 	lookForNewMessages,
 	postNewMessage,
 	deleteMessage,
 	postRichObjectToConversation,
+	updateLastReadMessage,
 }
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index 271b4c521c1..c694fa6f4a3 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -107,6 +107,14 @@ const mutations = {
 		Vue.set(state.conversations[token], 'description', description)
 	},
 
+	updateConversationLastReadMessage(state, { token, lastReadMessage }) {
+		Vue.set(state.conversations[token], 'lastReadMessage', lastReadMessage)
+	},
+
+	updateConversationLastMessage(state, { token, lastMessage }) {
+		Vue.set(state.conversations[token], 'lastMessage', lastMessage)
+	},
+
 	changeNotificationLevel(state, { token, notificationLevel }) {
 		Vue.set(state.conversations[token], 'notificationLevel', notificationLevel)
 	},
@@ -319,6 +327,14 @@ const actions = {
 		commit('addConversation', conversation)
 	},
 
+	async updateConversationLastMessage({ commit }, { token, lastMessage }) {
+		commit('updateConversationLastMessage', { token, lastMessage })
+	},
+
+	async updateConversationLastReadMessage({ commit }, { token, lastReadMessage }) {
+		commit('updateConversationLastReadMessage', { token, lastReadMessage })
+	},
+
 	changeNotificationLevel({ commit }, { token, notificationLevel }) {
 		commit('changeNotificationLevel', { token, notificationLevel })
 	},
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index dba80cdbf4d..eb0391539d1 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -20,7 +20,10 @@
  *
  */
 import Vue from 'vue'
-import { deleteMessage } from '../services/messagesService'
+import {
+	deleteMessage,
+	updateLastReadMessage,
+} from '../services/messagesService'
 
 const state = {
 	/**
@@ -321,6 +324,26 @@ const actions = {
 	deleteMessages(context, token) {
 		context.commit('deleteMessages', token)
 	},
+
+	async clearLastReadMessage(context, { token }) {
+		const conversation = context.getters.conversations[token]
+		if (!conversation || !conversation.lastMessage) {
+			return
+		}
+		// set the id to the last message
+		context.dispatch('updateLastReadMessage', { token, id: conversation.lastMessage.id })
+	},
+
+	async updateLastReadMessage(context, { token, id = 0 }) {
+		const conversation = Object.assign({}, context.getters.conversations[token])
+		if (!conversation || conversation.lastReadMessage === id) {
+			return
+		}
+
+		// optimistic early commit to avoid indicator flickering
+		context.commit('updateConversationLastReadMessage', { token, lastReadMessage: id })
+		await updateLastReadMessage(token, id)
+	},
 }
 
 export default { state, mutations, getters, actions }

From 6929de8b6c7c3d5282bae20d9df5ee89144d914a Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 23 Feb 2021 22:27:53 +0100
Subject: [PATCH 03/17] Don't mark conversation as read any more on click

When joining a conversation, don't mark it as read any more.
The only moment will be when scrolling down to the bottom of a
conversation and when clearing the read marker, in which case we
immediately update the store.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/App.vue                                                    | 1 -
 src/FilesSidebarTabApp.vue                                     | 1 -
 src/PublicShareAuthSidebar.vue                                 | 1 -
 src/PublicShareSidebar.vue                                     | 1 -
 .../LeftSidebar/ConversationsList/ConversationsList.vue        | 1 -
 src/components/LeftSidebar/LeftSidebar.vue                     | 3 ---
 src/store/messagesStore.js                                     | 3 +++
 7 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6b26c0b806f..12fc4cfb902 100644
--- a/src/App.vue
+++ b/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
diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index 9b24d4b6263..682be431796 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/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)
 		},
 
 		/**
diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
index bf005593c6d..e30f9b70d21 100644
--- a/src/PublicShareAuthSidebar.vue
+++ b/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
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 5f39cfd21fb..451daf5dfd7 100644
--- a/src/PublicShareSidebar.vue
+++ b/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
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
index be79aca565c..66ac7251dee 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
+++ b/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)
 			}
 		},
 
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 6b827ab10f3..e9ea1415f95 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/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
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index eb0391539d1..d2c2542ca9a 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -332,6 +332,7 @@ const actions = {
 		}
 		// set the id to the last message
 		context.dispatch('updateLastReadMessage', { token, id: conversation.lastMessage.id })
+		context.dispatch('markConversationRead', token)
 	},
 
 	async updateLastReadMessage(context, { token, id = 0 }) {
@@ -343,6 +344,8 @@ const actions = {
 		// optimistic early commit to avoid indicator flickering
 		context.commit('updateConversationLastReadMessage', { token, lastReadMessage: id })
 		await updateLastReadMessage(token, id)
+
+		// TODO: update unread counters if possible (otherwise user needs to wait for conversation list refresh)
 	},
 }
 

From f24ac54116ff9d89b4b38f192c79c0532d700faa Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 24 Feb 2021 09:55:03 +0100
Subject: [PATCH 04/17] Properly clear when focussed and sticky

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index abd81f3f8d0..52c27fe3a90 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -789,6 +789,7 @@ export default {
 					})
 					this.setChatScrolledToBottom(true)
 
+					this.updateReadMarkerAfterScroll()
 				} else {
 					// Otherwise we jump half a message and stop autoscrolling, so the user can read up
 					if (this.scroller.scrollHeight - this.scroller.scrollTop - this.scroller.offsetHeight < 40) {

From 4d5ad40f26b1c8749c4bcd3350724f6b8d13d40a Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 24 Feb 2021 10:51:49 +0100
Subject: [PATCH 05/17] Read marker tweaks

Adjust design a bit of the marker.

Debounce read marker processor on focus to delay it a bit.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesGroup/Message/Message.vue | 2 +-
 src/components/MessagesList/MessagesList.vue                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 86f636ab358..f9bf7e429f9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -169,7 +169,7 @@ the main body of the message as well as a quote.
 			<div v-if="isLastReadMessage"
 				v-observe-visibility="lastReadMessageVisibilityChanged">
 				<div v-if="!isLastMessage" class="new-message-marker">
-					<span>{{ t('spreed', 'New messages') }}</span>
+					<span>----- {{ t('spreed', 'Unread messages') }} -----</span>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 52c27fe3a90..045b5b61c00 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -909,7 +909,7 @@ export default {
 		},
 
 		onWindowFocus() {
-			this.updateReadMarkerAfterScroll()
+			this.debounceUpdateReadMarkerAfterScroll()
 		},
 	},
 }

From 3c6d5bc5612a9ef8e6aec88156a6cb2385ceaabf Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 24 Feb 2021 12:44:01 +0100
Subject: [PATCH 06/17] Scroll to unread when reopening sidebar with chat

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/ChatView.vue                  |  8 +++
 src/components/MessagesList/MessagesList.vue | 74 ++++++++++++--------
 src/components/RightSidebar/RightSidebar.vue |  2 +-
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 2f46fb72cf5..105fafa886c 100644
--- a/src/components/ChatView.vue
+++ b/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,
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 045b5b61c00..44f367de8b9 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -103,6 +103,11 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+
+		isVisible: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data: function() {
@@ -138,7 +143,7 @@ export default {
 
 	computed: {
 		isWindowVisible() {
-			return this.$store.getters.windowIsVisible()
+			return this.$store.getters.windowIsVisible() && this.isVisible
 		},
 
 		/**
@@ -247,11 +252,14 @@ export default {
 	},
 
 	watch: {
-		isWindowVisible(visible) {
+		isWindowVisible: debounce(function(visible) {
 			if (visible) {
+				this.scrollToFocussedMessage()
 				this.onWindowFocus()
 			}
-		},
+			// FIXME: the sidebar takes much longer to open, this is why we need a higher value here
+			// need to investigate why the sidebar takes that long to open and is not even animated
+		}, 100),
 		chatIdentifier: {
 			immediate: true,
 			handler() {
@@ -382,6 +390,35 @@ export default {
 			return moment.unix(message.timestamp)
 		},
 
+		scrollToFocussedMessage() {
+			let focussed = null
+			if (this.$route?.hash?.startsWith('#message_')) {
+				// scroll to message in URL anchor
+				focussed = this.focusMessage(this.$route.hash.substr(9), false)
+			}
+
+			if (!focussed && this.conversation.lastReadMessage) {
+				// scroll to last read message if visible in the current pages
+				focussed = this.focusMessage(this.conversation.lastReadMessage, false, false)
+			}
+
+			// TODO: in case the element is not in a page but does exist in the DB,
+			// we need to scroll up / down to the page where it would exist after
+			// loading said pages
+
+			if (!focussed) {
+				// if no anchor was present or the message to focus on did not exist,
+				// scroll to bottom
+				this.scrollToBottom()
+			}
+
+			// if no scrollbars, clear read marker directly as scrolling is not possible for the user to clear it
+			// also clear in case lastReadMessage is zero which is due to an older bug
+			if (this.conversation.lastReadMessage === 0 || (this.isWindowVisible && document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)) {
+				this.$store.dispatch('clearLastReadMessage', { token: this.token })
+			}
+		},
+
 		async handleStartGettingMessagesPreconditions() {
 			if (this.token && this.isParticipant && !this.isInLobby) {
 				// prevent sticky mode before we have loaded anything
@@ -408,32 +445,7 @@ export default {
 				// focus on next tick to make sure the DOM elements
 				// for known messages are already rendered
 				this.$nextTick(() => {
-					let focussed = null
-					if (this.$route?.hash?.startsWith('#message_')) {
-						// scroll to message in URL anchor
-						focussed = this.focusMessage(this.$route.hash.substr(9), false)
-					}
-
-					if (!focussed && this.conversation.lastReadMessage) {
-						// scroll to last read message if visible in the current pages
-						focussed = this.focusMessage(this.conversation.lastReadMessage, false, false)
-					}
-
-					// TODO: in case the element is not in a page but does exist in the DB,
-					// we need to scroll up / down to the page where it would exist after
-					// loading said pages
-
-					if (!focussed) {
-						// if no anchor was present or the message to focus on did not exist,
-						// scroll to bottom
-						this.scrollToBottom()
-					}
-
-					// if no scrollbars, clear read marker directly as scrolling is not possible for the user to clear it
-					// also clear in case lastReadMessage is zero which is due to an older bug
-					if (this.conversation.lastReadMessage === 0 || (document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)) {
-						this.$store.dispatch('clearLastReadMessage', { token: this.token })
-					}
+					this.scrollToFocussedMessage()
 				})
 			} else if (this.cancelLookForNewMessages) {
 				this.cancelLookForNewMessages()
@@ -735,12 +747,12 @@ export default {
 			}
 
 			const unreadMessage = this.unreadMessageComponent
-			if (!unreadMessage?.seen) {
+			if (!unreadMessage || !unreadMessage.seen) {
 				return
 			}
 
 			// if we're at bottom of the chat and focussed, then simply clear the marker
-			if (this.isSticky && document.hasFocus()) {
+			if (this.isSticky && this.isWindowVisible && document.hasFocus()) {
 				this.$store.dispatch('clearLastReadMessage', { token: this.token })
 				return
 			}
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 8d81bbb8fb6..97a9376c141 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -53,7 +53,7 @@
 			:order="1"
 			:name="t('spreed', 'Chat')"
 			icon="icon-comment">
-			<ChatView />
+			<ChatView :is-visible="opened" />
 		</AppSidebarTab>
 		<AppSidebarTab v-if="getUserId"
 			id="participants"

From b99adb66bc0af2c56fda909b8fc60d197905c509 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 1 Mar 2021 12:34:09 +0100
Subject: [PATCH 07/17] Tweak read marker behavior

When no scrolling is possible, add delay before clearing.

Small related code cleanup.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesList.vue | 11 ++++++++---
 src/services/messagesService.js              | 11 +++--------
 src/store/messagesStore.js                   |  2 --
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 44f367de8b9..a31e392e447 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -414,8 +414,11 @@ export default {
 
 			// if no scrollbars, clear read marker directly as scrolling is not possible for the user to clear it
 			// also clear in case lastReadMessage is zero which is due to an older bug
-			if (this.conversation.lastReadMessage === 0 || (this.isWindowVisible && document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)) {
-				this.$store.dispatch('clearLastReadMessage', { token: this.token })
+			if (this.conversation.lastReadMessage === 0
+				|| (this.isWindowVisible && document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)
+			) {
+				// clear after a delay, unless scrolling can resume in-between
+				this.debounceUpdateReadMarkerAfterScroll()
 			}
 		},
 
@@ -752,7 +755,9 @@ export default {
 			}
 
 			// if we're at bottom of the chat and focussed, then simply clear the marker
-			if (this.isSticky && this.isWindowVisible && document.hasFocus()) {
+			if (this.conversation.lastReadMessage === 0
+				|| (this.isSticky && this.isWindowVisible && document.hasFocus())
+			) {
 				this.$store.dispatch('clearLastReadMessage', { token: this.token })
 				return
 			}
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
index f07af5d9558..ccc41bbc972 100644
--- a/src/services/messagesService.js
+++ b/src/services/messagesService.js
@@ -147,14 +147,9 @@ const postRichObjectToConversation = async function(token, { objectType, objectI
  * @param {int} lastReadMessage id of the last read message to set
  */
 const updateLastReadMessage = async function(token, lastReadMessage) {
-	try {
-		const response = await axios.post(generateOcsUrl('apps/spreed/api/v1', 2) + `chat/${token}/read`, {
-			lastReadMessage,
-		})
-		return response
-	} catch (error) {
-		console.error(`Error while updating the last read message to {lastReadMessage}`, error)
-	}
+	return axios.post(generateOcsUrl('apps/spreed/api/v1', 2) + `chat/${token}/read`, {
+		lastReadMessage,
+	})
 }
 
 export {
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index d2c2542ca9a..6cced7f203f 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -344,8 +344,6 @@ const actions = {
 		// optimistic early commit to avoid indicator flickering
 		context.commit('updateConversationLastReadMessage', { token, lastReadMessage: id })
 		await updateLastReadMessage(token, id)
-
-		// TODO: update unread counters if possible (otherwise user needs to wait for conversation list refresh)
 	},
 }
 

From 31b3c3ed28d584b33000cce2f162f12855a6ed4c Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 1 Mar 2021 14:23:41 +0100
Subject: [PATCH 08/17] Read marker is now a long bar

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index f9bf7e429f9..4328401930f 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -169,7 +169,7 @@ the main body of the message as well as a quote.
 			<div v-if="isLastReadMessage"
 				v-observe-visibility="lastReadMessageVisibilityChanged">
 				<div v-if="!isLastMessage" class="new-message-marker">
-					<span>----- {{ t('spreed', 'Unread messages') }} -----</span>
+					<span>{{ t('spreed', 'Unread messages') }}</span>
 				</div>
 			</div>
 		</div>
@@ -801,14 +801,21 @@ export default {
 }
 
 .new-message-marker {
-	margin: 20px 0;
-	text-align: center;
+	position: relative;
+	margin: 40px 15px 0 -45px;
+	border-top: 1px solid var(--color-border);
 
 	span {
-		background-color: var(--color-primary-light);
-		color: var(--color-text-lighter);
-		padding: 10px  20px;
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+		padding: 0 7px 0 7px;
+		text-align: center;
+		white-space: nowrap;
+
 		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
 	}
 }
 

From 3dbd551ff83043333722296ba3e23c593061ce9f Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 1 Mar 2021 14:35:10 +0100
Subject: [PATCH 09/17] Use DOM attributes to access message/seen information

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue           |  2 ++
 src/components/MessagesList/MessagesList.vue    | 17 ++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 4328401930f..b820c7ef338 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -28,6 +28,8 @@ the main body of the message as well as a quote.
 	<li
 		:id="`message_${id}`"
 		ref="message"
+		:data-message-id="id"
+		:data-seen="seen"
 		class="message"
 		:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
 		@mouseover="handleMouseover"
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index a31e392e447..e2fb82c65aa 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -147,17 +147,17 @@ export default {
 		},
 
 		/**
-		 * Finds the first unread message component
+		 * Finds the first unread message element
 		 *
-		 * @returns {object} Vue component of the message or null if not found
+		 * @returns {object} DOM element of the first unread message
 		 */
-		unreadMessageComponent() {
+		unreadMessageElement() {
 			let el = document.getElementById('message_' + this.conversation.lastReadMessage)
 			if (el) {
 				el = el.closest('.message')
 			}
 
-			return el?.__vue__
+			return el
 		},
 
 		/**
@@ -749,8 +749,7 @@ export default {
 				return
 			}
 
-			const unreadMessage = this.unreadMessageComponent
-			if (!unreadMessage || !unreadMessage.seen) {
+			if (!this.unreadMessageElement || !this.unreadMessageElement.getAttribute('data-seen')) {
 				return
 			}
 
@@ -762,18 +761,18 @@ export default {
 				return
 			}
 
-			if (this.unreadMessageComponent.$refs.message.offsetTop - this.scroller.scrollTop > 0) {
+			if (this.unreadMessageElement.offsetTop - this.scroller.scrollTop > 0) {
 				// still visible, hasn't disappeared at the top yet
 				return
 			}
 
-			const firstVisibleMessage = this.findFirstVisibleMessage(unreadMessage.$refs.message)
+			const firstVisibleMessage = this.findFirstVisibleMessage(this.unreadMessageElement)
 			if (!firstVisibleMessage) {
 				console.warn('First visible message not found: ', firstVisibleMessage)
 				return
 			}
 
-			const messageId = firstVisibleMessage.__vue__.id
+			const messageId = firstVisibleMessage.getAttribute('data-message-id')
 			if (messageId <= this.conversation.lastReadMessage) {
 				// it was probably a scroll up, don't update
 				return

From 30285b0bf15cc6f823c7d8f12c13fbc6d1e41fef Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 1 Mar 2021 15:14:33 +0100
Subject: [PATCH 10/17] Fix immediate update of read marker

Use int instead of string for lastReadMessage update.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index e2fb82c65aa..7858ae6d61f 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -749,7 +749,7 @@ export default {
 				return
 			}
 
-			if (!this.unreadMessageElement || !this.unreadMessageElement.getAttribute('data-seen')) {
+			if (!this.unreadMessageElement || this.unreadMessageElement.getAttribute('data-seen') !== 'true') {
 				return
 			}
 
@@ -772,7 +772,7 @@ export default {
 				return
 			}
 
-			const messageId = firstVisibleMessage.getAttribute('data-message-id')
+			const messageId = parseInt(firstVisibleMessage.getAttribute('data-message-id'), 10)
 			if (messageId <= this.conversation.lastReadMessage) {
 				// it was probably a scroll up, don't update
 				return

From 9374c25b6dab783760fe017fa4ade6a5b12d35e5 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 2 Mar 2021 09:28:19 +0100
Subject: [PATCH 11/17] New menu item mark conversation as read

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../LeftSidebar/ConversationsList/Conversation.vue       | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index c515b22532b..1c39ec08102 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/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.
 		 */

From 22eb26244327b6627217061c073784bf68425772 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 2 Mar 2021 09:34:26 +0100
Subject: [PATCH 12/17] New menu item mark message as unread

This will move the unread marker to a specific position.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesList/MessagesGroup/Message/Message.vue   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index b820c7ef338..63b299ffef5 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -144,6 +144,12 @@ the main body of the message as well as a quote.
 								@click.stop.prevent="handleCopyMessageLink">
 								{{ t('spreed', 'Copy message link') }}
 							</ActionButton>
+							<ActionButton
+								v-if="isReplyable"
+								:close-after-click="true"
+								@click.stop="handleMarkAsUnread">
+								{{ t('spreed', 'Mark as unread') }}
+							</ActionButton>
 							<ActionSeparator v-if="messageActions.length > 0" />
 							<template
 								v-for="action in messageActions">
@@ -374,7 +380,7 @@ export default {
 		},
 
 		hasActionsMenu() {
-			return (this.isPrivateReplyable || this.isDeleteable || this.messageActions.length > 0) && !this.isConversationReadOnly
+			return (this.isPrivateReplyable || this.isReplyable || this.isDeleteable || this.messageActions.length > 0) && !this.isConversationReadOnly
 		},
 
 		isConversationReadOnly() {
@@ -684,6 +690,10 @@ export default {
 				showError(t('spreed', 'The link could not be copied.'))
 			}
 		},
+
+		handleMarkAsUnread() {
+			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: this.id })
+		},
 	},
 }
 </script>

From f8ca906165830d06f4f1535ced77ef94117a2fbf Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 4 Mar 2021 13:06:50 +0100
Subject: [PATCH 13/17] Move unread messages marker out of the hover element

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 63b299ffef5..82065b9b199 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -30,39 +30,40 @@ the main body of the message as well as a quote.
 		ref="message"
 		:data-message-id="id"
 		:data-seen="seen"
-		class="message"
-		:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
-		@mouseover="handleMouseover"
-		@mouseleave="handleMouseleave">
-		<div>
+		class="message">
+		<div
+			:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
+			class="message-body"
+			@mouseover="handleMouseover"
+			@mouseleave="handleMouseleave">
 			<div v-if="isFirstMessage && showAuthor"
-				class="message__author"
+				class="message-body__author"
 				role="heading"
 				aria-level="4">
 				{{ actorDisplayName }}
 			</div>
 			<div
 				ref="messageMain"
-				class="message__main">
+				class="message-body__main">
 				<div v-if="isSingleEmoji"
-					class="message__main__text">
+					class="message-body__main__text">
 					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
 					<div class="single-emoji">
 						{{ message }}
 					</div>
 				</div>
-				<div v-else-if="showJoinCallButton" class="message__main__text call-started">
+				<div v-else-if="showJoinCallButton" class="message-body__main__text call-started">
 					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 					<CallButton />
 				</div>
-				<div v-else-if="isDeletedMessage" class="message__main__text deleted-message">
+				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
 					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 				</div>
-				<div v-else class="message__main__text" :class="{'system-message': isSystemMessage}">
+				<div v-else class="message-body__main__text" :class="{'system-message': isSystemMessage}">
 					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
 					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 				</div>
-				<div v-if="!isDeletedMessage" class="message__main__right">
+				<div v-if="!isDeletedMessage" class="message-body__main__right">
 					<span
 						v-tooltip.auto="messageDate"
 						class="date"
@@ -116,7 +117,7 @@ the main body of the message as well as a quote.
 					<!-- Message Actions -->
 					<div
 						v-show="showActions"
-						class="message__main__right__actions"
+						class="message-body__main__right__actions"
 						:class="{ 'tall' : isTallEnough }">
 						<Actions
 							v-show="isReplyable">
@@ -174,11 +175,11 @@ the main body of the message as well as a quote.
 					</div>
 				</div>
 			</div>
-			<div v-if="isLastReadMessage"
-				v-observe-visibility="lastReadMessageVisibilityChanged">
-				<div v-if="!isLastMessage" class="new-message-marker">
-					<span>{{ t('spreed', 'Unread messages') }}</span>
-				</div>
+		</div>
+		<div v-if="isLastReadMessage"
+			v-observe-visibility="lastReadMessageVisibilityChanged">
+			<div class="new-message-marker">
+				<span>{{ t('spreed', 'Unread messages') }}</span>
 			</div>
 		</div>
 	</li>
@@ -366,13 +367,10 @@ export default {
 	},
 
 	computed: {
-		isLastMessage() {
-			return this.conversation.lastMessage
-				&& this.id === this.conversation.lastMessage.id
-		},
-
 		isLastReadMessage() {
 			return this.id === this.conversation.lastReadMessage
+				&& (!this.conversation.lastMessage
+				|| this.id !== this.conversation.lastMessage.id)
 		},
 
 		messageObject() {
@@ -702,7 +700,7 @@ export default {
 @import '../../../../assets/variables';
 @import '../../../../assets/buttons';
 
-.message {
+.message-body {
 	padding: 4px;
 	font-size: $chat-font-size;
 	line-height: $chat-line-height;
@@ -789,7 +787,7 @@ export default {
 
 // Increase the padding for regular messages to improve readability and
 // allow some space for the reply button
-.message:not(.system) {
+.message-body:not(.system) {
 	padding: 12px 4px 12px 8px;
 	margin: -6px 0;
 }
@@ -814,7 +812,7 @@ export default {
 
 .new-message-marker {
 	position: relative;
-	margin: 40px 15px 0 -45px;
+	margin: 20px 15px 20px -45px;
 	border-top: 1px solid var(--color-border);
 
 	span {

From 0298bf5a6f453db6d6f85ad7afe85e6c0ad1f011 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 4 Mar 2021 13:58:58 +0100
Subject: [PATCH 14/17] Decouple visible unread marker from its actual position

To avoid jumping around when updating the lastReadMessage property, its
last value is now cached in visualLastReadMessageId in the
messagesStore. The marker always keeps its position until the user
focusses away then back. In the latter case the marker position is
refreshed based on the last backend/store state.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 20 +++++-
 .../MessagesGroup/MessagesGroup.vue           |  6 ++
 src/components/MessagesList/MessagesList.vue  | 65 ++++++++++++++-----
 src/store/messagesStore.js                    | 33 ++++++++++
 4 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 82065b9b199..503ffc68f43 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -352,6 +352,11 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		lastReadMessageId: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	data() {
@@ -368,7 +373,9 @@ export default {
 
 	computed: {
 		isLastReadMessage() {
-			return this.id === this.conversation.lastReadMessage
+			// note: not reading lastReadMessage from the conversation as we want to define it externally
+			// to have closer control on marker's visibility behavior
+			return this.id === this.lastReadMessageId
 				&& (!this.conversation.lastMessage
 				|| this.id !== this.conversation.lastMessage.id)
 		},
@@ -690,7 +697,16 @@ export default {
 		},
 
 		handleMarkAsUnread() {
-			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: this.id })
+			// update in backend
+			this.$store.dispatch('updateLastReadMessage', {
+				token: this.token,
+				id: this.id,
+			})
+			// update visually
+			this.$store.dispatch('setVisualLastReadMessageId', {
+				token: this.token,
+				id: this.conversation.lastReadMessage,
+			})
 		},
 	},
 }
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 5702e735510..29eab5ff9b8 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -41,6 +41,7 @@
 					:key="message.id"
 					v-bind="message"
 					:is-first-message="index === 0"
+					:last-read-message-id="lastReadMessageId"
 					:actor-type="actorType"
 					:actor-id="actorId"
 					:actor-display-name="actorDisplayName"
@@ -86,6 +87,11 @@ export default {
 			type: Array,
 			required: true,
 		},
+
+		lastReadMessageId: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	computed: {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 7858ae6d61f..ba7ecd18828 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -44,6 +44,7 @@ get the messagesList array and loop through the list to generate the messages.
 			:key="item[0].id"
 			:style="{ height: item.height + 'px' }"
 			v-bind="item"
+			:last-read-message-id="visualLastReadMessageId"
 			:messages="item"
 			@deleteMessage="handleDeleteMessage" />
 		<template v-if="!messagesGroupedByAuthor.length">
@@ -146,6 +147,10 @@ export default {
 			return this.$store.getters.windowIsVisible() && this.isVisible
 		},
 
+		visualLastReadMessageId() {
+			return this.$store.getters.getVisualLastReadMessageId(this.token)
+		},
+
 		/**
 		 * Finds the first unread message element
 		 *
@@ -397,9 +402,9 @@ export default {
 				focussed = this.focusMessage(this.$route.hash.substr(9), false)
 			}
 
-			if (!focussed && this.conversation.lastReadMessage) {
+			if (!focussed && this.visualLastReadMessageId) {
 				// scroll to last read message if visible in the current pages
-				focussed = this.focusMessage(this.conversation.lastReadMessage, false, false)
+				focussed = this.focusMessage(this.visualLastReadMessageId, false, false)
 			}
 
 			// TODO: in case the element is not in a page but does exist in the DB,
@@ -414,19 +419,22 @@ export default {
 
 			// if no scrollbars, clear read marker directly as scrolling is not possible for the user to clear it
 			// also clear in case lastReadMessage is zero which is due to an older bug
-			if (this.conversation.lastReadMessage === 0
-				|| (this.isWindowVisible && document.hasFocus() && this.scroller.scrollHeight <= this.scroller.offsetHeight)
-			) {
+			if (this.visualLastReadMessageId === 0 || this.scroller.scrollHeight <= this.scroller.offsetHeight) {
 				// clear after a delay, unless scrolling can resume in-between
-				this.debounceUpdateReadMarkerAfterScroll()
+				this.debounceUpdateReadMarkerPosition()
 			}
 		},
 
 		async handleStartGettingMessagesPreconditions() {
 			if (this.token && this.isParticipant && !this.isInLobby) {
+
 				// prevent sticky mode before we have loaded anything
 				this.setChatScrolledToBottom(false)
 
+				this.$store.dispatch('setVisualLastReadMessageId', {
+					token: this.token,
+					id: this.conversation.lastReadMessage,
+				})
 				if (this.$store.getters.getFirstKnownMessageId(this.token) === null) {
 					// first time load, initialize important properties
 					this.$store.dispatch('setFirstKnownMessageId', {
@@ -664,7 +672,7 @@ export default {
 				this.previousScrollTopValue = scrollTop
 			}
 
-			this.debounceUpdateReadMarkerAfterScroll()
+			this.debounceUpdateReadMarkerPosition()
 		},
 
 		/**
@@ -735,11 +743,32 @@ export default {
 			return previousEl
 		},
 
-		debounceUpdateReadMarkerAfterScroll: debounce(function() {
-			this.updateReadMarkerAfterScroll()
-		}, 3000),
+		/**
+		 * Sync the visual marker position with what is currently in the store.
+		 * This separation exists to avoid jumpy marker while scrolling.
+		 *
+		 * Also see updateReadMarkerPosition() for the backend update.
+		 */
+		refreshReadMarkerPosition() {
+			this.$store.dispatch('setVisualLastReadMessageId', {
+				token: this.token,
+				id: this.conversation.lastReadMessage,
+			})
+		},
+
+		debounceUpdateReadMarkerPosition: debounce(function() {
+			this.updateReadMarkerPosition()
+		}, 1000),
 
-		updateReadMarkerAfterScroll() {
+		/**
+		 * Recalculates the current read marker position based on the first visible element,
+		 * but only do so if the previous marker was already seen.
+		 *
+		 * The new marker position will be sent to the backend but not applied visually.
+		 * Visually, the marker will only move the next time the user is focussing back to this
+		 * conversation in refreshReadMarkerPosition()
+		 */
+		updateReadMarkerPosition() {
 			if (!this.conversation) {
 				return
 			}
@@ -749,14 +778,13 @@ export default {
 				return
 			}
 
+			// first unread message has not been seen yet, so don't move it
 			if (!this.unreadMessageElement || this.unreadMessageElement.getAttribute('data-seen') !== 'true') {
 				return
 			}
 
-			// if we're at bottom of the chat and focussed, then simply clear the marker
-			if (this.conversation.lastReadMessage === 0
-				|| (this.isSticky && this.isWindowVisible && document.hasFocus())
-			) {
+			// if we're at bottom of the chat, then simply clear the marker
+			if (this.conversation.lastReadMessage === 0 || this.isSticky) {
 				this.$store.dispatch('clearLastReadMessage', { token: this.token })
 				return
 			}
@@ -779,6 +807,9 @@ export default {
 			}
 
 			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: messageId })
+
+			// we don't call setVisualLastReadMessageId yet, it will update the next time the
+			// user focussed back on the conversation. See refreshReadMarkerPosition().
 		},
 
 		/**
@@ -805,7 +836,7 @@ export default {
 					})
 					this.setChatScrolledToBottom(true)
 
-					this.updateReadMarkerAfterScroll()
+					this.updateReadMarkerPosition()
 				} else {
 					// Otherwise we jump half a message and stop autoscrolling, so the user can read up
 					if (this.scroller.scrollHeight - this.scroller.scrollTop - this.scroller.offsetHeight < 40) {
@@ -925,7 +956,7 @@ export default {
 		},
 
 		onWindowFocus() {
-			this.debounceUpdateReadMarkerAfterScroll()
+			this.refreshReadMarkerPosition()
 		},
 	},
 }
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6cced7f203f..8c6c293a4c1 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -38,6 +38,11 @@ const state = {
 	 * Map of conversation token to last known message id
 	 */
 	lastKnown: {},
+
+	/**
+	 * Cached last read message id for display.
+	 */
+	visualLastReadMessageId: {},
 }
 
 const getters = {
@@ -102,6 +107,13 @@ const getters = {
 		}
 		return null
 	},
+
+	getVisualLastReadMessageId: (state) => (token) => {
+		if (state.visualLastReadMessageId[token]) {
+			return state.visualLastReadMessageId[token]
+		}
+		return null
+	},
 }
 
 const mutations = {
@@ -185,6 +197,15 @@ const mutations = {
 		Vue.set(state.lastKnown, token, id)
 	},
 
+	/**
+	 * @param {object} state current store state;
+	 * @param {string} token Token of the conversation
+	 * @param {string} id Id of the last read chat message
+	 */
+	setVisualLastReadMessageId(state, { token, id }) {
+		Vue.set(state.visualLastReadMessageId, token, id)
+	},
+
 	/**
 	 * Deletes the messages entry from the store for the given conversation token.
 	 *
@@ -198,6 +219,9 @@ const mutations = {
 		if (state.lastKnown[token]) {
 			Vue.delete(state.lastKnown, token)
 		}
+		if (state.visualLastReadMessageId[token]) {
+			Vue.delete(state.visualLastReadMessageId, token)
+		}
 		if (state.messages[token]) {
 			Vue.delete(state.messages, token)
 		}
@@ -315,6 +339,15 @@ const actions = {
 		context.commit('setLastKnownMessageId', { token, id })
 	},
 
+	/**
+	 * @param {object} context default store context;
+	 * @param {string} token Token of the conversation
+	 * @param {string} id Id of the last read chat message
+	 */
+	setVisualLastReadMessageId(context, { token, id }) {
+		context.commit('setVisualLastReadMessageId', { token, id })
+	},
+
 	/**
 	 * Deletes the messages of a conversation
 	 *

From 579fbdc791f32be262d668a218ee38bad7449a32 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 4 Mar 2021 14:10:40 +0100
Subject: [PATCH 15/17] Remove delay for unread marker on focus

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesList.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index ba7ecd18828..696d3ed5453 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -257,14 +257,14 @@ export default {
 	},
 
 	watch: {
-		isWindowVisible: debounce(function(visible) {
+		isWindowVisible(visible) {
 			if (visible) {
-				this.scrollToFocussedMessage()
 				this.onWindowFocus()
+				// FIXME: the sidebar chat takes much longer to open, this is why we need a higher value here
+				// need to investigate why the sidebar takes that long to open and is not even animated
+				window.setTimeout(() => this.scrollToFocussedMessage(), 100)
 			}
-			// FIXME: the sidebar takes much longer to open, this is why we need a higher value here
-			// need to investigate why the sidebar takes that long to open and is not even animated
-		}, 100),
+		},
 		chatIdentifier: {
 			immediate: true,
 			handler() {

From 7d4d6fbf2f07184df9021cbfafe3732ba95e86da Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 4 Mar 2021 14:23:33 +0100
Subject: [PATCH 16/17] Mark as unread now applied to previous message id

Added props for previous and next message id in MessagesGroup and
Message components.

Now using the previous message id when marking as unread.

Since now the next message id is available on all message components,
the logic in MessagesList that iterates over the next messages is now
using the next message id attribute instead of handling the DOM tree on
its own.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 14 +++++-
 .../MessagesGroup/MessagesGroup.vue           | 12 +++++
 src/components/MessagesList/MessagesList.vue  | 46 ++-----------------
 3 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 503ffc68f43..2db9a088ffd 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -30,6 +30,8 @@ the main body of the message as well as a quote.
 		ref="message"
 		:data-message-id="id"
 		:data-seen="seen"
+		:data-next-message-id="nextMessageId"
+		:data-previous-message-id="previousMessageId"
 		class="message">
 		<div
 			:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
@@ -353,6 +355,16 @@ export default {
 			default: '',
 		},
 
+		previousMessageId: {
+			type: Number,
+			default: 0,
+		},
+
+		nextMessageId: {
+			type: Number,
+			default: 0,
+		},
+
 		lastReadMessageId: {
 			type: Number,
 			default: 0,
@@ -700,7 +712,7 @@ export default {
 			// update in backend
 			this.$store.dispatch('updateLastReadMessage', {
 				token: this.token,
-				id: this.id,
+				id: this.previousMessageId,
 			})
 			// update visually
 			this.$store.dispatch('setVisualLastReadMessageId', {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 29eab5ff9b8..7ca7d779ec0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -41,6 +41,8 @@
 					:key="message.id"
 					v-bind="message"
 					:is-first-message="index === 0"
+					:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
+					:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
 					:last-read-message-id="lastReadMessageId"
 					:actor-type="actorType"
 					:actor-id="actorId"
@@ -88,6 +90,16 @@ export default {
 			required: true,
 		},
 
+		previousMessageId: {
+			type: Number,
+			default: 0,
+		},
+
+		nextMessageId: {
+			type: Number,
+			default: 0,
+		},
+
 		lastReadMessageId: {
 			type: Number,
 			default: 0,
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 696d3ed5453..b49b04e7065 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -40,12 +40,14 @@ get the messagesList array and loop through the list to generate the messages.
 				class="icon-loading" />
 		</div>
 		<MessagesGroup
-			v-for="item of messagesGroupedByAuthor"
+			v-for="(item, index) of messagesGroupedByAuthor"
 			:key="item[0].id"
 			:style="{ height: item.height + 'px' }"
 			v-bind="item"
 			:last-read-message-id="visualLastReadMessageId"
 			:messages="item"
+			:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
+			:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0"
 			@deleteMessage="handleDeleteMessage" />
 		<template v-if="!messagesGroupedByAuthor.length">
 			<LoadingPlaceholder
@@ -675,45 +677,6 @@ export default {
 			this.debounceUpdateReadMarkerPosition()
 		},
 
-		/**
-		 * Find the next message element following the given message DOM element.
-		 *
-		 * This traverses the next messages and message groups to find the next one.
-		 *
-		 * @param {object} messageEl DOM element for message to start with
-		 * @returns {object} DOM element for the next message or null if none found
-		 */
-		findNextMessageElement(messageEl) {
-			// pick the previous message
-			let searchEl = messageEl.nextElementSibling
-			while (searchEl && !searchEl.matches('.message')) {
-				searchEl = searchEl.nextElementSibling
-			}
-
-			if (searchEl) {
-				return searchEl
-			} else {
-				// nothing found, then need to search in the next message group
-				searchEl = messageEl.closest('.message-group').nextElementSibling
-				while (searchEl && !searchEl.matches('.message-group')) {
-					searchEl = searchEl.nextElementSibling
-				}
-
-				// found the next message group
-				if (searchEl) {
-					// pick the first message
-					searchEl = searchEl.querySelector('.message:first-child')
-				}
-
-				if (searchEl) {
-					// we found it!
-					return searchEl
-				}
-			}
-
-			return null
-		},
-
 		/**
 		 * Finds the last message that is fully visible in the scroller viewport
 		 *
@@ -736,8 +699,7 @@ export default {
 				}
 
 				previousEl = el
-				// note: for scability reasons we don't simply "get all elements"
-				el = this.findNextMessageElement(el)
+				el = document.getElementById('message_' + el.getAttribute('data-next-message-id'))
 			}
 
 			return previousEl

From c26d5e32d2a0d9edb52f360095aae3c60d707163 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 8 Mar 2021 16:04:16 +0100
Subject: [PATCH 17/17] Update read marker UI when posting + tweaks

When posting new messages, the read marker UI will also be updated.
Fixed read marker update when scrolled to bottom.
Fixed warnings related to temporary message id being a string.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 14 ++++-----
 .../MessagesGroup/MessagesGroup.vue           |  6 ++--
 src/components/MessagesList/MessagesList.vue  | 22 +++++++++-----
 .../NewMessageForm/NewMessageForm.vue         |  5 ++--
 src/store/messagesStore.js                    | 30 +++++++++++++++++--
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 2db9a088ffd..03e3266f306 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -356,17 +356,17 @@ export default {
 		},
 
 		previousMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 
 		nextMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 
 		lastReadMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 	},
@@ -709,15 +709,11 @@ export default {
 		},
 
 		handleMarkAsUnread() {
-			// update in backend
+			// update in backend + visually
 			this.$store.dispatch('updateLastReadMessage', {
 				token: this.token,
 				id: this.previousMessageId,
-			})
-			// update visually
-			this.$store.dispatch('setVisualLastReadMessageId', {
-				token: this.token,
-				id: this.conversation.lastReadMessage,
+				updateVisually: true,
 			})
 		},
 	},
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 7ca7d779ec0..7f0f3501db3 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -91,17 +91,17 @@ export default {
 		},
 
 		previousMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 
 		nextMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 
 		lastReadMessageId: {
-			type: Number,
+			type: [String, Number],
 			default: 0,
 		},
 	},
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index b49b04e7065..327fb691a34 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -735,6 +735,12 @@ export default {
 				return
 			}
 
+			// to fix issues, this scenario should not happen
+			if (this.conversation.lastReadMessage === 0) {
+				this.$store.dispatch('clearLastReadMessage', { token: this.token, updateVisually: true })
+				return
+			}
+
 			if (this.conversation.lastReadMessage === this.conversation.lastMessage?.id) {
 				// already at bottom, nothing to do
 				return
@@ -746,7 +752,7 @@ export default {
 			}
 
 			// if we're at bottom of the chat, then simply clear the marker
-			if (this.conversation.lastReadMessage === 0 || this.isSticky) {
+			if (this.isSticky) {
 				this.$store.dispatch('clearLastReadMessage', { token: this.token })
 				return
 			}
@@ -768,10 +774,9 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: messageId })
-
-			// we don't call setVisualLastReadMessageId yet, it will update the next time the
-			// user focussed back on the conversation. See refreshReadMarkerPosition().
+			// we don't update visually here, it will update the next time the
+			// user focusses back on the conversation. See refreshReadMarkerPosition().
+			this.$store.dispatch('updateLastReadMessage', { token: this.token, id: messageId, updateVisually: false })
 		},
 
 		/**
@@ -797,8 +802,6 @@ export default {
 						behavior: 'smooth',
 					})
 					this.setChatScrolledToBottom(true)
-
-					this.updateReadMarkerPosition()
 				} else {
 					// Otherwise we jump half a message and stop autoscrolling, so the user can read up
 					if (this.scroller.scrollHeight - this.scroller.scrollTop - this.scroller.offsetHeight < 40) {
@@ -915,6 +918,11 @@ export default {
 
 		setChatScrolledToBottom(boolean) {
 			this.$emit('setChatScrolledToBottom', boolean)
+			if (boolean) {
+				// mark as read if marker was seen
+				// we have to do this early because unfocussing the window will remove the stickiness
+				this.debounceUpdateReadMarkerPosition()
+			}
 		},
 
 		onWindowFocus() {
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index a545488d681..c16c5a101eb 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -339,9 +339,10 @@ export default {
 						})
 					}
 					if (message.id > this.conversation.lastReadMessage) {
-						this.$store.dispatch('updateConversationLastReadMessage', {
+						this.$store.dispatch('updateLastReadMessage', {
 							token: this.token,
-							lastReadMessage: message.id,
+							id: message.id,
+							updateVisually: true,
 						})
 					}
 				} catch (error) {
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 8c6c293a4c1..6d8564de8ff 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -358,24 +358,48 @@ const actions = {
 		context.commit('deleteMessages', token)
 	},
 
-	async clearLastReadMessage(context, { token }) {
+	/**
+	 * Clears the last read message marker by moving it to the last message
+	 * in the conversation.
+	 *
+	 * @param {object} context default store context;
+	 * @param {object} token the token of the conversation to be updated;
+	 * @param {bool} updateVisually whether to also clear the marker visually in the UI;
+	 */
+	async clearLastReadMessage(context, { token, updateVisually = false }) {
 		const conversation = context.getters.conversations[token]
 		if (!conversation || !conversation.lastMessage) {
 			return
 		}
 		// set the id to the last message
-		context.dispatch('updateLastReadMessage', { token, id: conversation.lastMessage.id })
+		context.dispatch('updateLastReadMessage', { token, id: conversation.lastMessage.id, updateVisually: updateVisually })
 		context.dispatch('markConversationRead', token)
 	},
 
-	async updateLastReadMessage(context, { token, id = 0 }) {
+	/**
+	 * Updates the last read message in the store and also in the backend.
+	 * Optionally also updated the marker visually in the UI if specified.
+	 *
+	 * @param {object} context default store context;
+	 * @param {object} token the token of the conversation to be updated;
+	 * @param {number} id the id of the message on which to set the read marker;
+	 * @param {bool} updateVisually whether to also update the marker visually in the UI;
+	 */
+	async updateLastReadMessage(context, { token, id = 0, updateVisually = false }) {
 		const conversation = Object.assign({}, context.getters.conversations[token])
 		if (!conversation || conversation.lastReadMessage === id) {
 			return
 		}
 
+		if (id === 0) {
+			console.warn('updateLastReadMessage: should not set read marker with id=0')
+		}
+
 		// optimistic early commit to avoid indicator flickering
 		context.commit('updateConversationLastReadMessage', { token, lastReadMessage: id })
+		if (updateVisually) {
+			context.commit('setVisualLastReadMessageId', { token, id })
+		}
 		await updateLastReadMessage(token, id)
 	},
 }