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/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)
+}