Improve reaction summary: make yourself "You" and sort to the beginningbugfix/noid/improve-reaction-summary

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 19 insertions, 5 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 0998c2d02..780ede295 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -127,13 +127,11 @@ the main body of the message as well as a quote.
 						slot="trigger"
 						class="reaction-button"
 						@click="handleReactionClick(reaction)">
-						<span class="reaction-button__emoji"> {{ reaction }} </span>
-						<span> {{ simpleReactions[reaction] }} </span>
+						<span class="reaction-button__emoji">{{ reaction }}</span>
+						<span>{{ simpleReactions[reaction] }}</span>
 					</button>
 					<div v-if="detailedReactions" class="reaction-details">
-						<p v-for="detailedReaction in detailedReactions[reaction]" :key="detailedReaction.actorDisplayName">
-							{{ detailedReaction.actorDisplayName }}
-						</p>
+						<span>{{ getReactionSummary(reaction) }}</span>
 					</div>
 				</Popover>
 
@@ -710,6 +708,22 @@ export default {
 
 			this.isDeleting = false
 		},
+
+		getReactionSummary(reaction) {
+			const list = this.detailedReactions[reaction]
+			const summary = []
+
+			for (const item in list) {
+				if (list[item].actorType === this.$store.getters.getActorType()
+					&& list[item].actorId === this.$store.getters.getActorId()) {
+					summary.unshift(t('spreed', 'You'))
+				} else {
+					summary.push(list[item].actorDisplayName)
+				}
+			}
+
+			return summary.join(', ')
+		},
 	},
 }
 </script>