phone: debug builds get a yellow home header behind the status bar, as in Glint, and the title is smaller

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/GearslipApp.kt

@@ -1,5 +1,12 @@
 package app.seb3thehacker.gearslip.ui
 
+import androidx.core.view.WindowCompat
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.runtime.SideEffect
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.windowInsetsTopHeight
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.background
 import android.Manifest
 import android.app.Activity
 import android.content.pm.ActivityInfo
@@ -95,15 +102,24 @@ fun GearslipApp(onDisconnect: () -> Unit, onRequestCallScreening: () -> Unit) {
         }
     }
 
-    Column(
-        Modifier
-            .fillMaxSize()
-            .windowInsetsPadding(WindowInsets.statusBars)
-            .consumeWindowInsets(WindowInsets.statusBars),
-    ) {
-        if (BuildConfig.DEBUG && screen != Screen.CAR_PREVIEW) DebugBuildBanner()
+    // On a debug build, Home's yellow header runs up behind the status bar, whose icons then go dark.
+    val debugHeader = BuildConfig.DEBUG && screen == Screen.HOME
+    val view = LocalView.current
+    val darkTheme = isSystemInDarkTheme()
+    SideEffect {
+        val window = (view.context as? Activity)?.window ?: return@SideEffect
+        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = debugHeader || !darkTheme
+    }
 
-        Column(Modifier.weight(1f)) {
+    Column(Modifier.fillMaxSize()) {
+        Spacer(
+            Modifier
+                .fillMaxWidth()
+                .windowInsetsTopHeight(WindowInsets.statusBars)
+                .background(if (debugHeader) DebugYellow else Color.Transparent),
+        )
+
+        Column(Modifier.weight(1f).consumeWindowInsets(WindowInsets.statusBars)) {
             when (screen) {
                 Screen.HOME -> HomeScreen(
                     onOpenSettings = { settingsAtUsageNotes = false; screen = Screen.SETTINGS },
@@ -150,26 +166,3 @@ fun GearslipApp(onDisconnect: () -> Unit, onRequestCallScreening: () -> Unit) {
         PhoneTypingBar()
     }
 }
-
-/**
- * Debug builds only ([BuildConfig.DEBUG]); a release build never composes this. Sits above every
- * phone screen, below the status bar - not the car screen, which is a separate render target
- * ([app.seb3thehacker.gearslip.car.CarUi] carries its own corner badge) - so a debug install is
- * never mistaken for a release one.
- */
-@Composable
-private fun DebugBuildBanner() {
-    Surface(
-        modifier = Modifier.fillMaxWidth().height(28.dp),
-        color = Color(0xFFF5C518),
-        contentColor = Color.Black,
-    ) {
-        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-            Text(
-                "DEBUG BUILD",
-                style = MaterialTheme.typography.labelSmall,
-                fontWeight = FontWeight.Bold,
-            )
-        }
-    }
-}

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/HomeScreen.kt

@@ -82,7 +82,12 @@ fun HomeScreen(
             Column(
                 Modifier
                     .fillMaxSize()
-                    .padding(padding)
+                    .padding(padding),
+            ) {
+            HomeHeader(onOpenSettings)
+            Column(
+                Modifier
+                    .weight(1f)
                     .padding(horizontal = 24.dp),
             ) {
                 Column(
@@ -90,30 +95,6 @@ fun HomeScreen(
                         .weight(1f)
                         .verticalScroll(rememberScrollState()),
                 ) {
-                    Spacer(Modifier.height(24.dp))
-                    Row(
-                        Modifier.fillMaxWidth(),
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                    ) {
-                        Text(
-                            "Gearslip",
-                            style = MaterialTheme.typography.displayLarge,
-                            fontWeight = FontWeight.Bold,
-                            color = MaterialTheme.colorScheme.onBackground,
-                        )
-                        IconButton(
-                            onClick = onOpenSettings,
-                            modifier = Modifier.size(56.dp),
-                        ) {
-                            Icon(Icons.Filled.Settings, contentDescription = "Settings", modifier = Modifier.size(40.dp))
-                        }
-                    }
-                    Text(
-                        "v${LocalContext.current.appVersionName()}",
-                        style = MaterialTheme.typography.labelLarge,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
                     Spacer(Modifier.height(16.dp))
                     StatusCard(status)
                     if (live) BluetoothMissingCard()
@@ -147,6 +128,7 @@ fun HomeScreen(
                     }
                 }
             }
+            }
         }
         // Sharing just went on from the "it worked" ask: a little thanks.
         if (celebrate) ConfettiFall(onDone = WorkedPrompt::celebrated)
@@ -155,6 +137,38 @@ fun HomeScreen(
     }
 }
 
+/** Debug builds wear a yellow header, behind the status bar too, so they're never mistaken for a release install. */
+internal val DebugYellow = Color(0xFFF5C518)
+private val OnDebugYellow = Color(0xFF2A2200)
+
+/** The app's name, version and Settings, fixed above Home's scrolling cards. */
+@Composable
+private fun HomeHeader(onOpenSettings: () -> Unit) {
+    val debug = BuildConfig.DEBUG
+    val content = if (debug) OnDebugYellow else MaterialTheme.colorScheme.onBackground
+    Surface(color = if (debug) DebugYellow else Color.Transparent, contentColor = content) {
+        Column(Modifier.fillMaxWidth().padding(start = 24.dp, end = 12.dp, top = 16.dp, bottom = 12.dp)) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text(
+                    "Gearslip",
+                    style = MaterialTheme.typography.displaySmall,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.weight(1f),
+                )
+                IconButton(onClick = onOpenSettings, modifier = Modifier.size(56.dp)) {
+                    Icon(Icons.Filled.Settings, contentDescription = "Settings", modifier = Modifier.size(32.dp))
+                }
+            }
+            val version = "v${LocalContext.current.appVersionName()}"
+            Text(
+                if (debug) "$version · debug build" else version,
+                style = MaterialTheme.typography.labelLarge,
+                color = if (debug) content else MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}
+
 /** One of Home's shortcuts at the bottom: an icon over a one-word label, small enough that all fit in a row. */
 @Composable
 private fun HomeShortcut(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, onClick: () -> Unit, modifier: Modifier = Modifier) {