Introduce "useAppTitleAndAction" hook

src/modules/global-search/screens/SearchAll.tsx

@@ -33,8 +33,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { Sources } from '@/modules/source/services/Sources.ts';
 import { SourceDisplayNameInfo, SourceIdInfo } from '@/modules/source/Source.types.ts';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
-import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 
 type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean; error: any };
 type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -192,8 +191,6 @@ export const SearchAll: React.FC = () => {
     const { pathname, state } = useLocation<{ mangaTitle?: string }>();
     const isMigrateMode = pathname.startsWith('/migrate/source');
 
-    useAppTitle(t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle }));
-
     const [query] = useQueryParam('query', StringParam);
     const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD);
 
@@ -234,20 +231,17 @@ export const SearchAll: React.FC = () => {
         [setSourceToLoadingStateMap],
     );
 
-    useAppAction(
-        useMemo(
-            () => (
-                <>
-                    <AppbarSearch isClosable={false} />
-                    <LanguageSelect
-                        selectedLanguages={shownLangs}
-                        setSelectedLanguages={setShownLangs}
-                        languages={sourceLanguages}
-                    />
-                </>
-            ),
-            [shownLangs, setShownLangs, sourceLanguages],
-        ),
+    useAppTitleAndAction(
+        t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle }),
+        <>
+            <AppbarSearch isClosable={false} />
+            <LanguageSelect
+                selectedLanguages={shownLangs}
+                setSelectedLanguages={setShownLangs}
+                languages={sourceLanguages}
+            />
+        </>,
+        [shownLangs, setShownLangs, sourceLanguages],
     );
 
     if (loading) {

src/modules/library/screens/LibraryDuplicates.tsx

@@ -34,8 +34,7 @@ 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 { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 
 export const LibraryDuplicates = () => {
     const { t } = useTranslation();
@@ -46,8 +45,8 @@ export const LibraryDuplicates = () => {
         false,
     );
 
-    useAppTitle(t('library.settings.advanced.duplicates.label.title'));
-    useAppAction(
+    useAppTitleAndAction(
+        t('library.settings.advanced.duplicates.label.title'),
         <>
             <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
             <PopupState variant="popover" popupId="library-dupliactes-settings">
@@ -69,6 +68,7 @@ export const LibraryDuplicates = () => {
                 )}
             </PopupState>
         </>,
+        [t, gridLayout, checkAlternativeTitles],
     );
 
     const { data, loading, error, refetch } = requestManager.useGetMangas<

src/modules/manga/screens/Manga.tsx

@@ -26,8 +26,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPl
 import { GetMangaScreenQuery } from '@/lib/graphql/generated/graphql.ts';
 import { GET_MANGA_SCREEN } from '@/lib/graphql/queries/MangaQuery.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 
 export const Manga: React.FC = () => {
     const { t } = useTranslation();
@@ -59,8 +58,8 @@ export const Manga: React.FC = () => {
         }
     }, [manga]);
 
-    useAppTitle(manga?.title ?? t('manga.title_one'));
-    useAppAction(
+    useAppTitleAndAction(
+        manga?.title ?? t('manga.title_one'),
         <Stack
             direction="row"
             sx={{
@@ -89,6 +88,7 @@ export const Manga: React.FC = () => {
             )}
             {manga && <MangaToolbarMenu manga={manga} onRefresh={refresh} refreshing={refreshing} />}
         </Stack>,
+        [t, error, isValidating, refreshing, manga, refresh],
     );
 
     if (error && !manga) {

src/modules/migration/screens/Migrate.tsx

@@ -22,8 +22,7 @@ import { SOURCE_BASE_FIELDS } from '@/lib/graphql/fragments/SourceFragments.ts';
 import { BaseMangaGrid } from '@/modules/manga/components/BaseMangaGrid.tsx';
 import { GridLayout } from '@/modules/core/Core.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 
 export const Migrate = () => {
     const { t } = useTranslation();
@@ -68,8 +67,11 @@ export const Migrate = () => {
         notifyOnNetworkStatusChange: true,
     });
 
-    useAppTitle(name ?? sourceId ?? t('migrate.title'));
-    useAppAction(<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />);
+    useAppTitleAndAction(
+        name ?? sourceId ?? t('migrate.title'),
+        <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />,
+        [gridLayout],
+    );
 
     useEffect(() => {
         if (isSourceLoading || isKnownSource) {

src/modules/navigation-bar/NavigationBar.types.ts

@@ -8,6 +8,7 @@
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { ReactNode } from 'react';
 import { TranslationKey } from '@/Base.types.ts';
 import { StaticAppRoute } from '@/modules/core/AppRoute.constants.ts';
 
@@ -40,8 +41,8 @@ export type NavbarContextType = {
     setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
 
     // AppBar action buttons
-    action: any;
-    setAction: React.Dispatch<React.SetStateAction<any>>;
+    action: ReactNode;
+    setAction: React.Dispatch<React.SetStateAction<ReactNode>>;
 
     // Allow default navbar to be overrided
     override: INavbarOverride;

src/modules/navigation-bar/hooks/useAppTitleAndAction.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+
+export const useAppTitleAndAction = (
+    title: NavbarContextType['title'],
+    action: NavbarContextType['action'],
+    actionDependencies?: any[],
+) => {
+    useAppTitle(title);
+    useAppAction(action, actionDependencies);
+};

src/modules/source/screens/SourceMangas.tsx

@@ -52,8 +52,7 @@ import { GridLayout } from '@/modules/core/Core.types.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 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 { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const DEFAULT_SOURCE: SourceIdInfo = { id: '-1' };
@@ -400,8 +399,8 @@ export function SourceMangas() {
         requestManager.clearBrowseCacheFor(sourceId);
     }, [clearCache]);
 
-    useAppTitle(source?.displayName ?? t('source.title_one'));
-    useAppAction(
+    useAppTitleAndAction(
+        source?.displayName ?? t('source.title_one'),
         <>
             <AppbarSearch />
             <SourceGridLayout />
@@ -418,6 +417,7 @@ export function SourceMangas() {
                 </CustomTooltip>
             )}
         </>,
+        [source],
     );
 
     const EmptyViewComponent = mangas.length ? EmptyView : EmptyViewAbsoluteCentered;

src/modules/updates/screens/Updates.tsx

@@ -24,8 +24,7 @@ import { ChapterUpdateCard } from '@/modules/updates/components/ChapterUpdateCar
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { GROUPED_VIRTUOSO_Z_INDEX } from '@/modules/core/AppRoute.constants.ts';
-import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { useAppAction } from '@/modules/navigation-bar/hooks/useAppAction.ts';
+import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 
 export const Updates: React.FC = () => {
     const { t } = useTranslation();
@@ -73,8 +72,7 @@ export const Updates: React.FC = () => {
     });
     const lastUpdateTimestamp = lastUpdateTimestampData?.lastUpdateTimestamp.timestamp;
 
-    useAppTitle(t('updates.title'));
-    useAppAction(<UpdateChecker />);
+    useAppTitleAndAction(t('updates.title'), <UpdateChecker />);
 
     const loadMore = useCallback(() => {
         if (!hasNextPage) {