Merge pull request #110 from Rome-Squad/fix/category-icon

change category icon to match size correctly

Author: AhmedMohamed056

app/src/main/java/com/giraffe/tudeeapp/design_system/component/CategoryItem.kt

@@ -7,30 +7,35 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil3.compose.rememberAsyncImagePainter
+import coil3.request.ImageRequest
 import com.giraffe.tudeeapp.R
 import com.giraffe.tudeeapp.design_system.color.LocalTudeeColors
 import com.giraffe.tudeeapp.design_system.theme.Theme
+import com.giraffe.tudeeapp.domain.entity.Category
 
 @Composable
 fun CategoryItem(
-    icon: Painter,
-    categoryName: String,
     modifier: Modifier = Modifier,
-    count: Int = 0,
     isShowCount: Boolean = true,
     isSelected: Boolean = false,
+    category: Category,
     onClick: () -> Unit = {}
 ) {
 
@@ -46,13 +51,35 @@ fun CategoryItem(
                     .clickable(onClick = onClick),
                 contentAlignment = Alignment.Center
             ) {
-                Image(
-                    painter = icon,
-                    contentDescription = stringResource(R.string.category_icon),
-                    modifier = Modifier
-                        .padding(23.dp)
-                        .size(32.dp),
-                )
+                if (category.isEditable) {
+                    Image(
+                        painter = rememberAsyncImagePainter(
+                            ImageRequest
+                                .Builder(LocalContext.current)
+                                .data(data = category.imageUri)
+                                .build()
+                        ),
+                        contentDescription = stringResource(R.string.category_icon),
+                        contentScale = ContentScale.FillBounds,
+                        modifier = Modifier
+                            .padding(23.dp)
+                            .size(32.dp)
+                            .clip(CircleShape)
+                    )
+                }else{
+                    Image(
+                        painter = rememberAsyncImagePainter(
+                            ImageRequest
+                                .Builder(LocalContext.current)
+                                .data(data = category.imageUri)
+                                .build()
+                        ),
+                        contentDescription = stringResource(R.string.category_icon),
+                        modifier = Modifier
+                            .padding(23.dp)
+                            .size(32.dp)
+                    )
+                }
             }
             if (isSelected) {
                 Box(
@@ -78,7 +105,7 @@ fun CategoryItem(
                         .align(Alignment.TopEnd),
                 ) {
                     Text(
-                        text = count.toString(),
+                        text = category.taskCount.toString(),
                         style = Theme.textStyle.label.small,
                         color = LocalTudeeColors.current.hint,
                         modifier = Modifier.align(Alignment.Center)
@@ -88,7 +115,7 @@ fun CategoryItem(
         }
 
         Text(
-            text = categoryName,
+            text = category.name,
             style = Theme.textStyle.label.small,
             color = LocalTudeeColors.current.body,
             maxLines = 1,
@@ -101,19 +128,11 @@ fun CategoryItem(
 @Preview(showBackground = true)
 @Composable
 fun CategoryItemWithCountPreview() {
-    CategoryItem(
-        icon = painterResource(R.drawable.user_multiple),
-        categoryName = "Education",
-        count = 16
-    )
+
 }
 
 @Preview(showBackground = true)
 @Composable
 fun CategoryItemWithSelectedPreview() {
-    CategoryItem(
-        icon = painterResource(R.drawable.user_multiple),
-        categoryName = "Education",
-        isSelected = true
-    )
+
 }

app/src/main/java/com/giraffe/tudeeapp/presentation/screen/categories/CategoriesScreen.kt

@@ -107,14 +107,7 @@ fun CategoriesContent(
             ) {
                 items(state.categories.size) { index ->
                     CategoryItem(
-                        icon = rememberAsyncImagePainter(
-                            ImageRequest
-                                .Builder(LocalContext.current)
-                                .data(data = state.categories[index].imageUri)
-                                .build()
-                        ),
-                        categoryName = state.categories[index].name,
-                        count = state.categories[index].taskCount,
+                        category= state.categories[index],
                         onClick = {
                             actions.selectCategory(state.categories[index].id)
                         }

app/src/main/java/com/giraffe/tudeeapp/presentation/screen/taskeditor/TaskEditorBottomSheet.kt

@@ -253,16 +253,12 @@ private fun TaskEditorBottomSheetContent(
             verticalArrangement = Arrangement.spacedBy(24.dp),
         ) {
             items(taskEditorState.categories) { category ->
-                val painter = rememberAsyncImagePainter(model = category.imageUri)
-
                 CategoryItem(
-                    icon = painter,
-                    categoryName = category.name,
                     isSelected = task.category.id == category.id,
-                    count = 0,
                     isShowCount = false,
                     onClick = { actions.onChangeTaskCategoryValue(category.id) },
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier.fillMaxWidth(),
+                    category = category
                 )
             }
         }