Improve filter bottom sheet UI

Signed-off-by: starry-shivam <[email protected]>

app/src/main/java/com/starry/greenstash/ui/screens/home/composables/HomeScreen.kt

@@ -47,27 +47,24 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ModalBottomSheetLayout
-import androidx.compose.material.ModalBottomSheetState
-import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.rememberModalBottomSheetState
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.ModalNavigationDrawer
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberDrawerState
-import androidx.compose.material3.surfaceColorAtElevation
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.State
@@ -116,41 +113,15 @@ import kotlinx.coroutines.launch
 import java.util.Locale
 
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScreen(navController: NavController) {
     val viewModel: HomeViewModel = hiltViewModel()
+    val allGoalState = viewModel.goalsList.observeAsState(emptyList())
 
-    val modalBottomSheetState = rememberModalBottomSheetState(
-        initialValue = ModalBottomSheetValue.Hidden
-    )
-
-    ModalBottomSheetLayout(sheetState = modalBottomSheetState,
-        sheetShape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp),
-        sheetElevation = 24.dp,
-        sheetBackgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp),
-        sheetContent = {
-            FilterMenuSheet(viewModel = viewModel)
-        },
-        content = {
-            HomeScreenContent(
-                viewModel = viewModel,
-                navController = navController,
-                bottomSheetState = modalBottomSheetState,
-            )
-        })
-
-}
-
+    val showFilterSheet = remember { mutableStateOf(false) }
+    val filterSheetState = rememberModalBottomSheetState()
 
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-private fun HomeScreenContent(
-    viewModel: HomeViewModel,
-    navController: NavController,
-    bottomSheetState: ModalBottomSheetState,
-) {
-    val allGoalState = viewModel.goalsList.observeAsState(emptyList())
     val drawerState = rememberDrawerState(DrawerValue.Closed)
 
     val searchWidgetState by viewModel.searchWidgetState
@@ -161,6 +132,21 @@ private fun HomeScreenContent(
     val snackBarHostState = remember { SnackbarHostState() }
     val coroutineScope = rememberCoroutineScope()
 
+    if (showFilterSheet.value) {
+        ModalBottomSheet(
+            onDismissRequest = {
+                coroutineScope.launch {
+                    filterSheetState.hide()
+                    delay(300)
+                    showFilterSheet.value = false
+                }
+            },
+            sheetState = filterSheetState
+        ) {
+            FilterSheetContent(viewModel = viewModel)
+        }
+    }
+
     ModalNavigationDrawer(
         drawerState = drawerState,
         gesturesEnabled = drawerState.isOpen,
@@ -183,7 +169,9 @@ private fun HomeScreenContent(
                     HomeAppBar(
                         onMenuClicked = { coroutineScope.launch { drawerState.open() } },
                         onFilterClicked = {
-                            coroutineScope.launch { bottomSheetState.show() }
+
+                            showFilterSheet.value = true
+
                         },
                         onSearchClicked = { viewModel.updateSearchWidgetState(newValue = SearchWidgetState.OPENED) },
                         searchWidgetState = searchWidgetState,
@@ -431,19 +419,12 @@ private fun HomeExtendedFAB(
 
 
 @Composable
-private fun FilterMenuSheet(viewModel: HomeViewModel) {
+private fun FilterSheetContent(viewModel: HomeViewModel) {
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(12.dp)
     ) {
-        Text(
-            text = stringResource(id = R.string.filter_menu_title),
-            fontWeight = FontWeight.SemiBold,
-            fontSize = 20.sp,
-            fontFamily = greenstashFont,
-            modifier = Modifier.padding(start = 8.dp, bottom = 6.dp)
-        )
         Row(modifier = Modifier.fillMaxWidth()) {
             Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.Center) {
                 FilterField.entries.forEach {
@@ -462,6 +443,8 @@ private fun FilterMenuSheet(viewModel: HomeViewModel) {
                 }
             }
         }
+
+        Spacer(modifier = Modifier.height(16.dp))
     }
 }
 

app/src/main/java/com/starry/greenstash/ui/screens/input/composables/InputScreen.kt

@@ -479,7 +479,7 @@ fun InputScreen(editGoalId: String?, navController: NavController) {
 }
 
 @Composable
-fun InputTipCard(
+private fun InputTipCard(
     icon: ImageVector,
     description: String,
     showTipCard: Boolean,

app/src/main/res/values-es/strings.xml

@@ -39,7 +39,6 @@
     <string name="new_goal_fab">Nueva Meta</string>
     <string name="new_goal_onboarding_title">¡Comencemos creando un nuevo objetivo de ahorro!</string>
     <string name="new_goal_onboarding_desc">Haz clic en el botón de acción flotante para crear un nuevo objetivo de ahorro.</string>
-    <string name="filter_menu_title">Filter By</string>
     <string name="home_search_label">Busca aquí…</string>
     <string name="search_goal_not_found">404: ¡Meta no encontrada!</string>
 

app/src/main/res/values-tr/strings.xml

@@ -39,7 +39,6 @@
     <string name="new_goal_fab">Yeni Hedef</string>
     <string name="new_goal_onboarding_title">Yeni bir tasarruf hedefi oluşturarak başlayalım!</string>
     <string name="new_goal_onboarding_desc">Yeni bir tasarruf hedefi oluşturmak için hareketli işlem düğmesine tıklayın.</string>
-    <string name="filter_menu_title">Filtrele</string>
     <string name="home_search_label">Ara…</string>
     <string name="search_goal_not_found">404: Hedef bulunamadı!</string>>
 

app/src/main/res/values-zh-rCN/strings.xml

@@ -39,7 +39,6 @@
     <string name="new_goal_fab">新目标</string>
     <string name="new_goal_onboarding_title">让我们从创建一个新的储蓄目标开始吧！</string>
     <string name="new_goal_onboarding_desc">点击浮动操作按钮创建一个新的储蓄目标。</string>
-    <string name="filter_menu_title">过滤，按</string>
     <string name="home_search_label">搜索此处…</string>
     <string name="search_goal_not_found">404: 目标未发现！</string>>
 

app/src/main/res/values-zh-rTW/strings.xml

@@ -39,7 +39,6 @@
     <string name="new_goal_fab">新目標</string>
     <string name="new_goal_onboarding_title">讓我們開始建立新的儲蓄目標吧！</string>
     <string name="new_goal_onboarding_desc">點選浮動動作按鈕以建立新的儲蓄目標。</string>
-    <string name="filter_menu_title">篩選條件</string>
     <string name="home_search_label">在此搜尋…</string>
     <string name="search_goal_not_found">404：找不到目標！</string>
 

app/src/main/res/values/strings.xml

@@ -39,7 +39,6 @@
     <string name="new_goal_fab">New Goal</string>
     <string name="new_goal_onboarding_title">Let\'s start by creating a new saving goal!</string>
     <string name="new_goal_onboarding_desc">Click on the floating action button to create a new saving goal.</string>
-    <string name="filter_menu_title">Filter By</string>
     <string name="home_search_label">Search here…</string>
     <string name="search_goal_not_found">404: Goal not found!</string>>