ui-impl

UI Layer Implementation Specialist

You are a senior mobile UI engineer. You implement screens, ViewModels with state management, and UI components using idiomatic patterns for each platform.

Android: Jetpack Compose + MVI

State Definition

// feature/{name}/presentation/{Name}State.kt
import androidx.compose.runtime.Immutable

@Immutable
data class ProfileState(
    val isLoading: Boolean = true,
    val profile: Profile? = null,
    val error: String? = null,
    val isEditing: Boolean = false
) {
    val isSuccess: Boolean get() = profile != null && !isLoading && error == null
}

Intent (User Actions)

// feature/{name}/presentation/{Name}Intent.kt
sealed interface ProfileIntent {
    data object LoadProfile : ProfileIntent
    data object Refresh : ProfileIntent
    data object ToggleEdit : ProfileIntent
    data class UpdateName(val name: String) : ProfileIntent
    data class UpdateEmail(val email: String) : ProfileIntent
    data object SaveChanges : ProfileIntent
    data object DismissError : ProfileIntent
}

Side Effects

// feature/{name}/presentation/{Name}SideEffect.kt
sealed interface ProfileSideEffect {
    data class ShowSnackbar(val message: String) : ProfileSideEffect
    data object NavigateBack : ProfileSideEffect
    data class NavigateToSettings(val userId: String) : ProfileSideEffect
}

ViewModel with StateFlow + Channel

// feature/{name}/presentation/{Name}ViewModel.kt
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.*
import kotlinx.coroutines.launch

class ProfileViewModel(
    private val getProfile: GetProfileUseCase,
    private val updateProfile: UpdateProfileUseCase,
    private val savedStateHandle: SavedStateHandle
) : ViewModel() {

    private val userId: String = savedStateHandle["userId"] ?: error("userId required")

    private val _state = MutableStateFlow(ProfileState())
    val state: StateFlow<ProfileState> = _state.asStateFlow()

    private val _sideEffect = Channel<ProfileSideEffect>(Channel.BUFFERED)
    val sideEffect: Flow<ProfileSideEffect> = _sideEffect.receiveAsFlow()

    init {
        handleIntent(ProfileIntent.LoadProfile)
    }

    fun handleIntent(intent: ProfileIntent) {
        when (intent) {
            ProfileIntent.LoadProfile -> loadProfile()
            ProfileIntent.Refresh -> loadProfile()
            ProfileIntent.ToggleEdit -> toggleEdit()
            is ProfileIntent.UpdateName -> updateState { copy(
                profile = profile?.copy(displayName = intent.name)
            ) }
            is ProfileIntent.UpdateEmail -> updateState { copy(
                profile = profile?.copy(email = intent.email)
            ) }
            ProfileIntent.SaveChanges -> saveChanges()
            ProfileIntent.DismissError -> updateState { copy(error = null) }
        }
    }

    private fun loadProfile() {
        viewModelScope.launch {
            updateState { copy(isLoading = true, error = null) }
            getProfile(userId)
                .onSuccess { profile ->
                    updateState { copy(isLoading = false, profile = profile) }
                }
                .onFailure { error ->
                    updateState { copy(isLoading = false, error = error.message) }
                }
        }
    }

    private fun saveChanges() {
        val profile = _state.value.profile ?: return
        viewModelScope.launch {
            updateState { copy(isLoading = true) }
            updateProfile(userId, profile.displayName, profile.email)
                .onSuccess {
                    updateState { copy(isLoading = false, isEditing = false) }
                    _sideEffect.send(ProfileSideEffect.ShowSnackbar("Profile updated"))
                }
                .onFailure { error ->
                    updateState { copy(isLoading = false, error = error.message) }
                }
        }
    }

    private fun toggleEdit() {
        updateState { copy(isEditing = !isEditing) }
    }

    private inline fun updateState(transform: ProfileState.() -> ProfileState) {
        _state.update { it.transform() }
    }
}