Delete global reader settings on reset

When resetting a whole settings tab, the whole metadata can be deleted from the server

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

@@ -24,25 +24,6 @@ import { ReaderBehaviourSettings } from '@/modules/reader/components/settings/be
 import { ReaderDefaultLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderDefaultLayoutSettings.tsx';
 import { ReaderHotkeysSettings } from '@/modules/reader/components/settings/hotkeys/ReaderHotkeysSettings.tsx';
 
-interface BaseProps {
-    activeTab: number;
-    setActiveTab: (tab: number) => void;
-    settings: IReaderSettingsWithDefaultFlag;
-    updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
-}
-
-interface DefaultSettingsProps extends BaseProps {
-    areDefaultSettings: true;
-}
-
-interface MangaSettingsProps extends BaseProps {
-    deleteSetting: (setting: keyof IReaderSettings) => void;
-}
-
-type Props =
-    | (DefaultSettingsProps & PropertiesNever<Omit<MangaSettingsProps, keyof BaseProps>>)
-    | (PropertiesNever<Omit<DefaultSettingsProps, keyof BaseProps>> & MangaSettingsProps);
-
 export const ReaderSettingsTabs = ({
     activeTab,
     setActiveTab,
@@ -50,7 +31,14 @@ export const ReaderSettingsTabs = ({
     settings,
     updateSetting,
     deleteSetting,
-}: Props) => {
+}: {
+    activeTab: number;
+    setActiveTab: (tab: number) => void;
+    settings: IReaderSettingsWithDefaultFlag;
+    updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+    areDefaultSettings?: boolean;
+    deleteSetting: (setting: keyof IReaderSettings) => void;
+}) => {
     const { t } = useTranslation();
     const { setShowPreview } = useReaderTapZoneContext();
     const isTouchDevice = MediaQuery.useIsTouchDevice();
@@ -144,6 +132,8 @@ export const ReaderSettingsTabs = ({
                                     <ReaderFilterSettings
                                         settings={settings}
                                         updateSetting={(...args) => updateSetting(...args)}
+                                        isDefaultable
+                                        onDefault={(...args) => deleteSetting?.(...args)}
                                     />
                                 </TabPanel>
                             );
@@ -158,6 +148,8 @@ export const ReaderSettingsTabs = ({
                                     <ReaderBehaviourSettings
                                         settings={settings}
                                         updateSetting={(...args) => updateSetting(...args)}
+                                        isDefaultable
+                                        onDefault={(...args) => deleteSetting?.(...args)}
                                     />
                                 </TabPanel>
                             );
@@ -172,6 +164,8 @@ export const ReaderSettingsTabs = ({
                                     <ReaderHotkeysSettings
                                         settings={settings}
                                         updateSetting={(...args) => updateSetting(...args)}
+                                        isDefaultable
+                                        onDefault={(...args) => deleteSetting?.(...args)}
                                     />
                                 </TabPanel>
                             );

src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx

@@ -9,7 +9,7 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettingsWithDefaultFlag, ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
 import { ReaderSettingExitMode } from '@/modules/reader/components/settings/behaviour/ReaderSettingExitMode.tsx';
 import { isOffsetDoubleSpreadPagesEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
@@ -19,12 +19,13 @@ import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettin
 export const ReaderBehaviourSettings = ({
     settings,
     updateSetting,
+    onDefault,
 }: {
     settings: IReaderSettingsWithDefaultFlag;
     updateSetting: (
         ...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>
     ) => ReturnType<typeof ReaderService.updateSetting>;
-}) => {
+} & ReaderSettingsTypeProps) => {
     const { t } = useTranslation();
 
     return (
@@ -48,7 +49,7 @@ export const ReaderBehaviourSettings = ({
             <SliderInput
                 label={t('reader.settings.image_preload_amount')}
                 value={settings.imagePreLoadAmount}
-                onDefault={() => updateSetting('imagePreLoadAmount', DEFAULT_READER_SETTINGS.imagePreLoadAmount, true)}
+                onDefault={() => onDefault?.('imagePreLoadAmount')}
                 slotProps={{
                     slider: {
                         defaultValue: DEFAULT_READER_SETTINGS.imagePreLoadAmount,

src/modules/reader/components/settings/filters/ReaderFilterSettings.tsx

@@ -17,9 +17,12 @@ import { ReaderSettingGrayscale } from '@/modules/reader/components/settings/fil
 import { ReaderSettingInvert } from '@/modules/reader/components/settings/filters/ReaderSettingInvert.tsx';
 import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
-import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
-export const ReaderFilterSettings = ({ settings: { customFilter }, updateSetting }: ReaderSettingsTypeProps) => (
+export const ReaderFilterSettings = ({
+    settings: { customFilter },
+    updateSetting,
+    onDefault,
+}: ReaderSettingsTypeProps) => (
     <Stack sx={{ gap: 2 }}>
         <ReaderSettingBrightness
             brightness={customFilter.brightness}
@@ -114,10 +117,7 @@ export const ReaderFilterSettings = ({ settings: { customFilter }, updateSetting
             }
         />
         <Stack sx={{ alignItems: 'end' }}>
-            <ResetButton
+            <ResetButton onClick={() => onDefault?.('customFilter')} variant="outlined" />
-                onClick={() => updateSetting('customFilter', DEFAULT_READER_SETTINGS.customFilter)}
-                variant="outlined"
-            />
         </Stack>
     </Stack>
 );

src/modules/reader/components/settings/general/ReaderGeneralSettings.tsx

@@ -25,6 +25,7 @@ export const ReaderGeneralSettings = ({
     overlayMode,
     settings,
     updateSetting,
+    onDefault,
 }: Pick<IReaderSettings, 'overlayMode'> & ReaderSettingsTypeProps) => {
     const { t } = useTranslation();
 
@@ -48,6 +49,7 @@ export const ReaderGeneralSettings = ({
                 progressBarType={settings.progressBarType}
                 progressBarSize={settings.progressBarSize}
                 setProgressBarSize={(...args) => updateSetting('progressBarSize', ...args)}
+                onDefault={() => onDefault?.('progressBarSize')}
             />
             <ReaderSettingProgressBarPosition
                 overlayMode={overlayMode}

src/modules/reader/components/settings/general/ReaderSettingProgressBarSize.tsx

@@ -16,8 +16,10 @@ export const ReaderSettingProgressBarSize = ({
     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;
@@ -30,7 +32,7 @@ export const ReaderSettingProgressBarSize = ({
         <SliderInput
             label={t('reader.settings.progress_bar.size')}
             value={t('global.value', { value: progressBarSize, unit: t('global.unit.px') })}
-            onDefault={() => setProgressBarSize(DEFAULT_READER_SETTINGS.progressBarSize, true)}
+            onDefault={onDefault}
             slotProps={{
                 slider: {
                     defaultValue: DEFAULT_READER_SETTINGS.progressBarSize,

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

@@ -11,10 +11,10 @@ import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
 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 { READER_HOTKEYS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
 
-export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSettingsTypeProps) => {
+export const ReaderHotkeysSettings = ({ settings, updateSetting, onDefault }: ReaderSettingsTypeProps) => {
     const { t } = useTranslation();
 
     return (
@@ -32,10 +32,7 @@ export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSetting
                 />
             ))}
             <Stack sx={{ alignItems: 'end' }}>
-                <ResetButton
+                <ResetButton onClick={() => onDefault?.('hotkeys')} variant="outlined" />
-                    onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)}
-                    variant="outlined"
-                />
             </Stack>
         </Stack>
     );

src/modules/reader/screens/GlobalReaderSettings.tsx

@@ -68,6 +68,7 @@ export const GlobalReaderSettings = () => {
             areDefaultSettings
             settings={settings}
             updateSetting={(setting, value, commit, _, profile) => updateSetting(setting, value, commit, profile)}
+            deleteSetting={(setting) => ReaderService.deleteSetting({ id: -1 }, setting, true)}
         />
     );
 };