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,21 +94,24 @@ fun OverviewScreen(component: OverviewComponent) {
             },
             scrollBehavior = scrollBehavior,
             snackbarState = snackbarState,
-            content = {
-                when {
+            content = { padding ->
+                AnimatedContent(details) {
+                    when {
 
-                    errorState != null -> ErrorAndRetry(
-                        errorMsg = errorState!!
-                    ) { component.loadDetailsIfNeeded() }
+                        errorState != null -> ErrorAndRetry(
+                            errorMsg = errorState!!
+                        ) { component.loadDetailsIfNeeded() }
 
-                    details != null -> DetailsInfo(
-                        details = details!!,
-                        paddingValues = it,
-                        onWatchClicked = { component.watch() }
-                    )
+                        details != null -> DetailsInfo(
+                            details = details!!,
+                            paddingValues = padding,
+                            onWatchClicked = { component.watch() }
+                        )
 
-                    else -> Loading()
+                        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,23 +119,34 @@ private fun <T : Route> BottomBar(
     onSelectNavigation: ((T) -> Unit)?
 ) {
     val blurState = LocalBlurState.current
-    navigationEntries?.let {
-        NavigationBar(
-            containerColor = ComponentDefaults.navBarContentColor(),
-            modifier = ComponentDefaults.roundedClip().applyBlurEffect(blurState)
+    navigationEntries?.let { entries ->
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.Transparent)
+                .padding(horizontal = 24.dp, vertical = 16.dp)
+                .windowInsetsPadding(WindowInsets.navigationBars)
         ) {
-            it.forEach { entry ->
-                NavigationBarItem(
-                    currentRoute == entry.route,
-                    onClick = { onSelectNavigation?.invoke(entry.route) },
-                    icon = { Icon(entry.painter, contentDescription = entry.title) },
-                    label = { Text(entry.title) }
-                )
+            NavigationBar(
+                containerColor = ComponentDefaults.navBarContentColor(),
+                modifier = ComponentDefaults.roundedClip()
+                    .fillMaxWidth()
+                    .applyBlurEffect(blurState)
+            ) {
+                entries.forEach { entry ->
+                    NavigationBarItem(
+                        selected = currentRoute == entry.route,
+                        onClick = { onSelectNavigation?.invoke(entry.route) },
+                        icon = { Icon(entry.painter, contentDescription = entry.title) },
+                        label = { Text(entry.title) }
+                    )
+                }
             }
         }
     }
 }
 
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun <T : Route> ExpandedContent(
@@ -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)) {
-        NavigationRail(modifier = Modifier.padding(horizontal = 4.dp)) {
+    Row(modifier = Modifier.fillMaxSize()) {
+        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,16 +16,16 @@ fun Nav(
     rootComponent: RootComponent<*>,
     process: @Composable (child: Child, route: Route) -> Unit
 ) {
-    Children(
-        stack = rootComponent.valueChildStack,
-        animation = predictiveBackAnimation(
-            backHandler = rootComponent.backHandler,
-            fallbackAnimation = stackAnimation(fade()),
-            onBack = rootComponent::onBack,
-            selector = { backEvent, _, _ -> androidPredictiveBackAnimatableV2(backEvent) },
-        ),
-    ) {
-        MaterialTheme(getColorScheme()) {
+    MaterialExpressiveTheme {
+        Children(
+            stack = rootComponent.valueChildStack,
+            animation = predictiveBackAnimation(
+                backHandler = rootComponent.backHandler,
+                fallbackAnimation = stackAnimation(fade()),
+                onBack = rootComponent::onBack,
+                selector = { backEvent, _, _ -> androidPredictiveBackAnimatableV2(backEvent) },
+            ),
+        ) {
             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
         }