Render selection fab in case only one category exists (#553)

src/screens/Library.tsx

@@ -95,6 +95,27 @@ export function Library() {
         [selectedItemIds.length, mangas],
     );
 
+    const selectionFab = useMemo(() => {
+        if (!isSelectModeActive) {
+            return null;
+        }
+
+        return (
+            <SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
+                {(handleClose, setHideMenu) => (
+                    <MangaActionMenuItems
+                        selectedMangas={selectedMangas}
+                        onClose={(selectionModeState) => {
+                            handleClose();
+                            setIsSelectModeActive(selectionModeState);
+                        }}
+                        setHideMenu={setHideMenu}
+                    />
+                )}
+            </SelectionFAB>
+        );
+    }, [isSelectModeActive, selectedMangas]);
+
     const { setTitle, setAction } = useContext(NavBarContext);
     useEffect(() => {
         const title = t('library.title');
@@ -172,6 +193,7 @@ export function Library() {
 
     if (tabs.length === 1) {
         return (
+            <>
                 <LibraryMangaGrid
                     mangas={mangas}
                     message={t('library.error.label.empty')}
@@ -181,17 +203,14 @@ export function Library() {
                     handleSelection={handleSelect}
                     showFilteredOutMessage={showFilteredOutMessage}
                 />
+                {selectionFab}
+            </>
         );
     }
 
     return (
-        <>
         <TabsWrapper>
-                <TabsMenu
-                    value={activeTab.order}
-                    onChange={(e, newTab) => handleTabChange(newTab)}
-                    tabsCount={tabs.length}
-                >
+            <TabsMenu value={activeTab.order} onChange={(e, newTab) => handleTabChange(newTab)} tabsCount={tabs.length}>
                 {tabs.map((tab) => (
                     <Tab
                         sx={{ display: 'flex' }}
@@ -227,21 +246,7 @@ export function Library() {
                         ))}
                 </TabPanel>
             ))}
+            {selectionFab}
         </TabsWrapper>
-            {isSelectModeActive && (
-                <SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
-                    {(handleClose, setHideMenu) => (
-                        <MangaActionMenuItems
-                            selectedMangas={selectedMangas}
-                            onClose={(selectionModeState) => {
-                                handleClose();
-                                setIsSelectModeActive(selectionModeState);
-                            }}
-                            setHideMenu={setHideMenu}
-                        />
-                    )}
-                </SelectionFAB>
-            )}
-        </>
     );
 }