From 7c9fc15359aab8f5465a65c8295faf0cad724314 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 3 Apr 2025 22:50:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20delay=20tooltip=20appe?=
 =?UTF-8?q?arance=20in=20lateral=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve UX by adding a delay before showing tooltips in the lateral menu.
Users often hover from bottom to top, causing tooltips to overlap other
options too quickly.
---
 .../livekit/prefabs/ControlBar/MoreOptions.tsx  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
index 78519658..45395ebe 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
@@ -14,13 +14,16 @@ import { useTranslation } from 'react-i18next'
 
 const CONTROL_BAR_BREAKPOINT = 1100
 
-const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
+const NavigationControls = ({
+  onPress,
+  tooltipType = 'instant',
+}: Partial<ToggleButtonProps>) => (
   <>
-    <ChatToggle onPress={onPress} />
-    <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
-    <SupportToggle onPress={onPress} />
-    <AdminToggle onPress={onPress} />
+    <ChatToggle onPress={onPress} tooltipType={tooltipType} />
+    <ParticipantsToggle onPress={onPress} tooltipType={tooltipType} />
+    <TranscriptToggle onPress={onPress} tooltipType={tooltipType} />
+    <SupportToggle onPress={onPress} tooltipType={tooltipType} />
+    <AdminToggle onPress={onPress} tooltipType={tooltipType} />
   </>
 )
 
@@ -55,7 +58,7 @@ export const LateralMenu = () => {
             gap: '0.5rem',
           })}
         >
-          <NavigationControls onPress={handleClose} />
+          <NavigationControls onPress={handleClose} tooltipType="delayed" />
         </Dialog>
       </Popover>
     </DialogTrigger>