Introduce "useAppAction" hook

src/modules/source/screens/SourceConfigure.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createElement, useLayoutEffect } from 'react';
+import { createElement } from 'react';
 import { useParams } from 'react-router-dom';
 import List from '@mui/material/List';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,6 @@ import { GET_SOURCE_SETTINGS } from '@/lib/graphql/queries/SourceQuery.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { PreferenceProps } from '@/modules/source/Source.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';
 
 function getPrefComponent(type: string) {
@@ -49,16 +48,8 @@ function getPrefComponent(type: string) {
 
 export function SourceConfigure() {
     const { t } = useTranslation();
-    const { setAction } = useNavBarContext();
 
     useAppTitle(t('source.configuration.title'));
-    useLayoutEffect(() => {
-        setAction(null);
-
-        return () => {
-            setAction(null);
-        };
-    }, [t]);
 
     const { sourceId } = useParams<{ sourceId: string }>();
     const { data, loading, error, refetch } = requestManager.useGetSource<

src/modules/source/screens/SourceMangas.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -51,9 +51,10 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { GridLayout } from '@/modules/core/Core.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 { Sources } from '@/modules/source/services/Sources.ts';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const DEFAULT_SOURCE: SourceIdInfo = { id: '-1' };
 
@@ -205,7 +206,7 @@ const useSourceManga = (
 
 export function SourceMangas() {
     const { t } = useTranslation();
-    const { setAction, appBarHeight } = useNavBarContext();
+    const { appBarHeight } = useNavBarContext();
 
     const { sourceId } = useParams<{ sourceId: string }>();
 
@@ -400,30 +401,24 @@ export function SourceMangas() {
     }, [clearCache]);
 
     useAppTitle(source?.displayName ?? t('source.title_one'));
-    useLayoutEffect(() => {
-        setAction(
-            <>
-                <AppbarSearch />
-                <SourceGridLayout />
-                {source?.isConfigurable && (
-                    <CustomTooltip title={t('settings.title')}>
-                        <IconButton
-                            onClick={() => navigate(AppRoutes.sources.childRoutes.configure.path(sourceId))}
-                            aria-label="display more actions"
-                            edge="end"
-                            color="inherit"
-                        >
-                            <SettingsIcon />
-                        </IconButton>
-                    </CustomTooltip>
-                )}
-            </>,
-        );
-
-        return () => {
-            setAction(null);
-        };
-    }, [t, source]);
+    useAppAction(
+        <>
+            <AppbarSearch />
+            <SourceGridLayout />
+            {source?.isConfigurable && (
+                <CustomTooltip title={t('settings.title')}>
+                    <IconButton
+                        onClick={() => navigate(AppRoutes.sources.childRoutes.configure.path(sourceId))}
+                        aria-label="display more actions"
+                        edge="end"
+                        color="inherit"
+                    >
+                        <SettingsIcon />
+                    </IconButton>
+                </CustomTooltip>
+            )}
+        </>,
+    );
 
     const EmptyViewComponent = mangas.length ? EmptyView : EmptyViewAbsoluteCentered;
 

src/modules/source/screens/Sources.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fragment, useLayoutEffect, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
@@ -24,13 +24,12 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.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 { Sources as SourceService } from '@/modules/source/services/Sources.ts';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
 
 export function Sources() {
     const { t } = useTranslation();
-    const { setAction } = useNavBarContext();
 
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
     const {
@@ -61,26 +60,21 @@ export function Sources() {
 
     const navigate = useNavigate();
 
-    useLayoutEffect(() => {
-        setAction(
-            <>
-                <CustomTooltip title={t('search.title.global_search')}>
-                    <IconButton onClick={() => navigate(AppRoutes.sources.childRoutes.searchAll.path)} color="inherit">
-                        <TravelExploreIcon />
-                    </IconButton>
-                </CustomTooltip>
-                <LanguageSelect
-                    selectedLanguages={shownLangs}
-                    setSelectedLanguages={setShownLangs}
-                    languages={sourceLanguages}
-                />
-            </>,
-        );
-
-        return () => {
-            setAction(null);
-        };
-    }, [t, shownLangs, sourceLanguages]);
+    useAppAction(
+        <>
+            <CustomTooltip title={t('search.title.global_search')}>
+                <IconButton onClick={() => navigate(AppRoutes.sources.childRoutes.searchAll.path)} color="inherit">
+                    <TravelExploreIcon />
+                </IconButton>
+            </CustomTooltip>
+            <LanguageSelect
+                selectedLanguages={shownLangs}
+                setSelectedLanguages={setShownLangs}
+                languages={sourceLanguages}
+            />
+        </>,
+        [t, shownLangs, sourceLanguages],
+    );
 
     if (isLoading) return <LoadingPlaceholder />;