add functionality for unselecting all pictures at once

app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt

@@ -1,11 +1,15 @@
 package fr.free.nrw.commons.customselector.ui.components
 
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -16,6 +20,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.contentDescription
@@ -39,6 +44,7 @@ fun CustomSelectorTopBar(
     showSelectionCount: Boolean = false,
     showAlertIcon: Boolean = false,
     onAlertAction: ()-> Unit = { },
+    onUnselectAllAction: ()-> Unit = { }
 ) {
     TopAppBar(
         title = {
@@ -86,15 +92,27 @@ fun CustomSelectorTopBar(
                     colors = CardDefaults.elevatedCardColors(
                         containerColor = MaterialTheme.colorScheme.primary
                     ),
+                    elevation = CardDefaults.elevatedCardElevation(8.dp),
                     shape = CircleShape,
                     modifier = Modifier.semantics { contentDescription = "$selectionCount Selected" }
                         .padding(end = 8.dp)
                 ) {
-                    Text(
+                    Row(
-                        text = "$selectionCount",
+                        modifier = Modifier.padding(start = 16.dp, end = 8.dp),
-                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                        verticalAlignment = Alignment.CenterVertically,
-                        style = MaterialTheme.typography.labelMedium
+                        horizontalArrangement = Arrangement.spacedBy(8.dp)
-                    )
+                    ) {
+                        Text(
+                            text = "$selectionCount",
+                            modifier = Modifier.padding(vertical = 8.dp)
+                        )
+
+                        Icon(
+                            imageVector = Icons.Default.Close,
+                            contentDescription = null,
+                            modifier = Modifier.clickable { onUnselectAllAction() }
+                        )
+                    }
                 }
             }
         }
@@ -111,7 +129,8 @@ private fun CustomSelectorTopBarPreview() {
                 secondaryText = "10 images",
                 onNavigateBack = { },
                 showAlertIcon = true,
-                selectionCount = 1
+                selectionCount = 2,
+                showSelectionCount = true
             )
         }
     }

app/src/main/java/fr/free/nrw/commons/customselector/ui/screens/CustomSelectorEvent.kt

@@ -4,4 +4,5 @@ interface CustomSelectorEvent {
     data class OnFolderClick(val bucketId: Long): CustomSelectorEvent
     data class OnImageSelection(val imageId: Long): CustomSelectorEvent
     data class OnDragImageSelection(val imageIds: Set<Long>): CustomSelectorEvent
+    data object OnUnselectAll: CustomSelectorEvent
 }

app/src/main/java/fr/free/nrw/commons/customselector/ui/screens/CustomSelectorScreen.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
@@ -85,7 +86,8 @@ fun CustomSelectorScreen(
                         navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, it)
                     },
                     hasPartialAccess = hasPartialAccess,
-                    adaptiveInfo = adaptiveInfo
+                    adaptiveInfo = adaptiveInfo,
+                    onUnselectAll = { onEvent(CustomSelectorEvent.OnUnselectAll) }
                 )
             }
         },
@@ -112,6 +114,7 @@ fun CustomSelectorScreen(
 fun FoldersPane(
     uiState: CustomSelectorState,
     onFolderClick: (Folder)-> Unit,
+    onUnselectAll: ()-> Unit,
     adaptiveInfo: WindowAdaptiveInfo,
     hasPartialAccess: Boolean = false
 ) {
@@ -129,6 +132,7 @@ fun FoldersPane(
                     showAlertIcon = uiState.selectedImageIds.size > 20 && isCompatWidth,
                     selectionCount = uiState.selectedImageIds.size,
                     onAlertAction = { },
+                    onUnselectAllAction = onUnselectAll,
                     showSelectionCount = uiState.inSelectionMode && isCompatWidth
                 )
             }

app/src/main/java/fr/free/nrw/commons/customselector/ui/screens/CustomSelectorViewModel.kt

@@ -57,7 +57,9 @@ class CustomSelectorViewModel(private val mediaReader: MediaReader): ViewModel()
                 _uiState.update { it.copy(selectedImageIds = e.imageIds) }
             }
 
-            else -> {}
+            CustomSelectorEvent.OnUnselectAll-> {
+                _uiState.update { it.copy(selectedImageIds = emptySet()) }
+            }
         }
     }
 }

app/src/main/java/fr/free/nrw/commons/customselector/ui/screens/ImagesPane.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -101,7 +102,8 @@ fun ImagesPane(
                 showNavigationIcon = isCompatWidth,
                 showAlertIcon = selectedImages().size > 20,
                 selectionCount = selectedImages().size,
-                showSelectionCount = uiState.inSelectionMode
+                showSelectionCount = uiState.inSelectionMode,
+                onUnselectAllAction = { onEvent(CustomSelectorEvent.OnUnselectAll) }
             )
         },
         bottomBar = {