diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index 4e01323d1..93b6aab92 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -34,7 +34,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 +50,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 +218,6 @@ private fun LazyListScope.conversationSectionHeader( .fillMaxWidth() .testTag(key) ) { - HorizontalDivider() - Row( modifier = Modifier .fillMaxWidth() @@ -238,7 +236,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 +247,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.primaryContainer ) } } - - HorizontalDivider() } } } @@ -331,6 +328,7 @@ private fun ConversationListItem( channelName.removeSectionPrefix() } } + is GroupChat, is OneToOneChat -> { val humanReadableTitle = conversation.humanReadableName if (showPrefix) { @@ -339,37 +337,46 @@ 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), 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 +477,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( diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt index 0b7c2c300..d0a7bbf8d 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt +++ b/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 diff --git a/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt b/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt index a4396300b..5783fb663 100644 --- a/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt +++ b/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt @@ -1,5 +1,9 @@ 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 @@ -7,9 +11,13 @@ 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) + ) +} \ No newline at end of file