Use a Checkbox for the timeline selection indicator

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/SelectionIndicator.kt

@@ -7,44 +7,38 @@
 
 package io.element.android.features.messages.impl.timeline.components
 
-import androidx.compose.foundation.layout.size
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Checkbox
 
 /**
- * Compact selection indicator used in the timeline selection mode, in place of a Material
+ * Selection indicator used in the timeline selection mode. It renders the Compound [Checkbox], with the minimum
- * [androidx.compose.material3.Checkbox] (which reserves a 48dp interactive area). It is purely
+ * interactive size enforcement disabled so that it fits the compact selection column. It is purely visual: the tap
- * visual: the tap is handled by the whole-row click target, so this only reflects [selected].
+ * is handled by the whole-row click target, so this only reflects [selected].
  */
 @Composable
 internal fun SelectionIndicator(
     selected: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    Icon(
+    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
-        modifier = modifier,
+        Checkbox(
-        imageVector = if (selected) CompoundIcons.CheckCircleSolid() else CompoundIcons.Circle(),
+            modifier = modifier,
-        contentDescription = null,
+            checked = selected,
-        tint = if (selected) ElementTheme.colors.iconAccentPrimary else ElementTheme.colors.iconTertiary,
+            onCheckedChange = null,
-    )
+        )
+    }
 }
 
 @PreviewsDayNight
 @Composable
 internal fun SelectionIndicatorPreview() = ElementPreview {
-    Icon(
+    SelectionIndicator(selected = false)
-        modifier = Modifier.size(24.dp),
-        imageVector = CompoundIcons.Circle(),
-        contentDescription = null,
-        tint = ElementTheme.colors.iconTertiary,
-    )
 }
 
 @PreviewsDayNight