feat(chat): match emoji reactions to iOS

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/chat/ChatStep.kt

@@ -1,6 +1,7 @@
 package com.flipcash.app.core.chat
 
 import android.os.Parcelable
+import com.getcode.navigation.HalfSheet
 import com.getcode.navigation.Sheet
 import com.getcode.navigation.WrapContentSheet
 import com.getcode.navigation.flow.FlowStep
@@ -96,4 +97,26 @@ sealed interface ChatStep : FlowStep, Parcelable {
     @Parcelize
     @Serializable
     data object EditGroupPicture : ChatStep
+
+    /**
+     * The full emoji picker for a message's reaction, opened from the pill row's "+" or the
+     * quick strip's "+". A plain [Sheet] rather than [WrapContentSheet]: the picker's catalog
+     * needs the screen's height, unlike the short, fixed-content sheets above. [HalfSheet]
+     * matches iOS's `EmojiPickerSheet.presentationDetents([.medium, .large])` — it rests at half
+     * height and only grows to the expanded detent once the grid reports it has more than that to
+     * show (see `AllowSheetExpansionWhenScrollable`).
+     */
+    @Parcelize
+    @Serializable
+    data class ReactionPicker(val messageId: Long) : ChatStep, Sheet, HalfSheet
+
+    /**
+     * Who reacted, and with what — opened by long-pressing a pill. A plain [Sheet] for the same
+     * reason as [ReactionPicker]: a per-emoji reactor list can run long enough to need the full
+     * sheet height rather than wrapping its content. [HalfSheet] matches iOS's
+     * `ReactorsSheet.presentationDetents([.medium, .large])`.
+     */
+    @Parcelize
+    @Serializable
+    data class Reactors(val messageId: Long) : ChatStep, Sheet, HalfSheet
 }

apps/flipcash/core/src/main/res/values/strings.xml

@@ -1004,6 +1004,13 @@
     <string name="title_messageNotDeleted">Message Not Deleted</string>
     <string name="description_messageNotDeleted">The message couldn\'t be deleted, so it is still visible to everyone.</string>
     <string name="title_clipboardLabelMessage">Message</string>
+    <string name="title_reactionNotAdded">Couldn\'t add reaction</string>
+    <string name="title_reactionLimitReached">This message has the maximum number of reactions</string>
+    <string name="title_reactionsCount">%1$d Reactions</string>
+    <string name="title_reactorsSheet">Reactions</string>
+    <string name="hint_searchEmoji">Search</string>
+    <string name="action_clearEmojiSearch">Clear search</string>
+    <string name="action_addReaction">Add reaction</string>
 
     <string name="label_unknownContact">Unknown Contact</string>
     <string name="title_allowFullContactAccess">Allow Full Contact Access</string>

apps/flipcash/features/messenger/build.gradle.kts

