From bc3a89e858fbe23075aeff9cc4dddbba04e8e8a5 Mon Sep 17 00:00:00 2001
From: Kyle Bolen <kbolen@amazon.com>
Date: Thu, 30 Jul 2026 05:51:12 +0000
Subject: [PATCH] Fix selection indicator: high-contrast white circle on any
 background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../bolenpad/photophetch/ui/DensePhotoGrid.kt | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/main/kotlin/com/bolenpad/photophetch/ui/DensePhotoGrid.kt b/src/main/kotlin/com/bolenpad/photophetch/ui/DensePhotoGrid.kt
index 6d9a15f..b0eacf2 100644
--- a/src/main/kotlin/com/bolenpad/photophetch/ui/DensePhotoGrid.kt
+++ b/src/main/kotlin/com/bolenpad/photophetch/ui/DensePhotoGrid.kt
@@ -252,16 +252,31 @@ private fun DenseThumb(
                 }
             }
 
-            // Top-right: selection indicator only (no other labels here)
-            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))
+            // 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 = Color.White, modifier = Modifier.size(18.dp))
+                }
             }
 
             // Bottom-left: LIVE badge or video size badge