Improved settings dialog UI

src/main/kotlin/app/DropDownOption.kt

@@ -0,0 +1,5 @@
+package app
+
+interface DropDownOption {
+    val optionName: String
+}

src/main/kotlin/app/theme/Theme.kt

@@ -6,6 +6,7 @@ import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import app.DropDownOption
 
 private val DarkColorPalette = darkColors(
     primary = primaryLight,
@@ -125,9 +126,12 @@ val Colors.scrollbarHover: Color
     get() = if (isLight) hoverScrollbarColorLight else hoverScrollbarColorDark
 
 
-enum class Themes(val displayName: String) {
+enum class Themes(val displayName: String) : DropDownOption {
     LIGHT("Light"),
-    DARK("Dark")
+    DARK("Dark");
+
+    override val optionName: String
+        get() = displayName
 }
 
 val themesList = listOf(

src/main/kotlin/app/ui/dialogs/SettingsDialog.kt

@@ -7,6 +7,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import app.AppPreferences
+import app.DropDownOption
+import app.theme.Themes
 import app.theme.primaryTextColor
 import app.theme.themesList
 
@@ -15,46 +17,23 @@ fun SettingsDialog(
     appPreferences: AppPreferences,
     onDismiss: () -> Unit,
 ) {
-    var showThemeDropdown by remember { mutableStateOf(false) }
     val currentTheme by appPreferences.themeState.collectAsState()
 
     MaterialDialog {
-        Column {
+        Column(modifier = Modifier.width(500.dp)) {
             Text(
                 text = "Settings",
                 color = MaterialTheme.colors.primaryTextColor,
             )
 
-            Row(
+            SettingDropDown(
-                modifier = Modifier.padding(top = 8.dp),
+                title = "Theme",
-                verticalAlignment = Alignment.CenterVertically
+                dropDownOptions = themesList,
-            ) {
+                currentOption = currentTheme,
-                Text(
+                onOptionSelected = { theme ->
-                    text = "Theme",
+                    appPreferences.theme = theme
-                    color = MaterialTheme.colors.primaryTextColor,
-                )
-                Spacer(modifier = Modifier.width(300.dp))
-                OutlinedButton(onClick = { showThemeDropdown = true }) {
-                    Text(
-                        currentTheme.displayName,
-                        color = MaterialTheme.colors.primaryTextColor,
-                    )
-
-                    DropdownMenu(
-                        expanded = showThemeDropdown,
-                        onDismissRequest = { showThemeDropdown = false },
-                    ) {
-                        for (theme in themesList) {
-                            DropdownMenuItem(
-                                onClick = {
-                                    appPreferences.theme = theme
-                                    showThemeDropdown = false
-                                }
-                            ) { Text(theme.displayName) }
-                        }
-                    }
                 }
-            }
+            )
 
             TextButton(
                 modifier = Modifier
@@ -67,3 +46,93 @@ fun SettingsDialog(
         }
     }
 }
+
+@Composable
+fun <T: DropDownOption> SettingDropDown(
+    title: String,
+    dropDownOptions: List<T>,
+    onOptionSelected: (T) -> Unit,
+    currentOption: T,
+) {
+    var showThemeDropdown by remember { mutableStateOf(false) }
+    Row(
+        modifier = Modifier.padding(vertical = 8.dp, horizontal = 8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = title,
+            color = MaterialTheme.colors.primaryTextColor,
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Box {
+            OutlinedButton(onClick = { showThemeDropdown = true }) {
+                Text(
+                    currentOption.optionName,
+                    color = MaterialTheme.colors.primaryTextColor,
+                )
+            }
+
+            DropdownMenu(
+                expanded = showThemeDropdown,
+                onDismissRequest = { showThemeDropdown = false },
+            ) {
+                for (dropDownOption in dropDownOptions) {
+                    DropdownMenuItem(
+                        onClick = {
+                            showThemeDropdown = false
+                            onOptionSelected(dropDownOption)
+                        }
+                    ) {
+                        Text(dropDownOption.optionName)
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+@Composable
+fun <T: DropDownOption> SettingTextInput(
+    title: String,
+    dropDownOptions: List<T>,
+    onOptionSelected: (T) -> Unit,
+    currentOption: T,
+) {
+    var showThemeDropdown by remember { mutableStateOf(false) }
+    Row(
+        modifier = Modifier.padding(vertical = 8.dp, horizontal = 8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = title,
+            color = MaterialTheme.colors.primaryTextColor,
+        )
+        Spacer(modifier = Modifier.width(300.dp))
+        Box {
+            OutlinedButton(onClick = { showThemeDropdown = true }) {
+                Text(
+                    currentOption.optionName,
+                    color = MaterialTheme.colors.primaryTextColor,
+                )
+            }
+
+            DropdownMenu(
+                expanded = showThemeDropdown,
+                onDismissRequest = { showThemeDropdown = false },
+            ) {
+                for (dropDownOption in dropDownOptions) {
+                    DropdownMenuItem(
+                        onClick = {
+                            showThemeDropdown = false
+                            onOptionSelected(dropDownOption)
+                        }
+                    ) {
+                        Text(dropDownOption.optionName)
+                    }
+                }
+            }
+
+        }
+    }
+}