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>

1 files changed, 33 insertions, 0 deletions

diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6cced7f20..8c6c293a4 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 = {
@@ -186,6 +198,15 @@ const mutations = {
 	},
 
 	/**
+	 * @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.
 	 *
 	 * @param {object} state current store state
@@ -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)
 		}
@@ -316,6 +340,15 @@ const actions = {
 	},
 
 	/**
+	 * @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
 	 *
 	 * @param {object} context default store context;