improve search box UX

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

3 files changed, 28 insertions, 8 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index ace133521..4709d23f8 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -313,7 +313,6 @@ describe('LeftSidebar.vue', () => {
 			await flushPromises()
 
 			await searchBox.find('input[type="text"]').setValue(searchTerm)
-			expect(searchBox.props('isSearching')).toBeTruthy()
 
 			await flushPromises()
 
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index d72efbbaa..e5d801a41 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -111,6 +111,17 @@
 				<ul ref="scroller"
 					class="scroller"
 					@scroll="debounceHandleScroll">
+					<NcListItem v-if="noMatchFound && searchText"
+						:title="t('spreed', 'Create a new conversation')"
+						@click="createConversation(searchText)">
+						<template #icon>
+							<ChatPlus :size="30" />
+						</template>
+						<template #subtitle>
+							{{ searchText }}
+						</template>
+					</NcListItem>
+
 					<NcAppNavigationCaption :class="{'hidden-visually': !isSearching}"
 						:title="t('spreed', 'Conversations')" />
 					<Conversation v-for="item of conversationsList"
@@ -146,7 +157,7 @@
 							<NcAppNavigationCaption v-if="searchResultsUsers.length === 0"
 								:title="t('spreed', 'Users')" />
 							<Hint v-if="contactsLoading" :hint="t('spreed', 'Loading')" />
-							<Hint v-else :hint="t('spreed', 'No search results')" />
+							<Hint v-else :hint="t('spreed', 'No matches found')" />
 						</template>
 					</template>
 					<template v-if="showStartConversationsOptions">
@@ -238,6 +249,7 @@ import SearchBox from './SearchBox/SearchBox.vue'
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
 import { CONVERSATION } from '../../constants.js'
 import {
+	createPrivateConversation,
 	searchPossibleConversations,
 	searchListedConversations,
 } from '../../services/conversationsService.js'
@@ -319,7 +331,7 @@ export default {
 	computed: {
 		conversationsList() {
 			let conversations = this.$store.getters.conversationsList
-			if (this.searchText !== '') {
+			if (this.searchText !== '' || this.isFocused) {
 				const lowerSearchText = this.searchText.toLowerCase()
 				conversations = conversations.filter(conversation =>
 					conversation.displayName.toLowerCase().includes(lowerSearchText)
@@ -434,11 +446,10 @@ export default {
 		},
 
 		setIsFocused(event) {
-			if (event.relatedTarget?.className.includes('input-field__clear-button') || this.searchText !== '') {
+			if (this.searchText !== '') {
 				return
 			}
 			this.isFocused = event.type === 'focus'
-
 		},
 
 		handleFilter(filter) {
@@ -551,6 +562,17 @@ export default {
 			}
 		},
 
+		async createConversation(name) {
+			const response = await createPrivateConversation(name)
+			const conversation = response.data.ocs.data
+			this.$store.dispatch('addConversation', conversation)
+			this.abortSearch()
+			this.$router.push({
+				name: 'conversation',
+				params: { token: conversation.token },
+			}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+		},
+
 		hasOneToOneConversationWith(userId) {
 			return !!this.conversationsList.find(conversation => conversation.type === CONVERSATION.TYPE.ONE_TO_ONE && conversation.name === userId)
 		},
@@ -796,8 +818,7 @@ export default {
 	}
 	&--expanded {
 
-		// Gets expanded : 100 % - (52px + 1px)
-		width : calc(100% - 53px );
+		width : calc(100% - 8px);
 	}
 
 }
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index e6392c8ce..b40897a16 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -64,7 +64,7 @@ export default {
 		/**
 		 * If true, this component displays an 'x' button to abort the search
 		 */
-		isSearching: {
+		isFocused: {
 			type: Boolean,
 			default: false,
 		},