Add animation to zap and reaction popups

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt

@@ -24,8 +24,10 @@ import android.content.Context
 import android.content.Intent
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ContentTransform
 import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.core.MutableTransitionState
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
@@ -147,6 +149,7 @@ import kotlinx.collections.immutable.persistentSetOf
 import kotlinx.collections.immutable.toImmutableList
 import kotlinx.collections.immutable.toImmutableSet
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import kotlin.math.roundToInt
 
@@ -1326,11 +1329,38 @@ fun ReactionChoicePopup(
         .collectAsStateWithLifecycle()
     val toRemove = remember { baseNote.reactedBy(accountViewModel.userProfile()).toImmutableSet() }
 
+    // Define animation specs
+    val animationDuration = 250
+    val fadeAnimationSpec = tween<Float>(durationMillis = animationDuration)
+
+    // Prevent multiple calls to onDismiss()
+    var dismissed by remember { mutableStateOf(false) }
+
+    val visibilityState = remember { MutableTransitionState(false).apply { targetState = true } }
+    LaunchedEffect(visibilityState.targetState) {
+        if (!visibilityState.targetState && !dismissed) {
+            delay(animationDuration.toLong())
+            dismissed = true
+            onDismiss()
+        }
+    }
+
     Popup(
         alignment = Alignment.BottomCenter,
         offset = IntOffset(0, iconSizePx),
-        onDismissRequest = { onDismiss() },
+        onDismissRequest = { visibilityState.targetState = false },
         properties = PopupProperties(focusable = true),
+    ) {
+        AnimatedVisibility(
+            visibleState = visibilityState,
+            enter =
+                slideInVertically(
+                    initialOffsetY = { it / 2 },
+                ) + fadeIn(animationSpec = fadeAnimationSpec),
+            exit =
+                slideOutVertically(
+                    targetOffsetY = { it / 2 },
+                ) + fadeOut(animationSpec = fadeAnimationSpec),
         ) {
             ReactionChoicePopupContent(
                 reactions,
@@ -1340,11 +1370,12 @@ fun ReactionChoicePopup(
                         baseNote,
                         reactionType,
                     )
-                onDismiss()
+                    visibilityState.targetState = false
                 },
                 onChangeAmount,
             )
         }
+    }
 }
 
 @OptIn(ExperimentalLayoutApi::class)
@@ -1505,11 +1536,38 @@ fun ZapAmountChoicePopup(
 
     val yOffset = with(LocalDensity.current) { -popupYOffset.toPx().toInt() }
 
+    // Define animation specs
+    val animationDuration = 250
+    val fadeAnimationSpec = tween<Float>(durationMillis = animationDuration)
+
+    // Prevent multiple calls to onDismiss()
+    var dismissed by remember { mutableStateOf(false) }
+
+    val visibilityState = remember { MutableTransitionState(false).apply { targetState = true } }
+    LaunchedEffect(visibilityState.targetState) {
+        if (!visibilityState.targetState && !dismissed) {
+            delay(animationDuration.toLong())
+            dismissed = true
+            onDismiss()
+        }
+    }
+
     Popup(
         alignment = Alignment.BottomCenter,
         offset = IntOffset(0, yOffset),
-        onDismissRequest = { onDismiss() },
+        onDismissRequest = { visibilityState.targetState = false },
         properties = PopupProperties(focusable = true),
+    ) {
+        AnimatedVisibility(
+            visibleState = visibilityState,
+            enter =
+                slideInVertically(
+                    initialOffsetY = { it / 2 },
+                ) + fadeIn(animationSpec = fadeAnimationSpec),
+            exit =
+                slideOutVertically(
+                    targetOffsetY = { it / 2 },
+                ) + fadeOut(animationSpec = fadeAnimationSpec),
         ) {
             FlowRow(horizontalArrangement = Arrangement.Center) {
                 zapAmountChoices.forEach { amountInSats ->
@@ -1527,7 +1585,7 @@ fun ZapAmountChoicePopup(
                                 onProgress,
                                 onPayViaIntent,
                             )
-                        onDismiss()
+                            visibilityState.targetState = false
                         },
                         shape = ButtonBorder,
                         colors =
@@ -1553,7 +1611,7 @@ fun ZapAmountChoicePopup(
                                             onProgress,
                                             onPayViaIntent,
                                         )
-                                    onDismiss()
+                                        visibilityState.targetState = false
                                     },
                                     onLongClick = { onChangeAmount() },
                                 ),
@@ -1562,6 +1620,7 @@ fun ZapAmountChoicePopup(
                 }
             }
         }
+    }
 }
 
 fun showCount(count: Int?): String {