Анимация, список реакций

client-mobile/chats/presentation/components/MessageBubble.kt

@@ -3,6 +3,7 @@ package chats.presentation.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.shape.CircleShape
@@ -647,32 +648,64 @@ fun MessageContextMenu(
     onReactionSelected: (String) -> Unit,
     onAction: (String) -> Unit
 ) {
-    androidx.compose.material3.Surface(
-        modifier = Modifier
-            .width(220.dp)
-            .clip(RoundedCornerShape(12.dp)),
-        color = Color(0xFF1E1E1E),
-        shadowElevation = 8.dp
-    ) {
-        Column {
-            // Reactions
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(8.dp),
-                horizontalArrangement = Arrangement.SpaceBetween
-            ) {
-                listOf("👍", "❤️", "😂", "😮", "😢", "🔥").forEach { emoji ->
-                    Text(
-                        text = emoji,
-                        fontSize = 24.sp,
-                        modifier = Modifier
-                            .clip(CircleShape)
-                            .clickable { onReactionSelected(emoji) }
-                            .padding(4.dp)
+    var isVisible by remember { mutableStateOf(false) }
+    
+    LaunchedEffect(Unit) {
+        isVisible = true
+    }
+
+    androidx.compose.animation.AnimatedVisibility(
+        visible = isVisible,
+        enter = androidx.compose.animation.fadeIn(animationSpec = androidx.compose.animation.core.tween(200)) + 
+                androidx.compose.animation.scaleIn(
+                    initialScale = 0.5f,
+                    animationSpec = androidx.compose.animation.core.spring(
+                        dampingRatio = 0.6f,
+                        stiffness = 400f
+                    ),
+                    transformOrigin = androidx.compose.ui.graphics.TransformOrigin(
+                        if (isVisible) 0.5f else 0.5f, 
+                        0f
                     )
+                ),
+        exit = androidx.compose.animation.fadeOut() + androidx.compose.animation.scaleOut()
+    ) {
+        androidx.compose.material3.Surface(
+            modifier = Modifier
+                .width(280.dp) // Even wider for all reactions
+                .clip(RoundedCornerShape(20.dp)),
+            color = Color(0xFF1E1E1E),
+            shadowElevation = 15.dp,
+            border = androidx.compose.foundation.BorderStroke(0.5.dp, Color.White.copy(alpha = 0.15f))
+        ) {
+            Column {
+                // Extended Reactions scrollable bar
+                androidx.compose.foundation.lazy.LazyRow(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 4.dp, vertical = 10.dp),
+                    horizontalArrangement = Arrangement.spacedBy(6.dp),
+                    contentPadding = PaddingValues(horizontal = 12.dp)
+                ) {
+                    val telegramReactions = listOf(
+                        "👍", "❤️", "😂", "🔥", "💯", "👏", "🤩", "🤔", "🤯", "😱", "🤬", 
+                        "👎", "💩", "🤡", "🥳", "😇", "🌚", "🙏", "👌", "🕊️", "🐳", 
+                        "🌭", "🦄", "🍌", "💊", "🍓", "🍾", "💋", "🖕", "👀", "👻",
+                        "🤝", "🤣", "⚡", "✨", "🎈", "🎉", "🧊", "🆒", "🤨", "😐", 
+                        "🤷‍♂️", "💅", "🏆", "👾", "🎯", "🎲", "🍷", "🤮", "🥱", "😴", 
+                        "🤐", "🥴"
+                    )
+                    items(telegramReactions) { emoji ->
+                        Text(
+                            text = emoji,
+                            fontSize = 28.sp,
+                            modifier = Modifier
+                                .clip(CircleShape)
+                                .clickable { onReactionSelected(emoji) }
+                                .padding(4.dp)
+                        )
+                    }
                 }
-            }
 
             Divider(color = Color.White.copy(alpha = 0.1f))
 
@@ -694,6 +727,7 @@ fun MessageContextMenu(
         }
     }
 }
+}
 
 @Composable
 fun ContextMenuItem(