Search file manager (#967)

**Background**

This PR add functional search into new file manager sample

**Changes**

- Add search into file manager
- Fix internal visibility for ComposableSearchBar

**Test plan**

- Open some folder with sample
- Try press search button
- See search elements with cool animations

CHANGELOG.md

@@ -22,6 +22,7 @@ Attention: don't forget to add the flag for F-Droid before release
 - [Feature] New File Manager listing and uploading
 - [Feature] Add vibration off switch
 - [Feature] New File Manager listing and uploading
+- [Feature] New File Manager search
 - [Refactor] Load RemoteControls from flipper, emulating animation
 - [Refactor] Update to Kotlin 2.0
 - [Refactor] Replace Ktorfit with Ktor requests in remote-controls

components/bridge/connection/sample/build.gradle.kts

@@ -82,6 +82,8 @@ dependencies {
  implementation(projects.components.filemngr.listing.impl)
  implementation(projects.components.filemngr.upload.api)
  implementation(projects.components.filemngr.upload.impl)
+ implementation(projects.components.filemngr.search.api)
+ implementation(projects.components.filemngr.search.impl)
 
  implementation(projects.components.newfilemanager.api)
  implementation(projects.components.newfilemanager.impl)

components/core/ktx/src/commonMain/kotlin/com/flipperdevices/core/ktx/jre/DelayFlowKtx.kt

@@ -0,0 +1,19 @@
+package com.flipperdevices.core.ktx.jre
+
+import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.debounce
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.withIndex
+import kotlin.time.Duration
+
+@OptIn(FlowPreview::class)
+fun <T> Flow<T>.debounceAfterFirst(timeout: Duration): Flow<T> {
+ return withIndex().debounce {
+ if (it.index == 0) {
+ 0L
+ } else {
+ timeout.inWholeMilliseconds
+ }
+ }.map { it.value }
+}

components/core/ui/searchbar/src/commonMain/kotlin/com/flipperdevices/core/ui/searchbar/ComposableSearchBar.kt

@@ -29,7 +29,7 @@ fun ComposableSearchBar(
  onBack: () -> Unit
 ) {
  var text by remember { mutableStateOf("") }
- ComposableSearchBarInternal(
+ ComposableSearchBar(
  hint = hint,
  text = text,
  onChangeText = {
@@ -41,14 +41,16 @@ fun ComposableSearchBar(
 }
 
 @Composable
-private fun ComposableSearchBarInternal(
+fun ComposableSearchBar(
  hint: String,
  text: String,
  onChangeText: (String) -> Unit,
- onBack: () -> Unit
+ onBack: () -> Unit,
+ modifier: Modifier = Modifier
 ) {
  Row(
- modifier = Modifier.background(LocalPallet.current.background)
+ modifier = modifier
+ .background(LocalPallet.current.background)
  .statusBarsPadding(),
  verticalAlignment = Alignment.CenterVertically
  ) {

components/filemngr/listing/api/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/api/FilesDecomposeComponent.kt

@@ -9,12 +9,22 @@ abstract class FilesDecomposeComponent(
  componentContext: ComponentContext
 ) : ScreenDecomposeComponent(componentContext) {
  fun interface Factory {
+ @Suppress("LongParameterList")
  operator fun invoke(
  componentContext: ComponentContext,
  onBack: DecomposeOnBackParameter,
  path: Path,
  onPathChanged: (Path) -> Unit,
- onUploadClick: () -> Unit
+ searchCallback: SearchCallback,
+ uploadCallback: UploadCallback
  ): FilesDecomposeComponent
  }
+
+ fun interface SearchCallback {
+ fun invoke()
+ }
+
+ fun interface UploadCallback {
+ fun invoke()
+ }
 }

components/filemngr/listing/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/impl/api/FilesDecomposeComponentImpl.kt

@@ -36,7 +36,8 @@ class FilesDecomposeComponentImpl @AssistedInject constructor(
  @Assisted private val path: Path,
  @Assisted private val onBack: DecomposeOnBackParameter,
  @Assisted private val onPathChanged: (Path) -> Unit,
- @Assisted private val onUploadClick: () -> Unit,
+ @Assisted private val searchCallback: SearchCallback,
+ @Assisted private val uploadCallback: UploadCallback,
  private val storageInfoViewModelFactory: Provider<StorageInfoViewModel>,
  private val optionsInfoViewModelFactory: Provider<OptionsViewModel>,
  private val editFileViewModelFactory: Provider<EditFileViewModel>,
@@ -114,9 +115,10 @@ class FilesDecomposeComponentImpl @AssistedInject constructor(
  storageInfoViewModel = storageInfoViewModel,
  selectionViewModel = selectionViewModel,
  onBack = onBack::invoke,
- onUploadClick = onUploadClick,
+ onUploadClick = uploadCallback::invoke,
  onPathChange = onPathChanged,
- onFileMoreClick = slotNavigation::activate
+ onFileMoreClick = slotNavigation::activate,
+ onSearchClick = searchCallback::invoke
  )
  FileOptionsBottomSheet(
  fileOptionsSlot = fileOptionsSlot,

components/filemngr/listing/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/impl/composable/ComposableFileListScreen.kt

@@ -38,6 +38,7 @@ fun ComposableFileListScreen(
  selectionViewModel: SelectionViewModel,
  onBack: () -> Unit,
  onUploadClick: () -> Unit,
+ onSearchClick: () -> Unit,
  onPathChange: (Path) -> Unit,
  onFileMoreClick: (PathWithType) -> Unit,
  modifier: Modifier = Modifier
@@ -61,7 +62,8 @@ fun ComposableFileListScreen(
  canCreateFiles = canCreateFiles,
  onUploadClick = onUploadClick,
  editFileViewModel = editFileViewModel,
- onBack = onBack
+ onBack = onBack,
+ onSearchClick = onSearchClick
  )
  }
  ) { contentPadding ->

components/filemngr/listing/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/impl/composable/LoadedFilesComposable.kt

@@ -1,6 +1,7 @@
 package com.flipperdevices.filemanager.listing.impl.composable
 
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.foundation.lazy.grid.items
@@ -44,7 +45,8 @@ fun LazyGridScope.LoadedFilesComposable(
  FolderCardPlaceholderComposable(
  modifier = Modifier
  .fillMaxWidth()
- .animateItemPlacement(),
+ .animateItem()
+ .animateContentSize(),
  orientation = orientation,
  )
  } else {
@@ -55,7 +57,8 @@ fun LazyGridScope.LoadedFilesComposable(
  FolderCardComposable(
  modifier = Modifier
  .fillMaxWidth()
- .animateItemPlacement(),
+ .animateItem()
+ .animateContentSize(),
  painter = file.asPainter(),
  iconTint = file.asTint(),
  title = file.fileName,

components/filemngr/listing/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/impl/composable/appbar/FileListAppBar.kt

@@ -7,11 +7,20 @@ import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import com.flipperdevices.bridge.connection.feature.storage.api.model.FileType
 import com.flipperdevices.core.ui.ktx.OrangeAppBar
+import com.flipperdevices.core.ui.ktx.clickableRipple
 import com.flipperdevices.core.ui.theme.LocalPalletV2
 import com.flipperdevices.filemanager.listing.impl.R
 import com.flipperdevices.filemanager.listing.impl.composable.MoreIconComposable
@@ -21,7 +30,9 @@ import com.flipperdevices.filemanager.listing.impl.viewmodel.FilesViewModel
 import com.flipperdevices.filemanager.listing.impl.viewmodel.OptionsViewModel
 import com.flipperdevices.filemanager.listing.impl.viewmodel.SelectionViewModel
 import okio.Path
+import com.flipperdevices.core.ui.res.R as DesignSystem
 
+@Suppress("LongMethod")
 @Composable
 fun FileListAppBar(
  selectionState: SelectionViewModel.State,
@@ -32,13 +43,13 @@ fun FileListAppBar(
  optionsViewModel: OptionsViewModel,
  canCreateFiles: Boolean,
  onUploadClick: () -> Unit,
+ onSearchClick: () -> Unit,
  editFileViewModel: EditFileViewModel,
  onBack: () -> Unit,
  modifier: Modifier = Modifier
 ) {
  AnimatedContent(
- modifier = modifier
- .background(LocalPalletV2.current.surface.navBar.body.accentBrand),
+ modifier = modifier.background(LocalPalletV2.current.surface.navBar.body.accentBrand),
  targetState = selectionState.isEnabled,
  contentKey = { it },
  transitionSpec = {
@@ -49,39 +60,51 @@ fun FileListAppBar(
  ) { isSelectionEnabled ->
  if (isSelectionEnabled) {
  CloseSelectionAppBar(
+ onDeselectAll = selectionViewModel::deselectAll,
  onClose = selectionViewModel::toggleMode,
  onSelectAll = {
  val paths = (filesListState as? FilesViewModel.State.Loaded)
  ?.files
  .orEmpty()
  .map {
- val fullPath = path.resolve(it.fileName)
  PathWithType(
  fileType = it.fileType ?: FileType.FILE,
- fullPath = fullPath
+ fullPath = path.resolve(it.fileName)
  )
  }
  selectionViewModel.select(paths)
  },
- onDeselectAll = selectionViewModel::deselectAll
  )
  } else {
  OrangeAppBar(
  title = stringResource(R.string.fml_appbar_title),
  endBlock = {
- MoreIconComposable(
- optionsState = optionsState,
- onAction = optionsViewModel::onAction,
- canCreateFiles = canCreateFiles,
- onUploadClick = onUploadClick,
- onSelectClick = selectionViewModel::toggleMode,
- onCreateFolderClick = {
- editFileViewModel.onCreate(path, FileType.DIR)
- },
- onCreateFileClick = {
- editFileViewModel.onCreate(path, FileType.FILE)
- }
- )
+ Row(
+ horizontalArrangement = Arrangement.spacedBy(12.dp),
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ Icon(
+ modifier = Modifier
+ .size(24.dp)
+ .clickableRipple(onClick = onSearchClick),
+ painter = painterResource(DesignSystem.drawable.ic_search),
+ contentDescription = null,
+ tint = Color.Unspecified
+ )
+ MoreIconComposable(
+ optionsState = optionsState,
+ onAction = optionsViewModel::onAction,
+ canCreateFiles = canCreateFiles,
+ onUploadClick = onUploadClick,
+ onSelectClick = selectionViewModel::toggleMode,
+ onCreateFolderClick = {
+ editFileViewModel.onCreate(path, FileType.DIR)
+ },
+ onCreateFileClick = {
+ editFileViewModel.onCreate(path, FileType.FILE)
+ }
+ )
+ }
  },
  onBack = onBack::invoke,
  )

components/filemngr/listing/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/listing/impl/composable/options/BottomBarOptions.kt

@@ -38,7 +38,7 @@ import com.flipperdevices.filemanager.listing.impl.R as FML
 import com.flipperdevices.filemanager.ui.components.R as FR
 
 @Composable
-private fun MoreBototmBarOptions(
+private fun MoreBottomBarOptions(
  onCopyTo: () -> Unit,
  canRename: Boolean,
  onRename: () -> Unit,
@@ -115,7 +115,7 @@ fun BottomBarOptions(
  painter = painterResource(FR.drawable.ic_upload),
  onClick = onExport
  )
- MoreBototmBarOptions(
+ MoreBottomBarOptions(
  onCopyTo = onCopyTo,
  canRename = canRename,
  onRename = onRename,

components/filemngr/main/impl/build.gradle.kts

@@ -24,9 +24,10 @@ androidDependencies {
 
  implementation(projects.components.filemngr.uiComponents)
  implementation(projects.components.filemngr.main.api)
- implementation(projects.components.newfilemanager.api)
  implementation(projects.components.filemngr.listing.api)
  implementation(projects.components.filemngr.upload.api)
+ implementation(projects.components.filemngr.search.api)
+ implementation(projects.components.newfilemanager.api)
 
  // Compose
  implementation(libs.compose.ui)

components/filemngr/main/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/main/impl/api/FileManagerDecomposeComponentImpl.kt

@@ -4,11 +4,13 @@ import com.arkivanov.decompose.ComponentContext
 import com.arkivanov.decompose.router.stack.childStack
 import com.arkivanov.decompose.router.stack.pop
 import com.arkivanov.decompose.router.stack.pushNew
+import com.arkivanov.decompose.router.stack.replaceAll
 import com.arkivanov.decompose.router.stack.replaceCurrent
 import com.flipperdevices.core.di.AppGraph
 import com.flipperdevices.filemanager.listing.api.FilesDecomposeComponent
 import com.flipperdevices.filemanager.main.api.FileManagerDecomposeComponent
 import com.flipperdevices.filemanager.main.impl.model.FileManagerNavigationConfig
+import com.flipperdevices.filemanager.search.api.SearchDecomposeComponent
 import com.flipperdevices.filemanager.upload.api.UploadDecomposeComponent
 import com.flipperdevices.ui.decompose.DecomposeComponent
 import com.flipperdevices.ui.decompose.DecomposeOnBackParameter
@@ -24,6 +26,7 @@ class FileManagerDecomposeComponentImpl @AssistedInject constructor(
  @Assisted private val onBack: DecomposeOnBackParameter,
  private val filesDecomposeComponentFactory: FilesDecomposeComponent.Factory,
  private val uploadDecomposeComponentFactory: UploadDecomposeComponent.Factory,
+ private val searchDecomposeComponentFactory: SearchDecomposeComponent.Factory,
 ) : FileManagerDecomposeComponent<FileManagerNavigationConfig>(),
  ComponentContext by componentContext {
 
@@ -45,7 +48,8 @@ class FileManagerDecomposeComponentImpl @AssistedInject constructor(
  path = config.path,
  onBack = { navigation.popOr(onBack::invoke) },
  onPathChanged = { navigation.replaceCurrent(FileManagerNavigationConfig.FileTree(it)) },
- onUploadClick = { navigation.pushNew(FileManagerNavigationConfig.Upload(config.path)) }
+ uploadCallback = { navigation.pushNew(FileManagerNavigationConfig.Upload(config.path)) },
+ searchCallback = { navigation.pushNew(FileManagerNavigationConfig.Search(config.path)) },
  )
  }
 
@@ -56,5 +60,14 @@ class FileManagerDecomposeComponentImpl @AssistedInject constructor(
  onFinish = navigation::pop
  )
  }
+
+ is FileManagerNavigationConfig.Search -> {
+ searchDecomposeComponentFactory.invoke(
+ componentContext = componentContext,
+ path = config.path,
+ onBack = navigation::pop,
+ onFolderSelect = { navigation.replaceAll(FileManagerNavigationConfig.FileTree(it)) }
+ )
+ }
  }
 }

components/filemngr/main/impl/src/androidMain/kotlin/com/flipperdevices/filemanager/main/impl/model/FileManagerNavigationConfig.kt

@@ -21,6 +21,12 @@ sealed interface FileManagerNavigationConfig {
  val path: Path
  ) : FileManagerNavigationConfig
 
+ @Serializable
+ data class Search(
+ @Serializable(with = PathSerializer::class)
+ val path: Path
+ ) : FileManagerNavigationConfig
+
  companion object {
  val DefaultFileTree: FileTree
  get() = FileTree("/".toPath())

components/filemngr/search/api/build.gradle.kts

@@ -0,0 +1,15 @@
+plugins {
+ id("flipper.multiplatform")
+ id("flipper.multiplatform-dependencies")
+}
+
+android.namespace = "com.flipperdevices.filemanager.search.api"
+
+commonDependencies {
+ implementation(projects.components.core.ui.decompose)
+
+ implementation(libs.compose.ui)
+ implementation(libs.decompose)
+
+ implementation(libs.okio)
+}