Add backup flag selection on backup creation

public/locales/en.json

@@ -1196,8 +1196,8 @@
             "failure": "Could not create backup"
           },
           "label": {
-            "in_progress": "Creating backup…",
             "description": "Back up library as a Tachiyomi backup",
+            "in_progress": "Creating backup…",
             "title": "Create backup"
           }
         },
@@ -1251,6 +1251,19 @@
           }
         }
       },
+      "flag": {
+        "categories": "Categories",
+        "chapters": "Chapters",
+        "client_data": "Client data",
+        "group": {
+          "library": "Library",
+          "settings": "Settings"
+        },
+        "history": "History",
+        "manga": "Manga",
+        "server_settings": "Server settings",
+        "tracking": "Tracking"
+      },
       "title": "Backup"
     },
     "clear_cache": {

src/features/backup/Backup.constants.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { BackupFlag, BackupFlagGroup } from '@/features/backup/Backup.types.ts';
+import { TranslationKey } from '@/base/Base.types.ts';
+
+export const BACKUP_FLAGS_TO_TRANSLATION: Record<BackupFlag, TranslationKey> = {
+    includeCategories: 'settings.backup.flag.categories',
+    includeChapters: 'settings.backup.flag.chapters',
+    includeClientData: 'settings.backup.flag.client_data',
+    includeHistory: 'settings.backup.flag.history',
+    includeServerSettings: 'settings.backup.flag.server_settings',
+    includeTracking: 'settings.backup.flag.tracking',
+};
+
+export const BACKUP_FLAG_GROUP_TO_TRANSLATION: Record<BackupFlagGroup, TranslationKey> = {
+    [BackupFlagGroup.LIBRARY]: 'settings.backup.flag.group.library',
+    [BackupFlagGroup.SETTINGS]: 'settings.backup.flag.group.settings',
+};
+
+export const BACKUP_FLAGS = Object.keys(BACKUP_FLAGS_TO_TRANSLATION) as readonly BackupFlag[];
+
+export const BACKUP_FLAGS_BY_GROUP: Record<BackupFlagGroup, BackupFlag[]> = {
+    [BackupFlagGroup.LIBRARY]: ['includeChapters', 'includeTracking', 'includeHistory', 'includeCategories'],
+    [BackupFlagGroup.SETTINGS]: ['includeClientData', 'includeServerSettings'],
+};

src/features/backup/Backup.types.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { CreateBackupInput } from '@/lib/graphql/generated/graphql.ts';
+
+export enum BackupFlagGroup {
+    LIBRARY = 'library',
+    SETTINGS = 'settings',
+}
+
+export type BackupFlag = keyof Omit<CreateBackupInput, 'clientMutationId'>;
+
+export type BackupFlagInclusionState = Record<BackupFlag, boolean>;

src/features/backup/component/BackupFlagInclusionDialog.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormGroup from '@mui/material/FormGroup';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
+import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import {
+    BACKUP_FLAG_GROUP_TO_TRANSLATION,
+    BACKUP_FLAGS,
+    BACKUP_FLAGS_BY_GROUP,
+    BACKUP_FLAGS_TO_TRANSLATION,
+} from '@/features/backup/Backup.constants.ts';
+import { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
+
+export const BackupFlagInclusionDialog = ({ onCancel, onConfirm }: DialogProps<BackupFlagInclusionState>) => {
+    const { t } = useTranslation();
+
+    const [includeStateByFlag, setIncludeStateByFlag] = useState(
+        Object.fromEntries(BACKUP_FLAGS.map((flag) => [flag, true])) as BackupFlagInclusionState,
+    );
+
+    return (
+        <Dialog open onAbort={onCancel} maxWidth="xs" fullWidth>
+            <DialogTitle>{t('settings.backup.action.create.label.title')}</DialogTitle>
+            <DialogContent>
+                <FormGroup sx={{ gap: 2 }}>
+                    {Object.entries(BACKUP_FLAGS_BY_GROUP).map(([group, flags]) => (
+                        <Stack>
+                            <Typography>{t(BACKUP_FLAG_GROUP_TO_TRANSLATION[group as BackupFlagGroup])}</Typography>
+                            {flags.map((flag) => (
+                                <CheckboxInput
+                                    key={flag}
+                                    label={t(BACKUP_FLAGS_TO_TRANSLATION[flag])}
+                                    checked={includeStateByFlag[flag]}
+                                    onChange={(_, checked) => {
+                                        setIncludeStateByFlag({
+                                            ...includeStateByFlag,
+                                            [flag]: checked,
+                                        });
+                                    }}
+                                />
+                            ))}
+                        </Stack>
+                    ))}
+                </FormGroup>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={onCancel} color="primary">
+                    {t('global.button.cancel')}
+                </Button>
+                <Button onClick={() => onConfirm(includeStateByFlag)} color="primary">
+                    {t('global.button.ok')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

src/features/backup/screens/Backup.tsx

@@ -39,6 +39,8 @@ import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { BrowseTab } from '@/features/browse/Browse.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { BackupFlagInclusionDialog } from '@/features/backup/component/BackupFlagInclusionDialog.tsx';
 
 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
 
@@ -130,16 +132,12 @@ export function Backup() {
     };
 
     const createBackup = async () => {
+        const backupFlagInclusionState = await GlobalDialogManager.show(BackupFlagInclusionDialog);
+
         makeToast(t('settings.backup.action.create.label.in_progress'), 'info');
 
-        const backupFileResponse = await requestManager.createBackupFile({
+        try {
-            includeCategories: true,
+            const backupFileResponse = await requestManager.createBackupFile(backupFlagInclusionState).response;
-            includeChapters: true,
-            includeHistory: true,
-            includeClientData: true,
-            includeTracking: true,
-            includeServerSettings: true,
-        }).response;
 
             const backupFileUrl = backupFileResponse.data?.createBackup.url;
             if (!backupFileUrl) {
@@ -157,6 +155,9 @@ export function Backup() {
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
+        } catch (e) {
+            makeToast(t('settings.backup.action.create.error.failure'), 'error', getErrorMessage(e));
+        }
     };
 
     const validateBackup = async (file: File) => {