feat: activity list header haze

Author: ovitrif

app/src/main/java/to/bitkit/ui/components/TabBar.kt

@@ -51,10 +51,10 @@ private val buttonRightShape = RoundedCornerShape(topEndPercent = 50, bottomEndP
 @OptIn(ExperimentalHazeMaterialsApi::class)
 @Composable
 fun TabBar(
+    hazeState: HazeState,
     onSendClick: () -> Unit,
     onReceiveClick: () -> Unit,
     onScanClick: () -> Unit,
-    hazeState: HazeState,
     modifier: Modifier = Modifier,
 ) {
     Box(

app/src/main/java/to/bitkit/ui/screens/wallets/HomeNav.kt

@@ -75,10 +75,10 @@ fun HomeNav(
         }
 
         TabBar(
+            hazeState = hazeState,
             onSendClick = { appViewModel.showSheet(BottomSheetType.Send()) },
             onReceiveClick = { appViewModel.showSheet(BottomSheetType.Receive) },
             onScanClick = { rootNavController.navigateToScanner() },
-            hazeState = hazeState,
             modifier = Modifier.align(Alignment.BottomCenter)
         )
 

app/src/main/java/to/bitkit/ui/screens/wallets/SavingsWalletScreen.kt

@@ -93,10 +93,10 @@ fun SavingsWalletScreen(
                     val onchainActivities by activity.onchainActivities.collectAsState()
                     ActivityListGrouped(
                         items = onchainActivities,
-                        showFooter = true,
-                        onAllActivityButtonClick = onAllActivityButtonClick,
                         onActivityItemClick = onActivityItemClick,
                         onEmptyActivityRowClick = onEmptyActivityRowClick,
+                        showFooter = true,
+                        onAllActivityButtonClick = onAllActivityButtonClick,
                     )
                 }
             }

app/src/main/java/to/bitkit/ui/screens/wallets/SpendingWalletScreen.kt

@@ -106,10 +106,10 @@ fun SpendingWalletScreen(
                     val lightningActivities by activity.lightningActivities.collectAsState()
                     ActivityListGrouped(
                         items = lightningActivities,
-                        showFooter = true,
-                        onAllActivityButtonClick = onAllActivityButtonClick,
                         onActivityItemClick = onActivityItemClick,
                         onEmptyActivityRowClick = onEmptyActivityRowClick,
+                        showFooter = true,
+                        onAllActivityButtonClick = onAllActivityButtonClick,
                     )
                 }
             }

app/src/main/java/to/bitkit/ui/screens/wallets/activity/AllActivityScreen.kt

@@ -3,27 +3,41 @@ package to.bitkit.ui.screens.wallets.activity
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectHorizontalDragGestures
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.input.pointer.util.VelocityTracker
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.synonym.bitkitcore.Activity
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.hazeEffect
+import dev.chrisbanes.haze.hazeSource
+import dev.chrisbanes.haze.materials.CupertinoMaterials
+import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
+import dev.chrisbanes.haze.rememberHazeState
 import to.bitkit.R
 import to.bitkit.ui.appViewModel
 import to.bitkit.ui.components.BottomSheetType
@@ -73,8 +87,8 @@ fun AllActivityScreen(
     )
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
+@OptIn(ExperimentalHazeMaterialsApi::class)
 private fun AllActivityScreenContent(
     filteredActivities: List<Activity>?,
     searchText: String,
@@ -89,16 +103,33 @@ private fun AllActivityScreenContent(
     onDateRangeClick: () -> Unit,
     onActivityItemClick: (String) -> Unit,
     onEmptyActivityRowClick: () -> Unit,
+    hazeState: HazeState = rememberHazeState(),
 ) {
-    Column(
-        modifier = Modifier.background(Colors.Black)
+    val density = LocalDensity.current
+    var headerHeight by remember { mutableStateOf(120.dp) }
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Colors.Black)
     ) {
+        // Header
+        val (gradientStart, gradientEnd) = Color(0xFF1e1e1e) to Color(0xFF161616)
         Column(
             modifier = Modifier
                 .clip(RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp))
+                .background(Brush.horizontalGradient(listOf(gradientStart, gradientEnd)))
+                .hazeEffect(
+                    state = hazeState,
+                    style = CupertinoMaterials.ultraThin(containerColor = gradientEnd)
+                )
                 .background(
-                    Brush.horizontalGradient(listOf(Color(0xFF1e1e1e), Color(0xFF161616)))
+                    Brush.verticalGradient(
+                        colorStops = arrayOf(0f to gradientEnd, 0.5f to Color.Transparent)
+                    )
                 )
+                .background(Brush.horizontalGradient(listOf(Colors.White06, Color.Transparent)))
+                .onGloballyPositioned { coords -> headerHeight = with(density) { coords.size.height.toDp() } }
+                .zIndex(1f)
         ) {
             AppTopBar(stringResource(R.string.wallet__activity_all), onBackClick)
             Column(
@@ -118,18 +149,27 @@ private fun AllActivityScreenContent(
                 Spacer(modifier = Modifier.height(16.dp))
             }
         }
-        ActivityListGrouped(
-            items = filteredActivities,
-            onActivityItemClick = onActivityItemClick,
-            onEmptyActivityRowClick = onEmptyActivityRowClick,
+        // List
+        Box(
             modifier = Modifier
-                .swipeToChangeTab(
-                    currentTabIndex = currentTabIndex,
-                    tabCount = tabs.size,
-                    onTabChange = onTabChange,
-                )
-                .padding(horizontal = 16.dp)
-        )
+                .fillMaxSize()
+                .hazeSource(state = hazeState)
+                .zIndex(0f)
+        ) {
+            ActivityListGrouped(
+                items = filteredActivities,
+                onActivityItemClick = onActivityItemClick,
+                onEmptyActivityRowClick = onEmptyActivityRowClick,
+                contentPadding = PaddingValues(top = headerHeight + 20.dp),
+                modifier = Modifier
+                    .swipeToChangeTab(
+                        currentTabIndex = currentTabIndex,
+                        tabCount = tabs.size,
+                        onTabChange = onTabChange,
+                    )
+                    .padding(horizontal = 16.dp)
+            )
+        }
     }
 }
 
@@ -169,6 +209,7 @@ private fun Preview() {
             hasDateRangeFilter = false,
             tabs = ActivityTab.entries,
             currentTabIndex = 0,
+            hazeState = rememberHazeState(),
             onTabChange = {},
             onBackClick = {},
             onTagClick = {},
@@ -191,6 +232,7 @@ private fun PreviewEmpty() {
             hasDateRangeFilter = false,
             tabs = ActivityTab.entries,
             currentTabIndex = 0,
+            hazeState = rememberHazeState(),
             onTabChange = {},
             onBackClick = {},
             onTagClick = {},

app/src/main/java/to/bitkit/ui/screens/wallets/activity/components/ActivityListGrouped.kt

@@ -40,6 +40,7 @@ fun ActivityListGrouped(
     modifier: Modifier = Modifier,
     showFooter: Boolean = false,
     onAllActivityButtonClick: () -> Unit = {},
+    contentPadding: PaddingValues = PaddingValues(top = 20.dp),
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
@@ -50,7 +51,7 @@ fun ActivityListGrouped(
 
             LazyColumn(
                 horizontalAlignment = Alignment.CenterHorizontally,
-                contentPadding = PaddingValues(top = 20.dp),
+                contentPadding = contentPadding,
                 modifier = Modifier.fillMaxWidth()
             ) {
                 itemsIndexed(groupedItems) { index, item ->