From 55546c7dda70366bfe8e13701a66b735a9a329e7 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Thu, 16 Jan 2025 19:45:49 +0100
Subject: [PATCH 1/2] fix(SearchMessagesTab): add items navigation

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../SearchMessages/SearchMessagesTab.vue      |  9 +++-
 src/types/index.ts                            | 44 +++++++++----------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
index 0ab211ae0e2..7856420f334 100644
--- a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
+++ b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
@@ -29,6 +29,7 @@ import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import SearchBox from '../../UIShared/SearchBox.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
+import { useArrowNavigation } from '../../../composables/useArrowNavigation.js'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { useStore } from '../../../composables/useStore.js'
 import { ATTENDEE } from '../../../constants.ts'
@@ -50,7 +51,9 @@ const emit = defineEmits<{
 	(event: 'close'): void
 }>()
 
+const searchMessagesTab = ref<HTMLElement | null>(null)
 const searchBox = ref<InstanceType<typeof SearchBox> | null>(null)
+const { initializeNavigation, resetNavigation } = useArrowNavigation(searchMessagesTab, searchBox)
 const isFocused = ref(false)
 const searchResults = ref<(CoreUnifiedSearchResultEntry &
 {
@@ -173,8 +176,9 @@ async function fetchSearchResults(isNew = true): Promise<void> {
 	isFetchingResults.value = true
 
 	try {
-		// cancel the previous search request
+		// cancel the previous search request and reset the navigation
 		cancelSearchFn()
+		resetNavigation()
 
 		const { request, cancel } = CancelableRequest(searchMessages) as SearchMessageCancelableRequest
 		cancelSearchFn = cancel
@@ -229,6 +233,7 @@ async function fetchSearchResults(isNew = true): Promise<void> {
 				}
 			})
 			)
+			nextTick(() => initializeNavigation())
 		}
 	} catch (exception) {
 		if (CancelableRequest.isCancel(exception)) {
@@ -245,7 +250,7 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
 </script>
 
 <template>
-	<div class="search-messages-tab">
+	<div ref="searchMessagesTab" class="search-messages-tab">
 		<div class="search-form">
 			<div class="search-form__main">
 				<div class="search-form__search-box-wrapper">
diff --git a/src/types/index.ts b/src/types/index.ts
index 1a103503c19..36b78b1558b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -340,37 +340,37 @@ export type setUserSettingsResponse = ApiResponse<operations['settings-set-user-
 
 // Unified Search
 export type MessageSearchResultAttributes = {
-	conversation: string
-	messageId: string
-	actorType: string
-	actorId: string
-	timestamp: string
+	conversation: string,
+	messageId: string,
+	actorType: string,
+	actorId: string,
+	timestamp: string,
 }
 
 export type CoreUnifiedSearchResultEntry = {
-    thumbnailUrl: string;
-    title: string;
-    subline: string;
-    resourceUrl: string;
-    icon: string;
-    rounded: boolean;
-    attributes: MessageSearchResultAttributes;
+	thumbnailUrl: string,
+	title: string,
+	subline: string,
+	resourceUrl: string,
+	icon: string,
+	rounded: boolean,
+	attributes: MessageSearchResultAttributes,
 }
 
 export type UserFilterObject = {
-	id: string
-	displayName: string
-	isNoUser: boolean
-	user: string
-	disableMenu: boolean
-	showUserStatus: boolean
+	id: string,
+	displayName: string,
+	isNoUser: boolean,
+	user: string,
+	disableMenu: boolean,
+	showUserStatus: boolean,
 }
 
 export type CoreUnifiedSearchResult = {
-    name: string;
-    isPaginated: boolean;
-    entries: CoreUnifiedSearchResultEntry[];
-    cursor: number | string | null;
+	name: string,
+	isPaginated: boolean,
+	entries: CoreUnifiedSearchResultEntry[],
+	cursor: number | string | null,
 }
 export type UnifiedSearchResponse = ApiResponseUnwrapped<CoreUnifiedSearchResult>
 

From c24033f923cda6fcdd324558c272b556e74f9ef0 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Thu, 30 Jan 2025 10:28:38 +0100
Subject: [PATCH 2/2] fix(SearchMessagesTab): reset search after removing
 filters

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../SearchMessages/SearchMessagesTab.vue          | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
index 7856420f334..d18f32d53ea 100644
--- a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
+++ b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
@@ -54,6 +54,7 @@ const emit = defineEmits<{
 const searchMessagesTab = ref<HTMLElement | null>(null)
 const searchBox = ref<InstanceType<typeof SearchBox> | null>(null)
 const { initializeNavigation, resetNavigation } = useArrowNavigation(searchMessagesTab, searchBox)
+
 const isFocused = ref(false)
 const searchResults = ref<(CoreUnifiedSearchResultEntry &
 {
@@ -247,6 +248,8 @@ async function fetchSearchResults(isNew = true): Promise<void> {
 }
 
 const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
+
+watch([searchText, fromUser, sinceDate, untilDate], debounceFetchSearchResults)
 </script>
 
 <template>
@@ -257,8 +260,7 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
 					<SearchBox ref="searchBox"
 						:value.sync="searchText"
 						:placeholder-text="t('spreed', 'Search messages …')"
-						:is-focused.sync="isFocused"
-						@input="debounceFetchSearchResults" />
+						:is-focused.sync="isFocused" />
 					<NcButton :pressed.sync="searchDetailsOpened"
 						:aria-label="t('spreed', 'Search options')"
 						:title="t('spreed', 'Search options')"
@@ -276,8 +278,7 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
 							:placeholder="t('spreed', 'From User')"
 							user-select
 							:loading="!participantsInitialised"
-							:options="participants"
-							@update:modelValue="debounceFetchSearchResults" />
+							:options="participants" />
 						<div class="search-form__search-detail__date-picker-wrapper">
 							<NcDateTimePickerNative id="search-form__search-detail__date-picker--since"
 								v-model="sinceDate"
@@ -287,8 +288,7 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
 								:step="1"
 								:max="new Date()"
 								:aria-label="t('spreed', 'Since')"
-								:label="t('spreed', 'Since')"
-								@update:modelValue="debounceFetchSearchResults" />
+								:label="t('spreed', 'Since')" />
 							<NcDateTimePickerNative id="search-form__search-detail__date-picker--until"
 								v-model="untilDate"
 								class="search-form__search-detail__date-picker"
@@ -297,8 +297,7 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
 								:max="new Date()"
 								:aria-label="t('spreed', 'Until')"
 								:label="t('spreed', 'Until')"
-								:minute-step="1"
-								@update:modelValue="debounceFetchSearchResults" />
+								:minute-step="1" />
 						</div>
 					</div>
 				</TransitionWrapper>