misc: display offline banner directly in LoggedInFlowNode (and fix window insets)

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

@@ -20,6 +20,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.compound.theme.ElementTheme
@@ -32,7 +33,8 @@ import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
-internal fun Indicator(
+internal fun ConnectivityIndicator(
+    verticalPadding: Dp,
     modifier: Modifier = Modifier,
 ) {
     Row(
@@ -40,7 +42,7 @@ internal fun Indicator(
             .fillMaxWidth()
             .background(ElementTheme.colors.bgSubtlePrimary)
             .statusBarsPadding()
-            .padding(vertical = 6.dp),
+            .padding(vertical = verticalPadding),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -61,6 +63,6 @@ internal fun Indicator(
 
 @PreviewsDayNight
 @Composable
-internal fun IndicatorPreview() = ElementPreview {
-    Indicator()
+internal fun ConnectivityIndicatorPreview() = ElementPreview {
+    ConnectivityIndicator(verticalPadding = 6.dp)
 }

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

@@ -16,55 +16,58 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalInspectionMode
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
+private val INDICATOR_VERTICAL_PADDING = 6.dp
+
 /**
- * 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.
+ * A view that displays a connectivity indicator when the device is offline.
  */
 @Composable
 fun ConnectivityIndicatorContainer(
     isOnline: Boolean,
     modifier: Modifier = Modifier,
-    content: @Composable (topPadding: Dp) -> Unit = {},
+    content: @Composable (Modifier) -> 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(isIndicatorVisible.targetState, statusBarTopPadding) {
-        if (!isIndicatorVisible.targetState) 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)
+    Column(modifier = modifier) {
+        val statusBarTopPadding = if (LocalInspectionMode.current) {
+            // Needed to get valid UI previews
+            24.dp
+        } else {
+            WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + INDICATOR_VERTICAL_PADDING
+        }
+        val target = if (isIndicatorVisible.targetState) statusBarTopPadding else 0.dp
+        val topWindowInset by animateDpAsState(
+            targetValue = target,
+            animationSpec = spring(
+                stiffness = Spring.StiffnessMediumLow,
+                visibilityThreshold = 1.dp,
+            ),
+            label = "insets-animation",
+        )
+        // Display the network indicator with an animation
+        AnimatedVisibility(
+            visibleState = isIndicatorVisible,
+            enter = fadeIn() + expandVertically(),
+            exit = fadeOut() + shrinkVertically(),
+        ) {
+            ConnectivityIndicator(verticalPadding = INDICATOR_VERTICAL_PADDING)
+        }
+        // Consume the window insets to avoid double padding.
+        content(
+            Modifier.consumeWindowInsets(PaddingValues(top = topWindowInset))
+        )
     }
 }

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

@@ -1,65 +0,0 @@
-/*
- * Copyright 2023, 2024 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-package io.element.android.features.networkmonitor.api.ui
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.MutableTransitionState
-import androidx.compose.animation.expandVertically
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-
-/**
- * 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,
-) {
-    val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
-    val isStatusBarPaddingVisible = remember { MutableTransitionState(isOnline) }.apply { targetState = isOnline }
-
-    // Display the network indicator with an animation
-    AnimatedVisibility(
-        visibleState = isIndicatorVisible,
-        enter = fadeIn() + expandVertically(),
-        exit = fadeOut() + shrinkVertically(),
-    ) {
-        Indicator()
-    }
-
-    // Show missing status bar padding when the indicator is not visible
-    AnimatedVisibility(
-        visibleState = isStatusBarPaddingVisible,
-        enter = fadeIn() + expandVertically(),
-        exit = fadeOut() + shrinkVertically(),
-    ) {
-        StatusBarPaddingSpacer()
-    }
-}
-
-@Composable
-private fun StatusBarPaddingSpacer(modifier: Modifier = Modifier) {
-    Spacer(modifier = modifier.statusBarsPadding())
-}
-
-@PreviewsDayNight
-@Composable
-internal fun ConnectivityIndicatorViewPreview() {
-    ElementPreview {
-        ConnectivityIndicatorView(isOnline = false)
-    }
-}