Clean up status icon

src/app.css

@@ -83,7 +83,8 @@ img.friends-list-avatar {
     border-radius: 2px;
 }
 
-.x-friend-item > .avatar > img {
+.x-friend-item > .avatar > img,
+.x-friend-item > .avatar > .avatar > img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
@@ -91,51 +92,36 @@ img.friends-list-avatar {
     background-color: transparent;
 }
 
-.x-friend-item > .avatar.active > img {
+.x-friend-item .active img,
+.x-friend-item .offline img {
     filter: grayscale(1);
 }
 
-.x-friend-item:hover > .avatar.offline > img,
+.x-friend-item:hover .active img,
-.x-friend-item:hover > .avatar.active > img {
+.x-friend-item:hover .offline img {
     filter: none;
 }
 
-.x-friend-item > .avatar.online.mobile > img,
+.x-friend-item .status-icon.mobile img {
-.x-friend-item > .avatar.joinme.mobile > img,
-.x-friend-item > .avatar.askme.mobile > img,
-.x-friend-item > .avatar.busy.mobile > img {
     mask-image: url(/images/masks/usercutoutmobile.svg);
 }
 
-.x-friend-item > .avatar.online.mobile::after,
+.x-friend-item .status-icon.mobile::after {
-.x-friend-item > .avatar.joinme.mobile::after,
-.x-friend-item > .avatar.askme.mobile::after,
-.x-friend-item > .avatar.busy.mobile::after {
     position: absolute;
     right: -2px;
-    bottom: 0px;
+    bottom: -0.5px;
     width: 14px;
     height: 14px;
     content: '';
     border-radius: 0px;
-    mask-image: url(/images/masks/phone.svg);
+    mask-image: url(/images/masks/phone.svg) !important;
 }
 
-.x-friend-item > .avatar.active > img,
+.x-friend-item .status-icon img {
-.x-friend-item > .avatar.online > img,
-.x-friend-item > .avatar.joinme > img,
-.x-friend-item > .avatar.askme > img,
-.x-friend-item > .avatar.busy > img,
-.x-friend-item > .avatar.offline > img {
     mask-image: url(/images/masks/usercutout.svg);
 }
 
-.x-friend-item > .avatar.active::after,
+.x-friend-item .status-icon::after {
-.x-friend-item > .avatar.online::after,
-.x-friend-item > .avatar.joinme::after,
-.x-friend-item > .avatar.askme::after,
-.x-friend-item > .avatar.busy::after,
-.x-friend-item > .avatar.offline::after {
     position: absolute;
     right: 0.75px;
     bottom: 0.75px;
@@ -146,37 +132,33 @@ img.friends-list-avatar {
     border-radius: 50%;
 }
 
-.x-friend-item > .avatar.active::after {
+.x-friend-item .status-icon.active::after {
     background: #f4e05e;
 }
 
-.x-friend-item > .avatar.online::after {
+.x-friend-item .status-icon.online::after {
     background: #67c23a;
 }
 
-.x-friend-item > .avatar.joinme::after {
+.x-friend-item .status-icon.joinme::after {
     background: #00b8ff;
     mask-image: url(/images/masks/joinme.svg);
 }
 
-.x-friend-item > .avatar.askme::after {
+.x-friend-item .status-icon.askme::after {
     background: #ff9500;
     mask-image: url(/images/masks/askme.svg);
 }
 
-.x-friend-item > .avatar.busy::after {
+.x-friend-item .status-icon.busy::after {
     background: #ff2c2c;
     mask-image: url(/images/masks/busy.svg);
 }
 
-.x-friend-item > .avatar.offline::after {
+.x-friend-item .status-icon.offline::after {
     background: #909399;
 }
 
-.x-friend-item.offline > .avatar::after {
-    display: none;
-}
-
 .x-friend-item > .detail {
     flex: 1;
     overflow: hidden;

src/shared/utils/user.js

@@ -72,9 +72,11 @@ function removeEmojis(text) {
  */
 function userStatusClass(user, pendingOffline = false) {
     const userStore = useUserStore();
-    const style = {};
+    const style = {
+        'status-icon': true
+    };
     if (typeof user === 'undefined') {
-        return style;
+        return null;
     }
     let id = '';
     if (user.id) {
@@ -83,10 +85,18 @@ function userStatusClass(user, pendingOffline = false) {
         id = user.userId;
     }
     if (id === userStore.currentUser.id) {
-        return statusClass(user.status);
+        const platform = userStore.currentUser.presence?.platform;
+        return {
+            ...style,
+            ...statusClass(user.status),
+            mobile:
+                platform &&
+                platform !== 'standalonewindows' &&
+                platform !== 'web'
+        };
     }
     if (!user.isFriend) {
-        return style;
+        return null;
     }
     if (pendingOffline) {
         // Pending offline
@@ -124,6 +134,9 @@ function userStatusClass(user, pendingOffline = false) {
     } else if (user.status === 'busy') {
         // Do Not Disturb
         style.busy = true;
+    } else {
+        // Unknown status
+        return null;
     }
     if (
         user.$platform &&
@@ -141,21 +154,26 @@ function userStatusClass(user, pendingOffline = false) {
  * @returns {object}
  */
 function statusClass(status) {
-    const style = {};
+    if (typeof status === 'undefined') {
-    if (typeof status !== 'undefined') {
+        return null;
-        if (status === 'active') {
+    }
-            // Online
+    const style = {
-            style.online = true;
+        'status-icon': true
-        } else if (status === 'join me') {
+    };
-            // Join Me
+    if (status === 'active') {
-            style.joinme = true;
+        // Online
-        } else if (status === 'ask me') {
+        style.online = true;
-            // Ask Me
+    } else if (status === 'join me') {
-            style.askme = true;
+        // Join Me
-        } else if (status === 'busy') {
+        style.joinme = true;
-            // Do Not Disturb
+    } else if (status === 'ask me') {
-            style.busy = true;
+        // Ask Me
-        }
+        style.askme = true;
+    } else if (status === 'busy') {
+        // Do Not Disturb
+        style.busy = true;
+    } else {
+        return null;
     }
     return style;
 }