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/source/GridLayouts.tsx

@@ -10,17 +10,18 @@ import { IconButton, Menu, MenuItem, FormControlLabel, Radio, Tooltip } from '@m
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { useTranslation } from 'react-i18next';
-import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import { GridLayout } from '@/components/context/LibraryOptionsContext';
 
 // TODO: clean up this to use a FormControl, and remove dependency on name o radio button
-export function SourceGridLayout() {
+export function GridLayouts({
+    gridLayout,
+    onChange,
+}: {
+    gridLayout: GridLayout;
+    onChange: (gridLayout: GridLayout) => void;
+}) {
     const { t } = useTranslation();
 
-    const {
-        options: { SourcegridLayout },
-        setOptions,
-    } = useLibraryOptionsContext();
-
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event: any) => {
@@ -30,10 +31,8 @@ export function SourceGridLayout() {
         setAnchorEl(null);
     };
 
-    function setGridContextOptions(e: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
-        if (checked) {
-            setOptions((prev: any) => ({ ...prev, SourcegridLayout: parseInt(e.target.name, 10) }));
-        }
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        onChange(parseInt(e.target.name, 10));
     }
 
     return (
@@ -64,8 +63,8 @@ export function SourceGridLayout() {
                         control={
                             <Radio
                                 name={GridLayout.Compact.toString()}
-                                checked={SourcegridLayout === GridLayout.Compact || SourcegridLayout === undefined}
-                                onChange={setGridContextOptions}
+                                checked={gridLayout === GridLayout.Compact}
+                                onChange={handleChange}
                             />
                         }
                     />
@@ -76,8 +75,8 @@ export function SourceGridLayout() {
                         control={
                             <Radio
                                 name={GridLayout.Comfortable.toString()}
-                                checked={SourcegridLayout === GridLayout.Comfortable}
-                                onChange={setGridContextOptions}
+                                checked={gridLayout === GridLayout.Comfortable}
+                                onChange={handleChange}
                             />
                         }
                     />
@@ -88,8 +87,8 @@ export function SourceGridLayout() {
                         control={
                             <Radio
                                 name={GridLayout.List.toString()}
-                                checked={SourcegridLayout === GridLayout.List}
-                                onChange={setGridContextOptions}
+                                checked={gridLayout === GridLayout.List}
+                                onChange={handleChange}
                             />
                         }
                     />

src/components/source/SourceGridLayout.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import { GridLayouts } from '@/components/source/GridLayouts.tsx';
+
+export function SourceGridLayout() {
+    const {
+        options: { SourcegridLayout },
+        setOptions,
+    } = useLibraryOptionsContext();
+
+    function setGridContextOptions(gridLayout: GridLayout) {
+        setOptions((prev: any) => ({ ...prev, SourcegridLayout: gridLayout }));
+    }
+
+    return <GridLayouts gridLayout={SourcegridLayout} onChange={setGridContextOptions} />;
+}