@ -20,15 +20,18 @@ import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Arrangement.Absolute.spacedBy
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Row Sco pe
import androidx.compose.foundation.layout.Spac er
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Composable
@ -36,12 +39,15 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.roomlist.impl.model.DisplayType
import io.element.android.features.roomlist.impl.model.InviteSender
import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider
import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider
import io.element.android.libraries.core.extensions.orEmpty
import io.element.android.libraries.core.extensions.orEmpty
@ -49,13 +55,17 @@ import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAto
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.ButtonSize
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.OutlinedButton
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.roomListRoomMessage
import io.element.android.libraries.designsystem.theme.roomListRoomMessage
import io.element.android.libraries.designsystem.theme.roomListRoomMessageDate
import io.element.android.libraries.designsystem.theme.roomListRoomMessageDate
import io.element.android.libraries.designsystem.theme.roomListRoomName
import io.element.android.libraries.designsystem.theme.roomListRoomName
import io.element.android.libraries.designsystem.theme.unreadIndicator
import io.element.android.libraries.designsystem.theme.unreadIndicator
import io.element.android.libraries.matrix.api.room.RoomNotificationMode
import io.element.android.libraries.matrix.api.room.RoomNotificationMode
import io.element.android.libraries.ui.strings.CommonStrings
internal val minHeight = 84. dp
internal val minHeight = 84. dp
@ -66,27 +76,53 @@ internal fun RoomSummaryRow(
onLongClick : ( RoomListRoomSummary ) -> Unit ,
onLongClick : ( RoomListRoomSummary ) -> Unit ,
modifier : Modifier = Modifier ,
modifier : Modifier = Modifier ,
) {
) {
if ( room . isPlaceholder ) {
when ( room . type ) {
RoomSummaryPlaceholderRow (
DisplayType . PLACEHOLDER -> {
modifier = modifier ,
RoomSummaryPlaceholderRow ( modifier = modifier )
)
}
} else {
DisplayType . INVITE -> {
RoomSummaryRealRow (
RoomSummaryScaffoldRow (
room = room ,
room = room ,
onClick = onClick ,
onClick = onClick ,
onLongClick = onLongClick ,
onLongClick = onLongClick ,
modifier = modifier
modifier = modifier
)
) {
InviteNameAndIndicatorRow ( name = room . name )
InviteSubtitle ( isDirect = room . isDirect , inviteSender = room . inviteSender , canonicalAlias = room . canonicalAlias )
if ( ! room . isDirect && room . inviteSender != null ) {
Spacer ( modifier = Modifier . height ( 4. dp ) )
InviteSenderRow ( sender = room . inviteSender )
}
Spacer ( modifier = Modifier . height ( 12. dp ) )
InviteButtonsRow ( onAcceptClicked = { } , onDeclineClicked = { } )
}
}
DisplayType . ROOM -> {
RoomSummaryScaffoldRow (
room = room ,
onClick = onClick ,
onLongClick = onLongClick ,
modifier = modifier
) {
NameAndTimestampRow (
name = room . name ,
timestamp = room . timestamp ,
isHighlighted = room . isHighlighted
)
LastMessageAndIndicatorRow ( room = room )
}
}
}
}
}
}
@OptIn ( ExperimentalFoundationApi :: class )
@OptIn ( ExperimentalFoundationApi :: class )
@Composable
@Composable
private fun RoomSummaryRealRow (
private fun RoomSummaryScaffold Row (
room : RoomListRoomSummary ,
room : RoomListRoomSummary ,
onClick : ( RoomListRoomSummary ) -> Unit ,
onClick : ( RoomListRoomSummary ) -> Unit ,
onLongClick : ( RoomListRoomSummary ) -> Unit ,
onLongClick : ( RoomListRoomSummary ) -> Unit ,
modifier : Modifier = Modifier ,
modifier : Modifier = Modifier ,
content : @Composable ColumnScope . ( ) -> Unit
) {
) {
val clickModifier = Modifier . combinedClickable (
val clickModifier = Modifier . combinedClickable (
onClick = { onClick ( room ) } ,
onClick = { onClick ( room ) } ,
@ -97,97 +133,189 @@ private fun RoomSummaryRealRow(
Row (
Row (
modifier = modifier
modifier = modifier
. fillMaxWidth ( )
. fillMaxWidth ( )
. heightIn ( min = minHeight )
. heightIn ( min = minHeight )
. then ( clickModifier )
. then ( clickModifier )
. fillMaxWidth ( )
. padding ( horizontal = 16. dp , vertical = 11. dp )
. padding ( horizontal = 16. dp , vertical = 11. dp )
. height ( IntrinsicSize . Min ) ,
. height ( IntrinsicSize . Min ) ,
) {
) {
Avatar (
Avatar ( room . avatarData )
room
Spacer ( modifier = Modifier . width ( 16. dp ) )
. avatarData ,
modifier = Modifier
. align ( Alignment . CenterVertically )
)
Column (
Column (
modifier = Modifier
modifier = Modifier . fillMaxWidth ( ) ,
. fillMaxWidth ( )
content = content ,
. padding ( start = 16. dp )
)
}
}
@Composable
private fun NameAndTimestampRow (
name : String ,
timestamp : String ? ,
isHighlighted : Boolean ,
modifier : Modifier = Modifier
) {
Row (
modifier = modifier . fillMaxWidth ( ) ,
horizontalArrangement = spacedBy ( 16. dp )
) {
// Name
Text (
modifier = Modifier . weight ( 1f ) ,
style = ElementTheme . typography . fontBodyLgMedium ,
text = name ,
color = MaterialTheme . roomListRoomName ( ) ,
maxLines = 1 ,
overflow = TextOverflow . Ellipsis
)
// Timestamp
Text (
text = timestamp ?: " " ,
style = ElementTheme . typography . fontBodySmMedium ,
color = if ( isHighlighted ) {
ElementTheme . colors . unreadIndicator
} else {
MaterialTheme . roomListRoomMessageDate ( )
} ,
)
}
}
@Composable
private fun InviteSubtitle (
isDirect : Boolean ,
inviteSender : InviteSender ? ,
canonicalAlias : String ? ,
modifier : Modifier = Modifier
) {
val subtitle = if ( isDirect ) {
inviteSender ?. userId ?. value
} else {
canonicalAlias
}
if ( subtitle != null ) {
Text (
text = subtitle ,
maxLines = 1 ,
overflow = TextOverflow . Ellipsis ,
style = ElementTheme . typography . fontBodyMdRegular ,
color = MaterialTheme . roomListRoomMessage ( ) ,
modifier = modifier ,
)
}
}
@Composable
private fun LastMessageAndIndicatorRow (
room : RoomListRoomSummary ,
modifier : Modifier = Modifier ,
) {
Row (
modifier = modifier . fillMaxWidth ( ) ,
horizontalArrangement = spacedBy ( 28. dp )
) {
// Last Message
val attributedLastMessage = room . lastMessage as ? AnnotatedString
?: AnnotatedString ( room . lastMessage . orEmpty ( ) . toString ( ) )
Text (
modifier = Modifier . weight ( 1f ) ,
text = attributedLastMessage ,
color = MaterialTheme . roomListRoomMessage ( ) ,
style = ElementTheme . typography . fontBodyMdRegular ,
minLines = 2 ,
maxLines = 2 ,
overflow = TextOverflow . Ellipsis
)
// Call and unread
Row (
modifier = Modifier . height ( 16. dp ) ,
horizontalArrangement = Arrangement . spacedBy ( 8. dp ) ,
verticalAlignment = Alignment . CenterVertically ,
) {
) {
Row ( modifier = Modifier . fillMaxWidth ( ) ) {
val tint = if ( room . isHighlighted ) ElementTheme . colors . unreadIndicator else ElementTheme . colors . iconQuaternary
NameAndTimestampRow ( room = room )
if ( room . hasRoomCall ) {
OnGoingCallIcon (
color = tint ,
)
}
}
Row ( modifier = Modifier . fillMaxWidth ( ) ) {
if ( room . userDefinedNotificationMode == RoomNotificationMode . MUTE ) {
LastMessageAndIndicatorRow ( room = room )
NotificationOffIndicatorAtom ( )
} else if ( room . numberOfUnreadMentions > 0 ) {
MentionIndicatorAtom ( )
}
if ( room . hasNewContent ) {
UnreadIndicatorAtom (
color = tint
)
}
}
}
}
}
}
}
}
@Composable
@Composable
private fun RowScope . NameAndTimestampRow ( room : RoomListRoomSummary ) {
private fun InviteNameAndIndicatorRow (
// Name
name : String ,
Text (
modifier : Modifier = Modifier ,
modifier = Modifier
) {
. weight ( 1f )
Row (
. padding ( end = 16. dp ) ,
modifier = modifier . fillMaxWidth ( ) ,
style = ElementTheme . typography . fontBodyLgMedium ,
horizontalArrangement = spacedBy ( 16. dp ) ,
text = room . name ,
verticalAlignment = Alignment . CenterVertically ,
color = MaterialTheme . roomListRoomName ( ) ,
) {
maxLines = 1 ,
Text (
overflow = TextOverflow . Ellipsis
modifier = Modifier . weight ( 1f ) ,
)
style = ElementTheme . typography . fontBodyLgMedium ,
// Timestamp
text = name ,
Text (
color = MaterialTheme . roomListRoomName ( ) ,
text = room . timestamp ?: " " ,
maxLines = 1 ,
style = ElementTheme . typography . fontBodySmMedium ,
overflow = TextOverflow . Ellipsis
color = if ( room . isHighlighted ) {
)
ElementTheme . colors . unreadIndicator
UnreadIndicatorAtom (
} else {
color = ElementTheme . colors . unreadIndicator
MaterialTheme . roomListRoomMessageDate ( )
)
} ,
}
)
}
}
@Composable
@Composable
private fun RowScope . LastMessageAndIndicatorRow ( room : RoomListRoomSummary ) {
private fun InviteSenderRow (
// Last Message
sender : InviteSender ,
val attributedLastMessage = room . lastMessage as ? AnnotatedString
modifier : Modifier = Modifier
?: AnnotatedString ( room . lastMessage . orEmpty ( ) . toString ( ) )
) {
Text (
modifier = Modifier
. weight ( 1f )
. padding ( end = 28. dp ) ,
text = attributedLastMessage ,
color = MaterialTheme . roomListRoomMessage ( ) ,
style = ElementTheme . typography . fontBodyMdRegular ,
minLines = 2 ,
maxLines = 2 ,
overflow = TextOverflow . Ellipsis
)
// Call and unread
Row (
Row (
modifier = Modifier . height ( 16. dp ) ,
horizontalArrangement = Arrangement . spacedBy ( 4. dp ) ,
horizontalArrangement = Arrangement . spacedBy ( 8. dp ) ,
modifier = modifier . fillMaxWidth ( ) ,
verticalAlignment = Alignment . CenterVertically ,
) {
) {
val tint = if ( room . isHighlighted ) ElementTheme . colors . unreadIndicator else ElementTheme . colors . iconQuaternary
Avatar ( avatarData = sender . avatarData )
if ( room . hasRoomCall ) {
Text (
OnGoingCallIcon (
text = sender . annotatedString ( ) ,
color = tint ,
style = ElementTheme . typography . fontBodyMdRegular ,
)
color = MaterialTheme . colorScheme . secondary ,
}
)
if ( room . userDefinedNotificationMode == RoomNotificationMode . MUTE ) {
}
NotificationOffIndicatorAtom ( )
}
} else if ( room . numberOfUnreadMentions > 0 ) {
MentionIndicatorAtom ( )
@Composable
}
private fun InviteButtonsRow (
if ( room . hasNewContent ) {
onAcceptClicked : ( ) -> Unit ,
UnreadIndicatorAtom (
onDeclineClicked : ( ) -> Unit ,
color = tint
modifier : Modifier = Modifier
)
) {
}
Row (
modifier = modifier . padding ( ) ,
horizontalArrangement = spacedBy ( 12. dp )
) {
OutlinedButton (
text = stringResource ( CommonStrings . action _decline ) ,
onClick = onDeclineClicked ,
size = ButtonSize . Medium ,
modifier = Modifier . weight ( 1f ) ,
)
Button (
text = stringResource ( CommonStrings . action _accept ) ,
onClick = onAcceptClicked ,
size = ButtonSize . Medium ,
modifier = Modifier . weight ( 1f ) ,
)
}
}
}
}