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);