Refactor layout accommodation using traffic light status

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

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 import { useReaderStore } from '@/store/readerStore';
-import useFullScreen from '@/hooks/useFullScreen';
+import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SidebarToggler from './SidebarToggler';
@@ -29,7 +29,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   onSetSettingsDialogOpen,
 }) => {
   const headerRef = useRef<HTMLDivElement>(null);
-  const { isFullScreen } = useFullScreen();
+  const { isTrafficLightVisible } = useTrafficLight();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { hoveredBookKey, isSideBarVisible, setHoveredBookKey } = useReaderStore();
 
@@ -43,7 +43,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       ref={headerRef}
       className={clsx(
         `header-bar absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
-        !isFullScreen && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
+        isTrafficLightVisible && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
         `shadow-xs bg-base-100 rounded-window-top-right transition-opacity duration-300`,
         !isSideBarVisible && 'rounded-window-top-left',
         isHoveredAnim && 'hover-bar-anim',

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

@@ -1,7 +1,9 @@
-import { useReaderStore } from '@/store/readerStore';
 import clsx from 'clsx';
 import React from 'react';
 
+import { useReaderStore } from '@/store/readerStore';
+import useTrafficLight from '@/hooks/useTrafficLight';
+
 interface SectionInfoProps {
   chapter?: string;
   gapLeft: string;
@@ -9,11 +11,12 @@ interface SectionInfoProps {
 
 const SectionInfo: React.FC<SectionInfoProps> = ({ chapter, gapLeft }) => {
   const { isSideBarVisible } = useReaderStore();
+  const { isTrafficLightVisible } = useTrafficLight();
   return (
     <div
       className={clsx(
         'pageinfo absolute right-0 top-0 flex items-end',
-        isSideBarVisible ? 'h-[30px]' : 'h-[44px]',
+        isTrafficLightVisible && !isSideBarVisible ? 'h-[44px]' : 'h-[30px]',
       )}
       style={{ left: gapLeft }}
     >

apps/readest-app/src/app/reader/components/sidebar/Header.tsx

@@ -4,7 +4,7 @@ import { GiBookshelf } from 'react-icons/gi';
 import { FiSearch } from 'react-icons/fi';
 import { MdOutlineMenu, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
 
-import useFullScreen from '@/hooks/useFullScreen';
+import useTrafficLight from '@/hooks/useTrafficLight';
 import Dropdown from '@/components/Dropdown';
 import BookMenu from './BookMenu';
 
@@ -14,12 +14,12 @@ const SidebarHeader: React.FC<{
   onOpenSplitView: () => void;
   handleTogglePin: () => void;
 }> = ({ isPinned, onGoToLibrary, onOpenSplitView, handleTogglePin }) => {
-  const { isFullScreen } = useFullScreen();
+  const { isTrafficLightVisible } = useTrafficLight();
   return (
     <div
       className={clsx(
         'sidebar-header flex h-11 items-center justify-between pr-2',
-        isFullScreen ? 'pl-1.5' : 'pl-20',
+        isTrafficLightVisible ? 'pl-20' : 'pl-1.5',
       )}
     >
       <div className='flex items-center'>