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 <[email protected]>

Author: jmartinesp

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,