From 6840e04118138215d299635d1b0d03778414ad40 Mon Sep 17 00:00:00 2001
From: Alois <aloisianer@proton.me>
Date: Sat, 9 May 2026 20:50:28 +0200
Subject: [PATCH] (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/actions.tsx     | 109 ++++++++++++--
 packages/call/src/components/modals/base.tsx |   9 +-
 packages/call/src/components/sidebarBox.tsx  |  28 +++-
 packages/call/src/components/top.tsx         |  57 ++++++--
 packages/call/src/components/videoViewer.tsx |   4 +-
 packages/call/src/store.tsx                  |  16 +++
 packages/call/src/views/main/focused.tsx     |  84 ++++++-----
 packages/call/src/views/main/layout.tsx      | 144 ++++++++++++++++++-
 packages/call/todo.md                        |   2 +-
 9 files changed, 382 insertions(+), 71 deletions(-)

diff --git a/packages/call/src/components/actions.tsx b/packages/call/src/components/actions.tsx
index 0002e2f..6ff4661 100644
--- a/packages/call/src/components/actions.tsx
+++ b/packages/call/src/components/actions.tsx
@@ -6,18 +6,22 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@tensamin/ui";
+import { useEffect, useState } from "react";
 import MuteButton from "./buttons/mute";
 import DeafButton from "./buttons/deaf";
 import ScreenshareButton from "./buttons/screenshare";
 import LeaveButton from "./buttons/leave";
 import {
   setCallIsPopout,
+  setUsersInFocusedViewHidden,
   stopWatchingFocusedStream,
   triggerCallLayoutCalculation,
   useCall,
 } from "../store";
 import InviteButton from "./buttons/invite";
 import {
+  ChevronDown,
+  ChevronUp,
   Maximize,
   Minimize,
   SquareArrowOutDownLeft,
@@ -37,9 +41,15 @@ export default function Actions() {
     focusedParticipantId != null &&
     watchedStreamParticipantIds.includes(focusedParticipantId);
 
+  // Fullscreen stuff
   const callIsPopout = useCall((state) => state.callIsPopout);
   const callIsFullscreen = useCall((state) => state.callIsFullscreen);
   const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   const toggleFullscreen = async () => {
     if (callIsFullscreen) {
@@ -51,18 +61,93 @@ export default function Actions() {
     triggerCallLayoutCalculation();
   };
 
+  // Hide users in focused view
+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+
   return (
     <div className="w-full flex justify-between items-center">
-      <div className="w-30" />
+      <div className="w-30 flex justify-start">
+        {view === "focused" && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  onClick={() =>
+                    setUsersInFocusedViewHidden(!usersInFocusedViewHidden)
+                  }
+                  variant="link"
+                  className="w-11 h-11 p-0! ml-3 text-foreground"
+                >
+                  {usersInFocusedViewHidden ? (
+                    <ChevronUp className="size-6" />
+                  ) : (
+                    <ChevronDown className="size-6" />
+                  )}
+                </Button>
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Hide users
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
       <Card className="p-1.75">
         <CardContent className="p-0! flex gap-1.75">
-          <MuteButton className={sharedClasses} iconSize={sharedIconSize} />
-          <DeafButton className={sharedClasses} iconSize={sharedIconSize} />
-          <ScreenshareButton
-            className={sharedClasses}
-            iconSize={sharedIconSize}
-          />
-          <InviteButton className={sharedClasses} iconSize={sharedIconSize} />
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <MuteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Mute
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DeafButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Deafen
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <ScreenshareButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Screenshare
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InviteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Invite
+            </TooltipContent>
+          </Tooltip>
           {isWatchingFocusedStream ? (
             <Button
               className="h-10"
@@ -93,7 +178,9 @@ export default function Actions() {
               </Button>
             }
           />
-          <TooltipContent>Popout</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Popout
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger
@@ -113,7 +200,9 @@ export default function Actions() {
               </Button>
             }
           />
-          <TooltipContent>Fullscreen</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Fullscreen
+          </TooltipContent>
         </Tooltip>
       </div>
     </div>
diff --git a/packages/call/src/components/modals/base.tsx b/packages/call/src/components/modals/base.tsx
index 03327d9..b75c129 100644
--- a/packages/call/src/components/modals/base.tsx
+++ b/packages/call/src/components/modals/base.tsx
@@ -90,10 +90,12 @@ function Overlay({
 export default function Base({
   participant,
   type,
+  fill = false,
   flush = false,
 }: {
   participant: Participant | undefined;
   type: "user" | "stream";
+  fill?: boolean;
   flush?: boolean;
 }) {
   const { get } = useUser();
@@ -170,9 +172,9 @@ export default function Base({
         render={
           <div
             onClick={onClick}
-            className={`relative aspect-video w-full border-2 ${
-              flush ? "rounded-none border-x-0" : "rounded-md"
-            }`}
+            className={`relative w-full ${fill ? "h-full border-0" : "aspect-video border-2"} ${
+              flush || fill ? "rounded-none" : "rounded-md"
+            } ${flush && !fill ? "border-x-0" : ""}`}
           >
             <div className="z-20 absolute bottom-0 left-0 w-full h-full flex justify-start items-end p-2">
               <>
@@ -219,6 +221,7 @@ export default function Base({
               {type === "stream" &&
                 (showStream ? (
                   <VideoViewer
+                    fill={fill}
                     flush={flush}
                     participantId={participant.identity}
                     publication={screenSharePublication}
diff --git a/packages/call/src/components/sidebarBox.tsx b/packages/call/src/components/sidebarBox.tsx
index bf90e93..e34b419 100644
--- a/packages/call/src/components/sidebarBox.tsx
+++ b/packages/call/src/components/sidebarBox.tsx
@@ -20,12 +20,18 @@ import LeaveButton from "./buttons/leave";
 
 export default function SidebarBox() {
   const state = useCall((store) => store.state);
+  const screenRef = useCall((store) => store.screenRef);
   const isMobile = useIsMobile();
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   return state === "closed" ? null : (
     <Card className="p-1.5 gap-2" hidden={isMobile}>
       <CardHeader className="p-0! pb-2! border-b-2">
-        <ConnectionBar />
+        <ConnectionBar portalContainer={portalContainer} />
       </CardHeader>
       <CardContent className="p-0! flex flex-col gap-1">
         <div className="flex justify-start gap-1">
@@ -39,7 +45,11 @@ export default function SidebarBox() {
   );
 }
 
-function ConnectionBar() {
+function ConnectionBar({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
   const state = useCall((store) => store.state);
   const isEncrypted = useCall((store) => store.isEncrypted);
   const callId = useCall((store) => store.callId);
@@ -62,7 +72,7 @@ function ConnectionBar() {
             {state === "closed" && "Closed"}
             {state === "closing" && "Closing"}
 
-            <TinyPingGraph />
+            <TinyPingGraph portalContainer={portalContainer} />
 
             {isEncrypted ? (
               <Lock color="var(--primary-foreground-alt)" />
@@ -72,12 +82,18 @@ function ConnectionBar() {
           </Button>
         }
       />
-      <TooltipContent>Click to open call page</TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        Click to open call page
+      </TooltipContent>
     </Tooltip>
   );
 }
 
-export function TinyPingGraph() {
+export function TinyPingGraph({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
   const room = useCall((store) => store.room);
 
   const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
@@ -164,7 +180,7 @@ export function TinyPingGraph() {
           </div>
         }
       />
-      <TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
         {data.length > 0 ? `${data.at(-1)?.ping} ms` : "Measuring ping..."}
       </TooltipContent>
     </Tooltip>
diff --git a/packages/call/src/components/top.tsx b/packages/call/src/components/top.tsx
index 357d4d8..62e8bfc 100644
--- a/packages/call/src/components/top.tsx
+++ b/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>
   );
 }
diff --git a/packages/call/src/components/videoViewer.tsx b/packages/call/src/components/videoViewer.tsx
index 9d31706..40cf6ac 100644
--- a/packages/call/src/components/videoViewer.tsx
+++ b/packages/call/src/components/videoViewer.tsx
@@ -6,11 +6,13 @@ import { Loader2 } from "lucide-react";
 
 export default function VideoViewer({
   className,
+  fill = false,
   flush = false,
   publication,
   participantId,
 }: {
   className?: string;
+  fill?: boolean;
   flush?: boolean;
   publication: TrackPublication;
   participantId: string;
@@ -28,7 +30,7 @@ export default function VideoViewer({
     <VideoTrack
       trackRef={trackRef}
       className={cn(
-        "w-full h-full aspect-video bg-black",
+        fill ? "w-full h-full bg-black" : "w-full h-full aspect-video bg-black",
         flush ? "rounded-none" : "rounded-md",
         className,
       )}
diff --git a/packages/call/src/store.tsx b/packages/call/src/store.tsx
index 6024e28..4e95c43 100644
--- a/packages/call/src/store.tsx
+++ b/packages/call/src/store.tsx
@@ -86,6 +86,7 @@ type CallStore = {
   screenShareEnabled: boolean;
   screenShareSession: ScreenShareSession | null;
   focusedParticipantId: number | null;
+  usersInFocusedViewHidden: boolean;
   watchedStreamParticipantIds: number[];
   pendingWatchedParticipantIds: number[];
   activeScreenShareParticipantIds: number[];
@@ -508,6 +509,18 @@ export function setCallView(view: CallView) {
   useCall.setState({ view });
 }
 
+export function setUsersInFocusedViewHidden(
+  usersInFocusedViewHidden: boolean,
+) {
+  useCall.setState((state) => ({
+    usersInFocusedViewHidden,
+    layoutVersion:
+      state.usersInFocusedViewHidden === usersInFocusedViewHidden
+        ? state.layoutVersion
+        : state.layoutVersion + 1,
+  }));
+}
+
 export function setCallIsFullscreen(callIsFullscreen: boolean) {
   useCall.setState({ callIsFullscreen });
 }
@@ -771,6 +784,7 @@ export async function disconnect() {
     view: "preview",
     screenShareSession: null,
     focusedParticipantId: null,
+    usersInFocusedViewHidden: false,
     watchedStreamParticipantIds: [],
     pendingWatchedParticipantIds: [],
     activeScreenShareParticipantIds: [],
@@ -928,6 +942,7 @@ export function resetCallState() {
     deaf: false,
     screenShareSession: null,
     focusedParticipantId: null,
+    usersInFocusedViewHidden: false,
     watchedStreamParticipantIds: [],
     pendingWatchedParticipantIds: [],
     activeScreenShareParticipantIds: [],
@@ -969,6 +984,7 @@ export const useCall = create<CallStore>(() => ({
   screenShareEnabled: room.localParticipant.isScreenShareEnabled,
   screenShareSession: null,
   focusedParticipantId: null,
+  usersInFocusedViewHidden: false,
   watchedStreamParticipantIds: [],
   pendingWatchedParticipantIds: [],
   activeScreenShareParticipantIds: [],
diff --git a/packages/call/src/views/main/focused.tsx b/packages/call/src/views/main/focused.tsx
index ba056a0..07c1dae 100644
--- a/packages/call/src/views/main/focused.tsx
+++ b/packages/call/src/views/main/focused.tsx
@@ -3,7 +3,6 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useCall } from "../../store";
 import Base from "../../components/modals/base";
 
-const TILE_ASPECT_RATIO = 16 / 9;
 const SECONDARY_ROW_HEIGHT_PX = 180;
 const STACK_GAP_PX = 12;
 
@@ -11,15 +10,17 @@ export default function View() {
   const room = useCall((state) => state.room);
   const layoutVersion = useCall((state) => state.layoutVersion);
 
+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+  const callIsFullscreen = useCall((state) => state.callIsFullscreen);
+
   const focusedParticipantId = useCall((state) => state.focusedParticipantId);
   const activeScreenShareParticipantIds = useCall(
     (state) => state.activeScreenShareParticipantIds,
   );
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [focusedTileSize, setFocusedTileSize] = useState({
-    width: 0,
-    height: 0,
-  });
+  const focusedTileRef = useRef<HTMLDivElement | null>(null);
   const [isFocusedTileFlush, setIsFocusedTileFlush] = useState(false);
   const [participantVersion, setParticipantVersion] = useState(0);
 
@@ -97,47 +98,47 @@ export default function View() {
 
   useLayoutEffect(() => {
     const container = containerRef.current;
+    const focusedTile = focusedTileRef.current;
 
-    if (!container) {
+    if (!container || !focusedTile) {
       return;
     }
 
-    const syncTileLayout = () => {
-      const rect = container.getBoundingClientRect();
-      const width = Math.max(0, Math.floor(window.innerWidth + 1 - rect.left));
-      const height = Math.max(0, Math.floor(container.clientHeight));
-      const reservedHeight =
-        tiles.length > 0 ? SECONDARY_ROW_HEIGHT_PX + STACK_GAP_PX : 0;
-      const availableHeight = Math.max(0, height - reservedHeight);
-      const nextWidth = Math.max(
-        0,
-        Math.min(width, availableHeight * TILE_ASPECT_RATIO),
-      );
-      const nextHeight = Math.max(0, nextWidth / TILE_ASPECT_RATIO);
-      const widthDelta = Math.abs(width - nextWidth);
+    let frameId = 0;
 
-      setFocusedTileSize((current) =>
-        current.width === nextWidth && current.height === nextHeight
-          ? current
-          : { width: nextWidth, height: nextHeight },
-      );
-      setIsFocusedTileFlush(widthDelta <= 1);
+    const syncTileLayout = () => {
+      const containerWidth = Math.floor(container.getBoundingClientRect().width);
+      const tileWidth = Math.floor(focusedTile.getBoundingClientRect().width);
+
+      setIsFocusedTileFlush(Math.abs(containerWidth - tileWidth) <= 1);
+    };
+
+    const scheduleSyncTileLayout = () => {
+      cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(syncTileLayout);
     };
 
     syncTileLayout();
 
     const observer = new ResizeObserver(() => {
-      requestAnimationFrame(syncTileLayout);
+      scheduleSyncTileLayout();
     });
     observer.observe(container);
+    observer.observe(focusedTile);
 
-    window.addEventListener("resize", syncTileLayout);
+    window.addEventListener("resize", scheduleSyncTileLayout);
 
     return () => {
       observer.disconnect();
-      window.removeEventListener("resize", syncTileLayout);
+      cancelAnimationFrame(frameId);
+      window.removeEventListener("resize", scheduleSyncTileLayout);
     };
-  }, [layoutVersion, tiles.length, focusedParticipantId]);
+  }, [
+    layoutVersion,
+    tiles.length,
+    focusedParticipantId,
+    usersInFocusedViewHidden,
+  ]);
 
   if (focusedParticipantId == null) {
     return null;
@@ -154,20 +155,32 @@ export default function View() {
   const focusedParticipant = getParticipantById(focusedParticipantId);
   const focusedParticipantHasActiveScreenShare =
     activeScreenShareParticipantIdSet.has(focusedParticipantId);
+  const isImmersiveFocusedView =
+    callIsFullscreen && usersInFocusedViewHidden;
 
   return (
     <div
       ref={containerRef}
-      className="flex h-full w-full items-center justify-center overflow-hidden"
+      className="flex h-full w-full overflow-hidden"
     >
       <div
-        className="flex max-h-full w-full flex-col items-center overflow-hidden"
-        style={{ gap: tiles.length > 0 ? STACK_GAP_PX : 0 }}
+        className="flex h-full w-full flex-col items-center overflow-hidden"
+        style={{
+          gap: tiles.length > 0 && !isImmersiveFocusedView ? STACK_GAP_PX : 0,
+        }}
       >
-        <div className="w-full flex justify-center overflow-hidden">
-          <div className="overflow-hidden" style={focusedTileSize}>
+        <div className="flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
+          <div
+            ref={focusedTileRef}
+            className={
+              isImmersiveFocusedView
+                ? "h-full w-full overflow-hidden"
+                : "h-full max-w-full aspect-video overflow-hidden"
+            }
+          >
             <Base
-              flush={isFocusedTileFlush}
+              fill={isImmersiveFocusedView}
+              flush={isImmersiveFocusedView || isFocusedTileFlush}
               type={focusedParticipantHasActiveScreenShare ? "stream" : "user"}
               participant={focusedParticipant}
             />
@@ -175,6 +188,7 @@ export default function View() {
         </div>
         {tiles.length > 0 && (
           <div
+            hidden={usersInFocusedViewHidden}
             className="w-full shrink-0 flex justify-center gap-2 overflow-x-auto"
             style={{ height: SECONDARY_ROW_HEIGHT_PX }}
           >
diff --git a/packages/call/src/views/main/layout.tsx b/packages/call/src/views/main/layout.tsx
index 959cfcf..fd81b68 100644
--- a/packages/call/src/views/main/layout.tsx
+++ b/packages/call/src/views/main/layout.tsx
@@ -1,24 +1,156 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import Actions from "../../components/actions";
 import TopBar from "../../components/top";
-import { setScreenRef } from "../../store";
+import { setScreenRef, useCall } from "../../store";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const screenRef = useRef<HTMLDivElement>(null);
+  const topBarRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const hideChromeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [overlayInsets, setOverlayInsets] = useState({ top: 0, bottom: 0 });
+  const [isImmersiveChromeVisible, setIsImmersiveChromeVisible] = useState(false);
 
   useEffect(() => {
     setScreenRef(screenRef);
   }, []);
 
+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+  const view = useCall((state) => state.view);
+  const callIsFullscreen = useCall((state) => state.callIsFullscreen);
+  const isImmersiveFocusedView =
+    callIsFullscreen && view === "focused" && usersInFocusedViewHidden;
+  const immersiveChromeVisible =
+    isImmersiveFocusedView && isImmersiveChromeVisible;
+
+  useEffect(() => {
+    if (!isImmersiveFocusedView) {
+      if (hideChromeTimeoutRef.current) {
+        clearTimeout(hideChromeTimeoutRef.current);
+        hideChromeTimeoutRef.current = null;
+      }
+    }
+  }, [isImmersiveFocusedView]);
+
+  useEffect(() => {
+    return () => {
+      if (hideChromeTimeoutRef.current) {
+        clearTimeout(hideChromeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const topBar = topBarRef.current;
+    const actions = actionsRef.current;
+
+    if (!topBar || !actions) {
+      return;
+    }
+
+    const syncOverlayInsets = () => {
+      setOverlayInsets({
+        top: Math.ceil(topBar.getBoundingClientRect().height),
+        bottom: Math.ceil(actions.getBoundingClientRect().height),
+      });
+    };
+
+    syncOverlayInsets();
+
+    const observer = new ResizeObserver(syncOverlayInsets);
+    observer.observe(topBar);
+    observer.observe(actions);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const scheduleChromeHide = () => {
+    if (hideChromeTimeoutRef.current) {
+      clearTimeout(hideChromeTimeoutRef.current);
+    }
+
+    hideChromeTimeoutRef.current = setTimeout(() => {
+      setIsImmersiveChromeVisible(false);
+      hideChromeTimeoutRef.current = null;
+    }, 3000);
+  };
+
+  const showImmersiveChrome = () => {
+    if (!isImmersiveFocusedView) {
+      return;
+    }
+
+    setIsImmersiveChromeVisible(true);
+    scheduleChromeHide();
+  };
+
+  const hideImmersiveChrome = () => {
+    if (hideChromeTimeoutRef.current) {
+      clearTimeout(hideChromeTimeoutRef.current);
+      hideChromeTimeoutRef.current = null;
+    }
+
+    setIsImmersiveChromeVisible(false);
+  };
+
   return (
-    <div ref={screenRef} className="w-full h-full flex flex-col">
-      <div className="shrink-0">
+    <div
+      ref={screenRef}
+      className={`relative w-full h-full flex flex-col ${
+        isImmersiveFocusedView && !immersiveChromeVisible ? "cursor-none" : ""
+      }`}
+      onMouseEnter={showImmersiveChrome}
+      onMouseMove={showImmersiveChrome}
+      onMouseLeave={hideImmersiveChrome}
+    >
+      <div
+        ref={topBarRef}
+        className={`shrink-0 w-full z-20 transition-all duration-200 ${
+          isImmersiveFocusedView
+            ? immersiveChromeVisible
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 -translate-y-2 pointer-events-none"
+            : "opacity-100 translate-y-0"
+        }`}
+        style={{
+          position: usersInFocusedViewHidden ? "absolute" : "relative",
+          top: 0,
+          left: 0,
+        }}
+      >
         <TopBar />
       </div>
-      <div className="min-h-0 flex-1 w-full flex justify-center items-center overflow-hidden">
+      <div
+        className="min-h-0 flex-1 w-full flex justify-center items-center overflow-hidden"
+        style={
+          usersInFocusedViewHidden && !isImmersiveFocusedView
+            ? {
+                paddingTop: overlayInsets.top,
+                paddingBottom: overlayInsets.bottom,
+              }
+            : undefined
+        }
+      >
         {children}
       </div>
-      <div className="shrink-0 pb-4.5 pt-3">
+      <div
+        ref={actionsRef}
+        className={`shrink-0 pb-4.5 pt-3 bottom-0 w-full z-20 transition-all duration-200 ${
+          isImmersiveFocusedView
+            ? immersiveChromeVisible
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 translate-y-2 pointer-events-none"
+            : "opacity-100 translate-y-0"
+        }`}
+        style={{
+          position: usersInFocusedViewHidden ? "absolute" : "relative",
+          left: 0,
+        }}
+      >
         <Actions />
       </div>
     </div>
diff --git a/packages/call/todo.md b/packages/call/todo.md
index b45874a..952858f 100644
--- a/packages/call/todo.md
+++ b/packages/call/todo.md
@@ -10,4 +10,4 @@
   - Timeout
   - Disconnect
 - Desktop-App screenshares
-- Toggle members button in focused view
+- Context menus