feat: improve applicationitem drastically

* add animation to expand
* switch Arrow Icon to Expand Icon
* make sure Update button never gets squished
* use app icons for placeholder image

app/src/main/java/app/revanced/manager/ui/component/ApplicationItem.kt

@@ -1,52 +1,97 @@
 package app.revanced.manager.ui.component
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material.icons.Icons
-import androidx.compose.material3.Text
+import androidx.compose.material.icons.filled.ExpandMore
-import androidx.compose.runtime.Composable
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import app.revanced.manager.R
 
 @Composable
 fun ApplicationItem(
-    name: String,
+    appName: String,
-    released: String, // TODO: temp
+    appIcon: @Composable () -> Unit,
-    icon: @Composable () -> Unit,
+    releaseAgo: String,
-    expandedContent: @Composable () -> Unit
+    expandedContent: @Composable () -> Unit,
 ) {
-    ExpandableCard(
+    var expandedState by remember { mutableStateOf(false) }
-        content = { arrowButton ->
+    val rotateState by animateFloatAsState(targetValue = if (expandedState) 180f else 0f)
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 68.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(
+                alpha = 0.5f
+            )
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 14.dp, vertical = 2.dp)
+        ) {
             Row(
                 modifier = Modifier.fillMaxSize(),
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.SpaceBetween,
             ) {
                 Row(
-                    modifier = Modifier.height(68.dp),
+                    modifier = Modifier
+                        .height(68.dp)
+                        .weight(1f),
                     verticalAlignment = Alignment.CenterVertically,
                     horizontalArrangement = Arrangement.SpaceBetween,
                 ) {
-                    icon()
+                    appIcon()
                     Column(modifier = Modifier.padding(start = 8.dp)) {
-                        Text(name)
                         Text(
-                            text = released,
+                            text = appName,
+                            overflow = TextOverflow.Ellipsis,
+                            maxLines = 1
+                        )
+                        Text(
+                            text = releaseAgo,
                             style = MaterialTheme.typography.bodySmall,
                             color = MaterialTheme.colorScheme.onSurfaceVariant,
                         )
                     }
                 }
                 Row(verticalAlignment = Alignment.CenterVertically) {
-                    arrowButton()
+                    IconButton(
+                        modifier = Modifier.rotate(rotateState),
+                        onClick = { expandedState = !expandedState },
+                    ) {
+                        Icon(
+                            imageVector = Icons.Default.ExpandMore,
+                            contentDescription = stringResource(R.string.expand)
+                        )
+                    }
+                    OutlinedButton(onClick = { /*TODO*/ }) {
+                        Text(stringResource(R.string.update))
+                    }
+                }
+            }
+            AnimatedVisibility(
+                visible = expandedState
+            ) {
+                Box(
+                    modifier = Modifier
+                        .padding(bottom = 10.dp)
+                        .fillMaxSize(),
+                ) {
+                    expandedContent()
                 }
             }
-        },
-        expandedContent = {
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
-            ) { expandedContent() }
         }
-    )
+    }
 }

app/src/main/java/app/revanced/manager/ui/screen/DashboardScreen.kt

@@ -5,9 +5,6 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Build
-import androidx.compose.material.icons.filled.Dashboard
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -17,6 +14,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import app.revanced.manager.R
+import app.revanced.manager.ui.component.AppIcon
 import app.revanced.manager.ui.component.ApplicationItem
 import app.revanced.manager.ui.component.HeadlineWithCard
 import app.revanced.manager.ui.viewmodel.DashboardViewModel
@@ -88,9 +86,11 @@ fun DashboardScreen(viewModel: DashboardViewModel = getViewModel()) {
                 verticalArrangement = Arrangement.spacedBy(12.dp)
             ) {
                 ApplicationItem(
-                    name = "Youtube ReVanced",
+                    appName = "Compose Manager",
-                    released = "9d ago",
+                    appIcon = {
-                    icon = { Icon(Icons.Default.Dashboard, "ReVanced") }
+                        AppIcon(drawable = LocalContext.current.packageManager.getApplicationIcon("app.revanced.manager.compose"), contentDescription = null, size = 38)
+                    },
+                    releaseAgo = "9d ago"
                 ) {
                     ChangelogText(
                         """
@@ -99,13 +99,13 @@ fun DashboardScreen(viewModel: DashboardViewModel = getViewModel()) {
                     )
                 }
                 ApplicationItem(
-                    name = "Reddit ReVanced",
+                    appName = "Flutter Manager",
-                    released = "1 month ago",
+                    releaseAgo = "9d ago",
-                    icon = { Icon(Icons.Default.Build, "ReReddit") }
+                    appIcon = { AppIcon(drawable = LocalContext.current.packageManager.getApplicationIcon("app.revanced.manager.flutter"), contentDescription = null, size = 38) }
                 ) {
                     ChangelogText(
                         """
-                            hi ushie
+                            cossal will explode
                         """.trimIndent()
                     )
                 }