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/lib/data/Mangas.ts

@@ -7,6 +7,7 @@
  */
 
 import { t as translate } from 'i18next';
+import { DocumentNode } from '@apollo/client/core';
 import { TManga, TranslationKey } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import {
@@ -19,6 +20,7 @@ import {
 import { Chapters } from '@/lib/data/Chapters.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
+import { FULL_MANGA_FIELDS } from '@/lib/graphql/Fragments.ts';
 
 export type MangaAction =
     | 'download'
@@ -135,6 +137,21 @@ export class Mangas {
         return mangas.map((manga) => manga.id);
     }
 
+    static getFromCache<T>(
+        id: number,
+        fragment: DocumentNode = FULL_MANGA_FIELDS,
+        fragmentName: string = 'FULL_MANGA_FIELDS',
+    ): T | null {
+        return requestManager.graphQLClient.client.cache.readFragment<T>({
+            id: requestManager.graphQLClient.client.cache.identify({
+                __typename: 'MangaType',
+                id,
+            }),
+            fragment,
+            fragmentName,
+        });
+    }
+
     static isNotDownloaded({ downloadCount }: MangaDownloadInfo): boolean {
         return downloadCount === 0;
     }

src/lib/ui/AwaitableDialog.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { createRoot } from 'react-dom/client';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+import { ConfirmDialog } from '@/components/molecules/ConfirmDialog.tsx';
+import { ControlledPromise } from '@/lib/ControlledPromise.ts';
+import { getCurrentTheme } from '@/theme.ts';
+
+export const awaitConfirmation = async (
+    dialogProps: Omit<React.ComponentProps<typeof ConfirmDialog>, 'onCancel' | 'onConfirm'>,
+) => {
+    const dialogContainer = document.createElement('div');
+    document.body.appendChild(dialogContainer);
+
+    const root = createRoot(dialogContainer);
+
+    const confirmationPromise = new ControlledPromise();
+    const handleConfirmation = (accepted: boolean) => {
+        if (accepted) {
+            confirmationPromise.resolve();
+        } else {
+            confirmationPromise.reject();
+        }
+
+        root.unmount();
+        document.body.removeChild(dialogContainer);
+    };
+
+    root.render(
+        <ThemeProvider theme={getCurrentTheme()}>
+            <ConfirmDialog
+                {...dialogProps}
+                onCancel={() => handleConfirmation(false)}
+                onConfirm={() => handleConfirmation(true)}
+            />
+            ,
+        </ThemeProvider>,
+    );
+
+    return confirmationPromise.promise;
+};