Fix selection indicator: high-contrast white circle on any background

Replace low-contrast RadioButtonUnchecked (50% white) and primary-tint
CheckCircle with a custom indicator:
- Unselected: white circle (90% opacity) with dark border — visible on
  both light and dark thumbnails
- Selected: filled primary-color circle with white checkmark inside

The circle is also directly clickable (same as the thumbnail tap).
This commit is contained in:
Kyle Bolen
2026-07-30 05:51:12 +00:00
parent de240be014
commit bc3a89e858

View File

@@ -252,16 +252,31 @@ private fun DenseThumb(
}
}
// Top-right: selection indicator only (no other labels here)
// Top-right: high-contrast selection indicator
// White circle with drop shadow so it's visible on both light and dark thumbnails
Box(
modifier = Modifier
.align(Alignment.TopEnd)
.padding(4.dp)
.size(20.dp)
.background(
if (isSelected) MaterialTheme.colorScheme.primary
else Color.White.copy(alpha = 0.9f),
shape = androidx.compose.foundation.shape.CircleShape,
)
.border(
width = 1.5.dp,
color = if (isSelected) MaterialTheme.colorScheme.primary
else Color.Black.copy(alpha = 0.3f),
shape = androidx.compose.foundation.shape.CircleShape,
)
.clickable(onClick = onToggle),
contentAlignment = Alignment.Center,
) {
if (isSelected) {
Icon(Icons.Default.CheckCircle, contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
modifier = Modifier.align(Alignment.TopEnd).padding(2.dp).size(16.dp))
} else {
// Faint unchecked indicator so user knows cell is tappable
Icon(Icons.Default.RadioButtonUnchecked, contentDescription = null,
tint = Color.White.copy(alpha = 0.5f),
modifier = Modifier.align(Alignment.TopEnd).padding(2.dp).size(14.dp))
tint = Color.White, modifier = Modifier.size(18.dp))
}
}
// Bottom-left: LIVE badge or video size badge