Add ios safe area

ios/ios/iOSApp.swift

@@ -7,7 +7,10 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  window = UIWindow(frame: UIScreen.main.bounds)
- let mainViewController = Main_iosKt.MainViewController()
+ let mainViewController = Main_iosKt.MainViewController(
+ topSafeArea: Float(window?.safeAreaInsets.top ?? 0),
+ bottomSafeArea: Float(window?.safeAreaInsets.bottom ?? 0)
+ )
  window?.rootViewController = mainViewController
  window?.makeKeyAndVisible()
  return true

shared/src/commonMain/kotlin/com/mocoding/pokedex/ui/pokedex/PokedexComponent.kt

@@ -38,7 +38,8 @@ class PokedexComponent(
  }
 
  sealed class Output {
- data class PokemonClicked(val name: String) : Output()
+ object NavigateBack : Output()
+ data class NavigateToDetails(val name: String) : Output()
  }
 
 }

shared/src/commonMain/kotlin/com/mocoding/pokedex/ui/pokedex/component/PokedexContent.kt

@@ -1,23 +1,15 @@
 package com.mocoding.pokedex.ui.pokedex.component
 
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ArrowBack
 import androidx.compose.material.icons.rounded.Menu
-import androidx.compose.material.icons.rounded.Search
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.mocoding.pokedex.core.model.Video
-import com.mocoding.pokedex.ui.main.MainComponent
-import com.mocoding.pokedex.ui.main.components.CategoryButton
-import com.mocoding.pokedex.ui.main.components.VideoRow
-import com.mocoding.pokedex.ui.main.store.MainStore
 import com.mocoding.pokedex.ui.pokedex.PokedexComponent
 import com.mocoding.pokedex.ui.pokedex.store.PokedexStore
 import com.mocoding.pokedex.ui.theme.*
