Merge pull request #1844 from vector-im/feature/bma/themeSwitch

Feature/bma/theme switch

Author: bmarty

app/src/main/kotlin/io/element/android/x/MainActivity.kt

@@ -25,6 +25,9 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
@@ -38,6 +41,9 @@ import io.element.android.libraries.architecture.bindings
 import io.element.android.libraries.core.log.logger.LoggerTag
 import io.element.android.libraries.designsystem.utils.snackbar.LocalSnackbarDispatcher
 import io.element.android.libraries.theme.ElementTheme
+import io.element.android.libraries.theme.theme.Theme
+import io.element.android.libraries.theme.theme.isDark
+import io.element.android.libraries.theme.theme.mapToTheme
 import io.element.android.x.di.AppBindings
 import io.element.android.x.intent.SafeUriHandler
 import timber.log.Timber
@@ -77,7 +83,13 @@ class MainActivity : NodeActivity() {
 
     @Composable
     private fun MainContent(appBindings: AppBindings) {
-        ElementTheme {
+        val theme by remember {
+            appBindings.preferencesStore().getThemeFlow().mapToTheme()
+        }
+            .collectAsState(initial = Theme.System)
+        ElementTheme(
+            darkTheme = theme.isDark()
+        ) {
             CompositionLocalProvider(
                 LocalSnackbarDispatcher provides appBindings.snackbarDispatcher(),
                 LocalUriHandler provides SafeUriHandler(this),

app/src/main/kotlin/io/element/android/x/di/AppBindings.kt

@@ -18,6 +18,7 @@ package io.element.android.x.di
 
 import com.squareup.anvil.annotations.ContributesTo
 import io.element.android.features.lockscreen.api.LockScreenService
+import io.element.android.features.preferences.api.store.PreferencesStore
 import io.element.android.features.rageshake.api.reporter.BugReporter
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
 import io.element.android.libraries.di.AppScope
@@ -29,4 +30,5 @@ interface AppBindings {
     fun tracingService(): TracingService
     fun bugReporter(): BugReporter
     fun lockScreenService(): LockScreenService
+    fun preferencesStore(): PreferencesStore
 }

features/call/src/main/kotlin/io/element/android/features/call/ui/ElementCallActivity.kt

@@ -31,15 +31,22 @@ import android.webkit.PermissionRequest
 import androidx.activity.compose.setContent
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.core.content.IntentCompat
 import com.bumble.appyx.core.integrationpoint.NodeComponentActivity
 import io.element.android.features.call.CallForegroundService
 import io.element.android.features.call.CallType
 import io.element.android.features.call.di.CallBindings
 import io.element.android.features.call.utils.CallIntentDataParser
+import io.element.android.features.preferences.api.store.PreferencesStore
 import io.element.android.libraries.architecture.bindings
 import io.element.android.libraries.theme.ElementTheme
+import io.element.android.libraries.theme.theme.Theme
+import io.element.android.libraries.theme.theme.isDark
+import io.element.android.libraries.theme.theme.mapToTheme
 import javax.inject.Inject
 
 class ElementCallActivity : NodeComponentActivity(), CallScreenNavigator {
@@ -60,6 +67,7 @@ class ElementCallActivity : NodeComponentActivity(), CallScreenNavigator {
 
     @Inject lateinit var callIntentDataParser: CallIntentDataParser
     @Inject lateinit var presenterFactory: CallScreenPresenter.Factory
+    @Inject lateinit var preferencesStore: PreferencesStore
 
     private lateinit var presenter: CallScreenPresenter
 
@@ -92,8 +100,14 @@ class ElementCallActivity : NodeComponentActivity(), CallScreenNavigator {
         requestAudioFocus()
 
         setContent {
+            val theme by remember {
+                preferencesStore.getThemeFlow().mapToTheme()
+            }
+                .collectAsState(initial = Theme.System)
             val state = presenter.present()
-            ElementTheme {
+            ElementTheme(
+                darkTheme = theme.isDark()
+            ) {
                 CallScreenView(
                     state = state,
                     requestPermissions = { permissions, callback ->

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsEvents.kt

@@ -16,7 +16,12 @@
 
 package io.element.android.features.preferences.impl.advanced
 
+import io.element.android.libraries.theme.theme.Theme
+
 sealed interface AdvancedSettingsEvents {
     data class SetRichTextEditorEnabled(val enabled: Boolean) : AdvancedSettingsEvents
     data class SetDeveloperModeEnabled(val enabled: Boolean) : AdvancedSettingsEvents
+    data object ChangeTheme : AdvancedSettingsEvents
+    data object CancelChangeTheme : AdvancedSettingsEvents
+    data class SetTheme(val theme: Theme) : AdvancedSettingsEvents
 }

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsPresenter.kt

@@ -19,9 +19,14 @@ package io.element.android.features.preferences.impl.advanced
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import io.element.android.features.preferences.api.store.PreferencesStore
 import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.theme.theme.Theme
+import io.element.android.libraries.theme.theme.mapToTheme
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -38,7 +43,11 @@ class AdvancedSettingsPresenter @Inject constructor(
         val isDeveloperModeEnabled by preferencesStore
             .isDeveloperModeEnabledFlow()
             .collectAsState(initial = false)
-
+        val theme by remember {
+            preferencesStore.getThemeFlow().mapToTheme()
+        }
+            .collectAsState(initial = Theme.System)
+        var showChangeThemeDialog by remember { mutableStateOf(false) }
         fun handleEvents(event: AdvancedSettingsEvents) {
             when (event) {
                 is AdvancedSettingsEvents.SetRichTextEditorEnabled -> localCoroutineScope.launch {
@@ -47,12 +56,20 @@ class AdvancedSettingsPresenter @Inject constructor(
                 is AdvancedSettingsEvents.SetDeveloperModeEnabled -> localCoroutineScope.launch {
                     preferencesStore.setDeveloperModeEnabled(event.enabled)
                 }
+                AdvancedSettingsEvents.CancelChangeTheme -> showChangeThemeDialog = false
+                AdvancedSettingsEvents.ChangeTheme -> showChangeThemeDialog = true
+                is AdvancedSettingsEvents.SetTheme -> localCoroutineScope.launch {
+                    preferencesStore.setTheme(event.theme.name)
+                    showChangeThemeDialog = false
+                }
             }
         }
 
         return AdvancedSettingsState(
             isRichTextEditorEnabled = isRichTextEditorEnabled,
             isDeveloperModeEnabled = isDeveloperModeEnabled,
+            theme = theme,
+            showChangeThemeDialog = showChangeThemeDialog,
             eventSink = { handleEvents(it) }
         )
     }

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsState.kt

@@ -16,8 +16,12 @@
 
 package io.element.android.features.preferences.impl.advanced
 
+import io.element.android.libraries.theme.theme.Theme
+
 data class AdvancedSettingsState(
     val isRichTextEditorEnabled: Boolean,
     val isDeveloperModeEnabled: Boolean,
+    val theme: Theme,
+    val showChangeThemeDialog: Boolean,
     val eventSink: (AdvancedSettingsEvents) -> Unit
 )

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsStateProvider.kt

@@ -17,21 +17,26 @@
 package io.element.android.features.preferences.impl.advanced
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.theme.theme.Theme
 
 open class AdvancedSettingsStateProvider : PreviewParameterProvider<AdvancedSettingsState> {
     override val values: Sequence<AdvancedSettingsState>
         get() = sequenceOf(
             aAdvancedSettingsState(),
             aAdvancedSettingsState(isRichTextEditorEnabled = true),
             aAdvancedSettingsState(isDeveloperModeEnabled = true),
+            aAdvancedSettingsState(showChangeThemeDialog = true),
         )
 }
 
 fun aAdvancedSettingsState(
     isRichTextEditorEnabled: Boolean = false,
     isDeveloperModeEnabled: Boolean = false,
+    showChangeThemeDialog: Boolean = false,
 ) = AdvancedSettingsState(
     isRichTextEditorEnabled = isRichTextEditorEnabled,
     isDeveloperModeEnabled = isDeveloperModeEnabled,
+    theme = Theme.System,
+    showChangeThemeDialog = showChangeThemeDialog,
     eventSink = {}
 )

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt

@@ -21,11 +21,20 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.features.preferences.impl.R
+import io.element.android.libraries.designsystem.components.dialogs.ListOption
+import io.element.android.libraries.designsystem.components.dialogs.SingleSelectionDialog
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.PreferencePage
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.theme.Theme
+import io.element.android.libraries.theme.theme.themes
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
 
 @Composable
 fun AdvancedSettingsView(
@@ -38,6 +47,19 @@ fun AdvancedSettingsView(
         onBackPressed = onBackPressed,
         title = stringResource(id = CommonStrings.common_advanced_settings)
     ) {
+        ListItem(
+            headlineContent = {
+                Text(
+                    text = stringResource(id = CommonStrings.common_appearance)
+                )
+            },
+            trailingContent = ListItemContent.Text(
+                state.theme.toHumanReadable()
+            ),
+            onClick = {
+                state.eventSink(AdvancedSettingsEvents.ChangeTheme)
+            }
+        )
         PreferenceSwitch(
             title = stringResource(id = CommonStrings.common_rich_text_editor),
             subtitle = stringResource(id = R.string.screen_advanced_settings_rich_text_editor_description),
@@ -51,6 +73,39 @@ fun AdvancedSettingsView(
             onCheckedChange = { state.eventSink(AdvancedSettingsEvents.SetDeveloperModeEnabled(it)) },
         )
     }
+
+    if (state.showChangeThemeDialog) {
+        SingleSelectionDialog(
+            options = getOptions(),
+            initialSelection = themes.indexOf(state.theme),
+            onOptionSelected = {
+                state.eventSink(
+                    AdvancedSettingsEvents.SetTheme(
+                        themes[it]
+                    )
+                )
+            },
+            onDismissRequest = { state.eventSink(AdvancedSettingsEvents.CancelChangeTheme) },
+        )
+    }
+}
+
+@Composable
+private fun getOptions(): ImmutableList<ListOption> {
+    return themes.map {
+        ListOption(title = it.toHumanReadable())
+    }.toImmutableList()
+}
+
+@Composable
+private fun Theme.toHumanReadable(): String {
+    return stringResource(
+        id = when (this) {
+            Theme.System -> CommonStrings.common_system
+            Theme.Dark -> CommonStrings.common_dark
+            Theme.Light -> CommonStrings.common_light
+        }
+    )
 }
 
 @PreviewsDayNight

features/preferences/impl/src/test/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsPresenterTest.kt

@@ -21,6 +21,7 @@ import app.cash.molecule.moleculeFlow
 import app.cash.turbine.test
 import com.google.common.truth.Truth.assertThat
 import io.element.android.libraries.featureflag.test.InMemoryPreferencesStore
+import io.element.android.libraries.theme.theme.Theme
 import io.element.android.tests.testutils.WarmUpRule
 import io.element.android.tests.testutils.awaitLastSequentialItem
 import kotlinx.coroutines.test.runTest
@@ -42,6 +43,8 @@ class AdvancedSettingsPresenterTest {
             val initialState = awaitLastSequentialItem()
             assertThat(initialState.isDeveloperModeEnabled).isFalse()
             assertThat(initialState.isRichTextEditorEnabled).isFalse()
+            assertThat(initialState.showChangeThemeDialog).isFalse()
+            assertThat(initialState.theme).isEqualTo(Theme.System)
         }
     }
 
@@ -76,4 +79,28 @@ class AdvancedSettingsPresenterTest {
             assertThat(awaitItem().isRichTextEditorEnabled).isFalse()
         }
     }
+
+    @Test
+    fun `present - change theme`() = runTest {
+        val store = InMemoryPreferencesStore()
+        val presenter = AdvancedSettingsPresenter(store)
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitLastSequentialItem()
+            initialState.eventSink.invoke(AdvancedSettingsEvents.ChangeTheme)
+            val withDialog = awaitItem()
+            assertThat(withDialog.showChangeThemeDialog).isTrue()
+            // Cancel
+            withDialog.eventSink(AdvancedSettingsEvents.CancelChangeTheme)
+            val withoutDialog = awaitItem()
+            assertThat(withoutDialog.showChangeThemeDialog).isFalse()
+            withDialog.eventSink.invoke(AdvancedSettingsEvents.ChangeTheme)
+            assertThat(awaitItem().showChangeThemeDialog).isTrue()
+            withDialog.eventSink(AdvancedSettingsEvents.SetTheme(Theme.Light))
+            val withNewTheme = awaitItem()
+            assertThat(withNewTheme.showChangeThemeDialog).isFalse()
+            assertThat(withNewTheme.theme).isEqualTo(Theme.Light)
+        }
+    }
 }

libraries/preferences/api/src/main/kotlin/io/element/android/features/preferences/api/store/PreferencesStore.kt

@@ -28,5 +28,8 @@ interface PreferencesStore {
     suspend fun setCustomElementCallBaseUrl(string: String?)
     fun getCustomElementCallBaseUrlFlow(): Flow<String?>
 
+    suspend fun setTheme(theme: String)
+    fun getThemeFlow(): Flow<String?>
+
     suspend fun reset()
 }