Introduce "useAppTitle" hook

src/modules/library/screens/Library.tsx

@@ -44,6 +44,7 @@ import { useMetadataServerSettings } from '@/modules/settings/services/ServerSet
 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';
 
 const TitleWithSizeTag = styled('span')({
     display: 'flex',
@@ -166,16 +167,16 @@ export function Library() {
         );
     }, [isSelectModeActive, selectedMangas]);
 
-    const { setTitle, setAction } = useNavBarContext();
+    const { setAction } = useNavBarContext();
+    useAppTitle(
+        <TitleWithSizeTag>
+            {t('library.title')}
+            {showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
+        </TitleWithSizeTag>,
+        t('library.title'),
+        [t, showTabSize, librarySize],
+    );
     useLayoutEffect(() => {
-        const title = t('library.title');
-        const navBarTitle = (
-            <TitleWithSizeTag>
-                {title}
-                {showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
-            </TitleWithSizeTag>
-        );
-        setTitle(navBarTitle, title);
         setAction(
             <>
                 {!isSelectModeActive && activeTab && (
@@ -205,7 +206,6 @@ export function Library() {
             </>,
         );
         return () => {
-            setTitle('');
             setAction(null);
         };
     }, [

src/modules/library/screens/LibraryDuplicates.tsx

@@ -35,6 +35,7 @@ import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from
 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';
 
 export const LibraryDuplicates = () => {
     const { t } = useTranslation();
@@ -45,9 +46,9 @@ export const LibraryDuplicates = () => {
         false,
     );
 
-    const { setTitle, setAction } = useNavBarContext();
+    const { setAction } = useNavBarContext();
+    useAppTitle(t('library.settings.advanced.duplicates.label.title'));
     useLayoutEffect(() => {
-        setTitle(t('library.settings.advanced.duplicates.label.title'));
         setAction(
             <>
                 <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
@@ -75,7 +76,6 @@ export const LibraryDuplicates = () => {
         );
 
         return () => {
-            setTitle('');
             setAction(null);
         };
     }, [t, gridLayout, checkAlternativeTitles]);

src/modules/library/screens/LibrarySettings.tsx

@@ -39,6 +39,7 @@ 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> => {
     try {
@@ -64,14 +65,13 @@ const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
 
 export function LibrarySettings() {
     const { t } = useTranslation();
-    const { setTitle, setAction } = useNavBarContext();
+    const { setAction } = useNavBarContext();
 
+    useAppTitle(t('library.title'));
     useLayoutEffect(() => {
-        setTitle(t('library.title'));
         setAction(null);
 
         return () => {
-            setTitle('');
             setAction(null);
         };
     }, [t]);