fix(macOS): fix traffic lights position and visibility on macOS, closes #3129 (#3130)

apps/readest-app/src/app/reader/components/HeaderBar.tsx

@@ -92,10 +92,12 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
     if (hoveredBookKey === bookKey && isTopLeft) {
       setTrafficLightVisibility(true, { x: 10, y: 20 });
     } else if (!hoveredBookKey) {
-      setTrafficLightVisibility(false);
+      setTimeout(() => {
+        setTrafficLightVisibility(false);
+      }, 200);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appService, isSideBarVisible, hoveredBookKey]);
+  }, [appService, isSideBarVisible, hoveredBookKey, isTrafficLightVisible]);
 
   // Check if mouse is outside header area to avoid false positive event of MouseLeave when clicking inside header on Windows
   const isMouseOutsideHeader = useCallback((clientX: number, clientY: number) => {

apps/readest-app/src/store/trafficLightStore.ts

@@ -53,9 +53,15 @@ export const useTrafficLightStore = create<TrafficLightState>((set, get) => {
       const { getCurrentWindow } = await import('@tauri-apps/api/window');
       const currentWindow = getCurrentWindow();
 
-      const unlistenEnterFullScreen = await currentWindow.listen('will-enter-fullscreen', () => {
-        set({ isTrafficLightVisible: false, trafficLightInFullscreen: true });
-      });
+      const unlistenEnterFullScreen = await currentWindow.listen(
+        'will-enter-fullscreen',
+        async () => {
+          const fullscreen = await currentWindow.isFullscreen();
+          if (fullscreen) {
+            set({ isTrafficLightVisible: false, trafficLightInFullscreen: true });
+          }
+        },
+      );
 
       const unlistenExitFullScreen = await currentWindow.listen('will-exit-fullscreen', () => {
         const { shouldShowTrafficLight } = get();