Sort reactions by count with stable fallback order

frontend_nuxt/components/ReactionsGroup.vue

@@ -107,11 +107,12 @@ const likeCount = computed(() => counts.value['LIKE'] || 0)
 const userReacted = (type) =>
   reactions.value.some((r) => r.type === type && r.user === authState.username)
 
-const baseReactionOrder = computed(() => {
-  if (reactionTypes.value.length) return [...reactionTypes.value]
-
-  const order = []
+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)
@@ -121,38 +122,21 @@ const baseReactionOrder = computed(() => {
   return order
 })
 
-const sortedReactionTypes = computed(() => {
-  const baseOrder = [...baseReactionOrder.value]
-  for (const type of Object.keys(counts.value)) {
-    if (!baseOrder.includes(type)) baseOrder.push(type)
-  }
-
-  const withMetadata = baseOrder.map((type, index) => ({
-    type,
-    count: counts.value[type] || 0,
-    index,
-  }))
-
-  const nonZero = withMetadata
-    .filter((item) => item.count > 0)
+const displayedReactions = computed(() => {
+  const orderIndex = new Map(defaultOrder.value.map((type, index) => [type, index]))
+  return Object.entries(counts.value)
+    .map(([type, count]) => ({ type, count }))
     .sort((a, b) => {
       if (b.count !== a.count) return b.count - a.count
-      return a.index - b.index
+      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
     })
-
-  const zero = withMetadata.filter((item) => item.count === 0)
-
-  return [...nonZero, ...zero].map((item) => item.type)
-})
-
-const displayedReactions = computed(() => {
-  return sortedReactionTypes.value
-    .filter((type) => counts.value[type] > 0)
     .slice(0, 3)
-    .map((type) => ({ type }))
+    .map(({ type }) => ({ type }))
 })
 
-const panelTypes = computed(() => sortedReactionTypes.value.filter((t) => t !== 'LIKE'))
+const panelTypes = computed(() => reactionTypes.value.filter((t) => t !== 'LIKE'))
 
 const panelVisible = ref(false)
 let hideTimer = null