From 4f291e03c76dcb35b517ca9722887330e8bac86f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 8 Mar 2024 17:33:16 +0100
Subject: [PATCH 1/5] chore(Participants): move files in a single directory

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewConversationContactsPage.vue            |  2 +-
 .../BreakoutRooms/BreakoutRoomsTab.vue         |  2 +-
 .../Participant => }/Participant.spec.js       |  8 ++++----
 .../Participant => }/Participant.vue           | 18 +++++++++---------
 .../ParticipantPermissionsEditor.spec.js       |  6 +++---
 .../ParticipantPermissionsEditor.vue           |  4 ++--
 .../ParticipantsList.vue                       |  4 ++--
 .../ParticipantsListVirtual.vue                |  4 ++--
 .../ParticipantsSearchResults.vue              |  8 ++++----
 .../Participants/ParticipantsTab.vue           |  6 +++---
 10 files changed, 31 insertions(+), 31 deletions(-)
 rename src/components/RightSidebar/Participants/{ParticipantsList/Participant => }/Participant.spec.js (99%)
 rename src/components/RightSidebar/Participants/{ParticipantsList/Participant => }/Participant.vue (98%)
 rename src/components/RightSidebar/Participants/{ParticipantsList/Participant/ParticipantPermissionsEditor => }/ParticipantPermissionsEditor.spec.js (96%)
 rename src/components/RightSidebar/Participants/{ParticipantsList/Participant/ParticipantPermissionsEditor => }/ParticipantPermissionsEditor.vue (95%)
 rename src/components/RightSidebar/Participants/{ParticipantsList => }/ParticipantsList.vue (94%)
 rename src/components/RightSidebar/Participants/{ParticipantsList => }/ParticipantsListVirtual.vue (93%)
 rename src/components/RightSidebar/Participants/{ParticipantsSearchResults => }/ParticipantsSearchResults.vue (96%)

diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index db14e108110..96d623b82e4 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -85,7 +85,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ContactSelectionBubble from '../ContactSelectionBubble.vue'
 import DialpadPanel from '../DialpadPanel.vue'
-import ParticipantSearchResults from '../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
+import ParticipantSearchResults from '../RightSidebar/Participants/ParticipantsSearchResults.vue'
 import SelectPhoneNumber from '../SelectPhoneNumber.vue'
 import TransitionWrapper from '../TransitionWrapper.vue'
 
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 2dbd7e0ad7a..242a35bd280 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -55,7 +55,7 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 import BreakoutRoomItem from './BreakoutRoomItem.vue'
 import BreakoutRoomsActions from './BreakoutRoomsActions.vue'
-import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
+import Participant from '../Participants/Participant.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js
similarity index 99%
rename from src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
rename to src/components/RightSidebar/Participants/Participant.spec.js
index d7de75d7805..f1392da671e 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
+++ b/src/components/RightSidebar/Participants/Participant.spec.js
@@ -11,11 +11,11 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 
 import Participant from './Participant.vue'
