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>

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 2db9a088f..03e3266f3 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 7ca7d779e..7f0f3501d 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 b49b04e70..327fb691a 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 a545488d6..c16c5a101 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 8c6c293a4..6d8564de8 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)
 	},
 }