Merge pull request #14193 from nextcloud/backport/14173/stable31

[stable31] fix: focus issue and minor enhancements
nextcloud · Jan 23, 2025 · 697afe1 · 697afe1
2 parents adf9c39 + 772b837
commit 697afe1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -286,7 +286,7 @@
 
 		<template #footer>
 			<div class="left-sidebar__settings-button-container">
-				<template v-if="supportsArchive">
+				<template v-if="!isSearching && supportsArchive">
 					<NcButton v-if="showArchived"
 						type="tertiary"
 						wide
@@ -558,7 +558,7 @@ export default {
 
 		filteredConversationsList() {
 			if (this.isFocused) {
-				return this.conversationsList
+				return this.conversationsList.filter((conversation) => shouldIncludeArchived(conversation, this.showArchived))
 			}
 
 			let validConversationsCount = 0

diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
@@ -24,7 +24,7 @@
 		<template v-if="!showSearchMessagesTab && getUserId" #secondary-actions>
 			<NcActionButton type="tertiary"
 				:title="t('spreed', 'Search messages')"
-				@click="showSearchMessagesTab = true">
+				@click="handleShowSearch(true)">
 				<template #icon>
 					<IconMagnify :size="20" />
 				</template>
@@ -33,7 +33,7 @@
 		<template v-else-if="getUserId" #tertiary-actions>
 			<NcButton type="tertiary"
 				:title="t('spreed', 'Back')"
-				@click="showSearchMessagesTab = false">
+				@click="handleShowSearch(false)">
 				<template #icon>
 					<IconArrowLeft class="bidirectional-icon" :size="20" />
 				</template>
@@ -48,7 +48,8 @@
 			key="search-messages"
 			:order="0"
 			:name="t('spreed', 'Search messages')">
-			<SearchMessagesTab @close="showSearchMessagesTab = false" />
+			<SearchMessagesTab :is-active="activeTab === 'search-messages'"
+				@close="handleShowSearch(false)" />
 		</NcAppSidebarTab>
 		<template v-else>
 			<NcAppSidebarTab v-if="isInCall"
@@ -463,6 +464,16 @@ export default {
 			this.activeTab = active
 		},
 
+		handleShowSearch(value) {
+			this.showSearchMessagesTab = value
+			// FIXME upstream: NcAppSidebar should emit update:active
+			if (value) {
+				this.activeTab = 'search-messages'
+			} else {
+				this.activeTab = this.isInCall ? 'chat' : 'participants'
+			}
+		},
+
 		showSettings() {
 			emit('show-settings', {})
 		},

diff --git a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import debounce from 'debounce'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { Route } from 'vue-router'
 
 import IconCalendarRange from 'vue-material-design-icons/CalendarRange.vue'
@@ -42,6 +42,9 @@ import {
 } from '../../../types/index.ts'
 import CancelableRequest from '../../../utils/cancelableRequest.js'
 
+const props = defineProps<{
+	isActive: boolean,
+}>()
 const emit = defineEmits<{
 	(event: 'close'): void
 }>()
@@ -89,6 +92,13 @@ const participants = computed<UserFilterObject>(() => {
 const canLoadMore = computed(() => !isSearchExhausted.value && !isFetchingResults.value && searchCursor.value !== 0)
 const hasFilter = computed(() => fromUser.value || sinceDate.value || untilDate.value)
 
+watch(() => props.isActive, (isActive) => {
+	if (isActive) {
+		// NcAppSidebarTabs renders tabs in 2 ticks, so need to wait here
+		nextTick(() => searchBox.value!.focus())
+	}
+}, { immediate: true })
+
 onMounted(() => {
 	EventBus.on('route-change', onRouteChange)
 })