From 5b27a4c5cb8e207edb78023bba8d5efffc1f118c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 1 Mar 2023 18:00:49 +0100
Subject: [PATCH 1/6] remove isScrolledToBottom dependency from parent and
 sibling

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ChatView.vue                      | 12 +-----------
 src/components/MessagesList/MessagesList.vue     | 16 ++++++++++------
 src/components/NewMessageForm/NewMessageForm.vue | 12 +-----------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index efbe1c640d1..c471032b123 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -40,20 +40,15 @@
 		</transition>
 		<MessagesList role="region"
 			:aria-label="t('spreed', 'Conversation messages')"
-			:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
 			:token="token"
-			:is-visible="isVisible"
-			@set-chat-scrolled-to-bottom="setScrollStatus" />
+			:is-visible="isVisible" />
 		<NewMessageForm role="region"
 			:token="token"
-			:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
 			:aria-label="t('spreed', 'Post message')" />
 	</div>
 </template>
 
 <script>
-import { getCapabilities } from '@nextcloud/capabilities'
-
 import MessagesList from './MessagesList/MessagesList.vue'
 import NewMessageForm from './NewMessageForm/NewMessageForm.vue'
 
@@ -78,7 +73,6 @@ export default {
 	data() {
 		return {
 			isDraggingOver: false,
-			isChatScrolledToBottom: getCapabilities()?.spreed?.config?.chat?.legacy || false,
 		}
 	},
 
@@ -134,10 +128,6 @@ export default {
 			// Uploads and shares the files
 			this.$store.dispatch('initialiseUpload', { files, token: this.token, uploadId })
 		},
-
-		setScrollStatus(payload) {
-			this.isChatScrolledToBottom = payload
-		},
 	},
 
 }
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index b8a7b691abd..91c7667caf9 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -30,6 +30,7 @@ get the messagesList array and loop through the list to generate the messages.
 	are outside of the viewport -->
 	<div ref="scroller"
 		class="scroller messages-list__scroller"
+		:class="{'scroller--chatScrolledToBottom': isChatScrolledToBottom}"
 		@scroll="debounceHandleScroll">
 		<div v-if="displayMessagesLoader"
 			class="scroller__loading"
@@ -127,11 +128,6 @@ export default {
 			required: true,
 		},
 
