From 293a6416fc4fd43043e380bfdc37810c50dd9048 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 21 Oct 2024 23:20:02 +0300
Subject: [PATCH] web/timeline: add a bubble around reactions

---
 web/src/ui/timeline/TimelineEvent.css | 18 ++++++++++++++++++
 web/src/ui/timeline/TimelineEvent.tsx |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index ee2d591f..f701f14c 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -136,6 +136,24 @@ div.timeline-event {
 	}
 }
 
+div.event-content > div.event-reactions {
+	display: flex;
+	gap: .25rem;
+	margin: .25rem 0;
+
+	> span.reaction {
+		background-color: #efe;
+		border: 1px solid #ada;
+		border-radius: 2rem;
+		padding: 0 .5rem;
+
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		max-width: 20rem;
+	}
+}
+
 div.hidden-event > div.sender-avatar, blockquote.reply-body > div.reply-sender > div.sender-avatar {
 	margin-top: 0;
 	display: flex;
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 93a84d9b..8cda7304 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -41,9 +41,9 @@ const formatShortTime = (time: Date) =>
 
 const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => {
 	return <div className="event-reactions">
-		{Object.entries(reactions).map(([reaction, count]) => <span key={reaction} className="reaction">
-			{reaction} {count}
-		</span>)}
+		{Object.entries(reactions).map(([reaction, count]) => count > 0 ? <span key={reaction} className="reaction" title={reaction}>
+			<span className="reaction">{reaction}</span> <span className="reaction-count">{count}</span>
+		</span> : null)}
 	</div>
 }