fix: use transparent background for rounded window on Linux, closes #1982 (#1991)

apps/readest-app/src-tauri/src/lib.rs

@@ -268,7 +268,7 @@ pub fn run() {
                 }
                 #[cfg(target_os = "linux")]
                 {
-                    builder = builder.transparent(true);
+                    builder = builder.transparent(true).background_color(tauri::window::Color(0, 0, 0, 0));
                 }
 
                 builder

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

@@ -619,7 +619,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   };
 
   if (!appService || !insets || checkOpenWithBooks || checkLastOpenBooks) {
-    return <div className='bg-base-200 h-[100vh]' />;
+    return <div className={clsx('h-[100vh]', !appService?.isLinuxApp && 'bg-base-200')} />;
   }
 
   const showBookshelf = libraryLoaded || libraryBooks.length > 0;
@@ -730,7 +730,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
 
 const LibraryPage = () => {
   return (
-    <Suspense fallback={<div className='bg-base-200 h-[100vh]' />}>
+    <Suspense fallback={<div className='h-[100vh]' />}>
       <LibraryPageWithSearchParams />
     </Suspense>
   );

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

@@ -155,7 +155,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
       </Suspense>
     </div>
   ) : (
-    <div className='bg-base-100 h-[100vh]'></div>
+    <div className={clsx('h-[100vh]', !appService?.isLinuxApp && 'bg-base-100')}></div>
   );
 };
 

apps/readest-app/src/components/Providers.tsx

@@ -21,6 +21,9 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
     }
   }, [appService]);
 
+  // Make sure appService is available in all children components
+  if (!appService) return;
+
   return (
     <CSPostHogProvider>
       <AuthProvider>