From aae49666e8bd0784c88480e7cfe2770cb35a569d Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 2 Jun 2023 15:30:52 +0200
Subject: [PATCH 01/11] Added the filter features

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../LeftSidebar/LeftSidebar.spec.js           |  7 +-
 src/components/LeftSidebar/LeftSidebar.vue    | 72 +++++++++++++++++--
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index 1114c87b724..d86b90838c5 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -13,7 +13,7 @@ import router from '../../__mocks__/router.js'
 import { searchPossibleConversations, searchListedConversations } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
-import { findNcListItems } from '../../test-helpers.js'
+import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
 
 jest.mock('@nextcloud/initial-state', () => ({
 	loadState: jest.fn(),
@@ -48,6 +48,7 @@ describe('LeftSidebar.vue', () => {
 				NcAvatar: true,
 				// to prevent complex dialog logic
 				NewGroupConversation: true,
+				NcActions: true,
 			},
 		})
 	}
@@ -701,14 +702,14 @@ describe('LeftSidebar.vue', () => {
 			loadStateSettings.start_conversations = true
 
 			const wrapper = mountComponent()
-			const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' })
+			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(buttonEl.exists()).toBeTruthy()
 		})
 		test('does not show new conversation button if user cannot start conversations', () => {
 			loadStateSettings.start_conversations = false
 
 			const wrapper = mountComponent()
-			const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' })
+			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(buttonEl.exists()).toBeFalsy()
 		})
 	})
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 592d4ce8863..7a6d7ec1704 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -30,8 +30,39 @@
 				@submit="onInputEnter"
 				@keydown.enter.native="handleEnter"
 				@abort-search="abortSearch" />
-			<NewGroupConversation v-if="canStartConversations" />
+
+			<!-- Options -->
+			<NcActions>
+				<NcActionButton close-after-click
+					@click="insertValue(t('spreed','is:unread'))">
+					<template #icon>
+						<MessageBadge :size="20" />
+					</template>
+					{{ t('spreed','Filter unread messages') }}
+				</NcActionButton>
+				<NcActionButton close-after-click
+					@click="insertValue(t('spreed','is:mentioned'))">
+					<template #icon>
+						<AtIcon :size="20" />
+					</template>
+					{{ t('spreed','Filter unread mentions') }}
+				</NcActionButton>
+				<NcActionButton v-if="canStartConversations"
+					close-after-click
+					@click="toggleNewGroupConversation(true)">
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('spreed','Create a new conversation') }}
+				</NcActionButton>
+			</NcActions>
+
+			<!-- New Conversation -->
+			<NewGroupConversation :show-modal="isNewGroupConversationOpen"
+				@open-modal="toggleNewGroupConversation(true)"
+				@close-modal="toggleNewGroupConversation(false)" />
 		</div>
+
 		<template #list>
 			<li ref="container" class="left-sidebar__list">
 				<ul ref="scroller"
@@ -132,10 +163,16 @@
 <script>
 import debounce from 'debounce'
 
+import AtIcon from 'vue-material-design-icons/At.vue'
+import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -173,6 +210,11 @@ export default {
 		LoadingPlaceholder,
 		NcListItem,
 		ConversationIcon,
+		NcActions,
+		NcActionButton,
+		PlusIcon,
+		AtIcon,
+		MessageBadge,
 	},
 
 	mixins: [
@@ -203,6 +245,7 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
+			isNewGroupConversationOpen: false,
 		}
 	},
 
@@ -212,10 +255,20 @@ export default {
 
 			if (this.searchText !== '') {
 				const lowerSearchText = this.searchText.toLowerCase()
-				conversations = conversations.filter(conversation =>
-					conversation.displayName.toLowerCase().includes(lowerSearchText)
-					|| conversation.name.toLowerCase().includes(lowerSearchText)
-				)
+				switch (this.searchText) {
+				case t('spreed', 'is:unread'):
+					conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
+					break
+				case t('spreed', 'is:mentioned'):
+					conversations = conversations.filter(conversation => conversation.unreadMention)
+					break
+				default:
+					conversations = conversations.filter(conversation =>
+						conversation.displayName.toLowerCase().includes(lowerSearchText)
+							|| conversation.name.toLowerCase().includes(lowerSearchText)
+					)
+					break
+				}
 			}
 
 			// FIXME: this modifies the original array,
@@ -334,6 +387,14 @@ export default {
 			}
 		}, 250),
 
+		toggleNewGroupConversation(value) {
+			this.isNewGroupConversationOpen = value
+		},
+
+		insertValue(value) {
+			this.searchText = value
+		},
+
 		async fetchPossibleConversations() {
 			this.contactsLoading = true
 
@@ -618,7 +679,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 @import '../../assets/variables';
 
 .scroller {

From d2c2c91f17c9572d5bde127a37eb43757aa259fc Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 9 Jun 2023 12:53:09 +0200
Subject: [PATCH 02/11] Fixed the Unit test of new group dialog

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../LeftSidebar/LeftSidebar.spec.js           | 27 ++++++++++++------
 src/components/LeftSidebar/LeftSidebar.vue    | 28 +++++++++++--------
 .../NewGroupConversation.vue                  | 10 +------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index d86b90838c5..cddc71fe3d4 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -7,6 +7,8 @@ import Vuex from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
 import LeftSidebar from './LeftSidebar.vue'
 
 import router from '../../__mocks__/router.js'
@@ -47,8 +49,8 @@ describe('LeftSidebar.vue', () => {
 				// to prevent user status fetching
 				NcAvatar: true,
 				// to prevent complex dialog logic
-				NewGroupConversation: true,
 				NcActions: true,
+				NcModal: true,
 			},
 		})
 	}
