✨(frontend) introduce basic document picture-in-picture hook

Add a hook that manages the logic needed to open a document
picture-in-picture window, stores a ref to the window in a global
store, and—once ready—mounts a portal to duplicate content into
the PiP document's container.

Mounting the PiP content via a portal lets us share the same React
tree as the main app, and therefore share application state. This
comes with some trade-offs, particularly around components that
rely on the DOM hierarchy: react-aria popovers and overlays may
not behave correctly across documents.

The logic is kept to a minimum here. This first commit does nothing
more than open a window containing a loading spinner. The topic is
new to us, so plenty is likely to be refined in follow-ups.

Co-authored-by: Cyril <c.gromoff@gmail.com>

src/frontend/src/features/rooms/components/Conference.tsx

@@ -32,6 +32,8 @@ import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
 import { navigateTo } from '@/navigation/navigateTo'
 import { connectionObserverStore } from '@/stores/connectionObserver'
+import { PictureInPicturePortal } from '@/features/pip/components/PictureInPicturePortal'
+import { Spinner } from '@/primitives/Spinner'
 
 export const Conference = ({
   roomId,
@@ -291,6 +293,9 @@ export const Conference = ({
             {...mediaDeviceError}
             onClose={() => setMediaDeviceError({ error: null, kind: null })}
           />
+          <PictureInPicturePortal>
+            <Spinner />
+          </PictureInPicturePortal>
         </LiveKitRoom>
       </Screen>
     </QueryAware>