Make the whole items in advanced settings screen clickable, standarize paddings (#2314)

* Make sure the whole item in advanced settings screen triggers the toggle action

* Fix UI changes when setting `onChecked` actions to null.

* Fix padding in invite member list items

* Remove redundant `CheckableUserRow` alternatives.

* Use 4dp for padding instead

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchMultipleUsersResultItem.kt

@@ -23,10 +23,11 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
-import io.element.android.libraries.matrix.ui.components.CheckableMatrixUserRow
-import io.element.android.libraries.matrix.ui.components.CheckableUnresolvedUserRow
+import io.element.android.libraries.matrix.ui.components.CheckableUserRow
+import io.element.android.libraries.matrix.ui.components.CheckableUserRowData
 import io.element.android.libraries.matrix.ui.components.aMatrixUser
 import io.element.android.libraries.matrix.ui.model.getAvatarData
+import io.element.android.libraries.matrix.ui.model.getBestName
 import io.element.android.libraries.usersearch.api.UserSearchResult
 
 @Composable
@@ -36,23 +37,24 @@ fun SearchMultipleUsersResultItem(
     onCheckedChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    if (searchResult.isUnresolved) {
-        CheckableUnresolvedUserRow(
-            checked = isUserSelected,
-            modifier = modifier,
+    val data = if (searchResult.isUnresolved) {
+        CheckableUserRowData.Unresolved(
             avatarData = searchResult.matrixUser.getAvatarData(AvatarSize.UserListItem),
             id = searchResult.matrixUser.userId.value,
-            onCheckedChange = onCheckedChange,
         )
     } else {
-        CheckableMatrixUserRow(
-            checked = isUserSelected,
-            modifier = modifier,
-            matrixUser = searchResult.matrixUser,
-            avatarSize = AvatarSize.UserListItem,
-            onCheckedChange = onCheckedChange,
+        CheckableUserRowData.Resolved(
+            name = searchResult.matrixUser.getBestName(),
+            subtext = if (searchResult.matrixUser.displayName.isNullOrEmpty()) null else searchResult.matrixUser.userId.value,
+            avatarData = searchResult.matrixUser.getAvatarData(AvatarSize.UserListItem),
         )
     }
+    CheckableUserRow(
+        checked = isUserSelected,
+        modifier = modifier,
+        data = data,
+        onCheckedChange = onCheckedChange,
+    )
 }
 
 @Preview

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/advanced/AdvancedSettingsView.kt

@@ -66,8 +66,8 @@ fun AdvancedSettingsView(
             },
             trailingContent = ListItemContent.Switch(
                 checked = state.isRichTextEditorEnabled,
-                onChange = { state.eventSink(AdvancedSettingsEvents.SetRichTextEditorEnabled(it)) },
             ),
+            onClick = { state.eventSink(AdvancedSettingsEvents.SetRichTextEditorEnabled(!state.isRichTextEditorEnabled)) }
         )
         ListItem(
             headlineContent = {
@@ -78,8 +78,8 @@ fun AdvancedSettingsView(
             },
             trailingContent = ListItemContent.Switch(
                 checked = state.isDeveloperModeEnabled,
-                onChange = { state.eventSink(AdvancedSettingsEvents.SetDeveloperModeEnabled(it)) },
             ),
+            onClick = { state.eventSink(AdvancedSettingsEvents.SetDeveloperModeEnabled(!state.isDeveloperModeEnabled)) }
         )
         ListItem(
             headlineContent = {
@@ -90,8 +90,8 @@ fun AdvancedSettingsView(
             },
             trailingContent = ListItemContent.Switch(
                 checked = state.isSendPublicReadReceiptsEnabled,
-                onChange = { state.eventSink(AdvancedSettingsEvents.SetSendPublicReadReceiptsEnabled(it)) },
             ),
+            onClick = { state.eventSink(AdvancedSettingsEvents.SetSendPublicReadReceiptsEnabled(!state.isSendPublicReadReceiptsEnabled)) }
         )
     }
 

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

@@ -46,8 +46,8 @@ import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.matrix.api.user.MatrixUser
-import io.element.android.libraries.matrix.ui.components.CheckableUnresolvedUserRow
 import io.element.android.libraries.matrix.ui.components.CheckableUserRow
+import io.element.android.libraries.matrix.ui.components.CheckableUserRowData
 import io.element.android.libraries.matrix.ui.components.SelectedUsersList
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.matrix.ui.model.getBestName
@@ -186,18 +186,16 @@ private fun RoomInviteMembersSearchBar(
 
             LazyColumn {
                 itemsIndexed(results) { index, invitableUser ->
-                    if (invitableUser.isUnresolved && !invitableUser.isAlreadyInvited && !invitableUser.isAlreadyJoined) {
-                        CheckableUnresolvedUserRow(
-                            checked = invitableUser.isSelected,
+                    val notInvitedOrJoined = !(invitableUser.isAlreadyInvited || invitableUser.isAlreadyJoined)
+                    val isUnresolved = invitableUser.isUnresolved && notInvitedOrJoined
+                    val enabled = isUnresolved || notInvitedOrJoined
+                    val data = if (isUnresolved) {
+                        CheckableUserRowData.Unresolved(
                             avatarData = invitableUser.matrixUser.getAvatarData(AvatarSize.UserListItem),
                             id = invitableUser.matrixUser.userId.value,
-                            onCheckedChange = { onUserToggled(invitableUser.matrixUser) },
-                            modifier = Modifier.fillMaxWidth()
                         )
                     } else {
-                        CheckableUserRow(
-                            checked = invitableUser.isSelected,
-                            enabled = !invitableUser.isAlreadyInvited && !invitableUser.isAlreadyJoined,
+                        CheckableUserRowData.Resolved(
                             avatarData = invitableUser.matrixUser.getAvatarData(AvatarSize.UserListItem),
                             name = invitableUser.matrixUser.getBestName(),
                             subtext = when {
@@ -207,11 +205,16 @@ private fun RoomInviteMembersSearchBar(
                                 // Otherwise show the ID, unless that's already used for their name
                                 invitableUser.matrixUser.displayName.isNullOrEmpty().not() -> invitableUser.matrixUser.userId.value
                                 else -> null
-                            },
-                            onCheckedChange = { onUserToggled(invitableUser.matrixUser) },
-                            modifier = Modifier.fillMaxWidth()
+                            }
                         )
                     }
+                    CheckableUserRow(
+                        checked = invitableUser.isSelected,
+                        enabled = enabled,
+                        data = data,
+                        onCheckedChange = { onUserToggled(invitableUser.matrixUser) },
+                        modifier = Modifier.fillMaxWidth()
+                    )
 
                     if (index < results.lastIndex) {
                         HorizontalDivider()

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

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.CheckboxColors
 import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -57,7 +58,7 @@ fun Checkbox(
                 onCheckedChange(!checked)
             }
         },
-        modifier = modifier,
+        modifier = modifier.minimumInteractiveComponentSize(),
         enabled = enabled,
         colors = colors,
         interactionSource = interactionSource,

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

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.RadioButtonColors
 import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -48,7 +49,7 @@ fun RadioButton(
     androidx.compose.material3.RadioButton(
         selected = selected,
         onClick = onClick,
-        modifier = modifier,
+        modifier = modifier.minimumInteractiveComponentSize(),
         enabled = enabled,
         colors = colors,
         interactionSource = interactionSource,

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

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.SwitchColors
 import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -52,7 +53,7 @@ fun Switch(
     Material3Switch(
         checked = checked,
         onCheckedChange = onCheckedChange,
-        modifier = modifier,
+        modifier = modifier.minimumInteractiveComponentSize(),
         enabled = enabled,
         colors = colors,
         interactionSource = interactionSource,

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

@@ -1,75 +0,0 @@
-/*
- * 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 androidx.compose.foundation.layout.Column
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.matrix.api.user.MatrixUser
-import io.element.android.libraries.matrix.ui.model.getAvatarData
-import io.element.android.libraries.matrix.ui.model.getBestName
-
-@Composable
-fun CheckableMatrixUserRow(
-    checked: Boolean,
-    matrixUser: MatrixUser,
-    onCheckedChange: (Boolean) -> Unit,
-    modifier: Modifier = Modifier,
-    avatarSize: AvatarSize = AvatarSize.UserListItem,
-    enabled: Boolean = true,
-) = CheckableUserRow(
-    checked = checked,
-    avatarData = matrixUser.getAvatarData(avatarSize),
-    name = matrixUser.getBestName(),
-    subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
-    modifier = modifier,
-    onCheckedChange = onCheckedChange,
-    enabled = enabled,
-)
-
-@PreviewsDayNight
-@Composable
-internal fun CheckableMatrixUserRowPreview(@PreviewParameter(MatrixUserProvider::class) matrixUser: MatrixUser) = ElementPreview {
-    Column {
-        CheckableMatrixUserRow(
-            checked = true,
-            onCheckedChange = { },
-            matrixUser = matrixUser,
-        )
-        CheckableMatrixUserRow(
-            checked = false,
-            onCheckedChange = { },
-            matrixUser = matrixUser,
-        )
-        CheckableMatrixUserRow(
-            checked = true,
-            onCheckedChange = { },
-            matrixUser = matrixUser,
-            enabled = false,
-        )
-        CheckableMatrixUserRow(
-            checked = false,
-            onCheckedChange = { },
-            matrixUser = matrixUser,
-            enabled = false,
-        )
-    }
-}

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

@@ -1,104 +0,0 @@
-/*
- * 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 androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.components.avatar.AvatarData
-import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.theme.components.Checkbox
-import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
-import io.element.android.libraries.matrix.ui.model.getAvatarData
-
-@Composable
-fun CheckableUnresolvedUserRow(
-    checked: Boolean,
-    onCheckedChange: (Boolean) -> Unit,
-    avatarData: AvatarData,
-    id: String,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-) {
-    Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .clickable(role = Role.Checkbox, enabled = enabled) {
-                onCheckedChange(!checked)
-            },
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        UnresolvedUserRow(
-            modifier = Modifier.weight(1f),
-            avatarData = avatarData,
-            id = id,
-        )
-
-        Checkbox(
-            modifier = Modifier.padding(end = 16.dp),
-            checked = checked,
-            onCheckedChange = null,
-            enabled = enabled,
-        )
-    }
-}
-
-@Preview
-@Composable
-internal fun CheckableUnresolvedUserRowPreview() = ElementThemedPreview {
-    val matrixUser = aMatrixUser()
-    Column {
-        CheckableUnresolvedUserRow(
-            checked = false,
-            onCheckedChange = { },
-            avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
-            id = matrixUser.userId.value,
-        )
-        HorizontalDivider()
-        CheckableUnresolvedUserRow(
-            checked = true,
-            onCheckedChange = { },
-            avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
-            id = matrixUser.userId.value,
-        )
-        HorizontalDivider()
-        CheckableUnresolvedUserRow(
-            checked = false,
-            onCheckedChange = { },
-            avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
-            id = matrixUser.userId.value,
-            enabled = false,
-        )
-        HorizontalDivider()
-        CheckableUnresolvedUserRow(
-            checked = true,
-            onCheckedChange = { },
-            avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
-            id = matrixUser.userId.value,
-            enabled = false,
-        )
-    }
-}

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

@@ -17,24 +17,29 @@
 package io.element.android.libraries.matrix.ui.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.theme.components.Checkbox
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
+import io.element.android.libraries.matrix.ui.model.getAvatarData
 
 @Composable
 fun CheckableUserRow(
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
-    avatarData: AvatarData,
-    name: String,
-    subtext: String?,
+    data: CheckableUserRowData,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
 ) {
@@ -46,19 +51,119 @@ fun CheckableUserRow(
             },
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        UserRow(
-            modifier = Modifier.weight(1f),
-            avatarData = avatarData,
-            name = name,
-            subtext = subtext,
-        )
+        val rowModifier = Modifier.weight(1f)
+        when (data) {
+            is CheckableUserRowData.Resolved -> {
+                UserRow(
+                    modifier = rowModifier,
+                    avatarData = data.avatarData,
+                    name = data.name,
+                    subtext = data.subtext,
+                )
+            }
+            is CheckableUserRowData.Unresolved -> {
+                UnresolvedUserRow(
+                    modifier = rowModifier,
+                    avatarData = data.avatarData,
+                    id = data.id,
+                )
+            }
+        }
 
         Checkbox(
-            modifier = Modifier
-                .padding(end = 16.dp),
+            modifier = Modifier.padding(end = 4.dp),
             checked = checked,
             onCheckedChange = null,
             enabled = enabled,
         )
     }
 }
+
+@Immutable
+sealed interface CheckableUserRowData {
+    data class Resolved(
+        val avatarData: AvatarData,
+        val name: String,
+        val subtext: String?,
+    ) : CheckableUserRowData
+
+    data class Unresolved(
+        val avatarData: AvatarData,
+        val id: String,
+    ) : CheckableUserRowData
+}
+
+@Preview
+@Composable
+internal fun CheckableResolvedUserRowPreview() = ElementThemedPreview {
+    val matrixUser = aMatrixUser()
+    val data = CheckableUserRowData.Resolved(
+        avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
+        name = matrixUser.displayName.orEmpty(),
+        subtext = matrixUser.userId.value,
+    )
+    Column {
+        CheckableUserRow(
+            checked = false,
+            onCheckedChange = { },
+            data = data,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = true,
+            onCheckedChange = { },
+            data = data,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = false,
+            onCheckedChange = { },
+            data = data,
+            enabled = false,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = true,
+            onCheckedChange = { },
+            data = data,
+            enabled = false,
+        )
+    }
+}
+
+@Preview
+@Composable
+internal fun CheckableUnresolvedUserRowPreview() = ElementThemedPreview {
+    val matrixUser = aMatrixUser()
+    val data = CheckableUserRowData.Unresolved(
+        avatarData = matrixUser.getAvatarData(AvatarSize.UserListItem),
+        id = matrixUser.userId.value,
+    )
+    Column {
+        CheckableUserRow(
+            checked = false,
+            onCheckedChange = { },
+            data = data,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = true,
+            onCheckedChange = { },
+            data = data,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = false,
+            onCheckedChange = { },
+            data = data,
+            enabled = false,
+        )
+        HorizontalDivider()
+        CheckableUserRow(
+            checked = true,
+            onCheckedChange = { },
+            data = data,
+            enabled = false,
+        )
+    }
+}