From fab086d17e9345d6d469ae6db9514ff5dd3ff1e6 Mon Sep 17 00:00:00 2001
From: FliesentischKing <danielkoenig@cock.li>
Date: Sun, 4 Oct 2026 03:05:41 +0200
Subject: [PATCH] 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 | 7 ++++++-
 app/components/UploadReactions.vue  | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/components/CommentReactions.vue b/app/components/CommentReactions.vue
index 96e0cc1..80abe11 100644
--- a/app/components/CommentReactions.vue
+++ b/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>
diff --git a/app/components/UploadReactions.vue b/app/components/UploadReactions.vue
index f41f420..e6eccab 100644
--- a/app/components/UploadReactions.vue
+++ b/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>