From b335405ac9fb32565bd8bdce91e4fc8ab14817be Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 3 Dec 2025 09:51:56 -0600
Subject: [PATCH] Fix: Corregir bugs en interfaz de mensajes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Corregir modal de imagen vacío (agregar template #default a UModal)
- Agregar soporte para click derecho y long press en selector de reacciones
- Agregar fondo sólido al card de reacciones (bg-[var(--wa-surface)])
---
 app/components/messages/MessageBubble.vue     | 20 +++++++++
 app/components/messages/ReactionPicker.vue    | 38 +++++++++--------
 .../messages/content/MessageImage.vue         | 41 ++++++++++---------
 3 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index 92cbdf9..f16340a 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -15,6 +15,10 @@
     <div
       class="relative max-w-[70%] rounded-lg overflow-hidden"
       :class="bubbleClass"
+      @contextmenu.prevent="showReactionPicker = true"
+      @touchstart="onTouchStart"
+      @touchend="onTouchEnd"
+      @touchmove="onTouchEnd"
     >
       <!-- Quoted message -->
       <div v-if="message.quoted" class="px-2 pt-2">
@@ -235,6 +239,22 @@ const emit = defineEmits<{
 const showDebug = ref(false)
 const showReactionPicker = ref(false)
 
+// Long press timer for mobile
+let longPressTimer: ReturnType<typeof setTimeout> | null = null
+
+const onTouchStart = () => {
+  longPressTimer = setTimeout(() => {
+    showReactionPicker.value = true
+  }, 500) // 500ms long press
+}
+
+const onTouchEnd = () => {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer)
+    longPressTimer = null
+  }
+}
+
 // Handle reaction selection
 const handleReaction = (emoji: string) => {
   emit('react', props.message, emoji)
diff --git a/app/components/messages/ReactionPicker.vue b/app/components/messages/ReactionPicker.vue
index b6939da..c972d85 100644
--- a/app/components/messages/ReactionPicker.vue
+++ b/app/components/messages/ReactionPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="visible"
-    class="absolute z-50 bg-[var(--wa-bg-dark)] rounded-full shadow-lg border border-[var(--wa-border)] p-1 flex items-center gap-1"
+    class="absolute z-50 bg-[var(--wa-surface)] rounded-full shadow-lg border border-[var(--wa-border)] p-1 flex items-center gap-1"
     :class="position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'"
     @click.stop
   >
@@ -24,26 +24,28 @@
 
   <!-- Full emoji picker modal -->
   <UModal v-model="showFullPicker">
-    <div class="p-4">
-      <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reacción</h3>
+    <template #default>
+      <div class="p-4 bg-[var(--wa-surface)]">
+        <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reaccion</h3>
 
-      <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
-        <button
-          v-for="emoji in allEmojis"
-          :key="emoji"
-          class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
-          @click="selectReaction(emoji); showFullPicker = false"
-        >
-          {{ emoji }}
-        </button>
-      </div>
+        <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
+          <button
+            v-for="emoji in allEmojis"
+            :key="emoji"
+            class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
+            @click="selectReaction(emoji); showFullPicker = false"
+          >
+            {{ emoji }}
+          </button>
+        </div>
 
-      <div class="mt-4 flex justify-end">
-        <UButton variant="ghost" @click="showFullPicker = false">
-          Cancelar
-        </UButton>
+        <div class="mt-4 flex justify-end">
+          <UButton variant="ghost" @click="showFullPicker = false">
+            Cancelar
+          </UButton>
+        </div>
       </div>
-    </div>
+    </template>
   </UModal>
 </template>
 
diff --git a/app/components/messages/content/MessageImage.vue b/app/components/messages/content/MessageImage.vue
index 84cbc76..8898c91 100644
--- a/app/components/messages/content/MessageImage.vue
+++ b/app/components/messages/content/MessageImage.vue
@@ -89,25 +89,28 @@
 
   <!-- Fullscreen modal -->
   <UModal v-model="showFullscreen" :ui="{ width: 'max-w-[95vw]' }">
-    <div class="relative bg-black flex items-center justify-center min-h-[50vh]">
-      <img
-        :src="imageUrl"
-        :alt="'Imagen'"
-        class="max-w-full max-h-[90vh] object-contain"
-      />
-      <button
-        class="absolute top-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70"
-        @click="showFullscreen = false"
-      >
-        <UIcon name="i-lucide-x" class="w-6 h-6" />
-      </button>
-      <button
-        class="absolute bottom-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70"
-        @click="downloadImage"
-      >
-        <UIcon name="i-lucide-download" class="w-6 h-6" />
-      </button>
-    </div>
+    <template #default>
+      <div class="relative bg-black flex items-center justify-center min-h-[50vh]">
+        <img
+          v-if="showFullscreen"
+          :src="imageUrl"
+          :alt="'Imagen'"
+          class="max-w-full max-h-[90vh] object-contain"
+        />
+        <button
+          class="absolute top-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70"
+          @click="showFullscreen = false"
+        >
+          <UIcon name="i-lucide-x" class="w-6 h-6" />
+        </button>
+        <button
+          class="absolute bottom-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70"
+          @click="downloadImage"
+        >
+          <UIcon name="i-lucide-download" class="w-6 h-6" />
+        </button>
+      </div>
+    </template>
   </UModal>
 </template>