@@ -18,8 +18,11 @@ dependencies {
     implementation(project(":apps:flipcash:shared:contacts"))
     implementation(project(":apps:flipcash:shared:featureflags"))
     implementation(project(":apps:flipcash:shared:funding"))
+    implementation(project(":libs:emojis"))
     implementation(project(":apps:flipcash:shared:menu"))
     implementation(project(":apps:flipcash:shared:payments"))
+    // UserProfileDataSource, for the reactors sheet's cached-profile name resolution (decision 4).
+    implementation(project(":apps:flipcash:shared:persistence:sources"))
     implementation(project(":apps:flipcash:shared:router"))
     implementation(project(":apps:flipcash:shared:session"))
     implementation(project(":apps:flipcash:shared:shareable"))

apps/flipcash/features/messenger/src/main/kotlin/com/flipcash/app/messenger/ChatFlowScreen.kt

@@ -6,6 +6,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -24,6 +25,8 @@ import com.flipcash.app.messenger.internal.ChatViewModel
 import com.flipcash.app.messenger.internal.StartSendCashOnceReady
 import com.flipcash.app.messenger.internal.screens.GroupInviteSheet
 import com.flipcash.app.messenger.internal.screens.MessengerScreen
+import com.flipcash.app.messenger.internal.screens.ReactionPickerSheet
+import com.flipcash.app.messenger.internal.screens.ReactorsSheet
 import com.flipcash.app.messenger.internal.screens.cash.ChatAmountEntryContent
 import com.flipcash.app.messenger.internal.screens.cash.ChatInitPaymentSheet
 import com.flipcash.app.messenger.internal.screens.profile.ChatProfileScreen
@@ -51,6 +54,7 @@ import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
+import kotlinx.coroutines.launch
 
 @Composable
 fun ChatFlowScreen(
@@ -116,6 +120,13 @@ private fun chatEntryProvider(
     annotatedEntry<ChatStep.EditGroupPicture> {
         FlowEditGroupPictureScreen()
     }
+
+    annotatedEntry<ChatStep.ReactionPicker> { step ->
+        FlowReactionPickerScreen(step.messageId)
+    }
+    annotatedEntry<ChatStep.Reactors> { step ->
+        FlowReactorsScreen(step.messageId)
+    }
 }
 
 @Composable
@@ -318,3 +329,63 @@ private fun FlowEditGroupNameScreen() {
 private fun FlowEditGroupPictureScreen() {
     EditGroupPictureScreen(flowSharedViewModel<ChatViewModel>())
 }
+
+/** The full emoji picker for [messageId] — a tap on any emoji toggles it and dismisses. */
+@Composable
+private fun FlowReactionPickerScreen(messageId: Long) {
+    val viewModel = flowSharedViewModel<ChatViewModel>()
+    val dismissSheet = LocalBottomSheetDismissDispatcher.current
+
+    ReactionPickerSheet(
+        loadSections = { query -> viewModel.emojiPickerSections(query) },
+        onSelected = { emoji ->
+            viewModel.dispatchEvent(
+                ChatViewModel.Event.ToggleReaction(messageId, emoji, clearsSelection = true)
+            )
+            dismissSheet()
+        },
+        onDismiss = dismissSheet,
+    )
+}
+
+/**
+ * Who reacted to [messageId], and with what. Tapping a row dismisses this sheet first, then opens
+ * the reactor's profile — [ChatViewModel.reactorParticipant] resolves a [ChatParticipant] even for
+ * a reactor absent from `senderProfiles`.
+ */
+@Composable
+private fun FlowReactorsScreen(messageId: Long) {
+    val viewModel = flowSharedViewModel<ChatViewModel>()
+    val navigator = LocalCodeNavigator.current
+    val dismissSheet = LocalBottomSheetDismissDispatcher.current
+    val coroutineScope = rememberCoroutineScope()
+
+    val pills by remember(viewModel, messageId) { viewModel.reactionPills(messageId) }
+        .collectAsStateWithLifecycle(initialValue = emptyList())
+    val rows by remember(viewModel, messageId) { viewModel.reactorsRows(messageId) }
+        .collectAsStateWithLifecycle(initialValue = emptyList())
+    val loading by remember(viewModel, messageId) { viewModel.reactorsLoading(messageId) }
+        .collectAsStateWithLifecycle(initialValue = true)
+
+    ReactorsSheet(
+        pills = pills,
+        rows = rows,
+        loading = loading,
+        hasMore = { viewModel.reactorsHasMore(messageId) },
+        resolveDisplay = { userId -> viewModel.reactorDisplay(userId) },
+        onLoadMore = { viewModel.loadMoreReactors(messageId) },
+        onOpenProfile = { userId ->
+            // Dismiss first (decision: profile opens after the sheet closes), then resolve the
+            // participant — a row is only tappable once reactorDisplay has already resolved it, so
+            // this is a re-read of state already on screen rather than a fresh network round trip
+            // in the common case; reactorParticipant only reaches further (member roster, cached
+            // profile store) for a reactor absent from senderProfiles.
+            dismissSheet()
+            coroutineScope.launch {
+                val participant = viewModel.reactorParticipant(userId) ?: return@launch
+                navigator.push(ChatStep.Profile(contact = participant))
+            }
+        },
+        onDismiss = dismissSheet,
+    )
+}