Merge pull request #5480 from nextcloud-libraries/backport/5477/next

[next] fix(NcAvatar): support in-app router links for contact menu

src/components/NcAvatar/NcAvatar.vue

@@ -156,15 +156,15 @@ export default {
 			:aria-label="avatarAriaLabel"
 			:title="tooltip"
 			@click="toggleMenu">
-			<NcActionLink v-for="(item, key) in menu"
+			<component :is="item.ncActionComponent"
+				v-for="(item, key) in menu"
 				:key="key"
-				:href="item.href"
-				:icon="item.icon">
+				v-bind="item.ncActionComponentProps">
 				<template v-if="item.iconSvg" #icon>
 					<NcIconSvgWrapper :svg="item.iconSvg" />
 				</template>
 				{{ item.text }}
-			</NcActionLink>
+			</component>
 			<template v-if="contactsMenuLoading" #icon>
 				<NcLoadingIcon />
 			</template>
@@ -193,6 +193,8 @@ export default {
 <script>
 import NcActions from '../NcActions/index.js'
 import NcActionLink from '../NcActionLink/index.js'
+import NcActionRouter from '../NcActionRouter/index.js'
+import NcActionText from '../NcActionText/index.js'
 import NcButton from '../NcButton/index.ts'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
@@ -202,6 +204,7 @@ import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
 import { getUserStatusText } from '../../utils/UserStatus.ts'
 import { userStatus } from '../../mixins/index.js'
 import { t } from '../../l10n.js'
+import { getRoute } from '../../components/NcRichText/autolink.ts'
 
 import axios from '@nextcloud/axios'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -244,7 +247,6 @@ export default {
 	components: {
 		DotsHorizontal,
 		NcActions,
-		NcActionLink,
 		NcButton,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
@@ -511,9 +513,18 @@ export default {
 		},
 		menu() {
 			const actions = this.contactsMenuActions.map((item) => {
+				const route = getRoute(this.$router, item.hyperlink)
 				return {
-					href: item.hyperlink,
-					icon: item.icon,
+					ncActionComponent: route ? NcActionRouter : NcActionLink,
+					ncActionComponentProps: route
+						? {
+							to: route,
+							icon: item.icon,
+						}
+						: {
+							href: item.hyperlink,
+							icon: item.icon,
+						},
 					text: item.title,
 				}
 			})
@@ -534,7 +545,8 @@ export default {
 					<text x="50%" y="50%" text-anchor="middle" style="dominant-baseline: central; font-size: 85%">${escape(this.userStatus.icon)}</text>
 				</svg>`
 				return [{
-					href: '#',
+					ncActionComponent: NcActionText,
+					ncActionComponentProps: {},
 					iconSvg: this.userStatus.icon ? emojiIcon : undefined,
 					text: `${this.userStatus.message}`,
 				}].concat(actions)