Separate ProductCard and ProductsListItem

src/main/kotlin/com/looker/droidify/ui/compose/ItemRecyclers.kt

@@ -11,6 +11,8 @@ import androidx.compose.ui.unit.dp
 import com.looker.droidify.database.entity.Product
 import com.looker.droidify.database.entity.Repository
 import com.looker.droidify.entity.ProductItem
+import com.looker.droidify.ui.compose.components.ProductCard
+import com.looker.droidify.ui.compose.components.ProductsListItem
 
 @Composable
 fun ProductsVerticalRecycler(
@@ -24,7 +26,7 @@ fun ProductsVerticalRecycler(
         ) {
             items(productsList ?: emptyList()) { product ->
                 product.item.let { item ->
-                    ProductRow(item, repositories[item.repositoryId], onUserClick)
+                    ProductsListItem(item, repositories[item.repositoryId], onUserClick)
                 }
             }
         }
@@ -42,7 +44,7 @@ fun ProductsHorizontalRecycler(
     ) {
         items(productsList ?: emptyList()) { product ->
             product.item.let { item ->
-                ProductColumn(item, repositories[item.repositoryId], onUserClick)
+                ProductCard(item, repositories[item.repositoryId], onUserClick)
             }
         }
     }

src/main/kotlin/com/looker/droidify/ui/compose/components/ProductCard.kt

@@ -0,0 +1,74 @@
+package com.looker.droidify.ui.compose.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.looker.droidify.database.entity.Repository
+import com.looker.droidify.entity.ProductItem
+import com.looker.droidify.network.CoilDownloader
+import com.looker.droidify.ui.compose.utils.NetworkImage
+
+@Composable
+fun ProductCard(
+    item: ProductItem,
+    repo: Repository? = null,
+    onUserClick: (ProductItem) -> Unit = {}
+) {
+
+    val imageData by remember(item, repo) {
+        mutableStateOf(
+            CoilDownloader.createIconUri(
+                item.packageName,
+                item.icon,
+                item.metadataIcon,
+                repo?.address,
+                repo?.authentication
+            )
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .padding(4.dp)
+            .requiredSize(80.dp, 116.dp)
+            .clip(shape = RoundedCornerShape(8.dp))
+            .background(color = MaterialTheme.colorScheme.surface)
+            .clickable(onClick = { onUserClick(item) }),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        NetworkImage(
+            modifier = Modifier.size(64.dp),
+            data = imageData
+        )
+
+        Text(
+            modifier = Modifier.padding(4.dp, 2.dp),
+            text = item.name,
+            style = MaterialTheme.typography.bodySmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            color = MaterialTheme.colorScheme.onSurface
+        )
+        Text(
+            modifier = Modifier.padding(4.dp, 1.dp),
+            text = item.version,
+            style = MaterialTheme.typography.labelSmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+    }
+}

src/main/kotlin/com/looker/droidify/ui/compose/components/ProductsListItem.kt

@@ -1,9 +1,6 @@
-package com.looker.droidify.ui.compose
+package com.looker.droidify.ui.compose.components
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.FavoriteBorder
@@ -15,22 +12,19 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.looker.droidify.R
 import com.looker.droidify.database.entity.Repository
 import com.looker.droidify.entity.ProductItem
 import com.looker.droidify.network.CoilDownloader
-import com.looker.droidify.ui.compose.components.ExpandableCard
+import com.looker.droidify.ui.compose.utils.ExpandableCard
-import com.looker.droidify.ui.compose.components.NetworkImage
+import com.looker.droidify.ui.compose.utils.NetworkImage
-import com.looker.droidify.ui.compose.theme.AppTheme
 
 @Composable
-fun ProductRow(
+fun ProductsListItem(
     item: ProductItem,
     repo: Repository? = null,
     onUserClick: (ProductItem) -> Unit = {}
@@ -97,59 +91,6 @@ fun ProductRow(
     }
 }
 
-@Composable
-fun ProductColumn(
-    item: ProductItem,
-    repo: Repository? = null,
-    onUserClick: (ProductItem) -> Unit = {}
-) {
-
-    val imageData by remember(item, repo) {
-        mutableStateOf(
-            CoilDownloader.createIconUri(
-                item.packageName,
-                item.icon,
-                item.metadataIcon,
-                repo?.address,
-                repo?.authentication
-            )
-        )
-    }
-
-    Column(
-        modifier = Modifier
-            .padding(4.dp)
-            .requiredSize(80.dp, 116.dp)
-            .clip(shape = RoundedCornerShape(8.dp))
-            .background(color = MaterialTheme.colorScheme.surface)
-            .clickable(onClick = { onUserClick(item) }),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
-    ) {
-        NetworkImage(
-            modifier = Modifier.size(64.dp),
-            data = imageData
-        )
-
-        Text(
-            modifier = Modifier.padding(4.dp, 2.dp),
-            text = item.name,
-            style = MaterialTheme.typography.bodySmall,
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-            color = MaterialTheme.colorScheme.onSurface
-        )
-        Text(
-            modifier = Modifier.padding(4.dp, 1.dp),
-            text = item.version,
-            style = MaterialTheme.typography.labelSmall,
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-            color = MaterialTheme.colorScheme.onSurfaceVariant
-        )
-    }
-}
-
 @Composable
 fun ExpandedItemContent(
     modifier: Modifier = Modifier,
@@ -187,35 +128,3 @@ fun ExpandedItemContent(
         }
     }
 }
-
-@Preview
-@Composable
-fun ProductColumnPreview() {
-    AppTheme(darkTheme = false) {
-        ProductColumn(ProductItem())
-    }
-}
-
-@Preview
-@Composable
-fun ProductColumnDarkPreview() {
-    AppTheme(darkTheme = true) {
-        ProductColumn(ProductItem())
-    }
-}
-
-@Preview
-@Composable
-fun ProductRowPreview() {
-    AppTheme(darkTheme = false) {
-        ProductRow(ProductItem())
-    }
-}
-
-@Preview
-@Composable
-fun ProductRowDarkPreview() {
-    AppTheme(darkTheme = true) {
-        ProductRow(ProductItem())
-    }
-}

src/main/kotlin/com/looker/droidify/ui/compose/utils/Card.kt

@@ -1,17 +1,25 @@
-package com.looker.droidify.ui.compose.components
+package com.looker.droidify.ui.compose.utils
 
 import androidx.compose.animation.*
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import com.looker.droidify.ui.compose.theme.LocalShapes
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -19,21 +27,26 @@ import com.looker.droidify.ui.compose.theme.LocalShapes
 fun ExpandableCard(
     modifier: Modifier = Modifier,
     preExpanded: Boolean = false,
+    backgroundColor: Color = MaterialTheme.colorScheme.background,
+    shape: CornerBasedShape = RoundedCornerShape(LocalShapes.current.large),
     onClick: () -> Unit = {},
     expandedContent: @Composable () -> Unit = {},
     mainContent: @Composable () -> Unit
 ) {
-    var expanded by remember { mutableStateOf(preExpanded) }
+    var expanded by rememberSaveable { mutableStateOf(preExpanded) }
+    val cardElevation by animateDpAsState(targetValue = if (expanded) 12.dp else 0.dp)
+    val background by animateColorAsState(targetValue = backgroundColor)
 
     Surface(
         modifier = Modifier
             .animateContentSize()
-            .clip(RoundedCornerShape(LocalShapes.current.large))
+            .clip(shape)
             .combinedClickable(
                 onClick = onClick,
                 onLongClick = { expanded = !expanded }
             ),
-        color = MaterialTheme.colorScheme.background
+        tonalElevation = cardElevation,
+        color = background
     ) {
         Box(modifier = modifier, contentAlignment = Alignment.CenterStart) {
             Column {

src/main/kotlin/com/looker/droidify/ui/compose/utils/Image.kt

@@ -1,4 +1,4 @@
-package com.looker.droidify.ui.compose.components
+package com.looker.droidify.ui.compose.utils
 
 import android.net.Uri
 import androidx.compose.foundation.Image