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/screens/Browse.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Tab from '@mui/material/Tab';
 import { useTranslation } from 'react-i18next';
 import { Sources } from '@/screens/Sources';
@@ -14,17 +14,25 @@ import { Extensions } from '@/screens/Extensions';
 import { TabPanel } from '@/components/tabs/TabPanel.tsx';
 import { TabsWrapper } from '@/components/tabs/TabsWrapper.tsx';
 import { TabsMenu } from '@/components/tabs/TabsMenu.tsx';
+import { Migration } from '@/screens/Migration.tsx';
+import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 
 export function Browse() {
     const { t } = useTranslation();
+    const { setTitle } = useContext(NavBarContext);
 
     const [tabNum, setTabNum] = useState<number>(0);
 
+    useEffect(() => {
+        setTitle(t('global.label.browse'));
+    }, [t]);
+
     return (
         <TabsWrapper>
             <TabsMenu value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
                 <Tab sx={{ textTransform: 'none' }} label={t('source.title')} />
                 <Tab sx={{ textTransform: 'none' }} label={t('extension.title')} />
+                <Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
             </TabsMenu>
             <TabPanel index={0} currentIndex={tabNum}>
                 <Sources />
@@ -32,6 +40,9 @@ export function Browse() {
             <TabPanel index={1} currentIndex={tabNum}>
                 <Extensions />
             </TabPanel>
+            <TabPanel index={2} currentIndex={tabNum}>
+                <Migration />
+            </TabPanel>
         </TabsWrapper>
     );
 }