[stable8] feat(NcUserStatusIcon): update status icons

src/components/NcAvatar/NcAvatar.vue

@@ -247,7 +247,7 @@
 
 import { getRoute } from '../../components/NcRichText/autolink.js'
 import { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'
 import usernameToColor from '../../functions/usernameToColor/index.js'
 import { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'
 import { userStatus } from '../../mixins/index.js'
 import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
@@ -938,7 +938,6 @@
 		width: 40%;
 		line-height: 1;
 		font-size: clamp(var(--font-size-small, 13px), 85%, var(--default-font-size));
-		border: 2px solid var(--color-main-background);
 		background-color: var(--color-main-background);
 		background-repeat: no-repeat;
 		background-size: 16px;

src/components/NcUserStatusIcon/NcUserStatusIcon.vue

@@ -12,18 +12,29 @@ This component displays a user status icon.
 
 ```vue
 <template>
-	<div class="row">
+	<div class="grid">
 		<NcUserStatusIcon status="online" />
+		<span>Online</span>
 		<NcUserStatusIcon status="away" />
+		<span>Away</span>
+		<NcUserStatusIcon status="busy" />
+		<span>Busy</span>
 		<NcUserStatusIcon status="dnd" />
+		<span>Do not disturb</span>
 		<NcUserStatusIcon status="invisible" />
+		<span>Invisible</span>
+		<NcUserStatusIcon status="offline" />
+		<span>Offline</span>
 	</div>
 </template>
 
 <style>
-.row {
-	display: flex;
-	gap: 10px;
+.grid {
+	display: grid;
+	grid-template-columns: 20px 1fr;
+	gap: 8px;
+	align-items: center;
+	width: fit-content;
 }
 </style>
 ```
@@ -45,15 +56,32 @@ This component displays a user status icon.
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCapabilities } from '@nextcloud/capabilities'
+import { loadState } from '@nextcloud/initial-state'
 
 import onlineSvg from '../../assets/status-icons/user-status-online.svg?raw'
+import onlineLegacySvg from '../../assets/status-icons/user-status-online-legacy.svg?raw'
 import awaySvg from '../../assets/status-icons/user-status-away.svg?raw'
+import awayLegacySvg from '../../assets/status-icons/user-status-away-legacy.svg?raw'
+import busySvg from '../../assets/status-icons/user-status-busy.svg?raw'
 import dndSvg from '../../assets/status-icons/user-status-dnd.svg?raw'
+import dndLegacySvg from '../../assets/status-icons/user-status-dnd-legacy.svg?raw'
 import invisibleSvg from '../../assets/status-icons/user-status-invisible.svg?raw'
+import invisibleLegacySvg from '../../assets/status-icons/user-status-invisible-legacy.svg?raw'
 
 import { getUserStatusText } from '../../utils/UserStatus.ts'
 import { t } from '../../l10n.js'
 
+const [major] = loadState('core', 'config', { version: '32.0' }).version.split('.', 2) ?? []
+const isLegacy = major && Number.parseInt(major) < 32
+const matchSvg = {
+	online: isLegacy ? onlineLegacySvg : onlineSvg,
+	away: isLegacy ? awayLegacySvg : awaySvg,
+	busy: isLegacy ? awayLegacySvg : busySvg,
+	dnd: isLegacy ? dndLegacySvg : dndSvg,
+	invisible: isLegacy ? invisibleLegacySvg : invisibleSvg,
+	offline: isLegacy ? invisibleLegacySvg : invisibleSvg,
+}
+
 export default {
 	name: 'NcUserStatusIcon',
 
@@ -111,14 +139,6 @@ export default {
 		},
 
 		activeSvg() {
-			const matchSvg = {
-				online: onlineSvg,
-				away: awaySvg,
-				busy: awaySvg,
-				dnd: dndSvg,
-				invisible: invisibleSvg,
-				offline: invisibleSvg,
-			}
 			return matchSvg[this.activeStatus] ?? null
 		},