3299: updated unread mentions viewport of conversation list

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -21,6 +21,7 @@
 
 <template>
 	<ListItem :title="item.displayName"
+		:class="{'unread-mention-conversation': item.unreadMention}"
 		:anchor-id="`conversation_${item.token}`"
 		:active="isActive"
 		:to="to"

src/components/LeftSidebar/LeftSidebar.vue

@@ -91,14 +91,20 @@
 					<Hint v-else :hint="t('spreed', 'No search results')" />
 				</template>
 			</div>
+			<Button v-if="!preventFindingUnread && unreadNum > 0"
+				class="unread-mention-button"
+				type="primary"
+				@click="scrollBottomUnread">
+				{{ t('spreed', 'Unread mentions') }}
+			</Button>
 		</template>
 
 		<template #footer>
 			<div id="app-settings">
 				<div id="app-settings-header">
-					<button class="settings-button" @click="showSettings">
+					<Button class="settings-button" @click="showSettings">
 						{{ t('spreed', 'Talk settings') }}
-					</button>
+					</Button>
 				</div>
 			</div>
 		</template>
@@ -113,6 +119,7 @@ import ConversationsList from './ConversationsList/ConversationsList'
 import Conversation from './ConversationsList/Conversation'
 import ConversationsOptionsList from '../ConversationsOptionsList'
 import Hint from '../Hint'
+import Button from '@nextcloud/vue/dist/Components/Button'
 import SearchBox from './SearchBox/SearchBox'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus'
@@ -135,6 +142,7 @@ export default {
 		AppNavigation,
 		AppNavigationCaption,
 		ConversationsList,
+		Button,
 		ConversationsOptionsList,
 		Hint,
 		SearchBox,
@@ -164,6 +172,9 @@ export default {
 			// Keeps track of whether the conversation list is scrolled to the top or not
 			isScrolledToTop: true,
 			refreshTimer: null,
+			unreadNum: 0,
+			firstUnreadPos: 0,
+			preventFindingUnread: false,
 		}
 	},
 
@@ -247,12 +258,14 @@ export default {
 		}, 30000)
 
 		EventBus.$on('should-refresh-conversations', this.debounceFetchConversations)
+		EventBus.$once('conversations-received', this.handleUnreadMention)
 
 		this.mountArrowNavigation()
 	},
 
 	beforeDestroy() {
 		EventBus.$off('should-refresh-conversations', this.debounceFetchConversations)
+		EventBus.$off('conversations-received', this.handleUnreadMention)
 
 		this.cancelSearchPossibleConversations()
 		this.cancelSearchPossibleConversations = null
@@ -276,7 +289,17 @@ export default {
 		isFocused() {
 			return this.isSearching
 		},
-
+		scrollBottomUnread() {
+			this.preventFindingUnread = true
+			this.$refs.scroller.scrollTo({
+				top: this.firstUnreadPos - 150,
+				behavior: 'smooth',
+			})
+			setTimeout(() => {
+				this.handleUnreadMention()
+				this.preventFindingUnread = false
+			}, 500)
+		},
 		debounceFetchSearchResults: debounce(function() {
 			if (this.isSearching) {
 				this.fetchSearchResults()
@@ -448,8 +471,24 @@ export default {
 		handleScroll() {
 			this.isScrolledToTop = this.$refs.scroller.scrollTop === 0
 		},
+		elementIsBelowViewpoint(container, element) {
+			return element.offsetTop > container.scrollTop + container.clientHeight
+		},
+		handleUnreadMention() {
+			this.unreadNum = 0
+			const unreadMentions = document.getElementsByClassName('unread-mention-conversation')
+			unreadMentions.forEach(x => {
+				if (this.elementIsBelowViewpoint(this.$refs.scroller, x)) {
+					if (this.unreadNum === 0) {
+						this.firstUnreadPos = x.offsetTop
+					}
+					this.unreadNum += 1
+				}
+			})
+		},
 		debounceHandleScroll: debounce(function() {
 			this.handleScroll()
+			this.handleUnreadMention()
 		}, 50),
 	},
 }
@@ -476,4 +515,11 @@ export default {
 	padding: 0 4px;
 }
 
+.unread-mention-button {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 100;
+	bottom: 10px;
+}
 </style>