Onboarding UI update (#250)

* Added onboarding form page animation & made other pages animations run only when page is visible for the user

* ServerSetupViewModelTest updated

* UI update:
- Updated splash screen with system colors
- Added scroll for onboarding pager
- Made Form page animation slightly faster
- Updated LookAndFeelPage animation & UI
- Updated configuration loader screen with system colors

* Updated OnBoardingViewModelSplashSourceTest

* Resolved PR comments

Author: ComicSAS

core/ui/src/main/java/com/shifthackz/aisdv1/core/extensions/GestureExtensions.kt

@@ -1,10 +1,12 @@
 package com.shifthackz.aisdv1.core.extensions
 
+import android.annotation.SuppressLint
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.pointer.PointerEventPass
 import androidx.compose.ui.input.pointer.PointerInputChange
 import androidx.compose.ui.input.pointer.pointerInput
 
+@SuppressLint("ReturnFromAwaitPointerEventScope")
 fun Modifier.gesturesDisabled(disabled: Boolean = true) =
     if (disabled) {
         pointerInput(Unit) {

presentation/src/main/java/com/shifthackz/aisdv1/presentation/di/ViewModelModule.kt

@@ -61,6 +61,7 @@ val viewModelModule = module {
             splashNavigationUseCase = get(),
             preferenceManager = get(),
             schedulersProvider = get(),
+            buildInfoProvider = get(),
         )
     }
 

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/loader/ConfigurationLoaderScreen.kt

@@ -26,6 +26,8 @@ import org.koin.androidx.compose.koinViewModel
 fun ConfigurationLoaderScreen() {
     MviComponent(
         viewModel = koinViewModel<ConfigurationLoaderViewModel>(),
+        navigationBarColor = MaterialTheme.colorScheme.surface,
+        applySystemUiColors = true,
     ) { state, _ ->
         ScreenContent(
             modifier = Modifier.fillMaxSize(),
@@ -40,7 +42,7 @@ private fun ScreenContent(
     state: ConfigurationLoaderState,
 ) {
     Box(
-        modifier = modifier.background(MaterialTheme.colorScheme.background),
+        modifier = modifier.background(MaterialTheme.colorScheme.surface),
     ) {
         Column(
             modifier = Modifier.fillMaxSize(),

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/OnBoardingScreen.kt

@@ -194,14 +194,22 @@ private fun OnBoardingScreenContent(
                 modifier = Modifier.fillMaxSize(),
                 state = pagerState,
                 beyondBoundsPageCount = OnBoardingPage.entries.size,
-                userScrollEnabled = false,
+                userScrollEnabled = true,
             ) { index ->
                 when (OnBoardingPage.entries[index]) {
-                    OnBoardingPage.Form -> FormPageContent()
-                    OnBoardingPage.Providers -> ProviderPageContent()
+                    OnBoardingPage.Providers -> ProviderPageContent(
+                        isPageVisible = pagerState.currentPage == OnBoardingPage.Providers.ordinal
+                    )
+
+                    OnBoardingPage.Form -> FormPageContent(
+                        isPageVisible = pagerState.currentPage == OnBoardingPage.Form.ordinal
+                    )
+
                     OnBoardingPage.LocalDiffusion -> LocalDiffusionPageContent()
                     OnBoardingPage.LookAndFeel -> LookAndFeelPageContent(
                         darkThemeToken = state.darkThemeToken,
+                        appVersion = state.appVersion,
+                        isPageVisible = pagerState.currentPage == OnBoardingPage.LookAndFeel.ordinal
                     )
                 }
             }

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/OnBoardingState.kt

@@ -5,4 +5,5 @@ import com.shifthackz.android.core.mvi.MviState
 
 data class OnBoardingState(
     val darkThemeToken: DarkThemeToken = DarkThemeToken.FRAPPE,
+    val appVersion: String = "",
 ) : MviState

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/OnBoardingViewModel.kt

@@ -1,5 +1,6 @@
 package com.shifthackz.aisdv1.presentation.screen.onboarding
 
+import com.shifthackz.aisdv1.core.common.appbuild.BuildInfoProvider
 import com.shifthackz.aisdv1.core.common.log.errorLog
 import com.shifthackz.aisdv1.core.common.schedulers.SchedulersProvider
 import com.shifthackz.aisdv1.core.common.schedulers.subscribeOnMainThread
@@ -19,14 +20,19 @@ class OnBoardingViewModel(
     private val splashNavigationUseCase: SplashNavigationUseCase,
     private val preferenceManager: PreferenceManager,
     private val schedulersProvider: SchedulersProvider,
+    private val buildInfoProvider: BuildInfoProvider,
 ) : MviRxViewModel<OnBoardingState, OnBoardingIntent, EmptyEffect>() {
 
     override val initialState = OnBoardingState()
 
     init {
         updateState {
             val token = DarkThemeToken.parse(preferenceManager.designDarkThemeToken)
-            it.copy(darkThemeToken = token)
+            val version = buildInfoProvider.toString()
+            it.copy(
+                darkThemeToken = token,
+                appVersion = version
+            )
         }
     }
 

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/page/FormPageContent.kt

@@ -1,35 +1,48 @@
 package com.shifthackz.aisdv1.presentation.screen.onboarding.page
 
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
-import com.shifthackz.aisdv1.core.extensions.gesturesDisabled
+import com.shifthackz.aisdv1.core.common.extensions.EmptyLambda
 import com.shifthackz.aisdv1.presentation.screen.onboarding.buildOnBoardingText
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingDensity
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingPhoneAspectRatio
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingPhoneWidthFraction
 import com.shifthackz.aisdv1.presentation.screen.txt2img.TextToImageScreenContent
 import com.shifthackz.aisdv1.presentation.screen.txt2img.TextToImageState
 import com.shifthackz.aisdv1.presentation.widget.frame.PhoneFrame
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import com.shifthackz.aisdv1.core.localization.R as LocalizationR
 
 @Composable
 fun FormPageContent(
     modifier: Modifier = Modifier,
+    isPageVisible: Boolean = false,
 ) = Column(
     modifier = modifier.fillMaxSize(),
     horizontalAlignment = Alignment.CenterHorizontally,
 ) {
+    val scope = rememberCoroutineScope()
+    val scrollState = rememberScrollState()
     Spacer(modifier = Modifier.weight(1f))
     Text(
         text = buildOnBoardingText(LocalizationR.string.on_boarding_page_form_title),
@@ -42,9 +55,7 @@ fun FormPageContent(
     ) {
         CompositionLocalProvider(LocalDensity provides onBoardingDensity) {
             TextToImageScreenContent(
-                modifier = Modifier
-                    .gesturesDisabled()
-                    .aspectRatio(onBoardingPhoneAspectRatio),
+                modifier = Modifier.aspectRatio(onBoardingPhoneAspectRatio),
                 state = TextToImageState(
                     onBoardingDemo = true,
                     advancedToggleButtonVisible = false,
@@ -58,8 +69,33 @@ fun FormPageContent(
                     subSeed = "151297",
                     subSeedStrength = 0.69f,
                 ),
+                scrollState = scrollState,
+            )
+            Box(
+                modifier = Modifier
+                    .aspectRatio(onBoardingPhoneAspectRatio)
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() },
+                        onClick = EmptyLambda
+                    ),
             )
         }
     }
     Spacer(modifier = Modifier.weight(1f))
+    DisposableEffect(isPageVisible) {
+        val job = scope.launch {
+            while (isPageVisible) {
+                scrollState.scrollTo(0)
+                delay(2000)
+                scrollState.animateScrollTo(scrollState.maxValue / 2 + 60, tween(2000))
+                delay(1000)
+                scrollState.animateScrollTo(scrollState.maxValue, tween(2000))
+                delay(1000)
+            }
+        }
+        onDispose {
+            job.cancel()
+        }
+    }
 }

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/page/LocalDiffusionPageContent.kt

@@ -1,6 +1,8 @@
 package com.shifthackz.aisdv1.presentation.screen.onboarding.page
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -10,14 +12,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 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.sp
-import com.shifthackz.aisdv1.core.extensions.gesturesDisabled
+import com.shifthackz.aisdv1.core.common.extensions.EmptyLambda
 import com.shifthackz.aisdv1.domain.entity.ServerSource
 import com.shifthackz.aisdv1.presentation.screen.onboarding.buildOnBoardingText
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingDensity
@@ -49,7 +52,6 @@ fun LocalDiffusionPageContent(
     ) {
         CompositionLocalProvider(LocalDensity provides onBoardingDensity) {
             val localModifier = Modifier
-                .gesturesDisabled()
                 .aspectRatio(onBoardingPhoneAspectRatio)
             Box(
                 contentAlignment = Alignment.Center,
@@ -70,7 +72,12 @@ fun LocalDiffusionPageContent(
                 Box(
                     modifier = localModifier
                         .fillMaxWidth()
-                        .background(Color.Black.copy(alpha = 0.7f)),
+                        .background(Color.Black.copy(alpha = 0.7f))
+                        .clickable(
+                            indication = null,
+                            interactionSource = remember { MutableInteractionSource() },
+                            onClick = EmptyLambda
+                        ),
                     contentAlignment = Alignment.Center,
                 ) {
                     Box(

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/page/LookAndFeelPageContent.kt

@@ -1,5 +1,8 @@
 package com.shifthackz.aisdv1.presentation.screen.onboarding.page
 
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
@@ -20,9 +23,10 @@ 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.sp
-import com.shifthackz.aisdv1.core.extensions.gesturesDisabled
+import com.shifthackz.aisdv1.core.common.extensions.EmptyLambda
 import com.shifthackz.aisdv1.domain.entity.ColorToken
 import com.shifthackz.aisdv1.domain.entity.DarkThemeToken
+import com.shifthackz.aisdv1.domain.entity.Grid
 import com.shifthackz.aisdv1.presentation.screen.onboarding.buildOnBoardingText
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingDensity
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingPhoneAspectRatio
@@ -41,6 +45,8 @@ import com.shifthackz.aisdv1.core.localization.R as LocalizationR
 fun LookAndFeelPageContent(
     modifier: Modifier = Modifier,
     darkThemeToken: DarkThemeToken,
+    appVersion: String,
+    isPageVisible: Boolean = false,
 ) = Column(
     modifier = modifier.fillMaxSize(),
     horizontalAlignment = Alignment.CenterHorizontally,
@@ -57,6 +63,18 @@ fun LookAndFeelPageContent(
             ),
         )
     }
+    var settingsState by remember {
+        mutableStateOf(
+            SettingsState(
+                loading = false,
+                onBoardingDemo = true,
+                colorToken = themeState.colorToken,
+                darkThemeToken = themeState.darkThemeToken,
+                darkTheme = darkTheme,
+                appVersion = appVersion
+            ),
+        )
+    }
     Spacer(modifier = Modifier.weight(1f))
     Text(
         text = buildOnBoardingText(LocalizationR.string.on_boarding_page_ui_title),
@@ -71,26 +89,35 @@ fun LookAndFeelPageContent(
         CompositionLocalProvider(LocalDensity provides onBoardingDensity) {
             AiSdAppTheme(themeState) {
                 SettingsScreenContent(
+                    modifier = Modifier.aspectRatio(onBoardingPhoneAspectRatio),
+                    state = settingsState,
+                )
+                Box(
                     modifier = Modifier
-                        .gesturesDisabled()
-                        .aspectRatio(onBoardingPhoneAspectRatio),
-                    state = SettingsState(
-                        loading = false,
-                        onBoardingDemo = true,
-                        colorToken = themeState.colorToken,
-                        darkThemeToken = darkThemeToken,
-                        darkTheme = darkTheme,
-                    ),
+                        .aspectRatio(onBoardingPhoneAspectRatio)
+                        .clickable(
+                            indication = null,
+                            interactionSource = remember { MutableInteractionSource() },
+                            onClick = EmptyLambda
+                        ),
                 )
             }
         }
     }
-    DisposableEffect(Unit) {
+    DisposableEffect(isPageVisible) {
         val job = scope.launch {
-            while (true) {
+            while (isPageVisible) {
                 delay(700)
+                val darkThemeTokenRnd = DarkThemeToken.entries.random()
+                val colorTokenRnd = ColorToken.entries.random()
+                settingsState = settingsState.copy(
+                    galleryGrid = Grid.entries.random(),
+                    darkThemeToken = darkThemeTokenRnd,
+                    colorToken = colorTokenRnd,
+                )
                 themeState = themeState.copy(
-                    colorToken = ColorToken.entries.random(),
+                    darkThemeToken = darkThemeTokenRnd,
+                    colorToken = colorTokenRnd,
                 )
             }
         }

presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/page/ProvidersPageContent.kt

@@ -1,5 +1,8 @@
 package com.shifthackz.aisdv1.presentation.screen.onboarding.page
 
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
@@ -20,7 +23,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.sp
-import com.shifthackz.aisdv1.core.extensions.gesturesDisabled
+import com.shifthackz.aisdv1.core.common.extensions.EmptyLambda
 import com.shifthackz.aisdv1.domain.entity.ServerSource
 import com.shifthackz.aisdv1.presentation.screen.onboarding.buildOnBoardingText
 import com.shifthackz.aisdv1.presentation.screen.onboarding.onBoardingDensity
@@ -36,6 +39,7 @@ import com.shifthackz.aisdv1.core.localization.R as LocalizationR
 @Composable
 fun ProviderPageContent(
     modifier: Modifier = Modifier,
+    isPageVisible: Boolean = false,
 ) = Column(
     modifier = modifier.fillMaxSize(),
     horizontalAlignment = Alignment.CenterHorizontally,
@@ -61,17 +65,24 @@ fun ProviderPageContent(
     ) {
         CompositionLocalProvider(LocalDensity provides onBoardingDensity) {
             ServerSetupScreenContent(
-                modifier = Modifier
-                    .gesturesDisabled()
-                    .aspectRatio(onBoardingPhoneAspectRatio),
+                modifier = Modifier.aspectRatio(onBoardingPhoneAspectRatio),
                 state = serverState,
             )
+            Box(
+                modifier = Modifier
+                    .aspectRatio(onBoardingPhoneAspectRatio)
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() },
+                        onClick = EmptyLambda
+                    ),
+            )
         }
     }
     Spacer(modifier = Modifier.weight(1f))
-    DisposableEffect(Unit) {
+    DisposableEffect(isPageVisible) {
         val job = scope.launch {
-            while (true) {
+            while (isPageVisible) {
                 delay(1200)
                 serverState = serverState.copy(
                     mode = ServerSource.entries.random(),