Feature/browse source manga long press remove add manga from library (#710)

* Extract CategorySelect usage into hook

* Extract logic to change manga in library state into hook

* Change manga in library state on long press when browsing source

src/components/manga/MangaActionMenuItems.tsx

@@ -22,11 +22,11 @@ import { Dialog } from '@mui/material';
 import { TManga } from '@/typings.ts';
 import { actionToTranslationKey, MangaAction, MangaDownloadInfo, Mangas, MangaUnreadInfo } from '@/lib/data/Mangas.ts';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
-import { CategorySelect } from '@/components/navbar/action/CategorySelect.tsx';
 import { MenuItem } from '@/components/menu/MenuItem.tsx';
 import { createGetMenuItemTitle, createIsMenuItemDisabled, createShouldShowMenuItem } from '@/components/menu/util.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { TrackManga } from '@/components/tracker/TrackManga.tsx';
+import { useCategorySelect } from '@/components/navbar/action/useCategorySelect.tsx';
 
 const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const;
 
@@ -54,7 +54,6 @@ export const MangaActionMenuItems = ({
 }: Props) => {
     const { t } = useTranslation();
 
-    const [isCategorySelectOpen, setIsCategorySelectOpen] = useState(false);
     const [isTrackDialogOpen, setIsTrackDialogOpen] = useState(false);
 
     const isSingleMode = !!manga;
@@ -69,6 +68,13 @@ export const MangaActionMenuItems = ({
     const hasUnreadChapters = !!manga?.unreadCount;
     const hasReadChapters = !!manga && manga.unreadCount !== manga.chapters.totalCount;
 
+    const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
+        mangaId: manga?.id,
+        mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
+        onClose: () => onClose(true),
+        addToLibrary: false,
+    });
+
     const handleSelect = () => {
         handleSelection?.(manga.id, true);
         onClose(true);
@@ -156,7 +162,7 @@ export const MangaActionMenuItems = ({
             )}
             <MenuItem
                 onClick={() => {
-                    setIsCategorySelectOpen(true);
+                    openCategorySelect(true);
                     setHideMenu(true);
                 }}
                 Icon={Label}
@@ -167,17 +173,7 @@ export const MangaActionMenuItems = ({
                 Icon={FavoriteBorderIcon}
                 title={getMenuItemTitle('remove_from_library', selectedMangas.length)}
             />
-            {isCategorySelectOpen && (
-                <CategorySelect
-                    open={isCategorySelectOpen}
-                    onClose={() => {
-                        setIsCategorySelectOpen(false);
-                        onClose(true);
-                    }}
-                    mangaId={manga?.id as undefined} // either mangaId or mangaIds is undefined, however, ts is not able to infer it correctly and raises an error
-                    mangaIds={(passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined) as number[]}
-                />
-            )}
+            {CategorySelectComponent}
             {isTrackDialogOpen && (
                 <Dialog
                     open