feat: Search in a cells conversation (WPB-21649)

app/src/main/kotlin/com/wire/android/ui/common/groupname/GroupConversationNameComponent.kt

@@ -48,7 +48,6 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import com.wire.android.R
 import com.wire.android.ui.common.R as commonR
-import com.wire.android.ui.common.Icon
 import com.wire.android.ui.common.animation.ShakeAnimation
 import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WirePrimaryButton
@@ -170,8 +169,8 @@ fun GroupNameScreen(
                                                 onClick = newGroupNameTextState::clearText,
                                             ) {
                                                 Icon(
-                                                    painter = painterResource(id = R.drawable.ic_clear_search),
-                                                    contentDescription = stringResource(R.string.content_description_clear_content)
+                                                    painter = painterResource(id = commonR.drawable.ic_clear_search),
+                                                    contentDescription = stringResource(commonR.string.content_description_clear_content)
                                                 )
                                             }
                                         }

app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationTopAppBar.kt

@@ -71,6 +71,7 @@ import com.wire.kalium.logic.data.conversation.Conversation
 import com.wire.kalium.logic.data.id.ConversationId
 import com.wire.kalium.logic.data.id.QualifiedID
 import com.wire.kalium.logic.data.user.UserAvailabilityStatus
+import com.wire.android.ui.common.R as commonR
 
 @Composable
 fun ConversationScreenTopAppBar(
@@ -176,7 +177,7 @@ private fun ConversationScreenTopAppBarContent(
                     WireSecondaryIconButton(
                         onButtonClicked = onSearchButtonClick,
                         iconResource = R.drawable.ic_search,
-                        contentDescription = R.string.content_description_conversation_search_icon,
+                        contentDescription = commonR.string.content_description_conversation_search_icon,
                         minSize = dimensions().buttonSmallMinSize,
                         minClickableSize = DpSize(
                             dimensions().buttonSmallMinSize.width,

app/src/main/kotlin/com/wire/android/ui/home/conversations/search/SearchUsersAndAppsScreen.kt

@@ -143,6 +143,7 @@ fun SearchUsersAndAppsScreen(
             SearchTopBar(
                 isSearchActive = searchBarState.isSearchActive,
                 searchBarHint = searchBarTitle,
+                backIconContentDescription = stringResource(id = R.string.content_description_add_participants_back_btn),
                 searchBarDescription = stringResource(R.string.content_description_add_participants_search_field),
                 searchQueryTextState = searchBarState.searchQueryTextState,
                 onActiveChanged = searchBarState::searchActiveChanged,

app/src/main/res/values/strings.xml

@@ -93,7 +93,6 @@
     <string name="content_description_reveal_password">Show password</string>
     <string name="content_description_hide_password">Hide password</string>
     <string name="content_description_search_back">Search back icon</string>
-    <string name="content_description_clear_content">Clear content</string>
     <string name="content_description_muted_conversation">Muted conversation</string>
     <string name="content_description_check">Check mark</string>
     <string name="content_description_download_icon">Download icon</string>
@@ -108,8 +107,6 @@
     <string name="content_description_delete_the_conversation">Delete the conversation</string>
     <string name="content_description_conversation_phone_icon">Start audio call</string>
     <string name="content_description_welcome_wire_logo">Wire</string>
-    <string name="content_description_conversation_search_icon">Search icon</string>
-    <string name="content_description_conversation_search_input">Search input</string>
     <string name="content_description_conversation_enable_rich_text_mode">Enable rich text mode button</string>
     <string name="content_description_conversation_enable_drawing_mode">Enable drawing mode button</string>
     <string name="content_description_conversation_rich_text_header">Rich text formatting Header</string>

app/src/main/kotlin/com/wire/android/ui/common/SearchBar.kt → core/ui-common/src/main/kotlin/com/wire/android/ui/common/SearchBar.kt

@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2024 Wire Swiss GmbH
+ * Copyright (C) 2025 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -42,12 +42,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.sp
-import com.wire.android.R
 import com.wire.android.ui.common.progress.WireCircularProgressIndicator
 import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
-import com.wire.android.util.ui.PreviewMultipleThemes
+import com.wire.android.util.PreviewMultipleThemes
 
 @Composable
 fun SearchBarInput(

app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt → core/ui-common/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt

@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2024 Wire Swiss GmbH
+ * Copyright (C) 2025 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -52,20 +52,19 @@ import androidx.compose.ui.focus.onFocusEvent
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import com.wire.android.R
-import com.wire.android.ui.common.R as commonR
+import com.wire.android.ui.common.R
 import com.wire.android.ui.common.SearchBarInput
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
-import com.wire.android.util.ui.PreviewMultipleThemes
+import com.wire.android.util.PreviewMultipleThemes
 
 @Composable
 fun SearchTopBar(
     isSearchActive: Boolean,
     searchBarHint: String,
+    backIconContentDescription: String? = null,
     searchQueryTextState: TextFieldState,
     modifier: Modifier = Modifier,
     isLoading: Boolean = false,
@@ -128,8 +127,8 @@ fun SearchTopBar(
                             modifier = Modifier.size(dimensions().buttonCircleMinSize)
                         ) {
                             Icon(
-                                painter = painterResource(commonR.drawable.ic_arrow_back),
-                                contentDescription = stringResource(id = R.string.content_description_add_participants_back_btn),
+                                painter = painterResource(R.drawable.ic_arrow_back),
+                                contentDescription = backIconContentDescription,
                                 tint = MaterialTheme.wireColorScheme.onBackground,
                             )
                         }

core/ui-common/src/main/res/values/strings.xml

@@ -64,4 +64,9 @@
     <string name="size_unit_megabytes">MB</string>
     <string name="size_unit_gigabytes">GB</string>
     <string name="size_unit_terabytes">TB</string>
+
+    <string name="content_description_conversation_search_icon">Search icon</string>
+    <string name="content_description_conversation_search_input">Search input</string>
+    <string name="content_description_clear_content">Clear content</string>
+
 </resources>

default.json

@@ -71,7 +71,8 @@
             "analytics_app_key": "8ffae535f1836ed5f58fd5c8a11c00eca07c5438",
             "analytics_server_url": "https://wire.count.ly/",
             "enable_new_registration": true,
-            "use_async_flush_logging": true
+            "use_async_flush_logging": true,
+            "collabora_integration": true
         },
         "internal": {
             "application_id": "com.wire.internal",

features/cells/src/main/java/com/wire/android/feature/cells/ui/ConversationFilesScreen.kt

@@ -17,10 +17,16 @@
  */
 package com.wire.android.feature.cells.ui
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -63,16 +69,20 @@ import com.wire.android.navigation.PreviewNavigator
 import com.wire.android.navigation.WireNavigator
 import com.wire.android.navigation.annotation.features.cells.WireDestination
 import com.wire.android.navigation.style.PopUpNavigationAnimation
+import com.wire.android.ui.common.CollapsingTopBarScaffold
 import com.wire.android.ui.common.MoreOptionIcon
 import com.wire.android.ui.common.bottomsheet.rememberWireModalSheetState
 import com.wire.android.ui.common.bottomsheet.show
 import com.wire.android.ui.common.button.FloatingActionButton
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.common.preview.MultipleThemePreviews
-import com.wire.android.ui.common.scaffold.WireScaffold
+import com.wire.android.ui.common.search.SearchBarState
+import com.wire.android.ui.common.search.rememberSearchbarState
 import com.wire.android.ui.common.topappbar.NavigationIconType
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
+import com.wire.android.ui.common.topappbar.search.SearchTopBar
 import com.wire.android.ui.theme.WireTheme
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -93,15 +103,29 @@ fun ConversationFilesScreen(
     navigator: WireNavigator,
     viewModel: CellViewModel = hiltViewModel(),
 ) {
+    val conversationSearchBarState = rememberSearchbarState()
+
+    LaunchedEffect(conversationSearchBarState.searchQueryTextState.text) {
+        if (conversationSearchBarState.searchQueryTextState.text.isNotEmpty()) {
+            delay(300)
+        }
+        viewModel.onSearchQueryUpdated(conversationSearchBarState.searchQueryTextState.text.toString())
+    }
+
+    BackHandler(conversationSearchBarState.isSearchActive) {
+        conversationSearchBarState.closeSearch()
+    }
 
     ConversationFilesScreenContent(
         navigator = navigator,
         currentNodeUuid = viewModel.currentNodeUuid(),
+        conversationSearchBarState = conversationSearchBarState,
         isRecycleBin = viewModel.isRecycleBin(),
         actions = viewModel.actions,
         pagingListItems = viewModel.nodesFlow.collectAsLazyPagingItems(),
         downloadFileSheet = viewModel.downloadFileSheet,
         menu = viewModel.menu,
+        isSearchResult = viewModel.hasSearchQuery(),
         isRestoreInProgress = viewModel.isRestoreInProgress.collectAsState().value,
         isDeleteInProgress = viewModel.isDeleteInProgress.collectAsState().value,
         isRefreshing = viewModel.isPullToRefresh.collectAsState(),
@@ -120,6 +144,8 @@ fun ConversationFilesScreen(
 fun ConversationFilesScreenContent(
     navigator: WireNavigator,
     currentNodeUuid: String?,
+    conversationSearchBarState: SearchBarState,
+    isSearchResult: Boolean,
     actions: Flow<CellViewAction>,
     pagingListItems: LazyPagingItems<CellNodeUi>,
     downloadFileSheet: StateFlow<CellNodeUi.File?>,
@@ -176,37 +202,57 @@ fun ConversationFilesScreenContent(
         }
     )
 
-    WireScaffold(
+    CollapsingTopBarScaffold(
         modifier = modifier,
-        snackbarHost = {},
-        topBar = {
-            Column {
-                WireCenterAlignedTopAppBar(
-                    onNavigationPressed = { navigator.navigateBack() },
-                    title = screenTitle ?: stringResource(R.string.conversation_files_title),
-                    navigationIconType = NavigationIconType.Back(),
-                    elevation = dimensions().spacing0x,
-                    actions = {
-                        if (!isRecycleBin) {
-                            MoreOptionIcon(
-                                contentDescription = R.string.content_description_conversation_files_more_button,
-                                onButtonClicked = { optionsBottomSheetState.show() }
-                            )
+        topBarHeader = {
+            AnimatedVisibility(
+                modifier = Modifier.background(MaterialTheme.colorScheme.background),
+                visible = !conversationSearchBarState.isSearchActive,
+                enter = fadeIn() + expandVertically(),
+                exit = shrinkVertically() + fadeOut(),
+            ) {
+                Column {
+                    WireCenterAlignedTopAppBar(
+                        onNavigationPressed = { navigator.navigateBack() },
+                        title = screenTitle ?: stringResource(R.string.conversation_files_title),
+                        navigationIconType = NavigationIconType.Back(),
+                        elevation = dimensions().spacing0x,
+                        actions = {
+                            if (!isRecycleBin) {
+                                MoreOptionIcon(
+                                    contentDescription = R.string.content_description_conversation_files_more_button,
+                                    onButtonClicked = { optionsBottomSheetState.show() }
+                                )
+                            }
                         }
-                    }
-                )
-                breadcrumbs?.let {
-                    Breadcrumbs(
-                        modifier = Modifier
-                            .height(dimensions().spacing40x)
-                            .fillMaxWidth(),
-                        isRecycleBin = isRecycleBin,
-                        pathSegments = it,
-                        onBreadcrumbsFolderClick = onBreadcrumbsFolderClick
                     )
+                    breadcrumbs?.let {
+                        Breadcrumbs(
+                            modifier = Modifier
+                                .height(dimensions().spacing32x)
+                                .fillMaxWidth(),
+                            isRecycleBin = isRecycleBin,
+                            pathSegments = it,
+                            onBreadcrumbsFolderClick = onBreadcrumbsFolderClick
+                        )
+                    }
                 }
             }
         },
+        topBarCollapsing = {
+            AnimatedVisibility(
+                visible = conversationSearchBarState.isSearchVisible,
+                enter = fadeIn() + slideInVertically(),
+                exit = fadeOut() + slideOutVertically()
+            ) {
+                SearchTopBar(
+                    isSearchActive = conversationSearchBarState.isSearchActive,
+                    searchBarHint = stringResource(R.string.search_text_input_hint_for_files_folders_in_conversation),
+                    searchQueryTextState = conversationSearchBarState.searchQueryTextState,
+                    onActiveChanged = conversationSearchBarState::searchActiveChanged,
+                )
+            }
+        },
         floatingActionButton = {
             if (isFabVisible) {
                 AnimatedVisibility(
@@ -234,15 +280,16 @@ fun ConversationFilesScreenContent(
                     )
                 }
             }
-        }
-    ) { innerPadding ->
-        Box(modifier = Modifier.padding(innerPadding)) {
+        },
+    ) {
+        Box {
             CellScreenContent(
                 actionsFlow = actions,
                 pagingListItems = pagingListItems,
                 sendIntent = sendIntent,
                 downloadFileState = downloadFileSheet,
                 menuState = menu,
+                isSearchResult = isSearchResult,
                 isAllFiles = false,
                 isRestoreInProgress = isRestoreInProgress,
                 isDeleteInProgress = isDeleteInProgress,
@@ -322,6 +369,8 @@ fun PreviewConversationFilesScreen() {
         ConversationFilesScreenContent(
             navigator = PreviewNavigator,
             currentNodeUuid = "conversationId",
+            conversationSearchBarState = rememberSearchbarState(),
+            isSearchResult = false,
             actions = flowOf(),
             pagingListItems = MutableStateFlow(
                 PagingData.from(

features/cells/src/main/java/com/wire/android/feature/cells/ui/ConversationFilesWithSlideInTransitionScreen.kt

@@ -17,6 +17,7 @@
  */
 package com.wire.android.feature.cells.ui
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -31,6 +32,8 @@ import com.wire.android.navigation.NavigationCommand
 import com.wire.android.navigation.WireNavigator
 import com.wire.android.navigation.annotation.features.cells.WireDestination
 import com.wire.android.navigation.style.SlideNavigationAnimation
+import com.wire.android.ui.common.search.rememberSearchbarState
+import kotlinx.coroutines.delay
 
 @WireDestination(
     style = SlideNavigationAnimation::class,
@@ -42,6 +45,18 @@ fun ConversationFilesWithSlideInTransitionScreen(
     cellFilesNavArgs: CellFilesNavArgs,
     viewModel: CellViewModel = hiltViewModel(),
 ) {
+    val conversationSearchBarState = rememberSearchbarState()
+
+    LaunchedEffect(conversationSearchBarState.searchQueryTextState.text) {
+        if (conversationSearchBarState.searchQueryTextState.text.isNotEmpty()) {
+            delay(300)
+        }
+        viewModel.onSearchQueryUpdated(conversationSearchBarState.searchQueryTextState.text.toString())
+    }
+
+    BackHandler(conversationSearchBarState.isSearchActive) {
+        conversationSearchBarState.closeSearch()
+    }
 
     LaunchedEffect(viewModel.navigateToRecycleBinRoot.collectAsState().value) {
         if (viewModel.navigateToRecycleBinRoot.value) {
@@ -60,6 +75,8 @@ fun ConversationFilesWithSlideInTransitionScreen(
     ConversationFilesScreenContent(
         navigator = navigator,
         currentNodeUuid = viewModel.currentNodeUuid(),
+        conversationSearchBarState = conversationSearchBarState,
+        isSearchResult = false,
         screenTitle = stringResource(R.string.conversation_files_title),
         isRecycleBin = viewModel.isRecycleBin(),
         actions = viewModel.actions,

features/cells/src/main/res/values/strings.xml

@@ -176,4 +176,5 @@
     <string name="version_history_top_appbar_title">Version history</string>
     <string name="date_label_today">Today, %1$s</string>
     <string name="date_label_yesterday">Yesterday, %1$s</string>
+    <string name="search_text_input_hint_for_files_folders_in_conversation">Search files or folders</string>
 </resources>