Feat/puppy guide kmp track scroll offset

app/feature/feature-help-center/src/commonMain/kotlin/com/hedvig/android/feature/help/center/puppyguide/PuppyArticleDestination.kt

@@ -23,8 +23,10 @@ import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -33,6 +35,7 @@ import androidx.compose.ui.graphics.painter.ColorPainter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
@@ -65,6 +68,7 @@ internal fun PuppyArticleDestination(
   viewModel: PuppyArticleViewModel,
   navigateUp: () -> Unit,
   imageLoader: ImageLoader,
+  onScrollOffsetChanged: (Float) -> Unit = {},
 ) {
   val uiState by viewModel.uiState.collectAsStateWithLifecycle()
   PuppyArticleScreen(
@@ -77,6 +81,7 @@ internal fun PuppyArticleDestination(
     onRatingClick = {
       viewModel.emit(PuppyArticleEvent.RatingClick(it))
     },
+    onScrollOffsetChanged = onScrollOffsetChanged,
   )
 }
 
@@ -87,6 +92,7 @@ private fun PuppyArticleScreen(
   onReload: () -> Unit,
   onRatingClick: (Int) -> Unit,
   imageLoader: ImageLoader,
+  onScrollOffsetChanged: (Float) -> Unit,
 ) {
   when (uiState) {
     PuppyArticleUiState.Failure -> HedvigScaffold(
@@ -105,6 +111,7 @@ private fun PuppyArticleScreen(
       navigateUp = navigateUp,
       imageLoader = imageLoader,
       onRatingClick = onRatingClick,
+      onScrollOffsetChanged = onScrollOffsetChanged,
     )
   }
 }
@@ -116,6 +123,7 @@ private fun PuppyArticleSuccessScreen(
   navigateUp: () -> Unit,
   onRatingClick: (Int) -> Unit,
   imageLoader: ImageLoader,
+  onScrollOffsetChanged: (Float) -> Unit,
 ) {
   Surface(color = HedvigTheme.colorScheme.backgroundPrimary) {
     Column(Modifier.fillMaxSize()) {
@@ -130,10 +138,15 @@ private fun PuppyArticleSuccessScreen(
       val horizontalInsetsPadding = WindowInsets.safeDrawing
         .only(WindowInsetsSides.Horizontal)
         .asPaddingValues()
+      val scrollState = rememberScrollState()
+      val density = LocalDensity.current
+      LaunchedEffect(scrollState, density, onScrollOffsetChanged) {
+        snapshotFlow { with(density) { scrollState.value.toDp().value } }.collect(onScrollOffsetChanged)
+      }
       Column(
         modifier = Modifier
           .fillMaxWidth()
-          .verticalScroll(rememberScrollState())
+          .verticalScroll(scrollState)
           .padding(horizontalInsetsPadding)
           .padding(horizontal = 16.dp),
       ) {
@@ -270,6 +283,7 @@ private fun PuppyArticleScreenPreview(
         onReload = {},
         onRatingClick = {},
         imageLoader = rememberPreviewImageLoader(),
+        onScrollOffsetChanged = {},
       )
     }
   }

app/feature/feature-help-center/src/commonMain/kotlin/com/hedvig/android/feature/help/center/puppyguide/PuppyGuideDestination.kt

@@ -26,9 +26,11 @@ import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -38,6 +40,7 @@ import androidx.compose.ui.graphics.painter.ColorPainter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
@@ -78,6 +81,7 @@ internal fun PuppyGuideDestination(
   onNavigateUp: () -> Unit,
   imageLoader: ImageLoader,
   onNavigateToArticle: (PuppyGuideStory) -> Unit,
+  onScrollOffsetChanged: (Float) -> Unit = {},
 ) {
   val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
@@ -89,6 +93,7 @@ internal fun PuppyGuideDestination(
       viewModel.emit(PuppyGuideEvent.Reload)
     },
     imageLoader = imageLoader,
+    onScrollOffsetChanged = onScrollOffsetChanged,
   )
 }
 
@@ -99,6 +104,7 @@ private fun PuppyGuideScreen(
   onNavigateUp: () -> Unit,
   reload: () -> Unit,
   imageLoader: ImageLoader,
+  onScrollOffsetChanged: (Float) -> Unit,
 ) {
   when (uiState) {
     PuppyGuideUiState.Failure -> HedvigScaffold(
@@ -117,6 +123,7 @@ private fun PuppyGuideScreen(
       onNavigateUp = onNavigateUp,
       onNavigateToArticle = onNavigateToArticle,
       imageLoader = imageLoader,
+      onScrollOffsetChanged = onScrollOffsetChanged,
     )
   }
 }
@@ -128,10 +135,18 @@ private fun PuppyGuideSuccessScreen(
   onNavigateToArticle: (PuppyGuideStory) -> Unit,
   onNavigateUp: () -> Unit,
   imageLoader: ImageLoader,
+  onScrollOffsetChanged: (Float) -> Unit,
 ) {
   val categories = remember(uiState.stories) { uiState.stories.flatMap { it.categories }.toSet().toList() }
   val listState = rememberLazyListState()
   val scope = rememberCoroutineScope()
+  val density = LocalDensity.current
+  LaunchedEffect(listState, density, onScrollOffsetChanged) {
+    snapshotFlow {
+      if (listState.firstVisibleItemIndex > 0) 200f
+      else with(density) { listState.firstVisibleItemScrollOffset.toDp().value }
+    }.collect(onScrollOffsetChanged)
+  }
 
   Surface(
     color = HedvigTheme.colorScheme.backgroundPrimary,
@@ -379,6 +394,7 @@ private fun PuppyArticleScreenAnimations(
         {},
         reload = {},
         imageLoader = rememberPreviewImageLoader(),
+        onScrollOffsetChanged = {},
       )
     }
   }

app/feature/feature-help-center/src/nativeMain/kotlin/com/hedvig/android/feature/help/center/ui/PuppyGuideViewControllers.kt

@@ -17,6 +17,7 @@ fun PuppyGuideViewController(
   onNavigateUp: () -> Unit,
   onNavigateToArticle: (storyName: String) -> Unit,
   swipeBackController: IosSwipeBackController,
+  onScrollOffsetChanged: (Float) -> Unit,
 ): UIViewController {
   return HedvigComposeUIViewController(swipeBackController) {
     val imageLoader = koinInject<ImageLoader>()
@@ -26,6 +27,7 @@ fun PuppyGuideViewController(
       onNavigateUp = onNavigateUp,
       imageLoader = imageLoader,
       onNavigateToArticle = { story -> onNavigateToArticle(story.name) },
+      onScrollOffsetChanged = onScrollOffsetChanged,
     )
   }
 }
@@ -35,6 +37,7 @@ fun PuppyArticleViewController(
   storyName: String,
   navigateUp: () -> Unit,
   swipeBackController: IosSwipeBackController,
+  onScrollOffsetChanged: (Float) -> Unit,
 ): UIViewController {
   return HedvigComposeUIViewController(swipeBackController) {
     val imageLoader = koinInject<ImageLoader>()
@@ -43,6 +46,7 @@ fun PuppyArticleViewController(
       viewModel = viewModel,
       navigateUp = navigateUp,
       imageLoader = imageLoader,
+      onScrollOffsetChanged = onScrollOffsetChanged,
     )
   }
 }