add color picker dialog (not fully working yet)

app/build.gradle.kts

@@ -114,7 +114,8 @@ dependencies {
     implementation("androidx.compose.ui:ui-tooling-preview")
     debugImplementation("androidx.compose.ui:ui-tooling")
     implementation("androidx.navigation:navigation-compose:2.8.5")
-    implementation("sh.calvin.reorderable:reorderable:2.4.2")
+    implementation("sh.calvin.reorderable:reorderable:2.4.2") // for easier re-ordering
+    implementation("com.github.skydoves:colorpicker-compose:1.1.2") // for user-defined colors
 
     // color picker for user-defined colors
     implementation("com.github.martin-stone:hsv-alpha-color-picker-android:3.1.0")

app/src/main/java/helium314/keyboard/settings/SettingsActivity.kt

@@ -14,6 +14,7 @@ import helium314.keyboard.latin.utils.prefs
 import kotlinx.coroutines.flow.MutableStateFlow
 
 // todo (roughly in order)
+//  try implementation("com.github.skydoves:colorpicker-compose:1.1.2")
 //  dialogs should be rememberSaveable to survive display orientation change and stuff?
 //  check dark and light theme (don't have dynamic)
 //  any way to get rid of the "old" background on starting settings? probably comes from app theme, can we avoid it?
@@ -25,6 +26,8 @@ import kotlinx.coroutines.flow.MutableStateFlow
 //   find a nice way of testing (probably add logs for measuring time and recompositions)
 //   consider that stuff in composables can get called quite often on any changes
 //    -> use remember for things that are slow, but be careful they don't change from outside the composable
+//   not so nice now on S4 mini, try non-debug
+//    maybe related to lazy column?
 //  PRs adding prefs -> need to finish and merge main before finishing this PR
 //   1263 (no response for several weeks now...)
 //  really use the restart dialog for debug settings stuff?
@@ -73,12 +76,8 @@ import kotlinx.coroutines.flow.MutableStateFlow
 //   much of this is before the app actually starts (before App.onCreate), maybe loading the many compose classes slows down startup
 //  -> should be fine on reasonably recent phones (imo even still acceptable on S4 mini)
 // apk size increase
-//  ca 900 kb with base + material2
+//  initially it was 900 kB, and another 300 kB for Material3
-//  another 300 kb with navHost (and activity-compose, but not needed)
+//  textField and others add more (not sure what exactly), and now we're already at 2 MB...
-//  another 300 kb when switching material2 to material3
-//  ca 150 kb reduction when removing androidx.preference
-//  -> too much, but still ok if we can get nicer preference stuff
-//  meh, and using a TextField adds another 300 kb... huge chunks for sth that seems so small
 
 class SettingsActivity : AppCompatActivity(), SharedPreferences.OnSharedPreferenceChangeListener {
     private val prefs by lazy { this.prefs() }

app/src/main/java/helium314/keyboard/settings/dialogs/ColorPickerDialog.kt

@@ -0,0 +1,106 @@
+package helium314.keyboard.settings.dialogs
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.github.skydoves.colorpicker.compose.AlphaSlider
+import com.github.skydoves.colorpicker.compose.BrightnessSlider
+import com.github.skydoves.colorpicker.compose.ColorEnvelope
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
+
+// todo:
+//  setting from text doesn't work
+//  weird effect on start, did this start with the top row showing colors?
+//  text field doesn't look nice
+//  for initial color picks performance is not good
+@Composable
+fun ColorPickerDialog(
+    onDismissRequest: () -> Unit,
+    initialColor: Int,
+    title: String,
+    onConfirmed: (Int) -> Unit,
+) {
+    val controller = rememberColorPickerController()
+    val barHeight = 35.dp
+    var value by remember { mutableStateOf(TextFieldValue(initialColor.toString(16))) }
+    ThreeButtonAlertDialog(
+        onDismissRequest = onDismissRequest,
+        onConfirmed = { onConfirmed(controller.selectedColor.value.toArgb()) },
+        title = { Text(title) },
+        text = {
+            Column {
+                Row {
+                    Surface(
+                        color = Color(initialColor),
+                        modifier = Modifier.fillMaxWidth(0.5f)
+                            .padding(start = 10.dp)
+                            .height(barHeight))
+                    {  }
+                    Surface(
+                        color = controller.selectedColor.value,
+                        modifier = Modifier.fillMaxWidth()
+                            .padding(end = 10.dp)
+                            .height(barHeight))
+                    {  }
+                }
+                HsvColorPicker(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight(0.6f)
+                        .padding(10.dp),
+                    controller = controller,
+                    onColorChanged = { colorEnvelope: ColorEnvelope ->
+                        value = TextFieldValue(colorEnvelope.hexCode)
+                    },
+                    initialColor = Color(initialColor)
+                )
+                AlphaSlider(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(10.dp)
+                        .height(barHeight),
+                    controller = controller,
+                )
+                BrightnessSlider(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(10.dp)
+                        .height(barHeight),
+                    controller = controller,
+                )
+                TextField(
+                    value = value,
+                    onValueChange = {
+                        val androidColor = kotlin.runCatching { android.graphics.Color.parseColor("#$it") }.getOrNull()
+                        if (androidColor != null)
+                            controller.selectByColor(Color(androidColor), true)
+                    }
+                )
+            }
+        }
+    )
+}
+
+@Preview
+@Composable
+private fun Preview() {
+    ColorPickerDialog({}, android.graphics.Color.MAGENTA, "color name", {})
+}

app/src/main/java/helium314/keyboard/settings/screens/AppearanceScreen.kt

@@ -71,7 +71,8 @@ fun AppearanceScreen(
         SettingsWithoutKey.BACKGROUND_IMAGE_LANDSCAPE,
         R.string.settings_category_miscellaneous,
         Settings.PREF_ENABLE_SPLIT_KEYBOARD,
-        Settings.PREF_SPLIT_SPACER_SCALE,
+        if (prefs.getBoolean(Settings.PREF_ENABLE_SPLIT_KEYBOARD, false))
+            Settings.PREF_SPLIT_SPACER_SCALE else null,
         Settings.PREF_NARROW_KEY_GAPS,
         Settings.PREF_KEYBOARD_HEIGHT_SCALE,
         Settings.PREF_BOTTOM_PADDING_SCALE,