update settings UI

app/src/main/java/com/vanced/manager/ui/component/list/ManagerListItem.kt

@@ -46,7 +46,7 @@ fun ManagerListItem(
         if (trailing != null) {
             Box(
                 modifier = Modifier
-                    .size(56.dp)
+                    .size(48.dp)
                     .align(Alignment.CenterVertically),
                 contentAlignment = Alignment.Center,
             ) {

app/src/main/java/com/vanced/manager/ui/component/preference/CheckboxDialogPreference.kt

@@ -15,43 +15,43 @@ import androidx.compose.ui.unit.dp
 import com.vanced.manager.R
 import com.vanced.manager.core.preferences.CheckboxPreference
 import com.vanced.manager.core.preferences.ManagerPreference
+import com.vanced.manager.core.preferences.RadioButtonPreference
 import com.vanced.manager.ui.component.button.ManagerThemedTextButton
 import com.vanced.manager.ui.component.text.ManagerText
+import com.vanced.manager.ui.resources.managerString
 import com.vanced.manager.ui.widget.list.CheckboxItem
 import kotlinx.coroutines.launch
 
 @Composable
 fun CheckboxDialogPreference(
     preferenceTitle: String,
-    preference: ManagerPreference<Set<String>>,
+    preferenceDescription: String,
+    isDialogVisible: Boolean,
+    currentSelectedKeys: List<String>,
+    buttons: List<RadioButtonPreference>,
     trailing: @Composable () -> Unit = {},
-    buttons: List<CheckboxPreference>,
-    onSave: (checkedButtons: List<String>) -> Unit = {}
+    onPreferenceClick: () -> Unit,
+    onDismissRequest: () -> Unit,
+    onItemCheckChange: (isChecked: Boolean, itemKey: String) -> Unit,
+    onSave: () -> Unit,
 ) {
-    var pref by preference
-    val selectedButtons = remember { pref.toMutableStateList() }
-    val coroutineScope = rememberCoroutineScope()
     DialogPreference(
         preferenceTitle = preferenceTitle,
-        preferenceDescription = buttons.filter { button ->
-            pref.any { selectedButton ->
-                button.key == selectedButton
-            }
-        }.sortedBy { it.title }.joinToString(separator = ", ") { it.title },
+        preferenceDescription = preferenceDescription,
         trailing = trailing,
-        confirmButton = { isShown ->
-            TextButton(
-                onClick = {
-                    coroutineScope.launch {
-                        isShown.value = false
-                        pref = selectedButtons.toSet()
-                        onSave(selectedButtons)
-                    }
-                }
-            ) {
-                ManagerText(stringResource(id = R.string.dialog_button_save))
+        confirmButton = {
+            TextButton(onClick = onSave) {
+                ManagerText(managerString(R.string.dialog_button_save))
             }
         },
+        dismissButton = {
+            TextButton(onClick = onDismissRequest) {
+                ManagerText(managerString(R.string.dialog_button_cancel))
+            }
+        },
+        onDismissRequest = onDismissRequest,
+        isDialogVisible = isDialogVisible,
+        onPreferenceClick = onPreferenceClick
     ) {
         LazyColumn(
             modifier = Modifier.heightIn(max = 400.dp)
@@ -60,13 +60,9 @@ fun CheckboxDialogPreference(
                 val (title, key) = button
                 CheckboxItem(
                     text = title,
-                    isChecked = selectedButtons.contains(key),
+                    isChecked = currentSelectedKeys.contains(key),
                     onCheck = { isChecked ->
-                        if (isChecked) {
-                            selectedButtons.add(key)
-                        } else {
-                            selectedButtons.remove(key)
-                        }
+                        onItemCheckChange(isChecked, key)
                     }
                 )
             }

app/src/main/java/com/vanced/manager/ui/component/preference/DialogPreference.kt

@@ -1,44 +1,32 @@
 package com.vanced.manager.ui.component.preference
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import com.vanced.manager.ui.component.dialog.ManagerDialog
 
 @Composable
 fun DialogPreference(
     preferenceTitle: String,
     preferenceDescription: String? = null,
-    onDismissRequest: () -> Unit = {},
     trailing: @Composable () -> Unit = {},
-    confirmButton: @Composable (isShown: MutableState<Boolean>) -> Unit,
-    dismissButton: @Composable ((isShown: MutableState<Boolean>) -> Unit)? = null,
+    onPreferenceClick: () -> Unit,
+    isDialogVisible: Boolean,
+    onDismissRequest: () -> Unit,
+    confirmButton: @Composable () -> Unit,
+    dismissButton: @Composable () -> Unit = {},
     content: @Composable () -> Unit
 ) {
-    val isShown = remember { mutableStateOf(false) }
     Preference(
         preferenceTitle = preferenceTitle,
         preferenceDescription = preferenceDescription,
-        trailing = trailing
-    ) {
-        isShown.value = true
-    }
-    if (isShown.value) {
+        trailing = trailing,
+        onClick = onPreferenceClick
+    )
+    if (isDialogVisible) {
         ManagerDialog(
             title = preferenceTitle,
-            onDismissRequest = {
-                onDismissRequest()
-                isShown.value = false
-            },
-            confirmButton = {
-                            confirmButton(isShown)
-            },
-            dismissButton = {
-                if (dismissButton != null) {
-                    dismissButton(isShown)
-                }
-            },
+            onDismissRequest = onDismissRequest,
+            confirmButton = confirmButton,
+            dismissButton = dismissButton,
             content = content
         )
     }

app/src/main/java/com/vanced/manager/ui/component/preference/Preference.kt

@@ -7,11 +7,15 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.vanced.manager.ui.component.card.ManagerTonalCard
 import com.vanced.manager.ui.component.color.managerAnimatedColor
 import com.vanced.manager.ui.component.list.ManagerListItem
 import com.vanced.manager.ui.component.modifier.managerClickable
 import com.vanced.manager.ui.component.text.ManagerText
+import com.vanced.manager.ui.theme.LargeShape
 import com.vanced.manager.ui.util.DefaultContentPaddingHorizontal
+import com.vanced.manager.ui.util.DefaultContentPaddingVertical
 
 @Composable
 fun Preference(
@@ -19,49 +23,37 @@ fun Preference(
     preferenceDescription: String? = null,
     trailing: @Composable () -> Unit = {},
     onClick: () -> Unit
-) {
-    Preference(
-        preferenceTitle = { ManagerText(text = preferenceTitle) },
-        preferenceDescription = if (preferenceDescription != null) {
-            {
-                ManagerText(text = preferenceDescription)
-            }
-        } else null,
-        trailing = trailing,
-        onClick = onClick
-    )
-}
-
-@Composable
-fun Preference(
-    preferenceTitle: @Composable () -> Unit,
-    preferenceDescription: @Composable (() -> Unit)? = null,
-    trailing: @Composable () -> Unit = {},
-    onClick: () -> Unit
 ) {
     val color = managerAnimatedColor(color = MaterialTheme.colorScheme.onSurface)
-    ManagerListItem(
-        modifier = Modifier
-            .managerClickable(onClick = onClick)
-            .padding(horizontal = DefaultContentPaddingHorizontal),
-        title = {
-            CompositionLocalProvider(
-                LocalContentColor provides color,
-                LocalTextStyle provides MaterialTheme.typography.titleSmall
-            ) {
-                preferenceTitle()
-            }
-        },
-        description = if (preferenceDescription != null) {
-            {
+    ManagerTonalCard(
+        shape = LargeShape,
+        onClick = onClick
+    ) {
+        ManagerListItem(
+            modifier = Modifier
+                .padding(
+                    horizontal = DefaultContentPaddingHorizontal,
+                    vertical = 8.dp
+                ),
+            title = {
                 CompositionLocalProvider(
                     LocalContentColor provides color,
-                    LocalTextStyle provides MaterialTheme.typography.bodySmall
+                    LocalTextStyle provides MaterialTheme.typography.titleSmall
                 ) {
-                    preferenceDescription()
+                    ManagerText(text = preferenceTitle)
                 }
-            }
-        } else null,
-        trailing = trailing,
-    )
-}
+            },
+            description = if (preferenceDescription != null) {
+                {
+                    CompositionLocalProvider(
+                        LocalContentColor provides color,
+                        LocalTextStyle provides MaterialTheme.typography.bodySmall
+                    ) {
+                        ManagerText(text = preferenceDescription)
+                    }
+                }
+            } else null,
+            trailing = trailing,
+        )
+    }
+}

app/src/main/java/com/vanced/manager/ui/component/preference/RadiobuttonDialogPreference.kt

@@ -8,38 +8,41 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.vanced.manager.R
-import com.vanced.manager.core.preferences.ManagerPreference
 import com.vanced.manager.core.preferences.RadioButtonPreference
 import com.vanced.manager.ui.component.text.ManagerText
 import com.vanced.manager.ui.resources.managerString
-import com.vanced.manager.ui.widget.button.ManagerSaveButton
 import com.vanced.manager.ui.widget.list.RadiobuttonItem
-import kotlinx.coroutines.launch
 
 @Composable
 fun RadiobuttonDialogPreference(
     preferenceTitle: String,
-    preference: ManagerPreference<String>,
-    trailing: @Composable () -> Unit = {},
+    preferenceDescription: String,
+    isDialogVisible: Boolean,
+    currentSelectedKey: String,
     buttons: List<RadioButtonPreference>,
-    onSave: (newPref: String?) -> Unit = {}
+    trailing: @Composable () -> Unit = {},
+    onPreferenceClick: () -> Unit,
+    onDismissRequest: () -> Unit,
+    onItemClick: (itemKey: String) -> Unit,
+    onSave: () -> Unit,
 ) {
-    var pref by preference
-    var currentSelection by remember { mutableStateOf(pref) }
-    val coroutineScope = rememberCoroutineScope()
     DialogPreference(
         preferenceTitle = preferenceTitle,
-        preferenceDescription = buttons.find { it.key == pref }?.title,
+        preferenceDescription = preferenceDescription,
         trailing = trailing,
-        confirmButton = { isShown ->
-            TextButton(onClick = {
-                isShown.value = false
-                pref = currentSelection
-                onSave(currentSelection)
-            }) {
-                ManagerText(managerString(stringId = R.string.dialog_button_save))
+        confirmButton = {
+            TextButton(onClick = onSave) {
+                ManagerText(managerString(R.string.dialog_button_save))
             }
         },
+        dismissButton = {
+            TextButton(onClick = onDismissRequest) {
+                ManagerText(managerString(R.string.dialog_button_cancel))
+            }
+        },
+        onDismissRequest = onDismissRequest,
+        isDialogVisible = isDialogVisible,
+        onPreferenceClick = onPreferenceClick
     ) {
         LazyColumn(
             modifier = Modifier.heightIn(max = 400.dp)
@@ -49,10 +52,8 @@ fun RadiobuttonDialogPreference(
                 RadiobuttonItem(
                     text = title,
                     tag = key,
-                    isSelected = currentSelection == key,
-                    onSelect = {
-                        currentSelection = it
-                    }
+                    isSelected = currentSelectedKey == key,
+                    onSelect = onItemClick
                 )
             }
         }

app/src/main/java/com/vanced/manager/ui/screens/SettingsLayout.kt

@@ -1,7 +1,6 @@
 package com.vanced.manager.ui.screens
 
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ArrowBackIosNew
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -10,6 +9,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import com.vanced.manager.R
 import com.vanced.manager.ui.component.layout.ManagerLazyColumn
 import com.vanced.manager.ui.component.topappbar.ManagerTopAppBar
@@ -43,16 +43,29 @@ fun SettingsLayout(
         }
     ) { paddingValues ->
         ManagerLazyColumn(
-            modifier = Modifier.fillMaxSize().padding(paddingValues),
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues),
         ) {
             managerCategory(settingsCategoryBehaviour) {
-                SettingsCustomTabsItem()
-                SettingsNotificationsItem()
-                SettingsManagerVariantItem()
+                Column(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    SettingsCustomTabsItem()
+                    SettingsNotificationsItem()
+                    SettingsManagerVariantItem()
+                }
+
             }
             managerCategory(settingsCategoryApperance) {
-                SettingsAccentColorItem()
-                ThemeSettingsItem()
+                Column(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    SettingsAccentColorItem()
+                    ThemeSettingsItem()
+                }
             }
         }
     }

app/src/main/java/com/vanced/manager/ui/widget/screens/settings/ManagerVariantItem.kt

@@ -1,6 +1,6 @@
 package com.vanced.manager.ui.widget.screens.settings
 
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import com.vanced.manager.R
 import com.vanced.manager.core.preferences.RadioButtonPreference
 import com.vanced.manager.core.preferences.holder.managerVariantPref
@@ -9,11 +9,15 @@ import com.vanced.manager.ui.resources.managerString
 
 @Composable
 fun SettingsManagerVariantItem() {
+    var showDialog by remember { mutableStateOf(false) }
+    var selectedKey by remember { mutableStateOf(managerVariantPref.value.value) }
     RadiobuttonDialogPreference(
         preferenceTitle = managerString(
             stringId = R.string.settings_preference_variant_title
         ),
-        preference = managerVariantPref,
+        preferenceDescription = managerVariantPref.value.value,
+        isDialogVisible = showDialog,
+        currentSelectedKey = selectedKey,
         buttons = listOf(
             RadioButtonPreference(
                 title = "nonroot",
@@ -23,6 +27,20 @@ fun SettingsManagerVariantItem() {
                 title = "root",
                 key = "root"
             ),
-        )
+        ),
+        onPreferenceClick = {
+            showDialog = true
+        },
+        onDismissRequest = {
+            showDialog = false
+            selectedKey = managerVariantPref.value.value
+        },
+        onItemClick = {
+            selectedKey = it
+        },
+        onSave = {
+            managerVariantPref.save(selectedKey)
+            showDialog = false
+        }
     )
 }

app/src/main/java/com/vanced/manager/ui/widget/screens/settings/ThemeItem.kt

@@ -1,6 +1,6 @@
 package com.vanced.manager.ui.widget.screens.settings
 
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import com.vanced.manager.R
 import com.vanced.manager.core.preferences.RadioButtonPreference
 import com.vanced.manager.core.preferences.holder.managerThemePref
@@ -9,22 +9,40 @@ import com.vanced.manager.ui.resources.managerString
 
 @Composable
 fun ThemeSettingsItem() {
+    var showDialog by remember { mutableStateOf(false) }
+    var selectedKey by remember { mutableStateOf(managerThemePref.value.value) }
     RadiobuttonDialogPreference(
         preferenceTitle = managerString(stringId = R.string.settings_preference_theme_title),
-        preference = managerThemePref,
+        preferenceDescription = managerThemePref.value.value,
+        isDialogVisible = showDialog,
+        currentSelectedKey = selectedKey,
         buttons = listOf(
             RadioButtonPreference(
-                title = managerString(stringId = R.string.settings_preference_theme_light),
+                title = managerString(R.string.settings_preference_theme_light),
                 key = "Light"
             ),
             RadioButtonPreference(
-                title = managerString(stringId = R.string.settings_preference_theme_dark),
+                title = managerString(R.string.settings_preference_theme_dark),
                 key = "Dark"
             ),
             RadioButtonPreference(
-                title = managerString(stringId = R.string.settings_option_system_default),
+                title = managerString(R.string.settings_option_system_default),
                 key = "System Default"
             )
-        )
+        ),
+        onPreferenceClick = {
+            showDialog = true
+        },
+        onDismissRequest = {
+            showDialog = false
+            selectedKey = managerThemePref.value.value
+        },
+        onItemClick = {
+            selectedKey = it
+        },
+        onSave = {
+            managerThemePref.save(selectedKey)
+            showDialog = false
+        }
     )
 }