Merge branch 'dev'

Author: nsh07

composeApp/build.gradle.kts

@@ -47,6 +47,8 @@ kotlin {
 
             implementation(libs.ktor.client.content.negotiation)
             implementation(libs.ktor.serialization.kotlinx.json)
+
+            implementation(libs.haze)
         }
         commonTest.dependencies {
             implementation(libs.kotlin.test)

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt

@@ -1,21 +1,31 @@
 package org.nsh07.nsh07.ui.homeScreen
 
 import androidx.compose.animation.*
+import androidx.compose.animation.core.FastOutLinearInEasing
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.*
+import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.motionScheme
 import androidx.compose.material3.MaterialTheme.typography
+import androidx.compose.material3.TopAppBarDefaults.pinnedScrollBehavior
+import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
 import androidx.window.core.layout.WindowSizeClass
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.hazeEffect
+import dev.chrisbanes.haze.hazeSource
+import dev.chrisbanes.haze.rememberHazeState
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@@ -129,6 +139,24 @@ fun AppHomeScreen(
             }
         }
     } else {
+        val scrollBehavior = pinnedScrollBehavior()
+        val hazeState = rememberHazeState(true)
+        val topAppBarColors = topAppBarColors(
+            containerColor = colorScheme.surface,
+            scrolledContainerColor = colorScheme.surface
+        )
+
+        val targetColor by remember(scrollBehavior) {
+            derivedStateOf {
+                val overlappingFraction = scrollBehavior.state.overlappedFraction
+                lerp(
+                    topAppBarColors.containerColor,
+                    topAppBarColors.scrolledContainerColor,
+                    FastOutLinearInEasing.transform(if (overlappingFraction > 0.01f) 1f else 0f),
+                )
+            }
+        }
+
         Scaffold(
             topBar = {
                 AnimatedVisibility(
@@ -168,10 +196,27 @@ fun AppHomeScreen(
                                     else -> Text("About")
                                 }
                             }
-                        }
+                        },
+                        scrollBehavior = scrollBehavior,
+                        colors = topAppBarColors.copy(
+                            scrolledContainerColor = topAppBarColors.scrolledContainerColor.copy(
+                                0.7f
+                            )
+                        ),
+                        modifier = Modifier
+                            .hazeEffect(
+                                hazeState,
+                                style = HazeStyle(
+                                    backgroundColor = targetColor,
+                                    tint = null,
+                                    blurRadius = 20.dp,
+                                    noiseFactor = 0f
+                                )
+                            )
                     )
                 }
-            }
+            },
+            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
         ) { innerPadding ->
             val layoutDirection = LocalLayoutDirection.current
             LazyColumn(
@@ -182,19 +227,17 @@ fun AppHomeScreen(
                     end = innerPadding.calculateEndPadding(layoutDirection),
                     bottom = 48.dp
                 ),
-                modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp)
+                modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp).hazeSource(hazeState)
             ) {
                 item { NameAndDesc(horizontalPadding = 16.dp) }
-                item {
-                    SocialIcons(Modifier.padding(top = 32.dp, start = 12.dp, end = 12.dp))
-                    Spacer(Modifier.height(96.dp))
-                }
+                item { SocialIcons(Modifier.padding(top = 32.dp, start = 12.dp, end = 12.dp)) }
                 mainContent(
                     paragraphs,
                     experiences,
                     projectState,
                     cardPadding,
-                    uriHandler
+                    uriHandler,
+                    topPadding = 96.dp
                 )
             }
         }

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/HomeScreenContent.kt

@@ -88,9 +88,11 @@ fun LazyListScope.mainContent(
     experiences: List<Experience>,
     projectState: ProjectsState,
     cardPadding: Dp,
-    uriHandler: UriHandler
+    uriHandler: UriHandler,
+    topPadding: Dp = 0.dp
 ) {
     items(paragraphs, key = { it.substring(0, 16) }) {
+        Spacer(Modifier.height(topPadding))
         Text(
             it,
             style = typography.bodyLarge,

gradle/libs.versions.toml

@@ -2,6 +2,7 @@
 androidx-lifecycle = "2.9.4"
 coil3 = "3.3.0"
 composeMultiplatform = "1.10.0-alpha02"
+haze = "1.6.10"
 kotlin = "2.2.20"
 ksp = "2.2.20-2.0.4"
 ktor = "3.3.1"
@@ -13,6 +14,7 @@ androidx-lifecycle-viewmodelCompose = { module = "org.jetbrains.androidx.lifecyc
 coil-kt = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3" }
 coil-kt-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil3" }
 compose-material3-adaptive = { module = "org.jetbrains.compose.material3.adaptive:adaptive", version.ref = "material3-adaptive" }
+haze = { module = "dev.chrisbanes.haze:haze", version.ref = "haze" }
 kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
 ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
 ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }