From 13bd5d49b44520d3592568c7cb1e8f9836e22ce8 Mon Sep 17 00:00:00 2001
From: Alan Trebugeais <alan.trebugeais@epitech.eu>
Date: Thu, 7 May 2026 13:15:34 +0200
Subject: [PATCH] fix: popovers issue with mouse passthrough fix: issues with
 HUD bar not registering clicks properly

---
 src/App.tsx                                   |  1 +
 src/components/launch/LaunchWindow.tsx        | 29 +++++++++-------
 src/components/launch/SourceSelector.tsx      |  2 +-
 .../launch/contexts/HudInteractionContext.tsx | 16 +++++++++
 .../hooks/useLaunchHudInteractionState.ts     | 33 ++++++++++++++++---
 .../launch/popovers/PopoverScaffold.tsx       |  4 +--
 6 files changed, 67 insertions(+), 18 deletions(-)
 create mode 100644 src/components/launch/contexts/HudInteractionContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8c590dca..6b779430 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,6 +36,7 @@ export default function App() {
 			document.documentElement.classList.add("hud-overlay-window");
 			document.body.classList.add("hud-overlay-window");
 			document.getElementById("root")?.classList.add("hud-overlay-window");
+			window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
 		} else if (type === "update-toast") {
 			document.documentElement.style.overflow = "visible";
 			document.body.style.overflow = "visible";
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 28eb2bb7..38e672db 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -33,6 +33,7 @@ import { MicPopover } from "./popovers/MicPopover";
 import { MorePopover } from "./popovers/MorePopover";
 import { SourcePopover } from "./popovers/SourcePopover";
 import { WebcamPopover } from "./popovers/WebcamPopover";
+import { HudInteractionContext } from "./contexts/HudInteractionContext";
 import { MarqueeText } from "./SourceSelector";
 import styles from "./LaunchWindow.module.css";
 
@@ -173,7 +174,7 @@ function LaunchWindowContent() {
 		recordingWebcamPreviewContainerRef,
 	});
 
