mobile: fix layout of book detail modal and refresh indicator (#321)

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

@@ -18,7 +18,6 @@ import { FILE_REVEAL_LABELS, FILE_REVEAL_PLATFORMS } from '@/utils/os';
 
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
-import BookDetailModal from '@/components/BookDetailModal';
 import BookItem from './BookItem';
 import GroupItem from './GroupItem';
 
@@ -56,6 +55,7 @@ interface BookshelfProps {
   handleBookUpload: (book: Book) => void;
   handleBookDownload: (book: Book) => void;
   handleBookDelete: (book: Book) => void;
+  handleShowDetailsBook: (book: Book) => void;
   booksTransferProgress: { [key: string]: number | null };
 }
 
@@ -66,6 +66,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   handleBookUpload,
   handleBookDownload,
   handleBookDelete,
+  handleShowDetailsBook,
   booksTransferProgress,
 }) => {
   const _ = useTranslation();
@@ -80,7 +81,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const [clickedImage, setClickedImage] = useState<string | null>(null);
   const [importBookUrl] = useState(searchParams?.get('url') || '');
   const isImportingBook = useRef(false);
-  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
 
   const makeBookAvailable = async (book: Book) => {
     if (book.uploadedAt && !book.downloadedAt) {
@@ -98,14 +98,10 @@ const Bookshelf: React.FC<BookshelfProps> = ({
 
   const showBookDetailsModal = async (book: Book) => {
     if (await makeBookAvailable(book)) {
-      setShowDetailsBook(book);
+      handleShowDetailsBook(book);
     }
   };
 
-  const dismissBookDetailsModal = () => {
-    setShowDetailsBook(null);
-  };
-
   const { setLibrary } = useLibraryStore();
 
   useEffect(() => {
@@ -287,13 +283,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           onClickConfirm={confirmDelete}
         />
       )}
-      {showDetailsBook && (
-        <BookDetailModal
-          isOpen={!!showDetailsBook}
-          book={showDetailsBook}
-          onClose={dismissBookDetailsModal}
-        />
-      )}
     </div>
   );
 };

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

@@ -10,6 +10,8 @@ import { AppService } from '@/types/system';
 import { navigateToLogin, navigateToReader } from '@/utils/nav';
 import { getBaseFilename, listFormater } from '@/utils/book';
 import { eventDispatcher } from '@/utils/event';
+import { ProgressPayload } from '@/utils/transfer';
+import { throttle } from '@/utils/throttle';
 import { parseOpenWithFiles } from '@/helpers/cli';
 import { isTauriAppPlatform, hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
@@ -30,8 +32,7 @@ import { Toast } from '@/components/Toast';
 import Spinner from '@/components/Spinner';
 import LibraryHeader from './components/LibraryHeader';
 import Bookshelf from './components/Bookshelf';
-import { ProgressPayload } from '@/utils/transfer';
-import { throttle } from '@/utils/throttle';
+import BookDetailModal from '@/components/BookDetailModal';
 
 const LibraryPage = () => {
   const router = useRouter();
@@ -51,6 +52,7 @@ const LibraryPage = () => {
   const isInitiating = useRef(false);
   const [libraryLoaded, setLibraryLoaded] = useState(false);
   const [isSelectMode, setIsSelectMode] = useState(false);
+  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
   const [booksTransferProgress, setBooksTransferProgress] = useState<{
     [key: string]: number | null;
   }>({});
@@ -335,6 +337,10 @@ const LibraryPage = () => {
     setIsSelectMode(!isSelectMode);
   };
 
+  const handleShowDetailsBook = (book: Book) => {
+    setShowDetailsBook(book);
+  };
+
   if (!appService) {
     return null;
   }
@@ -386,6 +392,7 @@ const LibraryPage = () => {
                 handleBookUpload={handleBookUpload}
                 handleBookDownload={handleBookDownload}
                 handleBookDelete={handleBookDelete}
+                handleShowDetailsBook={handleShowDetailsBook}
                 booksTransferProgress={booksTransferProgress}
               />
             </Suspense>
@@ -407,6 +414,13 @@ const LibraryPage = () => {
             </div>
           </div>
         ))}
+      {showDetailsBook && (
+        <BookDetailModal
+          isOpen={!!showDetailsBook}
+          book={showDetailsBook}
+          onClose={() => setShowDetailsBook(null)}
+        />
+      )}
       <AboutWindow />
       <Toast />
     </div>

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

@@ -74,7 +74,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
     );
 
   return (
-    <>
+    <div className='fixed inset-0 z-50 flex items-center justify-center'>
       <Dialog
         title={_('Book Details')}
         isOpen={isOpen}
@@ -83,7 +83,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
         boxClassName='sm:min-w-[480px]'
         contentClassName='!px-6 !py-2'
       >
-        <div className='z-50 flex w-full select-text items-center justify-center'>
+        <div className='flex w-full select-text items-center justify-center'>
           <div className='relative w-full rounded-lg'>
             <div className='mb-10 flex h-40 items-start'>
               <div className='book-cover relative mr-10 aspect-[28/41] h-40 items-end shadow-lg'>
@@ -202,7 +202,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
           onClickConfirm={confirmDelete}
         />
       )}
-    </>
+    </div>
   );
 };
 

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

@@ -212,7 +212,7 @@ foliate-view {
 
 .pull-indicator {
   position: fixed;
-  top: 64px;
+  top: calc(64px + env(safe-area-inset-top));
   width: 100%;
   background-color: transparent;
   display: flex;