From fb4c3810c59ccf22b920002a89e9e660775839b7 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 19 Feb 2024 16:44:55 +0100
Subject: [PATCH] feat(MessagesList): Make dateSep sticky

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 40 +++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index f1e113b14cd..b8a911efb21 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -31,8 +31,10 @@ get the messagesList array and loop through the list to generate the messages.
 	<div ref="scroller"
 		:key="token"
 		class="scroller messages-list__scroller"
-		:class="{'scroller--chatScrolledToBottom': isChatScrolledToBottom}"
-		@scroll="debounceHandleScroll">
+		:class="{'scroller--chatScrolledToBottom': isChatScrolledToBottom,
+			'scroller--isScrolling': isScrolling}"
+		@scroll="onScroll"
+		@scrollend="endScroll">
 		<div v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
 
 		<ul v-for="(list, dateTimestamp) in messagesGroupedByDateByAuthor"
@@ -174,6 +176,8 @@ export default {
 			debounceUpdateReadMarkerPosition: () => {},
 
 			debounceHandleScroll: () => {},
+
+			isScrolling: false,
 		}
 	},
 
@@ -859,6 +863,25 @@ export default {
 			}, 500)
 		},
 
+		checkSticky() {
+			const ulElements = this.$el.querySelectorAll('.dates-group-wrapper')
+			const scrollerRect = this.$refs.scroller.getBoundingClientRect()
+			ulElements.forEach((element) => {
+				const rect = element.getBoundingClientRect()
+				if (rect.top <= scrollerRect.top && rect.bottom >= scrollerRect.top) {
+					element.classList.add('has-sticky')
+				} else {
+					element.classList.remove('has-sticky')
+				}
+			})
+		},
+
+		onScroll() {
+			this.isScrolling = true
+			this.checkSticky()
+			this.debounceHandleScroll()
+		},
+
 		/**
 		 * When the div is scrolled, this method checks if it's been scrolled to the top
 		 * or to the bottom of the list bottom.
@@ -923,6 +946,10 @@ export default {
 			this.debounceUpdateReadMarkerPosition()
 		},
 
+		endScroll() {
+			this.isScrolling = false
+		},
+
 		/**
 		 * Finds the last message that is fully visible in the scroller viewport
 		 *
@@ -1312,4 +1339,13 @@ export default {
 		margin-bottom: 16px;
 	}
 }
+
+.has-sticky .messages-group__date {
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+.scroller--isScrolling .has-sticky .messages-group__date {
+  opacity: 1;
+}
 </style>