Rounded window without window decorations

apps/readest-app/src-tauri/Cargo.toml

@@ -22,7 +22,7 @@ serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 # FIXME: remove the devtools feature in production
-tauri = { version = "2.0.2", features = ["protocol-asset", "devtools"] }
+tauri = { version = "2.0.2", features = [ "macos-private-api", "protocol-asset", "devtools"] }
 tauri-plugin-log = "2.0.1"
 tauri-plugin-fs = "2.0.1"
 tauri-plugin-dialog = "2.0.1"

apps/readest-app/src-tauri/tauri.conf.json

@@ -10,7 +10,7 @@
     "beforeBuildCommand": "pnpm build"
   },
   "app": {
-    "withGlobalTauri": true,
+    "macOSPrivateApi": true,
     "windows": [
       {
         "title": "Readest",
@@ -19,7 +19,9 @@
         "resizable": true,
         "fullscreen": false,
         "maximized": true,
-        "decorations": false
+        "decorations": false,
+        "transparent": true,
+        "shadow": false
       }
     ],
     "security": {

apps/readest-app/src/app/globals.css

@@ -5,12 +5,14 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  border-radius: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    border-radius: 10px;
   }
 }
 
@@ -18,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  border-radius: 10px;
+  background-color: transparent;
 }
 
 @layer utilities {
@@ -42,4 +46,18 @@ foliate-view {
   @apply inline-flex h-6 w-6 items-center justify-center rounded-full;
   @apply transition duration-200 ease-in-out transform hover:scale-105;
   @apply bg-base-300 hover:bg-gray-300;
+}
+
+.rounded-window {
+  border-radius: 10px;
+}
+
+.rounded-window-left {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+.rounded-window-right {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }

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

@@ -11,7 +11,10 @@ interface LibraryHeaderProps {
 
 const LibraryHeader: React.FC<LibraryHeaderProps> = ({ onImportBooks, onToggleSelectMode }) => {
   return (
-    <div id='titlebar' className='titlebar fixed top-0 z-10 w-full bg-gray-100 px-8 py-6'>
+    <div
+      id='titlebar'
+      className='titlebar rounded-window fixed top-0 z-10 w-full bg-gray-100 px-6 py-4'
+    >
       <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'>

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

@@ -73,13 +73,13 @@ const LibraryPage = () => {
   };
 
   return (
-    <div className='min-h-screen select-none bg-gray-100'>
+    <div className='rounded-window min-h-screen select-none bg-gray-100'>
       <LibraryHeader
         onImportBooks={handleImportBooks}
         onToggleSelectMode={handleToggleSelectMode}
       />
-      <div className='min-h-screen pt-10'>
-        <div className='hero-content p-4'>
+      <div className='min-h-screen pt-12'>
+        <div className='hero-content px-2 py-4'>
           <Spinner loading={loading} />
           <Bookshelf
             libraryBooks={libraryBooks}

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

@@ -41,7 +41,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
     <div
       className={clsx(
         'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
-        'shadow-xs bg-base-100 transition-opacity duration-300',
+        'shadow-xs bg-base-100 rounded-window transition-opacity duration-300',
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
       )}

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

@@ -2,6 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from 'react-icons/vsc';
 
+import WindowButtons from '@/components/WindowButtons';
+
 interface HeaderBarProps {
   bookKey: string;
   bookTitle: string;
@@ -36,9 +38,10 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
 
   return (
     <div
+      id='titlebar'
       className={clsx(
-        `header-bar absolute top-0 z-10 flex h-10 w-full items-center px-4`,
-        `shadow-xs bg-base-100 transition-opacity duration-300`,
+        `header-bar absolute top-0 z-10 flex h-11 w-full items-center px-4`,
+        `shadow-xs bg-base-100 rounded-window transition-opacity duration-300`,
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
       )}
@@ -59,6 +62,9 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           )}
         </button>
       </div>
+      <div className='absolute right-4 flex h-full items-center'>
+        <WindowButtons />
+      </div>
     </div>
   );
 };

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

@@ -82,7 +82,7 @@ const SideBar: React.FC<{
   return (
     isVisible && (
       <div
-        className='sidebar-container bg-base-200 z-20 h-full select-none'
+        className='sidebar-container bg-base-200 rounded-window-left z-20 h-full select-none'
         style={{
           width: `${width}`,
           minWidth: `${MIN_SIDEBAR_WIDTH * 100}%`,
@@ -91,7 +91,7 @@ const SideBar: React.FC<{
         }}
       >
         <div className={'sidebar h-full'}>
-          <div className='flex h-10 items-center justify-between pl-1.5 pr-3'>
+          <div className='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' />

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

@@ -164,7 +164,7 @@ const TOCView: React.FC<{
 
   return (
     <div className='relative'>
-      <div className='max-h-[calc(100vh-168px)] overflow-y-auto rounded border'>
+      <div className='max-h-[calc(100vh-173px)] overflow-y-auto rounded border'>
         <ul role='tree' ref={tocRef} className='overflow-y-auto px-2'>
           {toc &&
             toc.map((item) => (