dm-4

app/src/main/java/com/example/login_v3/home/Message/UI/Message.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -25,6 +26,7 @@ import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Create
 import androidx.compose.material.icons.filled.Person
 import androidx.compose.material.icons.filled.QrCode
+import androidx.compose.material3.Badge
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Divider
@@ -251,6 +253,8 @@ fun Loaded_Tg_Message(
             modifier = Modifier
                 .fillMaxSize()
         ) {
+            Spacer(modifier = Modifier.height(20.dp))
+
             if (rooms.isEmpty()) {
                 // 顯示空狀態或 Loading (這部分可根據需求擴充)
                 Box(
@@ -289,82 +293,96 @@ fun RoomItem(
     room: ChatRoom,
     onClick: (String) -> Unit
 ) {
-    Row(
+    Card(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable { onClick(room.roomId) }
+            .padding(horizontal = 12.dp, vertical = 6.dp) // 增加外邊距，讓 Card 之間有呼吸感
-            .padding(horizontal = 16.dp, vertical = 12.dp),
+            .clickable { onClick(room.roomId) },
-        verticalAlignment = Alignment.CenterVertically
+        shape = RoundedCornerShape(16.dp), // 較大的圓角看起來更現代
-    ) {
+        colors = CardDefaults.cardColors(
-        // 1. 頭像處理
+            containerColor = Color.White.copy(alpha = 0.85f) // 半透明白色，透出後方的漸層背景
-        val imageUrl = room.roomIconUrl ?: room.partner?.fullContactAvatarUrl
+        ),
-        AsyncImage(
+        elevation = CardDefaults.cardElevation(
-            model = imageUrl,
+            defaultElevation = 0.dp // 增加輕微陰影
-            contentDescription = "Avatar",
-            contentScale = ContentScale.Crop,
-            modifier = Modifier
-                .size(50.dp)
-                .clip(CircleShape)
-                .background(Color.LightGray) // 載入前的底色
         )
-
+    ) {
-        Spacer(modifier = Modifier.width(12.dp))
+        Row(
-
+            modifier = Modifier
-        // 2. 中間內容：名稱與最後訊息
+                .fillMaxWidth()
-        Column(modifier = Modifier.weight(1f)) {
+                .background(Color.Transparent)
-            Text(
+                .padding(16.dp), // Card 內部的填充
-                // 使用 orEmpty() 先把 String? 轉成 String
+            verticalAlignment = Alignment.CenterVertically
-                text = room.roomName.orEmpty().ifEmpty {
+        ) {
-                    room.partner?.displayName ?: "Unknown"
+            // 1. 頭像
-                },
+            val imageUrl = room.roomIconUrl ?: room.partner?.fullContactAvatarUrl
-                style = MaterialTheme.typography.titleMedium,
+            AsyncImage(
-                fontWeight = FontWeight.Bold,
+                model = imageUrl,
-                maxLines = 1,
+                contentDescription = "Avatar",
-                overflow = TextOverflow.Ellipsis
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .size(56.dp) // 稍微加大一點
+                    .clip(CircleShape)
+                    .border(1.dp, Color.White, CircleShape) // 頭像加個細白邊
+                    .background(Color.LightGray)
             )
 
-            val lastMsgText = when {
+            Spacer(modifier = Modifier.width(16.dp))
-                room.lastMessage?.isDeleted == true -> "訊息已刪除"
+
-                room.lastMessage?.content != null -> room.lastMessage.content
+            // 2. 中間內容
-                room.lastMessage?.attachment != null -> "[檔案] ${room.lastMessage.attachment.filename}"
+            Column(modifier = Modifier.weight(1f)) {
-                else -> "尚未有訊息"
+                Text(
+                    text = room.roomName.orEmpty().ifEmpty {
+                        room.partner?.displayName ?: "Unknown"
+                    },
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold,
+                    color = Color(0xFF333333),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+
+                Spacer(modifier = Modifier.height(4.dp))
+
+                val lastMsgText = when {
+                    room.lastMessage?.isDeleted == true -> "訊息已刪除"
+                    room.lastMessage?.content != null -> room.lastMessage.content
+                    room.lastMessage?.attachment != null -> "[檔案] ${room.lastMessage.attachment.filename}"
+                    else -> "尚未有訊息"
+                }
+
+                Text(
+                    text = lastMsgText,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = Color.Gray,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
             }
 
-            Text(
+            // 3. 右側：時間與未讀計數
-                text = lastMsgText,
+            Column(
-                style = MaterialTheme.typography.bodyMedium,
+                horizontalAlignment = Alignment.End,
-                color = Color.Gray,
+                verticalArrangement = Arrangement.Center
-                maxLines = 1,
+            ) {
-                overflow = TextOverflow.Ellipsis
+                val time = room.lastMessage?.createdAt?.take(10) ?: ""
-            )
+                Text(
-        }
+                    text = time,
+                    style = MaterialTheme.typography.labelSmall,
+                    color = Color.Gray
+                )
 
-        // 3. 右側：時間與未讀計數
+                Spacer(modifier = Modifier.height(8.dp))
-        Column(horizontalAlignment = Alignment.End) {
-            // 這裡簡單截取時間字串，實際建議用 DateTimeFormatter 轉格式
-            val time = room.lastMessage?.createdAt?.take(10) ?: ""
-            Text(
-                text = time,
-                style = MaterialTheme.typography.labelSmall,
-                color = Color.Gray
-            )
 
-            Spacer(modifier = Modifier.height(4.dp))
+                if (room.unreadCount > 0) {
-
+                    Badge(
-            if (room.unreadCount > 0) {
+                        containerColor = Color(0xFFDA7029), // 使用你的主橘色
-                Box(
+                        contentColor = Color.White
-                    modifier = Modifier
+                    ) {
-                        .size(20.dp)
+                        Text(
-                        .clip(CircleShape)
+                            text = if (room.unreadCount > 99) "99+" else room.unreadCount.toString(),
-                        .background(MaterialTheme.colorScheme.primary),
+                            modifier = Modifier.padding(horizontal = 4.dp)
-                    contentAlignment = Alignment.Center
+                        )
-                ) {
+                    }
-                    Text(
-                        text = if (room.unreadCount > 99) "99+" else room.unreadCount.toString(),
-                        color = Color.White,
-                        fontSize = 10.sp,
-                        fontWeight = FontWeight.Bold
-                    )
                 }
             }
         }