android: improve propagation of surface color

android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt

@@ -6,7 +6,6 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
-import androidx.core.view.WindowCompat
 import dagger.hilt.android.AndroidEntryPoint
 import dev.msfjarvis.claw.android.ui.LobstersApp
 import dev.msfjarvis.claw.common.comments.HTMLConverter
@@ -23,7 +22,6 @@ class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     installSplashScreen()
-    WindowCompat.setDecorFitsSystemWindows(window, false)
     setContent {
       LobstersApp(
         urlLauncher = urlLauncher,

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt

@@ -12,7 +12,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
@@ -69,11 +68,11 @@ fun LobstersApp(
     colorScheme = decideColorScheme(LocalContext.current),
   ) {
     ProvideWindowInsets {
-      val statusBarColor = MaterialTheme.colorScheme.background
+      val systemBarsColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation()
 
       SideEffect {
-        systemUiController.setStatusBarColor(color = statusBarColor)
+        systemUiController.setStatusBarColor(color = systemBarsColor)
-        systemUiController.setNavigationBarColor(color = Color.Transparent)
+        systemUiController.setNavigationBarColor(color = systemBarsColor)
       }
 
       val navItems =
@@ -91,19 +90,22 @@ fun LobstersApp(
         )
 
       Scaffold(
-        topBar = { ClawAppBar(modifier = Modifier.statusBarsPadding()) },
+        topBar = {
+          ClawAppBar(
+            backgroundColor = systemBarsColor,
+            modifier = Modifier.statusBarsPadding(),
+          )
+        },
         floatingActionButton = {
           ClawFab(
             isFabVisible = isFabVisible && currentDestination == Destinations.Hottest.getRoute(),
             listState = networkListState,
-            modifier = Modifier.navigationBarsPadding(),
           )
         },
         bottomBar = {
           ClawNavigationBar(
             navController = navController,
             items = navItems,
-            modifier = Modifier.navigationBarsPadding(),
           )
         },
       ) {

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawAppBar.kt

@@ -2,14 +2,17 @@ package dev.msfjarvis.claw.android.ui.decorations
 
 import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import dev.msfjarvis.claw.android.R
 
 @Composable
 fun ClawAppBar(
+  backgroundColor: Color,
   modifier: Modifier = Modifier,
 ) {
   SmallTopAppBar(
@@ -20,5 +23,6 @@ fun ClawAppBar(
       )
     },
     modifier = modifier,
+    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor),
   )
 }

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ext.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.LocalAbsoluteTonalElevation
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
@@ -11,8 +12,11 @@ import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import dev.msfjarvis.claw.android.ui.navigation.Destinations
 import dev.msfjarvis.claw.android.viewmodel.ClawViewModel
@@ -21,6 +25,7 @@ import dev.msfjarvis.claw.common.theme.DarkThemeColors
 import dev.msfjarvis.claw.common.theme.LightThemeColors
 import dev.msfjarvis.claw.common.urllauncher.UrlLauncher
 import dev.msfjarvis.claw.database.local.SavedPost
+import kotlin.math.ln
 
 // The destination needs to be tracked like this rather than used directly since
 // `NavController#currentDestination` is not a Composable state.
@@ -99,3 +104,21 @@ fun rememberNestedScrollConnection(setVisibility: (Boolean) -> Unit): NestedScro
     }
   }
 }
+
+/**
+ * Returns the [ColorScheme.surface] color with an alpha of the [ColorScheme.primary] color overlaid
+ * on top of it. Computes the surface tonal color at different elevation levels e.g. surface1
+ * through surface5.
+ *
+ * Stolen from AndroidX, keep in sync when upgrading Compose. This version is hard-coded to
+ * replicate the logic used by the Material3 NavigationBar to determine its surface color.
+ * https://github.com/androidx/androidx/blob/74d3510b608c3cc26b9cf9be8d15a6a6c26192c2/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt#L453-L466
+ */
+@Composable
+fun ColorScheme.surfaceColorAtNavigationBarElevation(): Color {
+  // Absolute tonal elevation + NavigationBarTokens.ContainerElevation
+  val elevation = LocalAbsoluteTonalElevation.current + 3.0.dp
+  if (elevation == 0.dp) return surface
+  val alpha = ((4.5f * ln(elevation.value + 1)) + 2f) / 100f
+  return primary.copy(alpha = alpha).compositeOver(surface)
+}