Make active reading mode default settings editable in reader

public/locales/en.json

@@ -940,6 +940,7 @@
         "ltr": "Left to right",
         "rtl": "Right to left"
       },
+      "source_series": "Series settings",
       "tap_zones": {
         "edge": "Edge",
         "invert": "Invert tap zones",

src/modules/reader/components/settings/ReaderSettingsTabs.tsx

@@ -87,7 +87,6 @@ const BaseReaderSettingsTabs = ({
                                 return (
                                     <TabPanel key={id} index={id} currentIndex={activeTab}>
                                         <ReaderDefaultLayoutSettings
-                                            settings={settings}
                                             updateSetting={(...args) => updateSetting(...args)}
                                         />
                                     </TabPanel>
@@ -102,6 +101,7 @@ const BaseReaderSettingsTabs = ({
                                         setShowPreview={setShowPreview!}
                                         isDefaultable={!areDefaultSettings}
                                         onDefault={(...args) => deleteSetting?.(...args)}
+                                        isSeriesMode
                                     />
                                 </TabPanel>
                             );

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

@@ -16,27 +16,35 @@ import {
     READING_MODE_VALUES,
 } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
+import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 
-export const ReaderDefaultLayoutSettings = (
-    props: Omit<ComponentProps<typeof ReaderLayoutSettings>, 'setShowPreview'>,
-) => {
-    const { settings, updateSetting } = props;
+export const ReaderDefaultLayoutSettings = ({
+    profiles = READING_MODE_VALUES,
+    readingMode,
+    ...props
+}: Omit<ComponentProps<typeof ReaderLayoutSettings>, 'setShowPreview' | 'settings'> & {
+    profiles?: ReadingMode[];
+    readingMode?: IReaderSettingsWithDefaultFlag['readingMode'];
+}) => {
+    const { updateSetting, isSeriesMode } = props;
 
     const { t } = useTranslation();
 
     return (
-        <Stack sx={{ gap: 2, pb: 2 }}>
-            <Stack sx={{ pt: 2, px: 2 }}>
-                <ReaderSettingReadingMode
-                    readingMode={settings.readingMode}
-                    setReadingMode={(value) => updateSetting('readingMode', value)}
-                />
-            </Stack>
-            {READING_MODE_VALUES.map((readingMode) => (
+        <Stack sx={{ gap: 2, pb: Number(!isSeriesMode) * 2 }}>
+            {readingMode !== undefined && (
+                <Stack sx={{ pt: 2, px: 2 }}>
+                    <ReaderSettingReadingMode
+                        readingMode={readingMode}
+                        setReadingMode={(value) => updateSetting('readingMode', value)}
+                    />
+                </Stack>
+            )}
+            {profiles.map((profile) => (
                 <ReaderSettingProfileSettings
-                    key={readingMode}
-                    profile={readingMode}
-                    title={t(READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode].title)}
+                    key={profile}
+                    profile={profile}
+                    title={t(READING_MODE_VALUE_TO_DISPLAY_DATA[profile].title)}
                     {...props}
                 />
             ))}

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

@@ -7,6 +7,9 @@
  */
 
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import { useTranslation } from 'react-i18next';
 import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
 import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
 import { ReaderSettingTapZoneLayout } from '@/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx';
@@ -18,6 +21,7 @@ import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layou
 import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
 import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
 import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
+import { ReaderDefaultLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderDefaultLayoutSettings.tsx';
 
 export const ReaderLayoutSettings = ({
     setShowPreview,
@@ -25,73 +29,92 @@ export const ReaderLayoutSettings = ({
     updateSetting,
     isDefaultable,
     onDefault,
+    isSeriesMode,
 }: ReaderSettingsTypeProps & {
     setShowPreview: TReaderTapZoneContext['setShowPreview'];
-}) => (
-    <Stack sx={{ gap: 2 }}>
-        <DefaultSettingFootnote areDefaultSettings={!isDefaultable} />
-        {isDefaultable && (
-            <ReaderSettingReadingMode
+    isSeriesMode?: boolean;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ gap: 2 }}>
+            <DefaultSettingFootnote areDefaultSettings={!isDefaultable} />
+            {isSeriesMode && (
+                <>
+                    <Typography>{t('reader.settings.source_series')}</Typography>
+                    <ReaderSettingReadingMode
+                        readingMode={settings.readingMode}
+                        setReadingMode={(value) => updateSetting('readingMode', value)}
+                        isDefaultable={isDefaultable}
+                        onDefault={() => onDefault?.('readingMode')}
+                    />
+                </>
+            )}
+            <ReaderSettingPageGap
+                pageGap={settings.pageGap}
                 readingMode={settings.readingMode}
-                setReadingMode={(value) => updateSetting('readingMode', value)}
                 isDefaultable={isDefaultable}
-                onDefault={() => onDefault?.('readingMode')}
+                onDefault={() => onDefault?.('pageGap')}
+                updateSetting={(...args) => updateSetting('pageGap', ...args)}
             />
-        )}
-        <ReaderSettingPageGap
-            pageGap={settings.pageGap}
-            readingMode={settings.readingMode}
-            isDefaultable={isDefaultable}
-            onDefault={() => onDefault?.('pageGap')}
-            updateSetting={(...args) => updateSetting('pageGap', ...args)}
-        />
-        <ReaderSettingReadingDirection
-            readingDirection={settings.readingDirection}
-            setReadingDirection={(value) => updateSetting('readingDirection', value)}
-            isDefaultable={isDefaultable}
-            onDefault={() => onDefault?.('readingDirection')}
-        />
-        <ReaderSettingTapZoneLayout
-            tapZoneLayout={settings.tapZoneLayout}
-            setTapZoneLayout={(value) => {
-                setShowPreview(true);
-                updateSetting('tapZoneLayout', value);
-            }}
-            isDefaultable={isDefaultable}
-            onDefault={() => {
-                setShowPreview(true);
-                onDefault?.('tapZoneLayout');
-            }}
-        />
-        <ReaderSettingTapZoneInvertMode
-            tapZoneInvertMode={settings.tapZoneInvertMode}
-            setTapZoneInvertMode={(value) => {
-                setShowPreview(true);
-                updateSetting('tapZoneInvertMode', value);
-            }}
-            isDefaultable={isDefaultable}
-            onDefault={() => {
-                setShowPreview(true);
-                onDefault?.('tapZoneInvertMode');
-            }}
-        />
-        <ReaderSettingPageScaleMode
-            pageScaleMode={settings.pageScaleMode}
-            setPageScaleMode={(value) => updateSetting('pageScaleMode', value)}
-            isDefaultable={isDefaultable}
-            onDefault={() => onDefault?.('pageScaleMode')}
-        />
-        <ReaderSettingStretchPage
-            pageScaleMode={settings.pageScaleMode.value}
-            shouldStretchPage={settings.shouldStretchPage.value}
-            setShouldStretchPage={(value) => updateSetting('shouldStretchPage', value)}
-        />
-        <ReaderSettingWidth
-            readerWidth={settings.readerWidth.value}
-            pageScaleMode={settings.pageScaleMode.value}
-            isDefaultable={isDefaultable}
-            onDefault={() => onDefault?.('readerWidth')}
-            updateSetting={(...args) => updateSetting(...args)}
-        />
-    </Stack>
-);
+            <ReaderSettingReadingDirection
+                readingDirection={settings.readingDirection}
+                setReadingDirection={(value) => updateSetting('readingDirection', value)}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('readingDirection')}
+            />
+            <ReaderSettingTapZoneLayout
+                tapZoneLayout={settings.tapZoneLayout}
+                setTapZoneLayout={(value) => {
+                    setShowPreview(true);
+                    updateSetting('tapZoneLayout', value);
+                }}
+                isDefaultable={isDefaultable}
+                onDefault={() => {
+                    setShowPreview(true);
+                    onDefault?.('tapZoneLayout');
+                }}
+            />
+            <ReaderSettingTapZoneInvertMode
+                tapZoneInvertMode={settings.tapZoneInvertMode}
+                setTapZoneInvertMode={(value) => {
+                    setShowPreview(true);
+                    updateSetting('tapZoneInvertMode', value);
+                }}
+                isDefaultable={isDefaultable}
+                onDefault={() => {
+                    setShowPreview(true);
+                    onDefault?.('tapZoneInvertMode');
+                }}
+            />
+            <ReaderSettingPageScaleMode
+                pageScaleMode={settings.pageScaleMode}
+                setPageScaleMode={(value) => updateSetting('pageScaleMode', value)}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('pageScaleMode')}
+            />
+            <ReaderSettingStretchPage
+                pageScaleMode={settings.pageScaleMode.value}
+                shouldStretchPage={settings.shouldStretchPage.value}
+                setShouldStretchPage={(value) => updateSetting('shouldStretchPage', value)}
+            />
+            <ReaderSettingWidth
+                readerWidth={settings.readerWidth.value}
+                pageScaleMode={settings.pageScaleMode.value}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('readerWidth')}
+                updateSetting={(...args) => updateSetting(...args)}
+            />
+            {isSeriesMode && (
+                <>
+                    <Divider />
+                    <ReaderDefaultLayoutSettings
+                        profiles={[settings.readingMode.value]}
+                        updateSetting={updateSetting}
+                        isSeriesMode={isSeriesMode}
+                    />
+                </>
+            )}
+        </Stack>
+    );
+};

src/modules/reader/components/settings/layout/profiles/ReaderSettingProfileSettings.tsx

@@ -9,6 +9,7 @@
 import Stack from '@mui/material/Stack';
 import ListSubheader from '@mui/material/ListSubheader';
 import { ComponentProps, useMemo } from 'react';
+import Typography from '@mui/material/Typography';
 import { ReaderLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx';
 import { useDefaultReaderSettingsWithDefaultFlag } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
 import { ReadingMode } from '@/modules/reader/types/Reader.types.ts';
@@ -17,8 +18,12 @@ export const ReaderSettingProfileSettings = ({
     profile,
     title,
     updateSetting,
+    isSeriesMode,
     ...props
-}: Pick<ComponentProps<typeof ReaderLayoutSettings>, 'updateSetting'> & { profile: ReadingMode; title: string }) => {
+}: Pick<ComponentProps<typeof ReaderLayoutSettings>, 'updateSetting' | 'isSeriesMode'> & {
+    profile: ReadingMode;
+    title: string;
+}) => {
     const { settings } = useDefaultReaderSettingsWithDefaultFlag(profile);
 
     const adjustedSettings = useMemo(
@@ -34,10 +39,14 @@ export const ReaderSettingProfileSettings = ({
 
     return (
         <Stack sx={{ gap: 2 }}>
-            <ListSubheader component="div" id={`${profile}-settings`}>
-                {title}
-            </ListSubheader>
-            <Stack sx={{ px: 2 }}>
+            {!isSeriesMode ? (
+                <ListSubheader component="div" id={`${profile}-settings`}>
+                    {title}
+                </ListSubheader>
+            ) : (
+                <Typography>{title}</Typography>
+            )}
+            <Stack sx={{ px: Number(!isSeriesMode) * 2 }}>
                 <ReaderLayoutSettings
                     {...props}
                     setShowPreview={() => {}}