From 47ec78973b8566964c6b273b4e1bb8622833ba1b Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 6 May 2026 13:23:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20clean=20Sonar=20?=
 =?UTF-8?q?warnings=20in=20PiP=20overlay=20primitives?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace verbose checks and nested ternaries with clearer PiP-safe logic.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../pip/components/DocumentPiPPortal.tsx      |  6 ++--
 .../src/features/pip/components/RoomPiP.tsx   |  2 +-
 .../src/features/pip/hooks/useRoomPiP.tsx     |  3 +-
 src/frontend/src/primitives/Menu.tsx          |  3 +-
 .../src/primitives/TooltipWrapper.tsx         |  7 ++--
 .../src/primitives/VisualOnlyTooltip.tsx      | 33 +++++++++----------
 6 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
index 0fba10ec..fd0e21ac 100644
--- a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
+++ b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx
@@ -33,11 +33,11 @@ const copyStyles = (source: Document, target: Document) => {
 }
 
 const syncThemeAttribute = (source: Document, target: Document) => {
-  const theme = source.documentElement.getAttribute('data-lk-theme')
+  const theme = source.documentElement.dataset.lkTheme
   if (theme) {
-    target.documentElement.setAttribute('data-lk-theme', theme)
+    target.documentElement.dataset.lkTheme = theme
   } else {
-    target.documentElement.removeAttribute('data-lk-theme')
+    delete target.documentElement.dataset.lkTheme
   }
 }
 
diff --git a/src/frontend/src/features/pip/components/RoomPiP.tsx b/src/frontend/src/features/pip/components/RoomPiP.tsx
index 1df5efec..a83ad6f6 100644
--- a/src/frontend/src/features/pip/components/RoomPiP.tsx
+++ b/src/frontend/src/features/pip/components/RoomPiP.tsx
@@ -26,5 +26,5 @@ export const RoomPiP = (): ReactNode => {
     onClose: close,
     children: <PipView />,
   })
-  return portal as ReactNode
+  return portal
 }
diff --git a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
index f4b3094f..9bb4313e 100644
--- a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
+++ b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx
@@ -5,7 +5,8 @@ import { roomPiPStore } from '@/stores/roomPiP'
 export const useRoomPiP = () => {
   const { isOpen } = useSnapshot(roomPiPStore)
   const isSupported =
-    typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis
+    typeof globalThis !== 'undefined' &&
+    'documentPictureInPicture' in globalThis
 
   const open = useCallback(() => {
     roomPiPStore.isOpen = true
diff --git a/src/frontend/src/primitives/Menu.tsx b/src/frontend/src/primitives/Menu.tsx
index e68c516a..f0fe5f59 100644
--- a/src/frontend/src/primitives/Menu.tsx
+++ b/src/frontend/src/primitives/Menu.tsx
@@ -28,8 +28,7 @@ export const Menu = ({
   // Detect if we're in PiP: portal container is in a different document than the main window
   const isInPiP = useMemo(
     () =>
-      portalContainer &&
-      portalContainer.ownerDocument &&
+      !!portalContainer?.ownerDocument &&
       portalContainer.ownerDocument !== document,
     [portalContainer]
   )
diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx
index 7e0f0f6d..0e4f252b 100644
--- a/src/frontend/src/primitives/TooltipWrapper.tsx
+++ b/src/frontend/src/primitives/TooltipWrapper.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react'
+import { type ReactElement, type ReactNode } from 'react'
 import {
   OverlayArrow,
   Tooltip as RACTooltip,
@@ -27,11 +27,12 @@ export const TooltipWrapper = ({
   tooltipType,
   children,
 }: {
-  children: ReactNode
+  children: ReactElement
 } & TooltipWrapperProps) => {
   const portalContainer = useOverlayPortalContainer()
   const isExternalDocument =
-    portalContainer && portalContainer.ownerDocument !== document
+    !!portalContainer?.ownerDocument &&
+    portalContainer.ownerDocument !== document
 
   return tooltip ? (
     isExternalDocument ? (
diff --git a/src/frontend/src/primitives/VisualOnlyTooltip.tsx b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
index 9789637c..d90f6ae6 100644
--- a/src/frontend/src/primitives/VisualOnlyTooltip.tsx
+++ b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
@@ -113,6 +113,20 @@ export const VisualOnlyTooltip = ({
       })
     : children
 
+  const translateY = effectiveBottom ? 'translateY(0)' : 'translateY(-100%)'
+  const translateXY = effectiveBottom
+    ? 'translate(-50%, 0)'
+    : 'translate(-50%, -100%)'
+
+  const tooltipInlineStyle: React.CSSProperties & Record<string, string> = {
+    top: `${position?.top}px`,
+    left: computedStyle ? `${computedStyle.left}px` : `${position?.left}px`,
+    transform: computedStyle ? translateY : translateXY,
+    ...(computedStyle
+      ? { '--tooltip-arrow-left': `${computedStyle.arrowLeft}px` }
+      : null),
+  }
+
   return (
     <>
       <div
@@ -160,24 +174,7 @@ export const VisualOnlyTooltip = ({
                     }),
               },
             })}
-            style={{
-              top: `${position.top}px`,
-              left: computedStyle
-                ? `${computedStyle.left}px`
-                : `${position.left}px`,
-              transform: computedStyle
-                ? effectiveBottom
-                  ? 'translateY(0)'
-                  : 'translateY(-100%)'
-                : effectiveBottom
-                  ? 'translate(-50%, 0)'
-                  : 'translate(-50%, -100%)',
-              ...(computedStyle
-                ? {
-                    '--tooltip-arrow-left': `${computedStyle.arrowLeft}px`,
-                  }
-                : null),
-            }}
+            style={tooltipInlineStyle}
           >
             {tooltip}
           </div>,