Optimize ModalBottomSheet

Author: SanmerDev

app/src/main/kotlin/com/sanmer/mrepo/ui/component/LicenseContent.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -44,7 +43,8 @@ import timber.log.Timber
 
 @Composable
 fun LicenseContent(
-    licenseId: String
+    licenseId: String,
+    modifier: Modifier = Modifier
 ) {
     var license: License? by remember { mutableStateOf(null) }
     var message: String? by remember { mutableStateOf(null) }
@@ -62,22 +62,28 @@ fun LicenseContent(
         label = "LicenseContent"
     ) {
         when {
-            it.isLoading -> Loading(minHeight = 200.dp)
-            it.isSucceeded -> ViewLicense(license = checkNotNull(license))
-            it.isFailed -> Failed(message = message, minHeight = 200.dp)
+            it.isLoading -> Loading(
+                minHeight = 200.dp
+            )
+            it.isSucceeded -> ViewLicense(
+                license = checkNotNull(license),
+                modifier = modifier
+            )
+            it.isFailed -> Failed(
+                message = message,
+                minHeight = 200.dp
+            )
         }
     }
 }
 
 @Composable
 private fun ViewLicense(
-    license: License
+    license: License,
+    modifier: Modifier = Modifier
 ) = Column(
-    modifier = Modifier
-        .padding(top = 18.dp)
-        .padding(horizontal = 18.dp)
-        .fillMaxSize(),
-    verticalArrangement = Arrangement.spacedBy(18.dp),
+    modifier = modifier,
+    verticalArrangement = Arrangement.spacedBy(16.dp),
     horizontalAlignment = Alignment.CenterHorizontally
 ) {
     Surface(

app/src/main/kotlin/com/sanmer/mrepo/ui/component/NavigationBarsSpacer.kt

@@ -0,0 +1,23 @@
+package com.sanmer.mrepo.ui.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun NavigationBarsSpacer(
+    modifier: Modifier = Modifier
+) {
+    val paddingValues = WindowInsets.navigationBars.asPaddingValues()
+
+    Box(
+        modifier = Modifier.padding(paddingValues)
+    ) {
+        Spacer(modifier = modifier)
+    }
+}

app/src/main/kotlin/com/sanmer/mrepo/ui/component/VersionItemBottomSheet.kt

@@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -72,7 +71,7 @@ fun VersionItemBottomSheet(
         onDismissRequest = onClose,
         sheetState = state,
         shape = BottomSheetDefaults.expandedShape(15.dp),
-        windowInsets = WindowInsets.navigationBars,
+        windowInsets = WindowInsets(0),
         dragHandle = {
             if (hasChangelog) {
                 BottomSheetDefaults.DragHandle()
@@ -113,6 +112,8 @@ fun VersionItemBottomSheet(
                 onClose = onClose
             )
         }
+
+        NavigationBarsSpacer()
     }
 }
 

app/src/main/kotlin/com/sanmer/mrepo/ui/screens/modules/ModulesMenu.kt

@@ -5,15 +5,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -30,6 +28,7 @@ import com.sanmer.mrepo.R
 import com.sanmer.mrepo.datastore.modules.ModulesMenuExt
 import com.sanmer.mrepo.datastore.repository.Option
 import com.sanmer.mrepo.ui.component.MenuChip
+import com.sanmer.mrepo.ui.component.NavigationBarsSpacer
 import com.sanmer.mrepo.ui.component.Segment
 import com.sanmer.mrepo.ui.component.SegmentedButtons
 import com.sanmer.mrepo.ui.component.SegmentedButtonsDefaults
@@ -63,15 +62,14 @@ fun ModulesMenu(
 
 @Composable
 private fun BottomSheet(
-    state: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     onClose: () -> Unit,
     menu: ModulesMenuExt,
     setMenu: (ModulesMenuExt) -> Unit
 ) = ModalBottomSheet(
     onDismissRequest = onClose,
-    sheetState = state,
+    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     shape = BottomSheetDefaults.expandedShape(15.dp),
-    windowInsets = WindowInsets.navigationBars
+    windowInsets = WindowInsets(0)
 ) {
     val options = listOf(
         Option.NAME to R.string.menu_sort_option_name,
@@ -139,4 +137,6 @@ private fun BottomSheet(
             )
         }
     }
+
+    NavigationBarsSpacer()
 }

app/src/main/kotlin/com/sanmer/mrepo/ui/screens/repository/RepositoryMenu.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -15,7 +14,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -35,6 +33,7 @@ import com.sanmer.mrepo.datastore.repository.RepositoryMenuExt
 import com.sanmer.mrepo.model.online.OnlineModule
 import com.sanmer.mrepo.model.state.OnlineState
 import com.sanmer.mrepo.ui.component.MenuChip
+import com.sanmer.mrepo.ui.component.NavigationBarsSpacer
 import com.sanmer.mrepo.ui.component.Segment
 import com.sanmer.mrepo.ui.component.SegmentedButtons
 import com.sanmer.mrepo.ui.component.SegmentedButtonsDefaults
@@ -68,15 +67,14 @@ fun RepositoryMenu(
 
 @Composable
 private fun BottomSheet(
-    state: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     onClose: () -> Unit,
     menu: RepositoryMenuExt,
     setMenu: (RepositoryMenuExt) -> Unit
 ) = ModalBottomSheet(
     onDismissRequest = onClose,
-    sheetState = state,
+    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     shape = BottomSheetDefaults.expandedShape(15.dp),
-    windowInsets = WindowInsets.navigationBars
+    windowInsets = WindowInsets(0)
 ) {
     val options = listOf(
         Option.NAME to R.string.menu_sort_option_name,
@@ -174,5 +172,7 @@ private fun BottomSheet(
                 label = { Text(text = stringResource(id = R.string.menu_show_updated)) }
             )
         }
+
+        NavigationBarsSpacer()
     }
 }

app/src/main/kotlin/com/sanmer/mrepo/ui/screens/repository/view/items/LicenseItem.kt

@@ -2,12 +2,11 @@ package com.sanmer.mrepo.ui.screens.repository.view.items
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -19,6 +18,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.sanmer.mrepo.R
 import com.sanmer.mrepo.ui.component.LicenseContent
+import com.sanmer.mrepo.ui.component.NavigationBarsSpacer
 import com.sanmer.mrepo.ui.utils.expandedShape
 
 @Composable
@@ -35,17 +35,23 @@ fun LicenseItem(
     if (open) {
         ModalBottomSheet(
             onDismissRequest = { open = false },
-            sheetState = rememberModalBottomSheetState(),
             shape = BottomSheetDefaults.expandedShape(15.dp),
-            windowInsets = WindowInsets.navigationBars
+            windowInsets = WindowInsets(0)
         ) {
             Text(
                 text = stringResource(id = R.string.license_title),
                 style = MaterialTheme.typography.headlineSmall,
                 modifier = Modifier.align(Alignment.CenterHorizontally)
             )
 
-            LicenseContent(licenseId = licenseId)
+            LicenseContent(
+                licenseId = licenseId,
+                modifier = Modifier
+                    .padding(top = 16.dp)
+                    .padding(horizontal = 16.dp)
+            )
+
+            NavigationBarsSpacer()
         }
     }
 }

app/src/main/kotlin/com/sanmer/mrepo/ui/screens/repository/view/items/TrackItem.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -21,7 +20,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -35,6 +33,7 @@ import androidx.compose.ui.unit.dp
 import com.sanmer.mrepo.R
 import com.sanmer.mrepo.database.entity.Repo
 import com.sanmer.mrepo.model.online.TrackJson
+import com.sanmer.mrepo.ui.component.NavigationBarsSpacer
 import com.sanmer.mrepo.ui.utils.expandedShape
 import com.sanmer.mrepo.utils.extensions.toDateTime
 
@@ -52,9 +51,8 @@ fun TrackItem(
     if (open) {
         ModalBottomSheet(
             onDismissRequest = { open = false },
-            sheetState = rememberModalBottomSheetState(),
             shape = BottomSheetDefaults.expandedShape(15.dp),
-            windowInsets = WindowInsets.navigationBars
+            windowInsets = WindowInsets(0)
         ) {
             Text(
                 text = stringResource(id = R.string.view_module_view_track),
@@ -63,8 +61,10 @@ fun TrackItem(
             )
 
             LazyColumn(
-                modifier = Modifier.padding(all = 18.dp),
-                verticalArrangement = Arrangement.spacedBy(18.dp)
+                modifier = Modifier
+                    .padding(top = 16.dp)
+                    .padding(horizontal = 16.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
                 items(
                     items = tracks,
@@ -75,6 +75,10 @@ fun TrackItem(
                         track = track
                     )
                 }
+
+                item {
+                    NavigationBarsSpacer()
+                }
             }
         }
     }

app/src/main/kotlin/com/sanmer/mrepo/ui/screens/settings/app/items/AppThemeItem.kt

@@ -1,12 +1,10 @@
 package com.sanmer.mrepo.ui.screens.settings.app.items
 
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -20,6 +18,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.sanmer.mrepo.R
 import com.sanmer.mrepo.datastore.DarkMode
+import com.sanmer.mrepo.ui.component.NavigationBarsSpacer
 import com.sanmer.mrepo.ui.component.SettingNormalItem
 import com.sanmer.mrepo.ui.utils.expandedShape
 
@@ -52,10 +51,8 @@ fun AppThemeItem(
     }
 }
 
-
 @Composable
 private fun BottomSheet(
-    state: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     onClose: () -> Unit,
     themeColor: Int,
     darkMode: DarkMode,
@@ -64,9 +61,9 @@ private fun BottomSheet(
     onDarkModeChange: (DarkMode) -> Unit,
 ) = ModalBottomSheet(
     onDismissRequest = onClose,
-    sheetState = state,
+    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     shape = BottomSheetDefaults.expandedShape(15.dp),
-    windowInsets = WindowInsets.navigationBars
+    windowInsets = WindowInsets(0)
 ) {
     Text(
         text = stringResource(id = R.string.settings_app_theme),
@@ -86,6 +83,8 @@ private fun BottomSheet(
         darkMode = darkMode,
         onChange = onDarkModeChange
     )
+
+    NavigationBarsSpacer()
 }
 
 @Composable