chore: [Idle detection] Deal with users on systems that don't handle emoji (#2941)

* Deal with users on systems that don't handle emoji

* Leave no trailing space

* Move function to utils, and actually call it 🤣
Chapeau, TypeScript!

* Use grinning face instead of koala

* Tweak globalAlpha

src/renderer/renderScene.ts

@@ -47,9 +47,11 @@ import {
   TransformHandles,
   TransformHandleType,
 } from "../element/transformHandles";
-import { viewportCoordsToSceneCoords } from "../utils";
+import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
 import { UserIdleState } from "../excalidraw-app/collab/types";
 
+const hasEmojiSupport = supportsEmoji();
+
 const strokeRectWithRotation = (
   context: CanvasRenderingContext2D,
   x: number,
@@ -449,7 +451,7 @@ export const renderScene = (
 
     const userState = sceneState.remotePointerUserStates[clientId];
     if (isOutOfBounds || userState === UserIdleState.AWAY) {
-      context.globalAlpha = 0.2;
+      context.globalAlpha = 0.48;
     }
 
     if (
@@ -481,13 +483,24 @@ export const renderScene = (
     context.stroke();
 
     const username = sceneState.remotePointerUsernames[clientId];
-    const usernameAndIdleState = `${username ? `${username} ` : ""}${
-      userState === UserIdleState.AWAY
-        ? "⚫️"
-        : userState === UserIdleState.IDLE
-        ? "💤"
-        : "🟢"
-    }`;
+    let usernameAndIdleState;
+    if (hasEmojiSupport) {
+      usernameAndIdleState = `${username ? `${username} ` : ""}${
+        userState === UserIdleState.AWAY
+          ? "⚫️"
+          : userState === UserIdleState.IDLE
+          ? "💤"
+          : "🟢"
+      }`;
+    } else {
+      usernameAndIdleState = `${username ? `${username}` : ""}${
+        userState === UserIdleState.AWAY
+          ? ` (${UserIdleState.AWAY})`
+          : userState === UserIdleState.IDLE
+          ? ` (${UserIdleState.IDLE})`
+          : ""
+      }`;
+    }
 
     if (!isOutOfBounds && usernameAndIdleState) {
       const offsetX = x + width;