feat(ui): implement proper edge-to-edge support for Android 15 (targetSdk 35)

app/build.gradle.kts

@@ -157,6 +157,7 @@ dependencies {
   implementation(platform(libs.androidx.compose.bom))
   implementation(libs.androidx.ui)
   implementation(libs.androidx.ui.graphics)
+  implementation(libs.androidx.ui.tooling.preview)
   implementation(libs.androidx.material3)
   implementation(libs.androidx.runtime.livedata)
 

app/src/main/kotlin/org/grakovne/lissen/ui/components/VerticalScrollbar.kt

@@ -28,6 +28,10 @@
 package org.grakovne.lissen.ui.components
 
 import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -41,6 +45,7 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
@@ -56,7 +61,7 @@ fun Modifier.withScrollbar(
   ignoreItems: List<String> = emptyList(),
 ): Modifier {
   try {
-    return baseScrollbar { atEnd ->
+    return baseScrollbar { atEnd, systemTopInset, systemBottomInset ->
       val layoutInfo = state.layoutInfo
       val viewportSize = layoutInfo.viewportEndOffset - layoutInfo.viewportStartOffset
 
@@ -87,7 +92,14 @@ fun Modifier.withScrollbar(
             ?.let { (itemSize * it.index - it.offset) / totalSize * canvasSize }
             ?: 0f
 
-        drawScrollbarThumb(atEnd, thumbSize, startOffset, color)
+        drawScrollbarThumb(
+          atEnd = atEnd,
+          thumbSize = thumbSize,
+          startOffset = startOffset,
+          color = color,
+          systemTopInset = systemTopInset,
+          systemBottomInset = systemBottomInset,
+        )
       }
     }
   } catch (ex: Exception) {
@@ -102,19 +114,22 @@ private fun DrawScope.drawScrollbarThumb(
   thumbSize: Float,
   startOffset: Float,
   color: Color,
+  systemTopInset: Float,
+  systemBottomInset: Float,
 ) {
   val thickness = 3.dp.toPx()
   val radius = 3.dp.toPx()
   val horizontalPadding = 6.dp.toPx()
   val verticalPadding = 4.dp.toPx()
 
-  val availableHeight = (size.height - 2 * verticalPadding).coerceAtLeast(0f)
+  val availableHeight =
+    (size.height - systemTopInset - systemBottomInset - 2 * verticalPadding).coerceAtLeast(0f)
   val maxY = (availableHeight - thumbSize).coerceAtLeast(0f)
 
   val topLeft =
     Offset(
       x = if (atEnd) size.width - thickness - horizontalPadding else horizontalPadding,
-      y = verticalPadding + startOffset.coerceIn(0f, maxY),
+      y = systemTopInset + verticalPadding + startOffset.coerceIn(0f, maxY),
     )
 
   drawRoundRect(
@@ -125,8 +140,14 @@ private fun DrawScope.drawScrollbarThumb(
   )
 }
 
-private fun Modifier.baseScrollbar(onDraw: DrawScope.(atEnd: Boolean) -> Unit): Modifier =
+private fun Modifier.baseScrollbar(onDraw: DrawScope.(atEnd: Boolean, systemTopInset: Float, systemBottomInset: Float) -> Unit): Modifier =
   composed {
+    val density = LocalDensity.current
+    val statusBarsInsets = WindowInsets.statusBars.asPaddingValues()
+    val navigationBarsInsets = WindowInsets.navigationBars.asPaddingValues()
+    val systemTopInset = with(density) { statusBarsInsets.calculateTopPadding().toPx() }
+    val systemBottomInset = with(density) { navigationBarsInsets.calculateBottomPadding().toPx() }
+
     val scrolled =
       remember {
         MutableSharedFlow<Unit>(extraBufferCapacity = 1, onBufferOverflow = BufferOverflow.DROP_OLDEST)
@@ -150,6 +171,6 @@ private fun Modifier.baseScrollbar(onDraw: DrawScope.(atEnd: Boolean) -> Unit):
 
     nestedScroll(nestedScrollConnection).drawWithContent {
       drawContent()
-      onDraw(reachedEnd)
+      onDraw(reachedEnd, systemTopInset, systemBottomInset)
     }
   }

app/src/main/kotlin/org/grakovne/lissen/ui/screens/AppPreview.kt

@@ -0,0 +1,27 @@
+package org.grakovne.lissen.ui.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import org.grakovne.lissen.common.ColorScheme
+import org.grakovne.lissen.ui.theme.LissenTheme
+
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+fun AppEdgeToEdgePreview() {
+  LissenTheme(
+    colorSchemePreference = ColorScheme.LIGHT,
+    materialYouEnabled = false,
+  ) {
+    Box(
+      modifier = Modifier.fillMaxSize(),
+      contentAlignment = Alignment.Center,
+    ) {
+      Text("Edge to Edge UI Preview")
+    }
+  }
+}

app/src/main/kotlin/org/grakovne/lissen/ui/screens/library/LibraryScreen.kt

@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.ExperimentalMaterialApi
@@ -105,9 +104,10 @@ fun LibraryScreen(
 
   var currentLibraryId by rememberSaveable { mutableStateOf("") }
   var localCacheUpdatedAt by rememberSaveable { mutableStateOf(0L) }
-  var currentOrdering by rememberSaveable(stateSaver = LibraryOrderingConfiguration.saver) {
-    mutableStateOf(LibraryOrderingConfiguration.default)
-  }
+  var currentOrdering by
+    rememberSaveable(stateSaver = LibraryOrderingConfiguration.saver) {
+      mutableStateOf(LibraryOrderingConfiguration.default)
+    }
   var pullRefreshing by remember { mutableStateOf(false) }
   val recentBookRefreshing by libraryViewModel.recentBookUpdating.observeAsState(false)
   val searchRequested by libraryViewModel.searchRequested.observeAsState(false)
@@ -179,9 +179,7 @@ fun LibraryScreen(
   val pullRefreshState =
     rememberPullRefreshState(
       refreshing = pullRefreshing,
-      onRefresh = {
-        withHaptic(view) { refreshContent(showPullRefreshing = true) }
-      },
+      onRefresh = { withHaptic(view) { refreshContent(showPullRefreshing = true) } },
     )
 
   val titleTextStyle = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.SemiBold)
@@ -199,23 +197,28 @@ fun LibraryScreen(
 
   val showScrollbar by remember {
     derivedStateOf {
-      val scrolledDown = libraryListState.firstVisibleItemIndex > 0 || libraryListState.firstVisibleItemScrollOffset > 0
+      val scrolledDown =
+        libraryListState.firstVisibleItemIndex > 0 ||
+          libraryListState.firstVisibleItemScrollOffset > 0
       libraryListState.isScrollInProgress && scrolledDown
     }
   }
 
-  val scrollbarAlpha by animateFloatAsState(
-    targetValue = if (showScrollbar) 1f else 0f,
-    animationSpec = tween(durationMillis = 300),
-  )
+  val scrollbarAlpha by
+    animateFloatAsState(
+      targetValue = if (showScrollbar) 1f else 0f,
+      animationSpec = tween(durationMillis = 300),
+    )
 
   LaunchedEffect(Unit) {
     val emptyContent = library.itemCount == 0
     val libraryChanged = currentLibraryId != settingsViewModel.fetchPreferredLibraryId()
     val orderingChanged = currentOrdering != settingsViewModel.fetchLibraryOrdering()
 
     val localCacheUsing = cachingModelView.localCacheUsing()
-    val localCacheUpdated = cachingModelView.fetchLatestUpdate(currentLibraryId)?.let { it > localCacheUpdatedAt } ?: true
+    val localCacheUpdated =
+      cachingModelView.fetchLatestUpdate(currentLibraryId)?.let { it > localCacheUpdatedAt }
+        ?: true
 
     if (emptyContent || libraryChanged || orderingChanged || (localCacheUsing && localCacheUpdated)) {
       libraryViewModel.refreshRecentListening()
@@ -239,14 +242,12 @@ fun LibraryScreen(
 
     return when (type) {
       LibraryType.LIBRARY -> {
-        libraryViewModel
-          .fetchPreferredLibraryTitle()
+        libraryViewModel.fetchPreferredLibraryTitle()
           ?: context.getString(R.string.library_screen_library_title)
       }
 
       LibraryType.PODCAST -> {
-        libraryViewModel
-          .fetchPreferredLibraryTitle()
+        libraryViewModel.fetchPreferredLibraryTitle()
           ?: context.getString(R.string.library_screen_podcast_title)
       }
 
@@ -265,9 +266,17 @@ fun LibraryScreen(
           ?.key == "recent_books"
 
       when {
-        isPlaceholderRequired -> context.getString(R.string.library_screen_continue_listening_title)
-        showRecent && recentBlockVisible -> context.getString(R.string.library_screen_continue_listening_title)
-        else -> provideLibraryTitle()
+        isPlaceholderRequired -> {
+          context.getString(R.string.library_screen_continue_listening_title)
+        }
+
+        showRecent && recentBlockVisible -> {
+          context.getString(R.string.library_screen_continue_listening_title)
+        }
+
+        else -> {
+          provideLibraryTitle()
+        }
       }
     }
   }
@@ -280,7 +289,9 @@ fun LibraryScreen(
             targetState = searchRequested,
             label = "library_action_animation",
             transitionSpec = {
-              fadeIn(animationSpec = keyframes { durationMillis = 150 }) togetherWith
+              fadeIn(
+                animationSpec = keyframes { durationMillis = 150 },
+              ) togetherWith
                 fadeOut(animationSpec = keyframes { durationMillis = 150 })
             },
           ) { isSearchRequested ->
@@ -309,7 +320,10 @@ fun LibraryScreen(
                   provideLibraryTitle() -> {
                     Modifier
                       .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
+                        interactionSource =
+                          remember {
+                            MutableInteractionSource()
+                          },
                         indication = null,
                       ) { preferredLibraryExpanded = true }
                       .fillMaxWidth()
@@ -332,7 +346,7 @@ fun LibraryScreen(
             }
           }
         },
-        modifier = Modifier.systemBarsPadding(),
+        modifier = Modifier,
       )
     },
     bottomBar = {
@@ -347,17 +361,10 @@ fun LibraryScreen(
         }
       }
     },
-    modifier =
-      Modifier
-        .systemBarsPadding()
-        .fillMaxSize(),
+    modifier = Modifier.fillMaxSize(),
     content = { innerPadding ->
       Box(
-        modifier =
-          Modifier
-            .padding(innerPadding)
-            .pullRefresh(pullRefreshState)
-            .fillMaxSize(),
+        modifier = Modifier.pullRefresh(pullRefreshState).fillMaxSize(),
       ) {
         LazyColumn(
           state = libraryListState,
@@ -367,11 +374,20 @@ fun LibraryScreen(
               .imePadding()
               .withScrollbar(
                 state = libraryListState,
-                color = colorScheme.onBackground.copy(alpha = scrollbarAlpha),
+                color =
+                  colorScheme.onBackground.copy(
+                    alpha = scrollbarAlpha,
+                  ),
                 totalItems = libraryCount,
                 ignoreItems = listOf("recent_books", "library_title"),
               ),
-          contentPadding = PaddingValues(horizontal = 16.dp),
+          contentPadding =
+            PaddingValues(
+              start = 16.dp,
+              end = 16.dp,
+              top = innerPadding.calculateTopPadding(),
+              bottom = innerPadding.calculateBottomPadding(),
+            ),
         ) {
           item(key = "recent_books") {
             val showRecent = isRecentVisible()
@@ -402,8 +418,7 @@ fun LibraryScreen(
                 targetState = navBarTitle,
                 transitionSpec = {
                   fadeIn(
-                    animationSpec =
-                      tween(300),
+                    animationSpec = tween(300),
                   ) togetherWith
                     fadeOut(
                       animationSpec =
@@ -417,10 +432,7 @@ fun LibraryScreen(
                 when {
                   it == provideLibraryTitle() -> {
                     Spacer(
-                      modifier =
-                        Modifier
-                          .fillMaxWidth()
-                          .height(titleHeightDp),
+                      modifier = Modifier.fillMaxWidth().height(titleHeightDp),
                     )
                   }
 
@@ -431,7 +443,10 @@ fun LibraryScreen(
                         modifier =
                           Modifier
                             .clickable(
-                              interactionSource = remember { MutableInteractionSource() },
+                              interactionSource =
+                                remember {
+                                  MutableInteractionSource()
+                                },
                               indication = null,
                             ) { preferredLibraryExpanded = true }
                             .fillMaxWidth(),
@@ -488,7 +503,10 @@ fun LibraryScreen(
             state = pullRefreshState,
             contentColor = colorScheme.primary,
             backgroundColor = colorScheme.surfaceContainer,
-            modifier = Modifier.align(Alignment.TopCenter),
+            modifier =
+              Modifier
+                .align(Alignment.TopCenter)
+                .padding(top = innerPadding.calculateTopPadding()),
           )
         }
       }