From 1fd31184a7a6948328391ea448949392e3330371 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 17 Sep 2025 20:23:26 +0800
Subject: [PATCH] Sort reactions by count with stable fallback order

---
 frontend_nuxt/components/ReactionsGroup.vue | 26 +++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index 1a5d346fc..a48f83f9e 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -107,11 +107,33 @@ const likeCount = computed(() => counts.value['LIKE'] || 0)
 const userReacted = (type) =>
   reactions.value.some((r) => r.type === type && r.user === authState.username)
 
+const defaultOrder = computed(() => {
+  if (reactionTypes.value && reactionTypes.value.length) {
+    return reactionTypes.value
+  }
+  const seen = new Set()
+  const order = []
+  for (const reaction of reactions.value) {
+    if (!seen.has(reaction.type)) {
+      seen.add(reaction.type)
+      order.push(reaction.type)
+    }
+  }
+  return order
+})
+
 const displayedReactions = computed(() => {
+  const orderIndex = new Map(defaultOrder.value.map((type, index) => [type, index]))
   return Object.entries(counts.value)
-    .sort((a, b) => b[1] - a[1])
+    .map(([type, count]) => ({ type, count }))
+    .sort((a, b) => {
+      if (b.count !== a.count) return b.count - a.count
+      const indexA = orderIndex.has(a.type) ? orderIndex.get(a.type) : Number.MAX_SAFE_INTEGER
+      const indexB = orderIndex.has(b.type) ? orderIndex.get(b.type) : Number.MAX_SAFE_INTEGER
+      return indexA - indexB
+    })
     .slice(0, 3)
-    .map(([type]) => ({ type }))
+    .map(({ type }) => ({ type }))
 })
 
 const panelTypes = computed(() => reactionTypes.value.filter((t) => t !== 'LIKE'))