@@ -612,9 +614,6 @@ describe('LeftSidebar.vue', () => {
 			})
 
 			test('shows group conversation dialog when clicking search result', async () => {
-				const eventHandler = jest.fn()
-				EventBus.$once('new-group-conversation-dialog', eventHandler)
-
 				const wrapper = await testSearch(SEARCH_TERM, [...groupsResults], [])
 
 				const resultsListItems = findNcListItems(wrapper, groupsResults.map(item => item.label))
@@ -622,7 +621,13 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems).toHaveLength(groupsResults.length)
 
 				await resultsListItems.at(1).findAll('a').trigger('click')
-				expect(eventHandler).toHaveBeenCalledWith(groupsResults[1])
+				// Wait for the component to render
+				await wrapper.vm.$nextTick()
+				const ncModalComponent = wrapper.findComponent(NcModal)
+				expect(ncModalComponent.exists()).toBeTruthy()
+
+				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
+				expect(input.element.value).toBe(groupsResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
@@ -630,8 +635,6 @@ describe('LeftSidebar.vue', () => {
 			})
 
 			test('shows circles conversation dialog when clicking search result', async () => {
-				const eventHandler = jest.fn()
-				EventBus.$once('new-group-conversation-dialog', eventHandler)
 
 				const wrapper = await testSearch(SEARCH_TERM, [...circlesResults], [])
 
@@ -640,7 +643,14 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems).toHaveLength(circlesResults.length)
 
 				await resultsListItems.at(1).findAll('a').trigger('click')
-				expect(eventHandler).toHaveBeenCalledWith(circlesResults[1])
+
+				// Wait for the component to render
+				await wrapper.vm.$nextTick()
+				const ncModalComponent = wrapper.findComponent(NcModal)
+				expect(ncModalComponent.exists()).toBeTruthy()
+
+				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
+				expect(input.element.value).toBe(circlesResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
@@ -704,6 +714,7 @@ describe('LeftSidebar.vue', () => {
 			const wrapper = mountComponent()
 			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(buttonEl.exists()).toBeTruthy()
+
 		})
 		test('does not show new conversation button if user cannot start conversations', () => {
 			loadStateSettings.start_conversations = false
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 7a6d7ec1704..2eb9a233be5 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -33,13 +33,15 @@
 
 			<!-- Options -->
 			<NcActions>
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:unread'))">
+				<NcActionButton v-if="canStartConversations"
+					close-after-click
+					@click="toggleNewGroupConversation(true)">
 					<template #icon>
-						<MessageBadge :size="20" />
+						<PlusIcon :size="20" />
 					</template>
-					{{ t('spreed','Filter unread messages') }}
+					{{ t('spreed','Create a new conversation') }}
 				</NcActionButton>
+
 				<NcActionButton close-after-click
 					@click="insertValue(t('spreed','is:mentioned'))">
 					<template #icon>
@@ -47,18 +49,19 @@
 					</template>
 					{{ t('spreed','Filter unread mentions') }}
 				</NcActionButton>
-				<NcActionButton v-if="canStartConversations"
-					close-after-click
-					@click="toggleNewGroupConversation(true)">
+
+				<NcActionButton close-after-click
+					@click="insertValue(t('spreed','is:unread'))">
 					<template #icon>
-						<PlusIcon :size="20" />
+						<MessageBadge :size="20" />
 					</template>
-					{{ t('spreed','Create a new conversation') }}
+					{{ t('spreed','Filter unread messages') }}
 				</NcActionButton>
 			</NcActions>
 
 			<!-- New Conversation -->
-			<NewGroupConversation :show-modal="isNewGroupConversationOpen"
+			<NewGroupConversation ref="newGroupConversation"
+				:show-modal="isNewGroupConversationOpen"
 				@open-modal="toggleNewGroupConversation(true)"
 				@close-modal="toggleNewGroupConversation(false)" />
 		</div>
@@ -471,8 +474,9 @@ export default {
 					params: { token: conversation.token },
 				}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			} else {
-				// For other types we start the conversation creation dialog
-				EventBus.$emit('new-group-conversation-dialog', item)
+				// For other types, show the modal directly
+				this.$refs.newGroupConversation.showModalForItem(item)
+				this.toggleNewGroupConversation(true)
 			}
 		},
 
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 6701a55336a..3a5a02958a2 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -192,7 +192,6 @@ import {
 	createPrivateConversation,
 	setConversationPassword,
 } from '../../../services/conversationsService.js'
-import { EventBus } from '../../../services/EventBus.js'
 import { addParticipant } from '../../../services/participantsService.js'
 import { copyConversationLinkToClipboard } from '../../../services/urlService.js'
 
@@ -306,14 +305,7 @@ export default {
 			})
 		},
 	},
-
-	mounted() {
-		EventBus.$on('new-group-conversation-dialog', this.showModalForItem)
-	},
-
-	destroyed() {
-		EventBus.$off('new-group-conversation-dialog', this.showModalForItem)
-	},
+	expose: ['showModalForItem'],
 
 	methods: {
 		showModal() {

From cd1e4c1f7a1414f5f13e7bdaf07ab87cf6f9c2d0 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 13 Jun 2023 11:13:24 +0200
Subject: [PATCH 03/11] Enhancement

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.spec.js | 10 +++++-----
 src/components/LeftSidebar/LeftSidebar.vue     |  1 -
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index cddc71fe3d4..029c8ce91cf 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -626,8 +626,8 @@ describe('LeftSidebar.vue', () => {
 				const ncModalComponent = wrapper.findComponent(NcModal)
 				expect(ncModalComponent.exists()).toBeTruthy()
 
-				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
-				expect(input.element.value).toBe(groupsResults[1].label)
+				const input = ncModalComponent.findComponent({name: 'NcTextField', ref: 'conversationName'})
+				expect(input.props('value')).toBe(groupsResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
@@ -648,9 +648,9 @@ describe('LeftSidebar.vue', () => {
 				await wrapper.vm.$nextTick()
 				const ncModalComponent = wrapper.findComponent(NcModal)
 				expect(ncModalComponent.exists()).toBeTruthy()
-
-				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
-				expect(input.element.value).toBe(circlesResults[1].label)
+				console.log(wrapper.html())
+				const input = ncModalComponent.findComponent({name: 'NcTextField', ref: 'conversationName'})
+				expect(input.props('value')).toBe(circlesResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 2eb9a233be5..250cb53e60b 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -476,7 +476,6 @@ export default {
 			} else {
 				// For other types, show the modal directly
 				this.$refs.newGroupConversation.showModalForItem(item)
-				this.toggleNewGroupConversation(true)
 			}
 		},
 

From fe6ab449790dadbe7e6350083122ddd592475ee6 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 16 Jun 2023 16:56:05 +0200
Subject: [PATCH 04/11] Search box expandible and added buttons

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 99 +++++++++++++------
 .../LeftSidebar/SearchBox/SearchBox.vue       | 19 +++-
 2 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 250cb53e60b..f7cb08dd905 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -23,42 +23,62 @@
 	<NcAppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
-			<SearchBox v-model="searchText"
-				class="conversations-search"
-				:is-searching="isSearching"
-				@input="debounceFetchSearchResults"
-				@submit="onInputEnter"
-				@keydown.enter.native="handleEnter"
-				@abort-search="abortSearch" />
 
 			<!-- Options -->
-			<NcActions>
-				<NcActionButton v-if="canStartConversations"
-					close-after-click
-					@click="toggleNewGroupConversation(true)">
+			<div class="options">
+				<NcActions class ='filters-button'>
 					<template #icon>
-						<PlusIcon :size="20" />
+						<FilterIcon :size="15" />
 					</template>
-					{{ t('spreed','Create a new conversation') }}
-				</NcActionButton>
+					<NcActionButton close-after-click
+						@click="insertValue(t('spreed','is:mentioned'))">
+						<template #icon>
+							<AtIcon :size="20" />
+						</template>
+						{{ t('spreed','Filter unread mentions') }}
+					</NcActionButton>
 
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:mentioned'))">
-					<template #icon>
-						<AtIcon :size="20" />
-					</template>
-					{{ t('spreed','Filter unread mentions') }}
-				</NcActionButton>
+					<NcActionButton close-after-click
+						@click="insertValue(t('spreed','is:unread'))">
+						<template #icon>
+							<MessageBadge :size="20" />
+						</template>
+						{{ t('spreed','Filter unread messages') }}
+					</NcActionButton>
+				</NcActions>
 
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:unread'))">
+				<NcActions >
 					<template #icon>
-						<MessageBadge :size="20" />
+						<PlusIcon :size="20" />
 					</template>
-					{{ t('spreed','Filter unread messages') }}
-				</NcActionButton>
-			</NcActions>
+					<NcActionButton v-if="canStartConversations"
+						close-after-click
+						@click="toggleNewGroupConversation(true)">
+						<template #icon>
+							<PlusIcon :size="20" />
+						</template>
+						{{ t('spreed','Create a new conversation') }}
+					</NcActionButton>
+					<NcActionButton close-after-click>
+						<template #icon>
+							<ListIcon :size="20" />
+						</template>
+						{{ t('spreed','List of open conversations') }}
+					</NcActionButton>
+				</NcActions>
+			</div>
 
+			<SearchBox v-model="searchText"
+				class="conversations-search"
+				:class="{ 'conversations-search--expanded': isFocused }"
+				:is-searching="isSearching"
+				@focus="isFocused = true"
+				@focusCancel ="isFocused = false"
+				@input="debounceFetchSearchResults"
+				@submit="onInputEnter"
+				@keydown.enter.native="handleEnter"
+				@abort-search="abortSearch" />
+			
 			<!-- New Conversation -->
 			<NewGroupConversation ref="newGroupConversation"
 				:show-modal="isNewGroupConversationOpen"
@@ -169,6 +189,9 @@ import debounce from 'debounce'
 import AtIcon from 'vue-material-design-icons/At.vue'
 import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import ListIcon from 'vue-material-design-icons/FormatListBulleted.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -218,6 +241,8 @@ export default {
 		PlusIcon,
 		AtIcon,
 		MessageBadge,
+		FilterIcon,
+		ListIcon,
 	},
 
 	mixins: [
@@ -249,6 +274,7 @@ export default {
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
 			isNewGroupConversationOpen: false,
+			isFocused: false
 		}
 	},
 
@@ -370,9 +396,7 @@ export default {
 		focusCancel() {
 			return this.abortSearch()
 		},
-		isFocused() {
-			return this.isSearching
-		},
+
 		scrollBottomUnread() {
 			this.preventFindingUnread = true
 			this.$refs.container.scrollTo({
@@ -718,10 +742,25 @@ export default {
 
 .conversations-search {
 	flex-grow: 1;
+	transition: all 0.7s ease;
+	width: 65%;
+	position : absolute;
+	left: 8px; //padding
 
 	:deep(.input-field__input) {
 		border-radius: var(--border-radius-pill);
 	}
+	&--expanded {
+		width: 95%;
+	}
+}
+
+
+.options{
+	position: relative;
+	left : calc(65% + 7px);
+	display: flex;
+	gap: 0.5px;
 }
 
 .settings-button {
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 693021077a5..5c4e4c471a8 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -26,6 +26,8 @@
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			trailing-button-icon="close"
+			@blur="isFocused(false)"
+			@focus="isFocused(true)"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
@@ -52,7 +54,7 @@ export default {
 		 */
 		placeholderText: {
 			type: String,
-			default: t('spreed', 'Search conversations or users'),
+			default: t('spreed', 'Search...'),
 		},
 		/**
 		 * The value of the input field, when receiving it as a prop the localValue
@@ -71,7 +73,7 @@ export default {
 		},
 	},
 
-	emits: ['update:value', 'input', 'submit', 'abort-search'],
+	emits: ['update:value', 'input', 'submit', 'abort-search', 'focus', 'focusCancel'],
 
 	data() {
 		return {
@@ -103,6 +105,19 @@ export default {
 		EventBus.$off('route-change', this.focusInputIfRoot)
 	},
 	methods: {
+		isFocused(value){
+			if (value){
+				if (this.localValue != t('spreed','is:mentioned') & this.localValue != t('spreed','is:unread')){
+				this.$emit('focus')
+				}
+			}
+			else {
+				this.$emit('focusCancel')
+			}
+
+			
+		},
+
 		// Focus the input field of the searchbox component.
 		focusInput() {
 			this.$refs.searchConversations.$el.focus()

From fb6be946f13e7d12c2bd332cdba7edbb12f23b86 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 19 Jun 2023 08:31:41 +0200
Subject: [PATCH 05/11] Added z-index and reorder elements, code improv

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 37 +++++++++++--------
 .../LeftSidebar/SearchBox/SearchBox.vue       | 16 +-------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index f7cb08dd905..1f90b15a7f8 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -24,6 +24,18 @@
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
 
+			<SearchBox v-model="searchText"
+				class="conversations-search"
+				:class="{ 'conversations-search--expanded': isFocused }"
+				:is-searching="isSearching"
+				@blur="isFocused(false)"
+				@focus="isFocused(true)"
+				@focusCancel ="isFocused = false"
+				@input="debounceFetchSearchResults"
+				@submit="onInputEnter"
+				@keydown.enter.native="handleEnter"
+				@abort-search="abortSearch" />
+
 			<!-- Options -->
 			<div class="options">
 				<NcActions class ='filters-button'>
@@ -67,23 +79,11 @@
 					</NcActionButton>
 				</NcActions>
 			</div>
-
-			<SearchBox v-model="searchText"
-				class="conversations-search"
-				:class="{ 'conversations-search--expanded': isFocused }"
-				:is-searching="isSearching"
-				@focus="isFocused = true"
-				@focusCancel ="isFocused = false"
-				@input="debounceFetchSearchResults"
-				@submit="onInputEnter"
-				@keydown.enter.native="handleEnter"
-				@abort-search="abortSearch" />
 			
 			<!-- New Conversation -->
 			<NewGroupConversation ref="newGroupConversation"
 				:show-modal="isNewGroupConversationOpen"
-				@open-modal="toggleNewGroupConversation(true)"
-				@close-modal="toggleNewGroupConversation(false)" />
+				@update-modal="toggleNewGroupConversation" />
 		</div>
 
 		<template #list>
@@ -393,6 +393,9 @@ export default {
 		getFocusableList() {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
+		isFocused(value){
+			this.isFocused = value
+		},
 		focusCancel() {
 			return this.abortSearch()
 		},
@@ -742,22 +745,24 @@ export default {
 
 .conversations-search {
 	flex-grow: 1;
-	transition: all 0.7s ease;
+	transition: all 0.3s ease;
 	width: 65%;
+	z-index: 1;
 	position : absolute;
-	left: 8px; //padding
+	padding: 0 8px ;
 
 	:deep(.input-field__input) {
 		border-radius: var(--border-radius-pill);
 	}
 	&--expanded {
-		width: 95%;
+		width: 100%;
 	}
 }
 
 
 .options{
 	position: relative;
+	z-index: 2;
 	left : calc(65% + 7px);
 	display: flex;
 	gap: 0.5px;
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 5c4e4c471a8..37d801cb08b 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -26,8 +26,7 @@
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			trailing-button-icon="close"
-			@blur="isFocused(false)"
-			@focus="isFocused(true)"
+			v-on="$listeners"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
@@ -105,19 +104,6 @@ export default {
 		EventBus.$off('route-change', this.focusInputIfRoot)
 	},
 	methods: {
-		isFocused(value){
-			if (value){
-				if (this.localValue != t('spreed','is:mentioned') & this.localValue != t('spreed','is:unread')){
-				this.$emit('focus')
-				}
-			}
-			else {
-				this.$emit('focusCancel')
-			}
-
-			
-		},
-
 		// Focus the input field of the searchbox component.
 		focusInput() {
 			this.$refs.searchConversations.$el.focus()

From 5ae4d943534278d49c2154ea5f6c6b1c995e8b36 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 20 Jun 2023 14:37:41 +0200
Subject: [PATCH 06/11] Implementation with icons

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../LeftSidebar/LeftSidebar.spec.js           |  5 +-
 src/components/LeftSidebar/LeftSidebar.vue    | 96 ++++++++++---------
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index 029c8ce91cf..fa94973b9c2 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -626,7 +626,7 @@ describe('LeftSidebar.vue', () => {
 				const ncModalComponent = wrapper.findComponent(NcModal)
 				expect(ncModalComponent.exists()).toBeTruthy()
 
-				const input = ncModalComponent.findComponent({name: 'NcTextField', ref: 'conversationName'})
+				const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' })
 				expect(input.props('value')).toBe(groupsResults[1].label)
 
 				// nothing created yet
@@ -648,8 +648,7 @@ describe('LeftSidebar.vue', () => {
 				await wrapper.vm.$nextTick()
 				const ncModalComponent = wrapper.findComponent(NcModal)
 				expect(ncModalComponent.exists()).toBeTruthy()
-				console.log(wrapper.html())
-				const input = ncModalComponent.findComponent({name: 'NcTextField', ref: 'conversationName'})
+				const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' })
 				expect(input.props('value')).toBe(circlesResults[1].label)
 
 				// nothing created yet
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1f90b15a7f8..4ebfe2d7015 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -23,14 +23,13 @@
 	<NcAppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
-
-			<SearchBox v-model="searchText"
+			<SearchBox ref="searchbox"
+				v-model="searchText"
 				class="conversations-search"
 				:class="{ 'conversations-search--expanded': isFocused }"
 				:is-searching="isSearching"
-				@blur="isFocused(false)"
-				@focus="isFocused(true)"
-				@focusCancel ="isFocused = false"
+				@blur="setIsFocused(false)"
+				@focus="setIsFocused(true)"
 				@input="debounceFetchSearchResults"
 				@submit="onInputEnter"
 				@keydown.enter.native="handleEnter"
@@ -38,12 +37,15 @@
 
 			<!-- Options -->
 			<div class="options">
-				<NcActions class ='filters-button'>
+				<NcActions ref="filterMainBtn"
+					class="filters-button">
 					<template #icon>
-						<FilterIcon :size="15" />
+						<FilterIcon v-if="!isFiltered" :size="15" />
+						<UnFilterIcon v-else-if="isFiltered" :size="15" />
 					</template>
 					<NcActionButton close-after-click
-						@click="insertValue(t('spreed','is:mentioned'))">
+						class="filterButton--Option"
+						@click="handleFilter('is:mentioned')">
 						<template #icon>
 							<AtIcon :size="20" />
 						</template>
@@ -51,7 +53,8 @@
 					</NcActionButton>
 
 					<NcActionButton close-after-click
-						@click="insertValue(t('spreed','is:unread'))">
+						class="filterButton--Option"
+						@click="handleFilter('is:unread')">
 						<template #icon>
 							<MessageBadge :size="20" />
 						</template>
@@ -59,7 +62,7 @@
 					</NcActionButton>
 				</NcActions>
 
-				<NcActions >
+				<NcActions>
 					<template #icon>
 						<PlusIcon :size="20" />
 					</template>
@@ -71,15 +74,9 @@
 						</template>
 						{{ t('spreed','Create a new conversation') }}
 					</NcActionButton>
-					<NcActionButton close-after-click>
-						<template #icon>
-							<ListIcon :size="20" />
-						</template>
-						{{ t('spreed','List of open conversations') }}
-					</NcActionButton>
 				</NcActions>
 			</div>
-			
+
 			<!-- New Conversation -->
 			<NewGroupConversation ref="newGroupConversation"
 				:show-modal="isNewGroupConversationOpen"
@@ -187,11 +184,10 @@
 import debounce from 'debounce'
 
 import AtIcon from 'vue-material-design-icons/At.vue'
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import UnFilterIcon from 'vue-material-design-icons/FilterRemove.vue'
 import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import FilterIcon from 'vue-material-design-icons/Filter.vue'
-import ListIcon from 'vue-material-design-icons/FormatListBulleted.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -242,7 +238,7 @@ export default {
 		AtIcon,
 		MessageBadge,
 		FilterIcon,
-		ListIcon,
+		UnFilterIcon,
 	},
 
 	mixins: [
@@ -274,27 +270,28 @@ export default {
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
 			isNewGroupConversationOpen: false,
-			isFocused: false
+			isFocused: false,
+			filterText: '',
+			isFiltered: false,
 		}
 	},
 
 	computed: {
 		conversationsList() {
 			let conversations = this.$store.getters.conversationsList
-
-			if (this.searchText !== '') {
-				const lowerSearchText = this.searchText.toLowerCase()
-				switch (this.searchText) {
-				case t('spreed', 'is:unread'):
-					conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
-					break
-				case t('spreed', 'is:mentioned'):
-					conversations = conversations.filter(conversation => conversation.unreadMention)
-					break
-				default:
+			switch (this.filterText) {
+			case ('is:unread'):
+				conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
+				break
+			case ('is:mentioned'):
+				conversations = conversations.filter(conversation => conversation.unreadMention)
+				break
+			default:
+				if (this.searchText !== '') {
+					const lowerSearchText = this.searchText.toLowerCase()
 					conversations = conversations.filter(conversation =>
 						conversation.displayName.toLowerCase().includes(lowerSearchText)
-							|| conversation.name.toLowerCase().includes(lowerSearchText)
+								|| conversation.name.toLowerCase().includes(lowerSearchText)
 					)
 					break
 				}
@@ -393,9 +390,22 @@ export default {
 		getFocusableList() {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
-		isFocused(value){
+		setIsFocused(value) {
 			this.isFocused = value
 		},
+
+		handleFilter(filter) {
+			this.isFiltered = true
+			this.filterText = filter
+			const divElement = document.querySelector('.filters-button')
+
+			divElement.addEventListener('click', function(event) {
+				this.filterText = ''
+				this.isFiltered = false
+			}.bind(this))
+
+		},
+
 		focusCancel() {
 			return this.abortSearch()
 		},
@@ -421,10 +431,6 @@ export default {
 			this.isNewGroupConversationOpen = value
 		},
 
-		insertValue(value) {
-			this.searchText = value
-		},
-
 		async fetchPossibleConversations() {
 			this.contactsLoading = true
 
@@ -747,25 +753,23 @@ export default {
 	flex-grow: 1;
 	transition: all 0.3s ease;
 	width: 65%;
-	z-index: 1;
+	z-index: 2;
 	position : absolute;
-	padding: 0 8px ;
 
 	:deep(.input-field__input) {
 		border-radius: var(--border-radius-pill);
 	}
 	&--expanded {
-		width: 100%;
+		width: 95%;
 	}
 }
 
-
 .options{
 	position: relative;
-	z-index: 2;
-	left : calc(65% + 7px);
+	z-index: 1;
+	left : calc(65% + 10px);
 	display: flex;
-	gap: 0.5px;
+	gap: 0.25px;
 }
 
 .settings-button {

From 7f4078158fc12e685e9c6cb0863cf487e0ced9f8 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 20 Jun 2023 19:29:16 +0200
Subject: [PATCH 07/11] Disabled search if filter and added clear btn

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 46 +++++++++++++++----
 .../LeftSidebar/SearchBox/SearchBox.vue       |  4 +-
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 4ebfe2d7015..73af7bce09d 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -26,7 +26,8 @@
 			<SearchBox ref="searchbox"
 				v-model="searchText"
 				class="conversations-search"
-				:class="{ 'conversations-search--expanded': isFocused }"
+				:class="{'conversations-search--expanded': isFocused,
+					'conversations-search--filter' : isFiltered }"
 				:is-searching="isSearching"
 				@blur="setIsFocused(false)"
 				@focus="setIsFocused(true)"
@@ -41,7 +42,7 @@
 					class="filters-button">
 					<template #icon>
 						<FilterIcon v-if="!isFiltered" :size="15" />
-						<UnFilterIcon v-else-if="isFiltered" :size="15" />
+						<FilterCheckIcon v-else-if="isFiltered" :size="15" />
 					</template>
 					<NcActionButton close-after-click
 						class="filterButton--Option"
@@ -60,6 +61,16 @@
 						</template>
 						{{ t('spreed','Filter unread messages') }}
 					</NcActionButton>
+
+					<NcActionButton v-if="isFiltered"
+						close-after-click
+						class="filterButton--Clear"
+						@click="clearFilter">
+						<template #icon>
+							<FilterRemoveIcon :size="20" />
+						</template>
+						{{ t('spreed','Clear filter :') }} {{ filterText }}
+					</NcActionButton>
 				</NcActions>
 
 				<NcActions>
@@ -97,7 +108,7 @@
 					<template v-if="!initialisedConversations">
 						<LoadingPlaceholder type="conversations" />
 					</template>
-					<Hint v-else-if="searchText && !conversationsList.length"
+					<Hint v-else-if="(searchText && !conversationsList.length) || (!conversationsList.length && isFiltered)"
 						:hint="t('spreed', 'No matches')" />
 					<template v-if="isSearching">
 						<template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0">
@@ -185,7 +196,8 @@ import debounce from 'debounce'
 
 import AtIcon from 'vue-material-design-icons/At.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
-import UnFilterIcon from 'vue-material-design-icons/FilterRemove.vue'
+import FilterCheckIcon from 'vue-material-design-icons/FilterCheck.vue'
+import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue'
 import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
@@ -238,7 +250,8 @@ export default {
 		AtIcon,
 		MessageBadge,
 		FilterIcon,
-		UnFilterIcon,
+		FilterCheckIcon,
+		FilterRemoveIcon,
 	},
 
 	mixins: [
@@ -397,13 +410,14 @@ export default {
 		handleFilter(filter) {
 			this.isFiltered = true
 			this.filterText = filter
-			const divElement = document.querySelector('.filters-button')
 
-			divElement.addEventListener('click', function(event) {
-				this.filterText = ''
-				this.isFiltered = false
-			}.bind(this))
+		},
 
+		clearFilter() {
+			// clear the status filter
+			this.isFiltered = false
+			// clear the filter
+			this.filterText = ''
 		},
 
 		focusCancel() {
@@ -762,6 +776,13 @@ export default {
 	&--expanded {
 		width: 95%;
 	}
+
+	&--filter{
+		pointer-events: none;
+		:deep(.input-field__input) {
+		background-color: var(--color-background-dark);
+	}
+	}
 }
 
 .options{
@@ -772,6 +793,11 @@ export default {
 	gap: 0.25px;
 }
 
+.filterButton--Clear{
+	font-style: italic;
+	background-color: var(--color-background-dark);
+}
+
 .settings-button {
 	justify-content: flex-start !important;
 }
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 37d801cb08b..1ebf58bb630 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -53,7 +53,7 @@ export default {
 		 */
 		placeholderText: {
 			type: String,
-			default: t('spreed', 'Search...'),
+			default: t('spreed', 'Search…'),
 		},
 		/**
 		 * The value of the input field, when receiving it as a prop the localValue
@@ -72,7 +72,7 @@ export default {
 		},
 	},
 
-	emits: ['update:value', 'input', 'submit', 'abort-search', 'focus', 'focusCancel'],
+	emits: ['update:value', 'input', 'submit', 'abort-search'],
 
 	data() {
 		return {

From 092b64fe8fb37a3ef6fabec34e4d1b2e1ca52cf6 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Wed, 21 Jun 2023 16:45:01 +0200
Subject: [PATCH 08/11] transition improvement and mention filter fix

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 73af7bce09d..be6b42f8244 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -37,7 +37,8 @@
 				@abort-search="abortSearch" />
 
 			<!-- Options -->
-			<div class="options">
+			<div class="options"
+				:class="{'options--hidden': isFocused}">
 				<NcActions ref="filterMainBtn"
 					class="filters-button">
 					<template #icon>
@@ -69,7 +70,7 @@
 						<template #icon>
 							<FilterRemoveIcon :size="20" />
 						</template>
-						{{ t('spreed','Clear filter :') }} {{ filterText }}
+						{{ t('spreed', 'Clear filters: {filterText}', { filterText: filterText }) }}
 					</NcActionButton>
 				</NcActions>
 
@@ -87,7 +88,6 @@
 					</NcActionButton>
 				</NcActions>
 			</div>
-
 			<!-- New Conversation -->
 			<NewGroupConversation ref="newGroupConversation"
 				:show-modal="isNewGroupConversationOpen"
@@ -297,7 +297,8 @@ export default {
 				conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
 				break
 			case ('is:mentioned'):
-				conversations = conversations.filter(conversation => conversation.unreadMention)
+				conversations = conversations.filter(conversation => conversation.unreadMention || (conversation.unreadMessages > 0
+				 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER)))
 				break
 			default:
 				if (this.searchText !== '') {
@@ -764,7 +765,6 @@ export default {
 }
 
 .conversations-search {
-	flex-grow: 1;
 	transition: all 0.3s ease;
 	width: 65%;
 	z-index: 2;
@@ -774,7 +774,7 @@ export default {
 		border-radius: var(--border-radius-pill);
 	}
 	&--expanded {
-		width: 95%;
+		width: 90%;
 	}
 
 	&--filter{
@@ -791,6 +791,10 @@ export default {
 	left : calc(65% + 10px);
 	display: flex;
 	gap: 0.25px;
+
+	&--hidden{
+		visibility: hidden;
+	}
 }
 
 .filterButton--Clear{

From 166a3dbd5e4a4382b341b70fc1fa80ea64eb0aea Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 22 Jun 2023 15:13:14 +0200
Subject: [PATCH 09/11] Fine tuning

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

Fine tuning part 2

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

LeftSidebar test correction

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../LeftSidebar/LeftSidebar.spec.js           |  12 +-
 src/components/LeftSidebar/LeftSidebar.vue    | 114 +++++++-----------
 .../LeftSidebar/SearchBox/SearchBox.vue       |   7 +-
 3 files changed, 57 insertions(+), 76 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index fa94973b9c2..ea73f4faa7f 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -7,15 +7,13 @@ import Vuex from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-
 import LeftSidebar from './LeftSidebar.vue'
 
 import router from '../../__mocks__/router.js'
 import { searchPossibleConversations, searchListedConversations } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
-import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
+import { findNcListItems } from '../../test-helpers.js'
 
 jest.mock('@nextcloud/initial-state', () => ({
 	loadState: jest.fn(),
@@ -623,7 +621,7 @@ describe('LeftSidebar.vue', () => {
 				await resultsListItems.at(1).findAll('a').trigger('click')
 				// Wait for the component to render
 				await wrapper.vm.$nextTick()
-				const ncModalComponent = wrapper.findComponent(NcModal)
+				const ncModalComponent = wrapper.findComponent({ name: 'NcModal' })
 				expect(ncModalComponent.exists()).toBeTruthy()
 
 				const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' })
@@ -646,7 +644,7 @@ describe('LeftSidebar.vue', () => {
 
 				// Wait for the component to render
 				await wrapper.vm.$nextTick()
-				const ncModalComponent = wrapper.findComponent(NcModal)
+				const ncModalComponent = wrapper.findComponent({ name: 'NcModal' })
 				expect(ncModalComponent.exists()).toBeTruthy()
 				const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' })
 				expect(input.props('value')).toBe(circlesResults[1].label)
@@ -711,7 +709,7 @@ describe('LeftSidebar.vue', () => {
 			loadStateSettings.start_conversations = true
 
 			const wrapper = mountComponent()
-			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
+			const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' })
 			expect(buttonEl.exists()).toBeTruthy()
 
 		})
@@ -719,7 +717,7 @@ describe('LeftSidebar.vue', () => {
 			loadStateSettings.start_conversations = false
 
 			const wrapper = mountComponent()
-			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
+			const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' })
 			expect(buttonEl.exists()).toBeFalsy()
 		})
 	})
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index be6b42f8244..78ab6b97482 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -26,8 +26,8 @@
 			<SearchBox ref="searchbox"
 				v-model="searchText"
 				class="conversations-search"
-				:class="{'conversations-search--expanded': isFocused,
-					'conversations-search--filter' : isFiltered }"
+				:class="{'conversations-search--expanded': isFocused}"
+				:disabled="isFiltered"
 				:is-searching="isSearching"
 				@blur="setIsFocused(false)"
 				@focus="setIsFocused(true)"
@@ -38,16 +38,16 @@
 
 			<!-- Options -->
 			<div class="options"
-				:class="{'options--hidden': isFocused}">
-				<NcActions ref="filterMainBtn"
-					class="filters-button">
+				:class="{'hidden-visually': isFocused}">
+				<NcActions class="filter-actions"
+					:primary="isFiltered !== null">
 					<template #icon>
-						<FilterIcon v-if="!isFiltered" :size="15" />
-						<FilterCheckIcon v-else-if="isFiltered" :size="15" />
+						<FilterIcon :size="15" />
 					</template>
 					<NcActionButton close-after-click
-						class="filterButton--Option"
-						@click="handleFilter('is:mentioned')">
+						class="filter-actions__button"
+						:primary="isFiltered === 'mentions'"
+						@click="handleFilter('mentions')">
 						<template #icon>
 							<AtIcon :size="20" />
 						</template>
@@ -55,8 +55,9 @@
 					</NcActionButton>
 
 					<NcActionButton close-after-click
-						class="filterButton--Option"
-						@click="handleFilter('is:unread')">
+						class="filter-actions__button"
+						:class="{'filter-actions__button--active': isFiltered === 'unread'}"
+						@click="handleFilter('unread')">
 						<template #icon>
 							<MessageBadge :size="20" />
 						</template>
@@ -65,33 +66,18 @@
 
 					<NcActionButton v-if="isFiltered"
 						close-after-click
-						class="filterButton--Clear"
-						@click="clearFilter">
+						class="filter-actions__clearbutton"
+						@click="handleFilter(null)">
 						<template #icon>
 							<FilterRemoveIcon :size="20" />
 						</template>
-						{{ t('spreed', 'Clear filters: {filterText}', { filterText: filterText }) }}
-					</NcActionButton>
-				</NcActions>
-
-				<NcActions>
-					<template #icon>
-						<PlusIcon :size="20" />
-					</template>
-					<NcActionButton v-if="canStartConversations"
-						close-after-click
-						@click="toggleNewGroupConversation(true)">
-						<template #icon>
-							<PlusIcon :size="20" />
-						</template>
-						{{ t('spreed','Create a new conversation') }}
+						{{ t('spreed', 'Clear filters') }}
 					</NcActionButton>
 				</NcActions>
+				<!-- New Conversation -->
+				<NewGroupConversation v-if="canStartConversations"
+					ref="newGroupConversation" />
 			</div>
-			<!-- New Conversation -->
-			<NewGroupConversation ref="newGroupConversation"
-				:show-modal="isNewGroupConversationOpen"
-				@update-modal="toggleNewGroupConversation" />
 		</div>
 
 		<template #list>
@@ -108,7 +94,7 @@
 					<template v-if="!initialisedConversations">
 						<LoadingPlaceholder type="conversations" />
 					</template>
-					<Hint v-else-if="(searchText && !conversationsList.length) || (!conversationsList.length && isFiltered)"
+					<Hint v-else-if="noMatchFound"
 						:hint="t('spreed', 'No matches')" />
 					<template v-if="isSearching">
 						<template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0">
@@ -196,10 +182,8 @@ import debounce from 'debounce'
 
 import AtIcon from 'vue-material-design-icons/At.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
-import FilterCheckIcon from 'vue-material-design-icons/FilterCheck.vue'
 import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue'
 import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -246,11 +230,9 @@ export default {
 		ConversationIcon,
 		NcActions,
 		NcActionButton,
-		PlusIcon,
 		AtIcon,
 		MessageBadge,
 		FilterIcon,
-		FilterCheckIcon,
 		FilterRemoveIcon,
 	},
 
@@ -284,19 +266,18 @@ export default {
 			forceFullRoomListRefreshAfterXLoops: 0,
 			isNewGroupConversationOpen: false,
 			isFocused: false,
-			filterText: '',
-			isFiltered: false,
+			isFiltered: null,
 		}
 	},
 
 	computed: {
 		conversationsList() {
 			let conversations = this.$store.getters.conversationsList
-			switch (this.filterText) {
-			case ('is:unread'):
+			switch (this.isFiltered) {
+			case ('unread'):
 				conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
 				break
-			case ('is:mentioned'):
+			case ('mentions'):
 				conversations = conversations.filter(conversation => conversation.unreadMention || (conversation.unreadMessages > 0
 				 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER)))
 				break
@@ -320,6 +301,10 @@ export default {
 			return this.searchText !== ''
 		},
 
+		noMatchFound() {
+			return (this.searchText || this.isFiltered) && !this.conversationsList.length
+		},
+
 		showStartConversationsOptions() {
 			return this.isSearching && this.canStartConversations
 		},
@@ -409,16 +394,7 @@ export default {
 		},
 
 		handleFilter(filter) {
-			this.isFiltered = true
-			this.filterText = filter
-
-		},
-
-		clearFilter() {
-			// clear the status filter
-			this.isFiltered = false
-			// clear the filter
-			this.filterText = ''
+			this.isFiltered = filter
 		},
 
 		focusCancel() {
@@ -766,8 +742,8 @@ export default {
 
 .conversations-search {
 	transition: all 0.3s ease;
-	width: 65%;
-	z-index: 2;
+	width: calc(65% - 8px);
+	z-index: 1;
 	position : absolute;
 
 	:deep(.input-field__input) {
@@ -777,29 +753,31 @@ export default {
 		width: 90%;
 	}
 
-	&--filter{
-		pointer-events: none;
-		:deep(.input-field__input) {
-		background-color: var(--color-background-dark);
-	}
-	}
+}
+
+//FIXME : this should be changed once the disabled style for input is added
+:deep(.input-field__input[disabled="disabled"]){
+	background-color: var(--color-background-dark);
 }
 
 .options{
 	position: relative;
-	z-index: 1;
-	left : calc(65% + 10px);
+	transition: all 0.3s ease; //gets hidden once the search box is expanded
+	left : calc(65% + 4px);
 	display: flex;
-	gap: 0.25px;
+}
 
-	&--hidden{
-		visibility: hidden;
+.filter-actions__button--active{
+	background-color: var(--color-primary-element-light);
+	border-radius: 6px;
+	:deep(.action-button__longtext){
+		font-weight: bold;
 	}
+
 }
 
-.filterButton--Clear{
-	font-style: italic;
-	background-color: var(--color-background-dark);
+.hidden-visually{
+	height:100%;
 }
 
 .settings-button {
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 1ebf58bb630..b3fa6e9c161 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -25,6 +25,7 @@
 			:value.sync="localValue"
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
+			:disabled="disabled"
 			trailing-button-icon="close"
 			v-on="$listeners"
 			@trailing-button-click="abortSearch"
@@ -53,7 +54,7 @@ export default {
 		 */
 		placeholderText: {
 			type: String,
-			default: t('spreed', 'Search…'),
+			default: t('spreed', 'Search …'),
 		},
 		/**
 		 * The value of the input field, when receiving it as a prop the localValue
@@ -70,6 +71,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['update:value', 'input', 'submit', 'abort-search'],

From ad00a2fed0852c0849b314bb7ee8538378a81414 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 27 Jun 2023 12:58:30 +0200
Subject: [PATCH 10/11] Search box fixes

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 34 +++++++++----------
 .../LeftSidebar/SearchBox/SearchBox.vue       | 25 +++++---------
 src/mixins/arrowNavigation.js                 |  2 +-
 3 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 78ab6b97482..1b584739ccd 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -24,13 +24,13 @@
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
 			<SearchBox ref="searchbox"
-				v-model="searchText"
+				:value.sync="searchText"
 				class="conversations-search"
 				:class="{'conversations-search--expanded': isFocused}"
-				:disabled="isFiltered"
+				:disabled="isFiltered !== null"
 				:is-searching="isSearching"
-				@blur="setIsFocused(false)"
-				@focus="setIsFocused(true)"
+				@focus="setIsFocused"
+				@blur="setIsFocused"
 				@input="debounceFetchSearchResults"
 				@submit="onInputEnter"
 				@keydown.enter.native="handleEnter"
@@ -46,7 +46,7 @@
 					</template>
 					<NcActionButton close-after-click
 						class="filter-actions__button"
-						:primary="isFiltered === 'mentions'"
+						:class="{'filter-actions__button--active': isFiltered === 'mentions'}"
 						@click="handleFilter('mentions')">
 						<template #icon>
 							<AtIcon :size="20" />
@@ -264,7 +264,6 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
-			isNewGroupConversationOpen: false,
 			isFocused: false,
 			isFiltered: null,
 		}
@@ -389,12 +388,18 @@ export default {
 		getFocusableList() {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
-		setIsFocused(value) {
-			this.isFocused = value
+		setIsFocused(event) {
+			if (event.relatedTarget?.className.includes('input-field__clear-button')) {
+				return
+			}
+			this.isFocused = event.type === 'focus'
+
 		},
 
 		handleFilter(filter) {
 			this.isFiltered = filter
+			// Clear the search input once a filter is active
+			this.searchText = ''
 		},
 
 		focusCancel() {
@@ -418,10 +423,6 @@ export default {
 			}
 		}, 250),
 
-		toggleNewGroupConversation(value) {
-			this.isNewGroupConversationOpen = value
-		},
-
 		async fetchPossibleConversations() {
 			this.contactsLoading = true
 
@@ -510,6 +511,7 @@ export default {
 		// Reset the search text, therefore end the search operation.
 		abortSearch() {
 			this.searchText = ''
+			this.isFocused = false
 			if (this.cancelSearchPossibleConversations) {
 				this.cancelSearchPossibleConversations()
 			}
@@ -755,16 +757,16 @@ export default {
 
 }
 
-//FIXME : this should be changed once the disabled style for input is added
+//FIXME : upstream: this should be changed once the disabled style for NcInputField is added
 :deep(.input-field__input[disabled="disabled"]){
 	background-color: var(--color-background-dark);
 }
 
 .options{
 	position: relative;
-	transition: all 0.3s ease; //gets hidden once the search box is expanded
 	left : calc(65% + 4px);
 	display: flex;
+	height: var(--default-clickable-area);
 }
 
 .filter-actions__button--active{
@@ -776,10 +778,6 @@ export default {
 
 }
 
-.hidden-visually{
-	height:100%;
-}
-
 .settings-button {
 	justify-content: flex-start !important;
 }
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index b3fa6e9c161..11fe1a4a078 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -22,12 +22,13 @@
 <template>
 	<form @submit.prevent="handleSubmit">
 		<NcTextField ref="searchConversations"
-			:value.sync="localValue"
+			:value="value"
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			:disabled="disabled"
 			trailing-button-icon="close"
 			v-on="$listeners"
+			@update:value="updateValue"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
@@ -57,8 +58,7 @@ export default {
 			default: t('spreed', 'Search …'),
 		},
 		/**
-		 * The value of the input field, when receiving it as a prop the localValue
-		 * is updated.
+		 * The value of the input field.
 		 */
 		value: {
 			type: String,
@@ -79,25 +79,12 @@ export default {
 
 	emits: ['update:value', 'input', 'submit', 'abort-search'],
 
-	data() {
-		return {
-			localValue: '',
-		}
-	},
 	computed: {
 		cancelSearchLabel() {
 			return t('spreed', 'Cancel search')
 		},
 	},
-	watch: {
-		localValue(localValue) {
-			this.$emit('update:value', localValue)
-			this.$emit('input', localValue)
-		},
-		value(value) {
-			this.localValue = value
-		},
-	},
+
 	mounted() {
 		this.focusInputIfRoot()
 		/**
@@ -109,6 +96,10 @@ export default {
 		EventBus.$off('route-change', this.focusInputIfRoot)
 	},
 	methods: {
+		updateValue(value) {
+			this.$emit('update:value', value)
+			this.$emit('input', value)
+		},
 		// Focus the input field of the searchbox component.
 		focusInput() {
 			this.$refs.searchConversations.$el.focus()
diff --git a/src/mixins/arrowNavigation.js b/src/mixins/arrowNavigation.js
index e1ed38542e9..fb48370b719 100644
--- a/src/mixins/arrowNavigation.js
+++ b/src/mixins/arrowNavigation.js
@@ -43,7 +43,7 @@ const arrowNavigation = {
 		mountArrowNavigation() {
 			document.addEventListener('keydown', (event) => {
 				// https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
-				if (this.isFocused()) {
+				if (this.isSearching) {
 					// If arrow down, focus next result
 					if (event.key === 'ArrowDown') {
 						this.focusNext(event)

From a0b48b38817da8cbb6cb4a01436f1369f5b2521f Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 29 Jun 2023 13:43:55 +0200
Subject: [PATCH 11/11] Hopefully last one

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 62 +++++++++----------
 .../LeftSidebar/SearchBox/SearchBox.vue       |  5 --
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1b584739ccd..1d1b67a2cac 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -27,7 +27,6 @@
 				:value.sync="searchText"
 				class="conversations-search"
 				:class="{'conversations-search--expanded': isFocused}"
-				:disabled="isFiltered !== null"
 				:is-searching="isSearching"
 				@focus="setIsFocused"
 				@blur="setIsFocused"
@@ -74,10 +73,12 @@
 						{{ t('spreed', 'Clear filters') }}
 					</NcActionButton>
 				</NcActions>
-				<!-- New Conversation -->
-				<NewGroupConversation v-if="canStartConversations"
-					ref="newGroupConversation" />
 			</div>
+
+			<!-- New Conversation -->
+			<NewGroupConversation v-if="canStartConversations"
+				ref="newGroupConversation"
+				class="new-conversation__button" />
 		</div>
 
 		<template #list>
@@ -272,23 +273,17 @@ export default {
 	computed: {
 		conversationsList() {
 			let conversations = this.$store.getters.conversationsList
-			switch (this.isFiltered) {
-			case ('unread'):
+			if (this.searchText !== '') {
+				const lowerSearchText = this.searchText.toLowerCase()
+				conversations = conversations.filter(conversation =>
+					conversation.displayName.toLowerCase().includes(lowerSearchText)
+							|| conversation.name.toLowerCase().includes(lowerSearchText)
+				)
+			} else if (this.isFiltered === 'unread') {
 				conversations = conversations.filter(conversation => conversation.unreadMessages > 0)
-				break
-			case ('mentions'):
+			} else if (this.isFiltered === 'mentions') {
 				conversations = conversations.filter(conversation => conversation.unreadMention || (conversation.unreadMessages > 0
-				 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER)))
-				break
-			default:
-				if (this.searchText !== '') {
-					const lowerSearchText = this.searchText.toLowerCase()
-					conversations = conversations.filter(conversation =>
-						conversation.displayName.toLowerCase().includes(lowerSearchText)
-								|| conversation.name.toLowerCase().includes(lowerSearchText)
-					)
-					break
-				}
+					&& (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER)))
 			}
 
 			// FIXME: this modifies the original array,
@@ -389,7 +384,7 @@ export default {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
 		setIsFocused(event) {
-			if (event.relatedTarget?.className.includes('input-field__clear-button')) {
+			if (event.relatedTarget?.className.includes('input-field__clear-button') || this.searchText !== '') {
 				return
 			}
 			this.isFocused = event.type === 'focus'
@@ -744,31 +739,36 @@ export default {
 
 .conversations-search {
 	transition: all 0.3s ease;
-	width: calc(65% - 8px);
 	z-index: 1;
-	position : absolute;
-
+	// New conversation button width : 52 px
+	// Filters button width : 44 px
+	// Spacing : 3px + 1px
+	// Total : 100 px
+	width : calc(100% - 100px);
+	display : flex;
 	:deep(.input-field__input) {
 		border-radius: var(--border-radius-pill);
 	}
 	&--expanded {
-		width: 90%;
-	}
 
-}
+		// Gets expanded : 100 % - (52px + 1px)
+		width : calc(100% - 53px );
+	}
 
-//FIXME : upstream: this should be changed once the disabled style for NcInputField is added
-:deep(.input-field__input[disabled="disabled"]){
-	background-color: var(--color-background-dark);
 }
 
 .options{
-	position: relative;
-	left : calc(65% + 4px);
+	position: absolute;
+	right : 52px; // New conversation button's width
 	display: flex;
 	height: var(--default-clickable-area);
 }
 
+.new-conversation__button{
+	position: absolute;
+	right: 1px;
+}
+
 .filter-actions__button--active{
 	background-color: var(--color-primary-element-light);
 	border-radius: 6px;
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 11fe1a4a078..67cbdb72e2c 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -25,7 +25,6 @@
 			:value="value"
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
-			:disabled="disabled"
 			trailing-button-icon="close"
 			v-on="$listeners"
 			@update:value="updateValue"
@@ -71,10 +70,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	emits: ['update:value', 'input', 'submit', 'abort-search'],