Add bulk migration

src/features/migration/components/MIgrationEntryGroup.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 type { MigrationEntryStatus, TMigrationEntry } from '@/features/migration/Migration.types.ts';
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
+import {} from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { MigrationEntry } from '@/features/migration/components/migration-entry/MigrationEntry.tsx';
+import { MigrationManager } from '@/features/migration/MigrationManager.ts';
+
+export const MigrationEntryGroup = ({
+    status,
+    title,
+    entries,
+    color,
+    isMigrating = false,
+}: {
+    status: MigrationEntryStatus;
+    title: string;
+    entries: TMigrationEntry[];
+    color: ButtonProps['color'];
+    isMigrating?: boolean;
+}) => {
+    const isExpanded = MigrationManager.useGroupExpandState(status);
+
+    if (!entries.length) {
+        return null;
+    }
+
+    return (
+        <Stack sx={{ width: '100%', gap: 2 }}>
+            <Button
+                onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
+                color={color}
+                variant="outlined"
+                startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                size="large"
+                sx={{
+                    py: 2,
+                    justifyContent: 'center',
+                    '& .MuiButton-startIcon': {
+                        position: 'absolute',
+                        left: (theme) => theme.spacing(4),
+                        margin: 0,
+                    },
+                }}
+            >
+                {title}
+            </Button>
+            <Collapse in={isExpanded} unmountOnExit>
+                <Stack sx={{ gap: 1 }}>
+                    {entries.map((entry) => (
+                        <MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
+                    ))}
+                </Stack>
+            </Collapse>
+        </Stack>
+    );
+};