Structure "reader" in sub-features

src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import AutoModeIcon from '@mui/icons-material/AutoMode';
+import {
+    IReaderSettings,
+    ProgressBarPosition,
+    ProgressBarPositionAutoVertical,
+} from '@/features/reader/Reader.types.ts';
+import { ValueToDisplayData } from '@/features/core/Core.types.ts';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ProgressBarPosition> = {
+    [ProgressBarPosition.AUTO]: {
+        title: 'global.label.auto',
+        icon: <AutoModeIcon />,
+    },
+    [ProgressBarPosition.BOTTOM]: {
+        title: 'global.label.bottom',
+        icon: <ArrowBackIosNewIcon sx={{ transform: 'rotate(90deg)' }} />,
+    },
+    [ProgressBarPosition.LEFT]: {
+        title: 'global.label.left',
+        icon: <ArrowForwardIosIcon />,
+    },
+    [ProgressBarPosition.RIGHT]: {
+        title: 'global.label.right',
+        icon: <ArrowBackIosNewIcon />,
+    },
+};
+
+const PROGRESS_BAR_POSITION_VALUES = Object.values(ProgressBarPosition).filter((value) => typeof value === 'number');
+
+const PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES = Object.values(
+    ProgressBarPositionAutoVertical,
+) as unknown as TupleUnion<keyof typeof ProgressBarPositionAutoVertical>;
+
+export const ReaderSettingProgressBarPosition = ({
+    progressBarPosition,
+    progressBarPositionAutoVertical,
+    updateSetting,
+}: Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
+    updateSetting: <
+        Position extends keyof Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'>,
+    >(
+        filter: Position,
+        value: IReaderSettings[Position],
+    ) => void;
+}) => {
+    const { t } = useTranslation();
+
+    const isAutoPosition = progressBarPosition === ProgressBarPosition.AUTO;
+
+    return (
+        <>
+            <ButtonSelectInput
+                label={t('reader.settings.progress_bar.position')}
+                value={progressBarPosition}
+                values={PROGRESS_BAR_POSITION_VALUES}
+                setValue={(position) => updateSetting('progressBarPosition', position)}
+                valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+            />
+            {isAutoPosition && (
+                <ButtonSelectInput
+                    label={t('reader.settings.progress_bar.auto_vertical_position.title')}
+                    value={progressBarPositionAutoVertical}
+                    values={PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES}
+                    setValue={(position) => updateSetting('progressBarPositionAutoVertical', position)}
+                    valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+                />
+            )}
+        </>
+    );
+};

src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarSize.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettings, ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.types.ts';
+import { SliderInput } from '@/features/core/components/inputs/SliderInput.tsx';
+import { AUTO_SCROLL_SPEED, DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+
+export const ReaderSettingProgressBarSize = ({
+    overlayMode,
+    progressBarType,
+    progressBarSize,
+    setProgressBarSize,
+    onDefault,
+}: Pick<IReaderSettings, 'progressBarType' | 'progressBarSize' | 'overlayMode'> & {
+    setProgressBarSize: (size: number, commit: boolean) => void;
+    onDefault: () => void;
+}) => {
+    const { t } = useTranslation();
+    const isChangeable = overlayMode === ReaderOverlayMode.DESKTOP && progressBarType === ProgressBarType.STANDARD;
+
+    if (!isChangeable) {
+        return null;
+    }
+
+    return (
+        <SliderInput
+            label={t('reader.settings.progress_bar.size')}
+            value={t('global.value', { value: progressBarSize, unit: t('global.unit.px') })}
+            onDefault={onDefault}
+            slotProps={{
+                slider: {
+                    defaultValue: DEFAULT_READER_SETTINGS.progressBarSize,
+                    value: progressBarSize,
+                    step: AUTO_SCROLL_SPEED.step,
+                    min: AUTO_SCROLL_SPEED.min,
+                    max: AUTO_SCROLL_SPEED.max,
+                    onChange: (_, value) => {
+                        setProgressBarSize(value as number, false);
+                    },
+                    onChangeCommitted: (_, value) => {
+                        setProgressBarSize(value as number, true);
+                    },
+                },
+            }}
+        />
+    );
+};

src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarType.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettings, ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.types.ts';
+import { ValueToDisplayData } from '@/features/core/Core.types.ts';
+import { HiddenProgressBarIcon } from '@/assets/icons/svg/HiddenProgressBarIcon.tsx';
+import { StandardProgressBarIcon } from '@/assets/icons/svg/StandardProgressBarIcon.tsx';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ProgressBarType> = {
+    [ProgressBarType.HIDDEN]: {
+        title: 'global.label.hidden',
+        icon: <HiddenProgressBarIcon />,
+    },
+    [ProgressBarType.STANDARD]: {
+        title: 'global.label.standard',
+        icon: <StandardProgressBarIcon />,
+    },
+};
+
+const PROGRESS_BAR_TYPE_VALUES = Object.values(ProgressBarType).filter((value) => typeof value === 'number');
+
+export const ReaderSettingProgressBarType = ({
+    overlayMode,
+    progressBarType,
+    setProgressBarType,
+}: Pick<IReaderSettings, 'progressBarType' | 'overlayMode'> & {
+    setProgressBarType: (progressBarType: ProgressBarType) => void;
+}) => {
+    const { t } = useTranslation();
+
+    if (overlayMode !== ReaderOverlayMode.DESKTOP) {
+        return null;
+    }
+
+    return (
+        <ButtonSelectInput
+            label={t('reader.settings.progress_bar.style')}
+            value={progressBarType}
+            values={PROGRESS_BAR_TYPE_VALUES}
+            setValue={setProgressBarType}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};