Support descriptions in "CheckboxInput"

src/base/components/inputs/CheckboxInput.tsx

@@ -10,12 +10,43 @@ import type { CheckboxProps } from '@mui/material/Checkbox';
 import Checkbox from '@mui/material/Checkbox';
 import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import React from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
-interface IProps extends CheckboxProps {
+type BaseProps = CheckboxProps;
-    label?: FormControlLabelProps['label'];
+type LabelProps = { label?: FormControlLabelProps['label'] };
-}
+type PrimaryTextProps = {
+    primaryText?: FormControlLabelProps['label'];
+    secondaryText?: FormControlLabelProps['label'];
+};
 
-export const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
+type Props = BaseProps &
-    <FormControlLabel control={<Checkbox {...rest} />} label={label} sx={sx} />
+    ((LabelProps & PropertiesNever<PrimaryTextProps>) | (PropertiesNever<LabelProps> & PrimaryTextProps));
+
+export const CheckboxInput = ({ primaryText, secondaryText, sx, ...rest }: Props) => (
+    <FormControlLabel
+        control={<Checkbox {...rest} />}
+        label={
+            primaryText && !secondaryText ? (
+                primaryText
+            ) : (
+                <Stack
+                    sx={{
+                        // Padding comes from the MUI Checkbox component
+                        pt: '9px',
+                    }}
+                >
+                    {typeof primaryText === 'string' ? <Typography>{primaryText}</Typography> : primaryText}
+                    {typeof secondaryText === 'string' ? (
+                        <Typography variant="body2" color="textSecondary">
+                            {secondaryText}
+                        </Typography>
+                    ) : (
+                        secondaryText
+                    )}
+                </Stack>
+            )
+        }
+        sx={sx}
+    />
 );

src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx

@@ -39,20 +39,8 @@ export const MigrationBulkSearchOptionsDialog = ({
             <DialogTitle>{t`Search options`}</DialogTitle>
             <DialogContent dividers>
                 <CheckboxInput
-                    label={
+                    primaryText={t`Ignore matches that are behind in chapters`}
-                        <Stack
+                    secondaryText={t`Automatically select matches if they have at least the same latest chapter`}
-                            sx={{
-                                // Padding comes from the MUI Checkbox component
-                                pt: '9px',
-                            }}
-                        >
-                            <Typography>{t`Ignore matches that are behind in chapters`}</Typography>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                            >{t`Automatically select matches if they have at least the same latest chapter`}</Typography>
-                        </Stack>
-                    }
                     sx={{
                         alignItems: 'start',
                     }}
@@ -60,20 +48,8 @@ export const MigrationBulkSearchOptionsDialog = ({
                     onChange={(_, checked) => setIgnoreOutdatedMatches(checked)}
                 />
                 <CheckboxInput
-                    label={
+                    primaryText={t`Ignore matches without newer chapters`}
-                        <Stack
+                    secondaryText={t`Automatically select matches if they have additional chapters`}
-                            sx={{
-                                // Padding comes from the MUI Checkbox component
-                                pt: '9px',
-                            }}
-                        >
-                            <Typography>{t`Ignore matches without newer chapters`}</Typography>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                            >{t`Automatically select matches if they have additional chapters`}</Typography>
-                        </Stack>
-                    }
                     sx={{
                         alignItems: 'start',
                     }}
@@ -81,20 +57,8 @@ export const MigrationBulkSearchOptionsDialog = ({
                     onChange={(_, checked) => setRequireAdditionalChapters(checked)}
                 />
                 <CheckboxInput
-                    label={
+                    primaryText={t`Ignore matches with missing chapters`}
-                        <Stack
+                    secondaryText={t`Automatically select matches if they have no missing chapters`}
-                            sx={{
-                                // Padding comes from the MUI Checkbox component
-                                pt: '9px',
-                            }}
-                        >
-                            <Typography>{t`Ignore matches with missing chapters`}</Typography>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                            >{t`Automatically select matches if they have no missing chapters`}</Typography>
-                        </Stack>
-                    }
                     sx={{
                         alignItems: 'start',
                     }}
@@ -123,20 +87,8 @@ export const MigrationBulkSearchOptionsDialog = ({
                     </Typography>
                 </Stack>
                 <CheckboxInput
-                    label={
+                    primaryText={t`Advanced search mode`}
-                        <Stack
+                    secondaryText={t`Breaks down the title into keywords for a wider search`}
-                            sx={{
-                                // Padding comes from the MUI Checkbox component
-                                pt: '9px',
-                            }}
-                        >
-                            <Typography>{t`Advanced search mode`}</Typography>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                            >{t`Breaks down the title into keywords for a wider search`}</Typography>
-                        </Stack>
-                    }
                     sx={{
                         alignItems: 'start',
                     }}
@@ -144,20 +96,8 @@ export const MigrationBulkSearchOptionsDialog = ({
                     onChange={(_, checked) => setPerformAdvancedSearch(checked)}
                 />
                 <CheckboxInput
-                    label={
+                    primaryText={t`Match based on chapter number`}
-                        <Stack
+                    secondaryText={t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`}
-                            sx={{
-                                // Padding comes from the MUI Checkbox component
-                                pt: '9px',
-                            }}
-                        >
-                            <Typography>{t`Match based on chapter number`}</Typography>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                            >{t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`}</Typography>
-                        </Stack>
-                    }
                     sx={{
                         alignItems: 'start',
                     }}