fix: meals details now scrollable

composeApp/src/commonMain/kotlin/com/cairosquad/evolvefit/ui/screen/mealDetails/content/MealDetailsSuccessScreen.kt

@@ -1,20 +1,30 @@
 package com.cairosquad.evolvefit.ui.screen.mealDetails.content
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import com.cairosquad.evolvefit.design_system.theme.Theme
+import com.cairosquad.evolvefit.design_system.theme.UpdateStatusBarIconsForTheme
 import com.cairosquad.evolvefit.design_system.util.NetworkImage
 import com.cairosquad.evolvefit.ui.screen.mealDetails.content.components.IngredientsList
 import com.cairosquad.evolvefit.ui.screen.mealDetails.content.components.MealDescription
@@ -33,62 +43,89 @@ fun MealDetailsSuccessScreen(
     state: MealDetailsScreenState,
     mealId: String
 ) {
+    val scrollState = rememberScrollState()
+    val scrollOffsetThreshold = 307
+    val isScrolled by remember {
+        derivedStateOf {
+            scrollState.value > scrollOffsetThreshold
+        }
+    }
+    println("asdqweio qwdjasd asd ${scrollState.value}")
+
+    if (Theme.isDark.not() && isScrolled) {
+        UpdateStatusBarIconsForTheme(false)
+    } else {
+        UpdateStatusBarIconsForTheme(true)
+    }
+
+    val appBarBackground by animateColorAsState(
+        targetValue =
+            if (isScrolled) Theme.color.surfaces.surface
+            else Color.Black.copy(0.2f),
+        animationSpec = tween(1000)
+    )
+
+    val iconTint by animateColorAsState(
+        targetValue = if (isScrolled) Theme.color.surfaces.onSurface
+        else Theme.color.surfaces.textColor,
+        animationSpec = tween(1000)
+    )
     Box(
         modifier = Modifier
             .fillMaxSize()
     ) {
         Box(
             modifier = Modifier
-                .fillMaxWidth()
-                .height(331.dp)
+                .fillMaxSize()
+                .navigationBarsPadding()
+                .verticalScroll(scrollState)
         ) {
             NetworkImage(
                 model = state.mealDetails.imgUrl,
                 contentDescription = stringResource(Res.string.meal_image),
                 contentScale = ContentScale.Crop,
                 modifier = Modifier
-                    .fillMaxSize()
+                    .fillMaxWidth()
                     .height(331.dp),
             )
-            MealDetailsAppBar(
-                state = state,
-                onBackClick = { listener.onBackClicked() },
-                onBookmarkClick = { listener.onSaveMealClicked(mealId) }
-            )
-        }
-        Box(
-            modifier = Modifier
-                .padding(top = 307.dp)
-                .fillMaxSize()
-                .background(
-                    Theme.color.surfaces.surface,
-                    shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp)
-                )
-                .padding(horizontal = 16.dp, vertical = 16.dp)
-        ) {
-            Column {
-                MealDescription(
-                    state.mealDetails.name,
-                    state.mealDetails.mealType.name,
-                    state.mealDetails.description
-                )
-                NutritionalInfo(
-                    modifier = Modifier.padding(top = 12.dp),
-                    calories = state.mealDetails.calories,
-                    carbs = state.mealDetails.carbs,
-                    protein = state.mealDetails.protein,
-                    fat = state.mealDetails.fat
-                )
-                Spacer(modifier = Modifier.height(32.dp))
-                IngredientsList(
-                    ingredients = state.mealDetails.ingredients
-                )
+            Box(
+                modifier = Modifier
+                    .padding(top = 307.dp)
+                    .fillMaxSize()
+                    .background(
+                        Theme.color.surfaces.surface,
+                        shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp)
+                    )
+                    .padding(horizontal = 16.dp, vertical = 16.dp)
+
+            ) {
+                Column {
+                    MealDescription(
+                        state.mealDetails.name,
+                        state.mealDetails.mealType.name,
+                        state.mealDetails.description
+                    )
+                    NutritionalInfo(
+                        modifier = Modifier.padding(top = 12.dp),
+                        calories = state.mealDetails.calories,
+                        carbs = state.mealDetails.carbs,
+                        protein = state.mealDetails.protein,
+                        fat = state.mealDetails.fat
+                    )
+                    Spacer(modifier = Modifier.height(32.dp))
+                    IngredientsList(
+                        ingredients = state.mealDetails.ingredients
+                    )
+                }
             }
         }
-        SaveMealSuccessSnackBar(
-            modifier = Modifier.padding(bottom = 24.dp)
-                .align(Alignment.BottomCenter),
-            isVisible = state.showSaveMealSuccessSnackBar
-        )
+
+      MealDetailsAppBar(
+          state = state,
+          appBarBackground = appBarBackground,
+          iconTint = iconTint,
+          onBackClick = { listener.onBackClicked() },
+          onBookmarkClick = { listener.onSaveMealClicked(mealId) }
+      )
     }
 }

