feat: edge-to-edge display (#229)

Author: tien

.idea/ktfmt.xml

@@ -53,11 +53,11 @@ android {
     kotlinOptions {
         jvmTarget = "17"
         freeCompilerArgs +=
-                listOf(
-                    "-opt-in=kotlin.RequiresOptIn",
-                    "-opt-in=kotlin.time.ExperimentalTime",
-                    "-opt-in=io.ktor.utils.io.InternalAPI",
-                )
+            listOf(
+                "-opt-in=kotlin.RequiresOptIn",
+                "-opt-in=kotlin.time.ExperimentalTime",
+                "-opt-in=io.ktor.utils.io.InternalAPI",
+            )
     }
 
     buildFeatures { compose = true }
@@ -121,12 +121,10 @@ dependencies {
 
     implementation(libs.android.billingclient.ktx)
     implementation(libs.androidx.activity.compose)
-    implementation(libs.androidx.appcompat)
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.datastore)
     implementation(libs.androidx.hilt.navigation.compose)
     implementation(libs.androidx.navigation.compose)
-    implementation(libs.bundles.accompanist)
     implementation(libs.bundles.compose)
     implementation(libs.bundles.kotlin)
     implementation(libs.bundles.ktor)

app/build.gradle.kts

@@ -1,20 +1,25 @@
 package com.tien.piholeconnect
 
 import android.os.Bundle
+import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.appcompat.app.AppCompatActivity
+import androidx.activity.enableEdgeToEdge
 import com.tien.piholeconnect.service.InAppPurchase
 import com.tien.piholeconnect.ui.App
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
 @AndroidEntryPoint
-class MainActivity : AppCompatActivity() {
+class MainActivity : ComponentActivity() {
     @Inject lateinit var inAppPurchase: InAppPurchase
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+
         lifecycle.addObserver(inAppPurchase)
+
+        enableEdgeToEdge()
+
         setContent { App() }
     }
 }

app/src/main/java/com/tien/piholeconnect/MainActivity.kt

@@ -5,6 +5,7 @@ import android.net.Uri
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -23,14 +24,11 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.NavigationBarDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
-import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -45,7 +43,6 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navArgument
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.tien.piholeconnect.R
 import com.tien.piholeconnect.model.BottomTabItem
 import com.tien.piholeconnect.model.Screen
@@ -76,7 +73,6 @@ fun App(viewModel: AppViewModel = hiltViewModel()) {
 
     val snackbarHostState = remember { SnackbarHostState() }
     val navController = rememberNavController()
-    val systemUiController = rememberSystemUiController()
 
     val isDarkTheme =
         when (userPreferences?.theme) {
@@ -193,17 +189,6 @@ fun App(viewModel: AppViewModel = hiltViewModel()) {
         useDarkTheme = isDarkTheme,
         useDynamicColor = userPreferences?.useDynamicColor == true,
     ) {
-        val themeColors = MaterialTheme.colorScheme
-
-        SideEffect {
-            systemUiController.apply {
-                setStatusBarColor(themeColors.background)
-                setNavigationBarColor(
-                    themeColors.surfaceColorAtElevation(NavigationBarDefaults.Elevation)
-                )
-            }
-        }
-
         Scaffold(
             snackbarHost = { SnackbarHost(snackbarHostState) },
             topBar = {
@@ -241,7 +226,7 @@ fun App(viewModel: AppViewModel = hiltViewModel()) {
             NavHost(
                 navController = navController,
                 startDestination = Screen.Home.route,
-                modifier = Modifier.padding(padding),
+                modifier = Modifier.padding(padding).consumeWindowInsets(padding),
             ) {
                 composable(Screen.Home.route) { ConnectionGuard { HomeScreen() } }
                 composable(Screen.Statistics.route) {

app/src/main/java/com/tien/piholeconnect/ui/App.kt

@@ -1,5 +1,6 @@
 package com.tien.piholeconnect.ui.theme
 
+import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ColorScheme
@@ -10,9 +11,12 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
 
 private val LightColors =
     lightColorScheme(
@@ -153,5 +157,12 @@ fun PiHoleConnectTheme(
             else -> LightColors
         }
 
+    val view = LocalView.current
+    LaunchedEffect(useDarkTheme) {
+        val window = (view.context as Activity).window
+        WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars =
+            !useDarkTheme
+    }
+
     MaterialTheme(colorScheme = colorScheme, content = content)
 }

app/src/main/java/com/tien/piholeconnect/ui/theme/Theme.kt

@@ -1,8 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.PiHoleConnect" parent="Theme.Material3.DayNight.NoActionBar">
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:statusBarColor">@android:color/transparent</item>
-    </style>
+    <style name="Theme.PiHoleConnect" parent="android:Theme.Material.Light.NoActionBar" />
 </resources>

app/src/main/res/values/themes.xml

@@ -12,10 +12,8 @@ protoBufJavaLite = "4.29.3"
 vico = "1.15.0"
 
 [libraries]
-accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
 android-billingclient-ktx = { module = "com.android.billingclient:billing-ktx", version = "7.1.1" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version = "1.10.1" }
-androidx-appcompat = { module = "androidx.appcompat:appcompat", version = "1.7.0" }
 androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidx-compose-bom" }
 androidx-compose-iconsExtended = { module = "androidx.compose.material:material-icons-extended" }
 androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
@@ -46,7 +44,6 @@ vico-compose-material3 = { module = "com.patrykandpatrick.vico:compose-m3", vers
 vico-core = { module = "com.patrykandpatrick.vico:core", version.ref = "vico" }
 
 [bundles]
-accompanist = ["accompanist-systemuicontroller"]
 androidTest = ["androidx-test-espresso-core", "androidx-test-ext-junit"]
 compose = ["androidx-compose-iconsExtended", "androidx-compose-material3", "androidx-compose-ui-tooling"]
 kotlin = ["kotlin-reflect", "kotlin-serialization"]