List user define room notification settings

- List user define room notification settings - Add new user defined style of the room notification settings view - Add navigation to expose room notification settings ui to the global settings - Add Progress indicators - Improve error handing
2023-10-17 16:08:08 +01:00
parent a9d87da1ff
commit b634db1772
25 changed files with 375 additions and 70 deletions
--- a/appnav/src/main/kotlin/io/element/android/appnav/LoggedInFlowNode.kt
+++ b/appnav/src/main/kotlin/io/element/android/appnav/LoggedInFlowNode.kt
@@ -244,6 +244,10 @@ class LoggedInFlowNode @AssistedInject constructor(
                    override fun onVerifyClicked() {
                        backstack.push(NavTarget.VerifySession)
                    }
+
+                    override fun onOpenRoomNotificationSettings(roomId: RoomId) {
+                        backstack.push(NavTarget.Room(roomId, initialElement = RoomLoadedFlowNode.NavTarget.RoomNotificationSettings))
+                    }
                }
                preferencesEntryPoint.nodeBuilder(this, buildContext)
                    .callback(callback)
--- a/appnav/src/main/kotlin/io/element/android/appnav/room/RoomLoadedFlowNode.kt
+++ b/appnav/src/main/kotlin/io/element/android/appnav/room/RoomLoadedFlowNode.kt
@@ -142,6 +142,10 @@ class RoomLoadedFlowNode @AssistedInject constructor(
                val inputs = RoomDetailsEntryPoint.Inputs(RoomDetailsEntryPoint.InitialTarget.RoomMemberDetails(navTarget.userId))
                roomDetailsEntryPoint.createNode(this, buildContext, inputs, emptyList())
            }
+            NavTarget.RoomNotificationSettings -> {
+                val inputs = RoomDetailsEntryPoint.Inputs(RoomDetailsEntryPoint.InitialTarget.RoomNotificationSettings)
+                roomDetailsEntryPoint.createNode(this, buildContext, inputs, emptyList())
+            }
        }
    }

@@ -154,6 +158,9 @@ class RoomLoadedFlowNode @AssistedInject constructor(

        @Parcelize
        data class RoomMemberDetails(val userId: UserId) : NavTarget
+
+        @Parcelize
+        data object RoomNotificationSettings : NavTarget
    }

    @Composable
