Improve logic to show dialog outside of components

src/features/chapter/services/Chapters.ts

@@ -41,8 +41,8 @@ import {
     ChapterSourceOrderInfo,
 } from '@/features/chapter/Chapter.types.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { DirectionOffset } from '@/base/Base.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 export class Chapters {
     static getIds(chapters: { id: number }[]): number[] {
@@ -275,7 +275,7 @@ export class Chapters {
                 assertIsDefined(confirmationMessage);
 
                 try {
-                    await awaitConfirmation({
+                    await GlobalDialogManager.confirm({
                         title: translate('global.label.are_you_sure'),
                         message: translate(confirmationMessage, { count: itemCount }),
                         actions: {

src/features/manga/hooks/useManageMangaLibraryState.tsx

@@ -17,11 +17,11 @@ import { getMetadataServerSettings } from '@/features/settings/services/ServerSe
 import { Categories } from '@/features/category/services/Categories.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { GetCategoriesBaseQuery, GetCategoriesBaseQueryVariables, MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { GET_CATEGORIES_BASE } from '@/lib/graphql/queries/CategoryQuery.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 export const useManageMangaLibraryState = (
     manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -54,7 +54,7 @@ export const useManageMangaLibraryState = (
 
     const removeFromLibrary = useCallback(async () => {
         if (confirmRemoval) {
-            await awaitConfirmation({
+            await GlobalDialogManager.confirm(`manga-library-state-remove-${manga.id}`, {
                 title: t('global.label.are_you_sure'),
                 message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
                 actions: {
@@ -113,7 +113,7 @@ export const useManageMangaLibraryState = (
             try {
                 duplicatedLibraryMangas = await Mangas.getDuplicateLibraryMangas(manga.title).response;
             } catch (e) {
-                await awaitConfirmation({
+                await GlobalDialogManager.confirm(`manga-library-state-add-${manga.id}`, {
                     title: t('global.error.label.failed_to_load_data'),
                     message: t('manga.action.library.add.dialog.duplicate.label.failure', {
                         error: getErrorMessage(e),
@@ -131,7 +131,7 @@ export const useManageMangaLibraryState = (
 
             const doDuplicatesExist = duplicatedLibraryMangas?.data.mangas.totalCount;
             if (doDuplicatesExist) {
-                await awaitConfirmation({
+                await GlobalDialogManager.confirm(`manga-library-state-add-duplicated-${manga.id}`, {
                     title: t('global.label.are_you_sure'),
                     message: t('manga.action.library.add.dialog.duplicate.label.info'),
                     actions: {

src/features/manga/services/Mangas.ts

@@ -49,8 +49,8 @@ import {
     SOURCES_BY_MANGA_TYPE,
 } from '@/features/manga/Manga.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { assertIsDefined } from '@/base/Asserts.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 type MangaToMigrate = NonNullable<GetMangaToMigrateQuery['manga']>;
 type MangaToMigrateTo = NonNullable<GetMangaToMigrateToFetchMutation['fetchManga']>['manga'];
@@ -553,7 +553,7 @@ export class Mangas {
                 assertIsDefined(confirmationMessage);
 
                 try {
-                    await awaitConfirmation({
+                    await GlobalDialogManager.confirm({
                         title: translate('global.label.are_you_sure'),
                         message: translate(confirmationMessage, { count: itemCount }),
                         actions: {

src/features/reader/services/ReaderControls.ts

@@ -45,7 +45,6 @@ import {
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
 import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import {
@@ -55,6 +54,7 @@ import {
     getReaderSettingsStore,
     getReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 const getScrollDirectionInvert = (
     scrollDirection: ScrollDirection,
@@ -304,7 +304,7 @@ export class ReaderControls {
         const warningLineBreak = !isSameScanlator && !isContinuousChapter ? '\n\n' : '';
         const warning = `${sameScanlator}${warningLineBreak}${continuousChapter}`;
 
-        await awaitConfirmation({
+        await GlobalDialogManager.confirm({
             title: translate('reader.chapter_transition.warning.title'),
             message: warning,
             actions: {

src/features/source/browse/components/SourceOptions.tsx

@@ -36,9 +36,9 @@ import { TriStateFilter } from '@/features/source/browse/components/filters/TriS
 import { GroupFilter } from '@/features/source/browse/components/filters/GroupFilter.tsx';
 import { SeparatorFilter } from '@/features/source/browse/components/filters/SeparatorFilter.tsx';
 import { StyledFab } from '@/base/components/buttons/StyledFab.tsx';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { ISourceMetadata, SourceFilters } from '@/features/source/Source.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 interface IFilters {
     sourceFilter: SourceFilters[];
@@ -256,7 +256,7 @@ export function SourceOptions({
                                             selectSavedSearch(savedSearch);
                                         }}
                                         onDelete={() => {
-                                            awaitConfirmation({
+                                            GlobalDialogManager.confirm({
                                                 title: t('global.label.are_you_sure'),
                                                 message: t('source.filter.save_search.dialog.label.delete', {
                                                     name: savedSearch,