Merge pull request #4581 from element-hq/feature/fga/advanced_settings_theme_rework

change (preferences) : use PreferenceDropdown for appearance

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

@@ -7,16 +7,13 @@
 
 package io.element.android.features.preferences.impl.advanced
 
-import io.element.android.compound.theme.Theme
 import io.element.android.libraries.matrix.api.media.MediaPreviewValue
 
 sealed interface AdvancedSettingsEvents {
     data class SetDeveloperModeEnabled(val enabled: Boolean) : AdvancedSettingsEvents
     data class SetSharePresenceEnabled(val enabled: Boolean) : AdvancedSettingsEvents
     data class SetCompressMedia(val compress: Boolean) : AdvancedSettingsEvents
-    data object ChangeTheme : AdvancedSettingsEvents
-    data object CancelChangeTheme : AdvancedSettingsEvents
-    data class SetTheme(val theme: Theme) : AdvancedSettingsEvents
+    data class SetTheme(val theme: ThemeOption) : AdvancedSettingsEvents
     data class SetTimelineMediaPreviewValue(val value: MediaPreviewValue) : AdvancedSettingsEvents
     data class SetHideInviteAvatars(val value: Boolean) : AdvancedSettingsEvents
 }

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

@@ -9,11 +9,10 @@ package io.element.android.features.preferences.impl.advanced
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 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.compound.theme.Theme
 import io.element.android.compound.theme.mapToTheme
 import io.element.android.libraries.architecture.Presenter
