Add emoji search to the reaction emoji picker

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/CustomReactionBottomSheet.kt

@@ -11,9 +11,12 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import io.element.android.emojibasebindings.Emoji
+import io.element.android.features.messages.impl.timeline.components.customreaction.picker.EmojiPicker
+import io.element.android.features.messages.impl.timeline.components.customreaction.picker.EmojiPickerPresenter
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.hide
 import io.element.android.libraries.matrix.api.timeline.item.event.EventOrTransactionId
@@ -47,9 +50,10 @@ fun CustomReactionBottomSheet(
             sheetState = sheetState,
             modifier = modifier
         ) {
+            val presenter = remember { EmojiPickerPresenter(target.emojibaseStore) }
             EmojiPicker(
                 onSelectEmoji = ::onEmojiSelectedDismiss,
-                emojibaseStore = target.emojibaseStore,
+                state = presenter.present(),
                 selectedEmojis = state.selectedEmoji,
                 modifier = Modifier.fillMaxSize(),
             )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/picker/EmojiPicker.kt

@@ -0,0 +1,158 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.customreaction.picker
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SecondaryTabRow
+import androidx.compose.material3.Tab
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.emojibasebindings.Emoji
+import io.element.android.emojibasebindings.EmojibaseCategory
+import io.element.android.features.messages.impl.timeline.components.customreaction.EmojiItem
+import io.element.android.features.messages.impl.timeline.components.customreaction.icon
+import io.element.android.features.messages.impl.timeline.components.customreaction.title
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.text.toSp
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.SearchBar
+import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.collections.immutable.ImmutableSet
+import kotlinx.collections.immutable.persistentSetOf
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EmojiPicker(
+    onSelectEmoji: (Emoji) -> Unit,
+    state: EmojiPickerState,
+    selectedEmojis: ImmutableSet<String>,
+    modifier: Modifier = Modifier,
+) {
+    val coroutineScope = rememberCoroutineScope()
+    val categories = state.categories
+    val pagerState = rememberPagerState(pageCount = { EmojibaseCategory.entries.size })
+
+    Column(modifier) {
+        SearchBar(
+            modifier = Modifier.padding(bottom = 10.dp),
+            query = state.searchQuery,
+            onQueryChange = { state.eventSink(EmojiPickerEvents.UpdateSearchQuery(it)) },
+            resultState = state.searchResults,
+            active = state.isSearchActive,
+            onActiveChange = { state.eventSink(EmojiPickerEvents.ToggleSearchActive(it)) },
+            windowInsets = WindowInsets(0, 0, 0, 0),
+            placeHolderTitle = stringResource(CommonStrings.emoji_picker_search_placeholder),
+        ) { results ->
+            val emojis = results
+            LazyVerticalGrid(
+                modifier = Modifier.fillMaxSize(),
+                columns = GridCells.Adaptive(minSize = 48.dp),
+                contentPadding = PaddingValues(vertical = 10.dp, horizontal = 16.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalArrangement = Arrangement.spacedBy(2.dp)
+            ) {
+                items(emojis, key = { it.unicode }) { item ->
+                    SelectableEmojiItem(
+                        item = item,
+                        selectedEmojis = selectedEmojis,
+                        onSelectEmoji = onSelectEmoji,
+                    )
+                }
+            }
+        }
+
+        if (!state.isSearchActive) {
+            SecondaryTabRow(
+                selectedTabIndex = pagerState.currentPage,
+            ) {
+                EmojibaseCategory.entries.forEachIndexed { index, category ->
+                    Tab(
+                        icon = {
+                            Icon(
+                                imageVector = category.icon,
+                                contentDescription = stringResource(id = category.title)
+                            )
+                        },
+                        selected = pagerState.currentPage == index,
+                        onClick = {
+                            coroutineScope.launch { pagerState.animateScrollToPage(index) }
+                        }
+                    )
+                }
+            }
+
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.fillMaxWidth(),
+            ) { index ->
+                val category = EmojibaseCategory.entries[index]
+                val emojis = categories[category] ?: listOf()
+                LazyVerticalGrid(
+                    modifier = Modifier.fillMaxSize(),
+                    columns = GridCells.Adaptive(minSize = 48.dp),
+                    contentPadding = PaddingValues(vertical = 10.dp, horizontal = 16.dp),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalArrangement = Arrangement.spacedBy(2.dp)
+                ) {
+                    items(emojis, key = { it.unicode }) { item ->
+                        SelectableEmojiItem(
+                            item = item,
+                            selectedEmojis = selectedEmojis,
+                            onSelectEmoji = onSelectEmoji,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SelectableEmojiItem(
+    item: Emoji,
+    selectedEmojis: ImmutableSet<String>,
+    onSelectEmoji: (Emoji) -> Unit,
+) {
+    EmojiItem(
+        modifier = Modifier.aspectRatio(1f),
+        item = item,
+        isSelected = selectedEmojis.contains(item.unicode),
+        onSelectEmoji = onSelectEmoji,
+        emojiSize = 32.dp.toSp(),
+    )
+}
+
+@PreviewsDayNight
+@Composable
+internal fun EmojiPickerPreview(@PreviewParameter(EmojiPickerStateProvider::class) state: EmojiPickerState) = ElementPreview {
+    EmojiPicker(
+        onSelectEmoji = {},
+        state = state,
+        selectedEmojis = persistentSetOf("😀", "😄", "😃"),
+        modifier = Modifier.fillMaxWidth(),
+    )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/picker/EmojiPickerEvents.kt

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.customreaction.picker
+
+sealed interface EmojiPickerEvents {
+    data class ToggleSearchActive(val isActive: Boolean) : EmojiPickerEvents
+    data class UpdateSearchQuery(val query: String) : EmojiPickerEvents
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/picker/EmojiPickerPresenter.kt

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.customreaction.picker
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.platform.LocalInspectionMode
+import io.element.android.emojibasebindings.Emoji
+import io.element.android.emojibasebindings.EmojibaseStore
+import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.withContext
+import kotlin.time.Duration.Companion.milliseconds
+
+class EmojiPickerPresenter(
+    private val emojibaseStore: EmojibaseStore,
+) : Presenter<EmojiPickerState> {
+    @Composable
+    override fun present(): EmojiPickerState {
+        var searchQuery by remember { mutableStateOf("") }
+        var isSearchActive by remember { mutableStateOf(false) }
+        var emojiResults by remember { mutableStateOf<SearchBarResultState<ImmutableList<Emoji>>>(SearchBarResultState.Initial()) }
+        val categories = remember { emojibaseStore.categories }
+
+        LaunchedEffect(searchQuery) {
+            emojiResults = if (searchQuery.isEmpty()) {
+                SearchBarResultState.Initial()
+            } else {
+                // Add a small delay to avoid doing too many computations when the user is typing quickly
+                delay(100.milliseconds)
+
+                val lowercaseQuery = searchQuery.lowercase()
+                val results = withContext(Dispatchers.Default) {
+                    emojibaseStore.allEmojis
+                        .asSequence()
+                        .filter { emoji ->
+                            emoji.tags.orEmpty().any { it.contains(lowercaseQuery) } ||
+                                emoji.shortcodes.any { it.contains(lowercaseQuery) }
+                        }
+                        .take(60)
+                        .toImmutableList()
+                }
+
+                SearchBarResultState.Results(results)
+            }
+        }
+
+        val isInPreview = LocalInspectionMode.current
+        fun handleEvents(event: EmojiPickerEvents) {
+            when (event) {
+                // For some reason, in preview mode the SearchBar emits this event with an `isActive = true` value automatically
+                is EmojiPickerEvents.ToggleSearchActive -> if (!isInPreview) {
+                    isSearchActive = event.isActive
+                }
+                is EmojiPickerEvents.UpdateSearchQuery -> searchQuery = event.query
+            }
+        }
+
+        return EmojiPickerState(
+            categories = categories,
+            searchQuery = searchQuery,
+            isSearchActive = isSearchActive,
+            searchResults = emojiResults,
+            eventSink = ::handleEvents,
+        )
+    }
+}