From 835ed443a50fdfeb84f7a782cf027313e19c0775 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 26 Mar 2025 01:58:23 +0800
Subject: [PATCH] fix: style tweaks for Windows (#707)

---
 apps/readest-app/src-tauri/src/lib.rs         | 18 ++++++++-
 apps/readest-app/src/app/auth/page.tsx        | 37 +++++++++++++------
 .../app/library/components/LibraryHeader.tsx  |  2 +-
 .../app/library/components/SettingsMenu.tsx   |  4 +-
 apps/readest-app/src/app/library/page.tsx     |  2 +-
 .../src/app/reader/components/ViewMenu.tsx    |  4 +-
 apps/readest-app/src/app/user/page.tsx        | 33 ++++++++++++-----
 apps/readest-app/src/components/Toast.tsx     |  4 +-
 apps/readest-app/src/services/appService.ts   |  1 +
 .../src/services/nativeAppService.ts          |  9 ++++-
 .../readest-app/src/services/webAppService.ts |  1 +
 apps/readest-app/src/styles/globals.css       |  2 +-
 apps/readest-app/src/types/system.ts          |  1 +
 13 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/apps/readest-app/src-tauri/src/lib.rs b/apps/readest-app/src-tauri/src/lib.rs
index 4db66df2..1b12ecbf 100644
--- a/apps/readest-app/src-tauri/src/lib.rs
+++ b/apps/readest-app/src-tauri/src/lib.rs
@@ -63,6 +63,15 @@ fn set_window_open_with_files(app: &AppHandle, files: Vec<PathBuf>) {
     }
 }
 
+#[cfg(desktop)]
+fn set_rounded_window(app: &AppHandle, rounded: bool) {
+    let window = app.get_webview_window("main").unwrap();
+    let script = format!("window.IS_ROUNDED = {};", rounded);
+    if let Err(e) = window.eval(&script) {
+        eprintln!("Failed to set IS_ROUNDED variable: {}", e);
+    }
+}
+
 #[command]
 async fn start_server(window: Window) -> Result<u16, String> {
     start(move |url| {
@@ -185,6 +194,12 @@ pub fn run() {
                     app_handle.get_webview_window("main").unwrap()
                         .eval("window.__READEST_CLI_ACCESS = true; window.__READEST_UPDATER_ACCESS = true;")
                         .expect("Failed to set cli access config");
+
+                    set_rounded_window(&app_handle, true);
+                    #[cfg(target_os = "windows")]
+                    if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
+                        set_rounded_window(&app_handle, false);
+                    }
                 });
             }
 
