(feat): add sonner call invite, to be replaced with dedicated popup

(feat): add fallback screen to preview page
(feat): show users call page

packages/call/src/components/top.tsx

@@ -1,18 +1,54 @@
+import { useUser, type User } from "@tensamin/user/context";
 import { useCall } from "../store";
+import { useEffect, useState } from "react";
 
 export default function TopBar() {
+  const { get } = useUser();
   const room = useCall((state) => state.room);
 
-  const users = new Array(room.remoteParticipants.size).fill(0).map((_, i) => {
-    const participant = Array.from(room.remoteParticipants.values())[i];
-    return participant.identity;
-  });
+  const userIds = Array.from(room.remoteParticipants.values(), (participant) =>
+    Number(participant.identity),
+  );
+  const userIdsKey = userIds.join(",");
+
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    let active = true;
+
+    if (userIds.length === 0) {
+      setUsers([]);
+      return () => {
+        active = false;
+      };
+    }
+
+    void Promise.all(userIds.map((id) => get(id)))
+      .then((users) => {
+        if (!active) {
+          return;
+        }
+
+        setUsers(users);
+      })
+      .catch(() => {
+        if (!active) {
+          return;
+        }
+
+        setUsers([]);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [get, userIdsKey]);
 
   return (
     <div className="w-full flex justify-between h-12">
       <div className="flex gap-1">
         {users.map((user) => (
-          <div key={user}>{user}</div>
+          <div key={user.user_id}>{user.display}</div>
         ))}
       </div>
     </div>