@@ -39,11 +38,9 @@ class AdvancedSettingsPresenter @Inject constructor(
         val doesCompressMedia by remember {
             sessionPreferencesStore.doesCompressMedia()
         }.collectAsState(initial = true)
-        val theme by remember {
+        val theme = remember {
             appPreferencesStore.getThemeFlow().mapToTheme()
         }.collectAsState(initial = Theme.System)
-        var showChangeThemeDialog by remember { mutableStateOf(false) }
-
         val hideInviteAvatars by remember {
             appPreferencesStore.getHideInviteAvatarsFlow()
         }.collectAsState(false)
@@ -52,6 +49,16 @@ class AdvancedSettingsPresenter @Inject constructor(
             appPreferencesStore.getTimelineMediaPreviewValueFlow()
         }.collectAsState(initial = MediaPreviewValue.On)
 
+        val themeOption by remember {
+            derivedStateOf {
+                when (theme.value) {
+                    Theme.System -> ThemeOption.System
+                    Theme.Dark -> ThemeOption.Dark
+                    Theme.Light -> ThemeOption.Light
+                }
+            }
+        }
+
         fun handleEvents(event: AdvancedSettingsEvents) {
             when (event) {
                 is AdvancedSettingsEvents.SetDeveloperModeEnabled -> localCoroutineScope.launch {
@@ -63,11 +70,12 @@ class AdvancedSettingsPresenter @Inject constructor(
                 is AdvancedSettingsEvents.SetCompressMedia -> localCoroutineScope.launch {
                     sessionPreferencesStore.setCompressMedia(event.compress)
                 }
-                AdvancedSettingsEvents.CancelChangeTheme -> showChangeThemeDialog = false
-                AdvancedSettingsEvents.ChangeTheme -> showChangeThemeDialog = true
                 is AdvancedSettingsEvents.SetTheme -> localCoroutineScope.launch {
-                    appPreferencesStore.setTheme(event.theme.name)
-                    showChangeThemeDialog = false
+                    when (event.theme) {
+                        ThemeOption.System -> appPreferencesStore.setTheme(Theme.System.name)
+                        ThemeOption.Dark -> appPreferencesStore.setTheme(Theme.Dark.name)
+                        ThemeOption.Light -> appPreferencesStore.setTheme(Theme.Light.name)
+                    }
                 }
                 is AdvancedSettingsEvents.SetHideInviteAvatars -> localCoroutineScope.launch {
                     appPreferencesStore.setHideInviteAvatars(event.value)
@@ -82,8 +90,7 @@ class AdvancedSettingsPresenter @Inject constructor(
             isDeveloperModeEnabled = isDeveloperModeEnabled,
             isSharePresenceEnabled = isSharePresenceEnabled,
             doesCompressMedia = doesCompressMedia,
-            theme = theme,
-            showChangeThemeDialog = showChangeThemeDialog,
+            theme = themeOption,
             hideInviteAvatars = hideInviteAvatars,
             timelineMediaPreviewValue = timelineMediaPreviewValue,
             eventSink = { handleEvents(it) }

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

@@ -7,16 +7,33 @@
 
 package io.element.android.features.preferences.impl.advanced
 
-import io.element.android.compound.theme.Theme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import io.element.android.libraries.designsystem.components.preferences.DropdownOption
 import io.element.android.libraries.matrix.api.media.MediaPreviewValue
+import io.element.android.libraries.ui.strings.CommonStrings
 
 data class AdvancedSettingsState(
     val isDeveloperModeEnabled: Boolean,
     val isSharePresenceEnabled: Boolean,
     val doesCompressMedia: Boolean,
-    val theme: Theme,
-    val showChangeThemeDialog: Boolean,
+    val theme: ThemeOption,
     val hideInviteAvatars: Boolean,
     val timelineMediaPreviewValue: MediaPreviewValue,
     val eventSink: (AdvancedSettingsEvents) -> Unit
 )
+
+enum class ThemeOption : DropdownOption {
+    System {
+        @Composable
+        override fun getText(): String = stringResource(CommonStrings.common_system)
+    },
+    Dark {
+        @Composable
+        override fun getText(): String = stringResource(CommonStrings.common_dark)
+    },
+    Light {
+        @Composable
+        override fun getText(): String = stringResource(CommonStrings.common_light)
+    }
+}

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

@@ -8,7 +8,6 @@
 package io.element.android.features.preferences.impl.advanced
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import io.element.android.compound.theme.Theme
 import io.element.android.libraries.matrix.api.media.MediaPreviewValue
 
 open class AdvancedSettingsStateProvider : PreviewParameterProvider<AdvancedSettingsState> {
@@ -16,7 +15,6 @@ open class AdvancedSettingsStateProvider : PreviewParameterProvider<AdvancedSett
         get() = sequenceOf(
             aAdvancedSettingsState(),
             aAdvancedSettingsState(isDeveloperModeEnabled = true),
-            aAdvancedSettingsState(showChangeThemeDialog = true),
             aAdvancedSettingsState(isSharePresenceEnabled = true),
             aAdvancedSettingsState(doesCompressMedia = true),
             aAdvancedSettingsState(hideInviteAvatars = true),
@@ -28,16 +26,15 @@ fun aAdvancedSettingsState(
     isDeveloperModeEnabled: Boolean = false,
     isSharePresenceEnabled: Boolean = false,
     doesCompressMedia: Boolean = false,
-    showChangeThemeDialog: Boolean = false,
     hideInviteAvatars: Boolean = false,
+    theme: ThemeOption = ThemeOption.System,
     timelineMediaPreviewValue: MediaPreviewValue = MediaPreviewValue.On,
     eventSink: (AdvancedSettingsEvents) -> Unit = {},
 ) = AdvancedSettingsState(
     isDeveloperModeEnabled = isDeveloperModeEnabled,
     isSharePresenceEnabled = isSharePresenceEnabled,
     doesCompressMedia = doesCompressMedia,
-    theme = Theme.System,
-    showChangeThemeDialog = showChangeThemeDialog,
+    theme = theme,
     hideInviteAvatars = hideInviteAvatars,
     timelineMediaPreviewValue = timelineMediaPreviewValue,
     eventSink = eventSink

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

@@ -12,14 +12,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import im.vector.app.features.analytics.plan.Interaction
-import io.element.android.compound.theme.Theme
-import io.element.android.compound.theme.themes
 import io.element.android.features.preferences.impl.R
 import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage
-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.PreferenceCategory
+import io.element.android.libraries.designsystem.components.preferences.PreferenceDropdown
 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.ElementPreviewDark
@@ -34,8 +31,7 @@ import io.element.android.libraries.matrix.api.media.MediaPreviewValue
 import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.services.analytics.compose.LocalAnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
-import kotlinx.collections.immutable.ImmutableList
-import kotlinx.collections.immutable.toImmutableList
+import kotlinx.collections.immutable.toPersistentList
 
 @Composable
 fun AdvancedSettingsView(
@@ -49,15 +45,12 @@ fun AdvancedSettingsView(
         onBackClick = onBackClick,
         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)
+        PreferenceDropdown(
+            title = stringResource(id = CommonStrings.common_appearance),
+            selectedOption = state.theme,
+            options = ThemeOption.entries.toPersistentList(),
+            onSelectOption = { logLevel ->
+                state.eventSink(AdvancedSettingsEvents.SetTheme(logLevel))
             }
         )
         ListItem(
@@ -108,21 +101,6 @@ fun AdvancedSettingsView(
         )
         ModerationAndSafety(state)
     }
-
-    if (state.showChangeThemeDialog) {
-        SingleSelectionDialog(
-            options = getOptions(),
-            initialSelection = themes.indexOf(state.theme),
-            onSelectOption = {
-                state.eventSink(
-                    AdvancedSettingsEvents.SetTheme(
-                        themes[it]
-                    )
-                )
-            },
-            onDismissRequest = { state.eventSink(AdvancedSettingsEvents.CancelChangeTheme) },
-        )
-    }
 }
 
 @Composable
@@ -176,24 +154,6 @@ private fun ModerationAndSafety(
     }
 }
 
-@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
-        }
-    )
-}
-
 @PreviewWithLargeHeight
 @Composable
 internal fun AdvancedSettingsViewLightPreview(@PreviewParameter(AdvancedSettingsStateProvider::class) state: AdvancedSettingsState) =

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/developer/tracing/LogLevelItem.kt

@@ -7,22 +7,28 @@
 
 package io.element.android.features.preferences.impl.developer.tracing
 
+import androidx.compose.runtime.Composable
 import io.element.android.libraries.designsystem.components.preferences.DropdownOption
 
 enum class LogLevelItem : DropdownOption {
     ERROR {
-        override val text: String = "Error"
+        @Composable
+        override fun getText(): String = "Error"
     },
     WARN {
-        override val text: String = "Warn"
+        @Composable
+        override fun getText(): String = "Warn"
     },
     INFO {
-        override val text: String = "Info"
+        @Composable
+        override fun getText(): String = "Info"
     },
     DEBUG {
-        override val text: String = "Debug"
+        @Composable
+        override fun getText(): String = "Debug"
     },
     TRACE {
-        override val text: String = "Trace"
+        @Composable
+        override fun getText(): String = "Trace"
     }
 }