feature: show onboarding as a modal on large screens, add close functionality

This commit is contained in:
Antoine Jaury
2026-09-30 11:18:54 +02:00
parent 46dfe64493
commit 4ec151dda5
6 changed files with 189 additions and 67 deletions
@@ -10,7 +10,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.saveable.rememberSerializable
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.metadata
@@ -35,6 +38,9 @@ import org.koin.compose.viewmodel.koinViewModel
import org.koin.dsl.koinConfiguration
import org.koin.dsl.module
private val WIDE_WINDOW_MIN_WIDTH = 840.dp
private val WIDE_WINDOW_MIN_HEIGHT = 600.dp
val appModule = module {
includes(
loggingModule,
@@ -59,21 +65,32 @@ fun App() {
val onboardingViewModel: OnboardingViewModel = koinViewModel()
val onboardingUiState by onboardingViewModel.uiState.collectAsStateWithLifecycle()
when (onboardingUiState.isCompleted) {
// The persisted flag is still being read: render nothing rather than flashing
// either screen.
null -> Unit
val showOnboardingAsDialog = isWideWindow()
// First launch: onboarding replaces the whole UI. Completing it flips the persisted
// flag, which switches to the main content automatically.
false -> OnboardingScreen()
val isOnboardingVisible = onboardingUiState.isCompleted == false
val isMainContentVisible = onboardingUiState.isCompleted == true ||
(isOnboardingVisible && showOnboardingAsDialog)
true -> MainNavigation(darkTheme = darkTheme)
if (isMainContentVisible) {
MainNavigation(darkTheme = darkTheme)
}
if (isOnboardingVisible) {
OnboardingScreen(showAsDialog = showOnboardingAsDialog)
}
}
}
}
@Composable
private fun isWideWindow(): Boolean {
val containerSize = LocalWindowInfo.current.containerSize
return with(LocalDensity.current) {
containerSize.width.toDp() >= WIDE_WINDOW_MIN_WIDTH &&
containerSize.height.toDp() >= WIDE_WINDOW_MIN_HEIGHT
}
}
@Composable
private fun MainNavigation(darkTheme: Boolean) {
val serializer = SnapshotStateListSerializer<Route>()