[Compound] Bloom (#1253)

* Add `bloom` and `avatarBloom` modifiers.

* Add `ConnectivityIndicatorContainer` to control the padding needed at the top.

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

features/networkmonitor/api/src/main/kotlin/io/element/android/features/networkmonitor/api/ui/ConnectivityIndicatorView.kt

@@ -18,6 +18,9 @@ package io.element.android.features.networkmonitor.api.ui
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.MutableTransitionState
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -27,34 +30,44 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.WifiOff
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.toDp
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
+/**
+ * A view that displays a connectivity indicator when the device is offline, adding a default
+ * padding to make sure the status bar is not overlapped.
+ */
 @Composable
 fun ConnectivityIndicatorView(
     isOnline: Boolean,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
     val isStatusBarPaddingVisible = remember { MutableTransitionState(isOnline) }.apply { targetState = isOnline }
@@ -78,6 +91,46 @@ fun ConnectivityIndicatorView(
     }
 }
 
+/**
+ * A view that displays a connectivity indicator when the device is offline, passing the padding
+ * needed to make sure the status bar is not overlapped to its content views.
+ */
+@Composable
+fun ConnectivityIndicatorContainer(
+    isOnline: Boolean,
+    modifier: Modifier = Modifier,
+    content: @Composable (topPadding: Dp) -> Unit,
+) {
+    val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
+
+    val statusBarTopPadding = if (LocalInspectionMode.current) {
+        // Needed to get valid UI previews
+        24.dp
+    } else {
+        WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + 6.dp
+    }
+    val target = remember(isOnline) { if (isOnline) 0.dp else statusBarTopPadding }
+    val animationStateOffset by animateDpAsState(
+        targetValue = target,
+        animationSpec = spring(
+            stiffness = Spring.StiffnessMediumLow,
+            visibilityThreshold = 1.dp,
+        ),
+        label = "insets-animation",
+    )
+
+    content(animationStateOffset)
+
+    // Display the network indicator with an animation
+    AnimatedVisibility(
+        visibleState = isIndicatorVisible,
+        enter = fadeIn() + expandVertically(),
+        exit = fadeOut() + shrinkVertically(),
+    ) {
+        Indicator(modifier)
+    }
+}
+
 @Composable
 private fun Indicator(modifier: Modifier = Modifier) {
     Row(

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -18,13 +18,13 @@ package io.element.android.features.roomlist.impl
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -45,7 +45,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Velocity
 import androidx.compose.ui.unit.dp
 import io.element.android.features.leaveroom.api.LeaveRoomView
-import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorView
+import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorContainer
 import io.element.android.features.roomlist.impl.components.RequestVerificationHeader
 import io.element.android.features.roomlist.impl.components.RoomListMenuAction
 import io.element.android.features.roomlist.impl.components.RoomListTopBar
@@ -76,8 +76,10 @@ fun RoomListView(
     onMenuActionClicked: (RoomListMenuAction) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier = modifier) {
-        ConnectivityIndicatorView(isOnline = state.hasNetworkConnection)
+    ConnectivityIndicatorContainer(
+        modifier = modifier,
+        isOnline = state.hasNetworkConnection,
+    ) { topPadding ->
         Box {
             fun onRoomLongClicked(
                 roomListRoomSummary: RoomListRoomSummary
@@ -96,6 +98,7 @@ fun RoomListView(
             LeaveRoomView(state = state.leaveRoomState)
 
             RoomListContent(
+                modifier = Modifier.padding(top = topPadding),
                 state = state,
                 onVerifyClicked = onVerifyClicked,
                 onRoomClicked = onRoomClicked,
@@ -111,6 +114,8 @@ fun RoomListView(
                 onRoomClicked = onRoomClicked,
                 onRoomLongClicked = { onRoomLongClicked(it) },
                 modifier = Modifier
+                    .statusBarsPadding()
+                    .padding(top = topPadding)
                     .fillMaxSize()
                     .background(MaterialTheme.colorScheme.background)
             )

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt

@@ -17,10 +17,13 @@
 package io.element.android.features.roomlist.impl.components
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
-import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.outlined.BugReport
 import androidx.compose.material.icons.outlined.Share
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -30,24 +33,37 @@ import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import io.element.android.features.roomlist.impl.R
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatarBloom
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.applyScaleDown
+import io.element.android.libraries.designsystem.text.roundToPx
+import io.element.android.libraries.designsystem.text.toDp
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.DropdownMenu
 import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
@@ -60,6 +76,9 @@ import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.libraries.designsystem.R as CommonR
+
+private val avatarBloomSize = 430.dp
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -89,6 +108,7 @@ fun RoomListTopBar(
 
     DefaultRoomListTopBar(
         matrixUser = matrixUser,
+        areSearchResultsDisplayed = areSearchResultsDisplayed,
         onOpenSettings = onOpenSettings,
         onSearchClicked = onToggleSearch,
         onMenuActionClicked = onMenuActionClicked,
@@ -101,6 +121,7 @@ fun RoomListTopBar(
 @Composable
 private fun DefaultRoomListTopBar(
     matrixUser: MatrixUser?,
+    areSearchResultsDisplayed: Boolean,
     scrollBehavior: TopAppBarScrollBehavior,
     onOpenSettings: () -> Unit,
     onSearchClicked: () -> Unit,
@@ -108,94 +129,139 @@ private fun DefaultRoomListTopBar(
     modifier: Modifier = Modifier,
 ) {
     var showMenu by remember { mutableStateOf(false) }
-    MediumTopAppBar(
-        modifier = modifier
-            .nestedScroll(scrollBehavior.nestedScrollConnection),
-        title = {
-            val fontStyle = if (scrollBehavior.state.collapsedFraction > 0.5)
-                ElementTheme.typography.aliasScreenTitle
-            else
-                ElementTheme.typography.fontHeadingLgBold.copy(
-                    // Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated,
-                    // ensure that the font size will never be bigger than 28.dp.
-                    fontSize = 28.dp.applyScaleDown().toSp()
-                )
-            Text(
-                style = fontStyle,
-                text = stringResource(id = R.string.screen_roomlist_main_space_title)
-            )
-        },
-        navigationIcon = {
-            if (matrixUser != null) {
-                IconButton(
-                    modifier = Modifier.testTag(TestTags.homeScreenSettings),
-                    onClick = onOpenSettings
-                ) {
-                    val avatarData by remember {
-                        derivedStateOf {
-                            matrixUser.getAvatarData(size = AvatarSize.CurrentUserTopBar)
-                        }
-                    }
-                    Avatar(avatarData, contentDescription = stringResource(CommonStrings.common_settings))
+
+    // We need this to manually clip the top app bar in preview mode
+    val previewAppBarHeight = if (LocalInspectionMode.current) {
+        112.dp.roundToPx()
+    } else {
+        null
+    }
+    val collapsedFraction = scrollBehavior.state.collapsedFraction
+    var appBarHeight by remember {
+        mutableIntStateOf(previewAppBarHeight ?: 0)
+    }
+
+    val avatarData by remember(matrixUser) {
+        derivedStateOf {
+            matrixUser?.getAvatarData(size = AvatarSize.CurrentUserTopBar)
+        }
+    }
+
+    val statusBarPadding = with (LocalDensity.current) { WindowInsets.statusBars.getTop(this).toDp() }
+
+    Box(modifier = modifier) {
+        MediumTopAppBar(
+            modifier = Modifier
+                .onSizeChanged {
+                    appBarHeight = it.height
                 }
-            }
-        },
-        actions = {
-            IconButton(
-                onClick = onSearchClicked,
-            ) {
-                Icon(
-                    imageVector = Icons.Default.Search,
-                    tint = ElementTheme.materialColors.secondary,
-                    contentDescription = stringResource(CommonStrings.action_search),
+                .nestedScroll(scrollBehavior.nestedScrollConnection)
+                .avatarBloom(
+                    avatarData = avatarData,
+                    background = ElementTheme.materialColors.background,
+                    blurSize = DpSize(avatarBloomSize, avatarBloomSize),
+                    offset = DpOffset(24.dp, 24.dp + statusBarPadding),
+                    clipToSize = if (appBarHeight > 0) DpSize(
+                        avatarBloomSize,
+                        appBarHeight.toDp()
+                    ) else DpSize.Unspecified,
+                    bottomSoftEdgeAlpha = 1f - collapsedFraction,
+                    alpha = if (areSearchResultsDisplayed) 0f else 1f,
                 )
-            }
-            IconButton(
-                onClick = { showMenu = !showMenu }
-            ) {
-                Icon(
-                    imageVector = Icons.Default.MoreVert,
-                    tint = ElementTheme.materialColors.secondary,
-                    contentDescription = null,
+                .statusBarsPadding(),
+            colors = TopAppBarDefaults.mediumTopAppBarColors(
+                containerColor = Color.Transparent,
+                scrolledContainerColor = Color.Transparent,
+            ),
+            title = {
+                val fontStyle = if (scrollBehavior.state.collapsedFraction > 0.5)
+                    ElementTheme.typography.aliasScreenTitle
+                else
+                    ElementTheme.typography.fontHeadingLgBold.copy(
+                        // Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated,
+                        // ensure that the font size will never be bigger than 28.dp.
+                        fontSize = 28.dp.applyScaleDown().toSp()
+                    )
+                Text(
+                    style = fontStyle,
+                    text = stringResource(id = R.string.screen_roomlist_main_space_title)
                 )
-            }
-            DropdownMenu(
-                expanded = showMenu,
-                onDismissRequest = { showMenu = false }
-            ) {
-                DropdownMenuItem(
-                    onClick = {
-                        showMenu = false
-                        onMenuActionClicked(RoomListMenuAction.InviteFriends)
-                    },
-                    text = { Text(stringResource(id = CommonStrings.action_invite)) },
-                    leadingIcon = {
-                        Icon(
-                            Icons.Outlined.Share,
-                            tint = ElementTheme.materialColors.secondary,
-                            contentDescription = null,
+            },
+            navigationIcon = {
+                avatarData?.let {
+                    IconButton(
+                        modifier = Modifier.testTag(TestTags.homeScreenSettings),
+                        onClick = onOpenSettings
+                    ) {
+                        Avatar(
+                            avatarData = it,
+                            contentDescription = stringResource(CommonStrings.common_settings),
                         )
                     }
-                )
-                DropdownMenuItem(
-                    onClick = {
-                        showMenu = false
-                        onMenuActionClicked(RoomListMenuAction.ReportBug)
-                    },
-                    text = { Text(stringResource(id = CommonStrings.common_report_a_bug)) },
-                    leadingIcon = {
-                        Icon(
-                            Icons.Outlined.BugReport,
-                            tint = ElementTheme.materialColors.secondary,
-                            contentDescription = null,
-                        )
-                    }
-                )
-            }
-        },
-        scrollBehavior = scrollBehavior,
-        windowInsets = WindowInsets(0.dp),
-    )
+                }
+            },
+            actions = {
+                IconButton(
+                    onClick = onSearchClicked,
+                ) {
+                    Icon(
+                        resourceId = CommonR.drawable.ic_search,
+                        contentDescription = stringResource(CommonStrings.action_search),
+                    )
+                }
+                IconButton(
+                    onClick = { showMenu = !showMenu }
+                ) {
+                    Icon(
+                        imageVector = Icons.Default.MoreVert,
+                        contentDescription = null,
+                    )
+                }
+                DropdownMenu(
+                    expanded = showMenu,
+                    onDismissRequest = { showMenu = false }
+                ) {
+                    DropdownMenuItem(
+                        onClick = {
+                            showMenu = false
+                            onMenuActionClicked(RoomListMenuAction.InviteFriends)
+                        },
+                        text = { Text(stringResource(id = CommonStrings.action_invite)) },
+                        leadingIcon = {
+                            Icon(
+                                Icons.Outlined.Share,
+                                tint = ElementTheme.materialColors.secondary,
+                                contentDescription = null,
+                            )
+                        }
+                    )
+                    DropdownMenuItem(
+                        onClick = {
+                            showMenu = false
+                            onMenuActionClicked(RoomListMenuAction.ReportBug)
+                        },
+                        text = { Text(stringResource(id = CommonStrings.common_report_a_bug)) },
+                        leadingIcon = {
+                            Icon(
+                                Icons.Outlined.BugReport,
+                                tint = ElementTheme.materialColors.secondary,
+                                contentDescription = null,
+                            )
+                        }
+                    )
+                }
+            },
+            scrollBehavior = scrollBehavior,
+            windowInsets = WindowInsets(0.dp),
+        )
+
+        HorizontalDivider(modifier =
+            Modifier.fillMaxWidth()
+                .alpha(collapsedFraction)
+                .align(Alignment.BottomCenter),
+            color = ElementTheme.materialColors.outlineVariant,
+        )
+    }
 }
 
 @Preview
@@ -211,6 +277,7 @@ internal fun DefaultRoomListTopBarDarkPreview() = ElementPreviewDark { DefaultRo
 private fun DefaultRoomListTopBarPreview() {
     DefaultRoomListTopBar(
         matrixUser = MatrixUser(UserId("@id:domain"), "Alice"),
+        areSearchResultsDisplayed = false,
         scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()),
         onOpenSettings = {},
         onSearchClicked = {},