From 323a998721ce03653585db91de2697e4f7d00e08 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 29 Apr 2026 14:28:17 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20address=20Sonar?=
 =?UTF-8?q?=20warnings=20in=20PiP=20and=20side=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace nested ternary logic, use globalThis instead of window, and switch side-panel enum re-exports to export-from for clearer and safer patterns.

Made-with: Cursor
---
 .../src/features/pip/components/DocumentPiPPortal.tsx |  2 ++
 .../notifications/PipConnectionStateToast.tsx         | 11 +++++------
 src/frontend/src/features/pip/hooks/useDocumentPiP.ts |  7 ++++---
 .../src/features/pip/hooks/usePipElementSize.ts       |  2 +-
 src/frontend/src/features/pip/hooks/useRoomPiP.tsx    |  2 +-
 .../src/features/rooms/livekit/hooks/useSidePanel.ts  |  2 +-
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
index 793e18fd..0fba10ec 100644
--- a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
+++ b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
@@ -36,6 +36,8 @@ const syncThemeAttribute = (source: Document, target: Document) => {
   const theme = source.documentElement.getAttribute('data-lk-theme')
   if (theme) {
     target.documentElement.setAttribute('data-lk-theme', theme)
+  } else {
+    target.documentElement.removeAttribute('data-lk-theme')
   }
 }
 
diff --git a/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx b/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx
index 9067c906..05a9cc54 100644
--- a/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx
+++ b/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx
@@ -16,12 +16,11 @@ export const PipConnectionStateToast = () => {
     keyPrefix: 'options.items.pictureInPicture.connection',
   })
 
-  const label =
-    state === ConnectionState.Reconnecting
-      ? t('reconnecting')
-      : state === ConnectionState.Disconnected
-        ? t('disconnected')
-        : null
+  const connectionLabels: Partial<Record<ConnectionState, string>> = {
+    [ConnectionState.Reconnecting]: t('reconnecting'),
+    [ConnectionState.Disconnected]: t('disconnected'),
+  }
+  const label = connectionLabels[state] ?? null
 
   if (!label) return null
 
diff --git a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts
index fabead4b..e349a262 100644
--- a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts
+++ b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts
@@ -23,8 +23,8 @@ export const useDocumentPiP = ({
   const pendingPiPRef = useRef<Promise<Window | null> | null>(null)
 
   const [isSupported] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return 'documentPictureInPicture' in window
+    if (typeof globalThis === 'undefined') return false
+    return 'documentPictureInPicture' in globalThis
   })
 
   const openPiP = useCallback(async () => {
@@ -35,7 +35,8 @@ export const useDocumentPiP = ({
     if (pendingPiPRef.current) return pendingPiPRef.current
 
     // Request a new PiP window from the browser API.
-    const pip = (window as WindowWithDocumentPiP).documentPictureInPicture
+    const pip = (globalThis as unknown as WindowWithDocumentPiP)
+      .documentPictureInPicture
     if (!pip) return null
 
     const requestPromise = (async () => {
diff --git a/src/frontend/src/features/pip/hooks/usePipElementSize.ts b/src/frontend/src/features/pip/hooks/usePipElementSize.ts
index 7008085c..f37042de 100644
--- a/src/frontend/src/features/pip/hooks/usePipElementSize.ts
+++ b/src/frontend/src/features/pip/hooks/usePipElementSize.ts
@@ -25,7 +25,7 @@ export const usePipElementSize = <T extends HTMLElement>(
     measure()
 
     const RO =
-      el.ownerDocument.defaultView?.ResizeObserver ?? window.ResizeObserver
+      el.ownerDocument.defaultView?.ResizeObserver ?? globalThis.ResizeObserver
     if (!RO) return
 
     const observer = new RO((entries) => {
diff --git a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
index 75880a37..f4b3094f 100644
--- a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
+++ b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
@@ -5,7 +5,7 @@ import { roomPiPStore } from '@/stores/roomPiP'
 export const useRoomPiP = () => {
   const { isOpen } = useSnapshot(roomPiPStore)
   const isSupported =
-    typeof window !== 'undefined' && 'documentPictureInPicture' in window
+    typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis
 
   const open = useCallback(() => {
     roomPiPStore.isOpen = true
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
index c4bebb8f..8d1203bd 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
@@ -2,7 +2,7 @@ import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 import { PanelId, SubPanelId } from '../types/panel'
 
-export { PanelId, SubPanelId }
+export { PanelId, SubPanelId } from '../types/panel'
 
 export type SidePanelStore = {
   activePanelId: PanelId | null