Fix WindowInsets handling on iOS

chrisbanes · Jul 12, 2023 · cb0370a · cb0370a
1 parent 6562898
commit cb0370a
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 18 deletions.
diff --git a/common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/EntryGrid.kt b/common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/EntryGrid.kt
@@ -8,9 +8,12 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -51,6 +54,7 @@ import app.tivi.common.compose.ui.plus
 import app.tivi.common.ui.resources.MR
 import app.tivi.data.compoundmodels.EntryWithShow
 import app.tivi.data.models.Entry
+import com.moriatsushi.insetsx.systemBars
 import dev.icerock.moko.resources.compose.stringResource
 import kotlin.math.roundToInt
 
@@ -114,6 +118,7 @@ fun <E : Entry> EntryGrid(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier,
     ) { paddingValues ->
         val refreshing = lazyPagingItems.loadState.refresh == LoadStateLoading
@@ -202,6 +207,8 @@ private fun EntryGridAppBar(
                 )
             }
         },
+        windowInsets = WindowInsets.systemBars
+            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
         modifier = modifier,
         scrollBehavior = scrollBehavior,
         title = { Text(text = title) },

diff --git a/common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/ui/AppBar.kt b/common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/ui/AppBar.kt
@@ -7,6 +7,9 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.only
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
@@ -23,6 +26,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import app.tivi.data.models.TraktUser
+import com.moriatsushi.insetsx.systemBars
 
 /**
  * A wrapper around [TopAppBar] which allows some [bottomContent] below the bar, but within the same
@@ -56,16 +60,17 @@ fun TopAppBarWithBottomContent(
                     titleContentColor = LocalContentColor.current,
                     actionIconContentColor = LocalContentColor.current,
                 ),
+                windowInsets = WindowInsets.systemBars
+                    .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
             )
-
             bottomContent?.invoke(this)
         }
     }
 }
 
 @ExperimentalMaterial3Api
 @Composable
-fun TiviStandardAppBar(
+fun TiviRootScreenAppBar(
     title: String,
     loggedIn: Boolean,
     user: TraktUser?,
@@ -77,6 +82,8 @@ fun TiviStandardAppBar(
 ) {
     TopAppBar(
         modifier = modifier,
+        windowInsets = WindowInsets.systemBars
+            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
         scrollBehavior = scrollBehavior,
         title = { Text(text = title) },
         actions = {

diff --git a/ios-app/Tivi/Tivi/ContentView.swift b/ios-app/Tivi/Tivi/ContentView.swift
@@ -17,7 +17,7 @@ struct ContentView: View {
 
     var body: some View {
         ComposeView(component: self.component)
-            .ignoresSafeArea(.all, edges: .bottom) // Compose has own keyboard handler
+            .ignoresSafeArea(.all, edges: .all)
     }
 }
 

diff --git a/ui/discover/src/commonMain/kotlin/app/tivi/home/discover/Discover.kt b/ui/discover/src/commonMain/kotlin/app/tivi/home/discover/Discover.kt
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -60,7 +61,7 @@ import app.tivi.common.compose.rememberTiviFlingBehavior
 import app.tivi.common.compose.rememberTiviSnapFlingBehavior
 import app.tivi.common.compose.ui.AutoSizedCircularProgressIndicator
 import app.tivi.common.compose.ui.PosterCard
-import app.tivi.common.compose.ui.TiviStandardAppBar
+import app.tivi.common.compose.ui.TiviRootScreenAppBar
 import app.tivi.common.ui.resources.MR
 import app.tivi.data.compoundmodels.EntryWithShow
 import app.tivi.data.models.Episode
@@ -70,6 +71,7 @@ import app.tivi.data.traktauth.TraktAuthState
 import app.tivi.overlays.showInDialog
 import app.tivi.screens.AccountScreen
 import app.tivi.screens.DiscoverScreen
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.overlay.LocalOverlayHost
 import com.slack.circuit.runtime.CircuitContext
 import com.slack.circuit.runtime.Screen
@@ -164,7 +166,7 @@ internal fun Discover(
 
     Scaffold(
         topBar = {
-            TiviStandardAppBar(
+            TiviRootScreenAppBar(
                 title = stringResource(MR.strings.discover_title),
                 loggedIn = state.authState == TraktAuthState.LOGGED_IN,
                 user = state.user,
@@ -186,6 +188,7 @@ internal fun Discover(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier,
     ) { paddingValues ->
         val refreshState = rememberPullRefreshState(refreshing = false, onRefresh = refresh)

diff --git a/ui/library/src/commonMain/kotlin/app/tivi/home/library/Library.kt b/ui/library/src/commonMain/kotlin/app/tivi/home/library/Library.kt
@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -74,7 +75,7 @@ import app.tivi.common.compose.ui.EmptyContent
 import app.tivi.common.compose.ui.PosterCard
 import app.tivi.common.compose.ui.SearchTextField
 import app.tivi.common.compose.ui.SortChip
-import app.tivi.common.compose.ui.TiviStandardAppBar
+import app.tivi.common.compose.ui.TiviRootScreenAppBar
 import app.tivi.common.compose.ui.plus
 import app.tivi.common.ui.resources.MR
 import app.tivi.data.compoundmodels.LibraryShow
@@ -84,6 +85,7 @@ import app.tivi.data.traktauth.TraktAuthState
 import app.tivi.overlays.showInDialog
 import app.tivi.screens.AccountScreen
 import app.tivi.screens.LibraryScreen
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.overlay.LocalOverlayHost
 import com.slack.circuit.runtime.CircuitContext
 import com.slack.circuit.runtime.Screen
@@ -174,7 +176,7 @@ internal fun Library(
 
     Scaffold(
         topBar = {
-            TiviStandardAppBar(
+            TiviRootScreenAppBar(
                 title = stringResource(MR.strings.library_title),
                 loggedIn = state.authState == TraktAuthState.LOGGED_IN,
                 user = state.user,
@@ -198,6 +200,7 @@ internal fun Library(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier.fillMaxSize(),
     ) { paddingValues ->
         val refreshState = rememberPullRefreshState(

diff --git a/ui/root/src/commonMain/kotlin/app/tivi/home/Home.kt b/ui/root/src/commonMain/kotlin/app/tivi/home/Home.kt
@@ -32,7 +32,6 @@ import androidx.compose.material3.NavigationDrawerItem
 import androidx.compose.material3.NavigationRail
 import androidx.compose.material3.NavigationRailItem
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
@@ -54,6 +53,7 @@ import app.tivi.screens.UpNextScreen
 import com.moriatsushi.insetsx.navigationBars
 import com.moriatsushi.insetsx.safeContentPadding
 import com.moriatsushi.insetsx.statusBars
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.backstack.SaveableBackStack
 import com.slack.circuit.foundation.NavigableCircuitContent
 import com.slack.circuit.foundation.screen
@@ -95,8 +95,8 @@ internal fun Home(
                 )
             }
         },
-        contentWindowInsets = ScaffoldDefaults.contentWindowInsets
-            .exclude(WindowInsets.statusBars), // We let content handle the status bar
+        // We let content handle the status bar
+        contentWindowInsets = WindowInsets.systemBars.exclude(WindowInsets.statusBars),
         modifier = modifier,
     ) { paddingValues ->
         Row(
@@ -143,7 +143,10 @@ internal fun HomeNavigationBar(
     onNavigationSelected: (Screen) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    NavigationBar(modifier = modifier) {
+    NavigationBar(
+        modifier = modifier,
+        windowInsets = WindowInsets.navigationBars,
+    ) {
         for (item in HomeNavigationItems) {
             NavigationBarItem(
                 icon = {

diff --git a/ui/search/src/commonMain/kotlin/app/tivi/home/search/Search.kt b/ui/search/src/commonMain/kotlin/app/tivi/home/search/Search.kt
@@ -11,6 +11,7 @@ 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.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -53,6 +54,7 @@ import app.tivi.common.ui.resources.MR
 import app.tivi.data.models.TiviShow
 import app.tivi.screens.SearchScreen
 import com.moriatsushi.insetsx.statusBarsPadding
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.runtime.CircuitContext
 import com.slack.circuit.runtime.Screen
 import com.slack.circuit.runtime.ui.Ui
@@ -156,6 +158,7 @@ internal fun Search(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier,
     ) { padding ->
         if (state.searchResults.isEmpty() && !state.refreshing) {

diff --git a/ui/show/details/src/commonMain/kotlin/app/tivi/showdetails/details/ShowDetails.kt b/ui/show/details/src/commonMain/kotlin/app/tivi/showdetails/details/ShowDetails.kt
@@ -19,12 +19,14 @@ 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.WindowInsetsSides
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.exclude
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -55,7 +57,6 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.Snackbar
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
@@ -108,6 +109,7 @@ import app.tivi.data.models.TiviShow
 import app.tivi.data.views.ShowsWatchStats
 import app.tivi.screens.ShowDetailsScreen
 import com.moriatsushi.insetsx.navigationBars
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.runtime.CircuitContext
 import com.slack.circuit.runtime.Screen
 import com.slack.circuit.runtime.ui.Ui
@@ -233,8 +235,7 @@ internal fun ShowDetails(
             }
         },
         // The nav bar is handled by the root Scaffold
-        contentWindowInsets = ScaffoldDefaults.contentWindowInsets
-            .exclude(WindowInsets.navigationBars),
+        contentWindowInsets = WindowInsets.systemBars.exclude(WindowInsets.navigationBars),
         modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
     ) { contentPadding ->
         Surface(modifier = Modifier.bodyWidth()) {
@@ -958,6 +959,8 @@ private fun ShowDetailsAppBar(
             )
         },
         scrollBehavior = scrollBehavior,
+        windowInsets = WindowInsets.systemBars
+            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
         modifier = modifier,
     )
 }

diff --git a/ui/show/seasons/src/commonMain/kotlin/app/tivi/showdetails/seasons/ShowSeasons.kt b/ui/show/seasons/src/commonMain/kotlin/app/tivi/showdetails/seasons/ShowSeasons.kt
@@ -76,7 +76,7 @@ import app.tivi.data.compoundmodels.SeasonWithEpisodesAndWatches
 import app.tivi.data.models.Episode
 import app.tivi.data.models.Season
 import app.tivi.screens.ShowSeasonsScreen
-import com.moriatsushi.insetsx.statusBars
+import com.moriatsushi.insetsx.systemBars
 import com.slack.circuit.runtime.CircuitContext
 import com.slack.circuit.runtime.Screen
 import com.slack.circuit.runtime.ui.Ui
@@ -161,7 +161,6 @@ internal fun ShowSeasons(
     }
 
     Scaffold(
-        contentWindowInsets = WindowInsets.statusBars,
         topBar = {
             TopAppBarWithBottomContent(
                 title = { Text(text = state.show.title ?: "") },
@@ -204,6 +203,7 @@ internal fun ShowSeasons(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier
             .testTag("show_seasons")
             .fillMaxSize(),

diff --git a/ui/upnext/src/commonMain/kotlin/app/tivi/home/upnext/UpNext.kt b/ui/upnext/src/commonMain/kotlin/app/tivi/home/upnext/UpNext.kt
@@ -13,6 +13,7 @@ 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.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -68,7 +69,7 @@ import app.tivi.common.compose.rememberTiviFlingBehavior
 import app.tivi.common.compose.ui.AsyncImage
 import app.tivi.common.compose.ui.EmptyContent
 import app.tivi.common.compose.ui.SortChip
-import app.tivi.common.compose.ui.TiviStandardAppBar
+import app.tivi.common.compose.ui.TiviRootScreenAppBar
 import app.tivi.common.compose.ui.plus
 import app.tivi.common.ui.resources.MR
 import app.tivi.data.imagemodels.EpisodeImageModel
@@ -83,6 +84,7 @@ import app.tivi.overlays.showInDialog
 import app.tivi.screens.AccountScreen
 import app.tivi.screens.EpisodeTrackScreen
 import app.tivi.screens.UpNextScreen
+import com.moriatsushi.insetsx.systemBars
 import com.seiko.imageloader.model.ImageResult
 import com.slack.circuit.overlay.LocalOverlayHost
 import com.slack.circuit.runtime.CircuitContext
@@ -179,7 +181,7 @@ internal fun UpNext(
 
     Scaffold(
         topBar = {
-            TiviStandardAppBar(
+            TiviRootScreenAppBar(
                 title = stringResource(MR.strings.upnext_title),
                 loggedIn = state.authState == TraktAuthState.LOGGED_IN,
                 user = state.user,
@@ -203,6 +205,7 @@ internal fun UpNext(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.systemBars,
         modifier = modifier.fillMaxSize(),
     ) { paddingValues ->
         val refreshState = rememberPullRefreshState(