move settings to bottom sheet

DatL4g · May 10, 2024 · 679bf7e · 679bf7e
1 parent dd8a366
commit 679bf7e
Show file tree

Hide file tree

Showing 18 changed files with 143 additions and 62 deletions.
diff --git a/...ttings/component/DomainSection.android.kt → ...ttings/component/DomainSection.android.kt b/...ttings/component/DomainSection.android.kt → ...ttings/component/DomainSection.android.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/RootComponent.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/RootComponent.kt
@@ -13,7 +13,7 @@ import dev.datlag.aniflow.other.UserHelper
 import dev.datlag.aniflow.ui.navigation.screen.favorites.FavoritesScreenComponent
 import dev.datlag.aniflow.ui.navigation.screen.home.HomeScreenComponent
 import dev.datlag.aniflow.ui.navigation.screen.medium.MediumScreenComponent
-import dev.datlag.aniflow.ui.navigation.screen.settings.SettingsScreenComponent
+import dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.SettingsDialogComponent
 import dev.datlag.aniflow.ui.navigation.screen.nekos.NekosScreenComponent
 import org.kodein.di.DI
 import org.kodein.di.instance
@@ -43,14 +43,14 @@ class RootComponent(
                 onMediumDetails = {
                     navigation.push(RootConfig.Details(it))
                 },
-                onProfile = {
-                    navigation.push(RootConfig.Settings)
-                },
                 onDiscover = {
                     // navigation.replaceCurrent(RootConfig.Wallpaper)
                 },
                 onFavorites = {
                     navigation.replaceCurrent(RootConfig.Favorites)
+                },
+                onNekos = {
+                    navigation.bringToFront(RootConfig.Nekos)
                 }
             )
             is RootConfig.Details -> MediumScreenComponent(
@@ -59,13 +59,6 @@ class RootComponent(
                 initialMedium = rootConfig.medium,
                 onBack = navigation::pop
             )
-            is RootConfig.Settings -> SettingsScreenComponent(
-                componentContext = componentContext,
-                di = di,
-                onNekos = {
-                    navigation.bringToFront(RootConfig.Nekos)
-                }
-            )
             is RootConfig.Favorites -> FavoritesScreenComponent(
                 componentContext = componentContext,
                 di = di,

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/RootConfig.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/RootConfig.kt
@@ -14,9 +14,6 @@ sealed class RootConfig {
         constructor(id: Int) : this(Medium(id))
     }
 
-    @Serializable
-    data object Settings : RootConfig()
-
     @Serializable
     data object Favorites : RootConfig()
 

diff --git a/...oseApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/DialogConfig.kt b/...oseApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/DialogConfig.kt
@@ -0,0 +1,10 @@
+package dev.datlag.aniflow.ui.navigation.screen.home
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class DialogConfig {
+
+    @Serializable
+    data object Settings : DialogConfig()
+}
diff --git a/...seApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeComponent.kt b/...seApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeComponent.kt
@@ -1,5 +1,7 @@
 package dev.datlag.aniflow.ui.navigation.screen.home
 
+import com.arkivanov.decompose.router.slot.ChildSlot
+import com.arkivanov.decompose.value.Value
 import dev.datlag.aniflow.anilist.AiringTodayRepository
 import dev.datlag.aniflow.anilist.TrendingRepository
 import dev.datlag.aniflow.anilist.model.Medium
@@ -8,6 +10,7 @@ import dev.datlag.aniflow.anilist.state.CollectionState
 import dev.datlag.aniflow.anilist.type.MediaType
 import dev.datlag.aniflow.trace.TraceRepository
 import dev.datlag.aniflow.ui.navigation.Component
+import dev.datlag.aniflow.ui.navigation.DialogComponent
 import kotlinx.coroutines.flow.Flow
 
 interface HomeComponent : Component {
@@ -21,6 +24,8 @@ interface HomeComponent : Component {
 
     val traceState: Flow<TraceRepository.State>
 
+    val dialog: Value<ChildSlot<DialogConfig, DialogComponent>>
+
     fun viewProfile()
     fun viewAnime()
     fun viewManga()

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreen.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreen.kt
@@ -21,6 +21,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
 import com.maxkeppeker.sheets.core.models.base.Header
 import com.maxkeppeker.sheets.core.models.base.rememberUseCaseState
 import com.maxkeppeler.sheets.option.OptionDialog
@@ -60,6 +61,10 @@ fun HomeScreen(component: HomeComponent) {
         it?.let(component::trace)
     }
 
+    val dialogState by component.dialog.subscribeAsState()
+
+    dialogState.child?.instance?.render()
+
     Scaffold(
         modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {

diff --git a/...src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreenComponent.kt b/...src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreenComponent.kt
@@ -4,6 +4,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.router.slot.*
+import com.arkivanov.decompose.value.Value
 import dev.chrisbanes.haze.HazeState
 import dev.datlag.aniflow.LocalHaze
 import dev.datlag.aniflow.anilist.AiringTodayRepository
@@ -20,6 +22,8 @@ import dev.datlag.aniflow.other.StateSaver
 import dev.datlag.aniflow.other.UserHelper
 import dev.datlag.aniflow.settings.Settings
 import dev.datlag.aniflow.trace.TraceRepository
+import dev.datlag.aniflow.ui.navigation.DialogComponent
+import dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.SettingsDialogComponent
 import dev.datlag.tooling.decompose.ioScope
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.SharingStarted
@@ -32,9 +36,9 @@ class HomeScreenComponent(
     componentContext: ComponentContext,
     override val di: DI,
     private val onMediumDetails: (Medium) -> Unit,
-    private val onProfile: () -> Unit,
     private val onDiscover: () -> Unit,
-    private val onFavorites: () -> Unit
+    private val onFavorites: () -> Unit,
+    private val onNekos: () -> Unit
 ) : HomeComponent, ComponentContext by componentContext {
 
     private val appSettings by instance<Settings.PlatformAppSettings>()
@@ -90,6 +94,21 @@ class HomeScreenComponent(
     private val traceRepository by instance<TraceRepository>()
     override val traceState: Flow<TraceRepository.State> = traceRepository.response
 
+    private val dialogNavigation = SlotNavigation<DialogConfig>()
+    override val dialog: Value<ChildSlot<DialogConfig, DialogComponent>> = childSlot(
+        source = dialogNavigation,
+        serializer = DialogConfig.serializer()
+    ) { config, context ->
+        when (config) {
+            is DialogConfig.Settings -> SettingsDialogComponent(
+                componentContext = context,
+                di = di,
+                onNekos = onNekos,
+                onDismiss = dialogNavigation::dismiss
+            )
+        }
+    }
+
     init {
         traceRepository.clear()
     }
@@ -108,7 +127,7 @@ class HomeScreenComponent(
     }
 
     override fun viewProfile() {
-        onProfile()
+        dialogNavigation.activate(DialogConfig.Settings)
     }
 
     override fun viewAnime() {

diff --git a/...tion/screen/settings/SettingsComponent.kt → ...home/dialog/settings/SettingsComponent.kt b/...tion/screen/settings/SettingsComponent.kt → ...home/dialog/settings/SettingsComponent.kt
@@ -1,13 +1,14 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings
 
 import dev.datlag.aniflow.anilist.model.User
 import dev.datlag.aniflow.ui.navigation.Component
+import dev.datlag.aniflow.ui.navigation.DialogComponent
 import kotlinx.coroutines.flow.Flow
 import dev.datlag.aniflow.settings.model.Color as SettingsColor
 import dev.datlag.aniflow.settings.model.TitleLanguage as SettingsTitle
 import dev.datlag.aniflow.settings.model.CharLanguage as SettingsChar
 
-interface SettingsComponent : Component {
+interface SettingsComponent : DialogComponent {
     val user: Flow<User?>
     val isLoggedIn: Flow<Boolean>
     val loginUri: String

diff --git a/...igation/screen/settings/SettingsScreen.kt → ...en/home/dialog/settings/SettingsDialog.kt b/...igation/screen/settings/SettingsScreen.kt → ...en/home/dialog/settings/SettingsDialog.kt
@@ -1,40 +1,57 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.rounded.ArrowBackIosNew
+import androidx.compose.material.icons.rounded.Code
 import androidx.compose.material3.*
-import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
-import dev.chrisbanes.haze.haze
-import dev.datlag.aniflow.LocalHaze
-import dev.datlag.aniflow.LocalPaddingValues
+import dev.datlag.aniflow.LocalEdgeToEdge
 import dev.datlag.aniflow.SharedRes
+import dev.datlag.aniflow.common.isFullyExpandedOrTargeted
 import dev.datlag.aniflow.common.merge
-import dev.datlag.aniflow.common.plus
 import dev.datlag.aniflow.other.Constants
 import dev.datlag.aniflow.other.StateSaver
-import dev.datlag.aniflow.ui.navigation.screen.settings.component.*
+import dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component.*
 import dev.datlag.tooling.compose.onClick
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 import dev.icerock.moko.resources.compose.painterResource
 import dev.icerock.moko.resources.compose.stringResource
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SettingsScreen(component: SettingsComponent) {
-    Scaffold {
-        val padding = it.merge(PaddingValues(16.dp))
+    val sheetState = rememberModalBottomSheetState()
+    val (insets, bottomPadding) = if (LocalEdgeToEdge.current) {
+        WindowInsets(
+            left = 0,
+            top = 0,
+            right = 0,
+            bottom = 0
+        ) to BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom).asPaddingValues()
+    } else {
+        BottomSheetDefaults.windowInsets to PaddingValues()
+    }
+
+    ModalBottomSheet(
+        onDismissRequest = component::dismiss,
+        windowInsets = insets,
+        sheetState = sheetState
+    ) {
         val listState = rememberLazyListState(
             initialFirstVisibleItemIndex = StateSaver.List.settingsOverview,
             initialFirstVisibleItemScrollOffset = StateSaver.List.settingsOverviewOffset
@@ -43,14 +60,16 @@ fun SettingsScreen(component: SettingsComponent) {
         LazyColumn(
             state = listState,
             modifier = Modifier.fillMaxWidth(),
-            contentPadding = padding,
+            contentPadding = bottomPadding.merge(PaddingValues(16.dp)),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {
             item {
                 UserSection(
                     userFlow = component.user,
                     loginUri = component.loginUri,
-                    modifier = Modifier.fillParentMaxWidth()
+                    dismissVisible = sheetState.isFullyExpandedOrTargeted(forceFullExpand = true),
+                    modifier = Modifier.fillParentMaxWidth(),
+                    onDismiss = component::dismiss
                 )
             }
             item {
@@ -159,7 +178,7 @@ fun SettingsScreen(component: SettingsComponent) {
                     horizontalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
                     Icon(
-                        imageVector = Icons.Default.Code,
+                        imageVector = Icons.Rounded.Code,
                         contentDescription = null,
                     )
                     Text(text = "Developed by DatLag")

diff --git a/...creen/settings/SettingsScreenComponent.kt → ...ialog/settings/SettingsDialogComponent.kt b/...creen/settings/SettingsScreenComponent.kt → ...ialog/settings/SettingsDialogComponent.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings
 
 import androidx.compose.runtime.Composable
 import com.arkivanov.decompose.ComponentContext
@@ -7,18 +7,18 @@ import dev.datlag.aniflow.common.onRender
 import dev.datlag.aniflow.other.UserHelper
 import dev.datlag.aniflow.settings.Settings
 import dev.datlag.tooling.compose.ioDispatcher
-import dev.datlag.tooling.decompose.ioScope
 import kotlinx.coroutines.flow.*
 import org.kodein.di.DI
 import org.kodein.di.instance
 import dev.datlag.aniflow.settings.model.Color as SettingsColor
 import dev.datlag.aniflow.settings.model.TitleLanguage as SettingsTitle
 import dev.datlag.aniflow.settings.model.CharLanguage as SettingsChar
 
-class SettingsScreenComponent(
+class SettingsDialogComponent(
     componentContext: ComponentContext,
     override val di: DI,
-    private val onNekos: () -> Unit
+    private val onNekos: () -> Unit,
+    private val onDismiss: () -> Unit
 ) : SettingsComponent, ComponentContext by componentContext {
 
     private val appSettings by di.instance<Settings.PlatformAppSettings>()
@@ -73,4 +73,8 @@ class SettingsScreenComponent(
     override fun nekos() {
         onNekos()
     }
+
+    override fun dismiss() {
+        onDismiss()
+    }
 }
diff --git a/...screen/settings/component/AdultSection.kt → ...dialog/settings/component/AdultSection.kt b/...screen/settings/component/AdultSection.kt → ...dialog/settings/component/AdultSection.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row

diff --git a/...en/settings/component/CharacterSection.kt → ...og/settings/component/CharacterSection.kt b/...en/settings/component/CharacterSection.kt → ...og/settings/component/CharacterSection.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row

diff --git a/...screen/settings/component/ColorSection.kt → ...dialog/settings/component/ColorSection.kt b/...screen/settings/component/ColorSection.kt → ...dialog/settings/component/ColorSection.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row

diff --git a/...creen/settings/component/DomainSection.kt → ...ialog/settings/component/DomainSection.kt b/...creen/settings/component/DomainSection.kt → ...ialog/settings/component/DomainSection.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier

diff --git a/...screen/settings/component/TitleSection.kt → ...dialog/settings/component/TitleSection.kt b/...screen/settings/component/TitleSection.kt → ...dialog/settings/component/TitleSection.kt
@@ -1,4 +1,4 @@
-package dev.datlag.aniflow.ui.navigation.screen.settings.component
+package dev.datlag.aniflow.ui.navigation.screen.home.dialog.settings.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row