[Room Details] Implement room details screen (#256)

* Implement Room Details screen

* Add option to create permalink from room id and alias, add share room action

features/messages/api/build.gradle.kts

@@ -26,4 +26,5 @@ android {
 
 dependencies {
     implementation(projects.libraries.architecture)
+    implementation(projects.libraries.matrix.api)
 }

features/messages/api/src/main/kotlin/io/element/android/features/messages/api/MessagesEntryPoint.kt

@@ -16,6 +16,19 @@
 
 package io.element.android.features.messages.api
 
-import io.element.android.libraries.architecture.SimpleFeatureEntryPoint
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import com.bumble.appyx.core.plugin.Plugin
+import io.element.android.libraries.architecture.FeatureEntryPoint
 
-interface MessagesEntryPoint : SimpleFeatureEntryPoint
+interface MessagesEntryPoint : FeatureEntryPoint {
+    fun createNode(
+        parentNode: Node,
+        buildContext: BuildContext,
+        callback: Callback,
+    ): Node
+
+    interface Callback : Plugin {
+        fun onRoomDetailsClicked()
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/DefaultMessagesEntryPoint.kt

@@ -18,15 +18,21 @@ package io.element.android.features.messages.impl
 
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
+import com.bumble.appyx.core.plugin.Plugin
 import com.squareup.anvil.annotations.ContributesBinding
 import io.element.android.features.messages.api.MessagesEntryPoint
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.di.AppScope
+import io.element.android.libraries.matrix.api.core.RoomId
 import javax.inject.Inject
 
 @ContributesBinding(AppScope::class)
 class DefaultMessagesEntryPoint @Inject constructor() : MessagesEntryPoint {
-    override fun createNode(parentNode: Node, buildContext: BuildContext): Node {
-        return parentNode.createNode<MessagesNode>(buildContext)
+    override fun createNode(
+        parentNode: Node,
+        buildContext: BuildContext,
+        callback: MessagesEntryPoint.Callback
+    ): Node {
+        return parentNode.createNode<MessagesNode>(buildContext, listOf(callback))
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesNode.kt

@@ -21,10 +21,13 @@ import androidx.compose.ui.Modifier
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.plugin.Plugin
+import com.bumble.appyx.core.plugin.plugins
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
+import io.element.android.features.messages.api.MessagesEntryPoint
 import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.api.core.RoomId
 
 @ContributesNode(RoomScope::class)
 class MessagesNode @AssistedInject constructor(
@@ -33,12 +36,19 @@ class MessagesNode @AssistedInject constructor(
     private val presenter: MessagesPresenter,
 ) : Node(buildContext, plugins = plugins) {
 
+    private val callback = plugins<MessagesEntryPoint.Callback>().firstOrNull()
+
+    private fun onRoomDetailsClicked() {
+        callback?.onRoomDetailsClicked()
+    }
+
     @Composable
     override fun View(modifier: Modifier) {
         val state = presenter.present()
         MessagesView(
             state = state,
             onBackPressed = this::navigateUp,
+            onRoomDetailsClicked = this::onRoomDetailsClicked,
             modifier = modifier
         )
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -21,6 +21,7 @@
 
 package io.element.android.features.messages.impl
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -69,6 +70,7 @@ import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.LogCompositions
+import io.element.android.libraries.matrix.api.core.RoomId
 import kotlinx.coroutines.launch
 import timber.log.Timber
 
@@ -77,6 +79,7 @@ fun MessagesView(
     state: MessagesState,
     modifier: Modifier = Modifier,
     onBackPressed: () -> Unit = {},
+    onRoomDetailsClicked: () -> Unit = {},
 ) {
     LogCompositions(tag = "MessagesScreen", msg = "Root")
     val itemActionsBottomSheetState = rememberModalBottomSheetState(
@@ -112,7 +115,8 @@ fun MessagesView(
             MessagesViewTopBar(
                 roomTitle = state.roomName,
                 roomAvatar = state.roomAvatar,
-                onBackPressed = onBackPressed
+                onBackPressed = onBackPressed,
+                onRoomDetailsClicked = onRoomDetailsClicked,
             )
         },
         content = { padding ->
@@ -174,6 +178,7 @@ fun MessagesViewTopBar(
     roomTitle: String?,
     roomAvatar: AvatarData?,
     modifier: Modifier = Modifier,
+    onRoomDetailsClicked: () -> Unit = {},
     onBackPressed: () -> Unit = {},
 ) {
     TopAppBar(
@@ -187,7 +192,10 @@ fun MessagesViewTopBar(
             }
         },
         title = {
-            Row(verticalAlignment = Alignment.CenterVertically) {
+            Row(
+                modifier = Modifier.clickable { onRoomDetailsClicked() },
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 if (roomAvatar != null) {
                     Avatar(roomAvatar)
                     Spacer(modifier = Modifier.width(8.dp))

features/rageshake/impl/src/main/res/values/localazy.xml

@@ -2,6 +2,7 @@
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
   <string name="screen_bug_report_attach_screenshot">"Attach screenshot"</string>
   <string name="screen_bug_report_contact_me">"You may contact me if you have any follow up questions"</string>
+  <string name="screen_bug_report_edit_screenshot">"Edit screenshot"</string>
   <string name="screen_bug_report_editor_description">"Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can."</string>
   <string name="screen_bug_report_editor_placeholder">"Describe the bug…"</string>
   <string name="screen_bug_report_editor_supporting">"If possible, please write the description in English."</string>

features/roomdetails/api/.gitignore

@@ -0,0 +1 @@
+/build

features/roomdetails/api/build.gradle.kts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2022 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.
+ */
+
+// TODO: Remove once https://youtrack.jetbrains.com/issue/KTIJ-19369 is fixed
+@Suppress("DSL_SCOPE_VIOLATION")
+plugins {
+    id("io.element.android-library")
+}
+
+android {
+    namespace = "io.element.android.features.roomdetails.api"
+}
+
+dependencies {
+    implementation(projects.libraries.architecture)
+    implementation(projects.libraries.matrix.api)
+}

features/roomdetails/api/src/main/kotlin/io/element/android/features/roomdetails/api/RoomDetailsEntryPoint.kt

@@ -0,0 +1,26 @@
+/*
+ * 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.roomdetails.api
+
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import io.element.android.libraries.architecture.FeatureEntryPoint
+
+interface RoomDetailsEntryPoint : FeatureEntryPoint {
+    fun createNode(parentNode: Node, buildContext: BuildContext): Node
+
+}

features/roomdetails/impl/.gitignore

@@ -0,0 +1 @@
+/build

features/roomdetails/impl/build.gradle.kts

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+// TODO: Remove once https://youtrack.jetbrains.com/issue/KTIJ-19369 is fixed
+@Suppress("DSL_SCOPE_VIOLATION")
+plugins {
+    id("io.element.android-compose-library")
+    alias(libs.plugins.anvil)
+    alias(libs.plugins.ksp)
+    id("kotlin-parcelize")
+}
+
+android {
+    namespace = "io.element.android.features.roomdetails.impl"
+}
+
+anvil {
+    generateDaggerFactories.set(true)
+}
+
+dependencies {
+    anvil(projects.anvilcodegen)
+    implementation(projects.anvilannotations)
+
+    implementation(projects.libraries.core)
+    implementation(projects.libraries.architecture)
+    implementation(projects.libraries.matrix.api)
+    implementation(projects.libraries.matrixui)
+    implementation(projects.libraries.designsystem)
+    implementation(projects.libraries.elementresources)
+    implementation(projects.libraries.uiStrings)
+    implementation(projects.libraries.androidutils)
+    api(projects.features.roomdetails.api)
+    implementation(libs.coil.compose)
+
+    testImplementation(libs.test.junit)
+    testImplementation(libs.coroutines.test)
+    testImplementation(libs.molecule.runtime)
+    testImplementation(libs.test.truth)
+    testImplementation(libs.test.turbine)
+    testImplementation(projects.libraries.matrix.test)
+
+    ksp(libs.showkase.processor)
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/DefaultRoomDetailsEntryPoint.kt

@@ -0,0 +1,32 @@
+/*
+ * 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.roomdetails.impl
+
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import com.squareup.anvil.annotations.ContributesBinding
+import io.element.android.features.roomdetails.api.RoomDetailsEntryPoint
+import io.element.android.libraries.architecture.createNode
+import io.element.android.libraries.di.AppScope
+import javax.inject.Inject
+
+@ContributesBinding(AppScope::class)
+class DefaultRoomDetailsEntryPoint @Inject constructor() : RoomDetailsEntryPoint {
+    override fun createNode(parentNode: Node, buildContext: BuildContext): Node {
+        return parentNode.createNode<RoomDetailsFlowNode>(buildContext)
+    }
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsEvent.kt

@@ -0,0 +1,19 @@
+/*
+ * 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.roomdetails.impl
+
+sealed interface RoomDetailsEvent

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.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.features.roomdetails.impl
+
+import android.os.Parcelable
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.bumble.appyx.core.composable.Children
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import com.bumble.appyx.core.plugin.Plugin
+import com.bumble.appyx.navmodel.backstack.BackStack
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedInject
+import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.architecture.BackstackNode
+import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
+import io.element.android.libraries.architecture.createNode
+import io.element.android.libraries.di.RoomScope
+import kotlinx.parcelize.Parcelize
+
+@ContributesNode(RoomScope::class)
+class RoomDetailsFlowNode @AssistedInject constructor(
+    @Assisted buildContext: BuildContext,
+    @Assisted plugins: List<Plugin>,
+) : BackstackNode<RoomDetailsFlowNode.NavTarget>(
+    backstack = BackStack(
+        initialElement = NavTarget.RoomDetails,
+        savedStateMap = buildContext.savedStateMap,
+    ),
+    buildContext = buildContext,
+    plugins = plugins,
+) {
+
+    sealed interface NavTarget : Parcelable {
+        @Parcelize
+        object RoomDetails : NavTarget
+    }
+
+    override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
+        return when (navTarget) {
+            NavTarget.RoomDetails -> createNode<RoomDetailsNode>(buildContext)
+        }
+    }
+
+    @Composable
+    override fun View(modifier: Modifier) {
+        Children(
+            navModel = backstack,
+            modifier = modifier,
+            transitionHandler = rememberDefaultTransitionHandler(),
+        )
+    }
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsNode.kt

@@ -0,0 +1,69 @@
+/*
+ * 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.roomdetails.impl
+
+import android.content.Context
+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
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedInject
+import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.androidutils.system.startSharePlainTextIntent
+import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
+import io.element.android.libraries.matrix.api.room.MatrixRoom
+import io.element.android.libraries.ui.strings.R as StringR
+
+@ContributesNode(RoomScope::class)
+class RoomDetailsNode @AssistedInject constructor(
+    @Assisted buildContext: BuildContext,
+    @Assisted plugins: List<Plugin>,
+    private val presenter: RoomDetailsPresenter,
+    private val room: MatrixRoom,
+) : Node(buildContext, plugins = plugins) {
+
+    private fun onShareRoom(context: Context) {
+        val alias = room.alias ?: room.alternativeAliases.firstOrNull()
+        val permalinkResult = alias?.let { PermalinkBuilder.permalinkForRoomAlias(it) }
+            ?: PermalinkBuilder.permalinkForRoomId(room.roomId)
+        permalinkResult.onSuccess { permalink ->
+            startSharePlainTextIntent(
+                context = context,
+                activityResultLauncher = null,
+                chooserTitle = context.getString(R.string.screen_room_details_share_room_title),
+                text = permalink,
+                noActivityFoundMessage = context.getString(StringR.string.error_no_compatible_app_found)
+            )
+        }
+    }
+
+    @Composable
+    override fun View(modifier: Modifier) {
+        val context = LocalContext.current
+        val state = presenter.present()
+        RoomDetailsView(
+            state = state,
+            modifier = modifier,
+            goBack = { navigateUp() },
+            onShareRoom = { onShareRoom(context) },
+        )
+    }
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsPresenter.kt

@@ -0,0 +1,43 @@
+/*
+ * 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.roomdetails.impl
+
+import androidx.compose.runtime.Composable
+import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.matrix.api.room.MatrixRoom
+import javax.inject.Inject
+
+class RoomDetailsPresenter @Inject constructor(
+    private val room: MatrixRoom,
+) : Presenter<RoomDetailsState> {
+
+    @Composable
+    override fun present(): RoomDetailsState {
+//        fun handleEvents(event: RoomDetailsEvent) {}
+
+        return RoomDetailsState(
+            roomId = room.roomId.value,
+            roomName = room.name ?: room.displayName,
+            roomAlias = room.alias,
+            roomAvatarUrl = room.avatarUrl,
+            roomTopic = room.topic,
+            memberCount = room.members.size,
+            isEncrypted = room.isEncrypted,
+//            eventSink = ::handleEvents
+        )
+    }
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsState.kt

@@ -0,0 +1,28 @@
+/*
+ * 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.roomdetails.impl
+
+data class RoomDetailsState(
+    val roomId: String,
+    val roomName: String,
+    val roomAlias: String?,
+    val roomAvatarUrl: String?,
+    val roomTopic: String?,
+    val memberCount: Int,
+    val isEncrypted: Boolean,
+//    val eventSink: (RoomDetailsEvent) -> Unit
+)

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsStateProvider.kt

@@ -0,0 +1,45 @@
+/*
+ * 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.roomdetails.impl
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+
+open class RoomDetailsStateProvider : PreviewParameterProvider<RoomDetailsState> {
+    override val values: Sequence<RoomDetailsState>
+        get() = sequenceOf(
+            aRoomDetailsState(),
+            aRoomDetailsState().copy(roomTopic = null),
+            aRoomDetailsState().copy(isEncrypted = false),
+            aRoomDetailsState().copy(roomAlias = null),
+            // Add other state here
+        )
+}
+
+fun aRoomDetailsState() = RoomDetailsState(
+    roomId = "a room id",
+    roomName = "Marketing",
+    roomAlias = "#marketing:domain.com",
+    roomAvatarUrl = null,
+    roomTopic = "Welcome to #marketing, home of the Marketing team " +
+        "|| WIKI PAGE: https://domain.org/wiki/Marketing " +
+        "|| MAIL iki/Marketing " +
+        "|| MAI iki/Marketing " +
+        "|| MAI iki/Marketing...",
+    memberCount = 32,
+    isEncrypted = true,
+//    eventSink = {}
+)

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -0,0 +1,204 @@
+/*
+ * 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.roomdetails.impl
+
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.icons.outlined.Person
+import androidx.compose.material.icons.outlined.PersonAddAlt
+import androidx.compose.material.icons.outlined.Share
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.ElementTextStyles
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
+import io.element.android.libraries.designsystem.components.preferences.PreferenceText
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.designsystem.theme.components.Scaffold
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RoomDetailsView(
+    state: RoomDetailsState,
+    goBack: () -> Unit,
+    onShareRoom: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Scaffold(
+        modifier = modifier,
+        topBar = {
+            TopAppBar(title = { }, navigationIcon = { BackButton(onClick = goBack) })
+        },
+    ) { padding ->
+        Column(modifier = Modifier
+            .padding(padding)
+            .verticalScroll(rememberScrollState())
+        ) {
+            HeaderSection(
+                avatarUrl = state.roomAvatarUrl,
+                roomId = state.roomId,
+                roomName = state.roomName,
+                roomAlias = state.roomAlias
+            )
+
+            ShareSection(onShareRoom = onShareRoom)
+
+            if (state.roomTopic != null) {
+                TopicSection(roomTopic = state.roomTopic)
+            }
+
+            MembersSection(memberCount = state.memberCount)
+
+            if (state.isEncrypted) {
+                SecuritySection()
+            }
+
+            OtherActionsSection()
+        }
+    }
+}
+
+@Composable
+internal fun ShareSection(onShareRoom: () -> Unit, modifier: Modifier = Modifier) {
+    PreferenceCategory(modifier = modifier) {
+        PreferenceText(
+            title = stringResource(R.string.screen_room_details_share_room_title),
+            icon = Icons.Outlined.Share,
+            onClick = onShareRoom,
+        )
+    }
+}
+
+@Composable
+internal fun HeaderSection(
+    avatarUrl: String?,
+    roomId: String,
+    roomName: String,
+    roomAlias: String?,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+        Box(modifier = Modifier.size(70.dp)) {
+            Avatar(
+                avatarData = AvatarData(roomId, roomName, avatarUrl, AvatarSize.HUGE),
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+        Spacer(modifier = Modifier.height(30.dp))
+        Text(roomName, style = ElementTextStyles.Bold.title1)
+        if (roomAlias != null) {
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(roomAlias, style = ElementTextStyles.Regular.body, color = MaterialTheme.colorScheme.secondary)
+        }
+        Spacer(Modifier.height(32.dp))
+    }
+}
+
+@Composable
+internal fun TopicSection(roomTopic: String, modifier: Modifier = Modifier) {
+    PreferenceCategory(title = stringResource(R.string.screen_room_details_topic_title), modifier = modifier) {
+        Text(
+            roomTopic,
+            modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 12.dp),
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.tertiary
+        )
+    }
+
+}
+
+@Composable
+internal fun MembersSection(memberCount: Int, modifier: Modifier = Modifier) {
+    PreferenceCategory(modifier = modifier) {
+        PreferenceText(
+            title = stringResource(R.string.screen_room_details_people_title),
+            icon = Icons.Outlined.Person,
+            currentValue = memberCount.toString(),
+        )
+        PreferenceText(
+            title = stringResource(R.string.screen_room_details_invite_people_title),
+            icon = Icons.Outlined.PersonAddAlt,
+        )
+    }
+}
+
+@Composable
+internal fun SecuritySection(modifier: Modifier = Modifier) {
+    PreferenceCategory(title = stringResource(R.string.screen_room_details_security_title), modifier = modifier) {
+        PreferenceText(
+            title = stringResource(R.string.screen_room_details_encryption_enabled_title),
+            subtitle = stringResource(R.string.screen_room_details_encryption_enabled_subtitle),
+            icon = Icons.Outlined.Lock,
+        )
+    }
+}
+
+@Composable
+internal fun OtherActionsSection(modifier: Modifier = Modifier) {
+    PreferenceCategory(showDivider = false, modifier = modifier) {
+        PreferenceText(
+            title = stringResource(R.string.screen_room_details_leave_room_title),
+            icon = ImageVector.vectorResource(R.drawable.ic_door_open),
+            tintColor = LocalColors.current.textActionCritical,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun RoomDetailsLightPreview(@PreviewParameter(RoomDetailsStateProvider::class) state: RoomDetailsState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@Preview
+@Composable
+fun RoomDetailsDarkPreview(@PreviewParameter(RoomDetailsStateProvider::class) state: RoomDetailsState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@Composable
+private fun ContentToPreview(state: RoomDetailsState) {
+    RoomDetailsView(
+        state = state,
+        goBack = {},
+        onShareRoom = {},
+    )
+}

features/roomdetails/impl/src/main/res/drawable/ic_door_open.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M440,520Q457,520 468.5,508.5Q480,497 480,480Q480,463 468.5,451.5Q457,440 440,440Q423,440 411.5,451.5Q400,463 400,480Q400,497 411.5,508.5Q423,520 440,520ZM280,840L280,760L520,720Q520,720 520,720Q520,720 520,720L520,275Q520,260 511,248Q502,236 488,234L280,200L280,120L500,156Q544,164 572,197Q600,230 600,274L600,718Q600,747 581,769.5Q562,792 533,797L280,840ZM280,760L680,760L680,200Q680,200 680,200Q680,200 680,200L280,200Q280,200 280,200Q280,200 280,200L280,760ZM160,840Q143,840 131.5,828.5Q120,817 120,800Q120,783 131.5,771.5Q143,760 160,760L200,760L200,200Q200,166 223.5,143Q247,120 280,120L680,120Q714,120 737,143Q760,166 760,200L760,760L800,760Q817,760 828.5,771.5Q840,783 840,800Q840,817 828.5,828.5Q817,840 800,840L160,840Z"/>
+</vector>

features/roomdetails/impl/src/main/res/values/localazy.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <string name="screen_room_details_encryption_enabled_subtitle">"Messages are secured with locks. Only you and the recipients have the unique keys to unlock them."</string>
+  <string name="screen_room_details_encryption_enabled_title">"Message encryption enabled"</string>
+  <string name="screen_room_details_invite_people_title">"Invite people"</string>
+  <string name="screen_room_details_leave_room_title">"Leave room"</string>
+  <string name="screen_room_details_people_title">"People"</string>
+  <string name="screen_room_details_security_title">"Security"</string>
+  <string name="screen_room_details_share_room_title">"Share room"</string>
+  <string name="screen_room_details_topic_title">"Topic"</string>
+</resources>

features/roomdetails/impl/src/test/kotlin/io/element/android/features/roomdetails/RoomDetailsPresenterTests.kt

@@ -0,0 +1,79 @@
+/*
+ * 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.roomdetails
+
+import app.cash.molecule.RecompositionClock
+import app.cash.molecule.moleculeFlow
+import app.cash.turbine.test
+import com.google.common.truth.Truth
+import io.element.android.features.roomdetails.impl.RoomDetailsPresenter
+import io.element.android.libraries.matrix.api.core.RoomId
+import io.element.android.libraries.matrix.api.room.RoomMember
+import io.element.android.libraries.matrix.test.A_ROOM_ID
+import io.element.android.libraries.matrix.test.A_ROOM_NAME
+import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
+import kotlinx.coroutines.test.runTest
+import org.junit.Test
+
+class RoomDetailsPresenterTests {
+    @Test
+    fun `present - initial state is created from room info`() = runTest {
+        val room = aMatrixRoom()
+        val presenter = RoomDetailsPresenter(room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            Truth.assertThat(initialState.roomId).isEqualTo(room.roomId.value)
+            Truth.assertThat(initialState.roomName).isEqualTo(room.name)
+            Truth.assertThat(initialState.roomAvatarUrl).isEqualTo(room.avatarUrl)
+            Truth.assertThat(initialState.roomTopic).isEqualTo(room.topic)
+            Truth.assertThat(initialState.memberCount).isEqualTo(room.members.count())
+            Truth.assertThat(initialState.isEncrypted).isEqualTo(room.isEncrypted)
+        }
+    }
+
+    @Test
+    fun `present - initial state with no room name`() = runTest {
+        val room = aMatrixRoom(name = null)
+        val presenter = RoomDetailsPresenter(room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            Truth.assertThat(initialState.roomName).isEqualTo(room.displayName)
+        }
+    }
+}
+
+fun aMatrixRoom(
+    roomId: RoomId = A_ROOM_ID,
+    name: String? = A_ROOM_NAME,
+    displayName: String = "A fallback display name",
+    topic: String? = "A topic",
+    avatarUrl: String? = "https://matrix.org/avatar.jpg",
+    members: List<RoomMember> = emptyList(),
+    isEncrypted: Boolean = true,
+) = FakeMatrixRoom(
+    roomId = roomId,
+    name = name,
+    displayName = displayName,
+    topic = topic,
+    avatarUrl = avatarUrl,
+    members = members,
+    isEncrypted = isEncrypted,
+)