Change favourites to single grid and add animation

Author: shorthouse

app/src/main/java/dev/shorthouse/coinwatch/ui/screen/favourites/FavouritesScreen.kt

@@ -1,24 +1,22 @@
 package dev.shorthouse.coinwatch.ui.screen.favourites
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.tween
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.LocalOverscrollFactory
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
-import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -52,6 +50,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewWrapper
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -62,14 +61,13 @@ import dev.shorthouse.coinwatch.ui.component.CoinSortChip
 import dev.shorthouse.coinwatch.ui.component.LoadingIndicator
 import dev.shorthouse.coinwatch.ui.component.ScrollToTopFab
 import dev.shorthouse.coinwatch.ui.insets.AppWindowInsets
+import dev.shorthouse.coinwatch.ui.preview.AppPreviewWrapper
 import dev.shorthouse.coinwatch.ui.preview.FavouritesUiStatePreviewProvider
 import dev.shorthouse.coinwatch.ui.screen.favourites.component.FavouriteCondensedItem
 import dev.shorthouse.coinwatch.ui.screen.favourites.component.FavouriteItem
 import dev.shorthouse.coinwatch.ui.screen.favourites.component.FavouritesEmptyState
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.launch
-import androidx.compose.ui.tooling.preview.PreviewWrapper
-import dev.shorthouse.coinwatch.ui.preview.AppPreviewWrapper
 
 @Composable
 fun FavouritesScreen(
@@ -111,21 +109,12 @@ fun FavouriteScreen(
 ) {
     val scope = rememberCoroutineScope()
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
-    val listState = rememberLazyListState()
     val gridState = rememberLazyGridState()
     val snackbarHostState = remember { SnackbarHostState() }
     val pullRefreshState = rememberPullToRefreshState()
     val showScrollToTopFab by remember {
         derivedStateOf {
-            gridState.firstVisibleItemIndex > 0 || listState.firstVisibleItemIndex > 0
-        }
-    }
-
-    LaunchedEffect(uiState.isFavouritesCondensed) {
-        if (uiState.isFavouritesCondensed) {
-            gridState.scrollToItem(0)
-        } else {
-            listState.scrollToItem(0)
+            gridState.firstVisibleItemIndex > 0
         }
     }
 
@@ -149,11 +138,7 @@ fun FavouriteScreen(
                 ScrollToTopFab(
                     onClick = {
                         scope.launch {
-                            if (uiState.isFavouritesCondensed) {
-                                listState.animateScrollToItem(0)
-                            } else {
-                                gridState.animateScrollToItem(0)
-                            }
+                            gridState.animateScrollToItem(0)
                         }
                     }
                 )
@@ -192,8 +177,7 @@ fun FavouriteScreen(
                         isFavouritesCondensed = uiState.isFavouritesCondensed,
                         coinSort = uiState.coinSort,
                         onUpdateCoinSort = onUpdateCoinSort,
-                        gridState = gridState,
-                        listState = listState
+                        gridState = gridState
                     )
                 }
             }
@@ -263,7 +247,6 @@ fun FavouritesContent(
     coinSort: CoinSort,
     onUpdateCoinSort: (CoinSort) -> Unit,
     gridState: LazyGridState,
-    listState: LazyListState,
     modifier: Modifier = Modifier,
 ) {
     CompositionLocalProvider(LocalOverscrollFactory provides null) {
@@ -272,21 +255,11 @@ fun FavouritesContent(
                 FavouritesEmptyState()
             }
 
-            isFavouritesCondensed -> {
-                FavouritesList(
-                    favouriteCoins = favouriteCoins,
-                    onCoinClick = onCoinClick,
-                    coinSort = coinSort,
-                    onUpdateCoinSort = onUpdateCoinSort,
-                    listState = listState,
-                    modifier = modifier
-                )
-            }
-
             else -> {
                 FavouritesGrid(
                     favouriteCoins = favouriteCoins,
                     onCoinClick = onCoinClick,
+                    isFavouritesCondensed = isFavouritesCondensed,
                     coinSort = coinSort,
                     onUpdateCoinSort = onUpdateCoinSort,
                     gridState = gridState,
@@ -301,70 +274,42 @@ fun FavouritesContent(
 fun FavouritesGrid(
     favouriteCoins: ImmutableList<FavouriteCoin>,
     onCoinClick: (FavouriteCoin) -> Unit,
+    isFavouritesCondensed: Boolean,
     coinSort: CoinSort,
     onUpdateCoinSort: (CoinSort) -> Unit,
     gridState: LazyGridState,
     modifier: Modifier = Modifier,
 ) {
     LazyVerticalGrid(
         state = gridState,
-        columns = GridCells.Adaptive(minSize = 140.dp),
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
-        verticalArrangement = Arrangement.spacedBy(16.dp),
+        columns = if (isFavouritesCondensed) {
+            GridCells.Fixed(1)
+        } else {
+            GridCells.Adaptive(minSize = 140.dp)
+        },
+        horizontalArrangement = Arrangement.spacedBy(
+            if (isFavouritesCondensed) 0.dp else 16.dp
+        ),
+        verticalArrangement = Arrangement.spacedBy(
+            if (isFavouritesCondensed) 0.dp else 16.dp
+        ),
         contentPadding = PaddingValues(start = 12.dp, end = 12.dp, bottom = 80.dp),
-        modifier = modifier.fillMaxHeight()
+        modifier = modifier,
     ) {
         item(
             span = { GridItemSpan(maxLineSpan) },
         ) {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-                modifier = Modifier.horizontalScroll(rememberScrollState())
-            ) {
-                CoinSort.entries.forEach { coinSortEntry ->
-                    CoinSortChip(
-                        coinSort = coinSortEntry,
-                        selected = coinSortEntry == coinSort,
-                        onClick = { onUpdateCoinSort(coinSortEntry) }
-                    )
-                }
-            }
-        }
-        items(
-            count = favouriteCoins.size,
-            key = { favouriteCoins[it].id },
-            itemContent = { index ->
-                val favouriteCoinItem = favouriteCoins[index]
-
-                FavouriteItem(
-                    favouriteCoin = favouriteCoinItem,
-                    onCoinClick = { onCoinClick(favouriteCoinItem) }
-                )
-            }
-        )
-    }
-}
-
-@Composable
-fun FavouritesList(
-    favouriteCoins: ImmutableList<FavouriteCoin>,
-    onCoinClick: (FavouriteCoin) -> Unit,
-    coinSort: CoinSort,
-    onUpdateCoinSort: (CoinSort) -> Unit,
-    listState: LazyListState,
-    modifier: Modifier = Modifier,
-) {
-    LazyColumn(
-        state = listState,
-        contentPadding = PaddingValues(start = 12.dp, end = 12.dp, bottom = 80.dp),
-        modifier = modifier.fillMaxHeight()
-    ) {
-        item {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
                 modifier = Modifier
                     .horizontalScroll(rememberScrollState())
-                    .padding(bottom = 8.dp)
+                    .padding(
+                        bottom = if (isFavouritesCondensed) {
+                            16.dp
+                        } else {
+                            0.dp
+                        }
+                    )
             ) {
                 CoinSort.entries.forEach { coinSortEntry ->
                     CoinSortChip(
@@ -381,27 +326,46 @@ fun FavouritesList(
             itemContent = { index ->
                 val favouriteCoinItem = favouriteCoins[index]
 
-                val cardShape = when {
-                    favouriteCoins.size == 1 -> MaterialTheme.shapes.medium
+                if (isFavouritesCondensed) {
+                    val cardShape = when {
+                        favouriteCoins.size == 1 -> MaterialTheme.shapes.medium
 
-                    index == 0 -> MaterialTheme.shapes.medium.copy(
-                        bottomStart = CornerSize(0.dp),
-                        bottomEnd = CornerSize(0.dp)
-                    )
+                        index == 0 -> MaterialTheme.shapes.medium.copy(
+                            bottomStart = CornerSize(0.dp),
+                            bottomEnd = CornerSize(0.dp)
+                        )
 
-                    index == favouriteCoins.lastIndex -> MaterialTheme.shapes.medium.copy(
-                        topStart = CornerSize(0.dp),
-                        topEnd = CornerSize(0.dp)
-                    )
+                        index == favouriteCoins.lastIndex -> MaterialTheme.shapes.medium.copy(
+                            topStart = CornerSize(0.dp),
+                            topEnd = CornerSize(0.dp)
+                        )
 
-                    else -> RoundedCornerShape(0.dp)
-                }
+                        else -> RoundedCornerShape(0.dp)
+                    }
 
-                FavouriteCondensedItem(
-                    favouriteCoin = favouriteCoinItem,
-                    onCoinClick = { onCoinClick(favouriteCoinItem) },
-                    cardShape = cardShape
-                )
+                    FavouriteCondensedItem(
+                        favouriteCoin = favouriteCoinItem,
+                        onCoinClick = { onCoinClick(favouriteCoinItem) },
+                        cardShape = cardShape,
+                        modifier = Modifier.animateItem(
+                            placementSpec = tween(
+                                durationMillis = 200,
+                                easing = FastOutSlowInEasing
+                            )
+                        )
+                    )
+                } else {
+                    FavouriteItem(
+                        favouriteCoin = favouriteCoinItem,
+                        onCoinClick = { onCoinClick(favouriteCoinItem) },
+                        modifier = Modifier.animateItem(
+                            placementSpec = tween(
+                                durationMillis = 200,
+                                easing = FastOutSlowInEasing
+                            )
+                        )
+                    )
+                }
             }
         )
     }