Make reader setting slider inputs resettable to default

src/modules/core/components/buttons/ResetButton.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 Button, { ButtonProps } from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+
+export const ResetButton = (props: ButtonProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Button startIcon={<RestartAltIcon />} {...props}>
+            {t('global.button.reset')}
+        </Button>
+    );
+};

src/modules/core/components/inputs/SliderInput.tsx

@@ -9,21 +9,24 @@
 import Slider, { SliderProps } from '@mui/material/Slider';
 import Typography, { TypographyProps } from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
+import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
 
 export const SliderInput = ({
     label,
     value,
+    onDefault,
     slotProps,
 }: {
     label: string;
     value: number | string;
+    onDefault?: () => void;
     slotProps?: {
         label?: TypographyProps;
         value?: TypographyProps;
         slider?: SliderProps;
     };
 }) => (
-    <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
+    <Stack sx={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
         <Stack sx={{ flexBasis: '25%' }}>
             <Typography {...slotProps?.label} sx={{ ...slotProps?.label?.sx }}>
                 {label}
@@ -33,5 +36,6 @@ export const SliderInput = ({
             </Typography>
         </Stack>
         <Slider {...slotProps?.slider} sx={{ flexBasis: '75%', ...slotProps?.slider?.sx }} />
+        {onDefault && <ResetButton onClick={onDefault} variant="outlined" />}
     </Stack>
 );