Add kick (remove) confirmation and reason (#4507)

* Add confirmation dialog when kicking someone, ith ability to provide a reason.

Also add the reason for banning people.

* Fix padding issue in dialogs.

* Improve TextField in dialog.

* Update screenshots

* Fix tests

* Format and import

* Add missing UI tests.

* Use `needsConfirmation` as it's already used in the code base.

---------

Co-authored-by: ElementBot <android@element.io>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ListDialog.kt

@@ -38,6 +38,7 @@ fun ListDialog(
     cancelText: String = stringResource(CommonStrings.action_cancel),
     submitText: String = stringResource(CommonStrings.action_ok),
     enabled: Boolean = true,
+    applyPaddingToContents: Boolean = false,
     listItems: LazyListScope.() -> Unit,
 ) {
     val decoratedSubtitle: @Composable (() -> Unit)? = subtitle?.let {
@@ -61,6 +62,7 @@ fun ListDialog(
             onSubmitClick = onSubmit,
             enabled = enabled,
             listItems = listItems,
+            applyPaddingToContents = applyPaddingToContents,
         )
     }
 }
@@ -72,8 +74,9 @@ private fun ListDialogContent(
     onSubmitClick: () -> Unit,
     cancelText: String,
     submitText: String,
-    title: String? = null,
-    enabled: Boolean = true,
+    title: String?,
+    enabled: Boolean,
+    applyPaddingToContents: Boolean,
     subtitle: @Composable (() -> Unit)? = null,
 ) {
     SimpleAlertDialogContent(
@@ -84,10 +87,12 @@ private fun ListDialogContent(
         onCancelClick = onDismissRequest,
         onSubmitClick = onSubmitClick,
         enabled = enabled,
-        applyPaddingToContents = false,
+        applyPaddingToContents = applyPaddingToContents,
     ) {
+        // No start padding if padding is already applied to the content
+        val horizontalPadding = if (applyPaddingToContents) 0.dp else 8.dp
         LazyColumn(
-            modifier = Modifier.padding(start = 8.dp)
+            modifier = Modifier.padding(horizontal = horizontalPadding)
         ) { listItems() }
     }
 }
@@ -111,6 +116,8 @@ internal fun ListDialogContentPreview() {
                 onSubmitClick = {},
                 cancelText = "Cancel",
                 submitText = "Save",
+                enabled = true,
+                applyPaddingToContents = false,
             )
         }
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/list/TextFieldListItem.kt

@@ -29,6 +29,8 @@ fun TextFieldListItem(
     modifier: Modifier = Modifier,
     error: String? = null,
     maxLines: Int = 1,
+    withBorder: Boolean = false,
+    label: String? = null,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     keyboardActions: KeyboardActions = KeyboardActions.Default,
 ) {
@@ -38,12 +40,17 @@ fun TextFieldListItem(
         value = text,
         onValueChange = { onTextChange(it) },
         placeholder = placeholder?.let { @Composable { Text(it) } },
-        colors = OutlinedTextFieldDefaults.colors(
-            disabledBorderColor = Color.Transparent,
-            errorBorderColor = Color.Transparent,
-            focusedBorderColor = Color.Transparent,
-            unfocusedBorderColor = Color.Transparent,
-        ),
+        label = label?.let { @Composable { Text(it) } },
+        colors = if (withBorder) {
+            OutlinedTextFieldDefaults.colors()
+        } else {
+            OutlinedTextFieldDefaults.colors(
+                disabledBorderColor = Color.Transparent,
+                errorBorderColor = Color.Transparent,
+                focusedBorderColor = Color.Transparent,
+                unfocusedBorderColor = Color.Transparent,
+            )
+        },
         isError = error != null,
         supportingText = error?.let { @Composable { Text(it) } },
         keyboardOptions = keyboardOptions,
@@ -124,3 +131,31 @@ internal fun TextFieldListItemTextFieldValuePreview() {
         )
     }
 }
+
+@Preview("Text field List item with border - empty", group = PreviewGroup.ListItems)
+@Composable
+internal fun TextFieldListItemWithBorderEmptyPreview() {
+    ElementThemedPreview {
+        TextFieldListItem(
+            placeholder = "Placeholder",
+            label = "Label",
+            text = "",
+            withBorder = true,
+            onTextChange = {},
+        )
+    }
+}
+
+@Preview("Text field List item with border - text", group = PreviewGroup.ListItems)
+@Composable
+internal fun TextFieldListItemWithBorderPreview() {
+    ElementThemedPreview {
+        TextFieldListItem(
+            placeholder = "Placeholder",
+            label = "Label",
+            text = "Text",
+            withBorder = true,
+            onTextChange = {},
+        )
+    }
+}