Reader settings

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

@@ -9,23 +9,25 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
-import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 
 export const ButtonSelect = <Value extends string | number>({
     value,
     values,
     setValue,
     valueToDisplayData,
-}: {
-    value: Value;
-    values: Value[];
-    setValue: (value: Value) => void;
-    valueToDisplayData: ValueToDisplayData<Value>;
-}) => {
+    isDefaultable,
+    onDefault,
+}: MultiValueButtonProps<Value>) => {
     const { t } = useTranslation();
 
     return (
         <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+            {isDefaultable && (
+                <Button key="default" onClick={onDefault} variant={value === undefined ? 'contained' : 'outlined'}>
+                    {t('global.label.default')}
+                </Button>
+            )}
             {values.map((displayValue) => (
                 <Button
                     key={displayValue}

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

@@ -7,28 +7,58 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
-import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 
 export const ValueRotationButton = <Value extends string | number>({
     value,
     values,
     setValue,
     valueToDisplayData,
-}: {
-    value: Value;
-    values: Value[];
-    setValue: (value: Value) => void;
-    valueToDisplayData: ValueToDisplayData<Value>;
-}) => {
+    isDefaultable,
+    onDefault,
+    defaultIcon,
+}: MultiValueButtonProps<Value> & { defaultIcon?: ReactNode }) => {
     const { t } = useTranslation();
 
-    const indexOfValue = useMemo(() => values.indexOf(value), [value, values]);
+    const isDefault = value === undefined;
+    const indexOfValue = useMemo(() => {
+        if (isDefault) {
+            return -1;
+        }
+
+        return values.indexOf(value);
+    }, [value, values]);
+
+    if (isDefault) {
+        return (
+            <Button
+                onClick={() => setValue(values[0])}
+                sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                variant="contained"
+                startIcon={defaultIcon}
+                size="large"
+            >
+                {t('global.label.default')}
+            </Button>
+        );
+    }
 
     return (
         <Button
-            onClick={() => setValue(values[(indexOfValue + 1) % values.length])}
+            onClick={() => {
+                const nextValueIndex = (indexOfValue + 1) % values.length;
+                const wasLastValue = nextValueIndex === 0;
+
+                const isDefaultNextValue = isDefaultable && wasLastValue;
+                if (isDefaultNextValue) {
+                    onDefault?.();
+                    return;
+                }
+
+                setValue(values[(indexOfValue + 1) % values.length]);
+            }}
             sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
             variant="contained"
             startIcon={valueToDisplayData[value].icon}

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

@@ -0,0 +1,37 @@
+/*
+ * 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 Slider, { SliderProps } from '@mui/material/Slider';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+
+export const SliderInput = ({
+    label,
+    value,
+    slotProps,
+}: {
+    label: string;
+    value: number | string;
+    slotProps?: {
+        label?: TypographyProps;
+        value?: TypographyProps;
+        slider?: SliderProps;
+    };
+}) => (
+    <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
+        <Stack sx={{ flexBasis: '25%' }}>
+            <Typography {...slotProps?.label} sx={{ ...slotProps?.label?.sx }}>
+                {label}
+            </Typography>
+            <Typography {...slotProps?.value} sx={{ ...slotProps?.value?.sx }}>
+                {value}
+            </Typography>
+        </Stack>
+        <Slider {...slotProps?.slider} sx={{ flexBasis: '75%', ...slotProps?.slider?.sx }} />
+    </Stack>
+);

src/modules/core/components/tabs/TabPanel.tsx

@@ -6,20 +6,21 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import Box, { BoxProps } from '@mui/material/Box';
 import React from 'react';
 
-interface IProps {
+interface IProps extends BoxProps {
     children: React.ReactNode;
     index: any;
     currentIndex: any;
 }
 
 export function TabPanel(props: IProps) {
-    const { children, index, currentIndex } = props;
+    const { children, index, currentIndex, ...boxProps } = props;
 
     return (
-        <div role="tabpanel" hidden={index !== currentIndex} id={`simple-tabpanel-${index}`}>
+        <Box {...boxProps} role="tabpanel" hidden={index !== currentIndex} id={`simple-tabpanel-${index}`}>
             {currentIndex === index && children}
-        </div>
+        </Box>
     );
 }

src/modules/core/components/tabs/TabsMenu.tsx

@@ -35,7 +35,7 @@ export const TabsMenu = forwardRef(
                 indicatorColor="primary"
                 textColor="primary"
                 variant="scrollable"
-                scrollButtons
+                scrollButtons="auto"
                 allowScrollButtonsMobile
                 {...props}
             >