From cde0889ee86f9f5e9b3cafb2a3195749032af33c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 5 Aug 2024 17:18:11 +0200
Subject: [PATCH 1/4] fix(Participant): refactor component

- replace v-tooltip with native title
- optimize icon render template
- simplify class names

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/Participants/Participant.vue | 173 +++++++-----------
 1 file changed, 62 insertions(+), 111 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 6161b46c321..31680b97649 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -6,17 +6,15 @@
 <template>
 	<component :is="tag"
 		:data-nav-id="participantNavigationId"
-		class="participant-row"
+		class="participant"
 		:class="{
-			'offline': isOffline,
-			'currentUser': isSelf,
-			'guestUser': isGuest,
-			'isSearched': isSearched,
-			'selected': isSelected }"
+			'participant--offline': isOffline,
+			'participant--searched': isSearched,
+			'participant--selected': isSelected }"
 		:aria-label="participantAriaLabel"
 		:role="isSearched ? 'listitem' : undefined"
 		:tabindex="0"
-		v-on="isSearched ? { click: handleClick, 'keydown.enter': handleClick } : {}"
+		@click="handleClick"
 		@keydown.enter="handleClick">
 		<!-- Participant's avatar -->
 		<AvatarWrapper :id="computedId"
@@ -31,41 +29,38 @@
 			:offline="isOffline" />
 
 		<!-- Participant's data -->
-		<div class="participant-row__user-wrapper"
+		<div class="participant__user-wrapper"
 			:class="{
 				'has-call-icon': callIcon,
 				'has-menu-icon': (canBeModerated || canSendCallNotification) && !isSearched
 			}">
 			<!-- First line: participant's name and type -->
-			<div ref="userName"
-				class="participant-row__user-descriptor"
-				@mouseover="updateUserNameNeedsTooltip()">
-				<span v-tooltip.auto="userTooltipText"
-					class="participant-row__user-name">{{ computedName }}</span>
-				<span v-if="showModeratorLabel" class="participant-row__moderator-indicator">({{ t('spreed', 'moderator') }})</span>
-				<span v-if="isBridgeBotUser" class="participant-row__moderator-indicator">({{ t('spreed', 'bot') }})</span>
-				<span v-if="isGuest" class="participant-row__guest-indicator">({{ t('spreed', 'guest') }})</span>
-				<span v-if="!isSelf && isLobbyEnabled && !canSkipLobby" class="participant-row__guest-indicator">({{ t('spreed', 'in the lobby') }})</span>
-			</div>
+			<span ref="userName" class="participant__user" @mouseover="updateUserNameNeedsTooltip">
+				<span :title="userTooltipText" class="participant__user-name">{{ computedName }}</span>
+				<span v-if="showModeratorLabel" class="participant__user-badge">({{ t('spreed', 'moderator') }})</span>
+				<span v-if="isBridgeBotUser" class="participant__user-badge">({{ t('spreed', 'bot') }})</span>
+				<span v-if="isGuest" class="participant__user-badge">({{ t('spreed', 'guest') }})</span>
+				<span v-if="!isSelf && isLobbyEnabled && !canSkipLobby" class="participant__user-badge">({{ t('spreed', 'in the lobby') }})</span>
+			</span>
 
 			<!-- Second line: participant status message if applicable -->
-			<div v-if="isSearched && shareWithDisplayNameUnique"
-				class="participant-row__status">
-				<span>{{ shareWithDisplayNameUnique }}</span>
-			</div>
-			<div v-else-if="statusMessage"
+			<span v-if="isSearched && shareWithDisplayNameUnique" class="participant__status">
+				{{ shareWithDisplayNameUnique }}
+			</span>
+			<span v-else-if="statusMessage"
 				ref="statusMessage"
-				class="participant-row__status"
-				:class="{'participant-row__status--highlighted': isParticipantSpeaking}"
-				@mouseover="updateStatusNeedsTooltip()">
-				<span v-tooltip.auto="statusMessageTooltip">{{ statusMessage }}</span>
-			</div>
+				class="participant__status"
+				:class="{ 'participant__status--highlighted': isParticipantSpeaking }"
+				:title="statusMessageTooltip"
+				@mouseover="updateStatusNeedsTooltip">
+				{{ statusMessage }}
+			</span>
 		</div>
 
 		<!-- Phone participant dial action -->
 		<div v-if="isInCall && canBeModerated && isPhoneActor"
 			:id="participantNavigationId"
-			class="participant-row__dial-actions">
+			class="participant__dial-actions">
 			<NcButton v-if="!participant.inCall"
 				type="success"
 				:aria-label="t('spreed', 'Dial out phone')"
@@ -94,16 +89,11 @@
 		</div>
 
 		<!-- Call state icon -->
-		<div v-else-if="callIcon"
-			v-tooltip.auto="callIconTooltip"
-			class="participant-row__callstate-icon">
-			<span class="hidden-visually">{{ callIconTooltip }}</span>
-			<Microphone v-if="callIcon === 'audio'" :size="20" />
-			<Phone v-if="callIcon === 'phone'" :size="20" />
-			<VideoIcon v-if="callIcon === 'video'" :size="20" />
-			<!-- Icon is visually bigger, so we reduce its size -->
-			<HandBackLeft v-if="callIcon === 'hand'" :size="18" />
-		</div>
+		<component :is="callIcon.icon"
+			v-else-if="callIcon"
+			class="participant__call-state"
+			:title="callIcon.tooltip"
+			:size="callIcon.size" />
 
 		<!-- Participant's actions menu -->
 		<NcActions v-if="(canBeModerated || canSendCallNotification) && !isSearched"
@@ -112,16 +102,9 @@
 			:inline="showToggleLobbyAction ? 1 : 0"
 			:force-menu="!showToggleLobbyAction"
 			placement="bottom-end"
