Extract app routes into constant

src/modules/manga/components/ContinueReadingButton.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-
 import { Link } from 'react-router-dom';
 import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
 
@@ -39,7 +38,7 @@ export const ContinueReadingButton = ({
                 size="small"
                 sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
                 component={Link}
-                to={`${mangaLinkTo}chapter/${chapter.sourceOrder}`}
+                to={`${mangaLinkTo}/chapter/${chapter.sourceOrder}`}
                 state={{ resumeMode: Chapters.getReaderResumeMode(chapter) }}
                 onClick={(e) => e.stopPropagation()}
                 onMouseDown={(e) => e.stopPropagation()}

src/modules/manga/components/MangaActionMenuItems.tsx

@@ -35,6 +35,7 @@ import { NestedMenuItem } from '@/modules/core/components/menu/NestedMenuItem.ts
 import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaAction, MangaDownloadInfo, MangaIdInfo, MangaUnreadInfo } from '@/modules/manga/Manga.types.ts';
 import { actionToTranslationKey } from '@/modules/manga/Manga.constants.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const;
 
@@ -156,7 +157,7 @@ export const MangaActionMenuItems = ({
             )}
             {isSingleMode && (
                 <Link
-                    to={`/migrate/source/${manga?.sourceId}/manga/${manga?.id}/search?query=${manga?.title}`}
+                    to={`${AppRoutes.migrate.childRoutes.search.path(manga?.sourceId ?? -1, manga?.id ?? -1)}?query=${manga?.title}`}
                     state={{ mangaTitle: manga?.title }}
                     style={{ textDecoration: 'none', color: 'inherit' }}
                 >

src/modules/manga/components/MangaToolbarMenu.tsx

@@ -23,6 +23,7 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useCategorySelect } from '@/modules/category/hooks/useCategorySelect.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 interface IProps {
     manga: Pick<MangaType, 'id' | 'inLibrary' | 'sourceId' | 'title'>;
@@ -65,7 +66,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                         <>
                             <Tooltip title={t('global.button.migrate')}>
                                 <Link
-                                    to={`/migrate/source/${manga.sourceId}/manga/${manga.id}/search?query=${manga.title}`}
+                                    to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
                                     state={{ mangaTitle: manga.title }}
                                     style={{ textDecoration: 'none', color: 'inherit' }}
                                 >
@@ -125,7 +126,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                             <MenuItem
                                 key="migrate"
                                 component={Link}
-                                to={`/migrate/source/${manga.sourceId}/manga/${manga.id}/search?query=${manga.title}`}
+                                to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
                                 state={{ mangaTitle: manga.title }}
                                 style={{ textDecoration: 'none', color: 'inherit' }}
                             >

src/modules/manga/components/TrackMangaButton.tsx

@@ -19,8 +19,8 @@ import { Trackers } from '@/modules/tracker/services/Trackers.ts';
 import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
 import { GetTrackersSettingsQuery, MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
-
 import { MangaTrackRecordInfo } from '@/modules/manga/Manga.types.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick<MangaType, 'title'> }) => {
     const { t } = useTranslation();
@@ -40,7 +40,7 @@ export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick
         }
 
         if (!loggedInTrackers.length) {
-            navigate('/settings/tracking');
+            navigate(AppRoutes.tracker.path);
             return;
         }
 

src/modules/manga/components/cards/MangaCard.tsx

@@ -20,6 +20,7 @@ import { MangaCardMode, MangaCardProps } from '@/modules/manga/Manga.types.ts';
 import { ContinueReadingButton } from '@/modules/manga/components/ContinueReadingButton.tsx';
 import { MangaBadges } from '@/modules/manga/components/MangaBadges.tsx';
 import { GridLayout } from '@/modules/core/Core.types.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 const getMangaLinkTo = (
     mode: MangaCardMode,
@@ -31,9 +32,9 @@ const getMangaLinkTo = (
         case 'default':
         case 'source':
         case 'duplicate':
-            return `/manga/${mangaId}/`;
+            return AppRoutes.manga.path(mangaId);
         case 'migrate.search':
-            return `/migrate/source/${sourceId}/manga/${mangaId}/search?query=${mangaTitle}`;
+            return `${AppRoutes.migrate.childRoutes.search.path(sourceId ?? '-1', mangaId)}?query=${mangaTitle}`;
         case 'migrate.select':
             return '';
         default:

src/modules/manga/hooks/useManageMangaLibraryState.tsx

@@ -20,6 +20,7 @@ import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { awaitConfirmation } from '@/modules/core/utils/AwaitableDialog.tsx';
 import { GetCategoriesBaseQuery, GetCategoriesBaseQueryVariables, MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { GET_CATEGORIES_BASE } from '@/lib/graphql/queries/CategoryQuery.ts';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
 export const useManageMangaLibraryState = (
     manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -136,7 +137,7 @@ export const useManageMangaLibraryState = (
                         extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
                         confirm: { title: t('global.button.add') },
                     },
-                    onExtra: () => navigate(`/manga/${duplicatedLibraryMangas!.data.mangas.nodes[0].id}`),
+                    onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
                 });
             }