(feat): add avatars to call modals

(feat): add fullscreen & popout buttons
(feat): remove clock icon from awaiting messages
(qol): update todos

packages/call/src/views/main/focused.tsx

@@ -9,6 +9,7 @@ const STACK_GAP_PX = 12;
 
 export default function View() {
   const room = useCall((state) => state.room);
+  const layoutVersion = useCall((state) => state.layoutVersion);
 
   const focusedParticipantId = useCall((state) => state.focusedParticipantId);
   const activeScreenShareParticipantIds = useCall(
@@ -136,7 +137,7 @@ export default function View() {
       observer.disconnect();
       window.removeEventListener("resize", syncTileLayout);
     };
-  }, [tiles.length, focusedParticipantId]);
+  }, [layoutVersion, tiles.length, focusedParticipantId]);
 
   if (focusedParticipantId == null) {
     return null;

packages/call/src/views/main/grid.tsx

@@ -83,6 +83,7 @@ function calculateOptimalGridLayout(
 
 export default function View() {
   const room = useCall((state) => state.room);
+  const layoutVersion = useCall((state) => state.layoutVersion);
   const activeScreenShareParticipantIds = useCall(
     (state) => state.activeScreenShareParticipantIds,
   );
@@ -98,15 +99,21 @@ export default function View() {
       return;
     }
 
+    const syncContainerSize = () => {
+      const { width, height } = element.getBoundingClientRect();
+      setContainerSize({ width, height });
+    };
+
     const observer = new ResizeObserver(([entry]) => {
       const { width, height } = entry.contentRect;
       setContainerSize({ width, height });
     });
 
+    syncContainerSize();
     observer.observe(element);
 
     return () => observer.disconnect();
-  }, []);
+  }, [layoutVersion]);
 
   useEffect(() => {
     const syncParticipants = () => {

packages/call/src/views/main/layout.tsx

@@ -1,9 +1,17 @@
+import { useEffect, useRef } from "react";
 import Actions from "../../components/actions";
 import TopBar from "../../components/top";
+import { setScreenRef } from "../../store";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const screenRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setScreenRef(screenRef);
+  }, []);
+
   return (
-    <div className="w-full h-full flex flex-col">
+    <div ref={screenRef} className="w-full h-full flex flex-col">
       <div className="shrink-0">
         <TopBar />
       </div>