[refactor] Refactor the feed screen into card style

app/build.gradle.kts

@@ -21,7 +21,7 @@ android {
         minSdk = 24
         targetSdk = 34
         versionCode = 16
-        versionName = "1.1-beta18"
+        versionName = "1.1-beta19"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
 

app/src/main/java/com/skyd/anivu/ui/component/AniVuIconButton.kt

@@ -19,6 +19,7 @@ import androidx.compose.material3.rememberTooltipState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -36,13 +37,15 @@ fun AniVuIconButton(
     tint: Color? = null,
     style: AniVuIconButtonStyle = AniVuIconButtonStyle.Normal,
     contentDescription: String? = null,
+    rotate: Float = 0f,
     enabled: Boolean = true,
     colors: IconButtonColors? = null,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     val iconButton: @Composable (modifier: Modifier) -> Unit = {
         val icon: @Composable () -> Unit = {
             Icon(
+                modifier = Modifier.rotate(rotate),
                 painter = painter,
                 tint = tint ?: LocalContentColor.current,
                 contentDescription = contentDescription,
@@ -113,6 +116,7 @@ fun AniVuIconButton(
     tint: Color? = null,
     style: AniVuIconButtonStyle = AniVuIconButtonStyle.Normal,
     contentDescription: String? = null,
+    rotate: Float = 0f,
     enabled: Boolean = true,
     colors: IconButtonColors? = null,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
@@ -123,6 +127,7 @@ fun AniVuIconButton(
         painter = rememberVectorPainter(image = imageVector),
         style = style,
         contentDescription = contentDescription,
+        rotate = rotate,
         tint = tint,
         enabled = enabled,
         colors = colors,

app/src/main/java/com/skyd/anivu/ui/component/lazyverticalgrid/adapter/proxy/DefaultGroup1Proxy.kt

@@ -12,9 +12,11 @@ class DefaultGroup1Proxy(
     override fun Draw(index: Int, data: GroupBean.DefaultGroup) {
         if (!hide(index)) {
             Group1Item(
+                index = index,
                 data = data,
                 initExpand = group1Proxy.isExpand,
                 onExpandChange = group1Proxy.onExpandChange,
+                isEmpty = group1Proxy.isEmpty,
                 onShowAllArticles = group1Proxy.onShowAllArticles,
                 onDelete = group1Proxy.onDelete,
                 onFeedsMoveTo = group1Proxy.onMoveFeedsTo,

app/src/main/java/com/skyd/anivu/ui/component/lazyverticalgrid/adapter/proxy/Feed1Proxy.kt

@@ -6,13 +6,14 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Delete
 import androidx.compose.material.icons.outlined.Edit
@@ -29,6 +30,8 @@ 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.RectangleShape
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -43,19 +46,32 @@ import com.skyd.anivu.ui.local.LocalNavController
 
 class Feed1Proxy(
     private val visible: (groupId: String) -> Boolean = { true },
+    private val isEnded: (index: Int) -> Boolean = { false },
+    private val useCardLayout: () -> Boolean = { false },
     private val onRemove: ((FeedBean) -> Unit)? = null,
     private val onEdit: ((FeedBean) -> Unit)? = null,
 ) : LazyGridAdapter.Proxy<FeedViewBean>() {
     @Composable
     override fun Draw(index: Int, data: FeedViewBean) {
-        Feed1Item(data = data, visible = visible, onRemove = onRemove, onEdit = onEdit)
+        Feed1Item(
+            index = index,
+            data = data,
+            visible = visible,
+            isEnded = isEnded,
+            useCardLayout = useCardLayout,
+            onRemove = onRemove,
+            onEdit = onEdit,
+        )
     }
 }
 
 @Composable
 fun Feed1Item(
+    index: Int,
     data: FeedViewBean,
     visible: (groupId: String) -> Boolean,
+    useCardLayout: () -> Boolean,
+    isEnded: (index: Int) -> Boolean,
     onRemove: ((FeedBean) -> Unit)? = null,
     onEdit: ((FeedBean) -> Unit)? = null,
 ) {
@@ -68,8 +84,19 @@ fun Feed1Item(
         enter = fadeIn() + expandVertically(),
         exit = fadeOut() + shrinkVertically(),
     ) {
-        Column(
+        val isEnd = isEnded(index)
+        Row(
             modifier = Modifier
+                .padding(horizontal = if (useCardLayout()) 16.dp else 0.dp)
+                .clip(
+                    if (useCardLayout() && isEnd) {
+                        RoundedCornerShape(0.dp, 0.dp, SHAPE_CORNER_DP, SHAPE_CORNER_DP)
+                    } else RectangleShape
+                )
+                .run {
+                    if (useCardLayout()) background(color = MaterialTheme.colorScheme.surfaceContainer)
+                    else this
+                }
                 .combinedClickable(
                     onLongClick = if (onRemove != null && onEdit != null) {
                         { expandMenu = true }
@@ -80,75 +107,75 @@ fun Feed1Item(
                         })
                     },
                 )
-                .padding(horizontal = 16.dp, vertical = 12.dp)
+                .padding(horizontal = if (useCardLayout()) 20.dp else 16.dp, vertical = 10.dp)
+                .padding(bottom = if (useCardLayout() && isEnd) 6.dp else 0.dp)
         ) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                FeedIcon(modifier = Modifier.padding(3.dp), data = feed, size = 24.dp)
-                val title = rememberSaveable(feed.title, feed.nickname) {
-                    feed.nickname.orEmpty().ifBlank { feed.title?.readable().orEmpty() }
+            FeedIcon(modifier = Modifier.padding(vertical = 3.dp), data = feed, size = 36.dp)
+            Spacer(modifier = Modifier.width(12.dp))
+            Column {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    val title = rememberSaveable(feed.title, feed.nickname) {
+                        feed.nickname.orEmpty().ifBlank { feed.title?.readable().orEmpty() }
+                    }
+                    Text(
+                        modifier = Modifier.weight(1f),
+                        text = title,
+                        style = MaterialTheme.typography.titleMedium,
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                    val feedCount = data.articleCount
+                    if (feedCount > 0) {
+                        Spacer(modifier = Modifier.width(8.dp))
+                        Badge(
+                            containerColor = MaterialTheme.colorScheme.surfaceContainerHighest,
+                            contentColor = MaterialTheme.colorScheme.outline,
+                            content = {
+                                Text(
+                                    text = feedCount.toString(),
+                                    style = MaterialTheme.typography.labelSmall
+                                )
+                            },
+                        )
+                    }
                 }
-                Spacer(modifier = Modifier.width(8.dp))
-                Text(
-                    modifier = Modifier.weight(1f),
-                    text = title,
-                    style = MaterialTheme.typography.titleLarge,
-                    maxLines = 2,
-                    overflow = TextOverflow.Ellipsis,
-                )
-                val feedCount = data.articleCount
-                if (feedCount > 0) {
-                    Spacer(modifier = Modifier.width(10.dp))
-                    Badge(
-                        containerColor = MaterialTheme.colorScheme.surfaceContainer,
-                        contentColor = MaterialTheme.colorScheme.outline,
-                        content = {
-                            Text(
-                                text = feedCount.toString(),
-                                style = MaterialTheme.typography.labelSmall
-                            )
+                val description =
+                    rememberSaveable(feed.description) { feed.description?.readable().orEmpty() }
+                if (description.isNotBlank()) {
+                    Text(
+                        text = description,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        maxLines = 3,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+                DropdownMenu(
+                    expanded = expandMenu,
+                    onDismissRequest = { expandMenu = false },
+                ) {
+                    DropdownMenuItem(
+                        text = { Text(text = stringResource(id = R.string.remove)) },
+                        leadingIcon = {
+                            Icon(imageVector = Icons.Outlined.Delete, contentDescription = null)
+                        },
+                        onClick = {
+                            onRemove?.invoke(feed)
+                            expandMenu = false
+                        },
+                    )
+                    DropdownMenuItem(
+                        text = { Text(text = stringResource(id = R.string.edit)) },
+                        leadingIcon = {
+                            Icon(imageVector = Icons.Outlined.Edit, contentDescription = null)
+                        },
+                        onClick = {
+                            onEdit?.invoke(feed)
+                            expandMenu = false
                         },
                     )
                 }
             }
-            Spacer(modifier = Modifier.height(6.dp))
-            val description =
-                rememberSaveable(feed.description) { feed.description?.readable().orEmpty() }
-            if (description.isNotBlank()) {
-                Spacer(modifier = Modifier.padding(top = 2.dp))
-                Text(
-                    text = description,
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    maxLines = 4,
-                    overflow = TextOverflow.Ellipsis,
-                )
-            }
-
-            DropdownMenu(
-                expanded = expandMenu,
-                onDismissRequest = { expandMenu = false },
-            ) {
-                DropdownMenuItem(
-                    text = { Text(text = stringResource(id = R.string.remove)) },
-                    leadingIcon = {
-                        Icon(imageVector = Icons.Outlined.Delete, contentDescription = null)
-                    },
-                    onClick = {
-                        onRemove?.invoke(feed)
-                        expandMenu = false
-                    },
-                )
-                DropdownMenuItem(
-                    text = { Text(text = stringResource(id = R.string.edit)) },
-                    leadingIcon = {
-                        Icon(imageVector = Icons.Outlined.Edit, contentDescription = null)
-                    },
-                    onClick = {
-                        onEdit?.invoke(feed)
-                        expandMenu = false
-                    },
-                )
-            }
         }
     }
 }

app/src/main/java/com/skyd/anivu/ui/component/lazyverticalgrid/adapter/proxy/Group1Proxy.kt

@@ -1,12 +1,14 @@
 package com.skyd.anivu.ui.component.lazyverticalgrid.adapter.proxy
 
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Delete
-import androidx.compose.material.icons.outlined.KeyboardArrowDown
 import androidx.compose.material.icons.outlined.KeyboardArrowUp
 import androidx.compose.material.icons.outlined.MoveUp
 import androidx.compose.material3.DropdownMenu
@@ -22,7 +24,9 @@ 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.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.skyd.anivu.R
 import com.skyd.anivu.model.bean.GroupBean
@@ -33,28 +37,35 @@ import com.skyd.anivu.ui.component.lazyverticalgrid.adapter.LazyGridAdapter
 open class Group1Proxy(
     val isExpand: (GroupBean) -> Boolean = { false },
     val onExpandChange: (GroupBean, Boolean) -> Unit = { _, _ -> },
+    val isEmpty: (index: Int) -> Boolean,
     val onShowAllArticles: (GroupBean) -> Unit = { },
     val onDelete: ((GroupBean) -> Unit)? = null,
     val onMoveFeedsTo: ((from: GroupBean) -> Unit)? = null,
 ) : LazyGridAdapter.Proxy<GroupBean>() {
     @Composable
     override fun Draw(index: Int, data: GroupBean) {
         Group1Item(
+            index = index,
             data = data,
             initExpand = isExpand,
             onExpandChange = onExpandChange,
+            isEmpty = isEmpty,
             onShowAllArticles = onShowAllArticles,
             onDelete = onDelete,
             onFeedsMoveTo = onMoveFeedsTo,
         )
     }
 }
 
+val SHAPE_CORNER_DP = 26.dp
+
 @Composable
 fun Group1Item(
+    index: Int,
     data: GroupBean,
     initExpand: (GroupBean) -> Boolean = { false },
     onExpandChange: (GroupBean, Boolean) -> Unit,
+    isEmpty: (index: Int) -> Boolean,
     onShowAllArticles: (GroupBean) -> Unit,
     onDelete: ((GroupBean) -> Unit)? = null,
     onFeedsMoveTo: ((GroupBean) -> Unit)? = null,
@@ -63,29 +74,51 @@ fun Group1Item(
     var expandMenu by rememberSaveable { mutableStateOf(false) }
     var openDeleteWarningDialog by rememberSaveable { mutableStateOf(false) }
 
+    val backgroundShapeCorner: Dp by animateDpAsState(
+        targetValue = if (expand && !isEmpty(index)) 0.dp else SHAPE_CORNER_DP,
+        label = "background shape corner",
+    )
+
     Row(
         modifier = Modifier
-            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .padding(horizontal = 16.dp)
+            .padding(top = 16.dp)
+            .clip(
+                RoundedCornerShape(
+                    SHAPE_CORNER_DP,
+                    SHAPE_CORNER_DP,
+                    backgroundShapeCorner,
+                    backgroundShapeCorner,
+                )
+            )
+            .background(color = MaterialTheme.colorScheme.surfaceContainer)
             .combinedClickable(
                 onLongClick = { expandMenu = true },
                 onClick = { onShowAllArticles(data) },
             )
-            .padding(start = 16.dp)
+            .padding(start = 20.dp, end = 8.dp)
             .padding(vertical = 2.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Text(
             modifier = Modifier.weight(1f),
             text = data.name,
-            style = MaterialTheme.typography.titleLarge,
+            style = MaterialTheme.typography.titleMedium,
         )
+
+        val expandIconRotate by animateFloatAsState(
+            targetValue = if (expand) 0f else 180f,
+            label = "expand icon rotate",
+        )
+
         AniVuIconButton(
             onClick = {
                 expand = !expand
                 onExpandChange(data, expand)
             },
-            imageVector = if (expand) Icons.Outlined.KeyboardArrowUp else Icons.Outlined.KeyboardArrowDown,
+            imageVector = Icons.Outlined.KeyboardArrowUp,
             contentDescription = null,
+            rotate = expandIconRotate,
         )
 
         DropdownMenu(