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>
 );

src/modules/reader/components/settings/hotkeys/ReaderHotkeysSettings.tsx

@@ -9,11 +9,10 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderSettingHotkey } from '@/modules/reader/components/settings/hotkeys/ReaderSettingHotkey.tsx';
 import { DEFAULT_READER_SETTINGS, READER_HOTKEYS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
 
 export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSettingsTypeProps) => {
     const { t } = useTranslation();
@@ -33,13 +32,7 @@ export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSetting
                 />
             ))}
             <Stack sx={{ alignItems: 'end' }}>
-                <Button
-                    variant="contained"
-                    startIcon={<RestartAltIcon />}
-                    onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)}
-                >
-                    {t('global.button.reset')}
-                </Button>
+                <ResetButton onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)} />
             </Stack>
         </Stack>
     );

src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx

@@ -42,6 +42,8 @@ export const ReaderLayoutSettings = ({
         <ReaderSettingPageGap
             pageGap={settings.pageGap}
             readingMode={settings.readingMode}
+            isDefaultable={isDefaultable}
+            onDefault={() => onDefault?.('pageGap')}
             updateSetting={(...args) => updateSetting('pageGap', ...args)}
         />
         <ReaderSettingReadingDirection
@@ -88,6 +90,8 @@ export const ReaderLayoutSettings = ({
         <ReaderSettingWidth
             readerWidth={settings.readerWidth.value}
             pageScaleMode={settings.pageScaleMode.value}
+            isDefaultable={isDefaultable}
+            onDefault={() => onDefault?.('readerWidth')}
             updateSetting={(...args) => updateSetting(...args)}
         />
     </Stack>

src/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx

@@ -7,18 +7,21 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
 import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 
 export const ReaderSettingPageGap = ({
     pageGap,
     readingMode,
+    onDefault,
     updateSetting,
-}: Pick<IReaderSettingsWithDefaultFlag, 'pageGap' | 'readingMode'> & {
-    updateSetting: (gap: number, commit: boolean) => void;
-}) => {
+}: Pick<IReaderSettingsWithDefaultFlag, 'pageGap' | 'readingMode'> &
+    Pick<MultiValueButtonDefaultableProps<IReaderSettings['pageGap']>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: (gap: number, commit: boolean) => void;
+    }) => {
     const { t } = useTranslation();
 
     const isChangeable = readingMode.value !== ReadingMode.WEBTOON && isContinuousReadingMode(readingMode.value);
@@ -30,6 +33,7 @@ export const ReaderSettingPageGap = ({
         <SliderInput
             label={t('reader.settings.label.page_gap')}
             value={t('global.value', { value: pageGap.value, unit: t('global.unit.px') })}
+            onDefault={onDefault}
             slotProps={{
                 slider: {
                     defaultValue: DEFAULT_READER_SETTINGS.readerWidth.value,

src/modules/reader/components/settings/layout/ReaderSettingWidth.tsx

@@ -14,14 +14,18 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
 import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
+import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
 
 export const ReaderSettingWidth = ({
     readerWidth,
     pageScaleMode,
+    onDefault,
     updateSetting,
-}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> & {
-    updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
-}) => {
+}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
+    Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+    }) => {
     const { t } = useTranslation();
 
     if (!isReaderWidthEditable(pageScaleMode)) {
@@ -30,11 +34,14 @@ export const ReaderSettingWidth = ({
 
     return (
         <Stack>
-            <CheckboxInput
-                label={t('reader.settings.label.limit_reader_width')}
-                checked={readerWidth.enabled}
-                onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
-            />
+            <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <CheckboxInput
+                    label={t('reader.settings.label.limit_reader_width')}
+                    checked={readerWidth.enabled}
+                    onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
+                />
+                {onDefault && <ResetButton onClick={onDefault} variant="outlined" />}
+            </Stack>
             {readerWidth.enabled && (
                 <SliderInput
                     label={t('reader.settings.label.reader_width')}