Split the view in 3 columns instead of only 1

app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt

@@ -4,10 +4,15 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Settings
@@ -56,6 +61,8 @@ fun MainScreen(ctx: MainActivity, padding: PaddingValues, view: RecipesView) {
 	var openTagFilterDialog by remember { mutableStateOf(false) }
 	var selectedEntries by remember { mutableStateOf(listOf<RecipeWithTags>()) }
 
+	val gridState = rememberLazyStaggeredGridState()
+
 	NavHost(
 		navController = navController,
 		startDestination = "list"
@@ -129,7 +136,13 @@ fun MainScreen(ctx: MainActivity, padding: PaddingValues, view: RecipesView) {
 						)
 					}
 				}
-				LazyColumn {
+				LazyVerticalStaggeredGrid(
+					columns = StaggeredGridCells.Fixed(3),
+					modifier = Modifier.fillMaxSize(),
+					horizontalArrangement = Arrangement.spacedBy(8.dp),
+					verticalItemSpacing = 8.dp,
+					state = gridState,
+				) {
 					items(activeRecipes) { entry ->
 						val isSelected = selectedEntries.contains(entry)
 						RecipePreview(entry, isSelected, onClick = {

app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt

@@ -11,10 +11,10 @@ import androidx.compose.foundation.combinedClickable
 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.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -22,6 +22,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
@@ -32,7 +33,6 @@ import androidx.compose.ui.res.imageResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.em
 import kotlinx.coroutines.delay
 import xyz.pixelatedw.recipe.R
 import xyz.pixelatedw.recipe.data.RecipeWithTags
@@ -58,17 +58,15 @@ fun RecipePreview(
 	Column(
 		modifier = Modifier
 			.background(color = if (isSelected) Color(0x11FF0000) else Color(0x00FFFFFF))
-			.padding(8.dp)
 			.combinedClickable(
 				onLongClick = { onSelected(!isSelected) },
 				onClick = onClick
 			)
+			.height(192.dp)
 	) {
 		Row(
 			horizontalArrangement = Arrangement.Center,
-			modifier = Modifier
+			modifier = Modifier.weight(0.7f)
-				.fillMaxWidth()
-				.height(256.dp)
 		) {
 			AnimatedContent(
 				displayImageId,
@@ -83,47 +81,42 @@ fun RecipePreview(
 					Image(
 						bitmap = displayImage.asImageBitmap(),
 						contentDescription = "Recipe image",
-						contentScale = ContentScale.Crop,
+						contentScale = ContentScale.FillHeight,
-						modifier = Modifier
+						modifier = Modifier.fillMaxSize(),
-							.size(256.dp)
-							.padding(top = 16.dp, bottom = 8.dp),
 					)
 				} else {
 					Image(
 						bitmap = ImageBitmap.imageResource(R.drawable.missing_image),
 						contentDescription = "Missing recipe image",
-						contentScale = ContentScale.Crop,
+						contentScale = ContentScale.FillWidth,
-						modifier = Modifier
+						modifier = Modifier.fillMaxSize(),
-							.size(256.dp)
-							.padding(top = 16.dp, bottom = 8.dp),
 					)
 				}
 			}
 		}
 		Row(
 			horizontalArrangement = Arrangement.Center,
-			modifier = Modifier
+			verticalAlignment = Alignment.CenterVertically,
-				.fillMaxWidth()
+			modifier = Modifier.fillMaxWidth().weight(0.2f)
-				.padding(bottom = 8.dp)
 		) {
 			Text(
 				text = entry.recipe.title,
 				modifier = Modifier.fillMaxWidth(),
 				style = TextStyle(
 					textAlign = TextAlign.Center,
-					fontSize = 7.em,
+//					fontSize = 7.em,
 				)
 			)
 		}
-		Row(
+//		Row(
-			horizontalArrangement = Arrangement.End,
+//			horizontalArrangement = Arrangement.End,
-			modifier = Modifier
+//			modifier = Modifier
-				.fillMaxWidth()
+//				.weight(0.15f)
-				.padding(bottom = 16.dp)
+//				.fillMaxWidth()
-		) {
+//		) {
-			for (tag in entry.tags) {
+//			for (tag in entry.tags) {
-				Tag(tag)
+//				Tag(tag)
-			}
+//			}
-		}
+//		}
 	}
 }

app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt

@@ -10,18 +10,20 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import xyz.pixelatedw.recipe.data.Tag
 
 @Composable
 fun Tag(tag: Tag) {
 	Box(
 		modifier = Modifier
-			.padding(start = 8.dp)
+			.padding(start = 4.dp)
-			.clip(RoundedCornerShape(percent = 50))
+			.clip(RoundedCornerShape(percent = 25))
 			.background(Color(0, 153, 170))
 	) {
 		Text(
-			modifier = Modifier.padding(start = 8.dp, end = 8.dp),
+			modifier = Modifier.padding(start = 4.dp, end = 4.dp),
+			fontSize = 12.sp,
 			text = tag.name
 		)
 	}