Refactoring and add empty content for empty filter output

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/LeftSidebar/LeftSidebar.vue

@@ -121,7 +121,22 @@
 				<ul class="h-100" :class="{'scroller': isSearching}">
 					<!-- Conversations List -->
 					<template v-if="!isSearching">
-						<Hint v-if="initialisedConversations && filteredConversationsList.length === 0" :hint="t('spreed', 'No matches found')" />
+						<NcAppNavigationCaption v-if="isFiltered && filteredConversationsList.length > 0" :name="getFilterCaption" />
+						<NcEmptyContent v-else-if="initialisedConversations && filteredConversationsList.length === 0"
+							:name="t('spreed', 'No matches found')"
+							:description="messageDisplay">
+							<template #icon>
+								<MessageBadge :size="64" />
+							</template>
+							<template #action>
+								<NcButton @click="handleFilter(null)">
+									<template #icon>
+										<FilterRemoveIcon :size="20" />
+									</template>
+									{{ t('spreed', 'Clear filter') }}
+								</NcButton>
+							</template>
+						</NcEmptyContent>
 						<li class="h-100">
 							<ConversationsListVirtual ref="scroller"
 								:conversations="filteredConversationsList"
@@ -265,6 +280,7 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 import Hint from '../Hint.vue'
@@ -288,6 +304,7 @@ import { EventBus } from '../../services/EventBus.js'
 import { talkBroadcastChannel } from '../../services/talkBroadcastChannel.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
 import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
+import { hasUnreadMessages, hasUnreadMentions } from '../../utils/conversation.js'
 
 export default {
 
@@ -318,6 +335,7 @@ export default {
 		List,
 		DotsVertical,
 		Note,
+		NcEmptyContent,
 	},
 
 	mixins: [
@@ -387,21 +405,41 @@ export default {
 			}
 		},
 
+		token() {
+			return this.$store.getters.getToken()
+		},
+
+		getFilterCaption() {
+			return this.isFiltered === 'mentions'
+				? t('spreed', 'Unread mentions')
+				: t('spreed', 'Unread messages')
+		},
+
+		messageDisplay() {
+			return this.isFiltered === 'mentions'
+				? t('spreed', 'You have no unread mentions in your inbox')
+				: t('spreed', 'You have no unread messages in your inbox')
+		},
+
 		filteredConversationsList() {
 			if (this.isFocused) {
 				return this.conversationsList
 			}
-
-			if (this.isFiltered === 'unread') {
-				return this.conversationsList.filter(conversation => conversation.unreadMessages > 0
-				|| conversation.hasCall || conversation.token === this.$store.getters.getToken())
-			}
-
-			if (this.isFiltered === 'mentions') {
-				return this.conversationsList.filter(conversation => conversation.unreadMention
-				|| conversation.hasCall
-				|| (conversation.unreadMessages > 0 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))
-				|| conversation.token === this.$store.getters.getToken())
+			// applying filters
+			if (this.isFiltered) {
+				const filteredConversations = this.conversationsList.filter(function(conversation) {
+					return this.filterFunction(conversation)
+								|| conversation.hasCall
+								|| conversation.token === this.token
+				}.bind(this))
+
+				// return empty if it only includes the current conversation without any flags
+				const includesCurrentConversationOnly = filteredConversations.length === 1
+					&& filteredConversations.filter(function(conversation) {
+						return !this.filterFunction(conversation) && conversation.token === this.token
+					}.bind(this)).length
+
+				return includesCurrentConversationOnly ? [] : filteredConversations
 			}
 
 			return this.conversationsList
@@ -537,6 +575,14 @@ export default {
 			this.searchText = ''
 		},
 
+		filterFunction(conversation) {
+			if (this.isFiltered === 'unread') {
+				return hasUnreadMessages(conversation)
+			} else if (this.isFiltered === 'mentions') {
+				return hasUnreadMentions(conversation)
+			}
+		},
+
 		scrollBottomUnread() {
 			this.preventFindingUnread = true
 			this.$refs.scroller.scrollToItem(this.lastUnreadMentionBelowViewportIndex)
@@ -927,6 +973,11 @@ export default {
 
 }
 
+:deep(.empty-content) {
+	text-align: center;
+	margin-top: 10%;
+}
+
 .settings-button {
 	justify-content: flex-start !important;
 }

src/utils/conversation.js

@@ -0,0 +1,47 @@
+/**
+ * @copyright Copyright (c) 2023
+ *
+ * @author Dorra Jaouad <dorra.jaoued7@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import {
+	CONVERSATION,
+} from '../constants.js'
+
+/**
+ * check if the conversation has unread messages
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function hasUnreadMessages(conversation) {
+	return conversation.unreadMessages > 0
+}
+
+/**
+ * check if the conversation has unread mentions
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function hasUnreadMentions(conversation) {
+	return conversation.unreadMention
+		|| conversation.unreadMentionDirect
+		|| (conversation.unreadMessages > 0
+			&& (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))
+}