Merge pull request #445 from synonymdev/chore/activity-list-polish

Activity list polish

Author: ovitrif

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

@@ -1,7 +1,6 @@
 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
@@ -10,35 +9,21 @@ 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.platform.testTag
 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.Sheet
@@ -47,8 +32,8 @@ import to.bitkit.ui.screens.wallets.activity.components.ActivityListFilter
 import to.bitkit.ui.screens.wallets.activity.components.ActivityListGrouped
 import to.bitkit.ui.screens.wallets.activity.components.ActivityTab
 import to.bitkit.ui.screens.wallets.activity.utils.previewActivityItems
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppThemeSurface
-import to.bitkit.ui.theme.Colors
 import to.bitkit.viewmodels.ActivityListViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -76,9 +61,11 @@ fun AllActivityScreen(
         searchText = searchText,
         onSearchTextChange = { viewModel.setSearchText(it) },
         hasTagFilter = selectedTags.isNotEmpty(),
+        selectedTags = selectedTags,
         hasDateRangeFilter = startDate != null,
         tabs = tabs,
         currentTabIndex = currentTabIndex,
+        onRemoveTag = { viewModel.toggleTag(it) },
         onTabChange = { viewModel.setTab(tabs[it]) },
         onBackClick = onBack,
         onTagClick = { app.showSheet(Sheet.ActivityTagSelector) },
@@ -95,73 +82,50 @@ private fun AllActivityScreenContent(
     searchText: String,
     onSearchTextChange: (String) -> Unit,
     hasTagFilter: Boolean,
+    selectedTags: Set<String>,
     hasDateRangeFilter: Boolean,
     tabs: List<ActivityTab>,
     currentTabIndex: Int,
+    onRemoveTag: (String) -> Unit,
     onTabChange: (Int) -> Unit,
     onBackClick: () -> Unit,
     onTagClick: () -> Unit,
     onDateRangeClick: () -> Unit,
     onActivityItemClick: (String) -> Unit,
     onEmptyActivityRowClick: () -> Unit,
-    hazeState: HazeState = rememberHazeState(),
 ) {
-    val density = LocalDensity.current
-    var headerHeight by remember { mutableStateOf(120.dp) }
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(Colors.Black)
+    Column(
+        modifier = Modifier.screen()
     ) {
-        // 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.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(
-                modifier = Modifier.padding(horizontal = 16.dp)
-            ) {
-                ActivityListFilter(
-                    searchText = searchText,
-                    onSearchTextChange = onSearchTextChange,
-                    hasTagFilter = hasTagFilter,
-                    hasDateRangeFilter = hasDateRangeFilter,
-                    onTagClick = onTagClick,
-                    onDateRangeClick = onDateRangeClick,
-                    tabs = tabs,
-                    currentTabIndex = currentTabIndex,
-                    onTabChange = { onTabChange(tabs.indexOf(it)) },
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-            }
-        }
+        AppTopBar(stringResource(R.string.wallet__activity_all), onBackClick)
+
+        ActivityListFilter(
+            searchText = searchText,
+            onSearchTextChange = onSearchTextChange,
+            hasTagFilter = hasTagFilter,
+            hasDateRangeFilter = hasDateRangeFilter,
+            onTagClick = onTagClick,
+            selectedTags = selectedTags,
+            onRemoveTag = onRemoveTag,
+            onDateRangeClick = onDateRangeClick,
+            tabs = tabs,
+            currentTabIndex = currentTabIndex,
+            onTabChange = { onTabChange(tabs.indexOf(it)) },
+            modifier = Modifier.padding(horizontal = 16.dp)
+
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+
         // List
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .hazeSource(state = hazeState)
-                .zIndex(0f)
         ) {
             ActivityListGrouped(
                 items = filteredActivities,
                 onActivityItemClick = onActivityItemClick,
                 onEmptyActivityRowClick = onEmptyActivityRowClick,
-                contentPadding = PaddingValues(top = headerHeight + 20.dp),
+                contentPadding = PaddingValues(top = 0.dp),
                 modifier = Modifier
                     .swipeToChangeTab(
                         currentTabIndex = currentTabIndex,
@@ -208,15 +172,16 @@ private fun Preview() {
             searchText = "",
             onSearchTextChange = {},
             hasTagFilter = false,
+            selectedTags = setOf(),
             hasDateRangeFilter = false,
             tabs = ActivityTab.entries,
             currentTabIndex = 0,
-            hazeState = rememberHazeState(),
             onTabChange = {},
             onBackClick = {},
             onTagClick = {},
             onDateRangeClick = {},
             onActivityItemClick = {},
+            onRemoveTag = {},
             onEmptyActivityRowClick = {},
         )
     }
@@ -231,14 +196,15 @@ private fun PreviewEmpty() {
             searchText = "",
             onSearchTextChange = {},
             hasTagFilter = false,
+            selectedTags = setOf("tag1", "tag2"),
             hasDateRangeFilter = false,
             tabs = ActivityTab.entries,
             currentTabIndex = 0,
-            hazeState = rememberHazeState(),
             onTabChange = {},
             onBackClick = {},
             onTagClick = {},
             onDateRangeClick = {},
+            onRemoveTag = {},
             onActivityItemClick = {},
             onEmptyActivityRowClick = {},
         )

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

@@ -3,7 +3,6 @@ package to.bitkit.ui.screens.wallets.activity
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -22,14 +21,14 @@ import to.bitkit.R
 import to.bitkit.ui.activityListViewModel
 import to.bitkit.ui.appViewModel
 import to.bitkit.ui.components.BottomSheetPreview
-import to.bitkit.ui.components.PrimaryButton
-import to.bitkit.ui.components.SecondaryButton
+import to.bitkit.ui.components.Caption13Up
 import to.bitkit.ui.components.SheetSize
 import to.bitkit.ui.components.TagButton
 import to.bitkit.ui.scaffold.SheetTopBar
 import to.bitkit.ui.shared.modifiers.sheetHeight
 import to.bitkit.ui.shared.util.gradientBackground
 import to.bitkit.ui.theme.AppThemeSurface
+import to.bitkit.ui.theme.Colors
 
 @Composable
 fun TagSelectorSheet() {
@@ -41,12 +40,8 @@ fun TagSelectorSheet() {
     Content(
         availableTags = availableTags,
         selectedTags = selectedTags,
-        onTagClick = { activity.toggleTag(it) },
-        onClearClick = {
-            activity.clearTags()
-            app.hideSheet()
-        },
-        onApplyClick = {
+        onTagClick = {
+            activity.toggleTag(it)
             app.hideSheet()
         },
     )
@@ -57,8 +52,6 @@ private fun Content(
     availableTags: List<String>,
     selectedTags: Set<String>,
     onTagClick: (String) -> Unit = {},
-    onClearClick: () -> Unit = {},
-    onApplyClick: () -> Unit = {},
 ) {
     Column(
         modifier = Modifier
@@ -70,6 +63,13 @@ private fun Content(
     ) {
         SheetTopBar(stringResource(R.string.wallet__tags_filter_title))
 
+        Spacer(modifier = Modifier.height(42.dp))
+
+        Caption13Up(
+            text = stringResource(R.string.wallet__tags_filter),
+            color = Colors.White64,
+        )
+
         Spacer(modifier = Modifier.height(16.dp))
 
         FlowRow(
@@ -89,24 +89,6 @@ private fun Content(
         }
 
         Spacer(modifier = Modifier.weight(1f))
-        Spacer(modifier = Modifier.height(16.dp))
-        Row(
-            horizontalArrangement = Arrangement.spacedBy(16.dp),
-            modifier = Modifier
-                .fillMaxWidth()
-        ) {
-            SecondaryButton(
-                onClick = onClearClick,
-                text = stringResource(R.string.wallet__filter_clear),
-                modifier = Modifier.weight(1f),
-            )
-            PrimaryButton(
-                onClick = onApplyClick,
-                text = stringResource(R.string.wallet__filter_apply),
-                modifier = Modifier.weight(1f),
-            )
-        }
-        Spacer(modifier = Modifier.height(16.dp))
     }
 }