chore(token/info): better fade out content behind BottomBar

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/TokenInfoScreen.kt

@@ -1,26 +1,37 @@
 package com.flipcash.app.tokens.internal
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.Divider
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -36,7 +47,11 @@ import com.flipcash.app.tokens.internal.components.info.TokenDetailsSection
 import com.flipcash.app.tokens.internal.components.marketcap.generateMarketCapData
 import com.flipcash.features.tokens.R
 import com.getcode.theme.CodeTheme
+import com.getcode.ui.core.addIf
+import com.getcode.ui.core.debugBounds
+import com.getcode.ui.core.drawWithGradient
 import com.getcode.ui.core.isScrolledToStart
+import com.getcode.ui.core.measured
 import com.getcode.ui.core.verticalScrollStateGradient
 import com.getcode.ui.theme.ButtonState
 import com.getcode.ui.theme.CodeButton
@@ -68,15 +83,16 @@ private fun TokenInfoScreen(
     dispatch: (TokenInfoViewModel.Event) -> Unit
 ) {
     val listState = rememberLazyListState()
-    val hazeState = rememberHazeState()
+
     CodeScaffold(
-        bottomBar = { BottomBar(state, hazeState, dispatch) }
+        bottomBar = { BottomBar(state, dispatch) }
     ) { innerPadding ->
         Box(
             modifier = Modifier.verticalScrollStateGradient(
                 listState,
                 color = CodeTheme.colors.background,
                 isLongGradient = true,
+                showAtEnd = false,
             )
         ) {
             LazyColumn(
@@ -86,7 +102,6 @@ private fun TokenInfoScreen(
                         start = innerPadding.calculateStartPadding(),
                         end = innerPadding.calculateEndPadding(),
                     )
-                    .hazeSource(hazeState)
                     .sheetResignmentBehavior(listState),
                 state = listState,
             ) {
@@ -211,27 +226,42 @@ private fun TokenInfoScreen(
 @Composable
 private fun BottomBar(
     state: TokenInfoViewModel.State,
-    hazeState: HazeState,
     dispatch: (TokenInfoViewModel.Event) -> Unit
 ) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .navigationBarsPadding()
-            .hazeEffect(
-                state = hazeState,
-                style = HazeMaterials.ultraThin(
-                    containerColor = CodeTheme.colors.background.copy(0.15f)
-                )
-            ) {
-                this.blurRadius = 20.dp
-                this.progressive = HazeProgressive.LinearGradient(
-                    startIntensity = 1f,
-                    endIntensity = 1f
+    var buttonHeight by remember { mutableStateOf(0.dp) }
+
+    Box {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(buttonHeight)
+                .drawWithGradient(
+                    color = CodeTheme.colors.background,
+                    startY = { 0f },
+                    endY = { size.height * 0.1f }
                 )
-            }
-            .padding(horizontal = CodeTheme.dimens.inset)
-            .padding(vertical = CodeTheme.dimens.grid.x3),
+        )
+        BottomBarButtons(
+            modifier = Modifier
+                .measured { buttonHeight = it.height }
+                .navigationBarsPadding()
+                .padding(horizontal = CodeTheme.dimens.inset)
+                .padding(vertical = CodeTheme.dimens.grid.x3),
+            state = state,
+            dispatch = dispatch
+        )
+    }
+}
+
+@Composable
+private fun BottomBarButtons(
+    state: TokenInfoViewModel.State,
+    modifier: Modifier = Modifier,
+    dispatch: (TokenInfoViewModel.Event) -> Unit
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2),
     ) {