Fix: Corregir bugs en interfaz de mensajes

- 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

@@ -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)

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,8 +24,9 @@
 
   <!-- Full emoji picker modal -->
   <UModal v-model="showFullPicker">
-    <div class="p-4">
+    <template #default>
-      <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reacción</h3>
+      <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
@@ -44,6 +45,7 @@
           </UButton>
         </div>
       </div>
+    </template>
   </UModal>
 </template>
 

app/components/messages/content/MessageImage.vue

@@ -89,8 +89,10 @@
 
   <!-- Fullscreen modal -->
   <UModal v-model="showFullscreen" :ui="{ width: 'max-w-[95vw]' }">
+    <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"
@@ -108,6 +110,7 @@
           <UIcon name="i-lucide-download" class="w-6 h-6" />
         </button>
       </div>
+    </template>
   </UModal>
 </template>