composeApp/src/commonMain/kotlin/com/cairosquad/evolvefit/ui/screen/mealDetails/content/components/IngredientsList.kt

@@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -26,13 +24,13 @@ import org.jetbrains.compose.resources.stringResource
         )
         Spacer(modifier = Modifier.height(12.dp))
 
-        LazyColumn(
+        Column (
             modifier = Modifier.fillMaxWidth(),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {
-            items(ingredients) { ingredient ->
+            repeat(ingredients.size) { index ->
                 Text(
-                    "• $ingredient",
+                    "• ${ingredients[index]}",
                     style = Theme.textStyle.label.smallRegular14,
                     color = Theme.color.surfaces.onSurfaceVariant,
                     modifier = Modifier.fillMaxWidth()

composeApp/src/commonMain/kotlin/com/cairosquad/evolvefit/ui/screen/mealDetails/content/components/MealDetailsAppBar.kt

@@ -1,5 +1,6 @@
 package com.cairosquad.evolvefit.ui.screen.mealDetails.content.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.padding
@@ -11,10 +12,10 @@ import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.cairosquad.evolvefit.design_system.component.appbar.ActionIconButton
 import com.cairosquad.evolvefit.design_system.component.appbar.CustomAppBar
-import com.cairosquad.evolvefit.design_system.theme.Theme
 import com.cairosquad.evolvefit.viewmodel.meal_details.MealDetailsScreenState
 import evolvefit.composeapp.generated.resources.Res
 import evolvefit.composeapp.generated.resources.back
@@ -28,19 +29,23 @@ import org.jetbrains.compose.resources.stringResource
 @Composable
 fun MealDetailsAppBar(
     state: MealDetailsScreenState,
+    appBarBackground: Color,
+    iconTint: Color,
     onBackClick: () -> Unit,
     onBookmarkClick: () -> Unit
 ) {
+
     CustomAppBar(
         modifier = Modifier
+            .background(appBarBackground)
             .windowInsetsPadding(WindowInsets.statusBars)
             .padding(horizontal = 16.dp),
         title = "",
         header = {
             ActionIconButton(
                 icon = painterResource(Res.drawable.ic_back),
                 contentDescription = stringResource(Res.string.back),
-                tint = Theme.color.surfaces.textColor,
+                tint = iconTint,
                 onClick = onBackClick
             )
         },
@@ -51,14 +56,13 @@ fun MealDetailsAppBar(
                         painterResource(Res.drawable.ic_bookmark_big_filled)
                     else painterResource(Res.drawable.ic_bookmark_big),
                 contentDescription = stringResource(Res.string.bookmark),
-                tint = Theme.color.surfaces.textColor,
+                tint = iconTint,
                 modifier = Modifier
                     .size(40.dp)
                     .clip(CircleShape)
                     .clickable(onClick = onBookmarkClick)
                     .padding(8.dp)
             )
-
         }
     )
 }

composeApp/src/commonMain/kotlin/com/cairosquad/evolvefit/ui/screen/playWorkout/content/PlayWorkoutContentPerform.kt

@@ -69,9 +69,6 @@ fun PlayWorkoutContentPerform(
         initialPage = screenState.currentStep - 1
     )
 
-//    val isForwardButtonEnabled = screenState.currentStep < screenState.workout.exercises.size
-//    val isBackButtonEnabled = screenState.currentStep > 1
-
     LaunchedEffect(screenState.currentStep) {
         try {
             pagerState.animateScrollToPage(screenState.currentStep - 1)