web/timeline: add a bubble around reactions

tulir · Oct 21, 2024 · 293a641 · 293a641
1 parent f5eeb84
commit 293a641
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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>
 }