-		isChatScrolledToBottom: {
-			type: Boolean,
-			required: true,
-		},
-
 		isVisible: {
 			type: Boolean,
 			default: true,
@@ -161,6 +157,7 @@ export default {
 
 			isFocusingMessage: false,
 
+			isChatScrolledToBottom: true,
 			/**
 			 * Quick edit option to fall back to the loading history and then new messages
 			 */
@@ -1051,7 +1048,7 @@ export default {
 		},
 
 		setChatScrolledToBottom(boolean) {
-			this.$emit('set-chat-scrolled-to-bottom', boolean)
+			this.isChatScrolledToBottom = boolean
 			if (boolean) {
 				// mark as read if marker was seen
 				// we have to do this early because unfocusing the window will remove the stickiness
@@ -1073,6 +1070,13 @@ export default {
 	flex: 1 0;
 	overflow-y: auto;
 	overflow-x: hidden;
+	border-bottom: 1px solid var(--color-border);
+	transition: border-bottom-color 150ms ease-in-out;
+
+	&--chatScrolledToBottom {
+		border-bottom-color: transparent;
+	}
+
 	&__loading {
 		height: 50px;
 		display: flex;
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index d1f9ff4ab16..fcb179ebc01 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -20,8 +20,7 @@
 -->
 
 <template>
-	<div class="wrapper"
-		:class="{'wrapper--chatScrolledToBottom': isChatScrolledToBottom}">
+	<div class="wrapper">
 		<!--native file picker, hidden -->
 		<input id="file-upload"
 			ref="fileUploadInput"
@@ -290,11 +289,6 @@ export default {
 	},
 
 	props: {
-		isChatScrolledToBottom: {
-			type: Boolean,
-			default: true,
-		},
-
 		/**
 		 * The current conversation token or the breakout room token.
 		 */
@@ -907,11 +901,7 @@ export default {
 	display: flex;
 	justify-content: center;
 	padding: 12px 0;
-	border-top: 1px solid var(--color-border);
 	min-height: 69px;
-	&--chatScrolledToBottom {
-		border-top: none;
-	}
 }
 
 .new-message {

From b165816d42eca06c1fc832a3a3be1294d4d82850 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 1 Mar 2023 18:02:55 +0100
Subject: [PATCH 2/6] update behaviour when initialising messages

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 91c7667caf9..6de7a05cb1c 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -234,7 +234,7 @@ export default {
 		 * @return {boolean}
 		 */
 		isSticky() {
-			return this.isChatScrolledToBottom
+			return this.isChatScrolledToBottom && !this.isInitialisingMessages
 		},
 
 		/**
@@ -502,7 +502,6 @@ export default {
 			if (this.token && this.isParticipant && !this.isInLobby) {
 
 				// prevent sticky mode before we have loaded anything
-				this.setChatScrolledToBottom(false)
 				this.isInitialisingMessages = true
 				const focusMessageId = this.getMessageIdFromHash()
 
@@ -571,6 +570,8 @@ export default {
 					}
 				}
 
+				this.isInitialisingMessages = false
+
 				// get new messages
 				await this.lookForNewMessages()
 
@@ -666,8 +667,6 @@ export default {
 					requestId: this.chatIdentifier,
 				})
 
-				this.isInitialisingMessages = false
-
 				// Scroll to the last message if sticky
 				if (scrollToBottom && this.isSticky) {
 					this.smoothScrollToBottom()
@@ -706,15 +705,7 @@ export default {
 			}, 500)
 		},
 
-		debounceHandleScroll() {
-			if (this.loadChatInLegacyMode) {
-				this.debounceHandleScrollWithoutPreconditions()
-			} else if (!this.isInitialisingMessages && !this.isFocusingMessage) {
-				this.debounceHandleScrollWithoutPreconditions()
-			}
-		},
-
-		debounceHandleScrollWithoutPreconditions: debounce(function() {
+		debounceHandleScroll: debounce(function() {
 			this.handleScroll()
 		}, 50),
 

From 6351ba334491bf7ed8839ff0f44091d3f121429c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 2 Mar 2023 08:46:14 +0100
Subject: [PATCH 3/6] fix imports and typos

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 27 +++++++++-----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 6de7a05cb1c..305b95b45d1 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -89,10 +89,7 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
 import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 
-import {
-	ATTENDEE,
-	CHAT,
-} from '../../constants.js'
+import { ATTENDEE, CHAT } from '../../constants.js'
 import isInCall from '../../mixins/isInCall.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import { EventBus } from '../../services/EventBus.js'
@@ -346,7 +343,7 @@ export default {
 		 * @param {string} message1.id The ID of the new message
 		 * @param {string} message1.actorType Actor type of the new message
 		 * @param {string} message1.actorId Actor id of the new message
-		 * @param {string} message1.actorDisplayName Actor displayname of the new message
+		 * @param {string} message1.actorDisplayName Actor display name of the new message
 		 * @param {string} message1.systemMessage System message content of the new message
 		 * @param {number} message1.timestamp Timestamp of the new message
 		 * @param {null|object} message2 The previous message
@@ -376,7 +373,7 @@ export default {
 				return false
 			}
 
-			if (!message1IsSystem // System messages are grouped independent from author
+			if (!message1IsSystem // System messages are grouped independently of author
 				&& ((message1.actorType !== message2.actorType // Otherwise the type and id need to match
 					|| message1.actorId !== message2.actorId)
 				|| (message1.actorType === ATTENDEE.ACTOR_TYPE.BRIDGED // Or, if the message is bridged, display names also need to match
@@ -467,24 +464,24 @@ export default {
 			return null
 		},
 
-		scrollToFocussedMessage() {
+		scrollToFocusedMessage() {
 			const focusMessageId = this.getMessageIdFromHash()
-			let focussed = null
+			let isFocused = null
 			if (focusMessageId) {
 				// scroll to message in URL anchor
-				focussed = this.focusMessage(focusMessageId, false)
+				isFocused = this.focusMessage(focusMessageId, false)
 			}
 
-			if (!focussed && this.visualLastReadMessageId) {
+			if (!isFocused && this.visualLastReadMessageId) {
 				// scroll to last read message if visible in the current pages
-				focussed = this.focusMessage(this.visualLastReadMessageId, false, false)
+				isFocused = this.focusMessage(this.visualLastReadMessageId, 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 (!isFocused) {
 				// if no anchor was present or the message to focus on did not exist,
 				// scroll to bottom
 				this.scrollToBottom()
@@ -565,7 +562,7 @@ export default {
 					if (!this.$store.getters.hasMoreMessagesToLoad(this.token)) {
 						hasScrolled = true
 						this.$nextTick(() => {
-							this.scrollToFocussedMessage()
+							this.scrollToFocusedMessage()
 						})
 					}
 				}
@@ -579,7 +576,7 @@ export default {
 					// don't scroll if lookForNewMessages was polling as we don't want
 					// to scroll back to the read marker after receiving new messages later
 					if (!hasScrolled) {
-						this.scrollToFocussedMessage()
+						this.scrollToFocusedMessage()
 					}
 				}
 			} else {
@@ -838,7 +835,7 @@ export default {
 		 * 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
+		 * Visually, the marker will only move the next time the user is focusing back to this
 		 * conversation in refreshReadMarkerPosition()
 		 */
 		updateReadMarkerPosition() {

From 9bca0db39917d9b2a16a54684d631c2a11d39760 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 2 Mar 2023 09:36:39 +0100
Subject: [PATCH 4/6] refactor, update behaviour after focusing

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 48 ++++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 305b95b45d1..4db0e30d3f3 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -260,10 +260,6 @@ export default {
 		scrollToBottomAriaLabel() {
 			return t('spreed', 'Scroll to bottom')
 		},
-
-		scroller() {
-			return this.$refs.scroller
-		},
 	},
 
 	watch: {
@@ -489,7 +485,7 @@ 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.visualLastReadMessageId === 0 || this.scroller.scrollHeight <= this.scroller.offsetHeight) {
+			if (this.visualLastReadMessageId === 0 || this.$refs.scroller.scrollHeight <= this.$refs.scroller.offsetHeight) {
 				// clear after a delay, unless scrolling can resume in-between
 				this.debounceUpdateReadMarkerPosition()
 			}
@@ -730,16 +726,22 @@ export default {
 				}
 			}
 
-			const scrollHeight = this.scroller.scrollHeight
-			const scrollTop = this.scroller.scrollTop
+			const { scrollHeight, scrollTop, clientHeight } = this.$refs.scroller
 			const scrollOffset = scrollHeight - scrollTop
-			const elementHeight = this.scroller.clientHeight
 			const tolerance = 10
-			if (scrollOffset < elementHeight + tolerance && scrollOffset > elementHeight - tolerance) {
+
+			// For chats, scrolled to bottom or / and fitted in one screen
+			if (scrollOffset < clientHeight + tolerance && scrollOffset > clientHeight - tolerance) {
 				this.setChatScrolledToBottom(true)
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
-			} else if (scrollHeight > elementHeight && scrollTop < 800 && scrollTop <= this.previousScrollTopValue) {
+				this.debounceUpdateReadMarkerPosition()
+				return
+			}
+
+			this.setChatScrolledToBottom(false)
+
+			if (scrollHeight > clientHeight && scrollTop < 800 && scrollTop <= this.previousScrollTopValue) {
 				if (this.loadingOldMessages) {
 					// already loading, don't do it twice
 					return
@@ -749,13 +751,9 @@ export default {
 				}
 				await this.getOldMessages(false)
 				this.displayMessagesLoader = false
-				this.previousScrollTopValue = scrollTop
-			} else {
-				this.setChatScrolledToBottom(false)
-				this.displayMessagesLoader = false
-				this.previousScrollTopValue = scrollTop
 			}
 
+			this.previousScrollTopValue = scrollTop
 			this.debounceUpdateReadMarkerPosition()
 		},
 
@@ -779,7 +777,7 @@ export default {
 			}
 			let previousEl = el
 
-			const scrollTop = this.scroller.scrollTop
+			const { scrollTop } = this.$refs.scroller
 			while (el) {
 				// is the message element fully visible with no intersection with the bottom border ?
 				if (el.offsetTop - scrollTop >= 0) {
@@ -869,7 +867,7 @@ export default {
 				return
 			}
 
-			if (lastReadMessageElement && (lastReadMessageElement.offsetTop - this.scroller.scrollTop > 0)) {
+			if (lastReadMessageElement && (lastReadMessageElement.offsetTop - this.$refs.scroller.scrollTop > 0)) {
 				// still visible, hasn't disappeared at the top yet
 				return
 			}
@@ -899,7 +897,6 @@ export default {
 		handleScrollChatToBottomEvent(options) {
 			if ((options && options.force) || this.isChatScrolledToBottom) {
 				this.scrollToBottom()
-				this.setChatScrolledToBottom(true)
 			}
 		},
 
@@ -910,19 +907,19 @@ export default {
 			this.$nextTick(function() {
 				if (this.isWindowVisible && (document.hasFocus() || this.isInCall)) {
 					// scrollTo is used when the user is watching
-					this.scroller.scrollTo({
-						top: this.scroller.scrollHeight,
+					this.$refs.scroller.scrollTo({
+						top: this.$refs.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) {
+					if (this.$refs.scroller.scrollHeight - this.$refs.scroller.scrollTop - this.$refs.scroller.offsetHeight < 40) {
 						// Single new line from the previous author is 35px so scroll half a line
-						this.scroller.scrollTop += 10
+						this.$refs.scroller.scrollTop += 10
 					} else {
 						// Single new line from the new author is 75px so scroll half an avatar
-						this.scroller.scrollTop += 40
+						this.$refs.scroller.scrollTop += 40
 					}
 					this.setChatScrolledToBottom(false)
 				}
@@ -933,7 +930,7 @@ export default {
 		 */
 		scrollToBottom() {
 			this.$nextTick(function() {
-				this.scroller.scrollTop = this.scroller.scrollHeight
+				this.$refs.scroller.scrollTop = this.$refs.scroller.scrollHeight
 				this.setChatScrolledToBottom(true)
 			})
 
@@ -967,13 +964,14 @@ export default {
 				})
 				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
+					this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 				}
 				if (highlightAnimation) {
 					element.focus()
 					element.highlightAnimation()
 				}
 				this.isFocusingMessage = false
+				await this.handleScroll()
 			})
 
 			return true

From 7863af10bca694f90b7c740ce4b21bc3238696d2 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 2 Mar 2023 11:00:31 +0100
Subject: [PATCH 5/6] get transition length for fade-effects from server styles

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/variables.scss                    | 6 ++++--
 src/components/ChatView.vue                  | 4 +++-
 src/components/MessagesList/MessagesList.vue | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 968d6b9c1e4..b2b269af473 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -82,6 +82,8 @@ $chat-font-size: 15px;
 $chat-line-height: 1.6em;
 
 // fade transition
+$fade-transition: all var(--animation-quick, 100ms) ease-in-out;
+
 .fade {
 	&-enter {
 		opacity: 0;
@@ -97,7 +99,7 @@ $chat-line-height: 1.6em;
 	}
 	&-enter-active,
 	&-leave-active {
-		transition: all 150ms ease-in-out;
+		transition: $fade-transition;
 	}
 }
 
@@ -120,7 +122,7 @@ $chat-line-height: 1.6em;
 	}
 	&-enter-active,
 	&-leave-active {
-		transition: all 150ms ease-in-out;
+		transition: $fade-transition;
 		/* force top container to resize during animation */
 		position: absolute !important;
 	}
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index c471032b123..1ff11e34839 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -134,6 +134,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/variables';
+
 .chatView {
 	width: 100%;
 	height: 100%;
@@ -185,7 +187,7 @@ export default {
 	}
 	&-enter-active,
 	&-leave-active {
-		transition: all 150ms ease-in-out;
+		transition: $fade-transition;
 	}
 }
 </style>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 4db0e30d3f3..527c2835e35 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -1057,7 +1057,7 @@ export default {
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-bottom: 1px solid var(--color-border);
-	transition: border-bottom-color 150ms ease-in-out;
+	transition: $fade-transition;
 
 	&--chatScrolledToBottom {
 		border-bottom-color: transparent;

From 092755e0ba1dad9fdc32c8d9917d388f5b81541d Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 2 Mar 2023 11:40:24 +0100
Subject: [PATCH 6/6] hide button while changing between conversations

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.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 527c2835e35..719e8155971 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -274,6 +274,7 @@ export default {
 				if (oldValue) {
 					this.$store.dispatch('cancelLookForNewMessages', { requestId: oldValue })
 				}
+				this.isChatScrolledToBottom = true
 				this.handleStartGettingMessagesPreconditions()
 
 				// Remove expired messages when joining a room