Fixed edge to edge on accounts screen

Signed-off-by: Arnau Mora <[email protected]>

Author: ArnyminerZ

app/src/main/kotlin/at/bitfire/davdroid/ui/AccountsDrawerHandler.kt

@@ -12,8 +12,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
@@ -52,6 +54,8 @@ import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
 import at.bitfire.davdroid.BuildConfig
 import at.bitfire.davdroid.R
+import at.bitfire.davdroid.ui.edgetoedge.onlyLandscape
+import at.bitfire.davdroid.ui.edgetoedge.onlyPortrait
 import at.bitfire.davdroid.ui.webdav.WebdavMountsActivity
 import kotlinx.coroutines.launch
 import java.net.URI
@@ -81,6 +85,8 @@ abstract class AccountsDrawerHandler {
         Column(modifier = Modifier
             .fillMaxWidth()
             .verticalScroll(rememberScrollState())
+            .onlyPortrait { navigationBarsPadding() }
+            .onlyLandscape { displayCutoutPadding() }
         ) {
             BrandingHeader()
 
@@ -249,8 +255,8 @@ fun MenuEntry_Preview() {
 fun BrandingHeader() {
     Column(
         Modifier
-            .statusBarsPadding()
             .background(Color.DarkGray)
+            .statusBarsPadding()
             .fillMaxWidth()
             .padding(16.dp)
     ) {

app/src/main/kotlin/at/bitfire/davdroid/ui/AccountsScreen.kt

@@ -16,9 +16,13 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.add
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeContent
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -44,10 +48,12 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
 import androidx.compose.material3.ModalNavigationDrawer
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
@@ -78,6 +84,9 @@ import at.bitfire.davdroid.R
 import at.bitfire.davdroid.ui.account.AccountProgress
 import at.bitfire.davdroid.ui.composable.ActionCard
 import at.bitfire.davdroid.ui.composable.ProgressBar
+import at.bitfire.davdroid.ui.edgetoedge.LocalStatusBarScrimColors
+import at.bitfire.davdroid.ui.edgetoedge.onlyLandscape
+import at.bitfire.davdroid.ui.edgetoedge.withOrientation
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.isGranted
 import com.google.accompanist.permissions.rememberPermissionState
@@ -167,6 +176,16 @@ fun AccountsScreen(
 
     val snackbarHostState = remember { SnackbarHostState() }
     AppTheme {
+        val statusBarTheme = LocalStatusBarScrimColors.current
+        LaunchedEffect(drawerState.isClosed) {
+            // Set to false because the background is dark, so show icons in light mode
+            if (drawerState.isClosed) {
+                statusBarTheme.resetStatusBarDarkTheme()
+            } else {
+                statusBarTheme.setStatusBarDarkTheme(true)
+            }
+        }
+
         ModalNavigationDrawer(
             drawerState = drawerState,
             drawerContent = {
@@ -185,8 +204,16 @@ fun AccountsScreen(
             }
         ) {
             Scaffold(
+                contentWindowInsets = withOrientation(
+                    landscape = WindowInsets.safeContent,
+                    portrait = ScaffoldDefaults.contentWindowInsets,
+                ),
                 topBar = {
                     TopAppBar(
+                        windowInsets = TopAppBarDefaults.windowInsets.onlyLandscape {
+                            // only add the display cutout when portrait
+                            add(WindowInsets.displayCutout)
+                        },
                         navigationIcon = {
                             IconToggleButton(false, onCheckedChange = { openDrawer ->
                                 scope.launch {
@@ -208,7 +235,13 @@ fun AccountsScreen(
                     )
                 },
                 floatingActionButton = {
-                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = withOrientation(
+                            landscape = Modifier.navigationBarsPadding(),
+                            portrait = Modifier,
+                        ),
+                    ) {
                         if (showAddAccount == AccountsModel.FABStyle.WithText)
                             ExtendedFloatingActionButton(
                                 text = { Text(stringResource(R.string.login_add_account)) },

app/src/main/kotlin/at/bitfire/davdroid/ui/AppTheme.kt

@@ -5,40 +5,49 @@
 package at.bitfire.davdroid.ui
 
 import androidx.activity.SystemBarStyle
+import androidx.activity.compose.LocalActivity
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.displayCutoutPadding
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.LocalView
 import androidx.lifecycle.compose.LifecycleResumeEffect
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import at.bitfire.davdroid.ui.composable.SafeAndroidUriHandler
+import at.bitfire.davdroid.ui.edgetoedge.LocalStatusBarScrimColors
+import at.bitfire.davdroid.ui.edgetoedge.StatusBarScrimColors
 
 @Composable
 fun AppTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
+) = CompositionLocalProvider(
+    LocalStatusBarScrimColors provides StatusBarScrimColors(
+        initialStatusBarDarkTheme = darkTheme
+    )
 ) {
-    val view = LocalView.current
-    SideEffect {
+    val activity = LocalActivity.current
+    val statusBarDarkMode by LocalStatusBarScrimColors.current.statusBarDarkTheme.collectAsStateWithLifecycle()
+    val navigationBarDarkTheme by LocalStatusBarScrimColors.current.navigationBarDarkTheme.collectAsStateWithLifecycle()
+    LaunchedEffect(statusBarDarkMode, navigationBarDarkTheme) {
         // If applicable, call Activity.enableEdgeToEdge to enable edge-to-edge layout on Android <15, too.
         // When we have moved everything into one Activity with Compose navigation, we can call it there instead.
-        (view.context as? AppCompatActivity)?.enableEdgeToEdge(
+        (activity as? AppCompatActivity)?.enableEdgeToEdge(
             navigationBarStyle = SystemBarStyle.auto(
                 lightScrim = M3ColorScheme.lightScheme.scrim.toArgb(),
                 darkScrim = M3ColorScheme.darkScheme.scrim.toArgb()
-            ) { darkTheme }
+            ) { navigationBarDarkTheme },
+            statusBarStyle = SystemBarStyle.auto(
+                lightScrim = M3ColorScheme.lightScheme.scrim.toArgb(),
+                darkScrim = M3ColorScheme.darkScheme.scrim.toArgb()
+            ) { statusBarDarkMode }
         )
     }
 
@@ -50,14 +59,12 @@ fun AppTheme(
                 M3ColorScheme.lightScheme
             else
                 M3ColorScheme.darkScheme,
-        ) {
-            Box(Modifier.fillMaxSize().displayCutoutPadding().navigationBarsPadding().clipToBounds()) {
-                content()
-            }
-        }
+            content = content,
+        )
     }
 
     // Track if the app is in the foreground
+    val view = LocalView.current
     LifecycleResumeEffect(view) {
         ForegroundTracker.onResume()
         onPauseOrDispose {

app/src/main/kotlin/at/bitfire/davdroid/ui/edgetoedge/EdgeToEdgeUtils.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright © All Contributors. See LICENSE and AUTHORS in the root directory for details.
+ */
+
+package at.bitfire.davdroid.ui.edgetoedge
+
+import android.content.res.Configuration.ORIENTATION_LANDSCAPE
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalConfiguration
+
+@Composable
+private fun isLandscape(): Boolean {
+    val config = LocalConfiguration.current
+    return config.orientation == ORIENTATION_LANDSCAPE
+}
+
+@Composable
+fun <T> T.onlyPortrait(modifier: @Composable T.() -> T): T {
+    return if (isLandscape()) {
+        this
+    } else {
+        modifier()
+    }
+}
+
+@Composable
+fun <T> T.onlyLandscape(modifier: @Composable T.() -> T): T {
+    return if (isLandscape()) {
+        modifier()
+    } else {
+        this
+    }
+}
+
+@Composable
+fun <T> withOrientation(landscape: T, portrait: T): T {
+    return if (isLandscape()) {
+        landscape
+    } else {
+        portrait
+    }
+}

app/src/main/kotlin/at/bitfire/davdroid/ui/edgetoedge/StatusBarScrimColors.kt

@@ -0,0 +1,41 @@
+/*
+ * Copyright © All Contributors. See LICENSE and AUTHORS in the root directory for details.
+ */
+
+package at.bitfire.davdroid.ui.edgetoedge
+
+import androidx.compose.runtime.compositionLocalOf
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+class StatusBarScrimColors(
+    private val initialStatusBarDarkTheme: Boolean = false,
+    private val initialNavigationBarDarkTheme: Boolean = initialStatusBarDarkTheme,
+) {
+    private val _statusBarDarkTheme = MutableStateFlow(initialStatusBarDarkTheme)
+    val statusBarDarkTheme get() = _statusBarDarkTheme.asStateFlow()
+
+    private val _navigationBarDarkTheme = MutableStateFlow(initialNavigationBarDarkTheme)
+    val navigationBarDarkTheme get() = _navigationBarDarkTheme.asStateFlow()
+
+    fun setStatusBarDarkTheme(darkTheme: Boolean) {
+        _statusBarDarkTheme.tryEmit(darkTheme)
+    }
+    fun resetStatusBarDarkTheme() {
+        _statusBarDarkTheme.tryEmit(initialStatusBarDarkTheme)
+    }
+
+    fun setNavigationBarDarkTheme(darkTheme: Boolean) {
+        _navigationBarDarkTheme.tryEmit(darkTheme)
+    }
+    fun resetNavigationBarDarkTheme() {
+        _navigationBarDarkTheme.tryEmit(initialNavigationBarDarkTheme)
+    }
+
+    fun reset() {
+        resetStatusBarDarkTheme()
+        resetNavigationBarDarkTheme()
+    }
+}
+
+val LocalStatusBarScrimColors = compositionLocalOf { StatusBarScrimColors() }