add ui components for custom selector

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

@@ -0,0 +1,87 @@
+package fr.free.nrw.commons.customselector.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import fr.free.nrw.commons.ui.theme.CommonsTheme
+
+@Composable
+fun PrimaryButton(
+    text: String,
+    onClick: ()-> Unit,
+    modifier: Modifier = Modifier,
+    shape: Shape = RoundedCornerShape(12.dp),
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier,
+        shape = shape,
+        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 4.dp)
+    ) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Composable
+fun SecondaryButton(
+    text: String,
+    onClick: ()-> Unit,
+    modifier: Modifier = Modifier,
+    shape: Shape = RoundedCornerShape(12.dp),
+) {
+    OutlinedButton(
+        onClick = onClick,
+        modifier = modifier,
+        border = BorderStroke(1.dp, color = MaterialTheme.colorScheme.primary),
+        shape = shape,
+        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 4.dp)
+    ) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@PreviewLightDark
+@Composable
+private fun PrimaryButtonPreview() {
+    CommonsTheme {
+        Surface {
+            PrimaryButton(
+                text = "Primary Button",
+                onClick = { },
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+    }
+}
+
+@PreviewLightDark
+@Composable
+private fun SecondaryButtonPreview() {
+    CommonsTheme {
+        Surface {
+            SecondaryButton(
+                text = "Secondary Button",
+                onClick = { },
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+package fr.free.nrw.commons.customselector.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import fr.free.nrw.commons.ui.theme.CommonsTheme
+
+@Composable
+fun CustomSelectorBottomBar(modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        SecondaryButton(
+            text = "Mark as\nnot for upload".uppercase(),
+            onClick = { /*TODO*/ },
+            modifier = Modifier.weight(1f)
+        )
+
+        PrimaryButton(
+            text = "Upload".uppercase(),
+            onClick = { /*TODO*/ },
+            modifier = Modifier.weight(1f)
+                .height(IntrinsicSize.Max)
+        )
+    }
+}
+
+@PreviewLightDark
+@Composable
+private fun CustomSelectorBottomBarPreview() {
+    CommonsTheme {
+        Surface(tonalElevation = 3.dp) {
+            CustomSelectorBottomBar(
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
+                    .fillMaxWidth()
+            )
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+package fr.free.nrw.commons.customselector.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+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.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.free.nrw.commons.R
+import fr.free.nrw.commons.ui.theme.CommonsTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun CustomSelectorTopBar(
+    primaryText: String,
+    onNavigateBack: ()-> Unit,
+    modifier: Modifier = Modifier,
+    secondaryText: String? = null,
+    showAlertIcon: Boolean = false,
+    onAlertAction: ()-> Unit = { },
+) {
+    TopAppBar(
+        title = {
+            Column {
+                Text(
+                    text = primaryText,
+                    style = MaterialTheme.typography.titleMedium.copy(fontSize = 20.sp),
+                    color = MaterialTheme.colorScheme.primary,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+                secondaryText?.let {
+                    Text(
+                        text = it,
+                        style = MaterialTheme.typography.labelLarge,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                }
+            }
+        },
+        modifier = modifier,
+        navigationIcon = {
+            IconButton(onClick = onNavigateBack) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Rounded.KeyboardArrowLeft,
+                    contentDescription = "Navigate Back",
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
+        },
+        actions = {
+            if(showAlertIcon) {
+                IconButton(onClick = onAlertAction) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_error_red_24dp),
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.error
+                    )
+                }
+            }
+        }
+    )
+}
+
+@PreviewLightDark
+@Composable
+private fun CustomSelectorTopBarPreview() {
+    CommonsTheme {
+        Surface(tonalElevation = 1.dp) {
+            CustomSelectorTopBar(
+                primaryText = "My Folder",
+                secondaryText = "10 images",
+                onNavigateBack = { },
+                showAlertIcon = true
+            )
+        }
+    }
+}

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

@@ -0,0 +1,71 @@
+package fr.free.nrw.commons.customselector.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import fr.free.nrw.commons.ui.theme.CommonsTheme
+
+@Composable
+fun PartialStorageAccessDialog(
+    isVisible: Boolean,
+    onManage: ()-> Unit,
+    modifier: Modifier = Modifier
+) {
+    if(isVisible) {
+        Card(
+            modifier = modifier,
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.secondaryContainer
+            ),
+            shape = RoundedCornerShape(12.dp)
+        ) {
+            Row(
+                modifier = Modifier
+                    .padding(vertical = 8.dp, horizontal = 16.dp)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    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)
+                }
+            }
+        }
+    }
+}
+
+@PreviewLightDark
+@Composable
+fun PartialStorageAccessIndicatorPreview() {
+    CommonsTheme {
+        Surface {
+            PartialStorageAccessDialog(isVisible = true, onManage = {}, modifier = Modifier
+                .padding(8.dp)
+                .fillMaxWidth()
+            )
+        }
+    }
+}