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 = (
+export const ReaderDefaultLayoutSettings = ({
-    props: Omit<ComponentProps<typeof ReaderLayoutSettings>, 'setShowPreview'>,
+    profiles = READING_MODE_VALUES,
-) => {
+    readingMode,
-    const { settings, updateSetting } = props;
+    ...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={{ gap: 2, pb: Number(!isSeriesMode) * 2 }}>
+            {readingMode !== undefined && (
                 <Stack sx={{ pt: 2, px: 2 }}>
                     <ReaderSettingReadingMode
-                    readingMode={settings.readingMode}
+                        readingMode={readingMode}
                         setReadingMode={(value) => updateSetting('readingMode', value)}
                     />
                 </Stack>
-            {READING_MODE_VALUES.map((readingMode) => (
+            )}
+            {profiles.map((profile) => (
                 <ReaderSettingProfileSettings
-                    key={readingMode}
+                    key={profile}
-                    profile={readingMode}
+                    profile={profile}
-                    title={t(READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode].title)}
+                    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,18 +29,26 @@ export const ReaderLayoutSettings = ({
     updateSetting,
     isDefaultable,
     onDefault,
+    isSeriesMode,
 }: ReaderSettingsTypeProps & {
     setShowPreview: TReaderTapZoneContext['setShowPreview'];
-}) => (
+    isSeriesMode?: boolean;
+}) => {
+    const { t } = useTranslation();
+
+    return (
         <Stack sx={{ gap: 2 }}>
             <DefaultSettingFootnote areDefaultSettings={!isDefaultable} />
-        {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}
@@ -93,5 +105,16 @@ export const ReaderLayoutSettings = ({
                 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 }}>
+            {!isSeriesMode ? (
                 <ListSubheader component="div" id={`${profile}-settings`}>
                     {title}
                 </ListSubheader>
-            <Stack sx={{ px: 2 }}>
+            ) : (
+                <Typography>{title}</Typography>
+            )}
+            <Stack sx={{ px: Number(!isSeriesMode) * 2 }}>
                 <ReaderLayoutSettings
                     {...props}
                     setShowPreview={() => {}}