From 6b4b12435a265e782ba275f5a958eacb720ff2a3 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 27 Oct 2024 16:11:11 +0200
Subject: [PATCH] web/timeline: don't render reactions if there are none

---
 web/src/ui/timeline/TimelineEvent.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index a001b7e..cd118c4 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -41,14 +41,18 @@ const formatShortTime = (time: Date) =>
 	`${time.getHours().toString().padStart(2, "0")}:${time.getMinutes().toString().padStart(2, "0")}`
 
 const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => {
+	const reactionEntries = Object.entries(reactions).filter(([, count]) => count > 0).sort((a, b) => b[1] - a[1])
+	if (reactionEntries.length === 0) {
+		return null
+	}
 	return <div className="event-reactions">
-		{Object.entries(reactions).map(([reaction, count]) => count > 0 ?
+		{reactionEntries.map(([reaction, count]) =>
 			<div key={reaction} className="reaction" title={reaction}>
 				{reaction.startsWith("mxc://")
 					? <img className="reaction-emoji" src={getMediaURL(reaction)} alt=""/>
 					: <span className="reaction-emoji">{reaction}</span>}
 				<span className="reaction-count">{count}</span>
-			</div> : null)}
+			</div>)}
 	</div>
 }