fix: rounded reader widget only when sidebar is invisible , closes #809 (#815)

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

@@ -28,7 +28,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { appService } = useEnv();
   const { getConfig, getBookData } = useBookDataStore();
   const { getProgress, getViewState, getViewSettings } = useReaderStore();
-  const { sideBarBookKey } = useSidebarStore();
+  const { isSideBarVisible, sideBarBookKey } = useSidebarStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
 
@@ -68,7 +68,10 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
           <div
             id={`gridcell-${bookKey}`}
             key={bookKey}
-            className={`${appService?.hasRoundedWindow ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
+            className={clsx(
+              'relative h-full w-full overflow-hidden',
+              !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window',
+            )}
           >
             {isBookmarked && <Ribbon width={`${horizontalGapPercent}%`} />}
             <HeaderBar

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

@@ -13,10 +13,12 @@ import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { AboutWindow } from '@/components/AboutWindow';
 import { Toast } from '@/components/Toast';
 import ReaderContent from './ReaderContent';
+import { useSidebarStore } from '@/store/sidebarStore';
 
 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   const { envConfig, appService } = useEnv();
   const { settings, setSettings } = useSettingsStore();
+  const { isSideBarVisible } = useSidebarStore();
   const { getVisibleLibrary, setLibrary } = useLibraryStore();
   const isInitiating = useRef(false);
 
@@ -45,7 +47,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
       <div
         className={clsx(
           `reader-page bg-base-100 text-base-content select-none`,
-          appService?.hasRoundedWindow && 'rounded-window',
+          !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window',
         )}
       >
         <Suspense>