kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2026-08-05 19:59:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2026-07-20 14:04:49 +06:00
parent edc7cdd3fa
commit 7d1a6750c3
2 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()
}
}

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

@ -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(