better display of status and all separately

packages/desktop/src/components/User/userAvatarWithStatus.tsx

@@ -0,0 +1,36 @@
+import { User, UserStatus } from "@nirvana/core/models";
+
+export default function UserAvatarWithStatus(props: { user: User }) {
+  return (
+    <span className="relative">
+      <img
+        src={props.user.picture}
+        className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+        alt=""
+      />
+
+      <UserStatusBubble status={props.user.status} />
+    </span>
+  );
+}
+
+export function UserStatusBubble(props: { status: UserStatus }) {
+  switch (props.status) {
+    case UserStatus.ONLINE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+      );
+    case UserStatus.OFFLINE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-slate-400 h-3 w-3"></span>
+      );
+    case UserStatus.FLOW_STATE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+      );
+    default:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+      );
+  }
+}

packages/desktop/src/components/User/userStatusText.tsx

@@ -0,0 +1,16 @@
+import { UserStatus } from "@nirvana/core/models";
+
+export default function UserStatusText(props: { status: UserStatus }) {
+  switch (props.status) {
+    case UserStatus.ONLINE:
+      return <span className="text-emerald-600 text-sm lowercase">ONLINE</span>;
+    case UserStatus.OFFLINE:
+      return <></>;
+    case UserStatus.FLOW_STATE:
+      return (
+        <span className="text-pink-400 text-sm lowercase">FLOW STATE</span>
+      );
+    default:
+      return <></>;
+  }
+}