feat(call): add docked call panel and remote cursor overlay

- Implemented DockedCallPanel component to render the docked call interface when an active call is present.
- Created RemoteCursorOverlay component to display remote cursor positions during screen sharing.
- Added hooks for managing docked call state and remote cursor functionality.
- Introduced pending drag state management for seamless transitions between docked and floating states.
- Developed embed filter management components for personal and room-wide settings, allowing users to customize URL embed visibility.
- Implemented auto-joining functionality for rooms within spaces, enhancing user experience during space navigation.
- Added state management for tracking joining progress of rooms in spaces.

src/app/features/lobby/Lobby.tsx

@@ -56,6 +56,7 @@ import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+import { joiningProgressAtom } from '../../state/joiningProgress';
 
 const useCanDropLobbyItem = (
   space: Room,
@@ -158,6 +159,8 @@ export function Lobby() {
   const spacePowerLevels = usePowerLevels(space);
   const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
   const members = useRoomMembers(mx, space.roomId);
+  const joiningProgress = useAtomValue(joiningProgressAtom);
+  const currentJoiningProgress = joiningProgress.get(space.roomId);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const heroSectionRef = useRef<HTMLDivElement>(null);
@@ -530,6 +533,33 @@ export function Lobby() {
                       </Chip>
                     </Box>
                   )}
+                  {currentJoiningProgress && (
+                    <Box
+                      style={{
+                        position: 'absolute',
+                        bottom: reordering
+                          ? `calc(${config.space.S400} + 40px)`
+                          : config.space.S400,
+                        left: 0,
+                        right: 0,
+                        zIndex: 2,
+                        pointerEvents: 'none',
+                      }}
+                      justifyContent="Center"
+                    >
+                      <Chip
+                        variant="Primary"
+                        outlined
+                        radii="Pill"
+                        before={<Spinner variant="Primary" fill="Soft" size="100" />}
+                      >
+                        <Text size="L400">
+                          Joining Channels: {currentJoiningProgress.current}/
+                          {currentJoiningProgress.total}
+                        </Text>
+                      </Chip>
+                    </Box>
+                  )}
                 </PageContentCenter>
               </PageContent>
             </Scroll>