Improvement: Adjust conversation overview alignments and styling

feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -34,7 +35,6 @@ import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
@@ -51,6 +51,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ConversationCollections
@@ -218,8 +219,6 @@ private fun LazyListScope.conversationSectionHeader(
                 .fillMaxWidth()
                 .testTag(key)
         ) {
-            HorizontalDivider()
-
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -238,7 +237,7 @@ private fun LazyListScope.conversationSectionHeader(
                             .weight(1f)
                             .padding(start = 8.dp),
                         text = stringResource(id = text),
-                        style = MaterialTheme.typography.titleSmall
+                        style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold)
                     )
                 }
 
@@ -249,12 +248,11 @@ private fun LazyListScope.conversationSectionHeader(
                     Icon(
                         imageVector = if (isExpanded) Icons.Default.ArrowDropDown else Icons.AutoMirrored.Filled.ArrowRight,
                         contentDescription = null,
-                        modifier = Modifier.size(32.dp)
+                        modifier = Modifier.size(32.dp),
+                        tint = MaterialTheme.colorScheme.primary
                     )
                 }
             }
-
-            HorizontalDivider()
         }
     }
 }
@@ -331,6 +329,7 @@ private fun ConversationListItem(
                 channelName.removeSectionPrefix()
             }
         }
+
         is GroupChat, is OneToOneChat -> {
             val humanReadableTitle = conversation.humanReadableName
             if (showPrefix) {
@@ -339,37 +338,47 @@ private fun ConversationListItem(
                 humanReadableTitle.removeSectionPrefix()
             }
         }
+
         else -> conversation.humanReadableName
     }
 
-    Box(modifier = modifier) {
+    Box(modifier = modifier.padding(horizontal = 16.dp)) {
         ListItem(
-            modifier = Modifier.clickable(onClick = onNavigateToConversation),
+            modifier = Modifier
+                .clickable(onClick = onNavigateToConversation)
+                .padding(start = 8.dp)
+                .height(48.dp),
             leadingContent = {
                 ConversationIcon(
                     conversation = conversation,
-                    clientId = clientId
+                    clientId = clientId,
+                    hasUnreadMessages = unreadMessagesCount > 0
                 )
             },
             headlineContent = {
-                Text(
-                    text = displayName,
-                    maxLines = 1,
-                    color = headlineColor
-                )
+                Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+                    Text(
+                        text = displayName,
+                        maxLines = 1,
+                        color = headlineColor,
+                        style = MaterialTheme.typography.bodyLarge.copy(
+                            fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal
+                        )
+                    )
+                }
             },
             trailingContent = {
                 UnreadMessages(unreadMessagesCount = unreadMessagesCount)
             }
         )
 
-        IconButton(
-            modifier = Modifier
-                .align(Alignment.CenterEnd)
-                .testTag(tagForConversationOptions(itemBaseTag)),
-            onClick = { isContextDialogShown = true }
-        ) {
-            Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null)
+        Box(modifier = Modifier.align(Alignment.CenterEnd)) {
+            IconButton(
+                modifier = Modifier.testTag(tagForConversationOptions(itemBaseTag)),
+                onClick = { isContextDialogShown = true }
+            ) {
+                Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null)
+            }
         }
 
         ConversationListItemDropdownMenu(
@@ -470,7 +479,7 @@ private fun UnreadMessages(modifier: Modifier = Modifier, unreadMessagesCount: L
     if (unreadMessagesCount > 0) {
         Box(
             modifier = modifier
-                .padding(end = 24.dp)
+                .padding(end = 32.dp)
                 .size(24.dp)
                 .aspectRatio(1f)
                 .background(

feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt

@@ -28,7 +28,6 @@ import androidx.compose.material.icons.filled.WifiOff
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -151,8 +150,6 @@ fun ConversationOverviewBody(
                     onToggleHidden = viewModel::markConversationAsHidden,
                     onToggleMuted = viewModel::markConversationAsMuted,
                     trailingContent = {
-                        item { HorizontalDivider() }
-
                         item(key = KEY_BUTTON_SHOW_COC) {
                             Box(
                                 modifier = Modifier

feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt

@@ -1,15 +1,23 @@
 package de.tum.informatics.www1.artemis.native_app.feature.metis.shared.ui
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Archive
 import androidx.compose.material.icons.filled.Campaign
 import androidx.compose.material.icons.filled.Groups2
 import androidx.compose.material.icons.filled.Lock
 import androidx.compose.material.icons.filled.Numbers
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
 import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.ChannelChat
 import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.Conversation
 import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.GroupChat
@@ -23,16 +31,24 @@ fun ConversationIcon(
     modifier: Modifier = Modifier,
     conversation: Conversation,
     clientId: Long,
+    hasUnreadMessages: Boolean = false,
     showDialogOnOneToOneChatClick: Boolean = false
 ) {
-    when(conversation) {
-        is ChannelChat -> ChannelChatIcon(modifier, conversation)
-        is GroupChat -> GroupChatIcon(modifier)
-        is OneToOneChat -> OneToOneChatIcon(modifier, conversation, clientId, showDialogOnOneToOneChatClick)
+    Box {
+        when (conversation) {
+            is ChannelChat -> ChannelChatIcon(modifier, conversation)
+            is GroupChat -> GroupChatIcon(modifier)
+            is OneToOneChat -> OneToOneChatIcon(modifier, conversation, clientId, showDialogOnOneToOneChatClick)
+        }
+
+        if (hasUnreadMessages) {
+            UnreadMessagesIndicator(
+                modifier = Modifier.align(Alignment.TopEnd)
+            )
+        }
     }
 }
 
-
 @Composable
 fun ChannelChatIcon(
     modifier: Modifier = Modifier,
@@ -87,3 +103,13 @@ fun OneToOneChatIcon(
         )
     }
 }
+
+@Composable
+fun UnreadMessagesIndicator(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(8.dp)
+            .clip(CircleShape)
+            .background(MaterialTheme.colorScheme.primaryContainer)
+    )
+}