update bottom bar interface

apps/vbox/client/shared/src/commonMain/kotlin/ru/shadowsparky/vbox/shared/presentation/overview/OverviewScreen.kt

@@ -13,6 +13,7 @@ import androiddev.apps.vbox.client.shared.generated.resources.star
 import androiddev.apps.vbox.client.shared.generated.resources.star_unchecked
 import androiddev.apps.vbox.client.shared.generated.resources.user_tags
 import androiddev.apps.vbox.client.shared.generated.resources.watch
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -93,7 +94,8 @@ fun OverviewScreen(component: OverviewComponent) {
             },
             scrollBehavior = scrollBehavior,
             snackbarState = snackbarState,
-            content = {
+            content = { padding ->
+                AnimatedContent(details) {
                     when {
 
                         errorState != null -> ErrorAndRetry(
@@ -102,12 +104,14 @@ fun OverviewScreen(component: OverviewComponent) {
 
                         details != null -> DetailsInfo(
                             details = details!!,
-                        paddingValues = it,
+                            paddingValues = padding,
                             onWatchClicked = { component.watch() }
                         )
 
                         else -> Loading()
                     }
+                }
+
                 if (tagsBottomSheetVisible) {
                     val allTags by component.allTags.collectAsState(null)
                     val movieTags by component.movieTags.collectAsState(null)

libs/ui/src/commonMain/kotlin/ru/shadowsparky/ui/BaseScreen.kt

@@ -1,13 +1,17 @@
 package ru.shadowsparky.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
@@ -26,6 +30,7 @@ import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.unit.LayoutDirection
@@ -114,14 +119,23 @@ private fun <T : Route> BottomBar(
     onSelectNavigation: ((T) -> Unit)?
 ) {
     val blurState = LocalBlurState.current
-    navigationEntries?.let {
+    navigationEntries?.let { entries ->
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.Transparent)
+                .padding(horizontal = 24.dp, vertical = 16.dp)
+                .windowInsetsPadding(WindowInsets.navigationBars)
+        ) {
             NavigationBar(
                 containerColor = ComponentDefaults.navBarContentColor(),
-            modifier = ComponentDefaults.roundedClip().applyBlurEffect(blurState)
+                modifier = ComponentDefaults.roundedClip()
+                    .fillMaxWidth()
+                    .applyBlurEffect(blurState)
             ) {
-            it.forEach { entry ->
+                entries.forEach { entry ->
                     NavigationBarItem(
-                    currentRoute == entry.route,
+                        selected = currentRoute == entry.route,
                         onClick = { onSelectNavigation?.invoke(entry.route) },
                         icon = { Icon(entry.painter, contentDescription = entry.title) },
                         label = { Text(entry.title) }
@@ -130,6 +144,8 @@ private fun <T : Route> BottomBar(
             }
         }
     }
+}
+
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -143,8 +159,8 @@ private fun <T : Route> ExpandedContent(
     val topPadding = values.calculateTopPadding()
     val bottomPadding = values.calculateBottomPadding()
     val endPadding = values.calculateEndPadding(LayoutDirection.Ltr)
-    Row(modifier = Modifier.fillMaxSize().padding(top = topPadding)) {
+    Row(modifier = Modifier.fillMaxSize()) {
-        NavigationRail(modifier = Modifier.padding(horizontal = 4.dp)) {
+        NavigationRail(modifier = Modifier.padding(start = 4.dp, end = 4.dp, top = topPadding)) {
             navigationEntries.forEach { entry ->
                 NavigationRailItem(
                     selected = currentRoute == entry.route,
@@ -157,6 +173,7 @@ private fun <T : Route> ExpandedContent(
         Box(modifier = Modifier.weight(1f)) {
             content(
                 PaddingValues(
+                    top = topPadding,
                     end = endPadding,
                     bottom = bottomPadding
                 )

libs/ui/src/commonMain/kotlin/ru/shadowsparky/ui/nav/Nav.kt

@@ -1,7 +1,7 @@
 package ru.shadowsparky.ui.nav
 
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MaterialExpressiveTheme
 import androidx.compose.runtime.Composable
 import com.arkivanov.decompose.ExperimentalDecomposeApi
 import com.arkivanov.decompose.extensions.compose.stack.Children
@@ -9,7 +9,6 @@ import com.arkivanov.decompose.extensions.compose.stack.animation.fade
 import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback.androidPredictiveBackAnimatableV2
 import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback.predictiveBackAnimation
 import com.arkivanov.decompose.extensions.compose.stack.animation.stackAnimation
-import ru.shadowsparky.ui.theme.getColorScheme
 
 @OptIn(ExperimentalDecomposeApi::class, ExperimentalMaterial3ExpressiveApi::class)
 @Composable
@@ -17,6 +16,7 @@ fun Nav(
     rootComponent: RootComponent<*>,
     process: @Composable (child: Child, route: Route) -> Unit
 ) {
+    MaterialExpressiveTheme {
         Children(
             stack = rootComponent.valueChildStack,
             animation = predictiveBackAnimation(
@@ -26,7 +26,6 @@ fun Nav(
                 selector = { backEvent, _, _ -> androidPredictiveBackAnimatableV2(backEvent) },
             ),
         ) {
-        MaterialTheme(getColorScheme()) {
             process(it.instance, it.configuration as Route)
         }
     }

libs/ui/src/commonMain/kotlin/ru/shadowsparky/ui/theme/ComponentDefaults.kt

@@ -3,6 +3,7 @@ package ru.shadowsparky.ui.theme
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.AppBarWithSearchColors
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBarDefaults
 import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.material3.TopAppBarColors
@@ -31,7 +32,7 @@ object ComponentDefaults {
     @Composable
     fun navBarContentColor(): Color {
         return if (isBlurEnabled()) {
-            Color.Transparent
+            MaterialTheme.colorScheme.surfaceContainerHigh.copy(alpha = 0.5f)
         } else {
             NavigationBarDefaults.containerColor
         }