Create a reusable selectusers feature module

features/selectusers/api/build.gradle.kts

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+plugins {
+    id("io.element.android-compose-library")
+}
+
+android {
+    namespace = "io.element.android.features.selectusers.api"
+}
+
+dependencies {
+    implementation(projects.libraries.architecture)
+    implementation(projects.libraries.designsystem)
+    implementation(projects.libraries.uiStrings)
+    implementation(projects.libraries.matrixui)
+}

features/selectusers/api/src/main/kotlin/io/element/android/features/selectusers/api/SelectUsersEvents.kt

@@ -0,0 +1,25 @@
+/*
+ * 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.selectusers.api
+
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+
+sealed interface SelectUsersEvents {
+    data class UpdateSearchQuery(val query: String) : SelectUsersEvents
+    data class AddToSelection(val matrixUser: MatrixUser) : SelectUsersEvents
+    data class RemoveFromSelection(val matrixUser: MatrixUser) : SelectUsersEvents
+}

features/selectusers/api/src/main/kotlin/io/element/android/features/selectusers/api/SelectUsersPresenter.kt

@@ -0,0 +1,21 @@
+/*
+ * 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.selectusers.api
+
+import io.element.android.libraries.architecture.Presenter
+
+interface SelectUsersPresenter : Presenter<SelectUsersState>

features/selectusers/api/src/main/kotlin/io/element/android/features/selectusers/api/SelectUsersState.kt

@@ -0,0 +1,27 @@
+/*
+ * 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.selectusers.api
+
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+
+data class SelectUsersState(
+    val searchQuery: String,
+    val searchResults: ImmutableList<MatrixUser>,
+    val selectedUsers: ImmutableList<MatrixUser>,
+    val eventSink: (SelectUsersEvents) -> Unit,
+)

features/selectusers/api/src/main/kotlin/io/element/android/features/selectusers/api/SelectUsersStateProvider.kt

@@ -0,0 +1,48 @@
+/*
+ * 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.selectusers.api
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.persistentListOf
+
+open class SelectUsersStateProvider : PreviewParameterProvider<SelectUsersState> {
+    override val values: Sequence<SelectUsersState>
+        get() = sequenceOf(
+            aSelectUsersState(),
+            aSelectUsersState().copy(
+                selectedUsers = persistentListOf(
+                    aMatrixUser(userName = ""),
+                    aMatrixUser(userName = "User"),
+                    aMatrixUser(userName = "User with long name"),
+                )
+            )
+        )
+}
+
+fun aSelectUsersState() = SelectUsersState(
+    searchQuery = "",
+    searchResults = persistentListOf(),
+    selectedUsers = persistentListOf(),
+    eventSink = {}
+)
+
+fun aMatrixUser(userName: String): MatrixUser {
+    return MatrixUser(id = UserId("@id"), username = userName, avatarData = AvatarData("@id", "U"))
+}

features/selectusers/api/src/main/kotlin/io/element/android/features/selectusers/api/SelectUsersView.kt

@@ -0,0 +1,256 @@
+/*
+ * 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.selectusers.api
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+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.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.DockedSearchBar
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.ui.components.MatrixUserRow
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import io.element.android.libraries.matrix.ui.model.getBestName
+import kotlinx.collections.immutable.ImmutableList
+import io.element.android.libraries.ui.strings.R as StringR
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SelectUsersView(
+    state: SelectUsersState,
+    modifier: Modifier = Modifier,
+    onSearchActiveChanged: (Boolean) -> Unit = {},
+    onSelectionChanged: (ImmutableList<MatrixUser>) -> Unit = {},
+) {
+    var isSearchActive by rememberSaveable { mutableStateOf(false) }
+    val eventSink = state.eventSink
+
+    // TODO how to pass back the selection list?
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+    ) {
+        SearchUserBar(
+            modifier = Modifier.fillMaxWidth(),
+            query = state.searchQuery,
+            results = state.searchResults,
+            active = isSearchActive,
+            onActiveChanged = {
+                isSearchActive = it
+                onSearchActiveChanged(it)
+            },
+            onTextChanged = { state.eventSink(SelectUsersEvents.UpdateSearchQuery(it)) },
+            onResultSelected = { state.eventSink(SelectUsersEvents.AddToSelection(it)) }
+        )
+
+        // TODO move into search content
+        SelectedUsersList(
+            modifier = Modifier.padding(16.dp),
+            selectedUsers = state.selectedUsers,
+            onUserRemoved = { eventSink(SelectUsersEvents.RemoveFromSelection(it)) }
+        )
+    }
+}
+
+@Composable
+fun SelectedUsersList(
+    selectedUsers: List<MatrixUser>,
+    modifier: Modifier = Modifier,
+    onUserRemoved: (MatrixUser) -> Unit = {},
+) {
+    LazyRow(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
+    ) {
+        items(selectedUsers) { matrixUser ->
+            SelectedUser(
+                matrixUser = matrixUser,
+                onUserRemoved = onUserRemoved,
+            )
+        }
+    }
+}
+
+@Composable
+fun SelectedUser(
+    matrixUser: MatrixUser,
+    modifier: Modifier = Modifier,
+    onUserRemoved: (MatrixUser) -> Unit,
+) {
+    Box(modifier = modifier.width(56.dp)) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Avatar(matrixUser.avatarData.copy(size = AvatarSize.Custom(56)))
+            Text(
+                text = matrixUser.getBestName(),
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                style = MaterialTheme.typography.bodyLarge,
+            )
+        }
+        IconButton(
+            modifier = Modifier
+                .clip(CircleShape)
+                .background(MaterialTheme.colorScheme.primary)
+                .size(20.dp)
+                .align(Alignment.TopEnd),
+            onClick = { onUserRemoved(matrixUser) }
+        ) {
+            Icon(
+                imageVector = Icons.Default.Close,
+                contentDescription = stringResource(id = StringR.string.action_remove),
+                tint = MaterialTheme.colorScheme.onPrimary,
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchUserBar(
+    query: String,
+    results: ImmutableList<MatrixUser>,
+    active: Boolean,
+    modifier: Modifier = Modifier,
+    placeHolderTitle: String = stringResource(StringR.string.search_for_someone),
+    onActiveChanged: (Boolean) -> Unit = {},
+    onTextChanged: (String) -> Unit = {},
+    onResultSelected: (MatrixUser) -> Unit = {},
+) {
+    val focusManager = LocalFocusManager.current
+
+    if (!active) {
+        onTextChanged("")
+        focusManager.clearFocus()
+    }
+
+    DockedSearchBar(
+        query = query,
+        onQueryChange = onTextChanged,
+        onSearch = { focusManager.clearFocus() },
+        active = active,
+        onActiveChange = onActiveChanged,
+        modifier = modifier
+            .padding(horizontal = if (!active) 16.dp else 0.dp),
+        placeholder = {
+            Text(
+                text = placeHolderTitle,
+                modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
+            )
+        },
+        leadingIcon = if (active) {
+            { BackButton(onClick = { onActiveChanged(false) }) }
+        } else null,
+        trailingIcon = when {
+            active && query.isNotEmpty() -> {
+                {
+                    IconButton(onClick = { onTextChanged("") }) {
+                        Icon(Icons.Default.Close, stringResource(StringR.string.a11y_clear))
+                    }
+                }
+            }
+            !active -> {
+                {
+                    Icon(
+                        imageVector = Icons.Default.Search,
+                        contentDescription = stringResource(StringR.string.search),
+                        modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
+                    )
+                }
+            }
+            else -> null
+        },
+        shape = if (!active) SearchBarDefaults.dockedShape else SearchBarDefaults.fullScreenShape,
+        colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
+        content = {
+            results.forEach {
+                SearchUserResultItem(
+                    matrixUser = it,
+                    onClick = { onResultSelected(it) }
+                )
+            }
+        },
+    )
+}
+
+@Composable
+fun SearchUserResultItem(
+    matrixUser: MatrixUser,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    MatrixUserRow(
+        modifier = modifier.heightIn(min = 56.dp),
+        matrixUser = matrixUser,
+        avatarSize = AvatarSize.Custom(36),
+        onClick = onClick,
+    )
+}
+
+@Preview
+@Composable
+internal fun ChangeServerViewLightPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@Preview
+@Composable
+internal fun ChangeServerViewDarkPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@Composable
+private fun ContentToPreview(state: SelectUsersState) {
+    SelectUsersView(state = state)
+}