feat(updates-screen): Animated Updates group expand visibility (#912)

app/src/main/java/eu/kanade/presentation/updates/UpdatesScreen.kt

@@ -29,7 +29,6 @@ import eu.kanade.presentation.manga.components.MangaBottomActionMenu
 import eu.kanade.tachiyomi.data.download.model.Download
 import eu.kanade.tachiyomi.ui.updates.UpdatesItem
 import eu.kanade.tachiyomi.ui.updates.UpdatesScreenModel
-import eu.kanade.tachiyomi.ui.updates.groupByDateAndManga
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
@@ -130,15 +129,8 @@ fun UpdateScreen(
                         updatesLastUpdatedItem(lastUpdated)
 
                         updatesUiItems(
-                            uiModels = state.getUiModel()
+                            uiModels = state.getUiModel(),
-                                // KMK -->
+                            // KMK -->
-                                .filter {
-                                    when (it) {
-                                        is UpdatesUiModel.Header, is UpdatesUiModel.Leader -> true
-                                        is UpdatesUiModel.Item ->
-                                            state.expandedState.contains(it.item.update.groupByDateAndManga())
-                                    }
-                                },
                             expandedState = state.expandedState,
                             collapseToggle = collapseToggle,
                             usePanoramaCover = usePanoramaCover.value,

app/src/main/java/eu/kanade/presentation/updates/UpdatesUiItem.kt

@@ -1,8 +1,13 @@
 package eu.kanade.presentation.updates
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.animation.graphics.res.animatedVectorResource
 import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
 import androidx.compose.animation.graphics.vector.AnimatedImageVector
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -119,47 +124,58 @@ internal fun LazyListScope.updatesUiItems(
             }
             is UpdatesUiModel.Item -> {
                 val updatesItem = item.item
-                UpdatesUiItem(
+                val isLeader = item is UpdatesUiModel.Leader
-                    modifier = Modifier.animateItemFastScroll(),
+                val isExpanded = expandedState.contains(updatesItem.update.groupByDateAndManga())
-                    update = updatesItem.update,
+
-                    selected = updatesItem.selected,
+                // KMK -->
-                    readProgress = updatesItem.update.lastPageRead
+                AnimatedVisibility(
-                        .takeIf {
+                    visible = isLeader || isExpanded,
-                            /* SY --> */(
+                    enter = fadeIn() + expandVertically(),
-                                !updatesItem.update.read ||
+                    exit = fadeOut() + shrinkVertically(),
-                                    (preserveReadingPosition && updatesItem.isEhBasedUpdate())
+                ) {
-                                )/* SY <-- */ &&
-                                it > 0L
-                        }
-                        ?.let {
-                            stringResource(
-                                MR.strings.chapter_progress,
-                                it + 1,
-                            )
-                        },
-                    onLongClick = {
-                        onUpdateSelected(updatesItem, !updatesItem.selected, true, true)
-                    },
-                    onClick = {
-                        when {
-                            selectionMode -> onUpdateSelected(updatesItem, !updatesItem.selected, true, false)
-                            else -> onClickUpdate(updatesItem)
-                        }
-                    },
-                    onClickCover = { onClickCover(updatesItem) }.takeIf { !selectionMode },
-                    onDownloadChapter = { action: ChapterDownloadAction ->
-                        onDownloadChapter(listOf(updatesItem), action)
-                    }.takeIf { !selectionMode },
-                    downloadStateProvider = updatesItem.downloadStateProvider,
-                    downloadProgressProvider = updatesItem.downloadProgressProvider,
-                    // KMK -->
-                    isLeader = item is UpdatesUiModel.Leader,
-                    isExpandable = item.isExpandable,
-                    expanded = expandedState.contains(updatesItem.update.groupByDateAndManga()),
-                    collapseToggle = collapseToggle,
-                    usePanoramaCover = usePanoramaCover,
                     // KMK <--
-                )
+                    UpdatesUiItem(
+                        modifier = Modifier.animateItemFastScroll(),
+                        update = updatesItem.update,
+                        selected = updatesItem.selected,
+                        readProgress = updatesItem.update.lastPageRead
+                            .takeIf {
+                                /* SY --> */(
+                                    !updatesItem.update.read ||
+                                        (preserveReadingPosition && updatesItem.isEhBasedUpdate())
+                                    )/* SY <-- */ &&
+                                    it > 0L
+                            }
+                            ?.let {
+                                stringResource(
+                                    MR.strings.chapter_progress,
+                                    it + 1,
+                                )
+                            },
+                        onLongClick = {
+                            onUpdateSelected(updatesItem, !updatesItem.selected, true, true)
+                        },
+                        onClick = {
+                            when {
+                                selectionMode -> onUpdateSelected(updatesItem, !updatesItem.selected, true, false)
+                                else -> onClickUpdate(updatesItem)
+                            }
+                        },
+                        onClickCover = { onClickCover(updatesItem) }.takeIf { !selectionMode },
+                        onDownloadChapter = { action: ChapterDownloadAction ->
+                            onDownloadChapter(listOf(updatesItem), action)
+                        }.takeIf { !selectionMode },
+                        downloadStateProvider = updatesItem.downloadStateProvider,
+                        downloadProgressProvider = updatesItem.downloadProgressProvider,
+                        // KMK -->
+                        isLeader = isLeader,
+                        isExpandable = item.isExpandable,
+                        expanded = isExpanded,
+                        collapseToggle = collapseToggle,
+                        usePanoramaCover = usePanoramaCover,
+                        // KMK <--
+                    )
+                }
             }
         }
     }
@@ -348,6 +364,11 @@ fun CollapseButton(
     collapseToggle: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val painter = rememberAnimatedVectorPainter(
+        AnimatedImageVector.animatedVectorResource(R.drawable.anim_caret_down),
+        !expanded,
+    )
+
     Box(
         modifier = modifier
             .size(IndicatorSize + MaterialTheme.padding.extraSmall),
@@ -357,9 +378,8 @@ fun CollapseButton(
             onClick = { collapseToggle() },
             modifier = Modifier.size(IndicatorSize),
         ) {
-            val image = AnimatedImageVector.animatedVectorResource(R.drawable.anim_caret_down)
             Icon(
-                painter = rememberAnimatedVectorPainter(image, !expanded),
+                painter = painter,
                 contentDescription = null,
                 tint = MaterialTheme.colorScheme.primary,
             )