feat: enable edge-to-edge and remove deprecated systemuicontroller (#173

)

* feat: enable edge-to-edge and remove deprecated systemuicontroller, while on that, also add logging interceptor in http client on debug mode
* Make statusbar auto hide after some time if user swipes down in the reader
---------
Signed-off-by: starry-shivam <starry@krsh.dev>

app/build.gradle

@@ -108,8 +108,6 @@ dependencies {
     implementation "androidx.compose.animation:animation"
     implementation "androidx.compose.runtime:runtime-livedata"
     implementation "androidx.compose.material3:material3"
-    // Accompanist compose.
-    implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"
     // Material icons.
     implementation 'androidx.compose.material:material-icons-extended:1.6.7'
     // Material theme for main activity.
@@ -120,6 +118,7 @@ dependencies {
     implementation 'com.google.code.gson:gson:2.10.1'
     // OkHttp library.
     implementation "com.squareup.okhttp3:okhttp:4.12.0"
+    implementation "com.squareup.okhttp3:logging-interceptor:4.12.0"
     // Coil Image loading library.
     implementation "io.coil-kt:coil-compose:2.4.0"
     // Room database components.

app/src/main/java/com/starry/myne/MainActivity.kt

@@ -18,6 +18,7 @@ package com.starry.myne
 
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
@@ -30,6 +31,7 @@ import androidx.lifecycle.ViewModelProvider
 import com.starry.myne.helpers.NetworkObserver
 import com.starry.myne.ui.screens.main.MainScreen
 import com.starry.myne.ui.screens.settings.viewmodels.SettingsViewModel
+import com.starry.myne.ui.theme.AdjustEdgeToEdge
 import com.starry.myne.ui.theme.MyneTheme
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -53,22 +55,25 @@ class MainActivity : AppCompatActivity() {
             mainViewModel.isLoading.value
         }
 
+        enableEdgeToEdge() // enable edge to edge for the activity.
+
         setContent {
             MyneTheme(settingsViewModel = settingsViewModel) {
-                val status by networkObserver.observe().collectAsState(
-                    initial = NetworkObserver.Status.Unavailable
+                AdjustEdgeToEdge(
+                    activity = this,
+                    themeState = settingsViewModel.getCurrentTheme()
                 )
 
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
                     val startDestination by mainViewModel.startDestination
-                    MainScreen(
-                        startDestination = startDestination,
-                        networkStatus = status,
-                        settingsViewModel = settingsViewModel
+                    val status by networkObserver.observe().collectAsState(
+                        initial = NetworkObserver.Status.Unavailable
                     )
+
+                    MainScreen(startDestination = startDestination, networkStatus = status)
                 }
             }
         }

app/src/main/java/com/starry/myne/api/BookAPI.kt

@@ -30,14 +30,14 @@ import okhttp3.Callback
 import okhttp3.OkHttpClient
 import okhttp3.Request
 import okhttp3.Response
+import okhttp3.logging.HttpLoggingInterceptor
 import org.json.JSONException
 import org.json.JSONObject
 import java.io.File
 import java.io.IOException
 import java.net.URLEncoder
 import java.util.concurrent.TimeUnit
 import kotlin.coroutines.resume
-import kotlin.coroutines.resumeWithException
 import kotlin.coroutines.suspendCoroutine
 
 
@@ -54,13 +54,25 @@ class BookAPI(context: Context) {
     private val googleApiKey =
         BuildConfig.GOOGLE_API_KEY ?: "AIzaSyBCaXx-U0sbEpGVPWylSggC4RaR4gCGkVE" // Backup API key
 
-    private val okHttpClient = OkHttpClient.Builder()
-        .connectTimeout(60, TimeUnit.SECONDS)
-        .writeTimeout(60, TimeUnit.SECONDS)
-        .readTimeout(100, TimeUnit.SECONDS)
-        .cache(Cache(File(context.cacheDir, "http-cache"), CacheInterceptor.CACHE_SIZE))
-        .addNetworkInterceptor(CacheInterceptor())
-        .build()
+    private val okHttpClient by lazy {
+        // Create an OkHttpClient with a cache and a network interceptor.
+        val okHttpBuilder = OkHttpClient.Builder()
+            .connectTimeout(60, TimeUnit.SECONDS)
+            .writeTimeout(60, TimeUnit.SECONDS)
+            .readTimeout(100, TimeUnit.SECONDS)
+            .cache(Cache(File(context.cacheDir, "http-cache"), CacheInterceptor.CACHE_SIZE))
+            .addNetworkInterceptor(CacheInterceptor())
+
+        // Add logging interceptor if in debug mode.
+        if (BuildConfig.DEBUG) {
+            val logging = HttpLoggingInterceptor().apply {
+                level = HttpLoggingInterceptor.Level.BODY
+            }
+            okHttpBuilder.addInterceptor(logging).build()
+        }
+        // Finally build the OkHttpClient.
+        okHttpBuilder.build()
+    }
 
     private val gsonClient = Gson() // Gson client for parsing JSON responses.
 
@@ -154,7 +166,7 @@ class BookAPI(context: Context) {
         val request = Request.Builder().get().url(url).build()
         okHttpClient.newCall(request).enqueue(object : Callback {
             override fun onFailure(call: Call, e: IOException) {
-                continuation.resumeWithException(e)
+                continuation.resume(null)
                 e.printStackTrace()
             }
 

app/src/main/java/com/starry/myne/ui/common/TopAppBars.kt

@@ -23,10 +23,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.ArrowBack
@@ -56,12 +59,11 @@ fun CustomTopAppBar(headerText: String, iconRes: Int) {
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(start = 20.dp, end = 20.dp, top = 10.dp, bottom = 8.dp)
+            .padding(horizontal = 20.dp, vertical = 8.dp)
+            .windowInsetsPadding(WindowInsets.statusBars)
     ) {
         Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 7.dp),
+            modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
@@ -90,14 +92,9 @@ fun CustomTopAppBar(headerText: String, onBackButtonClicked: () -> Unit) {
         modifier = Modifier
             .fillMaxWidth()
             .padding(start = 20.dp, end = 20.dp, top = 16.dp, bottom = 8.dp)
+            .windowInsetsPadding(WindowInsets.statusBars)
     ) {
-        Row(
-            modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
-        ) {
-            TopBarActionItem(
-                icon = Icons.AutoMirrored.Outlined.ArrowBack, onclick = onBackButtonClicked
-            )
-            Spacer(modifier = Modifier.weight(1f))
+        Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
             Text(
                 text = headerText,
                 modifier = Modifier.padding(bottom = 16.dp),
@@ -106,7 +103,14 @@ fun CustomTopAppBar(headerText: String, onBackButtonClicked: () -> Unit) {
                 fontFamily = pacificoFont,
                 fontSize = 24.sp
             )
-            Spacer(modifier = Modifier.weight(2.35f))
+            Row(
+                modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
+            ) {
+                TopBarActionItem(
+                    icon = Icons.AutoMirrored.Outlined.ArrowBack, onclick = onBackButtonClicked
+                )
+                Spacer(modifier = Modifier.weight(1f))
+            }
         }
         HorizontalDivider(
             thickness = 2.dp, color = MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp)
@@ -121,19 +125,13 @@ fun CustomTopAppBar(
     onBackButtonClicked: () -> Unit,
     onActionClicked: () -> Unit
 ) {
-
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(start = 20.dp, end = 20.dp, top = 16.dp, bottom = 8.dp)
+            .windowInsetsPadding(WindowInsets.statusBars)
     ) {
-        Row(
-            modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
-        ) {
-            TopBarActionItem(
-                icon = Icons.AutoMirrored.Outlined.ArrowBack, onclick = onBackButtonClicked
-            )
-            Spacer(modifier = Modifier.weight(1f))
+        Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
             Text(
                 text = headerText,
                 modifier = Modifier.padding(bottom = 16.dp),
@@ -142,10 +140,17 @@ fun CustomTopAppBar(
                 fontFamily = pacificoFont,
                 fontSize = 24.sp
             )
-            Spacer(modifier = Modifier.weight(1f))
-            TopBarActionItem(
-                icon = actionIcon, onclick = onActionClicked
-            )
+            Row(
+                modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
+            ) {
+                TopBarActionItem(
+                    icon = Icons.AutoMirrored.Outlined.ArrowBack, onclick = onBackButtonClicked
+                )
+                Spacer(modifier = Modifier.weight(1f))
+                TopBarActionItem(
+                    icon = actionIcon, onclick = onActionClicked
+                )
+            }
         }
         HorizontalDivider(
             thickness = 2.dp, color = MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp)
@@ -178,7 +183,7 @@ private fun TopBarActionItem(icon: ImageVector, onclick: () -> Unit) {
 
 @Preview(showBackground = true)
 @Composable
-fun TopAppBarsPV() {
+private fun TopAppBarsPV() {
     Column(Modifier.fillMaxSize()) {
         CustomTopAppBar(headerText = "Something", iconRes = R.drawable.ic_nav_categories)
         CustomTopAppBar(headerText = "Something", onBackButtonClicked = {})

app/src/main/java/com/starry/myne/ui/screens/detail/composables/BookDetailScreen.kt

@@ -503,7 +503,7 @@ private fun BookDetailTopBar(
     Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
         Box(
             modifier = Modifier
-                .padding(22.dp)
+                .padding(horizontal = 22.dp, vertical = 16.dp)
                 .clip(CircleShape)
                 .background(MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp))
                 .clickable {

app/src/main/java/com/starry/myne/ui/screens/home/composables/HomeScreen.kt

@@ -19,6 +19,7 @@ package com.starry.myne.ui.screens.home.composables
 import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -29,11 +30,14 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -178,6 +182,7 @@ private fun HomeScreenScaffold(
                     .padding(start = 20.dp, end = 20.dp, top = 10.dp, bottom = 8.dp)
             ) {
                 Crossfade(
+                    modifier = Modifier.animateContentSize(),
                     targetState = topBarState.isSearchBarVisible,
                     animationSpec = tween(durationMillis = 200), label = "search cross fade"
                 ) {
@@ -400,7 +405,7 @@ private fun HomeTopAppBar(
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(top = 7.dp),
+            .windowInsetsPadding(WindowInsets.statusBars),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
@@ -440,7 +445,9 @@ private fun SearchAppBar(
     onSearchClicked: () -> Unit
 ) {
     Column(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .windowInsetsPadding(WindowInsets.statusBars)
     ) {
         val focusRequester = remember { FocusRequester() }
         OutlinedTextField(

app/src/main/java/com/starry/myne/ui/screens/library/composables/LibraryScreen.kt

@@ -166,7 +166,7 @@ fun LibraryScreen(navController: NavController) {
 
     val showTapTargets = remember { mutableStateOf(false) }
     LaunchedEffect(key1 = viewModel.showOnboardingTapTargets.value) {
-        delay(800) // Delay to prevent flickering
+        delay(500) // Delay to prevent flickering
         showTapTargets.value = viewModel.showOnboardingTapTargets.value
     }