Design: iterate on Room List item

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt

@@ -24,8 +24,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -37,7 +36,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Rect
@@ -70,7 +68,7 @@ import io.element.android.libraries.designsystem.theme.roomListRoomMessageDate
 import io.element.android.libraries.designsystem.theme.roomListRoomName
 import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
 
-private val minHeight = 72.dp
+private val minHeight = 84.dp
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -81,108 +79,116 @@ internal fun RoomSummaryRow(
     modifier: Modifier = Modifier,
 ) {
     val clickModifier = if (room.isPlaceholder) {
-        modifier
+        Modifier
     } else {
-        modifier.combinedClickable(
+        Modifier.combinedClickable(
             onClick = { onClick(room) },
             onLongClick = { onLongClick(room) },
             indication = rememberRipple(),
             interactionSource = remember { MutableInteractionSource() }
         )
     }
-    Box(
+
+    Row(
         modifier = modifier
             .fillMaxWidth()
             .heightIn(min = minHeight)
             .then(clickModifier)
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 11.dp)
+            .height(IntrinsicSize.Min),
     ) {
-        DefaultRoomSummaryRow(room = room)
+        Avatar(
+            room
+                .avatarData,
+            modifier = Modifier
+                .align(Alignment.CenterVertically)
+                .placeholder(
+                    visible = room.isPlaceholder,
+                    shape = CircleShape,
+                    color = ElementTheme.colors.roomListPlaceHolder(),
+                )
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 16.dp)
+        ) {
+            Row(modifier = Modifier.fillMaxWidth()) {
+                NameAndTimestampRow(room = room)
+            }
+            Row(modifier = Modifier.fillMaxWidth()) {
+                LastMessageAndIndicatorRow(room = room)
+            }
+        }
     }
 }
 
 @Composable
-internal fun DefaultRoomSummaryRow(
-    room: RoomListRoomSummary,
-) {
-    Row(
+private fun RowScope.NameAndTimestampRow(room: RoomListRoomSummary) {
+    // Name
+    Text(
         modifier = Modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp)
-            .defaultMinSize(minHeight = 84.dp)
-            .height(IntrinsicSize.Min),
-        verticalAlignment = CenterVertically
-    ) {
-        Avatar(
-            room.avatarData,
-            modifier = Modifier.placeholder(
+            .weight(1f)
+            .padding(end = 16.dp)
+            .placeholder(
                 visible = room.isPlaceholder,
-                shape = CircleShape,
+                shape = TextPlaceholderShape,
                 color = ElementTheme.colors.roomListPlaceHolder(),
-            )
-        )
-        Column(
-            modifier = Modifier
-                .padding(start = 12.dp, end = 4.dp, top = 12.dp, bottom = 12.dp)
-                .alignByBaseline()
-                .weight(1f)
-        ) {
-            // Name
-            Text(
-                modifier = Modifier.placeholder(
-                    visible = room.isPlaceholder,
-                    shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder(),
-                ),
-                fontSize = 16.sp,
-                fontWeight = FontWeight.SemiBold,
-                text = room.name,
-                color = MaterialTheme.roomListRoomName(),
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis
-            )
-            // Last Message
-            val attributedLastMessage = (room.lastMessage as? AnnotatedString)
-                ?: AnnotatedString(room.lastMessage.orEmpty().toString())
-            Text(
-                modifier = Modifier.placeholder(
-                    visible = room.isPlaceholder,
-                    shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder(),
-                ),
-                text = attributedLastMessage,
-                color = MaterialTheme.roomListRoomMessage(),
-                fontSize = 14.sp,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis
-            )
-        }
-        // Timestamp and Unread
-        Column(
-            modifier = Modifier
-                .alignByBaseline(),
-        ) {
-            Text(
-                modifier = Modifier.placeholder(
-                    visible = room.isPlaceholder,
-                    shape = TextPlaceholderShape,
-                    color = ElementTheme.colors.roomListPlaceHolder(),
-                ),
-                fontSize = 12.sp,
-                text = room.timestamp ?: "",
-                color = MaterialTheme.roomListRoomMessageDate(),
-            )
-            Spacer(Modifier.size(4.dp))
-            val unreadIndicatorColor =
-                if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
-            Box(
-                modifier = Modifier
-                    .size(12.dp)
-                    .clip(CircleShape)
-                    .background(unreadIndicatorColor)
-                    .align(Alignment.End),
-            )
-        }
-    }
+            ),
+        fontSize = 16.sp,
+        fontWeight = FontWeight.SemiBold,
+        style = MaterialTheme.typography.bodyMedium,
+        text = room.name,
+        color = MaterialTheme.roomListRoomName(),
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
+    )
+    // Timestamp
+    Text(
+        modifier = Modifier
+            .placeholder(
+                visible = room.isPlaceholder,
+                shape = TextPlaceholderShape,
+                color = ElementTheme.colors.roomListPlaceHolder(),
+            ),
+        fontSize = 12.sp,
+        text = room.timestamp ?: "",
+        color = MaterialTheme.roomListRoomMessageDate(),
+    )
+}
+
+@Composable
+private fun RowScope.LastMessageAndIndicatorRow(room: RoomListRoomSummary) {
+    // Last Message
+    val attributedLastMessage = (room.lastMessage as? AnnotatedString)
+        ?: AnnotatedString(room.lastMessage.orEmpty().toString())
+    Text(
+        modifier = Modifier
+            .weight(1f)
+            .padding(end = 28.dp)
+            .placeholder(
+                visible = room.isPlaceholder,
+                shape = TextPlaceholderShape,
+                color = ElementTheme.colors.roomListPlaceHolder(),
+            ),
+        text = attributedLastMessage,
+        color = MaterialTheme.roomListRoomMessage(),
+        fontSize = 14.sp,
+        style = MaterialTheme.typography.bodySmall,
+        maxLines = 2,
+        overflow = TextOverflow.Ellipsis
+    )
+    // Unread
+    val unreadIndicatorColor =
+        if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
+    Box(
+        modifier = Modifier
+            .padding(top = 3.dp)
+            .size(12.dp)
+            .clip(CircleShape)
+            .background(unreadIndicatorColor),
+    )
 }
 
 val TextPlaceholderShape = PercentRectangleSizeShape(0.5f)

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/model/RoomListRoomSummaryProvider.kt

@@ -29,7 +29,15 @@ open class RoomListRoomSummaryProvider : PreviewParameterProvider<RoomListRoomSu
             aRoomListRoomSummary().copy(hasUnread = true),
             aRoomListRoomSummary().copy(timestamp = "88:88"),
             aRoomListRoomSummary().copy(timestamp = "88:88", hasUnread = true),
-            aRoomListRoomSummary().copy(isPlaceholder = true),
+            aRoomListRoomSummary().copy(isPlaceholder = true, timestamp = "88:88"),
+            aRoomListRoomSummary().copy(
+                name = "A very long room name that should be truncated",
+                lastMessage = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt" +
+                    " ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea com" +
+                    "modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+                timestamp = "yesterday",
+                hasUnread = true,
+            ),
         )
 }