(feat): add basic call ui

(feat): add screensharing (incl. broken desktop picker)
(qol): add todo

packages/call/src/components/top.tsx

@@ -5,24 +5,23 @@ import { useEffect, useState } from "react";
 export default function TopBar() {
   const { get } = useUser();
   const room = useCall((state) => state.room);
+  const view = useCall((state) => state.view);
 
-  const userIds = Array.from(room.remoteParticipants.values(), (participant) =>
-    Number(participant.identity),
-  );
+  const userIds = Array.from(room.remoteParticipants.values(), (participant) => {
+    const participantId = Number(participant.identity);
+    return Number.isInteger(participantId) && participantId > 0
+      ? participantId
+      : null;
+  }).filter((participantId): participantId is number => participantId != null);
   const userIdsKey = userIds.join(",");
 
   const [users, setUsers] = useState<User[]>([]);
 
   useEffect(() => {
     let active = true;
+    const ids = userIdsKey === "" ? [] : userIdsKey.split(",").map(Number);
 
-    if (userIds.length === 0) {
-      return () => {
-        active = false;
-      };
-    }
-
-    void Promise.all(userIds.map((id) => get(id)))
+    void Promise.all(ids.map((id) => get(id)))
       .then((users) => {
         if (!active) {
           return;
@@ -41,7 +40,7 @@ export default function TopBar() {
     return () => {
       active = false;
     };
-  }, [get, userIdsKey, userIds]);
+  }, [get, userIdsKey]);
 
   return (
     <div className="w-full flex justify-between h-12">
@@ -50,6 +49,7 @@ export default function TopBar() {
           <div key={user.user_id}>{user.display}</div>
         ))}
       </div>
+      {view}
     </div>
   );
 }