-			class="participant-row__actions">
-			<template #icon>
-				<LockOpenVariant v-if="actionIcon === 'LockOpenVariant'"
-					:size="20" />
-				<Lock v-else-if="actionIcon === 'Lock'"
-					:size="20" />
-				<Tune v-else-if="actionIcon === 'Tune'"
-					:size="20" />
-				<DotsHorizontal v-else
-					:size="20" />
+			class="participant__actions">
+			<template v-if="actionIcon" #icon>
+				<component :is="actionIcon" :size="20" />
 			</template>
 
 			<!-- Information and rights -->
@@ -352,7 +335,6 @@ import Bell from 'vue-material-design-icons/Bell.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Crown from 'vue-material-design-icons/Crown.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Email from 'vue-material-design-icons/Email.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Lock from 'vue-material-design-icons/Lock.vue'
@@ -380,7 +362,6 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
@@ -424,7 +405,6 @@ export default {
 		ContentCopy,
 		Crown,
 		Delete,
-		DotsHorizontal,
 		Email,
 		HandBackLeft,
 		Lock,
@@ -441,10 +421,6 @@ export default {
 		VideoIcon,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		tag: {
 			type: String,
@@ -522,7 +498,7 @@ export default {
 
 		userTooltipText() {
 			if (!this.isUserNameTooltipVisible) {
-				return false
+				return ''
 			}
 			let text = this.computedName
 			if (this.showModeratorLabel) {
@@ -697,33 +673,16 @@ export default {
 
 		callIcon() {
 			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
-				return ''
-			}
-			if (this.isHandRaised) {
-				return 'hand'
-			}
-			const withVideo = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO
-			if (withVideo) {
-				return 'video'
-			}
-			const withPhone = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE
-			if (withPhone) {
-				return 'phone'
-			}
-			return 'audio'
-		},
-
-		callIconTooltip() {
-			if (this.callIcon === 'audio') {
-				return t('spreed', 'Joined with audio')
-			} else if (this.callIcon === 'video') {
-				return t('spreed', 'Joined with video')
-			} else if (this.callIcon === 'phone') {
-				return t('spreed', 'Joined via phone')
-			} else if (this.callIcon === 'hand') {
-				return t('spreed', 'Raised their hand')
+				return null
+			} else if (this.isHandRaised) {
+				return { icon: HandBackLeft, size: 18, tooltip: t('spreed', 'Raised their hand') }
+			} if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) {
+				return { icon: VideoIcon, size: 20, tooltip: t('spreed', 'Joined with video') }
+			} else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) {
+				return { icon: Phone, size: 20, tooltip: t('spreed', 'Joined via phone') }
+			} else {
+				return { icon: Microphone, size: 20, tooltip: t('spreed', 'Joined with audio') }
 			}
-			return null
 		},
 
 		participantType() {
@@ -913,17 +872,17 @@ export default {
 
 		actionIcon() {
 			if (this.isModerator) {
-				return ''
+				return undefined
 			}
 
 			if (this.attendeePermissions === PARTICIPANT.PERMISSIONS.MAX_CUSTOM) {
-				return 'LockOpenVariant'
+				return LockOpenVariant
 			} else if (this.attendeePermissions === PARTICIPANT.PERMISSIONS.CUSTOM) {
-				return 'Lock'
+				return Lock
 			} else if (this.attendeePermissions !== PARTICIPANT.PERMISSIONS.DEFAULT) {
-				return 'Tune'
+				return Tune
 			}
-			return ''
+			return undefined
 		},
 
 		timeSpeaking() {
@@ -1176,12 +1135,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.selected {
-	background-color: var(--color-primary-element-light);
-	border-radius: 5px;
-}
-
-.participant-row {
+.participant {
 	display: flex;
 	align-items: center;
 	cursor: default;
@@ -1190,10 +1144,19 @@ export default {
 	height: 56px;
 	padding: 0 4px;
 
-	&.isSearched {
+	&--offline &__user-name {
+		color: var(--color-text-maxcontrast);
+	}
+
+	&--searched {
 		cursor: pointer;
 	}
 
+	&--selected {
+		background-color: var(--color-primary-element-light);
+		border-radius: 5px;
+	}
+
 	&__user-wrapper {
 		margin-top: -4px;
 		margin-left: 12px;
@@ -1215,20 +1178,18 @@ export default {
 	}
 
 	&__user-name,
-	&__guest-indicator,
-	&__moderator-indicator {
+	&__user-badge {
 		vertical-align: middle;
 		line-height: normal;
 	}
 
-	&__guest-indicator,
-	&__moderator-indicator {
+	&__user-badge {
 		color: var(--color-text-maxcontrast);
 		font-weight: 300;
 		padding-left: 5px;
 	}
 
-	&__user-descriptor {
+	&__user {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -1246,7 +1207,7 @@ export default {
 		}
 	}
 
-	&__callstate-icon {
+	&__call-state {
 		opacity: .4;
 		display: flex;
 		align-items: center;
@@ -1264,22 +1225,12 @@ export default {
 	}
 }
 
-.participant-row.isSearched .participant-row__user-name {
-	cursor: pointer;
-}
-
 .participant-dialog {
 	&__input {
 		margin-block-end: 6px;
 	}
 }
 
-.offline {
-	.participant-row__user-descriptor > span {
-		color: var(--color-text-maxcontrast);
-	}
-}
-
 .critical > :deep(.action-button) {
 	color: var(--color-error);
 }

From 7aadacb4b724aa39871b51a1a9e239f136f0359a Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 5 Aug 2024 17:25:41 +0200
Subject: [PATCH 2/4] fix(Participant): replace inline NcActions with simple
 button

- not supported by ListItem

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/Participants/Participant.vue | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 31680b97649..98f8dfc0fbe 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -95,14 +95,31 @@
 			:title="callIcon.tooltip"
 			:size="callIcon.size" />
 
+		<!-- Grant or revoke lobby permissions (inline button) -->
+		<template v-if="showToggleLobbyAction">
+			<NcButton v-if="canSkipLobby"
+				type="tertiary"
+				:title="t('spreed', 'Move back to lobby')"
+				@click="setLobbyPermission(false)">
+				<template #icon>
+					<AccountMinusIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton v-else
+				type="tertiary"
+				:title="t('spreed', 'Move to conversation')"
+				@click="setLobbyPermission(true)">
+				<template #icon>
+					<AccountPlusIcon :size="20" />
+				</template>
+			</NcButton>
+		</template>
+
 		<!-- Participant's actions menu -->
 		<NcActions v-if="(canBeModerated || canSendCallNotification) && !isSearched"
 			:container="container"
 			:aria-label="participantSettingsAriaLabel"
-			:inline="showToggleLobbyAction ? 1 : 0"
-			:force-menu="!showToggleLobbyAction"
-			placement="bottom-end"
-			class="participant__actions">
+			force-menu>
 			<template v-if="actionIcon" #icon>
 				<component :is="actionIcon" :size="20" />
 			</template>
@@ -114,27 +131,6 @@
 				</template>
 				{{ attendeePin }}
 			</NcActionText>
-			<!-- Grant or revoke lobby permissions (inline button) -->
-			<template v-if="showToggleLobbyAction">
-				<NcActionButton v-if="canSkipLobby"
-					key="lobby-permission-skip"
-					close-after-click
-					@click="setLobbyPermission(false)">
-					<template #icon>
-						<AccountMinusIcon :size="20" />
-					</template>
-					{{ t('spreed', 'Move back to lobby') }}
-				</NcActionButton>
-				<NcActionButton v-else
-					key="lobby-permission-join"
-					close-after-click
-					@click="setLobbyPermission(true)">
-					<template #icon>
-						<AccountPlusIcon :size="20" />
-					</template>
-					{{ t('spreed', 'Move to conversation') }}
-				</NcActionButton>
-			</template>
 			<!-- Grant or revoke moderator permissions -->
 			<NcActionButton v-if="canBeDemoted"
 				key="demote-moderator"

From 979164ba8fbd2f5cdbe1eaaadb029617d145d8e5 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 5 Aug 2024 17:41:08 +0200
Subject: [PATCH 3/4] fix(Participant): migrate to NcListItem

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Participants/Participant.spec.js          | 189 ++++------
 .../RightSidebar/Participants/Participant.vue | 344 +++++++++---------
 .../Participants/ParticipantsListVirtual.vue  |   2 +-
 3 files changed, 226 insertions(+), 309 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js
index bd2689f1621..bfbb4f5b078 100644
--- a/src/components/RightSidebar/Participants/Participant.spec.js
+++ b/src/components/RightSidebar/Participants/Participant.spec.js
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { createLocalVue, shallowMount } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
 import { cloneDeep } from 'lodash'
 import Vuex from 'vuex'
 
@@ -17,6 +18,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 
 import Participant from './Participant.vue'
@@ -32,34 +34,11 @@ describe('Participant.vue', () => {
 	let store
 	let localVue
 	let testStoreConfig
-	let tooltipMock
-
-	/**
-	 * @param {object} wrapper Wrapper where the tooltip is mounted in
-	 * @param {HTMLElement} htmlEl Tooltip to find
-	 */
-	async function getLastTooltipValue(wrapper, htmlEl) {
-		tooltipMock.mockClear()
-		await wrapper.vm.forceEnableTooltips()
-
-		const filteredCalls = tooltipMock.mock.calls.filter((call) => {
-			// only keep calls on wanted node
-			return call[0] === htmlEl
-		})
-
-		if (filteredCalls.length) {
-			return filteredCalls.at(-1)[1].value
-		}
-
-		return null
-	}
 
 	beforeEach(() => {
 		localVue = createLocalVue()
 		localVue.use(Vuex)
 
-		tooltipMock = jest.fn()
-
 		participant = {
 			displayName: 'Alice',
 			inCall: PARTICIPANT.CALL_FLAG.DISCONNECTED,
@@ -113,11 +92,9 @@ describe('Participant.vue', () => {
 				NcCheckboxRadioSwitch,
 				NcDialog,
 				NcInputField,
+				NcListItem,
 				NcTextArea,
 			},
-			directives: {
-				tooltip: tooltipMock,
-			},
 			mixins: [{
 				// force tooltip display for testing
 				methods: {
@@ -201,103 +178,106 @@ describe('Participant.vue', () => {
 	})
 
 	describe('user name', () => {
-		/**
-		 * @param {object} wrapper Wrapper where the tooltip is mounted in
-		 */
-		async function getUserTooltip(wrapper) {
-			const tooltipEl = wrapper.find('.participant-row__user-name').element
-			return getLastTooltipValue(wrapper, tooltipEl)
-		}
-
 		beforeEach(() => {
 			participant.statusIcon = ''
 			participant.statusMessage = ''
 		})
 
-		test('renders plain user name for regular user', async () => {
+		/**
+		 * Check which text is currently rendered as a name
+		 * @param {object} participant participant object
+		 * @param {RegExp} regexp regex pattern which expected to be rendered
+		 */
+		function checkUserNameRendered(participant, regexp) {
 			const wrapper = mountParticipant(participant)
-			expect(wrapper.text()).toBe('Alice')
-			expect(await getUserTooltip(wrapper)).toBe('Alice')
+			expect(wrapper.find('.participant__user').exists()).toBeTruthy()
+			expect(wrapper.find('.participant__user').text()).toMatch(regexp)
+		}
+
+		test('renders plain user name for regular user', async () => {
+			checkUserNameRendered(participant, /^Alice$/)
 		})
 
 		test('renders guest suffix for guests', async () => {
 			participant.participantType = PARTICIPANT.TYPE.GUEST
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.text()).toStrictEqual(expect.stringMatching(/^Alice\s+\(guest\)$/))
-			expect(await getUserTooltip(wrapper)).toBe('Alice (guest)')
+			checkUserNameRendered(participant, /^Alice\s+\(guest\)$/)
 		})
 
 		test('renders moderator suffix for moderators', async () => {
 			participant.participantType = PARTICIPANT.TYPE.MODERATOR
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.text()).toStrictEqual(expect.stringMatching(/^Alice\s+\(moderator\)$/))
-			expect(await getUserTooltip(wrapper)).toBe('Alice (moderator)')
+			checkUserNameRendered(participant, /^Alice\s+\(moderator\)$/)
 		})
 
 		test('renders guest moderator suffix for guest moderators', async () => {
 			participant.participantType = PARTICIPANT.TYPE.GUEST_MODERATOR
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.text()).toStrictEqual(expect.stringMatching(/^Alice\s+\(moderator\)\s+\(guest\)$/))
-			expect(await getUserTooltip(wrapper)).toBe('Alice (moderator) (guest)')
+			checkUserNameRendered(participant, /^Alice\s+\(moderator\)\s+\(guest\)$/)
 		})
 
 		test('renders bot suffix for bots', async () => {
 			participant.actorType = ATTENDEE.ACTOR_TYPE.USERS
 			participant.actorId = ATTENDEE.BRIDGE_BOT_ID
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.text()).toStrictEqual(expect.stringMatching(/^Alice\s+\(bot\)$/))
-			expect(await getUserTooltip(wrapper)).toBe('Alice (bot)')
+			checkUserNameRendered(participant, /^Alice\s+\(bot\)$/)
 		})
 	})
 
 	describe('user status', () => {
 		/**
-		 * @param {object} wrapper Wrapper where the tooltip is mounted in
+		 * Check which status is currently rendered
+		 * @param {object} participant participant object
+		 * @param {string|null} status status which expected to be rendered
 		 */
-		async function getStatusTooltip(wrapper) {
-			const tooltipEl = wrapper.find('.participant-row__status>span').element
-			return getLastTooltipValue(wrapper, tooltipEl)
+		async function checkUserSubnameRendered(participant, status) {
+			const wrapper = mountParticipant(participant)
+			await flushPromises()
+			if (status) {
+				expect(wrapper.find('.participant__status').exists()).toBeTruthy()
+				expect(wrapper.find('.participant__status').text()).toBe(status)
+			} else {
+				expect(wrapper.find('.participant__status').exists()).toBeFalsy()
+			}
 		}
 
 		test('renders user status', async () => {
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.find('.participant-row__status').text()).toBe('🌧️ rainy')
-			expect(await getStatusTooltip(wrapper)).toBe('🌧️ rainy')
+			await checkUserSubnameRendered(participant, '🌧️ rainy')
 		})
 
-		test('does not render user status when not set', () => {
+		test('does not render user status when not set', async () => {
 			participant.statusIcon = ''
 			participant.statusMessage = ''
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.find('.participant-row__status').exists()).toBe(false)
+			await checkUserSubnameRendered(participant, null)
 		})
 
 		test('renders dnd status', async () => {
 			participant.statusMessage = ''
 			participant.status = 'dnd'
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.find('.participant-row__status').text()).toBe('🌧️ Do not disturb')
-			expect(await getStatusTooltip(wrapper)).toBe('🌧️ Do not disturb')
+			await checkUserSubnameRendered(participant, '🌧️ Do not disturb')
 		})
 
 		test('renders away status', async () => {
 			participant.statusMessage = ''
 			participant.status = 'away'
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.find('.participant-row__status').text()).toBe('🌧️ Away')
-			expect(await getStatusTooltip(wrapper)).toBe('🌧️ Away')
+			await checkUserSubnameRendered(participant, '🌧️ Away')
 		})
 	})
 
 	describe('call icons', () => {
 		let getParticipantRaisedHandMock
+		const components = [VideoIcon, Phone, Microphone, HandBackLeft]
 
 		/**
-		 * @param {object} wrapper Wrapper where the tooltip is mounted in
+		 * Check which icons are currently rendered
+		 * @param {object} participant participant object
+		 * @param {object} icon icon which expected to be rendered
 		 */
-		async function getCallIconTooltip(wrapper) {
-			const tooltipEl = wrapper.find('.participant-row__callstate-icon').element
-			return getLastTooltipValue(wrapper, tooltipEl)
+		function checkStateIconsRendered(participant, icon) {
+			const wrapper = mountParticipant(participant)
+			if (icon) {
+				expect(wrapper.findComponent(icon).exists()).toBeTruthy()
+			} else {
+				components.forEach(component => {
+					expect(wrapper.findComponent(component).exists()).toBeFalsy()
+				})
+			}
 		}
 
 		beforeEach(() => {
@@ -307,86 +287,43 @@ describe('Participant.vue', () => {
 			testStoreConfig.modules.callViewStore.getters.getParticipantRaisedHand = () => getParticipantRaisedHandMock
 			store = new Vuex.Store(testStoreConfig)
 		})
-		test('does not renders call icon when disconnected', () => {
+
+		test('does not renders call icon and hand raised icon when disconnected', () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.DISCONNECTED
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(false)
-			expect(wrapper.findComponent(Phone).exists()).toBe(false)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(false)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
+			getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: true })
+
+			checkStateIconsRendered(participant, null)
+			expect(getParticipantRaisedHandMock).not.toHaveBeenCalled()
 		})
 		test('renders video call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(true)
-			expect(wrapper.findComponent(Phone).exists()).toBe(false)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(false)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
-			expect(await getCallIconTooltip(wrapper)).toBe('Joined with video')
+			checkStateIconsRendered(participant, VideoIcon)
 		})
 		test('renders audio call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_AUDIO
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(false)
-			expect(wrapper.findComponent(Phone).exists()).toBe(false)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(true)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
-			expect(await getCallIconTooltip(wrapper)).toBe('Joined with audio')
+			checkStateIconsRendered(participant, Microphone)
 		})
 		test('renders phone call icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_PHONE
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(false)
-			expect(wrapper.findComponent(Phone).exists()).toBe(true)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(false)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
-			expect(await getCallIconTooltip(wrapper)).toBe('Joined via phone')
+			checkStateIconsRendered(participant, Phone)
 		})
 		test('renders hand raised icon', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO
 			getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: true })
 
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(false)
-			expect(wrapper.findComponent(Phone).exists()).toBe(false)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(false)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(true)
-
+			checkStateIconsRendered(participant, HandBackLeft)
 			expect(getParticipantRaisedHandMock).toHaveBeenCalledWith(['session-id-alice'])
-
-			expect(await getCallIconTooltip(wrapper)).toBe('Raised their hand')
 		})
 		test('renders video call icon when joined with multiple', async () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO | PARTICIPANT.CALL_FLAG.WITH_PHONE
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(VideoIcon).exists()).toBe(true)
-			expect(wrapper.findComponent(Phone).exists()).toBe(false)
-			expect(wrapper.findComponent(Microphone).exists()).toBe(false)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
-			expect(await getCallIconTooltip(wrapper)).toBe('Joined with video')
+			checkStateIconsRendered(participant, VideoIcon)
 		})
-		test('does not render hand raised icon when disconnected', () => {
-			participant.inCall = PARTICIPANT.CALL_FLAG.DISCONNECTED
-			getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: true })
-
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
-			expect(getParticipantRaisedHandMock).not.toHaveBeenCalled()
-		})
-
 		test('does not render hand raised icon when searched', () => {
 			participant.inCall = PARTICIPANT.CALL_FLAG.WITH_VIDEO
 			participant.label = 'searched result'
 			getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: true })
 
-			const wrapper = mountParticipant(participant)
-			expect(wrapper.findComponent(HandBackLeft).exists()).toBe(false)
-
+			checkStateIconsRendered(participant, null)
 			expect(getParticipantRaisedHandMock).not.toHaveBeenCalled()
 		})
 	})
@@ -868,7 +805,7 @@ describe('Participant.vue', () => {
 			const wrapper = mountParticipant(participant)
 			wrapper.vm.$on('click-participant', eventHandler)
 
-			await wrapper.find('li').trigger('click')
+			wrapper.find('a').trigger('click')
 
 			expect(eventHandler).toHaveBeenCalledWith(participant)
 		})
@@ -880,7 +817,7 @@ describe('Participant.vue', () => {
 			const wrapper = mountParticipant(participant)
 			wrapper.vm.$on('click-participant', eventHandler)
 
-			await wrapper.find('li').trigger('click')
+			wrapper.find('a').trigger('click')
 
 			expect(eventHandler).not.toHaveBeenCalledWith(participant)
 		})
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 98f8dfc0fbe..6b4b8c19493 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -4,36 +4,33 @@
 -->
 
 <template>
-	<component :is="tag"
+	<NcListItem :name="computedName"
 		:data-nav-id="participantNavigationId"
 		class="participant"
 		:class="{
 			'participant--offline': isOffline,
-			'participant--searched': isSearched,
-			'participant--selected': isSelected }"
+			'participant--searched': isSearched }"
+		:active="isSelected"
 		:aria-label="participantAriaLabel"
-		:role="isSearched ? 'listitem' : undefined"
-		:tabindex="0"
+		:actions-aria-label="participantSettingsAriaLabel"
+		force-display-actions
 		@click="handleClick"
 		@keydown.enter="handleClick">
 		<!-- Participant's avatar -->
-		<AvatarWrapper :id="computedId"
-			:token="isSearched ? 'new' : token"
-			:name="computedName"
-			:source="participant.source || participant.actorType"
-			:disable-menu="isSearched"
-			disable-tooltip
-			:show-user-status="showUserStatus"
-			:preloaded-user-status="preloadedUserStatus"
-			:highlighted="isSpeakingStatusAvailable && isParticipantSpeaking"
-			:offline="isOffline" />
-
-		<!-- Participant's data -->
-		<div class="participant__user-wrapper"
-			:class="{
-				'has-call-icon': callIcon,
-				'has-menu-icon': (canBeModerated || canSendCallNotification) && !isSearched
-			}">
+		<template #icon>
+			<AvatarWrapper :id="computedId"
+				:token="isSearched ? 'new' : token"
+				:name="computedName"
+				:source="participant.source || participant.actorType"
+				:disable-menu="isSearched"
+				disable-tooltip
+				:show-user-status="showUserStatus"
+				:preloaded-user-status="preloadedUserStatus"
+				:highlighted="isSpeakingStatusAvailable && isParticipantSpeaking"
+				:offline="isOffline" />
+		</template>
+
+		<template #name>
 			<!-- First line: participant's name and type -->
 			<span ref="userName" class="participant__user" @mouseover="updateUserNameNeedsTooltip">
 				<span :title="userTooltipText" class="participant__user-name">{{ computedName }}</span>
@@ -42,7 +39,9 @@
 				<span v-if="isGuest" class="participant__user-badge">({{ t('spreed', 'guest') }})</span>
 				<span v-if="!isSelf && isLobbyEnabled && !canSkipLobby" class="participant__user-badge">({{ t('spreed', 'in the lobby') }})</span>
 			</span>
+		</template>
 
+		<template #subname>
 			<!-- Second line: participant status message if applicable -->
 			<span v-if="isSearched && shareWithDisplayNameUnique" class="participant__status">
 				{{ shareWithDisplayNameUnique }}
@@ -55,75 +54,71 @@
 				@mouseover="updateStatusNeedsTooltip">
 				{{ statusMessage }}
 			</span>
-		</div>
-
-		<!-- Phone participant dial action -->
-		<div v-if="isInCall && canBeModerated && isPhoneActor"
-			:id="participantNavigationId"
-			class="participant__dial-actions">
-			<NcButton v-if="!participant.inCall"
-				type="success"
-				:aria-label="t('spreed', 'Dial out phone')"
-				:title="t('spreed', 'Dial out phone')"
-				:disabled="disabled"
-				@click="dialOutPhoneNumber">
-				<template #icon>
-					<Phone :size="20" />
-				</template>
-			</NcButton>
-			<template v-else>
-				<NcButton type="error"
-					:aria-label="t('spreed', 'Hang up phone')"
-					:title="t('spreed', 'Hang up phone')"
+		</template>
+
+		<template v-if="!isSearched" #extra-actions>
+			<!-- Phone participant dial action -->
+			<template v-if="isInCall && canBeModerated && isPhoneActor">
+				<NcButton v-if="!participant.inCall"
+					type="success"
+					:aria-label="t('spreed', 'Dial out phone')"
+					:title="t('spreed', 'Dial out phone')"
 					:disabled="disabled"
-					@click="hangupPhoneNumber">
+					@click="dialOutPhoneNumber">
 					<template #icon>
-						<PhoneHangup :size="20" />
+						<Phone :size="20" />
 					</template>
 				</NcButton>
-				<DialpadPanel :disabled="disabled"
-					container="#tab-participants"
-					dialing
-					@dial:type="dialType" />
-			</template>
-		</div>
-
-		<!-- Call state icon -->
-		<component :is="callIcon.icon"
-			v-else-if="callIcon"
-			class="participant__call-state"
-			:title="callIcon.tooltip"
-			:size="callIcon.size" />
-
-		<!-- Grant or revoke lobby permissions (inline button) -->
-		<template v-if="showToggleLobbyAction">
-			<NcButton v-if="canSkipLobby"
-				type="tertiary"
-				:title="t('spreed', 'Move back to lobby')"
-				@click="setLobbyPermission(false)">
-				<template #icon>
-					<AccountMinusIcon :size="20" />
-				</template>
-			</NcButton>
-			<NcButton v-else
-				type="tertiary"
-				:title="t('spreed', 'Move to conversation')"
-				@click="setLobbyPermission(true)">
-				<template #icon>
-					<AccountPlusIcon :size="20" />
+				<template v-else>
+					<NcButton type="error"
+						:aria-label="t('spreed', 'Hang up phone')"
+						:title="t('spreed', 'Hang up phone')"
+						:disabled="disabled"
+						@click="hangupPhoneNumber">
+						<template #icon>
+							<PhoneHangup :size="20" />
+						</template>
+					</NcButton>
+					<DialpadPanel :disabled="disabled"
+						container="#tab-participants"
+						dialing
+						@dial:type="dialType" />
 				</template>
-			</NcButton>
-		</template>
+			</template>
 
-		<!-- Participant's actions menu -->
-		<NcActions v-if="(canBeModerated || canSendCallNotification) && !isSearched"
-			:container="container"
-			:aria-label="participantSettingsAriaLabel"
-			force-menu>
-			<template v-if="actionIcon" #icon>
-				<component :is="actionIcon" :size="20" />
+			<!-- Call state icon -->
+			<component :is="callIcon.icon"
+				v-else-if="callIcon"
+				class="participant__call-state"
+				:title="callIcon.tooltip"
+				:size="callIcon.size" />
+
+			<!-- Grant or revoke lobby permissions (inline button) -->
+			<template v-if="showToggleLobbyAction">
+				<NcButton v-if="canSkipLobby"
+					type="tertiary"
+					:title="t('spreed', 'Move back to lobby')"
+					@click="setLobbyPermission(false)">
+					<template #icon>
+						<AccountMinusIcon :size="20" />
+					</template>
+				</NcButton>
+				<NcButton v-else
+					type="tertiary"
+					:title="t('spreed', 'Move to conversation')"
+					@click="setLobbyPermission(true)">
+					<template #icon>
+						<AccountPlusIcon :size="20" />
+					</template>
+				</NcButton>
 			</template>
+		</template>
 
+		<!-- Participant's actions menu -->
+		<template v-if="showParticipantActions && actionIcon" #actions-icon>
+			<component :is="actionIcon" :size="20" />
+		</template>
+		<template v-if="showParticipantActions" #actions>
 			<!-- Information and rights -->
 			<NcActionText v-if="attendeePin" :name="t('spreed', 'Dial-in PIN')">
 				<template #icon>
@@ -277,48 +272,47 @@
 				</template>
 				{{ removeParticipantLabel }}
 			</NcActionButton>
-		</NcActions>
-
-		<ParticipantPermissionsEditor v-if="permissionsEditor"
-			:actor-id="participant.actorId"
-			close-after-click
-			:participant="participant"
-			:token="token"
-			@close="hidePermissionsEditor" />
-
-		<!-- Confirmation required to remove participant -->
-		<NcDialog v-if="isRemoveDialogOpen"
-			:open.sync="isRemoveDialogOpen"
-			:name="removeParticipantLabel"
-			:container="container">
-			<p> {{ removeDialogMessage }} </p>
-			<template v-if="supportBanV1 && showPermissionsOptions">
-				<NcCheckboxRadioSwitch :checked.sync="isBanParticipant">
-					{{ t('spreed', 'Also ban from this conversation') }}
-				</NcCheckboxRadioSwitch>
-				<template v-if="isBanParticipant">
-					<NcTextArea v-if="isBanParticipant"
-						class="participant-dialog__input"
-						resize="vertical"
-						:label="t('spreed', 'Internal note (reason to ban)')"
-						:error="!!maxLengthWarning"
-						:helper-text="maxLengthWarning"
-						:value.sync="internalNote" />
-				</template>
-			</template>
-			<template #actions>
-				<NcButton type="tertiary" :disabled="isLoading" @click="isRemoveDialogOpen = false">
-					{{ t('spreed', 'Dismiss') }}
-				</NcButton>
-				<NcButton type="error" :disabled="isLoading || !!maxLengthWarning" @click="removeParticipant">
-					{{ t('spreed', 'Remove') }}
-				</NcButton>
-			</template>
-		</NcDialog>
+		</template>
 
-		<!-- Checkmark in case the current participant is selected -->
-		<div v-if="isSelected" class="icon-checkmark" />
-	</component>
+		<template #extra>
+			<ParticipantPermissionsEditor v-if="permissionsEditor"
+				:actor-id="participant.actorId"
+				close-after-click
+				:participant="participant"
+				:token="token"
+				@close="hidePermissionsEditor" />
+
+			<!-- Confirmation required to remove participant -->
+			<NcDialog v-if="isRemoveDialogOpen"
+				:open.sync="isRemoveDialogOpen"
+				:name="removeParticipantLabel"
+				:container="container">
+				<p> {{ removeDialogMessage }} </p>
+				<template v-if="supportBanV1 && showPermissionsOptions">
+					<NcCheckboxRadioSwitch :checked.sync="isBanParticipant">
+						{{ t('spreed', 'Also ban from this conversation') }}
+					</NcCheckboxRadioSwitch>
+					<template v-if="isBanParticipant">
+						<NcTextArea v-if="isBanParticipant"
+							class="participant-dialog__input"
+							resize="vertical"
+							:label="t('spreed', 'Internal note (reason to ban)')"
+							:error="!!maxLengthWarning"
+							:helper-text="maxLengthWarning"
+							:value.sync="internalNote" />
+					</template>
+				</template>
+				<template #actions>
+					<NcButton type="tertiary" :disabled="isLoading" @click="isRemoveDialogOpen = false">
+						{{ t('spreed', 'Dismiss') }}
+					</NcButton>
+					<NcButton type="error" :disabled="isLoading || !!maxLengthWarning" @click="removeParticipant">
+						{{ t('spreed', 'Remove') }}
+					</NcButton>
+				</template>
+			</NcDialog>
+		</template>
+	</NcListItem>
 </template>
 
 <script>
@@ -351,12 +345,12 @@ import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
@@ -384,13 +378,13 @@ export default {
 	components: {
 		AvatarWrapper,
 		DialpadPanel,
-		NcActions,
 		NcActionButton,
 		NcActionText,
 		NcActionSeparator,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcDialog,
+		NcListItem,
 		NcTextArea,
 		ParticipantPermissionsEditor,
 		// Icons
@@ -418,11 +412,6 @@ export default {
 	},
 
 	props: {
-		tag: {
-			type: String,
-			default: 'li',
-		},
-
 		participant: {
 			type: Object,
 			required: true,
@@ -838,6 +827,10 @@ export default {
 			return this.canBeModerated && !this.isModerator && this.isLobbyEnabled
 		},
 
+		showParticipantActions() {
+			return !this.isSearched && (this.canBeModerated || this.canSendCallNotification)
+		},
+
 		preloadedUserStatus() {
 			if (Object.prototype.hasOwnProperty.call(this.participant, 'statusMessage')) {
 				// We preloaded the status when via participants API
@@ -1132,57 +1125,56 @@ export default {
 
 <style lang="scss" scoped>
 .participant {
-	display: flex;
-	align-items: center;
-	cursor: default;
-	margin: 4px 0;
-	border-radius: var(--border-radius-pill);
-	height: 56px;
-	padding: 0 4px;
+	// Overwrite NcListItem styles
+	:deep(.list-item) {
+		overflow: hidden;
+		outline-offset: -2px;
+		cursor: default;
+
+		a, a * {
+			cursor: default;
+		}
+
+		button, button * {
+			cursor: pointer;
+		}
+	}
 
 	&--offline &__user-name {
 		color: var(--color-text-maxcontrast);
 	}
 
-	&--searched {
+	&--searched :deep(.list-item),
+	&--searched :deep(.list-item a),
+	&--searched :deep(.list-item a *) {
 		cursor: pointer;
 	}
 
-	&--selected {
-		background-color: var(--color-primary-element-light);
-		border-radius: 5px;
-	}
+	&.list-item__wrapper--active,
+	&.list-item__wrapper.active {
+		:deep(.list-item) {
+			background-color: var(--color-primary-element-light);
 
-	&__user-wrapper {
-		margin-top: -4px;
-		margin-left: 12px;
-		width: calc(100% - 100px);
-		display: flex;
-		flex-direction: column;
-
-		&.has-call-icon {
-			/** reduce text width to have some distance from call icon */
-			padding-right: 5px;
-			/** call icon on the right most column */
-			width: calc(100% - 90px);
-		}
+			&:hover,
+			&:focus-within,
+			&:has(:focus-visible),
+			&:has(:active) {
+				background-color: var(--color-primary-element-light-hover);
+			}
 
-		&.has-call-icon.has-menu-icon {
-			/** make room for the call icon + menu icon */
-			width: calc(100% - 124px);
+			.list-item-content__name,
+			.list-item-content__subname,
+			.list-item-content__details,
+			.list-item-details__details {
+				color: var(--color-primary-light-text) !important;
+			}
 		}
 	}
 
-	&__user-name,
-	&__user-badge {
-		vertical-align: middle;
-		line-height: normal;
-	}
-
 	&__user-badge {
 		color: var(--color-text-maxcontrast);
 		font-weight: 300;
-		padding-left: 5px;
+		padding-inline-start: var(--default-grid-baseline);
 	}
 
 	&__user {
@@ -1192,32 +1184,20 @@ export default {
 	}
 
 	&__status {
-		color: var(--color-text-maxcontrast);
-		line-height: 1.3em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-
 		&--highlighted {
 			font-weight: bold;
 		}
 	}
 
 	&__call-state {
-		opacity: .4;
+		height: 100%;
 		display: flex;
 		align-items: center;
+		color: var(--color-text-maxcontrast);
 	}
 
-	&__dial-actions {
-		display: flex;
-		gap: 4px;
-	}
-
-	&:focus,
-	&:focus-visible {
-		z-index: 1;
-		outline: 2px solid var(--color-primary-element);
+	:deep(.list-item-content__actions > .critical) {
+		color: var(--color-error);
 	}
 }
 
diff --git a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
index 048a9338856..3fc4cfd287c 100644
--- a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
@@ -11,7 +11,7 @@
 		:item-size="PARTICIPANT_ITEM_SIZE"
 		key-field="attendeeId">
 		<template #default="{ item }">
-			<Participant :participant="item" tag="div" />
+			<Participant :participant="item" />
 		</template>
 		<template v-if="loading" #after>
 			<LoadingPlaceholder type="participants" :count="dummyParticipants" />

From 73499e66f9f2da54585eb246307d9a341c02e2da Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 6 Aug 2024 14:14:36 +0200
Subject: [PATCH 4/4] fix(Participant): rename tooltip references to title

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/Participants/Participant.vue | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 6b4b8c19493..f35dff92450 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -32,8 +32,8 @@
 
 		<template #name>
 			<!-- First line: participant's name and type -->
-			<span ref="userName" class="participant__user" @mouseover="updateUserNameNeedsTooltip">
-				<span :title="userTooltipText" class="participant__user-name">{{ computedName }}</span>
+			<span ref="userName" class="participant__user" @mouseover="updateUserNameNeedsTitle">
+				<span :title="userNameTitle" class="participant__user-name">{{ computedName }}</span>
 				<span v-if="showModeratorLabel" class="participant__user-badge">({{ t('spreed', 'moderator') }})</span>
 				<span v-if="isBridgeBotUser" class="participant__user-badge">({{ t('spreed', 'bot') }})</span>
 				<span v-if="isGuest" class="participant__user-badge">({{ t('spreed', 'guest') }})</span>
@@ -50,8 +50,8 @@
 				ref="statusMessage"
 				class="participant__status"
 				:class="{ 'participant__status--highlighted': isParticipantSpeaking }"
-				:title="statusMessageTooltip"
-				@mouseover="updateStatusNeedsTooltip">
+				:title="statusTitle"
+				@mouseover="updateStatusNeedsTitle">
 				{{ statusMessage }}
 			</span>
 		</template>
@@ -90,7 +90,7 @@
 			<component :is="callIcon.icon"
 				v-else-if="callIcon"
 				class="participant__call-state"
-				:title="callIcon.tooltip"
+				:title="callIcon.title"
 				:size="callIcon.size" />
 
 			<!-- Grant or revoke lobby permissions (inline button) -->
@@ -445,8 +445,8 @@ export default {
 
 	data() {
 		return {
-			isUserNameTooltipVisible: false,
-			isStatusTooltipVisible: false,
+			isUserNameTitleVisible: false,
+			isStatusTitleVisible: false,
 			permissionsEditor: false,
 			isRemoveDialogOpen: false,
 			isBanParticipant: false,
@@ -481,8 +481,8 @@ export default {
 			}
 		},
 
-		userTooltipText() {
-			if (!this.isUserNameTooltipVisible) {
+		userNameTitle() {
+			if (!this.isUserNameTitleVisible) {
 				return ''
 			}
 			let text = this.computedName
@@ -553,8 +553,8 @@ export default {
 			return getStatusMessage(this.participant)
 		},
 
-		statusMessageTooltip() {
-			if (!this.isStatusTooltipVisible) {
+		statusTitle() {
+			if (!this.isStatusTitleVisible) {
 				return false
 			}
 
@@ -660,13 +660,13 @@ export default {
 			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 				return null
 			} else if (this.isHandRaised) {
-				return { icon: HandBackLeft, size: 18, tooltip: t('spreed', 'Raised their hand') }
+				return { icon: HandBackLeft, size: 18, title: t('spreed', 'Raised their hand') }
 			} if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) {
-				return { icon: VideoIcon, size: 20, tooltip: t('spreed', 'Joined with video') }
+				return { icon: VideoIcon, size: 20, title: t('spreed', 'Joined with video') }
 			} else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) {
-				return { icon: Phone, size: 20, tooltip: t('spreed', 'Joined via phone') }
+				return { icon: Phone, size: 20, title: t('spreed', 'Joined via phone') }
 			} else {
-				return { icon: Microphone, size: 20, tooltip: t('spreed', 'Joined with audio') }
+				return { icon: Microphone, size: 20, title: t('spreed', 'Joined with audio') }
 			}
 		},
 
@@ -895,16 +895,16 @@ export default {
 		t,
 		formattedTime,
 
-		updateUserNameNeedsTooltip() {
+		updateUserNameNeedsTitle() {
 			// check if ellipsized
 			const e = this.$refs.userName
-			this.isUserNameTooltipVisible = (e && e.offsetWidth < e.scrollWidth)
+			this.isUserNameTitleVisible = (e && e.offsetWidth < e.scrollWidth)
 		},
 
-		updateStatusNeedsTooltip() {
+		updateStatusNeedsTitle() {
 			// check if ellipsized
 			const e = this.$refs.statusMessage
-			this.isStatusTooltipVisible = (e && e.offsetWidth < e.scrollWidth)
+			this.isStatusTitleVisible = (e && e.offsetWidth < e.scrollWidth)
 		},
 
 		// Used to allow selecting participants in a search.