@@ -225,8 +240,7 @@ pub fn run() {
                     .title("Readest");
 
                 if cfg!(target_os = "windows") {
-                    let version = tauri_plugin_os::version();
-                    if version <= tauri_plugin_os::Version::from_string("10.0.19045") {
+                    if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
                         win_builder = win_builder.shadow(false);
                     } else {
                         win_builder = win_builder.shadow(true);
diff --git a/apps/readest-app/src/app/auth/page.tsx b/apps/readest-app/src/app/auth/page.tsx
index c9696fd3..90ac992e 100644
--- a/apps/readest-app/src/app/auth/page.tsx
+++ b/apps/readest-app/src/app/auth/page.tsx
@@ -23,6 +23,7 @@ import { openUrl } from '@tauri-apps/plugin-opener';
 import { handleAuthCallback } from '@/helpers/auth';
 import { getAppleIdAuth, Scope } from './utils/appleIdAuth';
 import { authWithSafari } from './utils/safariAuth';
+import WindowButtons from '@/components/WindowButtons';
 
 type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
 
@@ -47,11 +48,11 @@ const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Ic
       onClick={() => handleSignIn(provider)}
       className={clsx(
         'mb-2 flex w-64 items-center justify-center rounded border p-2.5',
-        'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
+        'bg-base-100 border-base-300 hover:bg-base-200 shadow-sm transition',
       )}
     >
       <Icon />
-      <span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
+      <span className='text-base-content/75 px-2 text-sm'>{label}</span>
     </button>
   );
 };
@@ -67,6 +68,8 @@ export default function AuthPage() {
   const isOAuthServerRunning = useRef(false);
   const [isMounted, setIsMounted] = useState(false);
 
+  const headerRef = useRef<HTMLDivElement>(null);
+
   const getTauriRedirectTo = (isOAuth: boolean) => {
     if (process.env.NODE_ENV === 'production' || appService?.isMobile) {
       if (appService?.isIOSApp) {
@@ -298,21 +301,31 @@ export default function AuthPage() {
   return isTauriAppPlatform() ? (
     <div
       className={clsx(
-        'mt-6 flex',
+        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
-        appService?.hasTrafficLight && 'pt-11',
       )}
     >
-      <button
-        onClick={handleGoBack}
+      <div
+        ref={headerRef}
         className={clsx(
-          'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
-          appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
-          appService?.hasTrafficLight && 'top-11',
+          'flex w-full items-center justify-between py-2 pe-6 ps-4',
+          appService?.hasTrafficLight && 'pt-11',
         )}
       >
-        <IoArrowBack className='text-base-content' />
-      </button>
+        <button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
+          <IoArrowBack className='text-base-content' />
+        </button>
+
+        {appService?.hasWindowBar && (
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={appService?.hasWindowBar}
+            showMaximize={appService?.hasWindowBar}
+            showClose={appService?.hasWindowBar}
+            onClose={handleGoBack}
+          />
+        )}
+      </div>
       <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
         <ProviderLogin
           provider='google'
@@ -332,7 +345,7 @@ export default function AuthPage() {
           Icon={FaGithub}
           label={_('Sign in with GitHub')}
         />
-        <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
+        <hr className='border-base-300 my-3 mt-6 w-64 border-t' />
         <Auth
           supabaseClient={supabase}
           appearance={{ theme: ThemeSupa }}
diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
index 404fb233..7d6e16c5 100644
--- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx
+++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
@@ -68,7 +68,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     <div
       ref={headerRef}
       className={clsx(
-        'titlebar h-13 z-10 flex w-full items-center py-2 pr-4 sm:pr-6',
+        'titlebar z-10 flex w-full items-center py-2 pr-4 sm:pr-6',
         appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
         isTrafficLightVisible ? 'pl-16' : 'pl-0 sm:pl-2',
       )}
diff --git a/apps/readest-app/src/app/library/components/SettingsMenu.tsx b/apps/readest-app/src/app/library/components/SettingsMenu.tsx
index f7da7eb0..4069ffb9 100644
--- a/apps/readest-app/src/app/library/components/SettingsMenu.tsx
+++ b/apps/readest-app/src/app/library/components/SettingsMenu.tsx
@@ -163,9 +163,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
         onClick={toggleScreenWakeLock}
       />
       <hr className='border-base-200 my-1' />
-      {appService?.hasRoundedWindow && (
-        <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
-      )}
+      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
       {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index 87250dff..0396240d 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -508,7 +508,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
           <div
             ref={containerRef}
             className={clsx(
-              'scroll-container drop-zone mt-12 flex-grow overflow-auto px-4 sm:px-2',
+              'scroll-container drop-zone mt-12 flex-grow overflow-y-auto px-4 sm:px-2',
               appService?.hasSafeAreaInset && 'mt-[calc(48px+env(safe-area-inset-top))]',
               appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom))]',
               isDragging && 'drag-over',
diff --git a/apps/readest-app/src/app/reader/components/ViewMenu.tsx b/apps/readest-app/src/app/reader/components/ViewMenu.tsx
index 10aa1df1..608b1948 100644
--- a/apps/readest-app/src/app/reader/components/ViewMenu.tsx
+++ b/apps/readest-app/src/app/reader/components/ViewMenu.tsx
@@ -132,9 +132,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
 
       <hr className='border-base-300 my-1' />
 
-      {appService?.hasRoundedWindow && (
-        <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
-      )}
+      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
       <MenuItem
         label={
           themeMode === 'dark'
diff --git a/apps/readest-app/src/app/user/page.tsx b/apps/readest-app/src/app/user/page.tsx
index 8e4f479d..8c21dd7b 100644
--- a/apps/readest-app/src/app/user/page.tsx
+++ b/apps/readest-app/src/app/user/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { IoArrowBack } from 'react-icons/io5';
@@ -17,6 +17,7 @@ import { navigateToLibrary } from '@/utils/nav';
 import { deleteUser } from '@/libs/user';
 import { eventDispatcher } from '@/utils/event';
 import { Toast } from '@/components/Toast';
+import WindowButtons from '@/components/WindowButtons';
 import Quota from '@/components/Quota';
 
 const ProfilePage = () => {
@@ -29,6 +30,8 @@ const ProfilePage = () => {
   const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
 
+  const headerRef = useRef<HTMLDivElement>(null);
+
   useTheme();
 
   useEffect(() => {
@@ -154,21 +157,31 @@ const ProfilePage = () => {
   return (
     <div
       className={clsx(
-        'mt-6 flex justify-center',
+        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
-        appService?.hasTrafficLight && 'pt-11',
       )}
     >
-      <button
-        onClick={handleGoBack}
+      <div
+        ref={headerRef}
         className={clsx(
-          'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
-          appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
-          appService?.hasTrafficLight && 'top-11',
+          'flex w-full items-center justify-between py-2 pe-6 ps-4',
+          appService?.hasTrafficLight && 'pt-11',
         )}
       >
-        <IoArrowBack className='text-base-content' />
-      </button>
+        <button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
+          <IoArrowBack className='text-base-content' />
+        </button>
+
+        {appService?.hasWindowBar && (
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={appService?.hasWindowBar}
+            showMaximize={appService?.hasWindowBar}
+            showClose={appService?.hasWindowBar}
+            onClose={handleGoBack}
+          />
+        )}
+      </div>
       <div className='w-full max-w-4xl px-4 py-10'>
         <div className='bg-base-200 overflow-hidden rounded-lg p-2 shadow-md sm:p-6'>
           <div className='p-2 sm:p-6'>
diff --git a/apps/readest-app/src/components/Toast.tsx b/apps/readest-app/src/components/Toast.tsx
index d607c5e4..c53e96e3 100644
--- a/apps/readest-app/src/components/Toast.tsx
+++ b/apps/readest-app/src/components/Toast.tsx
@@ -64,8 +64,8 @@ export const Toast = () => {
         >
           <span
             className={clsx(
-              'max-h-[50vh] min-w-[30vw] max-w-80',
-              'overflow-scroll whitespace-normal break-words text-center',
+              'max-h-[50vh] min-w-32 max-w-80',
+              'overflow-y-auto whitespace-normal break-words text-center',
               messageClass.current,
             )}
           >
diff --git a/apps/readest-app/src/services/appService.ts b/apps/readest-app/src/services/appService.ts
index 295298ff..21ee82a3 100644
--- a/apps/readest-app/src/services/appService.ts
+++ b/apps/readest-app/src/services/appService.ts
@@ -49,6 +49,7 @@ export abstract class BaseAppService implements AppService {
   abstract isAndroidApp: boolean;
   abstract isIOSApp: boolean;
   abstract hasTrafficLight: boolean;
+  abstract hasWindow: boolean;
   abstract hasWindowBar: boolean;
   abstract hasContextMenu: boolean;
   abstract hasRoundedWindow: boolean;
diff --git a/apps/readest-app/src/services/nativeAppService.ts b/apps/readest-app/src/services/nativeAppService.ts
index efad7750..d825592d 100644
--- a/apps/readest-app/src/services/nativeAppService.ts
+++ b/apps/readest-app/src/services/nativeAppService.ts
@@ -23,6 +23,12 @@ import { isValidURL } from '@/utils/misc';
 import { BaseAppService } from './appService';
 import { LOCAL_BOOKS_SUBDIR } from './constants';
 
+declare global {
+  interface Window {
+    IS_ROUNDED?: boolean;
+  }
+}
+
 const OS_TYPE = osType();
 
 const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
@@ -122,9 +128,10 @@ export class NativeAppService extends BaseAppService {
   isAndroidApp = OS_TYPE === 'android';
   isIOSApp = OS_TYPE === 'ios';
   hasTrafficLight = OS_TYPE === 'macos';
+  hasWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
   hasWindowBar = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
   hasContextMenu = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
-  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
+  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android') && !!window.IS_ROUNDED;
   hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';
   hasHaptics = OS_TYPE === 'ios' || OS_TYPE === 'android';
   hasSysFontsList = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
diff --git a/apps/readest-app/src/services/webAppService.ts b/apps/readest-app/src/services/webAppService.ts
index fa327f9e..482ef1ff 100644
--- a/apps/readest-app/src/services/webAppService.ts
+++ b/apps/readest-app/src/services/webAppService.ts
@@ -184,6 +184,7 @@ export class WebAppService extends BaseAppService {
   isAndroidApp = false;
   isIOSApp = false;
   hasTrafficLight = false;
+  hasWindow = false;
   hasWindowBar = false;
   hasContextMenu = false;
   hasRoundedWindow = false;
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index 0a6a8b5e..d358ec3d 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -209,7 +209,7 @@ foliate-view {
 }
 
 .scroll-container {
-  overflow-y: scroll;
+  overflow-y: auto;
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
 }
diff --git a/apps/readest-app/src/types/system.ts b/apps/readest-app/src/types/system.ts
index aedff190..ce1e06f5 100644
--- a/apps/readest-app/src/types/system.ts
+++ b/apps/readest-app/src/types/system.ts
@@ -25,6 +25,7 @@ export interface AppService {
   osPlatform: string;
   appPlatform: AppPlatform;
   hasTrafficLight: boolean;
+  hasWindow: boolean;
   hasWindowBar: boolean;
   hasContextMenu: boolean;
   hasRoundedWindow: boolean;