Discord-style reaction tooltips

Tooltips now show a large emoji on the left with reactor names
stacked vertically, instead of a comma-separated name list.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/components/CommentReactions.vue

@@ -70,7 +70,12 @@ async function pick(emoji: string) {
           <span class="text-sm font-medium tabular-nums" :class="r.me ? 'text-foreground' : 'text-muted-foreground'">{{ r.count }}</span>
         </button>
       </TooltipTrigger>
-      <TooltipContent>{{ r.names.join(', ') }}</TooltipContent>
+      <TooltipContent class="flex items-center gap-2.5 px-3 py-2">
+        <span class="text-5xl leading-none">{{ r.emoji }}</span>
+        <span class="flex flex-col leading-snug">
+          <span v-for="n in r.names" :key="n">{{ n }}</span>
+        </span>
+      </TooltipContent>
     </Tooltip>
   </div>
 </template>

app/components/UploadReactions.vue

@@ -73,7 +73,12 @@ async function pick(emoji: string) {
           <span class="text-sm font-medium tabular-nums" :class="r.me ? 'text-foreground' : 'text-muted-foreground'">{{ r.count }}</span>
         </button>
       </TooltipTrigger>
-      <TooltipContent>{{ r.names.join(', ') }}</TooltipContent>
+      <TooltipContent class="flex items-center gap-2.5 px-3 py-2">
+        <span class="text-5xl leading-none">{{ r.emoji }}</span>
+        <span class="flex flex-col leading-snug">
+          <span v-for="n in r.names" :key="n">{{ n }}</span>
+        </span>
+      </TooltipContent>
     </Tooltip>
   </div>
 </template>