Click on avatar in moderation bottom sheet opens avatar preview (#6991)

* Make the avatar in the room member moderation bottom sheet open the avatar in the media viewer (#6962)

* Make the avatar in the room member moderation bottom sheet open the avatar in the media viewer.

* Fix issue with avatar overlay not dismissing the bottom sheet: the bottom sheet would eat all the touch events until the first click, which would somehow cancel this behaviour

* Fix lint issues

* Update screenshots

---------

Co-authored-by: bxdxnn <267911624+bxdxnn@users.noreply.github.com>
Co-authored-by: ElementBot <android@element.io>

features/roommembermoderation/api/src/main/kotlin/io/element/android/features/roommembermoderation/api/RoomMemberModerationRenderer.kt

@@ -17,6 +17,7 @@ interface RoomMemberModerationRenderer {
     fun Render(
         state: RoomMemberModerationState,
         onSelectAction: (ModerationAction, MatrixUser) -> Unit,
+        onAvatarClick: ((MatrixUser) -> Unit)?,
         modifier: Modifier,
     )
 }

features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/DefaultRoomMemberModerationRenderer.kt

@@ -25,10 +25,11 @@ class DefaultRoomMemberModerationRenderer : RoomMemberModerationRenderer {
     override fun Render(
         state: RoomMemberModerationState,
         onSelectAction: (ModerationAction, MatrixUser) -> Unit,
+        onAvatarClick: ((MatrixUser) -> Unit)?,
         modifier: Modifier
     ) {
         if (state is InternalRoomMemberModerationState) {
-            RoomMemberModerationView(state, onSelectAction, modifier)
+            RoomMemberModerationView(modifier = modifier, state = state, onSelectAction = onSelectAction, onAvatarClick = onAvatarClick)
         } else {
             SideEffect {
                 Timber.d("RoomMemberModerationRenderer: Render called with unsupported state: $state")

features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/RoomMemberModerationView.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -64,6 +65,7 @@ import timber.log.Timber
 fun RoomMemberModerationView(
     state: InternalRoomMemberModerationState,
     onSelectAction: (ModerationAction, MatrixUser) -> Unit,
+    onAvatarClick: ((MatrixUser) -> Unit)?,
     modifier: Modifier = Modifier,
 ) {
     Box(modifier = modifier) {
@@ -73,6 +75,7 @@ fun RoomMemberModerationView(
                 user = selectedUser,
                 actions = state.actions,
                 onSelectAction = onSelectAction,
+                onAvatarClick = onAvatarClick,
                 onDismiss = { state.eventSink(InternalRoomMemberModerationEvents.Reset) },
             )
         }
@@ -214,6 +217,7 @@ private fun RoomMemberActionsBottomSheet(
     user: MatrixUser,
     actions: ImmutableList<ModerationActionState>,
     onSelectAction: (ModerationAction, MatrixUser) -> Unit,
+    onAvatarClick: ((MatrixUser) -> Unit)? = null,
     onDismiss: () -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
@@ -240,10 +244,11 @@ private fun RoomMemberActionsBottomSheet(
                 modifier = Modifier
                     .padding(bottom = 24.dp)
                     .align(Alignment.CenterHorizontally)
-                    .clickable {
+                    .clickable(enabled = user.avatarUrl != null && onAvatarClick != null) {
                         coroutineScope.launch {
-                            onSelectAction(ModerationAction.DisplayProfile, user)
                             bottomSheetState.hide()
+                            onAvatarClick?.invoke(user)
+                            onDismiss()
                         }
                     }
             )
@@ -282,8 +287,8 @@ private fun RoomMemberActionsBottomSheet(
                             leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.UserProfile())),
                             onClick = {
                                 coroutineScope.launch {
-                                    onSelectAction(action, user)
                                     bottomSheetState.hide()
+                                    onSelectAction(action, user)
                                 }
                             },
                             enabled = actionState.isEnabled
@@ -340,16 +345,18 @@ private fun RoomMemberActionsBottomSheet(
 @PreviewsDayNight
 @Composable
 internal fun RoomMemberModerationViewPreview(@PreviewParameter(InternalRoomMemberModerationStateProvider::class) state: InternalRoomMemberModerationState) {
+    val isDoingAction = listOf(state.kickUserAsyncAction, state.banUserAsyncAction, state.unbanUserAsyncAction).any { it is AsyncAction.Loading }
+    val modifier = if (isDoingAction) {
+        Modifier.fillMaxWidth().heightIn(min = 64.dp)
+    } else {
+        Modifier.fillMaxSize()
+    }
     ElementPreview {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .heightIn(min = 64.dp)
-        ) {
+        Box(modifier) {
             RoomMemberModerationView(
                 state = state,
-                onSelectAction = { _, _ ->
-                },
+                onSelectAction = { _, _ -> },
+                onAvatarClick = {},
             )
         }
     }