Get rid of private API on macos

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -1,8 +1,11 @@
+import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
 import { PiSelectionAllDuotone } from 'react-icons/pi';
 
+import { useEnv } from '@/context/EnvContext';
+import useFullScreen from '@/hooks/useFullScreen';
 import WindowButtons from '@/components/WindowButtons';
 
 interface LibraryHeaderProps {
@@ -16,7 +19,10 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   onImportBooks,
   onToggleSelectMode,
 }) => {
+  const { appService } = useEnv();
+  const { isFullScreen } = useFullScreen();
   const headerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey || e.shiftKey) {
@@ -45,10 +51,16 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   };
 
   return (
-    <div ref={headerRef} className='titlebar fixed top-2 z-10 w-full bg-gray-100 px-6 py-4'>
+    <div
+      ref={headerRef}
+      className={clsx(
+        'titlebar fixed z-10 w-full bg-gray-100 py-2 pr-6',
+        isFullScreen ? 'pl-2' : 'pl-16',
+      )}
+    >
       <div className='flex items-center justify-between'>
-        <div className='sm:w relative flex w-full items-center'>
-          <span className='absolute left-4 text-gray-500'>
+        <div className='sm:w relative flex w-full items-center pl-4'>
+          <span className='absolute left-8 text-gray-500'>
             <FaSearch className='h-4 w-4' />
           </span>
           <input
@@ -81,12 +93,14 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             </button>
           </div>
         </div>
-        <WindowButtons
-          headerRef={headerRef}
-          onMinimize={handleMinimize}
-          onToggleMaximize={handleToggleMaximize}
-          onClose={handleClose}
-        />
+        {!appService?.isNativeWindow && (
+          <WindowButtons
+            headerRef={headerRef}
+            onMinimize={handleMinimize}
+            onToggleMaximize={handleToggleMaximize}
+            onClose={handleClose}
+          />
+        )}
       </div>
     </div>
   );

apps/readest-app/src/app/library/page.tsx

@@ -72,6 +72,10 @@ const LibraryPage = () => {
     setIsSelectMode(!isSelectMode);
   };
 
+  if (!appService) {
+    return <Spinner loading />;
+  }
+
   return (
     <div className='rounded-window min-h-screen select-none bg-gray-100'>
       <LibraryHeader

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

@@ -1,8 +1,10 @@
+import clsx from 'clsx';
 import React from 'react';
 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 Dropdown from '@/components/Dropdown';
 import BookMenu from './BookMenu';
 
@@ -11,32 +13,40 @@ const SidebarHeader: React.FC<{
   onGoToLibrary: () => void;
   onOpenSplitView: () => void;
   handleTogglePin: () => void;
-}> = ({ isPinned, onGoToLibrary, onOpenSplitView, handleTogglePin }) => (
-  <div className='sidebar-header flex h-11 items-center justify-between pl-1.5 pr-3'>
-    <div className='flex items-center'>
-      <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
-        <GiBookshelf size={20} className='fill-base-content' />
-      </button>
+}> = ({ isPinned, onGoToLibrary, onOpenSplitView, handleTogglePin }) => {
+  const { isFullScreen } = useFullScreen();
+  return (
+    <div
+      className={clsx(
+        'sidebar-header flex h-11 items-center justify-between pr-3',
+        isFullScreen ? 'pl-1.5' : 'pl-20',
+      )}
+    >
+      <div className='flex items-center'>
+        <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
+          <GiBookshelf size={20} className='fill-base-content' />
+        </button>
+      </div>
+      <div className='flex size-[50%] min-w-20 items-center justify-between'>
+        <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
+          <FiSearch size={18} />
+        </button>
+        <Dropdown
+          className='dropdown-bottom flex justify-center'
+          buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+          toggleButton={<MdOutlineMenu size={20} />}
+        >
+          <BookMenu openSplitView={onOpenSplitView} />
+        </Dropdown>
+        <button
+          onClick={handleTogglePin}
+          className={`${isPinned ? 'bg-gray-300' : 'bg-base-300'} btn btn-ghost btn-circle right-0 h-6 min-h-6 w-6`}
+        >
+          {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
+        </button>
+      </div>
     </div>
-    <div className='flex size-[50%] min-w-20 items-center justify-between'>
-      <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
-        <FiSearch size={18} />
-      </button>
-      <Dropdown
-        className='dropdown-bottom flex justify-center'
-        buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-        toggleButton={<MdOutlineMenu size={20} />}
-      >
-        <BookMenu openSplitView={onOpenSplitView} />
-      </Dropdown>
-      <button
-        onClick={handleTogglePin}
-        className={`${isPinned ? 'bg-gray-300' : 'bg-base-300'} btn btn-ghost btn-circle right-0 h-6 min-h-6 w-6`}
-      >
-        {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
-      </button>
-    </div>
-  </div>
-);
+  );
+};
 
 export default SidebarHeader;

apps/readest-app/src/hooks/useFullScreen.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const useFullScreen = () => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
+  const handleSwitchFullScreen = async () => {
+    const { getCurrentWindow } = await import('@tauri-apps/api/window');
+    const currentWindow = getCurrentWindow();
+    currentWindow.listen('will-enter-fullscreen', () => {
+      console.log('Window entered fullscreen');
+      setIsFullScreen(true);
+    });
+
+    currentWindow.listen('will-exit-fullscreen', () => {
+      console.log('Window exited fullscreen');
+      setIsFullScreen(false);
+    });
+  };
+
+  useEffect(() => {
+    handleSwitchFullScreen();
+  }, []);
+
+  return { isFullScreen };
+};
+
+export default useFullScreen;

apps/readest-app/src/services/appService.ts

@@ -26,6 +26,7 @@ import {
 export abstract class BaseAppService implements AppService {
   localBooksDir: string = '';
   abstract isAppDataSandbox: boolean;
+  abstract isNativeWindow: boolean;
   abstract fs: FileSystem;
 
   abstract resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string };

apps/readest-app/src/services/nativeAppService.ts

@@ -115,6 +115,7 @@ export const nativeFileSystem: FileSystem = {
 export class NativeAppService extends BaseAppService {
   fs = nativeFileSystem;
   isAppDataSandbox = isMobile;
+  isNativeWindow = osType() === 'macos';
 
   override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
     return resolvePath(fp, base);

apps/readest-app/src/types/system.ts

@@ -18,6 +18,8 @@ export interface FileSystem {
 
 export interface AppService {
   fs: FileSystem;
+  isNativeWindow: boolean;
+  isAppDataSandbox: boolean;
 
   selectDirectory(title: string): Promise<string>;
   selectFiles(name: string, extensions: string[]): Promise<string[]>;