[Jetcaster] Improve scrolling in Home screen

Changes:
* Support scrolling entire content in home screen
* Fix `PreviewHomeContent`
* Remove non-screen composable view model usages

Author: arriolac

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/Home.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetcaster.ui.home
 
+import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -37,6 +38,7 @@ import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.windowInsetsTopHeight
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -46,6 +48,7 @@ import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
 import androidx.compose.material.Tab
 import androidx.compose.material.TabPosition
@@ -74,8 +77,11 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import coil.compose.AsyncImage
 import com.example.jetcaster.R
+import com.example.jetcaster.data.Category
 import com.example.jetcaster.data.PodcastWithExtraInfo
-import com.example.jetcaster.ui.home.discover.Discover
+import com.example.jetcaster.ui.home.category.PodcastCategoryViewState
+import com.example.jetcaster.ui.home.discover.DiscoverViewState
+import com.example.jetcaster.ui.home.discover.discoverItems
 import com.example.jetcaster.ui.theme.JetcasterTheme
 import com.example.jetcaster.ui.theme.Keyline1
 import com.example.jetcaster.ui.theme.MinContrastOfPrimaryVsSurface
@@ -102,9 +108,13 @@ fun Home(
             isRefreshing = viewState.refreshing,
             homeCategories = viewState.homeCategories,
             selectedHomeCategory = viewState.selectedHomeCategory,
-            onCategorySelected = viewModel::onHomeCategorySelected,
+            discoverViewState = viewState.discoverViewState,
+            podcastCategoryViewState = viewState.podcastCategoryViewState,
+            onHomeCategorySelected = viewModel::onHomeCategorySelected,
+            onCategorySelected = viewModel::onCategorySelected,
             onPodcastUnfollowed = viewModel::onPodcastUnfollowed,
             navigateToPlayer = navigateToPlayer,
+            onTogglePodcastFollowed = viewModel::onTogglePodcastFollowed,
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -163,10 +173,14 @@ fun HomeContent(
     isRefreshing: Boolean,
     selectedHomeCategory: HomeCategory,
     homeCategories: List<HomeCategory>,
+    discoverViewState: DiscoverViewState,
+    podcastCategoryViewState: PodcastCategoryViewState,
     modifier: Modifier = Modifier,
     onPodcastUnfollowed: (String) -> Unit,
-    onCategorySelected: (HomeCategory) -> Unit,
-    navigateToPlayer: (String) -> Unit
+    onHomeCategorySelected: (HomeCategory) -> Unit,
+    onCategorySelected: (Category) -> Unit,
+    navigateToPlayer: (String) -> Unit,
+    onTogglePodcastFollowed: (String) -> Unit,
 ) {
     Column(
         modifier = modifier.windowInsetsPadding(
@@ -191,79 +205,114 @@ fun HomeContent(
 
             // When the selected image url changes, call updateColorsFromImageUrl() or reset()
             LaunchedEffect(selectedImageUrl) {
+                Log.d("Jetcaster", "selectedImageUrl: $selectedImageUrl")
                 if (selectedImageUrl != null) {
                     dominantColorState.updateColorsFromImageUrl(selectedImageUrl)
                 } else {
                     dominantColorState.reset()
                 }
             }
 
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .verticalGradientScrim(
-                        color = MaterialTheme.colors.primary.copy(alpha = 0.38f),
-                        startYPercentage = 1f,
-                        endYPercentage = 0f
-                    )
-            ) {
-                // Draw a scrim over the status bar which matches the app bar
-                Spacer(
-                    Modifier
-                        .background(appBarColor)
-                        .fillMaxWidth()
-                        .windowInsetsTopHeight(WindowInsets.statusBars)
-                )
+            val scrimColor = MaterialTheme.colors.primary.copy(alpha = 0.38f)
+            Scaffold(
+                topBar = {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(color = scrimColor)
+                    ) {
+                        // Draw a scrim over the status bar which matches the app bar
+                        Spacer(
+                            Modifier
+                                .background(appBarColor)
+                                .fillMaxWidth()
+                                .windowInsetsTopHeight(WindowInsets.statusBars)
+                        )
+                        HomeAppBar(
+                            backgroundColor = appBarColor,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+                    }
+                },
+            ) { contentPadding ->
+                LazyColumn(
+                    contentPadding = contentPadding,
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    if (featuredPodcasts.isNotEmpty()) {
+                        item {
+                            FollowedPodcastItem(
+                                items = featuredPodcasts,
+                                pagerState = pagerState,
+                                onPodcastUnfollowed = onPodcastUnfollowed,
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .verticalGradientScrim(
+                                        color = scrimColor,
+                                        startYPercentage = 1f,
+                                        endYPercentage = 0f
+                                    )
+                            )
+                        }
 
-                HomeAppBar(
-                    backgroundColor = appBarColor,
-                    modifier = Modifier.fillMaxWidth()
-                )
+                        if (isRefreshing) {
+                            // TODO show a progress indicator or similar
+                        }
 
-                if (featuredPodcasts.isNotEmpty()) {
-                    Spacer(Modifier.height(16.dp))
+                        stickyHeader {
+                            if (homeCategories.isNotEmpty()) {
+                                HomeCategoryTabs(
+                                    categories = homeCategories,
+                                    selectedCategory = selectedHomeCategory,
+                                    onCategorySelected = onHomeCategorySelected
+                                )
+                            }
+                        }
 
-                    FollowedPodcasts(
-                        items = featuredPodcasts,
-                        pagerState = pagerState,
-                        onPodcastUnfollowed = onPodcastUnfollowed,
-                        modifier = Modifier
-                            .padding(start = Keyline1, top = 16.dp, end = Keyline1)
-                            .fillMaxWidth()
-                            .height(200.dp)
-                    )
+                        when (selectedHomeCategory) {
+                            HomeCategory.Library -> {
+                                // TODO
+                            }
 
-                    Spacer(Modifier.height(16.dp))
+                            HomeCategory.Discover -> {
+                                discoverItems(
+                                    discoverViewState = discoverViewState,
+                                    podcastCategoryViewState = podcastCategoryViewState,
+                                    navigateToPlayer = navigateToPlayer,
+                                    onCategorySelected = onCategorySelected,
+                                    onTogglePodcastFollowed = onTogglePodcastFollowed
+                                )
+                            }
+                        }
+                    }
                 }
             }
         }
+    }
+}
 
-        if (isRefreshing) {
-            // TODO show a progress indicator or similar
-        }
-
-        if (homeCategories.isNotEmpty()) {
-            HomeCategoryTabs(
-                categories = homeCategories,
-                selectedCategory = selectedHomeCategory,
-                onCategorySelected = onCategorySelected
-            )
-        }
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun FollowedPodcastItem(
+    items: PersistentList<PodcastWithExtraInfo>,
+    pagerState: PagerState,
+    onPodcastUnfollowed: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier) {
+        Spacer(Modifier.height(16.dp))
 
-        when (selectedHomeCategory) {
-            HomeCategory.Library -> {
-                // TODO
-            }
+        FollowedPodcasts(
+            items = items,
+            pagerState = pagerState,
+            onPodcastUnfollowed = onPodcastUnfollowed,
+            modifier = Modifier
+                .padding(start = Keyline1, top = 16.dp, end = Keyline1)
+                .fillMaxWidth()
+                .height(200.dp)
+        )
 
-            HomeCategory.Discover -> {
-                Discover(
-                    navigateToPlayer = navigateToPlayer,
-                    Modifier
-                        .fillMaxWidth()
-                        .weight(1f)
-                )
-            }
-        }
+        Spacer(Modifier.height(16.dp))
     }
 }
 
@@ -410,23 +459,31 @@ private fun lastUpdated(updated: OffsetDateTime): String {
     }
 }
 
-/*
-TODO: Fix preview error
 @Composable
 @Preview
 fun PreviewHomeContent() {
     JetcasterTheme {
         HomeContent(
             featuredPodcasts = PreviewPodcastsWithExtraInfo,
             isRefreshing = false,
-            homeCategories = HomeCategory.values().asList(),
+            homeCategories = HomeCategory.entries,
             selectedHomeCategory = HomeCategory.Discover,
+            discoverViewState = DiscoverViewState(
+                categories = PreviewCategories,
+                selectedCategory = PreviewCategories.first(),
+            ),
+            podcastCategoryViewState = PodcastCategoryViewState(
+                topPodcasts = PreviewPodcastsWithExtraInfo,
+                episodes = PreviewEpisodeToPodcasts,
+            ),
             onCategorySelected = {},
-            onPodcastUnfollowed = {}
+            onPodcastUnfollowed = {},
+            navigateToPlayer = {},
+            onHomeCategorySelected = {},
+            onTogglePodcastFollowed = {}
         )
     }
 }
-*/
 
 @Composable
 @Preview