(feat): add ability to hide users in focused call view

(feat): add small avatars with tooltips instead of usernames in the top bar in calls
(fix): a lot of layout issues
(qol): update todo

packages/call/src/components/top.tsx

@@ -1,11 +1,26 @@
 import { useUser, type User } from "@tensamin/user/context";
 import { useCall } from "../store";
 import { useEffect, useState } from "react";
+import { useStorage } from "@tensamin/storage/context";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";
 
 export default function TopBar() {
   const { get } = useUser();
+  const { load } = useStorage();
   const room = useCall((state) => state.room);
-  const view = useCall((state) => state.view);
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   const userIds = Array.from(
     room.remoteParticipants.values(),
@@ -25,34 +40,58 @@ export default function TopBar() {
     const ids = userIdsKey === "" ? [] : userIdsKey.split(",").map(Number);
 
     void Promise.all(ids.map((id) => get(id)))
-      .then((users) => {
+      .then(async (users) => {
         if (!active) {
           return;
         }
 
-        setUsers(users);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser, ...users]);
       })
-      .catch(() => {
+      .catch(async () => {
         if (!active) {
           return;
         }
 
-        setUsers([]);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser]);
       });
 
     return () => {
       active = false;
     };
-  }, [get, userIdsKey]);
+  }, [get, userIdsKey, load]);
 
   return (
     <div className="w-full flex justify-between h-12">
-      <div className="flex gap-1">
+      <div className="flex gap-1 m-3 ml-7">
         {users.map((user) => (
-          <div key={user.user_id}>{user.display}</div>
+          <div key={user.user_id} className="-ml-4">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Avatar className="size-7">
+                    <AvatarImage />
+                    <AvatarFallback className="text-xs">
+                      {user.display.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                }
+              />
+              <TooltipContent
+                side="bottom"
+                portalProps={{ container: portalContainer }}
+              >
+                {user.display}
+              </TooltipContent>
+            </Tooltip>
+          </div>
         ))}
       </div>
-      {view}
     </div>
   );
 }