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