android: properly handle insets and padding

android/build.gradle.kts

@@ -12,9 +12,11 @@ dependencies {
   kapt(libs.dagger.hilt.compiler)
   implementation(projects.api)
   implementation(projects.common)
+  implementation(libs.accompanist.insets)
   implementation(libs.accompanist.sysuicontroller)
   implementation(libs.androidx.activity.compose)
   implementation(libs.androidx.appcompat)
+  implementation(libs.androidx.coreKtx)
   implementation(libs.androidx.paging.compose)
   implementation(libs.dagger.hilt.android)
   implementation(libs.retrofit.moshiConverter)

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

@@ -3,6 +3,7 @@ package dev.msfjarvis.claw.android
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.core.view.WindowCompat
 import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import dagger.hilt.android.AndroidEntryPoint
@@ -20,6 +21,7 @@ class MainActivity : ComponentActivity() {
 
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
+    WindowCompat.setDecorFitsSystemWindows(window, false)
     val pager = Pager(PagingConfig(20)) { LobstersPagingSource(api::getHottestPosts) }
     setContent {
       LobstersApp(

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

@@ -18,6 +18,8 @@ import androidx.compose.ui.unit.dp
 import androidx.paging.LoadState
 import androidx.paging.Pager
 import androidx.paging.compose.collectAsLazyPagingItems
+import com.google.accompanist.insets.ProvideWindowInsets
+import com.google.accompanist.insets.statusBarsPadding
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import dev.msfjarvis.claw.api.model.LobstersPost
 import dev.msfjarvis.claw.common.theme.LobstersTheme
@@ -31,32 +33,34 @@ fun LobstersApp(
   val systemUiController = rememberSystemUiController()
   val scaffoldState = rememberScaffoldState()
   LobstersTheme(darkTheme = isSystemInDarkTheme()) {
-    val useDarkIcons = MaterialTheme.colors.isLight
-    val systemBarsColor = MaterialTheme.colors.primarySurface
+    ProvideWindowInsets {
+      val useDarkIcons = MaterialTheme.colors.isLight
+      val systemBarsColor = MaterialTheme.colors.primarySurface
 
-    SideEffect {
-      systemUiController.setSystemBarsColor(color = systemBarsColor, darkIcons = useDarkIcons)
-    }
-    val items = pager.flow.collectAsLazyPagingItems()
-    Scaffold(
-      scaffoldState = scaffoldState,
-      topBar = { ClawAppBar() },
-      modifier = Modifier,
-    ) { padding ->
-      if (items.loadState.refresh != LoadState.Loading) {
-        NetworkPosts(
-          items = items,
-          urlLauncher = urlLauncher,
-          modifier = Modifier.padding(padding),
-        )
-      } else {
-        Box(
-          modifier = Modifier.fillMaxSize(),
-        ) {
-          CircularProgressIndicator(
-            modifier = Modifier.size(64.dp).align(Alignment.Center),
-            color = MaterialTheme.colors.secondary,
+      SideEffect {
+        systemUiController.setSystemBarsColor(color = systemBarsColor, darkIcons = useDarkIcons)
+      }
+      val items = pager.flow.collectAsLazyPagingItems()
+      Scaffold(
+        scaffoldState = scaffoldState,
+        topBar = { ClawAppBar(modifier = Modifier.statusBarsPadding()) },
+        modifier = Modifier,
+      ) {
+        if (items.loadState.refresh != LoadState.Loading) {
+          NetworkPosts(
+            items = items,
+            urlLauncher = urlLauncher,
+            modifier = Modifier.padding(top = 16.dp),
           )
+        } else {
+          Box(
+            modifier = Modifier.fillMaxSize(),
+          ) {
+            CircularProgressIndicator(
+              modifier = Modifier.size(64.dp).align(Alignment.Center),
+              color = MaterialTheme.colors.secondary,
+            )
+          }
         }
       }
     }

gradle/libs.versions.toml

@@ -12,11 +12,13 @@ kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
 kotlin-coroutines-jvm = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core-jvm", version.ref = "coroutines" }
 
+accompanist-insets = { module = "com.google.accompanist:accompanist-insets", version.ref = "accompanist" }
 accompanist-sysuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
 
 androidx-activity-compose = "androidx.activity:activity-compose:1.4.0-alpha02"
 androidx-appcompat = "androidx.appcompat:appcompat:1.4.0-alpha03"
 androidx-browser = "androidx.browser:browser:1.4.0-alpha01"
+androidx-coreKtx = "androidx.core:core-ktx:1.7.0-beta01"
 androidx-paging-compose = "androidx.paging:paging-compose:1.0.0-alpha12"
 
 coil-compose = "io.coil-kt:coil-compose:1.3.2"