Extract app routes into constant

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -32,6 +32,7 @@ import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrol
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 const DEFAULT_MANGA = { id: -1, title: '' };
 const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
@@ -79,7 +80,7 @@ export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => {
                                 <TypographyMaxLines lines={1} component="h1" variant="h5">
                                     <Link
                                         component={RouterLink}
-                                        to={`/manga/${mangaId}`}
+                                        to={AppRoutes.manga.path(mangaId)}
                                         sx={{ textDecoration: 'none', color: 'inherit' }}
                                     >
                                         {title}

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx

@@ -12,6 +12,7 @@ import Link from '@mui/material/Link';
 
 import { Link as RouterLink } from 'react-router-dom';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 export const ReaderNavBarDesktopMetadata = ({
     mangaId,
@@ -25,7 +26,11 @@ export const ReaderNavBarDesktopMetadata = ({
     <Stack>
         <Tooltip title={mangaTitle} placement="right">
             <TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
-                <Link component={RouterLink} to={`/manga/${mangaId}`} sx={{ textDecoration: 'none', color: 'inherit' }}>
+                <Link
+                    component={RouterLink}
+                    to={AppRoutes.manga.path(mangaId)}
+                    sx={{ textDecoration: 'none', color: 'inherit' }}
+                >
                     {mangaTitle}
                 </Link>
             </TypographyMaxLines>

src/modules/reader/components/viewer/ReaderTransitionPage.tsx

@@ -27,6 +27,7 @@ import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/Read
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 const ChapterInfo = ({
     title,
@@ -173,7 +174,7 @@ export const ReaderTransitionPage = ({
                                 e.stopPropagation();
                             }}
                             variant="contained"
-                            to={`/manga/${manga?.id}`}
+                            to={AppRoutes.manga.path(manga?.id ?? -1)}
                         >
                             {t('reader.transition_page.exit.manga_page')}
                         </Button>

src/modules/reader/services/ReaderService.ts

@@ -43,6 +43,7 @@ import {
 } from '@/modules/reader/utils/Reader.utils.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { Queue } from '@/lib/Queue.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
     ltr: 'rtl',
@@ -330,7 +331,7 @@ export class ReaderService {
                 return () => {};
             }
 
-            return navigate(`/manga/${manga.id}`);
+            return navigate(AppRoutes.manga.path(manga.id));
         }, [manga]);
 
         switch (exitMode) {