Feature/manga migration (#536)

* Add "migration" tab to "Browse" screen

* Add missing useEffect cleanup for navbar title and actions

* Make "SourceGridLayout" reusable

* Add migration tab to "Browse"

* Add migration logic

src/components/manga/MangaActionMenuItems.tsx

@@ -15,6 +15,8 @@ import { useTranslation } from 'react-i18next';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import Label from '@mui/icons-material/Label';
 import { useMemo, useState } from 'react';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
+import { Link, useNavigate } from 'react-router-dom';
 import { TManga } from '@/typings.ts';
 import { actionToTranslationKey, MangaAction, MangaDownloadInfo, Mangas, MangaUnreadInfo } from '@/lib/data/Mangas.ts';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
@@ -28,7 +30,7 @@ const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as
 type BaseProps = { onClose: (selectionModeState: boolean) => void; setHideMenu: (hide: boolean) => void };
 
 export type SingleModeProps = {
-    manga: Pick<TManga, 'id'> & MangaDownloadInfo & MangaUnreadInfo;
+    manga: Pick<TManga, 'id' | 'title' | 'source'> & MangaDownloadInfo & MangaUnreadInfo;
     handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
 };
 
@@ -49,6 +51,8 @@ export const MangaActionMenuItems = ({
 }: Props) => {
     const { t } = useTranslation();
 
+    const navigate = useNavigate();
+
     const [isCategorySelectOpen, setIsCategorySelectOpen] = useState(false);
 
     const isSingleMode = !!manga;
@@ -129,6 +133,23 @@ export const MangaActionMenuItems = ({
                     title={getMenuItemTitle('mark_as_unread', readMangas.length)}
                 />
             )}
+            {isSingleMode && (
+                <Link
+                    to={`/migrate/source/${manga?.source?.id}/manga/${manga?.id}/search?query=${manga?.title}`}
+                    state={{ mangaTitle: manga?.title }}
+                    style={{ textDecoration: 'none', color: 'inherit' }}
+                >
+                    <MenuItem
+                        onClick={() =>
+                            navigate(
+                                `/migrate/source/${manga?.source?.id}/manga/${manga?.id}/search?query=${manga?.title}`,
+                            )
+                        }
+                        Icon={SyncAltIcon}
+                        title={getMenuItemTitle('migrate', selectedMangas.length)}
+                    />
+                </Link>
+            )}
             <MenuItem
                 onClick={() => {
                     setIsCategorySelectOpen(true);

src/components/manga/MangaToolbarMenu.tsx

@@ -21,6 +21,8 @@ import {
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { CategorySelect } from '@/components/navbar/action/CategorySelect';
 import { TManga } from '@/typings.ts';
 
@@ -32,6 +34,7 @@ interface IProps {
 
 export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
     const { t } = useTranslation();
+
     const theme = useTheme();
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
 
@@ -57,6 +60,17 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                             <Refresh />
                         </IconButton>
                     </Tooltip>
+                    <Tooltip title={t('global.button.migrate')}>
+                        <Link
+                            to={`/migrate/source/${manga.source?.id}/manga/${manga.id}/search?query=${manga.title}`}
+                            state={{ mangaTitle: manga.title }}
+                            style={{ textDecoration: 'none', color: 'inherit' }}
+                        >
+                            <IconButton disabled={refreshing}>
+                                <SyncAltIcon />
+                            </IconButton>
+                        </Link>
+                    </Tooltip>
                     {manga.inLibrary && (
                         <Tooltip title={t('manga.label.edit_categories')}>
                             <IconButton