refactor: move reaction button to `MessageItem`

app/src/main/java/com/geeksville/mesh/ui/message/components/MessageItem.kt

@@ -74,6 +74,12 @@ internal fun MessageItem(
     onLongClick: () -> Unit = {},
     onChipClick: () -> Unit = {},
     onStatusClick: () -> Unit = {},
+    onSendReaction: (String) -> Unit = {},
+) = Row(
+    modifier = Modifier
+        .fillMaxWidth()
+        .background(color = if (selected) Color.Gray else MaterialTheme.colors.background),
+    verticalAlignment = Alignment.CenterVertically,
 ) {
     val fromLocal = shortName == null
     val messageColor = if (fromLocal) R.color.colorMyMsg else R.color.colorMsg
@@ -81,13 +87,12 @@ internal fun MessageItem(
     val messageModifier = if (fromLocal) {
         Modifier.padding(start = 48.dp, top = 8.dp, end = 8.dp, bottom = 6.dp)
     } else {
-        Modifier.padding(start = 8.dp, top = 8.dp, end = 48.dp, bottom = 6.dp)
+        Modifier.padding(start = 8.dp, top = 8.dp, end = 0.dp, bottom = 6.dp)
     }
 
     Card(
         modifier = Modifier
-            .background(color = if (selected) Color.Gray else MaterialTheme.colors.background)
-            .fillMaxWidth()
+            .weight(1f)
             .then(messageModifier),
         elevation = 4.dp,
         shape = RoundedCornerShape(topStart, topEnd, 12.dp, 12.dp),
@@ -166,6 +171,9 @@ internal fun MessageItem(
             }
         }
     }
+    if (!fromLocal) {
+        ReactionButton(Modifier.padding(16.dp), onSendReaction)
+    }
 }
 
 @PreviewLightDark

app/src/main/java/com/geeksville/mesh/ui/message/components/MessageList.kt

@@ -79,7 +79,7 @@ internal fun MessageList(
             val fromLocal = msg.user.id == DataPacket.ID_LOCAL
             val selected by remember { derivedStateOf { selectedIds.value.contains(msg.uuid) } }
 
-            ReactionRow(fromLocal, msg.emojis) { onSendReaction(it, msg.packetId) }
+            ReactionRow(fromLocal, msg.emojis) {} // TODO
             MessageItem(
                 shortName = msg.user.shortName.takeIf { !fromLocal },
                 messageText = msg.text,
@@ -89,7 +89,8 @@ internal fun MessageList(
                 onClick = { if (inSelectionMode) toggle(msg.uuid) },
                 onLongClick = { toggle(msg.uuid) },
                 onChipClick = { onClick(msg) },
-                onStatusClick = { showStatusDialog = msg }
+                onStatusClick = { showStatusDialog = msg },
+                onSendReaction = { onSendReaction(it, msg.packetId) },
             )
         }
     }

app/src/main/java/com/geeksville/mesh/ui/message/components/Reaction.kt

@@ -23,25 +23,26 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Badge
 import androidx.compose.material.BadgedBox
+import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.twotone.Add
+import androidx.compose.material.icons.filled.EmojiEmotions
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
@@ -54,15 +55,39 @@ import com.geeksville.mesh.database.entity.Reaction
 import com.geeksville.mesh.ui.components.EmojiPicker
 import com.geeksville.mesh.ui.theme.AppTheme
 
+@Composable
+fun ReactionButton(
+    modifier: Modifier = Modifier,
+    onClick: (String) -> Unit = {}
+) {
+    var showEmojiPickerDialog by remember { mutableStateOf(false) }
+    if (showEmojiPickerDialog) {
+        EmojiPickerDialog(
+            onConfirm = {
+                showEmojiPickerDialog = false
+                onClick(it)
+            },
+            onDismiss = { showEmojiPickerDialog = false }
+        )
+    }
+    IconButton(onClick = { showEmojiPickerDialog = true }) {
+        Icon(
+            imageVector = Icons.Default.EmojiEmotions,
+            contentDescription = "emoji",
+            modifier = modifier.size(16.dp),
+            tint = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium),
+        )
+    }
+}
+
 @Composable
 private fun ReactionItem(
     emoji: String,
-    isAddEmojiItem: Boolean = false,
     emojiCount: Int = 1,
     onClick: () -> Unit = {},
 ) {
     BadgedBox(
-        modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
+        modifier = Modifier.padding(start = 2.dp, top = 8.dp, end = 2.dp, bottom = 4.dp),
         badge = {
             if (emojiCount > 1) {
                 Badge(
@@ -84,23 +109,12 @@ private fun ReactionItem(
             shape = RoundedCornerShape(32.dp),
             elevation = 4.dp,
         ) {
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                if (isAddEmojiItem) {
-                    Icon(
-                        imageVector = Icons.TwoTone.Add,
-                        contentDescription = null,
-                        modifier = Modifier.padding(start = 8.dp),
-                    )
-                }
-                Text(
-                    text = emoji,
-                    modifier = Modifier
-                        .padding(8.dp)
-                        .clip(CircleShape),
-                )
-            }
+            Text(
+                text = emoji,
+                modifier = Modifier
+                    .padding(8.dp)
+                    .clip(CircleShape),
+            )
         }
     }
 }
@@ -123,29 +137,13 @@ fun ReactionRow(
             ).entries
         )
     }
-    var showEmojiPickerDialog by remember { mutableStateOf(false) }
-    if (showEmojiPickerDialog) {
-        EmojiPickerDialog(
-            onConfirm = {
-                showEmojiPickerDialog = false
-                onSendReaction(it)
-            },
-            onDismiss = { showEmojiPickerDialog = false }
-        )
-    }
-    @Composable
-    fun AddEmojiItem() {
-        ReactionItem(
-            emoji = "\uD83D\uDE42",
-            isAddEmojiItem = true,
-            onClick = {
-                showEmojiPickerDialog = true
-            }
-        )
-    }
 
-    @Composable
-    fun EmojiList() {
+    FlowRow(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp),
+        horizontalArrangement = if (fromLocal) Arrangement.End else Arrangement.Start
+    ) {
         emojiList.forEach { entry ->
             ReactionItem(
                 emoji = entry.key,
@@ -156,14 +154,6 @@ fun ReactionRow(
             )
         }
     }
-
-    FlowRow(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = if (fromLocal) Arrangement.End else Arrangement.Start
-    ) {
-        EmojiList()
-        AddEmojiItem()
-    }
 }
 
 fun reduceEmojis(emojis: List<String>): Map<String, Int> = emojis.groupingBy { it }.eachCount()
@@ -192,7 +182,7 @@ fun ReactionItemPreview() {
         ) {
             ReactionItem(emoji = "\uD83D\uDE42")
             ReactionItem(emoji = "\uD83D\uDE42", emojiCount = 2)
-            ReactionItem(emoji = "\uD83D\uDE42", isAddEmojiItem = true)
+            ReactionButton()
         }
     }
 }