-	const { handleHudMouseLeave, beginInteractiveHudAction } = useLaunchHudInteractionState({
+	const { handleHudMouseEnter, handleHudMouseLeave, beginInteractiveHudAction } = useLaunchHudInteractionState({
 		openId,
 		projectBrowserOpen,
 		setProjectBrowserOpen,
@@ -428,17 +429,20 @@ function LaunchWindowContent() {
 	const hudMode = finalizing ? "finalizing" : recording ? "recording" : "idle";
 
 	return (
-		<div
-			className="w-full flex justify-center bg-transparent overflow-visible items-end pb-5"
-			style={{ height: "100vh" }}
-		>
+		<HudInteractionContext.Provider value={{ onMouseEnter: handleHudMouseEnter, onMouseLeave: handleHudMouseLeave }}>
+			<div
+				className="w-full flex justify-center bg-transparent overflow-visible items-end pb-5 pointer-events-none"
+				style={{ height: "100vh" }}
+			>
 			<div
 				ref={hudContentRef}
-				className="flex items-center overflow-visible flex-col-reverse"
-				onMouseEnter={() => window.electronAPI?.hudOverlaySetIgnoreMouse?.(false)}
-				onMouseLeave={handleHudMouseLeave}
+				className="flex items-center overflow-visible flex-col-reverse pointer-events-none"
 			>
-				<div className="flex flex-col items-center pointer-events-auto">
+				<div
+					className="flex flex-col items-center pointer-events-auto"
+					onMouseEnter={handleHudMouseEnter}
+					onMouseLeave={handleHudMouseLeave}
+				>
 					<div
 						ref={hudBarTransformRef}
 						style={{
@@ -510,7 +514,7 @@ function LaunchWindowContent() {
 					{showRecordingWebcamPreview && (
 						<div
 							ref={recordingWebcamPreviewContainerRef}
-							className={`${styles.recordingWebcamPreview} ${styles.electronNoDrag}`}
+							className={`${styles.recordingWebcamPreview} ${styles.electronNoDrag} pointer-events-auto`}
 							title={t("recording.webcam")}
 							style={{
 								transform: `translate(${webcamPreviewOffset.x}px, ${webcamPreviewOffset.y}px)`,
@@ -519,6 +523,8 @@ function LaunchWindowContent() {
 							onPointerMove={handleWebcamPreviewPointerMove}
 							onPointerUp={handleWebcamPreviewPointerUp}
 							onPointerCancel={handleWebcamPreviewPointerUp}
+							onMouseEnter={handleHudMouseEnter}
+							onMouseLeave={handleHudMouseLeave}
 						>
 							<video
 								ref={setRecordingWebcamPreviewNode}
@@ -532,7 +538,7 @@ function LaunchWindowContent() {
 				</div>
 
 				{projectBrowserOpen ? (
-					<div className={styles.electronNoDrag}>
+					<div className={`${styles.electronNoDrag} pointer-events-auto`}>
 						<ProjectBrowserDialog
 							open={projectBrowserOpen}
 							onOpenChange={setProjectBrowserOpen}
@@ -546,5 +552,6 @@ function LaunchWindowContent() {
 				) : null}
 			</div>
 		</div>
+		</HudInteractionContext.Provider>
 	);
 }
diff --git a/src/components/launch/SourceSelector.tsx b/src/components/launch/SourceSelector.tsx
index 4e89916c..bd4e95ec 100644
--- a/src/components/launch/SourceSelector.tsx
+++ b/src/components/launch/SourceSelector.tsx
@@ -342,7 +342,7 @@ export const SourceSelector = React.memo(function SourceSelector({
 	);
 
 	return (
-		<Popover open={open} onOpenChange={onOpenChange}>
+		<Popover open={open} onOpenChange={onOpenChange} modal={false}>
 			<PopoverTrigger asChild>{trigger}</PopoverTrigger>
 			<PopoverContent
 				className="launch-theme w-80 p-0 source-selector-popover"
diff --git a/src/components/launch/contexts/HudInteractionContext.tsx b/src/components/launch/contexts/HudInteractionContext.tsx
new file mode 100644
index 00000000..65a1accb
--- /dev/null
+++ b/src/components/launch/contexts/HudInteractionContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+
+interface HudInteractionContextType {
+	onMouseEnter: () => void;
+	onMouseLeave: (event: any) => void;
+}
+
+export const HudInteractionContext = createContext<HudInteractionContextType | null>(null);
+
+export function useHudInteraction() {
+	const context = useContext(HudInteractionContext);
+	if (!context) {
+		throw new Error("useHudInteraction must be used within a HudInteractionProvider");
+	}
+	return context;
+}
diff --git a/src/components/launch/hooks/useLaunchHudInteractionState.ts b/src/components/launch/hooks/useLaunchHudInteractionState.ts
index 3d3f427c..ed6d9269 100644
--- a/src/components/launch/hooks/useLaunchHudInteractionState.ts
+++ b/src/components/launch/hooks/useLaunchHudInteractionState.ts
@@ -17,9 +17,18 @@ export function useLaunchHudInteractionState({
 }) {
 	const anyPopoverOpenRef = useRef(false);
 	const projectBrowserOpenRef = useRef(false);
+	const isMouseOverHudRef = useRef(false);
 
 	useEffect(() => {
 		anyPopoverOpenRef.current = openId !== null;
+		if (openId === null) {
+			// Proactively check if we should ignore mouse when popover closes
+			setTimeout(() => {
+				if (!isMouseOverHudRef.current && !anyPopoverOpenRef.current) {
+					window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
+				}
+			}, 150);
+		}
 	}, [openId]);
 
 	useEffect(() => {
@@ -34,29 +43,45 @@ export function useLaunchHudInteractionState({
 
 	const beginInteractiveHudAction = useCallback(() => {
 		setProjectBrowserOpen(false);
+		isMouseOverHudRef.current = true;
 		window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
 	}, [setProjectBrowserOpen]);
 
+	const handleHudMouseEnter = useCallback(() => {
+		isMouseOverHudRef.current = true;
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
+	}, []);
+
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
 	const handleHudMouseLeave = useCallback((event: MouseEvent<HTMLDivElement>) => {
 		const nextTarget = event.relatedTarget;
 		if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
 			return;
 		}
 
-		requestAnimationFrame(() => {
+		isMouseOverHudRef.current = false;
+
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+		timeoutRef.current = setTimeout(() => {
 			if (
 				!isHudDraggingRef.current &&
 				!isWebcamPreviewDraggingRef.current &&
 				!webcamPreviewDragStartRef.current &&
-				!anyPopoverOpenRef.current &&
-				!projectBrowserOpenRef.current
+				!projectBrowserOpenRef.current &&
+				!isMouseOverHudRef.current
 			) {
+				// If a popover is open, we can still ignore mouse if the mouse is truly gone,
+				// but we give a bit more breathing room (the 300ms timeout).
 				window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
 			}
-		});
+		}, 300);
 	}, [isHudDraggingRef, isWebcamPreviewDraggingRef, webcamPreviewDragStartRef]);
 
 	return {
+		handleHudMouseEnter,
 		handleHudMouseLeave,
 		beginInteractiveHudAction,
 	};
diff --git a/src/components/launch/popovers/PopoverScaffold.tsx b/src/components/launch/popovers/PopoverScaffold.tsx
index 5ea1f0db..f05a80a8 100644
--- a/src/components/launch/popovers/PopoverScaffold.tsx
+++ b/src/components/launch/popovers/PopoverScaffold.tsx
@@ -74,12 +74,12 @@ export function HudPopover({
 	align?: "start" | "center" | "end";
 }) {
 	return (
-		<Popover open={open} onOpenChange={onOpenChange}>
+		<Popover open={open} onOpenChange={onOpenChange} modal={false}>
 			<PopoverTrigger asChild>{trigger}</PopoverTrigger>
 			<PopoverContent
 				className={`launch-theme ${styles.menuCard} ${styles.electronNoDrag}`}
 				unstyled
-				side="bottom"
+				side="top"
 				align={align}
 				sideOffset={8}
 				avoidCollisions