From 5df59747fe9700b7471ef9a434f4bb4c33d48b71 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 4 Dec 2025 10:33:42 -0600
Subject: [PATCH] Feat: Agregar animacion de crecimiento vertical para previews

- Usar Vue Transition con slide-up para MediaPreview y ReplyPreview
- Animar altura, opacidad y espaciado
- Duracion 0.3s con ease
---
 app/components/messages/MessageInput.vue | 87 ++++++++++++++++--------
 1 file changed, 58 insertions(+), 29 deletions(-)

diff --git a/app/components/messages/MessageInput.vue b/app/components/messages/MessageInput.vue
index 08199fa..f14e9c3 100644
--- a/app/components/messages/MessageInput.vue
+++ b/app/components/messages/MessageInput.vue
@@ -1,36 +1,40 @@
 <template>
   <div class="space-y-2">
-    <!-- Reply preview -->
-    <div
-      v-if="replyingTo"
-      class="flex items-center gap-2 p-2 rounded-lg bg-[var(--wa-bg-light)]"
-    >
-      <div class="w-1 h-8 rounded-full bg-[var(--wa-green-light)]" />
-      <div class="flex-1 min-w-0">
-        <p class="text-xs font-medium text-[var(--wa-green-light)]">
-          {{ replyingTo.fromMe ? 'Tú' : (replyingTo.pushName || 'Mensaje') }}
-        </p>
-        <p class="text-sm text-[var(--wa-text-muted)] truncate">
-          {{ replyingTo.content || getTypePlaceholder(replyingTo.type) }}
-        </p>
-      </div>
-      <button
-        class="p-1 rounded-full hover:bg-[var(--wa-border)]"
-        @click="$emit('cancelReply')"
+    <!-- Reply preview with animation -->
+    <Transition name="slide-up">
+      <div
+        v-if="replyingTo"
+        class="flex items-center gap-2 p-2 rounded-lg bg-[var(--wa-bg-light)]"
       >
-        <UIcon name="i-lucide-x" class="w-4 h-4 text-[var(--wa-text-muted)]" />
-      </button>
-    </div>
+        <div class="w-1 h-8 rounded-full bg-[var(--wa-green-light)]" />
+        <div class="flex-1 min-w-0">
+          <p class="text-xs font-medium text-[var(--wa-green-light)]">
+            {{ replyingTo.fromMe ? 'Tú' : (replyingTo.pushName || 'Mensaje') }}
+          </p>
+          <p class="text-sm text-[var(--wa-text-muted)] truncate">
+            {{ replyingTo.content || getTypePlaceholder(replyingTo.type) }}
+          </p>
+        </div>
+        <button
+          class="p-1 rounded-full hover:bg-[var(--wa-border)]"
+          @click="$emit('cancelReply')"
+        >
+          <UIcon name="i-lucide-x" class="w-4 h-4 text-[var(--wa-text-muted)]" />
+        </button>
+      </div>
+    </Transition>
 
-    <!-- Media preview -->
-    <MediaPreview
-      v-if="selectedFiles.length > 0"
-      :files="selectedFiles"
-      :caption="caption"
-      @remove="removeFile"
-      @update:caption="caption = $event"
-      @update:stickerModes="stickerModes = $event"
-    />
+    <!-- Media preview with animation -->
+    <Transition name="slide-up">
+      <MediaPreview
+        v-if="selectedFiles.length > 0"
+        :files="selectedFiles"
+        :caption="caption"
+        @remove="removeFile"
+        @update:caption="caption = $event"
+        @update:stickerModes="stickerModes = $event"
+      />
+    </Transition>
 
     <!-- Recording indicator -->
     <div
@@ -365,3 +369,28 @@ const getTypePlaceholder = (type: MessageType): string => {
   return getMessageTypePlaceholder(type)
 }
 </script>
+
+<style scoped>
+/* Slide up animation for previews */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  max-height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.slide-up-enter-to,
+.slide-up-leave-from {
+  opacity: 1;
+  max-height: 200px;
+}
+</style>