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/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;
+};