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/navbar/action/CategorySelect.tsx

@@ -40,7 +40,7 @@ type MultiMangaModeProps = {
     mangaIds: number[];
 };
 
-type Props =
+export type CategorySelectProps =
     | (BaseProps & SingleMangaModeProps & PropertiesNever<MultiMangaModeProps>)
     | (BaseProps & PropertiesNever<SingleMangaModeProps> & MultiMangaModeProps);
 
@@ -77,7 +77,7 @@ const getCategoryCheckedState = (
     return undefined;
 };
 
-export function CategorySelect(props: Props) {
+export function CategorySelect(props: CategorySelectProps) {
     const { t } = useTranslation();
 
     const { open, onClose, mangaId, mangaIds: passedMangaIds, addToLibrary = false } = props;

src/components/navbar/action/useCategorySelect.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useMemo, useState } from 'react';
+import { CategorySelect, CategorySelectProps } from '@/components/navbar/action/CategorySelect.tsx';
+
+export const useCategorySelect = ({
+    mangaId,
+    mangaIds,
+    onClose,
+    addToLibrary,
+}: Omit<CategorySelectProps, 'open' | 'onClose'> & Pick<Partial<CategorySelectProps>, 'onClose'>) => {
+    const [isCategorySelectOpen, setIsCategorySelectOpen] = useState(false);
+
+    const CategorySelectComponent = useMemo(() => {
+        if (!isCategorySelectOpen) {
+            return null;
+        }
+
+        return (
+            <CategorySelect
+                open={isCategorySelectOpen}
+                onClose={(...args) => {
+                    setIsCategorySelectOpen(false);
+                    onClose?.(...args);
+                }}
+                mangaId={mangaId!} // either mangaId or mangaIds is undefined, however, ts is not able to infer it correctly and raises an error
+                mangaIds={mangaIds as undefined}
+                addToLibrary={addToLibrary}
+            />
+        );
+    }, [mangaId, mangaIds, addToLibrary, onClose, isCategorySelectOpen]);
+
+    return {
+        openCategorySelect: setIsCategorySelectOpen,
+        CategorySelectComponent,
+    };
+};