From 23f371e08a37be8c80d708422d67c3ef0a30639d Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 15 Mar 2024 15:50:42 +0100
Subject: [PATCH] fix(NcAvatar): rendering user status emoji in the menu

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAvatar/NcAvatar.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 9bdc7e3580..bfc837ee45 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -153,6 +153,9 @@ export default {
 				:key="key"
 				:href="item.href"
 				:icon="item.icon">
+				<template v-if="item.iconSvg" #icon>
+					<NcIconSvgWrapper :svg="item.iconSvg" />
+				</template>
 				{{ item.text }}
 			</NcActionLink>
 			<template v-if="contactsMenuLoading" #icon>
@@ -184,6 +187,7 @@ export default {
 import NcActions from '../NcActions/index.js'
 import NcActionLink from '../NcActionLink/index.js'
 import NcButton from '../NcButton/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 import usernameToColor from '../../functions/usernameToColor/index.js'
@@ -234,6 +238,7 @@ export default {
 		NcActions,
 		NcActionLink,
 		NcButton,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 		NcUserStatusIcon,
 	},
@@ -511,9 +516,13 @@ export default {
 			}
 
 			if (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {
+				// NcAction's URL icons are inverted in dark mode, so we need to pass SVg image in the icon slot
+				const emojiIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+					<text x="50%" y="50%" text-anchor="middle" style="dominant-baseline: central; font-size: 85%">${escape(this.userStatus.icon)}</text>
+				</svg>`
 				return [{
 					href: '#',
-					icon: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${escape(this.userStatus.icon)}</text></svg>`,
+					iconSvg: this.userStatus.icon ? emojiIcon : undefined,
 					text: `${this.userStatus.message}`,
 				}].concat(actions)
 			}