ux: hide action bar when modal is shown (#369)

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

@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
-import { MdDelete, MdOpenInNew, MdOutlineCreateNewFolder, MdOutlineCancel } from 'react-icons/md';
+import { MdDelete, MdOpenInNew, MdOutlineCancel } from 'react-icons/md';
+import { LuFolderPlus } from 'react-icons/lu';
 import { PiPlus } from 'react-icons/pi';
 import { Book, BooksGroup } from '@/types/book';
 import { useEnv } from '@/context/EnvContext';
@@ -25,7 +26,6 @@ interface BookshelfProps {
   handleBookDelete: (book: Book) => void;
   handleSetSelectMode: (selectMode: boolean) => void;
   handleShowDetailsBook: (book: Book) => void;
-  handleToggleSelectMode: () => void;
   booksTransferProgress: { [key: string]: number | null };
 }
 
@@ -38,7 +38,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   handleBookDelete,
   handleSetSelectMode,
   handleShowDetailsBook,
-  handleToggleSelectMode,
   booksTransferProgress,
 }) => {
   const _ = useTranslation();
@@ -47,6 +46,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const { appService } = useEnv();
   const [loading, setLoading] = useState(false);
   const [selectedBooks, setSelectedBooks] = useState<string[]>([]);
+  const [showSelectModeActions, setShowSelectModeActions] = useState(false);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [showGroupingModal, setShowGroupingModal] = useState(false);
   const [navBooksGroup, setNavBooksGroup] = useState<BooksGroup | null>(null);
@@ -57,7 +57,12 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const allBookshelfItems = generateBookshelfItems(libraryBooks);
 
   useEffect(() => {
-    setSelectedBooks([]);
+    if (isSelectMode) {
+      setShowSelectModeActions(true);
+    } else {
+      setSelectedBooks([]);
+      setShowSelectModeActions(false);
+    }
   }, [isSelectMode]);
 
   useEffect(() => {
@@ -124,6 +129,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   };
 
   const groupSelectedBooks = () => {
+    setShowSelectModeActions(false);
     setShowGroupingModal(true);
   };
 
@@ -166,7 +172,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
         </div>
       )}
       <div className={clsx('action-bar-bottom z-[99] pb-[calc(env(safe-area-inset-bottom)+16px)]')}>
-        {isSelectMode && (
+        {isSelectMode && showSelectModeActions && (
           <div
             className={clsx(
               'text-base-content bg-base-300 mx-auto flex w-fit items-center justify-center',
@@ -191,7 +197,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
                 !selectedBooks.length && 'btn-disabled opacity-50',
               )}
             >
-              <MdOutlineCreateNewFolder />
+              <LuFolderPlus />
               <div>{_('Add to Group')}</div>
             </button>
             <button
@@ -205,7 +211,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
               <div className='text-red-500'>{_('Delete')}</div>
             </button>
             <button
-              onClick={() => handleToggleSelectMode()}
+              onClick={() => handleSetSelectMode(false)}
               className={clsx('flex flex-col items-center justify-center')}
             >
               <MdOutlineCancel />
@@ -220,10 +226,13 @@ const Bookshelf: React.FC<BookshelfProps> = ({
             libraryBooks={libraryBooks}
             selectedBooks={selectedBooks}
             onConfirm={() => {
-              setSelectedBooks([]);
               setShowGroupingModal(false);
+              handleSetSelectMode(false);
+            }}
+            onCancel={() => {
+              setShowGroupingModal(false);
+              setShowSelectModeActions(true);
             }}
-            onCancel={() => setShowGroupingModal(false)}
           />
         </div>
       )}

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

@@ -133,7 +133,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
     const groupIds = selectedBooks
       .map((id) => libraryBooks.find((book) => book.hash === id || book.groupId === id)?.groupId)
       .filter((groupId) => groupId);
-    if (groupIds.length === 1) {
+    if (Array.from(new Set(groupIds)).length === 1) {
       setSelectedGroup(groupsList.find((group) => group.id === groupIds[0]) || null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -141,25 +141,32 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
 
   return (
     <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
-      <div className='modal-box bg-base-100 max-h-[85%] w-[50%] min-w-64 max-w-[440px] overflow-y-auto rounded-2xl p-6 shadow-xl'>
+      <div
+        className={clsx(
+          'modal-box bg-base-100 overflow-y-auto rounded-2xl shadow-xl',
+          'max-h-[85%] w-[95%] min-w-64 max-w-[440px] p-6 sm:w-[70%]',
+        )}
+      >
         <h2 className='text-center text-lg font-bold'>{_('Group Books')}</h2>
-        <div className='mt-4 flex w-full flex-wrap justify-between gap-2 text-base'>
+        <div className={clsx('mt-4 grid grid-cols-1 gap-2 text-base md:grid-cols-2')}>
           {isSelectedBooksHasGroup && (
-            <button
+            <div
               onClick={handleRemoveFromGroup}
-              className='btn btn-ghost flex items-center p-2 text-blue-500'
+              role='button'
+              className='flex items-center space-x-2 p-2 text-blue-500'
             >
               <HiOutlineFolderRemove size={iconSize} />
               <span>{_('Remove From Group')}</span>
-            </button>
+            </div>
           )}
-          <button
+          <div
             onClick={handleCreateGroup}
-            className='btn btn-ghost flex items-center p-2 text-blue-500'
+            role='button'
+            className='flex items-center space-x-2 p-2 text-blue-500'
           >
             <HiOutlineFolderAdd size={iconSize} />
             <span>{_('Create New Group')}</span>
-          </button>
+          </div>
         </div>
         {showInput && (
           <div className='mt-4 flex items-center gap-2'>
@@ -183,7 +190,9 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
               )}
               onClick={() => handleConfirmCreateGroup()}
             >
-              <div className='pr-1 align-bottom text-xs text-blue-400'>{_('Save')}</div>
+              <div className='pr-1 align-bottom text-base text-blue-500 sm:text-sm'>
+                {_('Save')}
+              </div>
             </button>
           </div>
         )}
@@ -208,7 +217,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
                   {group.name}
                 </span>
               </div>
-              <span className='text-neutral-content hidden shrink-0 text-sm sm:flex'>
+              <span className='text-neutral-content flex shrink-0 text-sm'>
                 {selectedGroup && selectedGroup.id == group.id && (
                   <MdCheck className='fill-blue-500' size={iconSize} />
                 )}
@@ -216,7 +225,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
             </button>
           ))}
         </ul>
-        <div className='mt-6 flex justify-end gap-x-4 p-2'>
+        <div className='mt-6 flex justify-end gap-x-8 p-2'>
           <button
             onClick={handleConfirmGrouping}
             className={clsx(

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

@@ -384,7 +384,7 @@ const LibraryPage = () => {
           <div
             ref={containerRef}
             className={clsx(
-              'scroll-container mt-12 flex-grow overflow-auto px-2',
+              'mt-12 flex-grow overflow-auto px-2',
               appService?.hasSafeAreaInset && 'mt-[calc(48px+env(safe-area-inset-top))]',
             )}
           >
@@ -397,7 +397,6 @@ const LibraryPage = () => {
               handleBookDelete={handleBookDelete}
               handleSetSelectMode={handleSetSelectMode}
               handleShowDetailsBook={handleShowDetailsBook}
-              handleToggleSelectMode={handleToggleSelectMode}
               booksTransferProgress={booksTransferProgress}
             />
           </div>

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

@@ -231,11 +231,6 @@ foliate-view {
   transform: rotate(180deg);
 }
 
-.scroll-container {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
 .action-bar-bottom {
   position: fixed;
   bottom: 0;