Add selection count indicator in top bar and refactor

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

@@ -2,8 +2,12 @@ package fr.free.nrw.commons.customselector.ui.components
 
 import androidx.compose.foundation.layout.Column
 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.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -14,6 +18,8 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
@@ -28,7 +34,9 @@ fun CustomSelectorTopBar(
     onNavigateBack: ()-> Unit,
     modifier: Modifier = Modifier,
     secondaryText: String? = null,
+    selectionCount: Int = 0,
     showNavigationIcon: Boolean = true,
+    showSelectionCount: Boolean = false,
     showAlertIcon: Boolean = false,
     onAlertAction: ()-> Unit = { },
 ) {
@@ -38,7 +46,6 @@ fun CustomSelectorTopBar(
                 Text(
                     text = primaryText,
                     style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp),
-                    color = MaterialTheme.colorScheme.primary,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
                 )
@@ -73,6 +80,23 @@ fun CustomSelectorTopBar(
                     )
                 }
             }
+
+            if(showSelectionCount) {
+                ElevatedCard(
+                    colors = CardDefaults.elevatedCardColors(
+                        containerColor = MaterialTheme.colorScheme.primary
+                    ),
+                    shape = CircleShape,
+                    modifier = Modifier.semantics { contentDescription = "$selectionCount Selected" }
+                        .padding(end = 8.dp)
+                ) {
+                    Text(
+                        text = "$selectionCount",
+                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            }
         }
     )
 }
@@ -86,7 +110,8 @@ private fun CustomSelectorTopBarPreview() {
                 primaryText = "My Folder",
                 secondaryText = "10 images",
                 onNavigateBack = { },
-                showAlertIcon = true
+                showAlertIcon = true,
+                selectionCount = 1
             )
         }
     }

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

@@ -21,37 +21,34 @@ import fr.free.nrw.commons.ui.theme.CommonsTheme
 
 @Composable
 fun PartialStorageAccessDialog(
-    isVisible: Boolean,
+    onManageAction: () -> Unit,
-    onManage: ()-> Unit,
     modifier: Modifier = Modifier
 ) {
-    if(isVisible) {
+    Card(
-        Card(
+        modifier = modifier,
-            modifier = modifier,
+        colors = CardDefaults.cardColors(
-            colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.secondaryContainer
-                containerColor = MaterialTheme.colorScheme.secondaryContainer
+        ),
-            ),
+        shape = RoundedCornerShape(12.dp)
-            shape = RoundedCornerShape(12.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(vertical = 8.dp, horizontal = 16.dp)
+                .fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            verticalAlignment = Alignment.CenterVertically
         ) {
-            Row(
+            Text(
-                modifier = Modifier
+                text = "You've given access to a selected number of photos",
-                    .padding(vertical = 8.dp, horizontal = 16.dp)
+                style = MaterialTheme.typography.bodyMedium,
-                    .fillMaxWidth(),
+                modifier = Modifier.weight(1f)
-                horizontalArrangement = Arrangement.spacedBy(4.dp),
+            )
-                verticalAlignment = Alignment.CenterVertically
+            Button(
+                onClick = onManageAction,
+                shape = RoundedCornerShape(8.dp),
+                contentPadding = PaddingValues(horizontal = 16.dp)
             ) {
-                Text(
+                Text(text = "Manage", style = MaterialTheme.typography.labelMedium)
-                    text = "You've given access to a selected number of photos",
-                    style = MaterialTheme.typography.bodyMedium,
-                    modifier = Modifier.weight(1f)
-                )
-                Button(
-                    onClick = onManage,
-                    shape = RoundedCornerShape(8.dp),
-                    contentPadding = PaddingValues(horizontal = 16.dp)
-                ) {
-                    Text(text = "Manage", style = MaterialTheme.typography.labelMedium)
-                }
             }
         }
     }
@@ -62,9 +59,11 @@ fun PartialStorageAccessDialog(
 fun PartialStorageAccessIndicatorPreview() {
     CommonsTheme {
         Surface {
-            PartialStorageAccessDialog(isVisible = true, onManage = {}, modifier = Modifier
+            PartialStorageAccessDialog(
-                .padding(8.dp)
+                onManageAction = {},
-                .fillMaxWidth()
+                modifier = Modifier
+                    .padding(8.dp)
+                    .fillMaxWidth()
             )
         }
     }