ui: improve library screen

Author: mrlem

features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListScreen.kt

@@ -1,29 +1,41 @@
 package org.mrlem.composesample.features.library.ui.list
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 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.text.input.TextFieldValue
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import org.mrlem.android.core.feature.ui.UiModePreviews
@@ -43,6 +55,7 @@ internal fun ListScreen(
                 when (effect) {
                     is ListViewEffect.GoToItem ->
                         onItemSelect(effect.id)
+
                     is ListViewEffect.ShowError ->
                         snackbarHostState.showSnackbar("Failed to retrieve data")
                 }
@@ -53,25 +66,51 @@ internal fun ListScreen(
         viewModel.handleRedirections()
     }
 
+    ListScreen(
+        state = state,
+        onAction = viewModel::onAction,
+    )
+}
+
+@Composable
+private fun ListScreen(
+    state: ListViewState,
+    onAction: (ListViewAction) -> Unit,
+) {
     Column {
         var fieldValue by remember {
             mutableStateOf(TextFieldValue(state.filter))
         }
+
         TextField(
             value = fieldValue,
+            singleLine = true,
             onValueChange = {
                 fieldValue = it
-                viewModel.onAction(ListViewAction.FilterChange(it.text))
+                onAction(ListViewAction.FilterChange(it.text))
             },
+            shape = MaterialTheme.shapes.medium,
+            colors = TextFieldDefaults.colors(
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                disabledIndicatorColor = Color.Transparent,
+                errorIndicatorColor = Color.Transparent,
+            ),
+            placeholder = { Text("Filter articles") },
             modifier = Modifier
-                .fillMaxWidth(),
+                .fillMaxWidth()
+                .padding(
+                    start = Theme.size.medium,
+                    top = Theme.size.medium,
+                    end = Theme.size.medium,
+                ),
         )
 
         List(
             state = state,
             modifier = Modifier
                 .fillMaxSize(),
-            onAction = viewModel::onAction,
+            onAction = onAction,
         )
     }
 }
@@ -85,14 +124,47 @@ private fun List(
     Box(
         modifier = modifier,
     ) {
-        LazyColumn(
+        val listState = rememberLazyListState()
+
+        val showShadow by remember {
+            derivedStateOf { listState.canScrollBackward }
+        }
+
+        Box(
             modifier = Modifier
-                .fillMaxSize(),
+                .fillMaxWidth(),
         ) {
-            items(state.items) {
-                ListItem(
-                    viewState = it,
-                    onAction = onAction,
+            LazyColumn(
+                state = listState,
+                modifier = Modifier
+                    .fillMaxSize(),
+            ) {
+                items(state.items) {
+                    ListItem(
+                        viewState = it,
+                        onAction = onAction,
+                    )
+                }
+            }
+
+            AnimatedVisibility(
+                visible = showShadow,
+                enter = fadeIn(),
+                exit = fadeOut(),
+                modifier = Modifier.align(Alignment.TopCenter),
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(Theme.size.medium)
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    MaterialTheme.colorScheme.background,
+                                    Color.Transparent,
+                                ),
+                            ),
+                        ),
                 )
             }
         }
@@ -102,7 +174,7 @@ private fun List(
             shape = CircleShape,
             modifier = Modifier
                 .padding(Theme.size.medium)
-                .align(Alignment.TopEnd),
+                .align(Alignment.BottomEnd),
         ) {
             Icon(imageVector = Icons.Filled.Add, contentDescription = "Import random bookmark")
         }
@@ -114,7 +186,7 @@ private fun List(
 private fun Preview() {
     Theme {
         Surface {
-            List(
+            ListScreen(
                 state = ListViewState(
                     items = listOf(
                         ListItemViewState(
@@ -128,6 +200,7 @@ private fun Preview() {
                         ),
                     ),
                 ),
+                onAction = {},
             )
         }
     }