feature: konfeature screen items animation

Author: EmogurovAnton

plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/AnimatedFilterItem.kt

@@ -0,0 +1,32 @@
+package com.redmadrobot.debug.plugin.konfeature.ui
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.lazy.LazyItemScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+private const val ENTER_DURATION_MILLIS = 220
+private const val EXIT_DURATION_MILLIS = 180
+
+@Composable
+internal fun LazyItemScope.AnimatedFilterItem(
+    visible: Boolean,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(animationSpec = tween(durationMillis = ENTER_DURATION_MILLIS)) +
+            expandVertically(animationSpec = tween(durationMillis = ENTER_DURATION_MILLIS)),
+        exit = fadeOut(animationSpec = tween(durationMillis = EXIT_DURATION_MILLIS)) +
+            shrinkVertically(animationSpec = tween(durationMillis = EXIT_DURATION_MILLIS)),
+        modifier = modifier.animateItem(),
+    ) {
+        content()
+    }
+}

plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/KonfeatureScreen.kt

@@ -126,31 +126,30 @@ private fun LazyListScope.konfeatureItems(
     onBooleanToggle: (String, Boolean) -> Unit,
 ) {
     items(
-        items = state.filteredItems,
-        key = { item ->
-            when (item) {
-                is KonfeatureItem.Config -> "config_${item.name}"
-                is KonfeatureItem.Value -> "value_${item.key}"
-            }
-        },
+        items = state.items,
+        key = { item -> item.itemKey },
     ) { item ->
+        val isMatchingFilter = item.itemKey in state.matchingKeys
+
         when (item) {
             is KonfeatureItem.Config -> {
                 val isCollapsed = !state.isSearchActive && item.name in state.collapsedConfigs
                 val overrideCount = state.values.count { value ->
                     value.configName == item.name && value.isDebugSource
                 }
-                ConfigGroupHeader(
-                    name = item.description.takeIf { it.isNotEmpty() } ?: item.name,
-                    overrideCount = overrideCount,
-                    isCollapsed = isCollapsed,
-                    onClick = { onHeaderClick(item.name) },
-                )
+                AnimatedFilterItem(visible = isMatchingFilter) {
+                    ConfigGroupHeader(
+                        name = item.description.takeIf { it.isNotEmpty() } ?: item.name,
+                        overrideCount = overrideCount,
+                        isCollapsed = isCollapsed,
+                        onClick = { onHeaderClick(item.name) },
+                    )
+                }
             }
 
             is KonfeatureItem.Value -> {
-                val isVisible = state.isSearchActive || item.configName !in state.collapsedConfigs
-                if (isVisible) {
+                val isVisible = isMatchingFilter && (state.isSearchActive || item.configName !in state.collapsedConfigs)
+                AnimatedFilterItem(visible = isVisible) {
                     ConfigValueItem(
                         item = item,
                         onEditClick = onEditClick,

plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/KonfeatureViewModel.kt

@@ -101,7 +101,7 @@ internal class KonfeatureViewModel(
             .debounce(timeoutMillis = SEARCH_QUERY_DELAY_MILLIS)
             .onEach { query ->
                 _state.update { state ->
-                    state.copy(filteredItems = filterItems(state.configs, state.values, query))
+                    state.copy(matchingKeys = computeMatchingKeys(state.values, query))
                 }
             }
             .launchIn(viewModelScope)
@@ -110,10 +110,32 @@ internal class KonfeatureViewModel(
     private suspend fun updateItems() {
         val (configs, values) = withContext(Dispatchers.IO) { getItems(konfeature) }
         val searchQuery = _searchQueryFlow.value
-        val filteredItems = filterItems(configs, values, searchQuery)
+        val items = buildItems(configs, values)
+        val matchingKeys = computeMatchingKeys(values, searchQuery)
 
         _state.update { state ->
-            state.copy(configs = configs, values = values, filteredItems = filteredItems)
+            state.copy(
+                configs = configs,
+                values = values,
+                items = items,
+                matchingKeys = matchingKeys,
+            )
+        }
+    }
+
+    private fun buildItems(
+        configs: Map<String, KonfeatureItem.Config>,
+        values: List<KonfeatureItem.Value>,
+    ): List<KonfeatureItem> {
+        return buildList {
+            var previousValue: KonfeatureItem.Value? = null
+            for (value in values) {
+                if (previousValue?.configName != value.configName) {
+                    configs[value.configName]?.let { config -> add(config) }
+                }
+                add(value)
+                previousValue = value
+            }
         }
     }
 
@@ -181,25 +203,23 @@ internal class KonfeatureViewModel(
         }
     }
 
-    private suspend fun filterItems(
-        configs: Map<String, KonfeatureItem.Config>,
+    private suspend fun computeMatchingKeys(
         values: List<KonfeatureItem.Value>,
-        query: String
-    ): List<KonfeatureItem> {
+        query: String,
+    ): Set<String> {
         return withContext(Dispatchers.Default) {
-            buildList {
-                var previousValue: KonfeatureItem.Value? = null
-
-                for (value in values) {
-                    if (value.key.contains(query, ignoreCase = true)) {
-                        if (previousValue?.configName != value.configName) {
-                            configs[value.configName]?.let { config -> add(config) }
-                        }
-                        add(value)
-                        previousValue = value
-                    }
-                }
+            if (query.isBlank()) {
+                values.toMatchingKeys()
+            } else {
+                val matchingValues = values.filter { it.key.contains(query, ignoreCase = true) }
+                matchingValues.toMatchingKeys()
             }
         }
     }
+
+    private fun List<KonfeatureItem.Value>.toMatchingKeys(): Set<String> {
+        return this.flatMapTo(destination = mutableSetOf()) { value ->
+            listOf("config_${value.configName}", "value_${value.key}")
+        }
+    }
 }

plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/data/KonfeatureItem.kt

@@ -3,10 +3,15 @@ package com.redmadrobot.debug.plugin.konfeature.ui.data
 import androidx.compose.ui.graphics.Color
 
 internal sealed interface KonfeatureItem {
+    val itemKey: String
+
     data class Config(
         val name: String,
         val description: String,
-    ) : KonfeatureItem
+    ) : KonfeatureItem {
+        override val itemKey: String
+            get() = "config_$name"
+    }
 
     data class Value(
         val key: String,
@@ -17,6 +22,9 @@ internal sealed interface KonfeatureItem {
         val sourceColor: Color,
         val isDebugSource: Boolean
     ) : KonfeatureItem {
+        override val itemKey: String
+            get() = "value_$key"
+
         val editAvailable: Boolean
             get() = when (value) {
                 is Boolean,

plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/data/KonfeatureViewState.kt

@@ -1,15 +1,18 @@
 package com.redmadrobot.debug.plugin.konfeature.ui.data
 
+private const val ITEM_VALUE_PREFIX_KEY = "value_"
+
 internal data class KonfeatureViewState(
     val searchQuery: String = "",
     val collapsedConfigs: Set<String> = emptySet(),
     val configs: Map<String, KonfeatureItem.Config> = emptyMap(),
     val values: List<KonfeatureItem.Value> = emptyList(),
-    val filteredItems: List<KonfeatureItem> = emptyList(),
+    val items: List<KonfeatureItem> = emptyList(),
+    val matchingKeys: Set<String> = emptySet(),
     val editDialogState: EditDialogState? = null
 ) {
     val isSearchActive: Boolean
         get() = searchQuery.isNotBlank()
     val shouldShowEmptySearchItemsHint
-        get() = isSearchActive && filteredItems.none { it is KonfeatureItem.Value }
+        get() = isSearchActive && matchingKeys.none { it.startsWith(ITEM_VALUE_PREFIX_KEY) }
 }