Merge branch 'develop' into feature/fga/room_list_api

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

@@ -36,12 +36,11 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.RoomId
-import io.element.android.libraries.ui.strings.R as StringR
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -86,13 +85,13 @@ private fun RoomListModalBottomSheetContent(
         )
         ListItem(
             headlineContent = {
-                Text(text = stringResource(id = StringR.string.common_settings))
+                Text(text = stringResource(id = CommonStrings.common_settings))
             },
             modifier = Modifier.clickable { onRoomSettingsClicked(contextMenu.roomId) },
             leadingContent = {
                 Icon(
                     imageVector = Icons.Outlined.Settings,
-                    contentDescription = stringResource(id = StringR.string.common_settings),
+                    contentDescription = stringResource(id = CommonStrings.common_settings),
                     modifier = Modifier.size(20.dp),
                     tint = MaterialTheme.colorScheme.onSurface,
                 )
@@ -101,17 +100,17 @@ private fun RoomListModalBottomSheetContent(
         ListItem(
             headlineContent = {
                 Text(
-                    text = stringResource(id = StringR.string.action_leave_room),
-                    color = ElementTheme.colors.textActionCritical,
+                    text = stringResource(id = CommonStrings.action_leave_room),
+                    color = MaterialTheme.colorScheme.error,
                 )
             },
             modifier = Modifier.clickable { onLeaveRoomClicked(contextMenu.roomId) },
             leadingContent = {
                 Icon(
                     resourceId = VectorIcons.DoorOpen,
-                    contentDescription = stringResource(id = StringR.string.action_leave_room),
+                    contentDescription = stringResource(id = CommonStrings.action_leave_room),
                     modifier = Modifier.size(20.dp),
-                    tint = ElementTheme.colors.textActionCritical,
+                    tint = MaterialTheme.colorScheme.error,
                 )
             }
         )

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

@@ -16,8 +16,10 @@
 
 package io.element.android.features.roomlist.impl
 
+import android.app.Activity
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.plugin.Plugin
@@ -26,6 +28,8 @@ import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.roomlist.api.RoomListEntryPoint
+import io.element.android.features.roomlist.impl.components.RoomListMenuAction
+import io.element.android.libraries.deeplink.usecase.InviteFriendsUseCase
 import io.element.android.libraries.di.SessionScope
 import io.element.android.libraries.matrix.api.core.RoomId
 
@@ -33,7 +37,8 @@ import io.element.android.libraries.matrix.api.core.RoomId
 class RoomListNode @AssistedInject constructor(
     @Assisted buildContext: BuildContext,
     @Assisted plugins: List<Plugin>,
-    private val presenter:  RoomListPresenter,
+    private val presenter: RoomListPresenter,
+    private val inviteFriendsUseCase: InviteFriendsUseCase,
 ) : Node(buildContext, plugins = plugins) {
 
     private fun onRoomClicked(roomId: RoomId) {
@@ -60,9 +65,21 @@ class RoomListNode @AssistedInject constructor(
         plugins<RoomListEntryPoint.Callback>().forEach { it.onRoomSettingsClicked(roomId) }
     }
 
+    private fun onMenuActionClicked(activity: Activity, roomListMenuAction: RoomListMenuAction) {
+        when (roomListMenuAction) {
+            RoomListMenuAction.InviteFriends -> {
+                inviteFriendsUseCase.execute(activity)
+            }
+            RoomListMenuAction.ReportBug -> {
+                plugins<RoomListEntryPoint.Callback>().forEach { it.onReportBugClicked() }
+            }
+        }
+    }
+
     @Composable
     override fun View(modifier: Modifier) {
         val state = presenter.present()
+        val activity = LocalContext.current as Activity
         RoomListView(
             state = state,
             onRoomClicked = this::onRoomClicked,
@@ -71,6 +88,7 @@ class RoomListNode @AssistedInject constructor(
             onVerifyClicked = this::onSessionVerificationClicked,
             onInvitesClicked = this::onInvitesClicked,
             onRoomSettingsClicked = this::onRoomSettingsClicked,
+            onMenuActionClicked = { onMenuActionClicked(activity, it) },
             modifier = modifier,
         )
     }

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

@@ -37,6 +37,7 @@ import io.element.android.libraries.core.coroutine.parallelMap
 import io.element.android.libraries.core.extensions.orEmpty
 import io.element.android.libraries.dateformatter.api.LastMessageTimestampFormatter
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
 import io.element.android.libraries.designsystem.utils.collectSnackbarMessageAsState
 import io.element.android.libraries.eventformatter.api.RoomLastMessageFormatter
@@ -190,7 +191,8 @@ class RoomListPresenter @Inject constructor(
                     val avatarData = AvatarData(
                         id = roomSummary.identifier(),
                         name = roomSummary.details.name,
-                        url = roomSummary.details.avatarURLString
+                        url = roomSummary.details.avatarURLString,
+                        size = AvatarSize.RoomListItem,
                     )
                     val roomIdentifier = roomSummary.identifier()
                     RoomListRoomSummary(

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

@@ -21,20 +21,21 @@ import io.element.android.features.leaveroom.api.LeaveRoomState
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryPlaceholders
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.utils.SnackbarMessage
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.user.MatrixUser
+import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
-import io.element.android.libraries.ui.strings.R as StringR
 
 open class RoomListStateProvider : PreviewParameterProvider<RoomListState> {
     override val values: Sequence<RoomListState>
         get() = sequenceOf(
             aRoomListState(),
             aRoomListState().copy(displayVerificationPrompt = true),
-            aRoomListState().copy(snackbarMessage = SnackbarMessage(StringR.string.common_verification_complete)),
+            aRoomListState().copy(snackbarMessage = SnackbarMessage(CommonStrings.common_verification_complete)),
             aRoomListState().copy(hasNetworkConnection = false),
             aRoomListState().copy(invitesState = InvitesState.SeenInvites),
             aRoomListState().copy(invitesState = InvitesState.NewInvites),
@@ -68,7 +69,7 @@ internal fun aRoomListRoomSummaryList(): ImmutableList<RoomListRoomSummary> {
             hasUnread = true,
             timestamp = "14:18",
             lastMessage = "A very very very very long message which suites on two lines",
-            avatarData = AvatarData("!id", "R"),
+            avatarData = AvatarData("!id", "R", size = AvatarSize.RoomListItem),
             id = "!roomId:domain",
             roomId = RoomId("!roomId:domain")
         ),
@@ -77,10 +78,11 @@ internal fun aRoomListRoomSummaryList(): ImmutableList<RoomListRoomSummary> {
             hasUnread = false,
             timestamp = "14:16",
             lastMessage = "A short message",
-            avatarData = AvatarData("!id", "Z"),
+            avatarData = AvatarData("!id", "Z", size = AvatarSize.RoomListItem),
             id = "!roomId2:domain",
             roomId = RoomId("!roomId2:domain")
         ),
-        RoomListRoomSummaryPlaceholders.create("!roomId2:domain")
+        RoomListRoomSummaryPlaceholders.create("!roomId2:domain"),
+        RoomListRoomSummaryPlaceholders.create("!roomId3:domain"),
     )
 }

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

@@ -21,23 +21,17 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Snackbar
@@ -50,12 +44,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Velocity
@@ -63,28 +55,25 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.features.leaveroom.api.LeaveRoomView
 import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorView
+import io.element.android.features.roomlist.impl.components.RequestVerificationHeader
+import io.element.android.features.roomlist.impl.components.RoomListMenuAction
 import io.element.android.features.roomlist.impl.components.RoomListTopBar
 import io.element.android.features.roomlist.impl.components.RoomSummaryRow
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
-import io.element.android.features.roomlist.impl.search.RoomListSearchResultContent
 import io.element.android.features.roomlist.impl.search.RoomListSearchResultView
-import io.element.android.libraries.designsystem.ElementTextStyles
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
-import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.noFontPadding
-import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.designsystem.utils.rememberSnackbarHostState
 import io.element.android.libraries.matrix.api.core.RoomId
+import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.libraries.designsystem.R as DrawableR
-import io.element.android.libraries.ui.strings.R as StringR
 
 @Composable
 fun RoomListView(
@@ -95,6 +84,7 @@ fun RoomListView(
     onCreateRoomClicked: () -> Unit,
     onInvitesClicked: () -> Unit,
     onRoomSettingsClicked: (roomId: RoomId) -> Unit,
+    onMenuActionClicked: (RoomListMenuAction) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier) {
@@ -118,12 +108,13 @@ fun RoomListView(
 
             RoomListContent(
                 state = state,
+                onVerifyClicked = onVerifyClicked,
                 onRoomClicked = onRoomClicked,
                 onRoomLongClicked = { onRoomLongClicked(it) },
                 onOpenSettings = onSettingsClicked,
-                onVerifyClicked = onVerifyClicked,
                 onCreateRoomClicked = onCreateRoomClicked,
                 onInvitesClicked = onInvitesClicked,
+                onMenuActionClicked = onMenuActionClicked,
             )
             // This overlaid view will only be visible when state.displaySearchResults is true
             RoomListSearchResultView(
@@ -142,13 +133,14 @@ fun RoomListView(
 @Composable
 fun RoomListContent(
     state: RoomListState,
+    onVerifyClicked: () -> Unit,
+    onRoomClicked: (RoomId) -> Unit,
+    onRoomLongClicked: (RoomListRoomSummary) -> Unit,
+    onOpenSettings: () -> Unit,
+    onCreateRoomClicked: () -> Unit,
+    onInvitesClicked: () -> Unit,
+    onMenuActionClicked: (RoomListMenuAction) -> Unit,
     modifier: Modifier = Modifier,
-    onVerifyClicked: () -> Unit = {},
-    onRoomClicked: (RoomId) -> Unit = {},
-    onRoomLongClicked: (RoomListRoomSummary) -> Unit = {},
-    onOpenSettings: () -> Unit = {},
-    onCreateRoomClicked: () -> Unit = {},
-    onInvitesClicked: () -> Unit = {},
 ) {
     fun onRoomClicked(room: RoomListRoomSummary) {
         onRoomClicked(room.roomId)
@@ -190,77 +182,45 @@ fun RoomListContent(
                 areSearchResultsDisplayed = state.displaySearchResults,
                 onFilterChanged = { state.eventSink(RoomListEvents.UpdateFilter(it)) },
                 onToggleSearch = { state.eventSink(RoomListEvents.ToggleSearchResults) },
+                onMenuActionClicked = onMenuActionClicked,
                 onOpenSettings = onOpenSettings,
                 scrollBehavior = scrollBehavior,
             )
         },
         content = { padding ->
-            Column(
+            LazyColumn(
                 modifier = Modifier
                     .padding(padding)
                     .consumeWindowInsets(padding)
+                    .nestedScroll(nestedScrollConnection),
+                state = lazyListState,
             ) {
-                LazyColumn(
-                    modifier = Modifier
-                        .weight(1f)
-                        .nestedScroll(nestedScrollConnection),
-                    state = lazyListState,
-                ) {
-                    if (state.displayVerificationPrompt) {
-                        item {
-                            RequestVerificationHeader(
-                                onVerifyClicked = onVerifyClicked,
-                                onDismissClicked = { state.eventSink(RoomListEvents.DismissRequestVerificationPrompt) }
-                            )
-                        }
-                    }
-
-                    if (state.invitesState != InvitesState.NoInvites) {
-                        item {
-                            Box(
-                                modifier = Modifier.fillMaxWidth(),
-                            ) {
-                                Row(
-                                    modifier = Modifier
-                                        .clickable(role = Role.Button, onClick = onInvitesClicked)
-                                        .padding(horizontal = 16.dp)
-                                        .align(Alignment.CenterEnd)
-                                        .heightIn(min = 48.dp),
-                                    verticalAlignment = Alignment.CenterVertically,
-                                ) {
-                                    Text(
-                                        text = stringResource(StringR.string.action_invites_list),
-                                        fontSize = 14.sp,
-                                        style = noFontPadding,
-                                    )
-
-                                    if (state.invitesState == InvitesState.NewInvites) {
-                                        Spacer(Modifier.width(8.dp))
-
-                                        Box(
-                                            modifier = Modifier
-                                                .size(12.dp)
-                                                .clip(CircleShape)
-                                                .background(MaterialTheme.roomListUnreadIndicator())
-                                        )
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    itemsIndexed(
-                        items = state.roomList,
-                        contentType = { _, room -> room.contentType() },
-                    ) { index, room ->
-                        RoomSummaryRow(
-                            room = room,
-                            onClick = ::onRoomClicked,
-                            onLongClick = onRoomLongClicked,
+                if (state.displayVerificationPrompt) {
+                    item {
+                        RequestVerificationHeader(
+                            onVerifyClicked = onVerifyClicked,
+                            onDismissClicked = { state.eventSink(RoomListEvents.DismissRequestVerificationPrompt) }
                         )
-                        if (index != state.roomList.lastIndex) {
-                            Divider()
-                        }
+                    }
+                }
+
+                if (state.invitesState != InvitesState.NoInvites) {
+                    item {
+                        InvitesEntryPointView(onInvitesClicked, state)
+                    }
+                }
+
+                itemsIndexed(
+                    items = state.roomList,
+                    contentType = { _, room -> room.contentType() },
+                ) { index, room ->
+                    RoomSummaryRow(
+                        room = room,
+                        onClick = ::onRoomClicked,
+                        onLongClick = onRoomLongClicked,
+                    )
+                    if (index != state.roomList.lastIndex) {
+                        Divider()
                     }
                 }
             }
@@ -271,7 +231,12 @@ fun RoomListContent(
                 containerColor = MaterialTheme.colorScheme.primary,
                 onClick = onCreateRoomClicked
             ) {
-                Icon(resourceId = DrawableR.drawable.ic_edit_square, contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message))
+                Icon(
+                    // Correct icon alignment for better rendering.
+                    modifier = Modifier.padding(start = 1.dp, bottom = 1.dp),
+                    resourceId = DrawableR.drawable.ic_edit_square,
+                    contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message)
+                )
             }
         },
         snackbarHost = {
@@ -287,67 +252,37 @@ fun RoomListContent(
 }
 
 @Composable
-internal fun RequestVerificationHeader(
-    onVerifyClicked: () -> Unit,
-    onDismissClicked: () -> Unit,
+private fun InvitesEntryPointView(
+    onInvitesClicked: () -> Unit,
+    state: RoomListState,
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
-        Surface(
-            modifier.fillMaxWidth(),
-            shape = MaterialTheme.shapes.small,
-            color = MaterialTheme.colorScheme.surfaceVariant
+    Box(
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Row(
+            modifier = Modifier
+                .clickable(role = Role.Button, onClick = onInvitesClicked)
+                .padding(horizontal = 16.dp)
+                .align(Alignment.CenterEnd)
+                .heightIn(min = 48.dp),
+            verticalAlignment = Alignment.CenterVertically,
         ) {
-            Column(
-                Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 16.dp, vertical = 12.dp)
-            ) {
-                Row {
-                    Text(
-                        stringResource(R.string.session_verification_banner_title),
-                        modifier = Modifier.weight(1f),
-                        style = ElementTextStyles.Bold.body,
-                        color = MaterialTheme.colorScheme.primary,
-                        textAlign = TextAlign.Start,
-                    )
-                    Icon(
-                        modifier = Modifier.clickable(onClick = onDismissClicked),
-                        imageVector = Icons.Default.Close,
-                        contentDescription = stringResource(StringR.string.action_close)
-                    )
-                }
-                Spacer(modifier = Modifier.height(4.dp))
-                Text(stringResource(R.string.session_verification_banner_message), style = ElementTextStyles.Regular.bodyMD)
-                Spacer(modifier = Modifier.height(12.dp))
-                Button(
-                    modifier = Modifier.fillMaxWidth(),
-                    contentPadding = PaddingValues(horizontal = 20.dp, vertical = 7.dp),
-                    onClick = onVerifyClicked,
-                ) {
-                    Text(stringResource(StringR.string.action_continue), style = ElementTextStyles.Button)
-                }
+            Text(
+                text = stringResource(CommonStrings.action_invites_list),
+                fontSize = 14.sp,
+                style = MaterialTheme.typography.bodyMedium,
+            )
+
+            if (state.invitesState == InvitesState.NewInvites) {
+                Spacer(Modifier.width(8.dp))
+
+                UnreadIndicatorAtom()
             }
         }
     }
 }
 
-@Preview
-@Composable
-internal fun PreviewRequestVerificationHeaderLight() {
-    ElementPreviewLight {
-        RequestVerificationHeader(onVerifyClicked = {}, onDismissClicked = {})
-    }
-}
-
-@Preview
-@Composable
-internal fun PreviewRequestVerificationHeaderDark() {
-    ElementPreviewDark {
-        RequestVerificationHeader(onVerifyClicked = {}, onDismissClicked = {})
-    }
-}
-
 internal fun RoomListRoomSummary.contentType() = isPlaceholder
 
 @Preview
@@ -369,18 +304,7 @@ private fun ContentToPreview(state: RoomListState) {
         onVerifyClicked = {},
         onCreateRoomClicked = {},
         onInvitesClicked = {},
-        onRoomSettingsClicked = {}
+        onRoomSettingsClicked = {},
+        onMenuActionClicked = {},
     )
 }
-
-@Preview
-@Composable
-internal fun RoomListSearchResultContentPreview() {
-    ElementPreviewLight {
-        RoomListSearchResultContent(
-            state = aRoomListState(),
-            onRoomClicked = {},
-            onRoomLongClicked = {}
-        )
-    }
-}

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

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.roomlist.impl.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.features.roomlist.impl.R
+import io.element.android.libraries.designsystem.ElementTextStyles
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Surface
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+internal fun RequestVerificationHeader(
+    onVerifyClicked: () -> Unit,
+    onDismissClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
+        Surface(
+            modifier.fillMaxWidth(),
+            shape = MaterialTheme.shapes.small,
+            color = MaterialTheme.colorScheme.surfaceVariant
+        ) {
+            Column(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 12.dp)
+            ) {
+                Row {
+                    Text(
+                        stringResource(R.string.session_verification_banner_title),
+                        modifier = Modifier.weight(1f),
+                        style = ElementTextStyles.Bold.body,
+                        color = MaterialTheme.colorScheme.primary,
+                        textAlign = TextAlign.Start,
+                    )
+                    Icon(
+                        modifier = Modifier.clickable(onClick = onDismissClicked),
+                        imageVector = Icons.Default.Close,
+                        contentDescription = stringResource(CommonStrings.action_close)
+                    )
+                }
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    stringResource(R.string.session_verification_banner_message),
+                    style = ElementTextStyles.Regular.bodyMD
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+                Button(
+                    modifier = Modifier.fillMaxWidth(),
+                    contentPadding = PaddingValues(horizontal = 20.dp, vertical = 7.dp),
+                    onClick = onVerifyClicked,
+                ) {
+                    Text(
+                        stringResource(CommonStrings.action_continue),
+                        style = ElementTextStyles.Button
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun PreviewRequestVerificationHeaderLight() {
+    ElementPreviewLight {
+        RequestVerificationHeader(onVerifyClicked = {}, onDismissClicked = {})
+    }
+}
+
+@Preview
+@Composable
+internal fun PreviewRequestVerificationHeaderDark() {
+    ElementPreviewDark {
+        RequestVerificationHeader(onVerifyClicked = {}, onDismissClicked = {})
+    }
+}

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.roomlist.impl.components
+
+enum class RoomListMenuAction {
+    InviteFriends,
+    ReportBug
+}

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

@@ -19,23 +19,33 @@ package io.element.android.features.roomlist.impl.components
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.BugReport
+import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.element.android.features.roomlist.impl.R
 import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
@@ -48,7 +58,7 @@ import io.element.android.libraries.matrix.api.user.MatrixUser
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
-import io.element.android.libraries.ui.strings.R as StringR
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -57,6 +67,7 @@ fun RoomListTopBar(
     areSearchResultsDisplayed: Boolean,
     onFilterChanged: (String) -> Unit,
     onToggleSearch: () -> Unit,
+    onMenuActionClicked: (RoomListMenuAction) -> Unit,
     onOpenSettings: () -> Unit,
     scrollBehavior: TopAppBarScrollBehavior,
     modifier: Modifier = Modifier,
@@ -79,6 +90,7 @@ fun RoomListTopBar(
         matrixUser = matrixUser,
         onOpenSettings = onOpenSettings,
         onSearchClicked = onToggleSearch,
+        onMenuActionClicked = onMenuActionClicked,
         scrollBehavior = scrollBehavior,
         modifier = modifier,
     )
@@ -89,16 +101,20 @@ fun RoomListTopBar(
 private fun DefaultRoomListTopBar(
     matrixUser: MatrixUser?,
     scrollBehavior: TopAppBarScrollBehavior,
+    onOpenSettings: () -> Unit,
+    onSearchClicked: () -> Unit,
+    onMenuActionClicked: (RoomListMenuAction) -> Unit,
     modifier: Modifier = Modifier,
-    onOpenSettings: () -> Unit = {},
-    onSearchClicked: () -> Unit = {},
 ) {
+    var showMenu by remember { mutableStateOf(false) }
     MediumTopAppBar(
         modifier = modifier
             .nestedScroll(scrollBehavior.nestedScrollConnection),
         title = {
+            val fontSize = if (scrollBehavior.state.collapsedFraction > 0.5) 20.sp else 22.sp
             Text(
                 fontWeight = FontWeight.Bold,
+                style = MaterialTheme.typography.headlineMedium.copy(fontSize = fontSize),
                 text = stringResource(id = R.string.screen_roomlist_main_space_title)
             )
         },
@@ -108,8 +124,12 @@ private fun DefaultRoomListTopBar(
                     modifier = Modifier.testTag(TestTags.homeScreenSettings),
                     onClick = onOpenSettings
                 ) {
-                    val avatarData by remember { derivedStateOf { matrixUser.getAvatarData() } }
-                    Avatar(avatarData, contentDescription = stringResource(StringR.string.common_settings))
+                    val avatarData by remember {
+                        derivedStateOf {
+                            matrixUser.getAvatarData(size = AvatarSize.CurrentUserTopBar)
+                        }
+                    }
+                    Avatar(avatarData, contentDescription = stringResource(CommonStrings.common_settings))
                 }
             }
         },
@@ -117,7 +137,33 @@ private fun DefaultRoomListTopBar(
             IconButton(
                 onClick = onSearchClicked,
             ) {
-                Icon(Icons.Default.Search, contentDescription = stringResource(StringR.string.action_search))
+                Icon(Icons.Default.Search, contentDescription = stringResource(CommonStrings.action_search))
+            }
+            IconButton(
+                onClick = { showMenu = !showMenu }
+            ) {
+                Icon(Icons.Default.MoreVert, contentDescription = null)
+            }
+            DropdownMenu(
+                expanded = showMenu,
+                onDismissRequest = { showMenu = false }
+            ) {
+                DropdownMenuItem(
+                    onClick = {
+                        showMenu = false
+                        onMenuActionClicked(RoomListMenuAction.InviteFriends)
+                    },
+                    text = { Text(stringResource(id = CommonStrings.action_invite)) },
+                    leadingIcon = { Icon(Icons.Default.Share, contentDescription = null) }
+                )
+                DropdownMenuItem(
+                    onClick = {
+                        showMenu = false
+                        onMenuActionClicked(RoomListMenuAction.ReportBug)
+                    },
+                    text = { Text(stringResource(id = CommonStrings.common_report_a_bug)) },
+                    leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) }
+                )
             }
         },
         scrollBehavior = scrollBehavior,
@@ -139,5 +185,8 @@ private fun DefaultRoomListTopBarPreview() {
     DefaultRoomListTopBar(
         matrixUser = MatrixUser(UserId("@id:domain"), "Alice"),
         scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()),
+        onOpenSettings = {},
+        onSearchClicked = {},
+        onMenuActionClicked = {},
     )
 }

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

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.roomlist.impl.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.theme.ElementTheme
+
+/**
+ * https://www.figma.com/file/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=6547%3A147623
+ */
+@Composable
+internal fun RoomSummaryPlaceholderRow(
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(minHeight)
+            .padding(horizontal = 16.dp),
+    ) {
+        Box(
+            modifier = Modifier
+                .size(AvatarSize.RoomListItem.dp)
+                .align(Alignment.CenterVertically)
+                .background(color = ElementTheme.colors.textPlaceholder, shape = CircleShape)
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 20.dp, top = 19.dp, end = 4.dp)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(22.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                PlaceholderAtom(width = 40.dp, height = 7.dp)
+                Spacer(modifier = Modifier.width(7.dp))
+                PlaceholderAtom(width = 45.dp, height = 7.dp)
+                Spacer(modifier = Modifier.weight(1f))
+                PlaceholderAtom(width = 22.dp, height = 4.dp)
+            }
+            Row(
+                modifier = Modifier
+                    .height(25.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                PlaceholderAtom(width = 70.dp, height = 6.dp)
+                Spacer(modifier = Modifier.width(6.dp))
+                PlaceholderAtom(width = 70.dp, height = 6.dp)
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun RoomSummaryPlaceholderRowLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun RoomSummaryPlaceholderRowDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    RoomSummaryPlaceholderRow()
+}

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

@@ -17,28 +17,22 @@
 package io.element.android.features.roomlist.impl.components
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-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.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.ripple.rememberRipple
 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
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
@@ -54,24 +48,21 @@ import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.google.accompanist.placeholder.material.placeholder
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider
 import io.element.android.libraries.core.extensions.orEmpty
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.roomListPlaceHolder
 import io.element.android.libraries.designsystem.theme.roomListRoomMessage
 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
+internal val minHeight = 84.dp
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 internal fun RoomSummaryRow(
     room: RoomListRoomSummary,
@@ -79,108 +70,111 @@ internal fun RoomSummaryRow(
     onLongClick: (RoomListRoomSummary) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val clickModifier = if (room.isPlaceholder) {
-        modifier
+    if (room.isPlaceholder) {
+        RoomSummaryPlaceholderRow(
+            modifier = modifier,
+        )
     } else {
-        modifier.combinedClickable(
-            onClick = { onClick(room) },
-            onLongClick = { onLongClick(room) },
-            indication = rememberRipple(),
-            interactionSource = remember { MutableInteractionSource() }
+        RoomSummaryRealRow(
+            room = room,
+            onClick = onClick,
+            onLongClick = onLongClick,
+            modifier = modifier
         )
     }
-    Box(
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+internal fun RoomSummaryRealRow(
+    room: RoomListRoomSummary,
+    onClick: (RoomListRoomSummary) -> Unit,
+    onLongClick: (RoomListRoomSummary) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val clickModifier = Modifier.combinedClickable(
+        onClick = { onClick(room) },
+        onLongClick = { onLongClick(room) },
+        indication = rememberRipple(),
+        interactionSource = remember { MutableInteractionSource() }
+    )
+
+    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)
+        )
+        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)
-            .height(IntrinsicSize.Min),
-        verticalAlignment = CenterVertically
-    ) {
-        Avatar(
-            room.avatarData,
-            modifier = Modifier.placeholder(
-                visible = room.isPlaceholder,
-                shape = CircleShape,
-                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),
-            )
-        }
-    }
+            .weight(1f)
+            .padding(end = 16.dp),
+        fontSize = 16.sp,
+        fontWeight = FontWeight.SemiBold,
+        style = MaterialTheme.typography.bodyMedium,
+        text = room.name,
+        color = MaterialTheme.roomListRoomName(),
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
+    )
+    // Timestamp
+    Text(
+        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),
+        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
+    UnreadIndicatorAtom(
+        modifier = Modifier.padding(top = 3.dp),
+        color = unreadIndicatorColor,
+    )
 }
 
 val TextPlaceholderShape = PercentRectangleSizeShape(0.5f)

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

@@ -17,18 +17,18 @@
 package io.element.android.features.roomlist.impl.model
 
 import androidx.compose.runtime.Immutable
-import io.element.android.libraries.core.data.tryOrNull
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.matrix.api.core.RoomId
 
 @Immutable
-data class RoomListRoomSummary(
+data class RoomListRoomSummary constructor(
     val id: String,
     val roomId: RoomId,
     val name: String = "",
     val hasUnread: Boolean = false,
     val timestamp: String? = null,
     val lastMessage: CharSequence? = null,
-    val avatarData: AvatarData = AvatarData(id, name),
+    val avatarData: AvatarData = AvatarData(id, name, size = AvatarSize.RoomListItem),
     val isPlaceholder: Boolean = false,
 )

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

@@ -17,6 +17,7 @@
 package io.element.android.features.roomlist.impl.model
 
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.matrix.api.core.RoomId
 
 object RoomListRoomSummaryPlaceholders {
@@ -29,7 +30,7 @@ object RoomListRoomSummaryPlaceholders {
             name = "Short name",
             timestamp = "hh:mm",
             lastMessage = "Last message for placeholder",
-            avatarData = AvatarData(id, "S")
+            avatarData = AvatarData(id, "S", size = AvatarSize.RoomListItem)
         )
     }
 

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

@@ -18,6 +18,7 @@ package io.element.android.features.roomlist.impl.model
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.matrix.api.core.RoomId
 
 open class RoomListRoomSummaryProvider : PreviewParameterProvider<RoomListRoomSummary> {
@@ -28,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,
+            ),
         )
 }
 
@@ -39,6 +48,6 @@ fun aRoomListRoomSummary() = RoomListRoomSummary(
     hasUnread = false,
     timestamp = null,
     lastMessage = "Last message",
-    avatarData = AvatarData("!roomId", "Room name"),
+    avatarData = AvatarData("!roomId", "Room name", size = AvatarSize.RoomListItem),
     isPlaceholder = false,
 )

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/search/RoomListSearch.kt

@@ -48,15 +48,19 @@ import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Velocity
 import androidx.compose.ui.unit.dp
 import io.element.android.features.roomlist.impl.RoomListEvents
 import io.element.android.features.roomlist.impl.RoomListState
+import io.element.android.features.roomlist.impl.aRoomListState
 import io.element.android.features.roomlist.impl.components.RoomSummaryRow
 import io.element.android.features.roomlist.impl.contentType
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.modifiers.applyIf
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -64,7 +68,7 @@ import io.element.android.libraries.designsystem.theme.components.TextField
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.copy
 import io.element.android.libraries.matrix.api.core.RoomId
-import io.element.android.libraries.ui.strings.R
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
 internal fun RoomListSearchResultView(
@@ -109,6 +113,7 @@ internal fun RoomListSearchResultContent(
     fun onBackButtonPressed() {
         state.eventSink(RoomListEvents.ToggleSearchResults)
     }
+
     fun onRoomClicked(room: RoomListRoomSummary) {
         onRoomClicked(room.roomId)
     }
@@ -150,7 +155,7 @@ internal fun RoomListSearchResultContent(
                                 }) {
                                     Icon(
                                         imageVector = Icons.Default.Close,
-                                        contentDescription = stringResource(R.string.action_cancel)
+                                        contentDescription = stringResource(CommonStrings.action_cancel)
                                     )
                                 }
                             }
@@ -212,3 +217,23 @@ internal fun RoomListSearchResultContent(
         }
     }
 }
+
+@Preview
+@Composable
+internal fun RoomListSearchResultContentLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun RoomListSearchResultContentDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun ContentToPreview() {
+    RoomListSearchResultContent(
+        state = aRoomListState(),
+        onRoomClicked = {},
+        onRoomLongClicked = {}
+    )
+}

features/roomlist/impl/src/test/kotlin/io/element/android/features/roomlist/impl/RoomListPresenterTests.kt

@@ -28,6 +28,7 @@ import io.element.android.features.roomlist.impl.model.aRoomListRoomSummary
 import io.element.android.libraries.dateformatter.api.LastMessageTimestampFormatter
 import io.element.android.libraries.dateformatter.test.FakeLastMessageTimestampFormatter
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
 import io.element.android.libraries.eventformatter.test.FakeRoomLastMessageFormatter
 import io.element.android.libraries.matrix.api.verification.SessionVerifiedStatus
@@ -400,6 +401,6 @@ private val aRoomListRoomSummary = RoomListRoomSummary(
     hasUnread = true,
     timestamp = A_FORMATTED_DATE,
     lastMessage = "",
-    avatarData = AvatarData(id = A_ROOM_ID.value, name = A_ROOM_NAME),
+    avatarData = AvatarData(id = A_ROOM_ID.value, name = A_ROOM_NAME, size = AvatarSize.RoomListItem),
     isPlaceholder = false,
 )