-import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 
-import { ATTENDEE, PARTICIPANT } from '../../../../../constants.js'
-import storeConfig from '../../../../../store/storeConfig.js'
-import { findNcActionButton } from '../../../../../test-helpers.js'
+import { ATTENDEE, PARTICIPANT } from '../../../constants.js'
+import storeConfig from '../../../store/storeConfig.js'
+import { findNcActionButton } from '../../../test-helpers.js'
 
 describe('Participant.vue', () => {
 	let conversation
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
similarity index 98%
rename from src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
rename to src/components/RightSidebar/Participants/Participant.vue
index bece42b0580..6f90d2bb9da 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -363,12 +363,12 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import ParticipantPermissionsEditor from './ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue'
-import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
-import DialpadPanel from '../../../../DialpadPanel.vue'
+import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
+import DialpadPanel from '../../DialpadPanel.vue'
 
-import { useIsInCall } from '../../../../../composables/useIsInCall.js'
-import { CONVERSATION, PARTICIPANT, ATTENDEE, WEBINAR } from '../../../../../constants.js'
+import { useIsInCall } from '../../../composables/useIsInCall.js'
+import { CONVERSATION, PARTICIPANT, ATTENDEE, WEBINAR } from '../../../constants.js'
 import {
 	callSIPDialOut,
 	callSIPHangupPhone,
@@ -376,10 +376,10 @@ import {
 	callSIPMutePhone,
 	callSIPUnmutePhone,
 	callSIPSendDTMF,
-} from '../../../../../services/callsService.js'
-import { formattedTime } from '../../../../../utils/formattedTime.ts'
-import { readableNumber } from '../../../../../utils/readableNumber.js'
-import { getStatusMessage } from '../../../../../utils/userStatus.js'
+} from '../../../services/callsService.js'
+import { formattedTime } from '../../../utils/formattedTime.ts'
+import { readableNumber } from '../../../utils/readableNumber.js'
+import { getStatusMessage } from '../../../utils/userStatus.js'
 
 export default {
 	name: 'Participant',
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.spec.js b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
similarity index 96%
rename from src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.spec.js
rename to src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
index f04dd5406d9..74db8f7cb9e 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.spec.js
+++ b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.spec.js
@@ -3,10 +3,10 @@ import { cloneDeep } from 'lodash'
 import Vuex from 'vuex'
 
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
-import PermissionsEditor from '../../../../../PermissionsEditor/PermissionsEditor.vue'
+import PermissionsEditor from '../../PermissionsEditor/PermissionsEditor.vue'
 
-import { PARTICIPANT, ATTENDEE } from '../../../../../../constants.js'
-import storeConfig from '../../../../../../store/storeConfig.js'
+import { PARTICIPANT, ATTENDEE } from '../../../constants.js'
+import storeConfig from '../../../store/storeConfig.js'
 
 describe('ParticipantPermissionsEditor.vue', () => {
 	let conversation
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.vue
similarity index 95%
rename from src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue
rename to src/components/RightSidebar/Participants/ParticipantPermissionsEditor.vue
index ea13937caac..cf80fdb6ab6 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue
+++ b/src/components/RightSidebar/Participants/ParticipantPermissionsEditor.vue
@@ -31,9 +31,9 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
-import PermissionEditor from '../../../../../PermissionsEditor/PermissionsEditor.vue'
+import PermissionEditor from '../../PermissionsEditor/PermissionsEditor.vue'
 
-import { PARTICIPANT } from '../../../../../../constants.js'
+import { PARTICIPANT } from '../../../constants.js'
 
 export default {
 	name: 'ParticipantPermissionsEditor',
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue b/src/components/RightSidebar/Participants/ParticipantsList.vue
similarity index 94%
rename from src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
rename to src/components/RightSidebar/Participants/ParticipantsList.vue
index d764607715d..8e26105b05e 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList.vue
@@ -32,8 +32,8 @@
 
 <script>
 
-import Participant from './Participant/Participant.vue'
-import LoadingPlaceholder from '../../../LoadingPlaceholder.vue'
+import Participant from './Participant.vue'
+import LoadingPlaceholder from '../../LoadingPlaceholder.vue'
 
 export default {
 	name: 'ParticipantsList',
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsListVirtual.vue b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
similarity index 93%
rename from src/components/RightSidebar/Participants/ParticipantsList/ParticipantsListVirtual.vue
rename to src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
index ecbb16e764f..3d0bf154397 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsListVirtual.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
@@ -38,8 +38,8 @@
 <script>
 import { RecycleScroller } from 'vue-virtual-scroller'
 
-import Participant from './Participant/Participant.vue'
-import LoadingPlaceholder from '../../../LoadingPlaceholder.vue'
+import Participant from './Participant.vue'
+import LoadingPlaceholder from '../../LoadingPlaceholder.vue'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
diff --git a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue b/src/components/RightSidebar/Participants/ParticipantsSearchResults.vue
similarity index 96%
rename from src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
rename to src/components/RightSidebar/Participants/ParticipantsSearchResults.vue
index 2d557575002..dfc5c05adf9 100644
--- a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsSearchResults.vue
@@ -101,11 +101,11 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
-import Hint from '../../../Hint.vue'
-import ParticipantsList from '../ParticipantsList/ParticipantsList.vue'
+import ParticipantsList from './ParticipantsList.vue'
+import Hint from '../../Hint.vue'
 
-import { ATTENDEE } from '../../../../constants.js'
-import { useIntegrationsStore } from '../../../../stores/integrations.js'
+import { ATTENDEE } from '../../../constants.js'
+import { useIntegrationsStore } from '../../../stores/integrations.js'
 
 const isCirclesEnabled = loadState('spreed', 'circles_enabled')
 
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index 1927ad6c6f1..2715e039813 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -74,9 +74,9 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 
-import ParticipantsList from './ParticipantsList/ParticipantsList.vue'
-import ParticipantsListVirtual from './ParticipantsList/ParticipantsListVirtual.vue'
-import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue'
+import ParticipantsList from './ParticipantsList.vue'
+import ParticipantsListVirtual from './ParticipantsListVirtual.vue'
+import ParticipantsSearchResults from './ParticipantsSearchResults.vue'
 import DialpadPanel from '../../DialpadPanel.vue'
 import Hint from '../../Hint.vue'
 import SearchBox from '../../LeftSidebar/SearchBox/SearchBox.vue'

From e2360bb3c6578bb680c4acdef807b9a045d4db4b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 11 Mar 2024 15:35:37 +0100
Subject: [PATCH 2/5] feat(AvatarWrapper): show status substitute for federated
 users avatars

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../AvatarWrapper/AvatarWrapper.vue           | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 89be73c3739..bb5d399ebfa 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -29,7 +29,7 @@
 		<div v-else-if="isBot" class="avatar bot">
 			{{ '>_' }}
 		</div>
-		<img v-else-if="isRemoteUser && token"
+		<img v-else-if="isFederatedUser && token"
 			:key="avatarUrl"
 			:src="avatarUrl"
 			:width="size"
@@ -47,10 +47,20 @@
 			:show-user-status-compact="showUserStatusCompact"
 			:preloaded-user-status="preloadedUserStatus"
 			:size="size" />
+		<!-- Override user status for federated users -->
+		<span v-if="showUserStatus && isFederatedUser"
+			class="avatar-wrapper__user-status"
+			role="img"
+			aria-hidden="false"
+			:aria-label="t('spreed', 'Federated user')">
+			<WebIcon :size="14" />
+		</span>
 	</div>
 </template>
 
 <script>
+import WebIcon from 'vue-material-design-icons/Web.vue'
+
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import { ATTENDEE, AVATAR } from '../../constants.js'
@@ -63,6 +73,7 @@ export default {
 
 	components: {
 		NcAvatar,
+		WebIcon,
 	},
 
 	props: {
@@ -130,10 +141,10 @@ export default {
 	computed: {
 		// Determines which icon is displayed
 		iconClass() {
-			if (!this.source || this.isUser || (this.isRemoteUser && this.token) || this.isBot || this.isGuest || this.isDeletedUser) {
+			if (!this.source || this.isUser || (this.isFederatedUser && this.token) || this.isBot || this.isGuest || this.isDeletedUser) {
 				return ''
 			}
-			if (this.isRemoteUser) {
+			if (this.isFederatedUser) {
 				return 'icon-user'
 			}
 			if (this.source === ATTENDEE.ACTOR_TYPE.EMAILS) {
@@ -164,7 +175,7 @@ export default {
 		isUser() {
 			return this.source === ATTENDEE.ACTOR_TYPE.USERS || this.source === ATTENDEE.ACTOR_TYPE.BRIDGED
 		},
-		isRemoteUser() {
+		isFederatedUser() {
 			return this.source === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
 		},
 		isBot() {
@@ -195,6 +206,7 @@ export default {
 
 <style lang="scss" scoped>
 .avatar-wrapper {
+	position: relative;
 	height: var(--avatar-size);
 	width: var(--avatar-size);
 	border-radius: var(--avatar-size);
@@ -256,6 +268,17 @@ export default {
 	&--highlighted {
 		outline: 2px solid var(--color-primary-element);
 	}
+
+	&__user-status {
+		position: absolute;
+		right: -4px;
+		bottom: -4px;
+		height: 18px;
+		width: 18px;
+		border: 2px solid var(--color-main-background);
+		background-color: var(--color-main-background);
+		border-radius: 50%;
+	}
 }
 
 </style>

From 774e221c49b877e8c19357f0dbfb6db23a741861 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 11 Mar 2024 16:02:49 +0100
Subject: [PATCH 3/5] feat(MessagesGroup): show, which server federated user
 belongs to

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/MessagesGroup.vue           | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 2a9568b453e..c899c02358d 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -32,10 +32,9 @@
 		</div>
 		<ul class="messages">
 			<li class="messages__author" aria-level="4">
-				{{ actorDisplayName }}
-				<div v-if="lastEditTimestamp">
-					{{ getLastEditor }}
-				</div>
+				<span class="messages__author-name">{{ actorDisplayName }}</span>
+				<span v-if="isFederatedUser" class="messages__author-server">{{ getRemoteServer }}</span>
+				<span v-if="lastEditTimestamp" class="messages__author-edit">{{ getLastEditor }}</span>
 			</li>
 			<Message v-for="(message, index) of messages"
 				:key="message.id"
@@ -131,6 +130,14 @@ export default {
 			return displayName
 		},
 
+		isFederatedUser() {
+			return this.actorType === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS
+		},
+
+		getRemoteServer() {
+			return this.isFederatedUser ? '(' + this.actorId.split('@').pop() + ')' : ''
+		},
+
 		getLastEditor() {
 			if (!this.lastEditTimestamp) {
 				return ''
@@ -202,8 +209,20 @@ export default {
 	&__author {
 		display: flex;
 		gap: 4px;
+		max-width: 600px;
 		padding: 4px 0 0 8px;
 		color: var(--color-text-maxcontrast);
+
+		&-name {
+			flex-shrink: 0;
+		}
+
+		&-edit,
+		&-server {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
 </style>

From 7a471bbcf3628b6979c40a0d0a9a7a77883ec110 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 11 Mar 2024 16:53:24 +0100
Subject: [PATCH 4/5] fix(NewMessage): don't replace id for mentions, if
 mentionId is not provided by server

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NewMessage/NewMessage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index d8727e3cbe4..48476cb3a01 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -935,7 +935,8 @@ export default {
 				}
 
 				// Caching the user id data for each possible mention
-				possibleMention.id = possibleMention.mentionId
+				// mentionId should be the default match since 'federation-v1'
+				possibleMention.id = possibleMention.mentionId ?? possibleMention.id
 				this.userData[possibleMention.id] = possibleMention
 			})
 

From 135cb20be9341081f5865090961feab997795ca4 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 11 Mar 2024 18:05:01 +0100
Subject: [PATCH 5/5] fix(ReactionsList): use proxy avatars in reactions dialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/ReactionsList.vue     | 60 +++++++++++++------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
index c441702fab8..d31d0677010 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
@@ -41,15 +41,22 @@
 						{{ reactionsOverview[reaction].length }}
 					</NcButton>
 				</div>
-				<div class="scrollable">
-					<NcListItemIcon v-for="item in reactionsOverview[reactionFilter]"
+				<ul class="reactions-list__scrollable">
+					<li v-for="item in reactionsOverview[reactionFilter]"
 						:key="item.actorId + item.actorType"
-						:name="item.actorDisplayName">
-						<span class="reactions-emojis">
+						class="reactions-item">
+						<AvatarWrapper :id="item.actorId"
+							:token="token"
+							:name="item.actorDisplayName"
+							:source="item.actorType"
+							:size="AVATAR.SIZE.SMALL"
+							disable-menu />
+						<span class="reactions-item__name">{{ item.actorDisplayName }}</span>
+						<span class="reactions-item__emojis">
 							{{ item.reaction?.join('') ?? reactionFilter }}
 						</span>
-					</NcListItemIcon>
-				</div>
+					</li>
+				</ul>
 			</template>
 			<NcLoadingIcon v-else :size="64" />
 		</div>
@@ -60,11 +67,12 @@
 import HeartOutlineIcon from 'vue-material-design-icons/HeartOutline.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import { ATTENDEE } from '../../../../../constants.js'
+import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+
+import { ATTENDEE, AVATAR } from '../../../../../constants.js'
 import { useGuestNameStore } from '../../../../../stores/guestName.js'
 
 export default {
@@ -72,9 +80,9 @@ export default {
 	name: 'ReactionsList',
 
 	components: {
+		AvatarWrapper,
 		NcModal,
 		NcLoadingIcon,
-		NcListItemIcon,
 		NcButton,
 		HeartOutlineIcon,
 	},
@@ -100,6 +108,7 @@ export default {
 
 	setup() {
 		return {
+			AVATAR,
 			guestNameStore: useGuestNameStore(),
 		}
 	},
@@ -198,19 +207,34 @@ export default {
 	gap: 4px;
 }
 
-.scrollable {
+.reactions-list__scrollable {
 	overflow-y: auto;
 	overflow-x: hidden;
 	height: calc(450px - 123px); // 123px is the height of the header 105px and the footer 18px
 }
 
-.reactions-emojis {
-	max-width: 180px;
-	direction: rtl;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	position: relative;
+.reactions-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 6px 0;
+
+	&__name {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__emojis {
+		margin-left: auto;
+		max-width: 180px;
+		direction: rtl;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		position: relative;
+	}
 }
 </style>