feat(status): make the set-status menu work

feat(user): optimise get() function for react
qol(todos): update todos

packages/call/src/components/top.tsx

@@ -1,4 +1,4 @@
-import { useUser, type User } from "@tensamin/user/context";
+import { useUserFields } from "@tensamin/user/context";
 import { useCall, getRoom } from "../store";
 import { useEffect, useState } from "react";
 import { useStorage } from "@tensamin/storage/context";
@@ -11,8 +11,43 @@ import {
   TooltipTrigger,
 } from "@methanium/ui";
 
+const USER_FIELDS = ["Avatar", "Display"] as const;
+
+function ParticipantAvatar({
+  userId,
+  portalContainer,
+}: {
+  userId: number;
+  portalContainer?: HTMLElement;
+}) {
+  const { data: user } = useUserFields(userId, USER_FIELDS);
+  if (!user) return null;
+
+  return (
+    <div className="-ml-4">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Avatar className="size-7">
+              <AvatarImage src={user.Avatar} />
+              <AvatarFallback className="text-xs">
+                {user.Display.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+        <TooltipContent
+          side="bottom"
+          portalProps={{ container: portalContainer }}
+        >
+          {user.Display}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
 export default function TopBar() {
-  const { get } = useUser();
   const { load } = useStorage();
   const room = getRoom();
   const screenRef = useCall((state) => state.screenRef);
@@ -31,65 +66,23 @@ export default function TopBar() {
         : null;
     },
   ).filter((participantId): participantId is number => participantId != null);
-  const userIdsKey = userIds.join(",");
-
-  const [users, setUsers] = useState<User[]>([]);
+  const [ownId, setOwnId] = useState<number>();
 
   useEffect(() => {
-    let active = true;
-    const ids = userIdsKey === "" ? [] : userIdsKey.split(",").map(Number);
+    void load("user_id").then(setOwnId);
+  }, [load]);
 
-    void Promise.all(ids.map((id) => get(id)))
-      .then(async (users) => {
-        if (!active) {
-          return;
-        }
-
-        const ownId = await load("user_id");
-        const ownUser = await get(ownId);
-
-        setUsers([ownUser, ...users]);
-      })
-      .catch(async () => {
-        if (!active) {
-          return;
-        }
-
-        const ownId = await load("user_id");
-        const ownUser = await get(ownId);
-
-        setUsers([ownUser]);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [get, userIdsKey, load]);
+  const participantIds = ownId === undefined ? userIds : [ownId, ...userIds];
 
   return (
     <div className="w-full flex justify-between h-12">
       <div className="flex gap-1 m-3 ml-7">
-        {users.map((user) => (
-          <div key={user.UserId} className="-ml-4">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Avatar className="size-7">
-                    <AvatarImage src={user.Avatar} />
-                    <AvatarFallback className="text-xs">
-                      {user.Display.slice(0, 2).toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
-                }
-              />
-              <TooltipContent
-                side="bottom"
-                portalProps={{ container: portalContainer }}
-              >
-                {user.Display}
-              </TooltipContent>
-            </Tooltip>
-          </div>
+        {participantIds.map((userId) => (
+          <ParticipantAvatar
+            key={userId}
+            userId={userId}
+            portalContainer={portalContainer}
+          />
         ))}
       </div>
     </div>