Add user status on user profile icon (#33653)

* Add user status on user profile icon

Currently unstyled & no tests

* Style the user status icon

* Update snapshot

for avatar wrapper

* More snapshot updates

* add if braces

* Split out user status functions

to avoid circular dep which has the weird effect of just breaking
jest's mocking.

* type imports

* Update imports

* Update snapshot

* Tests

* baseline image

* Just snapshot the component itself

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

packages/shared-components/src/menus/UserMenu/UserMenu.module.css

@@ -54,6 +54,29 @@
     }
 }
 
+.avatarWrapper {
+    position: relative;
+    display: inline-flex;
+    overflow: visible;
+}
+
+.statusEmoji {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    line-height: 1;
+    /* bottom edges aligned with the avatar */
+    bottom: 0;
+    /* center of circle on the right edge of the avatar */
+    right: -10px;
+    background-color: var(--cpd-color-bg-canvas-default);
+}
+
 .triggerButton {
     border: none;
     background: none;