feat(Reactions): add All button

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue

@@ -23,6 +23,12 @@
 <template>
 	<!-- reactions buttons and popover with details -->
 	<div class="reactions-wrapper">
+		<!-- all reactions button -->
+		<NcButton v-if="reactionsSorted.length > 1"
+			class="reaction-button"
+			@click="showAllReactions = true">
+			{{ t('spreed', 'All') }}
+		</NcButton>
 		<NcPopover v-for="reaction in reactionsSorted"
 			:key="reaction"
 			:delay="200"
@@ -59,6 +65,32 @@
 				</template>
 			</NcButton>
 		</NcEmojiPicker>
+
+		<!-- all reactions -->
+		<NcModal v-if="showAllReactions"
+			size="small"
+			:container="container"
+			@close="showAllReactions = false">
+			<div class="reactions__modal">
+				<h2>
+					{{ t('spreed', 'All ({count})', { count: flatReactions.length }) }}
+				</h2>
+				<ul id="all-reactions">
+					<li v-for="item in flatReactions"
+						:key="item.actorDisplayName"
+						class="reaction-item">
+						<span class="reaction-actor">
+							<AvatarWrapper :id="item.actorId"
+								:name="getDisplayNameForReaction(item)"
+								:source="item.actorType"
+								disable-menu />
+							{{ item.actorDisplayName }}
+						</span>
+						<span class="reaction-emoji">{{ item.reaction.join('') }}</span>
+					</li>
+				</ul>
+			</div>
+		</NcModal>
 	</div>
 </template>
 
@@ -70,8 +102,11 @@ import { showError } from '@nextcloud/dialogs'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
+import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+
 import { ATTENDEE } from '../../../../../constants.js'
 import { useGuestNameStore } from '../../../../../stores/guestName.js'
 import { useReactionsStore } from '../../../../../stores/reactions.js'
@@ -83,8 +118,10 @@ export default {
 		NcButton,
 		NcEmojiPicker,
 		NcLoadingIcon,
+		NcModal,
 		NcPopover,
 		EmoticonOutline,
+		AvatarWrapper,
 	},
 
 	props: {
@@ -119,7 +156,17 @@ export default {
 		 }
 	},
 
+	data() {
+		return {
+			showAllReactions: false,
+		}
+	},
+
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		hasReactions() {
 			return Object.keys(Object(this.detailedReactions)).length !== 0
 		},
@@ -132,6 +179,28 @@ export default {
 			return this.$store.getters.message(this.token, this.id).reactions
 		},
 
+		flatReactions() {
+			const mergedReactionsMap = {}
+
+			Object.entries(this.detailedReactions).forEach(([reaction, actors]) => {
+				actors.forEach(actor => {
+					const key = `${actor.actorId}-${actor.actorType}`
+					if (mergedReactionsMap[key]) {
+						mergedReactionsMap[key].reaction.push(reaction)
+					} else {
+						mergedReactionsMap[key] = {
+							actorDisplayName: actor.actorDisplayName,
+							actorId: actor.actorId,
+							actorType: actor.actorType,
+							reaction: [reaction]
+						}
+					}
+				})
+			})
+
+			return Object.values(mergedReactionsMap)
+		},
+
 		reactionsSelf() {
 			return this.$store.getters.message(this.token, this.id).reactionsSelf
 		},
@@ -237,6 +306,11 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.reactions__modal{
+	min-height: 50vh;
+	padding: 18px;
+}
+
 .reactions-wrapper {
 	display: flex;
 	flex-wrap: wrap;
@@ -258,6 +332,22 @@ export default {
 	padding: 8px;
 }
 
+.reaction-item {
+	display: flex;
+	justify-content: space-between;
+	padding: 8px;
+}
+
+.reaction-actor {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.reaction-emoji {
+	line-height: 44px;
+}
+
 .details-loading {
 	display: flex;
 	justify-content: center;