--- a/features/preferences/api/src/main/kotlin/io/element/android/features/preferences/api/PreferencesEntryPoint.kt
+++ b/features/preferences/api/src/main/kotlin/io/element/android/features/preferences/api/PreferencesEntryPoint.kt
@@ -20,6 +20,7 @@ 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
+import io.element.android.libraries.matrix.api.core.RoomId

 interface PreferencesEntryPoint : FeatureEntryPoint {

@@ -33,5 +34,6 @@ interface PreferencesEntryPoint : FeatureEntryPoint {
    interface Callback : Plugin {
        fun onOpenBugReport()
        fun onVerifyClicked()
+        fun onOpenRoomNotificationSettings(roomId: RoomId)
    }
 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/PreferencesFlowNode.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/PreferencesFlowNode.kt
@@ -43,6 +43,7 @@ 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.SessionScope
+import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.user.MatrixUser
 import kotlinx.parcelize.Parcelize

@@ -152,8 +153,13 @@ class PreferencesFlowNode @AssistedInject constructor(
                createNode<NotificationSettingsNode>(buildContext, listOf(notificationSettingsCallback))
            }
            is NavTarget.EditDefaultNotificationSetting -> {
+                val callback = object : EditDefaultNotificationSettingNode.Callback {
+                    override fun openRoomNotificationSettings(roomId: RoomId) {
+                        plugins<PreferencesEntryPoint.Callback>().forEach { it.onOpenRoomNotificationSettings(roomId) }
+                    }
+                }
                val input = EditDefaultNotificationSettingNode.Inputs(navTarget.isOneToOne)
-                createNode<EditDefaultNotificationSettingNode>(buildContext, plugins = listOf(input))
+                createNode<EditDefaultNotificationSettingNode>(buildContext, plugins = listOf(input, callback))
            }
            NavTarget.AdvancedSettings -> {
                createNode<AdvancedSettingsNode>(buildContext)
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsEvents.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsEvents.kt
@@ -24,4 +24,5 @@ sealed interface NotificationSettingsEvents {
    data class SetCallNotificationsEnabled(val enabled: Boolean) : NotificationSettingsEvents
    data object FixConfigurationMismatch : NotificationSettingsEvents
    data object ClearConfigurationMismatchError : NotificationSettingsEvents
+    data object ClearNotificationChangeError : NotificationSettingsEvents
 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsPresenter.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsPresenter.kt
@@ -23,7 +23,9 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.architecture.runCatchingUpdatingState
 import io.element.android.libraries.matrix.api.MatrixClient
 import io.element.android.libraries.matrix.api.notificationsettings.NotificationSettingsService
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
@@ -50,6 +52,7 @@ class NotificationSettingsPresenter @Inject constructor(
        val systemNotificationsEnabled: MutableState<Boolean> = remember {
            mutableStateOf(systemNotificationsEnabledProvider.notificationsEnabled())
        }
+        val changeNotificationSettingAction: MutableState<Async<Unit>> = remember { mutableStateOf(Async.Uninitialized) }

        val localCoroutineScope = rememberCoroutineScope()
        val appNotificationsEnabled = userPushStore
@@ -67,8 +70,12 @@ class NotificationSettingsPresenter @Inject constructor(

        fun handleEvents(event: NotificationSettingsEvents) {
            when (event) {
-                is NotificationSettingsEvents.SetAtRoomNotificationsEnabled -> localCoroutineScope.setAtRoomNotificationsEnabled(event.enabled)
-                is NotificationSettingsEvents.SetCallNotificationsEnabled -> localCoroutineScope.setCallNotificationsEnabled(event.enabled)
+                is NotificationSettingsEvents.SetAtRoomNotificationsEnabled -> {
+                    localCoroutineScope.setAtRoomNotificationsEnabled(event.enabled, changeNotificationSettingAction)
+                }
+                is NotificationSettingsEvents.SetCallNotificationsEnabled -> {
+                    localCoroutineScope.setCallNotificationsEnabled(event.enabled, changeNotificationSettingAction)
+                }
                is NotificationSettingsEvents.SetNotificationsEnabled -> localCoroutineScope.setNotificationsEnabled(userPushStore, event.enabled)
                NotificationSettingsEvents.ClearConfigurationMismatchError -> {
                    matrixSettings.value = NotificationSettingsState.MatrixSettings.Invalid(fixFailed = false)
@@ -77,6 +84,7 @@ class NotificationSettingsPresenter @Inject constructor(
                NotificationSettingsEvents.RefreshSystemNotificationsEnabled -> {
                    systemNotificationsEnabled.value = systemNotificationsEnabledProvider.notificationsEnabled()
                }
+                NotificationSettingsEvents.ClearNotificationChangeError -> changeNotificationSettingAction.value = Async.Uninitialized
            }
        }

@@ -86,6 +94,7 @@ class NotificationSettingsPresenter @Inject constructor(
                systemNotificationsEnabled = systemNotificationsEnabled.value,
                appNotificationsEnabled = appNotificationsEnabled.value
            ),
+            changeNotificationSettingAction = changeNotificationSettingAction.value,
            eventSink = ::handleEvents
        )
    }
@@ -154,12 +163,16 @@ class NotificationSettingsPresenter @Inject constructor(
        )
    }

-    private fun CoroutineScope.setAtRoomNotificationsEnabled(enabled: Boolean) = launch {
-        notificationSettingsService.setRoomMentionEnabled(enabled)
+    private fun CoroutineScope.setAtRoomNotificationsEnabled(enabled: Boolean, action: MutableState<Async<Unit>>) = launch {
+        suspend {
+            notificationSettingsService.setRoomMentionEnabled(enabled).getOrThrow()
+        }.runCatchingUpdatingState(action)
    }

-    private fun CoroutineScope.setCallNotificationsEnabled(enabled: Boolean) = launch {
-        notificationSettingsService.setCallEnabled(enabled)
+    private fun CoroutineScope.setCallNotificationsEnabled(enabled: Boolean, action: MutableState<Async<Unit>>) = launch {
+        suspend {
+            notificationSettingsService.setCallEnabled(enabled).getOrThrow()
+        }.runCatchingUpdatingState(action)
    }

    private fun CoroutineScope.setNotificationsEnabled(userPushStore: UserPushStore, enabled: Boolean) = launch {
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsState.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsState.kt
@@ -17,12 +17,14 @@
 package io.element.android.features.preferences.impl.notifications

 import androidx.compose.runtime.Immutable
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode

@Immutable
 data class NotificationSettingsState(
    val matrixSettings: MatrixSettings,
    val appSettings: AppSettings,
+    val changeNotificationSettingAction: Async<Unit>,
    val eventSink: (NotificationSettingsEvents) -> Unit,
 ) {
    sealed interface MatrixSettings {
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsStateProvider.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsStateProvider.kt
@@ -17,6 +17,7 @@
 package io.element.android.features.preferences.impl.notifications

 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode

 open class NotificationSettingsStateProvider : PreviewParameterProvider<NotificationSettingsState> {
@@ -37,5 +38,6 @@ fun aNotificationSettingsState() = NotificationSettingsState(
        systemNotificationsEnabled = false,
        appNotificationsEnabled = true,
    ),
+    changeNotificationSettingAction = Async.Uninitialized,
    eventSink = {}
 )
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsView.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/NotificationSettingsView.kt
@@ -36,6 +36,8 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.Lifecycle
 import io.element.android.libraries.androidutils.system.startNotificationSettingsIntent
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
@@ -91,6 +93,19 @@ fun NotificationSettingsView(
 //                onCallsNotificationsChanged = { state.eventSink(NotificationSettingsEvents.SetCallNotificationsEnabled(it)) },
            )
        }
+        when (state.changeNotificationSettingAction) {
+            is Async.Loading -> {
+                ProgressDialog()
+            }
+            is Async.Failure -> {
+                ErrorDialog(
+                    title = stringResource(CommonStrings.dialog_title_error),
+                    content = stringResource(CommonStrings.screen_notification_settings_edit_failed_updating_default_mode),
+                    onDismiss = { state.eventSink(NotificationSettingsEvents.ClearNotificationChangeError) },
+                )
+            }
+            else -> Unit
+        }
    }
 }

--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingNode.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingNode.kt
@@ -21,12 +21,14 @@ 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.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
 import io.element.android.libraries.di.SessionScope
+import io.element.android.libraries.matrix.api.core.RoomId

@ContributesNode(SessionScope::class)
 class EditDefaultNotificationSettingNode @AssistedInject constructor(
@@ -35,20 +37,30 @@ class EditDefaultNotificationSettingNode @AssistedInject constructor(
    presenterFactory: EditDefaultNotificationSettingPresenter.Factory
 ) : Node(buildContext, plugins = plugins) {

+    interface Callback : Plugin {
+        fun openRoomNotificationSettings(roomId: RoomId)
+    }
+
    data class Inputs(
        val isOneToOne: Boolean
    ) : NodeInputs

    private val inputs = inputs<Inputs>()
+    private val callbacks = plugins<Callback>()
    private val presenter = presenterFactory.create(inputs.isOneToOne)

+    private fun openRoomNotificationSettings(roomId: RoomId) {
+        callbacks.forEach { it.openRoomNotificationSettings(roomId) }
+    }
+
    @Composable
    override fun View(modifier: Modifier) {
        val state = presenter.present()
        EditDefaultNotificationSettingView(
            state = state,
+            openRoomNotificationSettings = { openRoomNotificationSettings(it) },
            onBackPressed = ::navigateUp,
-            modifier = modifier
+            modifier = modifier,
        )
    }
 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingPresenter.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingPresenter.kt
@@ -25,7 +25,9 @@ import androidx.compose.runtime.rememberCoroutineScope
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.architecture.runCatchingUpdatingState
 import io.element.android.libraries.matrix.api.MatrixClient
 import io.element.android.libraries.matrix.api.notificationsettings.NotificationSettingsService
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
@@ -57,6 +59,8 @@ class EditDefaultNotificationSettingPresenter @AssistedInject constructor(
            mutableStateOf(null)
        }

+        val changeNotificationSettingAction: MutableState<Async<Unit>> = remember { mutableStateOf(Async.Uninitialized) }
+
        val roomsWithUserDefinedMode: MutableState<List<RoomSummary.Filled>> = remember {
            mutableStateOf(listOf())
        }
@@ -70,7 +74,10 @@ class EditDefaultNotificationSettingPresenter @AssistedInject constructor(

        fun handleEvents(event: EditDefaultNotificationSettingStateEvents) {
            when (event) {
-                is EditDefaultNotificationSettingStateEvents.SetNotificationMode -> localCoroutineScope.setDefaultNotificationMode(event.mode)
+                is EditDefaultNotificationSettingStateEvents.SetNotificationMode -> {
+                    localCoroutineScope.setDefaultNotificationMode(event.mode, changeNotificationSettingAction)
+                }
+                EditDefaultNotificationSettingStateEvents.ClearError -> changeNotificationSettingAction.value = Async.Uninitialized
            }
        }

@@ -78,6 +85,7 @@ class EditDefaultNotificationSettingPresenter @AssistedInject constructor(
            isOneToOne = isOneToOne,
            mode = mode.value,
            roomsWithUserDefinedMode = roomsWithUserDefinedMode.value,
+            changeNotificationSettingAction = changeNotificationSettingAction.value,
            eventSink = ::handleEvents
        )
    }
@@ -105,9 +113,13 @@ class EditDefaultNotificationSettingPresenter @AssistedInject constructor(
            .launchIn(this)
    }

-    private fun CoroutineScope.updateRoomsWithUserDefinedMode(summaries: List<RoomSummary>, roomsWithUserDefinedMode: MutableState<List<RoomSummary.Filled>>) = launch {
-        val roomWithUserDefinedRules = notificationSettingsService.getRoomsWithUserDefinedRules().getOrThrow().toSet()
-        roomsWithUserDefinedMode.value = summaries
+    private fun CoroutineScope.updateRoomsWithUserDefinedMode(
+        summaries: List<RoomSummary>,
+        roomsWithUserDefinedMode: MutableState<List<RoomSummary.Filled>>
+    ) = launch {
+        val roomWithUserDefinedRules: Set<String> = notificationSettingsService.getRoomsWithUserDefinedRules().getOrThrow().toSet()
+
+        val sortedSummaries = summaries
            .filterIsInstance<RoomSummary.Filled>()
            .filter {
                val room = matrixClient.getRoom(it.details.roomId) ?: return@filter false
@@ -115,12 +127,16 @@ class EditDefaultNotificationSettingPresenter @AssistedInject constructor(
            }
            // locale sensitive sorting
            .sortedWith(compareBy(Collator.getInstance()){ it.details.name })
+
+        roomsWithUserDefinedMode.value = sortedSummaries
    }

-    private fun CoroutineScope.setDefaultNotificationMode(mode: RoomNotificationMode) = launch {
-        // On modern clients, we don't have different settings for encrypted and non-encrypted rooms (Legacy clients did).
-        notificationSettingsService.setDefaultRoomNotificationMode(isEncrypted = true, mode = mode, isOneToOne = isOneToOne)
-        notificationSettingsService.setDefaultRoomNotificationMode(isEncrypted = false, mode = mode, isOneToOne = isOneToOne)
+    private fun CoroutineScope.setDefaultNotificationMode(mode: RoomNotificationMode,  action: MutableState<Async<Unit>>) = launch {
+        suspend {
+            // On modern clients, we don't have different settings for encrypted and non-encrypted rooms (Legacy clients did).
+            notificationSettingsService.setDefaultRoomNotificationMode(isEncrypted = true, mode = mode, isOneToOne = isOneToOne).getOrThrow()
+            notificationSettingsService.setDefaultRoomNotificationMode(isEncrypted = false, mode = mode, isOneToOne = isOneToOne).getOrThrow()
+        }.runCatchingUpdatingState(action)
    }

 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingState.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingState.kt
@@ -16,6 +16,7 @@

 package io.element.android.features.preferences.impl.notifications.edit

+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.matrix.api.roomlist.RoomSummary

@@ -23,5 +24,6 @@ data class EditDefaultNotificationSettingState(
    val isOneToOne: Boolean,
    val mode: RoomNotificationMode?,
    val roomsWithUserDefinedMode: List<RoomSummary.Filled>,
+    val changeNotificationSettingAction: Async<Unit>,
    val eventSink: (EditDefaultNotificationSettingStateEvents) -> Unit,
 )
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingStateEvents.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingStateEvents.kt
@@ -20,4 +20,5 @@ import io.element.android.libraries.matrix.api.room.RoomNotificationMode

 sealed interface EditDefaultNotificationSettingStateEvents {
    data class SetNotificationMode(val mode: RoomNotificationMode): EditDefaultNotificationSettingStateEvents
+    data object ClearError: EditDefaultNotificationSettingStateEvents
 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingView.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingView.kt
@@ -17,19 +17,17 @@
 package io.element.android.features.preferences.impl.notifications.edit

 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.features.preferences.impl.notifications.NotificationSettingsState
-import io.element.android.features.preferences.impl.notifications.NotificationSettingsStateProvider
-import io.element.android.features.preferences.impl.notifications.NotificationSettingsView
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.designsystem.components.ProgressDialog
 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.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceView
@@ -37,6 +35,7 @@ import io.element.android.libraries.designsystem.preview.DayNightPreviews
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.theme.components.ListItem
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.ui.strings.CommonStrings

@@ -47,11 +46,12 @@ import io.element.android.libraries.ui.strings.CommonStrings
@Composable
 fun EditDefaultNotificationSettingView(
    state: EditDefaultNotificationSettingState,
+    openRoomNotificationSettings:(roomId: RoomId) -> Unit,
    onBackPressed: () -> Unit,
    modifier: Modifier = Modifier,
 ) {

-    val title = if(state.isOneToOne) {
+    val title = if (state.isOneToOne) {
        CommonStrings.screen_notification_settings_direct_chats
    } else {
        CommonStrings.screen_notification_settings_group_chats
@@ -65,7 +65,7 @@ fun EditDefaultNotificationSettingView(
        // Only ALL_MESSAGES and MENTIONS_AND_KEYWORDS_ONLY are valid global defaults.
        val validModes = listOf(RoomNotificationMode.ALL_MESSAGES, RoomNotificationMode.MENTIONS_AND_KEYWORDS_ONLY)

-        val categoryTitle = if(state.isOneToOne) {
+        val categoryTitle = if (state.isOneToOne) {
            CommonStrings.screen_notification_settings_edit_screen_direct_section_header
        } else {
            CommonStrings.screen_notification_settings_edit_screen_group_section_header
@@ -84,46 +84,64 @@ fun EditDefaultNotificationSettingView(
                }
            }
        }
-        if(state.roomsWithUserDefinedMode.isNotEmpty()) {
+        if (state.roomsWithUserDefinedMode.isNotEmpty()) {
            PreferenceCategory(title = stringResource(id = CommonStrings.screen_notification_settings_edit_custom_settings_section_title)) {
-                LazyColumn {
-                    items(state.roomsWithUserDefinedMode) { summary ->
-                        val subtitle = when (summary.details.notificationMode) {
-                            RoomNotificationMode.ALL_MESSAGES -> stringResource(id = CommonStrings.screen_notification_settings_edit_mode_all_messages)
-                            RoomNotificationMode.MENTIONS_AND_KEYWORDS_ONLY -> stringResource(id = CommonStrings.screen_notification_settings_edit_mode_mentions_and_keywords)
-                            RoomNotificationMode.MUTE -> stringResource(id = CommonStrings.common_mute)
-                            null -> ""
+                state.roomsWithUserDefinedMode.forEach { summary ->
+                    val subtitle = when (summary.details.notificationMode) {
+                        RoomNotificationMode.ALL_MESSAGES -> stringResource(id = CommonStrings.screen_notification_settings_edit_mode_all_messages)
+                        RoomNotificationMode.MENTIONS_AND_KEYWORDS_ONLY -> {
+                            stringResource(id = CommonStrings.screen_notification_settings_edit_mode_mentions_and_keywords)
                        }
-                        val avatarData = AvatarData(
-                            id = summary.identifier(),
-                            name = summary.details.name,
-                            url = summary.details.avatarURLString,
-                            size = AvatarSize.CustomRoomNotificationSetting,
-                        )
-                        ListItem(
-                            headlineContent = {
-                                Text(text = summary.details.name)
-                            },
-                            supportingContent = {
-                                Text(text = subtitle)
-                            },
-                            leadingContent = ListItemContent.Custom {
-                                Avatar(avatarData = avatarData)
-                            }
-                        )
+                        RoomNotificationMode.MUTE -> stringResource(id = CommonStrings.common_mute)
+                        null -> ""
                    }
+                    val avatarData = AvatarData(
+                        id = summary.identifier(),
+                        name = summary.details.name,
+                        url = summary.details.avatarURLString,
+                        size = AvatarSize.CustomRoomNotificationSetting,
+                    )
+                    ListItem(
+                        headlineContent = {
+                            Text(text = summary.details.name)
+                        },
+                        supportingContent = {
+                            Text(text = subtitle)
+                        },
+                        leadingContent = ListItemContent.Custom {
+                            Avatar(avatarData = avatarData)
+                        },
+                        onClick = {
+                            openRoomNotificationSettings(summary.details.roomId)
+                        }
+                    )
                }
            }
        }
-
+        when (state.changeNotificationSettingAction) {
+            is Async.Loading -> {
+                ProgressDialog()
+            }
+            is Async.Failure -> {
+                ErrorDialog(
+                    title = stringResource(CommonStrings.dialog_title_error),
+                    content = stringResource(CommonStrings.screen_notification_settings_edit_failed_updating_default_mode),
+                    onDismiss = { state.eventSink(EditDefaultNotificationSettingStateEvents.ClearError) },
+                )
+            }
+            else -> Unit
+        }
    }
 }

@DayNightPreviews
@Composable
-internal fun EditDefaultNotificationSettingViewPreview(@PreviewParameter(EditDefaultNotificationSettingsStateProvider::class) state: EditDefaultNotificationSettingState) = ElementPreview {
+internal fun EditDefaultNotificationSettingViewPreview(
+    @PreviewParameter(EditDefaultNotificationSettingsStateProvider::class) state: EditDefaultNotificationSettingState
+) = ElementPreview {
    EditDefaultNotificationSettingView(
        state = state,
+        openRoomNotificationSettings = {},
        onBackPressed = {},
    )
 }
--- a/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingsStateProvider.kt
+++ b/features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/notifications/edit/EditDefaultNotificationSettingsStateProvider.kt
@@ -17,6 +17,7 @@
 package io.element.android.features.preferences.impl.notifications.edit

 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.matrix.api.roomlist.RoomSummary
@@ -33,6 +34,7 @@ fun anEditDefaultNotificationSettingsState() = EditDefaultNotificationSettingSta
    isOneToOne = false,
    mode = RoomNotificationMode.MENTIONS_AND_KEYWORDS_ONLY,
    roomsWithUserDefinedMode = listOf(aRoomSummary()),
+    changeNotificationSettingAction = Async.Uninitialized,
    eventSink = {}
 )

--- a/features/roomdetails/api/src/main/kotlin/io/element/android/features/roomdetails/api/RoomDetailsEntryPoint.kt
+++ b/features/roomdetails/api/src/main/kotlin/io/element/android/features/roomdetails/api/RoomDetailsEntryPoint.kt
@@ -33,6 +33,9 @@ interface RoomDetailsEntryPoint : FeatureEntryPoint {

        @Parcelize
        data class RoomMemberDetails(val roomMemberId: UserId) : InitialTarget
+
+        @Parcelize
+        data object RoomNotificationSettings : InitialTarget
    }

    data class Inputs(val initialElement: InitialTarget) : NodeInputs
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/DefaultRoomDetailsEntryPoint.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/DefaultRoomDetailsEntryPoint.kt
@@ -42,4 +42,5 @@ class DefaultRoomDetailsEntryPoint @Inject constructor() : RoomDetailsEntryPoint
 internal fun InitialTarget.toNavTarget() = when (this) {
    is InitialTarget.RoomDetails -> NavTarget.RoomDetails
    is InitialTarget.RoomMemberDetails -> NavTarget.RoomMemberDetails(roomMemberId)
+    is InitialTarget.RoomNotificationSettings -> NavTarget.RoomNotificationSettings(showUserDefinedSettingStyle = true)
 }
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.kt
@@ -68,7 +68,13 @@ class RoomDetailsFlowNode @AssistedInject constructor(
        data object InviteMembers : NavTarget

        @Parcelize
-        object RoomNotificationSettings : NavTarget
+        data class RoomNotificationSettings(
+            /**
+             * When presented from oursite the context of the room, the rooms settings UI is different.
+             * Figma designs: https://www.figma.com/file/0MMNu7cTOzLOlWb7ctTkv3/Element-X?type=design&node-id=5199-198932&mode=design&t=fTTvpuxYFjewYQOe-0
+             */
+            val showUserDefinedSettingStyle: Boolean
+        ) : NavTarget

        @Parcelize
        data class RoomMemberDetails(val roomMemberId: UserId) : NavTarget
@@ -91,7 +97,7 @@ class RoomDetailsFlowNode @AssistedInject constructor(
                    }

                    override fun openRoomNotificationSettings() {
-                        backstack.push(NavTarget.RoomNotificationSettings)
+                        backstack.push(NavTarget.RoomNotificationSettings(showUserDefinedSettingStyle = false))
                    }
                }
                createNode<RoomDetailsNode>(buildContext, listOf(roomDetailsCallback))
@@ -118,8 +124,9 @@ class RoomDetailsFlowNode @AssistedInject constructor(
                createNode<RoomInviteMembersNode>(buildContext)
            }

-            NavTarget.RoomNotificationSettings -> {
-                createNode<RoomNotificationSettingsNode>(buildContext)
+            is NavTarget.RoomNotificationSettings -> {
+                val plugins = listOf(RoomNotificationSettingsNode.RoomNotificationSettingInput(navTarget.showUserDefinedSettingStyle))
+                createNode<RoomNotificationSettingsNode>(buildContext, plugins)
            }

            is NavTarget.RoomMemberDetails -> {
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsEvents.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsEvents.kt
@@ -21,4 +21,6 @@ import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 sealed interface RoomNotificationSettingsEvents {
    data class RoomNotificationModeChanged(val mode: RoomNotificationMode) : RoomNotificationSettingsEvents
    data class SetNotificationMode(val isDefault: Boolean): RoomNotificationSettingsEvents
+    data object DeleteCustomNotification: RoomNotificationSettingsEvents
+    data object ClearError: RoomNotificationSettingsEvents
 }
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsNode.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsNode.kt
@@ -26,6 +26,8 @@ import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import im.vector.app.features.analytics.plan.MobileScreen
 import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.architecture.NodeInputs
+import io.element.android.libraries.architecture.inputs
 import io.element.android.libraries.di.RoomScope
 import io.element.android.services.analytics.api.AnalyticsService

@@ -37,6 +39,12 @@ class RoomNotificationSettingsNode @AssistedInject constructor(
    private val analyticsService: AnalyticsService,
 ) : Node(buildContext, plugins = plugins) {

+    data class RoomNotificationSettingInput(
+        val showUserDefinedSettingStyle: Boolean
+    ) : NodeInputs
+
+    private val inputs = inputs<RoomNotificationSettingInput>()
+
    init {
        lifecycle.subscribe(
            onResume = {
@@ -48,10 +56,18 @@ class RoomNotificationSettingsNode @AssistedInject constructor(
    @Composable
    override fun View(modifier: Modifier) {
        val state = presenter.present()
-        RoomNotificationSettingsView(
-            state = state,
-            modifier = modifier,
-            onBackPressed = this::navigateUp,
-        )
+        if(inputs.showUserDefinedSettingStyle) {
+            UserDefinedRoomNotificationSettingsView(
+                state = state,
+                modifier = modifier,
+                onBackPressed = this::navigateUp,
+            )
+        } else {
+            RoomNotificationSettingsView(
+                state = state,
+                modifier = modifier,
+                onBackPressed = this::navigateUp,
+            )
+        }
    }
 }
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsPresenter.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsPresenter.kt
@@ -22,9 +22,12 @@ import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.architecture.runCatchingUpdatingState
 import io.element.android.libraries.matrix.api.notificationsettings.NotificationSettingsService
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
@@ -42,16 +45,18 @@ class RoomNotificationSettingsPresenter @Inject constructor(
    private val room: MatrixRoom,
    private val notificationSettingsService: NotificationSettingsService,
 ) : Presenter<RoomNotificationSettingsState> {
-
    @Composable
    override fun present(): RoomNotificationSettingsState {
        val defaultRoomNotificationMode: MutableState<RoomNotificationMode?> = rememberSaveable {
            mutableStateOf(null)
        }
        val localCoroutineScope = rememberCoroutineScope()
+        val changeNotificationSettingAction: MutableState<Async<Unit>> = remember { mutableStateOf(Async.Uninitialized) }
+        val deleteCustomNotificationSettingAction: MutableState<Async<Unit>> = remember { mutableStateOf(Async.Uninitialized) }

        LaunchedEffect(Unit) {
            getDefaultRoomNotificationMode(defaultRoomNotificationMode)
+            room.updateRoomNotificationSettings()
            observeNotificationSettings()
        }

@@ -60,23 +65,32 @@ class RoomNotificationSettingsPresenter @Inject constructor(
        fun handleEvents(event: RoomNotificationSettingsEvents) {
            when (event) {
                is RoomNotificationSettingsEvents.RoomNotificationModeChanged -> {
-                    localCoroutineScope.setRoomNotificationMode(event.mode)
+                    localCoroutineScope.setRoomNotificationMode(event.mode, changeNotificationSettingAction)
                }
                is RoomNotificationSettingsEvents.SetNotificationMode -> {
                    if (event.isDefault) {
-                        localCoroutineScope.restoreDefaultRoomNotificationMode()
+                        localCoroutineScope.restoreDefaultRoomNotificationMode(changeNotificationSettingAction)
                    } else {
                        defaultRoomNotificationMode.value?.let {
-                            localCoroutineScope.setRoomNotificationMode(it)
+                            localCoroutineScope.setRoomNotificationMode(it, changeNotificationSettingAction)
                        }
                    }
                }
+                is RoomNotificationSettingsEvents.DeleteCustomNotification -> {
+                    localCoroutineScope.restoreDefaultRoomNotificationMode(deleteCustomNotificationSettingAction)
+                }
+                RoomNotificationSettingsEvents.ClearError -> {
+                    changeNotificationSettingAction.value = Async.Uninitialized
+                }
            }
        }

        return RoomNotificationSettingsState(
+            roomName = room.displayName,
            roomNotificationSettings = roomNotificationSettingsState.roomNotificationSettings(),
            defaultRoomNotificationMode = defaultRoomNotificationMode.value,
+            changeNotificationSettingAction = changeNotificationSettingAction.value,
+            deleteCustomNotificationSettingAction = deleteCustomNotificationSettingAction.value,
            eventSink = ::handleEvents,
        )
    }
@@ -98,11 +112,15 @@ class RoomNotificationSettingsPresenter @Inject constructor(
        ).getOrThrow()
    }

-    private fun CoroutineScope.setRoomNotificationMode(mode: RoomNotificationMode) = launch {
-        notificationSettingsService.setRoomNotificationMode(room.roomId, mode)
+    private fun CoroutineScope.setRoomNotificationMode(mode: RoomNotificationMode, action: MutableState<Async<Unit>>) = launch {
+        suspend {
+            notificationSettingsService.setRoomNotificationMode(room.roomId, mode).getOrThrow()
+        }.runCatchingUpdatingState(action)
    }

-    private fun CoroutineScope.restoreDefaultRoomNotificationMode() = launch {
-        notificationSettingsService.restoreDefaultRoomNotificationMode(room.roomId)
+    private fun CoroutineScope.restoreDefaultRoomNotificationMode(action: MutableState<Async<Unit>>) = launch {
+        suspend {
+            notificationSettingsService.restoreDefaultRoomNotificationMode(room.roomId).getOrThrow()
+        }.runCatchingUpdatingState(action)
    }
 }
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsState.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsState.kt
@@ -16,11 +16,15 @@

 package io.element.android.features.roomdetails.impl.notificationsettings

+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.matrix.api.room.RoomNotificationSettings

 data class RoomNotificationSettingsState(
+    val roomName: String,
    val roomNotificationSettings: RoomNotificationSettings?,
    val defaultRoomNotificationMode: RoomNotificationMode?,
+    val changeNotificationSettingAction: Async<Unit>,
+    val deleteCustomNotificationSettingAction: Async<Unit>,
    val eventSink: (RoomNotificationSettingsEvents) -> Unit
 )
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsStateProvider.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsStateProvider.kt
@@ -17,6 +17,7 @@
 package io.element.android.features.roomdetails.impl.notificationsettings

 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.matrix.api.room.RoomNotificationSettings

@@ -24,10 +25,13 @@ internal class RoomNotificationSettingsStateProvider : PreviewParameterProvider<
    override val values: Sequence<RoomNotificationSettingsState>
        get() = sequenceOf(
            RoomNotificationSettingsState(
+                roomName = "Room 1",
                RoomNotificationSettings(
                    mode = RoomNotificationMode.MUTE,
                    isDefault = true),
                RoomNotificationMode.ALL_MESSAGES,
+                changeNotificationSettingAction = Async.Uninitialized,
+                deleteCustomNotificationSettingAction = Async.Uninitialized,
                eventSink = { },
            ),
        )
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsView.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/RoomNotificationSettingsView.kt
@@ -18,7 +18,6 @@ package io.element.android.features.roomdetails.impl.notificationsettings

 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -30,8 +29,11 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.roomdetails.impl.R
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.core.bool.orTrue
+import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
 import io.element.android.libraries.designsystem.components.preferences.PreferenceText
@@ -45,7 +47,6 @@ import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings

-@OptIn(ExperimentalLayoutApi::class)
@Composable
 fun RoomNotificationSettingsView(
    state: RoomNotificationSettingsState,
@@ -74,7 +75,6 @@ fun RoomNotificationSettingsView(
                null -> ""
            }

-
            PreferenceCategory(title = stringResource(id = R.string.screen_room_notification_settings_custom_settings_title)) {
                PreferenceSwitch(
                    isChecked = state.roomNotificationSettings?.isDefault.orTrue(),
@@ -102,6 +102,16 @@ fun RoomNotificationSettingsView(
                    )
                }
            }
+
+            when (state.changeNotificationSettingAction) {
+                is Async.Loading -> {
+                    ProgressDialog()
+                }
+                is Async.Failure -> {
+                    ShowChangeNotificationSettingError(state)
+                }
+                else -> Unit
+            }
        }
    }
 }
@@ -144,6 +154,15 @@ fun RoomNotificationSettingsOptions(
    }
 }

+@Composable
+fun ShowChangeNotificationSettingError(state: RoomNotificationSettingsState) {
+    ErrorDialog(
+        title = stringResource(CommonStrings.dialog_title_error),
+        content = stringResource(CommonStrings.screen_notification_settings_edit_failed_updating_default_mode),
+        onDismiss = { state.eventSink(RoomNotificationSettingsEvents.ClearError) },
+    )
+}
+
@DayNightPreviews
@Composable
 internal fun RoomNotificationSettingsPreview(
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/UserDefinedRoomNotificationSettingsView.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/UserDefinedRoomNotificationSettingsView.kt
@@ -0,0 +1,128 @@
+/*
+ * 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.notificationsettings
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.unit.dp
+import io.element.android.features.roomdetails.impl.R
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.designsystem.VectorIcons
+import io.element.android.libraries.designsystem.components.ProgressDialog
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.components.preferences.PreferenceText
+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
+
+@Composable
+fun UserDefinedRoomNotificationSettingsView(
+    state: RoomNotificationSettingsState,
+    modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit = {},
+) {
+    Scaffold(
+        modifier = modifier,
+        topBar = {
+            UserDefinedRoomNotificationSettingsTopBar(
+                roomName = state.roomName,
+                onBackPressed = { onBackPressed() }
+            )
+        }
+    ) { padding ->
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(padding)
+                .consumeWindowInsets(padding),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            if (state.roomNotificationSettings != null) {
+                RoomNotificationSettingsOptions(
+                    selected = state.roomNotificationSettings.mode,
+                    enabled = !state.roomNotificationSettings.isDefault,
+                    onOptionSelected = {
+                        state.eventSink(RoomNotificationSettingsEvents.RoomNotificationModeChanged(it.mode))
+                    },
+                )
+            }
+
+            PreferenceText(
+                title = stringResource(R.string.screen_room_notification_settings_edit_remove_setting),
+                icon = ImageVector.vectorResource(VectorIcons.Delete),
+                tintColor = MaterialTheme.colorScheme.error,
+                onClick = {
+                    state.eventSink(RoomNotificationSettingsEvents.DeleteCustomNotification)
+                }
+            )
+
+            when (state.changeNotificationSettingAction) {
+                is Async.Loading -> {
+                    ProgressDialog()
+                }
+                is Async.Failure -> {
+                    ShowChangeNotificationSettingError(state)
+                }
+                else -> Unit
+            }
+
+            when (state.deleteCustomNotificationSettingAction) {
+                is Async.Loading -> {
+                    ProgressDialog()
+                }
+                is Async.Failure -> {
+                    ShowChangeNotificationSettingError(state)
+                }
+                is Async.Success -> {
+                    LaunchedEffect(state.deleteCustomNotificationSettingAction) {
+                        onBackPressed()
+                    }
+                }
+                else -> Unit
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun UserDefinedRoomNotificationSettingsTopBar(
+    roomName: String,
+    modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit = {},
+) {
+    TopAppBar(
+        modifier = modifier,
+        title = {
+            Text(
+                text = roomName,
+            )
+        },
+        navigationIcon = { BackButton(onClick = onBackPressed) },
+    )
+}