feat: m3e for the colour picker

app/src/main/java/chat/stoat/sheets/ColourPickerSheet.kt

@@ -23,19 +23,17 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
-import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonGroup
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.SliderState
@@ -54,11 +52,11 @@ import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.ShaderBrush
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import chat.stoat.R
@@ -264,7 +262,10 @@ vec4 main(vec2 fragCoord) {
 }
 """
 
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@OptIn(
+    ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class,
+    ExperimentalMaterial3ExpressiveApi::class
+)
 @Composable
 fun ColumnScope.ColourPickerSheet(
     initialValue: Int,
@@ -303,34 +304,32 @@ fun ColumnScope.ColourPickerSheet(
             .padding(horizontal = 16.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
-        SingleChoiceSegmentedButtonRow(Modifier.fillMaxWidth()) {
+        val slidersLabel = stringResource(R.string.colour_picker_mode_sliders)
-            SegmentedButton(
+        val paletteLabel = stringResource(R.string.colour_picker_mode_palette)
-                selected = mode == ColourPickerMode.Sliders,
+        val hexLabel = stringResource(R.string.colour_picker_hex)
-                onClick = { mode = ColourPickerMode.Sliders },
+
-                shape = CircleShape.copy(
+        ButtonGroup(
-                    topEnd = CornerSize(0),
+            modifier = Modifier.fillMaxWidth(),
-                    bottomEnd = CornerSize(0)
+            overflowIndicator = {}
-                )
+        ) {
-            ) {
+            toggleableItem(
-                Text(stringResource(R.string.colour_picker_mode_sliders))
+                weight = 1f,
-            }
+                checked = mode == ColourPickerMode.Sliders,
-            SegmentedButton(
+                onCheckedChange = { mode = ColourPickerMode.Sliders },
-                selected = mode == ColourPickerMode.Palette,
+                label = slidersLabel
-                onClick = { mode = ColourPickerMode.Palette },
+            )
-                shape = RectangleShape
+            toggleableItem(
-            ) {
+                weight = 1f,
-                Text(stringResource(R.string.colour_picker_mode_palette))
+                checked = mode == ColourPickerMode.Palette,
-            }
+                onCheckedChange = { mode = ColourPickerMode.Palette },
-            SegmentedButton(
+                label = paletteLabel
-                selected = mode == ColourPickerMode.Hex,
+            )
-                onClick = { mode = ColourPickerMode.Hex },
+            toggleableItem(
-                shape = CircleShape.copy(
+                weight = 1f,
-                    topStart = CornerSize(0),
+                checked = mode == ColourPickerMode.Hex,
-                    bottomStart = CornerSize(0)
+                onCheckedChange = { mode = ColourPickerMode.Hex },
-                )
+                label = hexLabel
-            ) {
+            )
-                Text(stringResource(R.string.colour_picker_hex))
-            }
         }
 
         Spacer(Modifier.height(16.dp))
@@ -672,7 +671,7 @@ fun ColumnScope.ColourPickerSheet(
             verticalArrangement = Arrangement.spacedBy(4.dp)
         ) {
             TextButton(onClick = onUseDefaultColour, Modifier.fillMaxWidth()) {
-                Icon(Icons.Default.CheckCircle, null)
+                Icon(painter = painterResource(R.drawable.ic_undo_24dp), null)
                 Spacer(Modifier.width(8.dp))
                 Text(stringResource(R.string.colour_picker_use_default))
             }

app/src/main/res/drawable/ic_undo_24dp.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal"
+    android:autoMirrored="true">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M280,760L280,680L564,680Q627,680 673.5,640Q720,600 720,540Q720,480 673.5,440Q627,400 564,400L312,400L416,504L360,560L160,360L360,160L416,216L312,320L564,320Q661,320 730.5,383Q800,446 800,540Q800,634 730.5,697Q661,760 564,760L280,760Z"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -595,7 +595,7 @@
     <string name="colour_picker_hex_use">Use</string>
     <string name="colour_picker_alpha">Alpha</string>
     <string name="colour_picker_preview">Preview</string>
-    <string name="colour_picker_use_default">Default</string>
+    <string name="colour_picker_use_default">Use Default</string>
     <string name="colour_picker_cancel">Cancel</string>
     <string name="colour_picker_apply">Apply</string>