Update room properties from room details (#439)

-  Add the edit action in the room details
-  Add "Add topic" button in room details
-  Add the screen behind that action to edit some room properties: avatar, name, topic
   -  Handle the save button action
      - enable the button only if changes are detected
      - display a loader "updating room"
      - display an error dialog if any request has failed
- Check user has the right power level to change various attributes
   - "Add topic" is only shown if there's no topic and they are able to set on
   - Edit menu is only shown if they can change topic, name or avatar
   - On the edit page, any fields they can't change are uneditable

Co-authored-by: Chris Smith <csmith@lunarian.uk>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt

@@ -79,3 +79,6 @@ val Compound_Gray_300_Light = Color(0xFFF0F2F5)
 val Compound_Gray_300_Dark = Color(0xFF1D1F24)
 val Compound_Gray_400_Light = Color(0xFFE1E6EC)
 val Compound_Gray_400_Dark = Color(0xFF26282D)
+
+val Gray_1400_Light = Color(0xFF1B1D22)
+val Gray_1400_Dark = Color(0xFFEBEEF2)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledTextField.kt

@@ -0,0 +1,87 @@
+/*
+ * 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.libraries.designsystem.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextField
+
+@Composable
+fun LabelledTextField(
+    label: String,
+    value: String,
+    modifier: Modifier = Modifier,
+    placeholder: String? = null,
+    maxLines: Int = Int.MAX_VALUE,
+    singleLine: Boolean = false,
+    onValueChange: (String) -> Unit = {},
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            style = MaterialTheme.typography.titleSmall,
+            color = MaterialTheme.colorScheme.primary,
+            text = label
+        )
+
+        TextField(
+            modifier = Modifier.fillMaxWidth(),
+            value = value,
+            placeholder = placeholder?.let { { Text(placeholder) } },
+            onValueChange = onValueChange,
+            singleLine = singleLine,
+            maxLines = maxLines,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun LabelledTextFieldLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun LabelledTextFieldDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        LabelledTextField(
+            label = "Room name",
+            value = "",
+            placeholder = "e.g. Product Sprint",
+        )
+        LabelledTextField(
+            label = "Room name",
+            value = "a room name",
+            placeholder = "e.g. Product Sprint",
+        )
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -25,6 +25,7 @@ import io.element.android.libraries.designsystem.Black_800
 import io.element.android.libraries.designsystem.Black_950
 import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
 import io.element.android.libraries.designsystem.DarkGrey
+import io.element.android.libraries.designsystem.Gray_1400_Dark
 import io.element.android.libraries.designsystem.Gray_300
 import io.element.android.libraries.designsystem.Gray_400
 import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
@@ -42,6 +43,7 @@ fun elementColorsDark() = ElementColors(
     quinary = Gray_450,
     gray300 = Compound_Gray_300_Dark,
     gray400 = Compound_Gray_400_Dark,
+    gray1400 = Gray_1400_Dark,
     textActionCritical = TextColorCriticalDark,
     isLight = false,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -22,12 +22,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.Black_900
+import io.element.android.libraries.designsystem.Compound_Gray_300_Light
+import io.element.android.libraries.designsystem.Compound_Gray_400_Light
 import io.element.android.libraries.designsystem.Gray_100
+import io.element.android.libraries.designsystem.Gray_1400_Light
 import io.element.android.libraries.designsystem.Gray_150
 import io.element.android.libraries.designsystem.Gray_200
 import io.element.android.libraries.designsystem.Gray_25
-import io.element.android.libraries.designsystem.Compound_Gray_300_Light
-import io.element.android.libraries.designsystem.Compound_Gray_400_Light
 import io.element.android.libraries.designsystem.Gray_50
 import io.element.android.libraries.designsystem.SystemGrey5Light
 import io.element.android.libraries.designsystem.SystemGrey6Light
@@ -42,6 +43,7 @@ fun elementColorsLight() = ElementColors(
     quinary = Gray_50,
     gray300 = Compound_Gray_300_Light,
     gray400 = Compound_Gray_400_Light,
+    gray1400 = Gray_1400_Light,
     textActionCritical = TextColorCriticalLight,
     isLight = true,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt

@@ -31,6 +31,7 @@ class ElementColors(
     quinary: Color,
     gray300: Color,
     gray400: Color,
+    gray1400: Color,
     textActionCritical: Color,
     isLight: Boolean
 ) {
@@ -53,6 +54,9 @@ class ElementColors(
     var gray400 by mutableStateOf(gray400)
         private set
 
+    var gray1400 by mutableStateOf(gray1400)
+        private set
+
     var textActionCritical by mutableStateOf(textActionCritical)
         private set
 
@@ -67,6 +71,7 @@ class ElementColors(
         quinary: Color = this.quinary,
         gray300: Color = this.gray300,
         gray400: Color = this.gray400,
+        gray1400: Color = this.gray1400,
         textActionCritical: Color = this.textActionCritical,
         isLight: Boolean = this.isLight,
     ) = ElementColors(
@@ -77,6 +82,7 @@ class ElementColors(
         quinary = quinary,
         gray300 = gray300,
         gray400 = gray400,
+        gray1400 = gray1400,
         textActionCritical = textActionCritical,
         isLight = isLight,
     )
@@ -89,6 +95,7 @@ class ElementColors(
         quinary = other.quinary
         gray300 = other.gray300
         gray400 = other.gray400
+        gray1400 = other.gray1400
         textActionCritical = other.textActionCritical
         isLight = other.isLight
     }

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/MatrixRoom.kt

@@ -89,4 +89,14 @@ interface MatrixRoom : Closeable {
     suspend fun inviteUserById(id: UserId): Result<Unit>
 
     suspend fun canInvite(): Result<Boolean>
+
+    suspend fun canSendStateEvent(type: StateEventType): Result<Boolean>
+
+    suspend fun updateAvatar(mimeType: String, data: ByteArray): Result<Unit>
+
+    suspend fun removeAvatar(): Result<Unit>
+
+    suspend fun setName(name: String): Result<Unit>
+
+    suspend fun setTopic(topic: String): Result<Unit>
 }

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/StateEventType.kt

@@ -0,0 +1,41 @@
+/*
+ * 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.libraries.matrix.api.room
+
+enum class StateEventType {
+    POLICY_RULE_ROOM,
+    POLICY_RULE_SERVER,
+    POLICY_RULE_USER,
+    ROOM_ALIASES,
+    ROOM_AVATAR,
+    ROOM_CANONICAL_ALIAS,
+    ROOM_CREATE,
+    ROOM_ENCRYPTION,
+    ROOM_GUEST_ACCESS,
+    ROOM_HISTORY_VISIBILITY,
+    ROOM_JOIN_RULES,
+    ROOM_MEMBER_EVENT,
+    ROOM_NAME,
+    ROOM_PINNED_EVENTS,
+    ROOM_POWER_LEVELS,
+    ROOM_SERVER_ACL,
+    ROOM_THIRD_PARTY_INVITE,
+    ROOM_TOMBSTONE,
+    ROOM_TOPIC,
+    SPACE_CHILD,
+    SPACE_PARENT;
+}

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/room/RustMatrixRoom.kt

@@ -27,12 +27,14 @@ import io.element.android.libraries.matrix.api.media.ImageInfo
 import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
+import io.element.android.libraries.matrix.api.room.StateEventType
 import io.element.android.libraries.matrix.api.room.roomMembers
 import io.element.android.libraries.matrix.api.timeline.MatrixTimeline
 import io.element.android.libraries.matrix.impl.media.map
 import io.element.android.libraries.matrix.impl.timeline.RustMatrixTimeline
 import io.element.android.services.toolbox.api.systemclock.SystemClock
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
@@ -224,6 +226,12 @@ class RustMatrixRoom(
         }
     }
 
+    override suspend fun canSendStateEvent(type: StateEventType): Result<Boolean> = withContext(coroutineDispatchers.io) {
+        runCatching {
+            innerRoom.member(sessionId.value).use { it.canSendState(type.map()) }
+        }
+    }
+
     override suspend fun sendImage(file: File, thumbnailFile: File, imageInfo: ImageInfo): Result<Unit> = withContext(coroutineDispatchers.io) {
         runCatching {
             innerRoom.sendImage(file.path, thumbnailFile.path, imageInfo.map())
@@ -247,4 +255,33 @@ class RustMatrixRoom(
             innerRoom.sendFile(file.path, fileInfo.map())
         }
     }
+
+    @OptIn(ExperimentalUnsignedTypes::class)
+    override suspend fun updateAvatar(mimeType: String, data: ByteArray): Result<Unit> =
+        withContext(Dispatchers.IO) {
+            runCatching {
+                innerRoom.uploadAvatar(mimeType, data.toUByteArray().toList())
+            }
+        }
+
+    override suspend fun removeAvatar(): Result<Unit> =
+        withContext(Dispatchers.IO) {
+            runCatching {
+                innerRoom.removeAvatar()
+            }
+        }
+
+    override suspend fun setName(name: String): Result<Unit> =
+        withContext(Dispatchers.IO) {
+            runCatching {
+                innerRoom.setName(name)
+            }
+        }
+
+    override suspend fun setTopic(topic: String): Result<Unit> =
+        withContext(Dispatchers.IO) {
+            runCatching {
+                innerRoom.setTopic(topic)
+            }
+        }
 }

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/room/StateEventType.kt

@@ -0,0 +1,68 @@
+/*
+ * 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.libraries.matrix.impl.room
+
+import io.element.android.libraries.matrix.api.room.StateEventType
+import org.matrix.rustcomponents.sdk.StateEventType as RustStateEventType
+
+fun StateEventType.map(): RustStateEventType = when (this) {
+    StateEventType.POLICY_RULE_ROOM -> RustStateEventType.POLICY_RULE_ROOM
+    StateEventType.POLICY_RULE_SERVER -> RustStateEventType.POLICY_RULE_SERVER
+    StateEventType.POLICY_RULE_USER -> RustStateEventType.POLICY_RULE_USER
+    StateEventType.ROOM_ALIASES -> RustStateEventType.ROOM_ALIASES
+    StateEventType.ROOM_AVATAR -> RustStateEventType.ROOM_AVATAR
+    StateEventType.ROOM_CANONICAL_ALIAS -> RustStateEventType.ROOM_CANONICAL_ALIAS
+    StateEventType.ROOM_CREATE -> RustStateEventType.ROOM_CREATE
+    StateEventType.ROOM_ENCRYPTION -> RustStateEventType.ROOM_ENCRYPTION
+    StateEventType.ROOM_GUEST_ACCESS -> RustStateEventType.ROOM_GUEST_ACCESS
+    StateEventType.ROOM_HISTORY_VISIBILITY -> RustStateEventType.ROOM_HISTORY_VISIBILITY
+    StateEventType.ROOM_JOIN_RULES -> RustStateEventType.ROOM_JOIN_RULES
+    StateEventType.ROOM_MEMBER_EVENT -> RustStateEventType.ROOM_MEMBER_EVENT
+    StateEventType.ROOM_NAME -> RustStateEventType.ROOM_NAME
+    StateEventType.ROOM_PINNED_EVENTS -> RustStateEventType.ROOM_PINNED_EVENTS
+    StateEventType.ROOM_POWER_LEVELS -> RustStateEventType.ROOM_POWER_LEVELS
+    StateEventType.ROOM_SERVER_ACL -> RustStateEventType.ROOM_SERVER_ACL
+    StateEventType.ROOM_THIRD_PARTY_INVITE -> RustStateEventType.ROOM_THIRD_PARTY_INVITE
+    StateEventType.ROOM_TOMBSTONE -> RustStateEventType.ROOM_TOMBSTONE
+    StateEventType.ROOM_TOPIC -> RustStateEventType.ROOM_TOPIC
+    StateEventType.SPACE_CHILD -> RustStateEventType.SPACE_CHILD
+    StateEventType.SPACE_PARENT -> RustStateEventType.SPACE_PARENT
+}
+
+fun RustStateEventType.map(): StateEventType = when (this) {
+    RustStateEventType.POLICY_RULE_ROOM -> StateEventType.POLICY_RULE_ROOM
+    RustStateEventType.POLICY_RULE_SERVER -> StateEventType.POLICY_RULE_SERVER
+    RustStateEventType.POLICY_RULE_USER -> StateEventType.POLICY_RULE_USER
+    RustStateEventType.ROOM_ALIASES -> StateEventType.ROOM_ALIASES
+    RustStateEventType.ROOM_AVATAR -> StateEventType.ROOM_AVATAR
+    RustStateEventType.ROOM_CANONICAL_ALIAS -> StateEventType.ROOM_CANONICAL_ALIAS
+    RustStateEventType.ROOM_CREATE -> StateEventType.ROOM_CREATE
+    RustStateEventType.ROOM_ENCRYPTION -> StateEventType.ROOM_ENCRYPTION
+    RustStateEventType.ROOM_GUEST_ACCESS -> StateEventType.ROOM_GUEST_ACCESS
+    RustStateEventType.ROOM_HISTORY_VISIBILITY -> StateEventType.ROOM_HISTORY_VISIBILITY
+    RustStateEventType.ROOM_JOIN_RULES -> StateEventType.ROOM_JOIN_RULES
+    RustStateEventType.ROOM_MEMBER_EVENT -> StateEventType.ROOM_MEMBER_EVENT
+    RustStateEventType.ROOM_NAME -> StateEventType.ROOM_NAME
+    RustStateEventType.ROOM_PINNED_EVENTS -> StateEventType.ROOM_PINNED_EVENTS
+    RustStateEventType.ROOM_POWER_LEVELS -> StateEventType.ROOM_POWER_LEVELS
+    RustStateEventType.ROOM_SERVER_ACL -> StateEventType.ROOM_SERVER_ACL
+    RustStateEventType.ROOM_THIRD_PARTY_INVITE -> StateEventType.ROOM_THIRD_PARTY_INVITE
+    RustStateEventType.ROOM_TOMBSTONE -> StateEventType.ROOM_TOMBSTONE
+    RustStateEventType.ROOM_TOPIC -> StateEventType.ROOM_TOPIC
+    RustStateEventType.SPACE_CHILD -> StateEventType.SPACE_CHILD
+    RustStateEventType.SPACE_PARENT -> StateEventType.SPACE_PARENT
+}

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/room/FakeMatrixRoom.kt

@@ -26,6 +26,7 @@ import io.element.android.libraries.matrix.api.media.ImageInfo
 import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
+import io.element.android.libraries.matrix.api.room.StateEventType
 import io.element.android.libraries.matrix.api.timeline.MatrixTimeline
 import io.element.android.libraries.matrix.test.A_ROOM_ID
 import io.element.android.libraries.matrix.test.A_SESSION_ID
@@ -62,7 +63,13 @@ class FakeMatrixRoom(
     private var rejectInviteResult = Result.success(Unit)
     private var inviteUserResult = Result.success(Unit)
     private var canInviteResult = Result.success(true)
+    private val canSendStateResults = mutableMapOf<StateEventType, Result<Boolean>>()
     private var sendMediaResult = Result.success(Unit)
+    private var setNameResult = Result.success(Unit)
+    private var setTopicResult = Result.success(Unit)
+    private var updateAvatarResult = Result.success(Unit)
+    private var removeAvatarResult = Result.success(Unit)
+
     var sendMediaCount = 0
         private set
 
@@ -75,6 +82,18 @@ class FakeMatrixRoom(
     var invitedUserId: UserId? = null
         private set
 
+    var newTopic: String? = null
+        private set
+
+    var newName: String? = null
+        private set
+
+    var newAvatarData: ByteArray? = null
+        private set
+
+    var removedAvatar: Boolean = false
+        private set
+
     private var leaveRoomError: Throwable? = null
 
     override val membersStateFlow: MutableStateFlow<MatrixRoomMembersState> = MutableStateFlow(MatrixRoomMembersState.Unknown)
@@ -151,6 +170,10 @@ class FakeMatrixRoom(
         return canInviteResult
     }
 
+    override suspend fun canSendStateEvent(type: StateEventType): Result<Boolean> {
+        return canSendStateResults[type] ?: Result.failure(IllegalStateException("No fake answer"))
+    }
+
     override suspend fun sendImage(file: File, thumbnailFile: File, imageInfo: ImageInfo): Result<Unit> = fakeSendMedia()
 
     override suspend fun sendVideo(file: File, thumbnailFile: File, videoInfo: VideoInfo): Result<Unit> = fakeSendMedia()
@@ -166,6 +189,26 @@ class FakeMatrixRoom(
         }
     }
 
+    override suspend fun updateAvatar(mimeType: String, data: ByteArray): Result<Unit> {
+        newAvatarData = data
+        return updateAvatarResult
+    }
+
+    override suspend fun removeAvatar(): Result<Unit> {
+        removedAvatar = true
+        return removeAvatarResult
+    }
+
+    override suspend fun setName(name: String): Result<Unit> {
+        newName = name
+        return setNameResult
+    }
+
+    override suspend fun setTopic(topic: String): Result<Unit> {
+        newTopic = topic
+        return setTopicResult
+    }
+
     override fun close() = Unit
 
     fun givenLeaveRoomError(throwable: Throwable?) {
@@ -204,6 +247,10 @@ class FakeMatrixRoom(
         canInviteResult = result
     }
 
+    fun givenCanSendStateResult(type: StateEventType, result: Result<Boolean>) {
+        canSendStateResults[type] = result
+    }
+
     fun givenIgnoreResult(result: Result<Unit>) {
         ignoreResult = result
     }
@@ -215,4 +262,20 @@ class FakeMatrixRoom(
     fun givenSendMediaResult(result: Result<Unit>) {
         sendMediaResult = result
     }
+
+    fun givenUpdateAvatarResult(result: Result<Unit>) {
+        updateAvatarResult = result
+    }
+
+    fun givenRemoveAvatarResult(result: Result<Unit>) {
+        removeAvatarResult = result
+    }
+
+    fun givenSetNameResult(result: Result<Unit>) {
+        setNameResult = result
+    }
+
+    fun givenSetTopicResult(result: Result<Unit>) {
+        setTopicResult = result
+    }
 }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt

@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+
+@file:OptIn(ExperimentalMaterialApi::class)
+
+package io.element.android.libraries.matrix.ui.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ModalBottomSheetState
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.Text
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+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.ModalBottomSheetLayout
+import io.element.android.libraries.matrix.ui.media.AvatarAction
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+import kotlinx.coroutines.launch
+
+@Composable
+fun AvatarActionBottomSheet(
+    actions: ImmutableList<AvatarAction>,
+    modalBottomSheetState: ModalBottomSheetState,
+    modifier: Modifier = Modifier,
+    onActionSelected: (action: AvatarAction) -> Unit = {},
+) {
+    val coroutineScope = rememberCoroutineScope()
+    fun onItemActionClicked(itemAction: AvatarAction) {
+        onActionSelected(itemAction)
+        coroutineScope.launch {
+            modalBottomSheetState.hide()
+        }
+    }
+
+    ModalBottomSheetLayout(
+        modifier = modifier,
+        sheetState = modalBottomSheetState,
+        sheetContent = {
+            AvatarActionBottomSheetContent(
+                actions = actions,
+                onActionClicked = ::onItemActionClicked,
+                modifier = Modifier
+                    .navigationBarsPadding()
+                    .imePadding()
+            )
+        }
+    )
+}
+
+@Composable
+private fun AvatarActionBottomSheetContent(
+    actions: ImmutableList<AvatarAction>,
+    modifier: Modifier = Modifier,
+    onActionClicked: (AvatarAction) -> Unit = { },
+) {
+    LazyColumn(
+        modifier = modifier.fillMaxWidth()
+    ) {
+        items(
+            items = actions,
+        ) { action ->
+            ListItem(
+                modifier = Modifier.clickable { onActionClicked(action) },
+                headlineContent = {
+                    Text(
+                        text = stringResource(action.titleResId),
+                        color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
+                    )
+                },
+                leadingContent = {
+                    Icon(
+                        imageVector = action.icon,
+                        contentDescription = stringResource(action.titleResId),
+                        tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
+                    )
+                }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AvatarActionBottomSheetLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun AvatarActionBottomSheetDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    AvatarActionBottomSheet(
+        actions = persistentListOf(AvatarAction.TakePhoto, AvatarAction.ChoosePhoto, AvatarAction.Remove),
+        modalBottomSheetState = ModalBottomSheetState(
+            initialValue = ModalBottomSheetValue.Expanded
+        ),
+    )
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt

@@ -0,0 +1,99 @@
+/*
+ * 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.libraries.matrix.ui.components
+
+import android.net.Uri
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.AddAPhoto
+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.painter.ColorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
+import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+/**
+ * An avatar that the user has selected, but which has not yet been uploaded to Matrix.
+ *
+ * The image is loaded from a local resource instead of from a MXC URI.
+ */
+@Composable
+fun UnsavedAvatar(
+    avatarUri: Uri?,
+    modifier: Modifier = Modifier,
+) {
+    val commonModifier = modifier
+        .size(70.dp)
+        .clip(CircleShape)
+
+    if (avatarUri != null) {
+        val context = LocalContext.current
+        val model = ImageRequest.Builder(context)
+            .data(avatarUri)
+            .build()
+        AsyncImage(
+            modifier = commonModifier,
+            model = model,
+            placeholder = debugPlaceholderBackground(ColorPainter(MaterialTheme.colorScheme.surfaceVariant)),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+        )
+    } else {
+        Box(modifier = commonModifier.background(LocalColors.current.quinary)) {
+            Icon(
+                imageVector = Icons.Outlined.AddAPhoto,
+                contentDescription = "",
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(40.dp),
+                tint = MaterialTheme.colorScheme.secondary,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun UnsavedAvatarLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun UnsavedAvatarDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Row {
+        UnsavedAvatar(null)
+        UnsavedAvatar(Uri.EMPTY)
+    }
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/media/AvatarAction.kt

@@ -0,0 +1,37 @@
+/*
+ * 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.libraries.matrix.ui.media
+
+import androidx.annotation.StringRes
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Delete
+import androidx.compose.material.icons.outlined.PhotoCamera
+import androidx.compose.material.icons.outlined.PhotoLibrary
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.vector.ImageVector
+import io.element.android.libraries.ui.strings.R
+
+@Immutable
+sealed class AvatarAction(
+    @StringRes val titleResId: Int,
+    val icon: ImageVector,
+    val destructive: Boolean = false,
+) {
+    object TakePhoto : AvatarAction(titleResId = R.string.action_take_photo, icon = Icons.Outlined.PhotoCamera)
+    object ChoosePhoto : AvatarAction(titleResId = R.string.action_choose_photo, icon = Icons.Outlined.PhotoLibrary)
+    object Remove : AvatarAction(titleResId = R.string.action_remove, icon = Icons.Outlined.Delete, destructive = true)
+}