Create room: elevate selected users when scrolling

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchUserBar.kt

@@ -16,11 +16,21 @@
 
 package io.element.android.features.createroom.impl.components
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -48,6 +58,8 @@ fun SearchUserBar(
     onUserSelected: (MatrixUser) -> Unit = {},
     onUserDeselected: (MatrixUser) -> Unit = {},
 ) {
+    val columnState = rememberLazyListState()
+
     SearchBar(
         query = query,
         onQueryChange = onTextChanged,
@@ -58,17 +70,36 @@ fun SearchUserBar(
         showBackButton = showBackButton,
         contentPrefix = {
             if (isMultiSelectionEnabled && active && selectedUsers.isNotEmpty()) {
+                // We want the selected users to behave a bit like a top bar - when the list below is scrolled, the colour
+                // should change to indicate elevation.
+
+                val elevation = remember {
+                    derivedStateOf {
+                        if (columnState.canScrollBackward) {
+                            4.dp
+                        } else {
+                            0.dp
+                        }
+                    }
+                }
+
+                val appBarContainerColor by animateColorAsState(
+                    targetValue = MaterialTheme.colorScheme.surfaceColorAtElevation(elevation.value),
+                    animationSpec = spring(stiffness = Spring.StiffnessMediumLow)
+                )
+
                 SelectedUsersList(
                     contentPadding = PaddingValues(16.dp),
                     selectedUsers = selectedUsers,
                     autoScroll = true,
                     onUserRemoved = onUserDeselected,
+                    modifier = Modifier.background(appBarContainerColor)
                 )
             }
         },
         resultState = state,
         resultHandler = { users ->
-            LazyColumn {
+            LazyColumn(state = columnState) {
                 if (isMultiSelectionEnabled) {
                     itemsIndexed(users) { index, searchResult ->
                         SearchMultipleUsersResultItem(