@@ -35,9 +27,11 @@ internal fun PokedexContent(
  title = {},
  navigationIcon = {
  IconButton(
- onClick = {},
+ onClick = {
+ onOutput(PokedexComponent.Output.NavigateBack)
+ },
  ) {
- Icon(Icons.Rounded.Menu, contentDescription = null)
+ Icon(Icons.Rounded.ArrowBack, contentDescription = null)
  }
  },
  colors = TopAppBarDefaults.largeTopAppBarColors(
@@ -50,14 +44,6 @@ internal fun PokedexContent(
  modifier = Modifier
  .padding(paddingValue)
  ) {
-// if (state.isLoading) {
-// Box(
-// contentAlignment = Alignment.Center,
-// modifier = Modifier.fillMaxSize()
-// ) {
-// CircularProgressIndicator()
-// }
-// }
 
 // TextField(
 // value = state.search,
@@ -88,24 +74,6 @@ internal fun PokedexContent(
 // .padding(horizontal = 20.dp, vertical = 20.dp)
 // )
 
- Text(
- text = "Pokedex",
- color = MaterialTheme.colorScheme.onBackground,
- style = MaterialTheme.typography.titleLarge.copy(
- fontWeight = FontWeight.Bold
- ),
- modifier = Modifier
- .padding(horizontal = 20.dp)
- .padding(top = 20.dp, bottom = 6.dp)
- )
-
- Divider(
- color = MaterialTheme.colorScheme.outline.copy(alpha = .4f),
- modifier = Modifier
- .fillMaxWidth()
- .padding(horizontal = 20.dp)
- )
-
  state.error?.let { error ->
  Box(
  contentAlignment = Alignment.Center,
@@ -115,18 +83,39 @@ internal fun PokedexContent(
  }
  }
 
- PokemonGrid(
- onPokemonClicked = { name ->
- onOutput(PokedexComponent.Output.PokemonClicked(name = name))
- },
- pokemonList = state.pokemonList,
- loadMoreItems = {
- if (state.pokemonList.isEmpty()) return@PokemonGrid
+ Column {
+ Text(
+ text = "Pokedex",
+ color = MaterialTheme.colorScheme.onBackground,
+ style = MaterialTheme.typography.titleLarge.copy(
+ fontWeight = FontWeight.Bold
+ ),
+ modifier = Modifier
+ .padding(horizontal = 20.dp)
+ .padding(top = 20.dp, bottom = 6.dp)
+ )
+
+ Divider(
+ color = MaterialTheme.colorScheme.outline.copy(alpha = .4f),
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 20.dp)
+ )
+
+ PokemonGrid(
+ onPokemonClicked = { name ->
+ onOutput(PokedexComponent.Output.NavigateToDetails(name = name))
+ },
+ pokemonList = state.pokemonList,
+ loadMoreItems = {
+ if (state.pokemonList.isEmpty()) return@PokemonGrid
+
+ val nextPage = state.pokemonList.last().page + 1
+ onEvent(PokedexStore.Intent.LoadPokemonListByPage(page = nextPage))
+ }
+ )
+ }
 
- val nextPage = state.pokemonList.last().page + 1
- onEvent(PokedexStore.Intent.LoadPokemonListByPage(page = nextPage))
- }
- )
 
  }
  }

shared/src/commonMain/kotlin/com/mocoding/pokedex/ui/pokedex/component/PokemonItem.kt

@@ -3,12 +3,18 @@ package com.mocoding.pokedex.ui.pokedex.component
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.BlurredEdgeTreatment
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import com.mocoding.pokedex.core.model.Pokemon
@@ -29,8 +35,8 @@ internal fun PokemonItem(
  //border = BorderStroke(2.dp, MaterialTheme.colorScheme.primary),
  shape = MaterialTheme.shapes.small,
  colors = CardDefaults.elevatedCardColors(
- containerColor = MaterialTheme.colorScheme.secondary,
- contentColor = MaterialTheme.colorScheme.onSecondary,
+ containerColor = MaterialTheme.colorScheme.background,
+ contentColor = MaterialTheme.colorScheme.onBackground,
  ),
  modifier = modifier
  ) {
@@ -45,19 +51,32 @@ internal fun PokemonItem(
  Image(
  painter = painter,
  contentDescription = pokemon.name,
- contentScale = ContentScale.Crop,
+ contentScale = ContentScale.Fit,
  modifier = Modifier
  .fillMaxWidth()
  .aspectRatio(1.2f)
  .fillMaxHeight()
+ .scale(1.2f)
+ .blur(16.dp)
+ .alpha(.4f)
  )
 
- if (painter.requestState is ImageRequestState.Loading
- || painter.requestState is ImageRequestState.Failure) {
- CircularProgressIndicator(
- color = MaterialTheme.colorScheme.onSecondary
- )
- }
+ Image(
+ painter = painter,
+ contentDescription = pokemon.name,
+ contentScale = ContentScale.Fit,
+ modifier = Modifier
+ .fillMaxWidth()
+ .aspectRatio(1.2f)
+ .fillMaxHeight()
+ )
+
+// if (painter.requestState is ImageRequestState.Loading
+// || painter.requestState is ImageRequestState.Failure) {
+// CircularProgressIndicator(
+// color = MaterialTheme.colorScheme.onSecondary
+// )
+// }
  }
 
  Text(

shared/src/commonMain/kotlin/com/mocoding/pokedex/ui/root/RootComponent.kt

@@ -82,7 +82,8 @@ class RootComponent internal constructor(
 
  private fun onPokedexOutput(output: PokedexComponent.Output): Unit =
  when (output) {
- is PokedexComponent.Output.PokemonClicked -> navigation.push(Configuration.Details(output.name))
+ is PokedexComponent.Output.NavigateBack -> navigation.pop()
+ is PokedexComponent.Output.NavigateToDetails -> navigation.push(Configuration.Details(output.name))
  }
 
  private fun onDetailsOutput(output: DetailsComponent.Output): Unit =

shared/src/iosMain/kotlin/com/mocoding/pokedex/main.ios.kt

@@ -1,13 +1,11 @@
 package com.mocoding.pokedex
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.window.ComposeUIViewController
 import com.arkivanov.decompose.DefaultComponentContext
 import com.arkivanov.essenty.lifecycle.LifecycleRegistry
@@ -16,9 +14,13 @@ import com.mocoding.pokedex.core.di.initKoin
 import com.mocoding.pokedex.ui.ContentView
 import com.mocoding.pokedex.ui.root.RootComponent
 import com.mocoding.pokedex.ui.theme.PokedexTheme
-import platform.UIKit.UIViewController
+import platform.UIKit.*
 
-fun MainViewController(): UIViewController {
+@Suppress("unused", "FunctionName")
+fun MainViewController(
+ topSafeArea: Float,
+ bottomSafeArea: Float
+): UIViewController {
  val koin = initKoin().koin
 
  val lifecycle = LifecycleRegistry()
@@ -31,14 +33,20 @@ fun MainViewController(): UIViewController {
  )
 
  return ComposeUIViewController {
+ val density = LocalDensity.current
+
+ val topSafeAreaDp = with(density) { topSafeArea.toDp() }
+ val bottomSafeAreaDp = with(density) { bottomSafeArea.toDp() }
+
  PokedexTheme {
- Box(
- modifier = Modifier
- .fillMaxSize()
- .background(MaterialTheme.colorScheme.background)
- .padding(top = 50.dp)
+ Surface(
+ color = MaterialTheme.colorScheme.background,
+ modifier = Modifier.fillMaxSize()
  ) {
- ContentView(component = rootComponent)
+ ContentView(
+ component = rootComponent,
+ safeArea = PaddingValues(top = topSafeAreaDp, bottom = bottomSafeAreaDp),
+ )
  }
  }
  }

shared/src/iosMain/kotlin/com/mocoding/pokedex/ui/ContentView.kt

@@ -1,10 +1,21 @@
 package com.mocoding.pokedex.ui
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import com.mocoding.pokedex.ui.root.RootComponent
 import com.mocoding.pokedex.ui.root.RootContent
 
 @Composable
-internal fun ContentView(component: RootComponent) {
- RootContent(component)
+internal fun ContentView(
+ component: RootComponent,
+ safeArea: PaddingValues,
+) {
+ Box(
+ modifier = Modifier.padding(safeArea)
+ ) {
+ RootContent(component)
+ }
 }