Improve UI and animations

app/src/main/java/com/starry/greenstash/ui/common/SelectableChipGroup.kt

@@ -1,3 +1,28 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) [2022 - Present] Stɑrry Shivɑm
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
 package com.starry.greenstash.ui.common
 
 import androidx.compose.animation.AnimatedVisibility

app/src/main/java/com/starry/greenstash/ui/navigation/NavAnimation.kt

@@ -0,0 +1,106 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) [2022 - Present] Stɑrry Shivɑm
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+package com.starry.greenstash.ui.navigation
+
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+
+// Duration of the navigation animation
+private const val NAVIGATION_ANIM_DURATION = 360
+
+/**
+ * Enter transition for the navigation animation
+ */
+fun enterTransition() = slideInHorizontally(
+    initialOffsetX = { NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.5).toInt(),
+        easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1f)
+    )
+) + fadeIn(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearOutSlowInEasing
+    )
+)
+
+/**
+ * Exit transition for the navigation animation
+ */
+fun exitTransition() = slideOutHorizontally(
+    targetOffsetX = { -NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.5).toInt(),
+        easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1f)
+    )
+) + fadeOut(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearOutSlowInEasing
+    )
+)
+
+/**
+ * Enter transition for the pop navigation animation
+ */
+fun popEnterTransition() = slideInHorizontally(
+    initialOffsetX = { -NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.2).toInt(),
+        easing = CubicBezierEasing(0.6f, 0.05f, 0.19f, 0.95f)
+    )
+) + fadeIn(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION / 2,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearEasing
+    )
+)
+
+/**
+ * Exit transition for the pop navigation animation
+ */
+fun popExitTransition() = slideOutHorizontally(
+    targetOffsetX = { NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.2).toInt(),
+        easing = CubicBezierEasing(0.6f, 0.05f, 0.19f, 0.95f)
+    )
+) + fadeOut(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION / 2,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearEasing
+    )
+)

app/src/main/java/com/starry/greenstash/ui/navigation/NavGraph.kt

@@ -25,12 +25,6 @@
 
 package com.starry.greenstash.ui.navigation
 
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.background
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -53,33 +47,6 @@ import com.starry.greenstash.ui.screens.settings.composables.SettingsScreen
 import com.starry.greenstash.ui.screens.welcome.composables.WelcomeScreen
 
 
-private const val NAVIGATION_ANIM_DURATION = 300
-
-private fun enterTransition() = slideInHorizontally(
-    initialOffsetX = { NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeIn(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun exitTransition() = slideOutHorizontally(
-    targetOffsetX = { -NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeOut(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun popEnterTransition() = slideInHorizontally(
-    initialOffsetX = { -NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeIn(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun popExitTransition() = slideOutHorizontally(
-    targetOffsetX = { NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeOut(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-
 @Composable
 fun NavGraph(
     navController: NavHostController,

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/info/composables/EditTransactionSheet.kt

@@ -78,7 +78,8 @@ import java.time.Instant
 import java.time.LocalDateTime
 import java.util.TimeZone
 
-@ExperimentalMaterial3Api
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun EditTransactionSheet(
     transaction: Transaction,