Reaction emoji picker search/filtering

Fixes: element-hq#1611
Co-Authored-by: Chelsea Hilditch <[email protected]>
Signed-off-by: Joe Groocock <[email protected]>

Author: ChelseaDH

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt

@@ -27,6 +27,7 @@ import io.element.android.features.messages.impl.timeline.aTimelineItemList
 import io.element.android.features.messages.impl.timeline.aTimelineState
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionEvents
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
+import io.element.android.features.messages.impl.timeline.components.customreaction.EmojiPickerState
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryEvents
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetEvents
@@ -42,6 +43,7 @@ import io.element.android.features.messages.impl.voicemessages.composer.aVoiceMe
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.textcomposer.aRichTextEditorState
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
@@ -163,6 +165,7 @@ fun aCustomReactionState(
     target = target,
     selectedEmoji = persistentSetOf(),
     eventSink = eventSink,
+    searchState = EmojiPickerState(false, false, "", SearchBarResultState.Initial()) {}
 )
 
 fun aReadReceiptBottomSheetState(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -72,6 +72,7 @@ import io.element.android.features.messages.impl.messagecomposer.MessageComposer
 import io.element.android.features.messages.impl.timeline.TimelineView
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionBottomSheet
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionEvents
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryEvents
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryView
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheet
@@ -92,6 +93,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
+import io.element.android.libraries.designsystem.modifiers.applyIf
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.BottomSheetDragHandle
@@ -332,7 +334,11 @@ private fun MessagesViewContent(
         modifier = modifier
             .fillMaxSize()
             .navigationBarsPadding()
-            .imePadding(),
+            .applyIf(
+                // Disable imePadding() when reaction picker is open to prevent the chat moving behind the bottom sheet
+                condition = state.customReactionState.target is CustomReactionState.Target.None,
+                ifTrue = { imePadding() }
+            )
     ) {
         AttachmentsBottomSheet(
             state = state.composerState,

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

@@ -16,13 +16,22 @@
 
 package io.element.android.features.messages.impl.timeline.components.customreaction
 
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.awaitFirstDown
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import io.element.android.emojibasebindings.Emoji
+import io.element.android.libraries.androidutils.ui.hideKeyboard
 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.core.EventId
@@ -34,15 +43,18 @@ fun CustomReactionBottomSheet(
     onEmojiSelected: (EventId, Emoji) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val sheetState = rememberModalBottomSheetState()
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = state.searchState.startActive)
     val coroutineScope = rememberCoroutineScope()
     val target = state.target as? CustomReactionState.Target.Success
+    val localView = LocalView.current
 
     fun onDismiss() {
+        localView.hideKeyboard()
         state.eventSink(CustomReactionEvents.DismissCustomReactionSheet)
     }
 
     fun onEmojiSelectedDismiss(emoji: Emoji) {
+        localView.hideKeyboard()
         if (target?.event?.eventId == null) return
         sheetState.hide(coroutineScope) {
             state.eventSink(CustomReactionEvents.DismissCustomReactionSheet)
@@ -55,11 +67,22 @@ fun CustomReactionBottomSheet(
             onDismissRequest = ::onDismiss,
             sheetState = sheetState,
             modifier = modifier
+                .heightIn(min = if (state.searchState.isSearchActive) (LocalConfiguration.current.screenHeightDp).dp else Dp.Unspecified)
+                .pointerInput(state.searchState.isSearchActive) {
+                    awaitEachGesture {
+                        // For any unconsumed pointer event in this sheet, deactivate the search field and hide the keyboard
+                        awaitFirstDown(requireUnconsumed = true)
+                        if (state.searchState.isSearchActive) {
+                            state.searchState.eventSink(EmojiPickerEvents.OnSearchActiveChanged(false))
+                        }
+                    }
+                }
         ) {
             EmojiPicker(
                 onEmojiSelected = ::onEmojiSelectedDismiss,
                 emojibaseStore = target.emojibaseStore,
                 selectedEmojis = state.selectedEmoji,
+                state = state.searchState,
                 modifier = Modifier.fillMaxSize(),
             )
         }

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

@@ -22,19 +22,23 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.preferences.api.store.SessionPreferencesStore
+import io.element.android.libraries.androidutils.ui.hideKeyboard
 import io.element.android.libraries.architecture.Presenter
 import kotlinx.collections.immutable.toImmutableSet
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 class CustomReactionPresenter @Inject constructor(
-    private val emojibaseProvider: EmojibaseProvider
+    private val emojibaseProvider: EmojibaseProvider,
+    private val emojiPickerStatePresenter: EmojiPickerStatePresenter,
 ) : Presenter<CustomReactionState> {
     @Composable
     override fun present(): CustomReactionState {
         val target: MutableState<CustomReactionState.Target> = remember {
             mutableStateOf(CustomReactionState.Target.None)
         }
+        val searchState = emojiPickerStatePresenter.present()
 
         val localCoroutineScope = rememberCoroutineScope()
         fun handleShowCustomReactionSheet(event: TimelineItem.Event) {
@@ -49,6 +53,7 @@ class CustomReactionPresenter @Inject constructor(
 
         fun handleDismissCustomReactionSheet() {
             target.value = CustomReactionState.Target.None
+            searchState.eventSink(EmojiPickerEvents.Reset)
         }
 
         fun handleEvents(event: CustomReactionEvents) {
@@ -57,6 +62,7 @@ class CustomReactionPresenter @Inject constructor(
                 is CustomReactionEvents.DismissCustomReactionSheet -> handleDismissCustomReactionSheet()
             }
         }
+
         val event = (target.value as? CustomReactionState.Target.Success)?.event
         val selectedEmoji = event
             ?.reactionsState
@@ -67,7 +73,8 @@ class CustomReactionPresenter @Inject constructor(
         return CustomReactionState(
             target = target.value,
             selectedEmoji = selectedEmoji,
-            eventSink = { handleEvents(it) }
+            eventSink = { handleEvents(it) },
+            searchState = searchState,
         )
     }
 }

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

@@ -24,6 +24,7 @@ data class CustomReactionState(
     val target: Target,
     val selectedEmoji: ImmutableSet<String>,
     val eventSink: (CustomReactionEvents) -> Unit,
+    val searchState: EmojiPickerState,
 ) {
     sealed interface Target {
         data object None : Target