Introduce "useAppAction" hook

src/modules/library/screens/Library.tsx

@@ -43,8 +43,8 @@ import { useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOpti
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { getCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
 import { GET_LIBRARY_MANGA_COUNT } from '@/lib/graphql/queries/MangaQuery.ts';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
 
 const TitleWithSizeTag = styled('span')({
     display: 'flex',
@@ -167,7 +167,6 @@ export function Library() {
         );
     }, [isSelectModeActive, selectedMangas]);
 
-    const { setAction } = useNavBarContext();
     useAppTitle(
         <TitleWithSizeTag>
             {t('library.title')}
@@ -176,49 +175,33 @@ export function Library() {
         t('library.title'),
         [t, showTabSize, librarySize],
     );
-    useLayoutEffect(() => {
-        setAction(
-            <>
-                {!isSelectModeActive && activeTab && (
-                    <>
-                        <AppbarSearch />
-                        <LibraryToolbarMenu category={activeTab} />
-                        <UpdateChecker categoryId={activeTab?.id} />
-                    </>
-                )}
-                <SelectableCollectionSelectMode
-                    isActive={isSelectModeActive}
-                    areAllItemsSelected={areAllItemsSelected}
-                    areNoItemsSelected={areNoItemsSelected}
-                    onSelectAll={(selectAll) =>
-                        handleSelectAll(selectAll, [...new Set(mangas.map((manga) => manga.id))])
-                    }
-                    onModeChange={(checked) => {
-                        setIsSelectModeActive(checked);
+    useAppAction(
+        <>
+            {!isSelectModeActive && activeTab && (
+                <>
+                    <AppbarSearch />
+                    <LibraryToolbarMenu category={activeTab} />
+                    <UpdateChecker categoryId={activeTab?.id} />
+                </>
+            )}
+            <SelectableCollectionSelectMode
+                isActive={isSelectModeActive}
+                areAllItemsSelected={areAllItemsSelected}
+                areNoItemsSelected={areNoItemsSelected}
+                onSelectAll={(selectAll) => handleSelectAll(selectAll, [...new Set(mangas.map((manga) => manga.id))])}
+                onModeChange={(checked) => {
+                    setIsSelectModeActive(checked);
 
-                        if (checked) {
-                            handleSelectAll(true, [...new Set(mangas.map((manga) => manga.id))]);
-                        } else {
-                            tabs.forEach((tab) => handleSelectAll(false, [], tab.id.toString()));
-                        }
-                    }}
-                />
-            </>,
-        );
-        return () => {
-            setAction(null);
-        };
-    }, [
-        t,
-        librarySize,
-        areCategoriesLoading,
-        isSelectModeActive,
-        areNoItemsSelected,
-        areAllItemsSelected,
-        mangas.length,
-        activeTab,
-        showTabSize,
-    ]);
+                    if (checked) {
+                        handleSelectAll(true, [...new Set(mangas.map((manga) => manga.id))]);
+                    } else {
+                        tabs.forEach((tab) => handleSelectAll(false, [], tab.id.toString()));
+                    }
+                }}
+            />
+        </>,
+        [isSelectModeActive, areNoItemsSelected, areAllItemsSelected, activeTab],
+    );
 
     const handleTabChange = (newTab: number) => {
         setTabSearchParam(newTab);

src/modules/library/screens/LibraryDuplicates.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
@@ -34,8 +34,8 @@ import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
 import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from '@/modules/library/Library.types.ts';
 import { GridLayout } from '@/modules/core/Core.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
 
 export const LibraryDuplicates = () => {
     const { t } = useTranslation();
@@ -46,39 +46,30 @@ export const LibraryDuplicates = () => {
         false,
     );
 
-    const { setAction } = useNavBarContext();
     useAppTitle(t('library.settings.advanced.duplicates.label.title'));
-    useLayoutEffect(() => {
-        setAction(
-            <>
-                <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
-                <PopupState variant="popover" popupId="library-dupliactes-settings">
-                    {(popupState) => (
-                        <>
-                            <IconButton {...bindTrigger(popupState)} color="inherit">
-                                <SettingsIcon />
-                            </IconButton>
-                            <Menu {...bindMenu(popupState)}>
-                                <MenuItem>
-                                    <CheckboxInput
-                                        label={t(
-                                            'library.settings.advanced.duplicates.settings.label.check_description',
-                                        )}
-                                        checked={checkAlternativeTitles}
-                                        onChange={(_, checked) => setCheckAlternativeTitles(checked)}
-                                    />
-                                </MenuItem>
-                            </Menu>
-                        </>
-                    )}
-                </PopupState>
-            </>,
-        );
-
-        return () => {
-            setAction(null);
-        };
-    }, [t, gridLayout, checkAlternativeTitles]);
+    useAppAction(
+        <>
+            <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
+            <PopupState variant="popover" popupId="library-dupliactes-settings">
+                {(popupState) => (
+                    <>
+                        <IconButton {...bindTrigger(popupState)} color="inherit">
+                            <SettingsIcon />
+                        </IconButton>
+                        <Menu {...bindMenu(popupState)}>
+                            <MenuItem>
+                                <CheckboxInput
+                                    label={t('library.settings.advanced.duplicates.settings.label.check_description')}
+                                    checked={checkAlternativeTitles}
+                                    onChange={(_, checked) => setCheckAlternativeTitles(checked)}
+                                />
+                            </MenuItem>
+                        </Menu>
+                    </>
+                )}
+            </PopupState>
+        </>,
+    );
 
     const { data, loading, error, refetch } = requestManager.useGetMangas<
         GetMangasDuplicatesQuery,

src/modules/library/screens/LibrarySettings.tsx

@@ -7,7 +7,6 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -38,7 +37,6 @@ import { GET_MANGAS_BASE } from '@/lib/graphql/queries/MangaQuery.ts';
 import { MetadataLibrarySettings } from '@/modules/library/Library.types.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
 
 const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
@@ -65,16 +63,8 @@ const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
 
 export function LibrarySettings() {
     const { t } = useTranslation();
-    const { setAction } = useNavBarContext();
 
     useAppTitle(t('library.title'));
-    useLayoutEffect(() => {
-        setAction(null);
-
-        return () => {
-            setAction(null);
-        };
-    }, [t]);
 
     const categories = requestManager.useGetCategories<GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables>(
         GET_CATEGORIES_SETTINGS,