fix(unified-search): emptycontent messages

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

core/src/views/UnifiedSearch.vue

@@ -43,8 +43,8 @@
 					@submit.prevent.stop="onInputEnter"
 					@reset.prevent.stop="onReset">
 					<!-- Search input -->
-					<input ref="input"
-						id="unified-search__input"
+					<input id="unified-search__input"
+						ref="input"
 						v-model="query"
 						class="unified-search__form-input"
 						type="search"
@@ -92,28 +92,19 @@
 			<!-- Loading placeholders -->
 			<SearchResultPlaceholders v-if="isLoading" />
 
-			<NcEmptyContent v-else-if="isValidQuery">
-				<NcHighlight v-if="triggered" :text="t('core', 'No results for {query}', { query })" :search="query" />
-				<div v-else>
-					{{ t('core', 'Press enter to start searching') }}
-				</div>
+			<NcEmptyContent v-else-if="isValidQuery"
+				:title="validQueryTitle">
 				<template #icon>
 					<Magnify />
 				</template>
 			</NcEmptyContent>
 
-			<NcEmptyContent v-else-if="!isLoading || isShortQuery">
-				{{ t('core', 'Start typing to search') }}
+			<NcEmptyContent v-else-if="!isLoading || isShortQuery"
+				:title="t('core', 'Start typing to search')"
+				:description="shortQueryDescription">
 				<template #icon>
 					<Magnify />
 				</template>
-				<template v-if="isShortQuery" #desc>
-					{{ n('core',
-						'Please enter {minSearchLength} character or more to search',
-						'Please enter {minSearchLength} characters  or more to search',
-						minSearchLength,
-						{minSearchLength}) }}
-				</template>
 			</NcEmptyContent>
 		</template>
 
@@ -161,7 +152,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
-import NcHighlight from '@nextcloud/vue/dist/Components/NcHighlight.js'
 
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 
@@ -183,7 +173,6 @@ export default {
 		NcActions,
 		NcEmptyContent,
 		NcHeaderMenu,
-		NcHighlight,
 		SearchResult,
 		SearchResultPlaceholders,
 	},
@@ -296,6 +285,34 @@ export default {
 			return filters
 		},
 
+		/**
+		 * Valid query empty content title
+		 *
+		 * @return {string}
+		 */
+		validQueryTitle() {
+			return this.triggered
+				? t('core', 'No results for {query}', { query: this.query })
+				: t('core', 'Press enter to start searching')
+		},
+
+		/**
+		 * Short query empty content description
+		 *
+		 * @return {string}
+		 */
+		shortQueryDescription() {
+			if (!this.isShortQuery) {
+				return ''
+			}
+
+			return n('core',
+				'Please enter {minSearchLength} character or more to search',
+				'Please enter {minSearchLength} characters  or more to search',
+				this.minSearchLength,
+				{ minSearchLength: this.minSearchLength })
+		},
+
 		/**
 		 * Is the current search too short
 		 *