feat: enhance haze effect integration in AppShell and AppSidebar for improved UI experience

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppShell.kt

@@ -19,6 +19,7 @@ package dev.krtirtho.spotube.modules.shell
 
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
@@ -38,6 +39,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SheetValue
 import androidx.compose.material3.Text
 import androidx.compose.material3.VerticalDivider
@@ -56,6 +58,7 @@ import androidx.compose.runtime.snapshotFlow
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import dev.chrisbanes.haze.hazeSource
@@ -120,22 +123,31 @@ fun AppShell(
         CompositionLocalProvider(LocalAppShellBottomInset provides bottomOverlayInset) {
             if (useSidebar) {
                 val hazeState = rememberHazeState()
+                val bgHazeState = rememberHazeState()
+
                 Box(modifier = Modifier.fillMaxSize()) {
                     Box(
                         modifier = Modifier
                             .fillMaxSize()
-                            .hazeSource(hazeState)
                     ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .background(MaterialTheme.colorScheme.surface)
+                                .hazeSource(state = bgHazeState) // <-- Put it here!
+                        )
                         Row(modifier = Modifier.fillMaxSize()) {
                             AppSidebar(
-                                navigator = navigator, navigationState = navigationState
+                                hazeState = bgHazeState,
+                                navigator = navigator,
+                                navigationState = navigationState
                             )
                             VerticalDivider(
                                 modifier = Modifier.fillMaxHeight(),
                                 color = Color.Gray.copy(alpha = 0.2f),
                                 thickness = 1.dp,
                             )
-                            Box(modifier = Modifier.weight(1f)) {
+                            Box(modifier = Modifier.weight(1f).hazeSource(hazeState)) {
                                 content()
                             }
                         }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppSidebar.kt

@@ -21,8 +21,6 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -50,10 +48,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.blur.HazeColorEffect
+import dev.chrisbanes.haze.blur.blurEffect
+import dev.chrisbanes.haze.hazeEffect
 import dev.krtirtho.spotube.core.navigation.NavigationState
 import dev.krtirtho.spotube.core.navigation.Navigator
 import dev.krtirtho.spotube.core.navigation.Routes
@@ -77,6 +78,7 @@ import spotube.composeapp.generated.resources.cookie_regular
 
 @Composable
 fun AppSidebar(
+    hazeState: HazeState,
     navigator: Navigator,
     navigationState: NavigationState,
     modifier: Modifier = Modifier,
@@ -85,11 +87,20 @@ fun AppSidebar(
     var expanded by rememberSaveable { mutableStateOf(true) }
     val width by animateDpAsState(targetValue = if (expanded) 236.dp else 86.dp)
     val currentLibraryTab by libraryState.currentTab.collectAsState()
+    val surfaceTint = MaterialTheme.colorScheme.surface.copy(alpha = 0.85f)
 
     Column(
         modifier = modifier
             .fillMaxHeight()
-            .width(width),
+            .width(width)
+            .hazeEffect(hazeState) {
+                blurEffect {
+                    blurRadius = 20.dp
+                    colorEffects = listOf(
+                        HazeColorEffect.tint(surfaceTint)
+                    )
+                }
+            },
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Row(