layout: hover header to show traffic light window control on macOS, closes #1645 (#1653)

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

@@ -158,6 +158,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
             )}
             {showHeader && (
               <SectionInfo
+                bookKey={bookKey}
                 section={sectionLabel}
                 showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
                 isScrolled={viewSettings.scrolled}

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

@@ -40,7 +40,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   const { appService } = useEnv();
   const headerRef = useRef<HTMLDivElement>(null);
   const {
-    isTrafficLightVisible,
+    trafficLightInFullscreen,
     setTrafficLightVisibility,
     initializeTrafficLightStore,
     initializeTrafficLightListeners,
@@ -70,12 +70,19 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
 
   useEffect(() => {
     if (!appService?.hasTrafficLight) return;
+    if (isSideBarVisible) return;
 
-    setTrafficLightVisibility(isSideBarVisible);
+    if (hoveredBookKey === bookKey && isTopLeft) {
+      setTrafficLightVisibility(true, { x: 10, y: 20 });
+    } else if (!hoveredBookKey) {
+      setTrafficLightVisibility(false);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appService, isSideBarVisible]);
+  }, [appService, isSideBarVisible, hoveredBookKey]);
 
-  const isVisible = hoveredBookKey === bookKey || isDropdownOpen;
+  const isHeaderVisible = hoveredBookKey === bookKey || isDropdownOpen;
+  const trafficLightInHeader =
+    appService?.hasTrafficLight && !trafficLightInFullscreen && !isSideBarVisible && isTopLeft;
 
   return (
     <div
@@ -93,7 +100,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         className={clsx(
           'bg-base-100 absolute left-0 right-0 top-0 z-10',
           appService?.hasRoundedWindow && 'rounded-window-top-right',
-          isVisible ? 'visible' : 'hidden',
+          isHeaderVisible ? 'visible' : 'hidden',
         )}
         style={{
           height: systemUIVisible ? `${Math.max(gridInsets.top, statusBarHeight)}px` : '0px',
@@ -104,11 +111,11 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         className={clsx(
           `header-bar bg-base-100 absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
           `shadow-xs transition-[opacity,margin-top] duration-300`,
-          isTrafficLightVisible && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
+          trafficLightInHeader ? 'pl-20' : 'pl-4',
           appService?.hasRoundedWindow && 'rounded-window-top-right',
           !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-top-left',
           isHoveredAnim && 'hover-bar-anim',
-          isVisible ? 'pointer-events-auto visible' : 'pointer-events-none opacity-0',
+          isHeaderVisible ? 'pointer-events-auto visible' : 'pointer-events-none opacity-0',
           isDropdownOpen && 'header-bar-pinned',
         )}
         style={{
@@ -148,10 +155,14 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
             className='window-buttons flex h-full items-center'
             headerRef={headerRef}
             showMinimize={
-              bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
+              bookKeys.length == 1 &&
+              !appService?.hasTrafficLight &&
+              appService?.appPlatform !== 'web'
             }
             showMaximize={
-              bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
+              bookKeys.length == 1 &&
+              !appService?.hasTrafficLight &&
+              appService?.appPlatform !== 'web'
             }
             onClose={() => {
               setHoveredBookKey(null);

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

@@ -3,8 +3,10 @@ import React from 'react';
 import { Insets } from '@/types/misc';
 import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
+import { useReaderStore } from '@/store/readerStore';
 
 interface SectionInfoProps {
+  bookKey: string;
   section?: string;
   showDoubleBorder: boolean;
   isScrolled: boolean;
@@ -15,6 +17,7 @@ interface SectionInfoProps {
 }
 
 const SectionInfo: React.FC<SectionInfoProps> = ({
+  bookKey,
   section,
   showDoubleBorder,
   isScrolled,
@@ -24,6 +27,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
   gridInsets,
 }) => {
   const { appService } = useEnv();
+  const { hoveredBookKey } = useReaderStore();
   const { systemUIVisible, statusBarHeight } = useThemeStore();
   const topInset = Math.max(
     gridInsets.top,
@@ -68,6 +72,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
           className={clsx(
             'text-neutral-content text-center font-sans text-xs font-light',
             isVertical ? '' : 'line-clamp-1',
+            !isVertical && hoveredBookKey == bookKey && 'hidden',
           )}
         >
           {section || ''}