Make reader settings dialog transparent on some changes

- width change
- custom filter change

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

@@ -15,6 +15,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderSettingsTabs } from '@/modules/reader/components/settings/ReaderSettingsTabs.tsx';
 import { ReaderSettingTab } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { useDisableAllHotkeysWhileMounted } from '@/modules/hotkeys/Hotkeys.utils.ts';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 
 export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
     const { manga } = useReaderStateMangaContext();
@@ -23,6 +24,7 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
     useDisableAllHotkeysWhileMounted(isOpen);
 
     const [activeTab, setActiveTab] = useState(0);
+    const [isTransparent, setIsTransparent] = useState(false);
 
     if (!manga) {
         return null;
@@ -39,6 +41,11 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
             fullWidth
             onClose={close}
             hideBackdrop={activeTab === ReaderSettingTab.FILTER}
+            sx={{
+                ...applyStyles(isTransparent, {
+                    opacity: 0.75,
+                }),
+            }}
         >
             <DialogContent sx={{ p: 0 }}>
                 <ReaderSettingsTabs
@@ -47,6 +54,7 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
                     settings={settings}
                     updateSetting={(...args) => ReaderService.updateSetting(manga, ...args)}
                     deleteSetting={(...args) => ReaderService.deleteSetting(manga, ...args)}
+                    setTransparent={setIsTransparent}
                 />
             </DialogContent>
         </Dialog>

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

@@ -35,6 +35,7 @@ const BaseReaderSettingsTabs = ({
     deleteSetting,
     setShowPreview,
     mode: overlayMode,
+    setTransparent,
 }: Pick<TReaderTapZoneContext, 'setShowPreview'> &
     Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'mode'> & {
         activeTab: number;
@@ -43,6 +44,7 @@ const BaseReaderSettingsTabs = ({
         updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
         areDefaultSettings?: boolean;
         deleteSetting: (setting: keyof IReaderSettings) => void;
+        setTransparent?: (transparent: boolean) => void;
     }) => {
     const { t } = useTranslation();
     const isTouchDevice = MediaQuery.useIsTouchDevice();
@@ -103,6 +105,7 @@ const BaseReaderSettingsTabs = ({
                                         isDefaultable={!areDefaultSettings}
                                         onDefault={(...args) => deleteSetting?.(...args)}
                                         isSeriesMode
+                                        setTransparent={setTransparent}
                                     />
                                 </TabPanel>
                             );
@@ -137,6 +140,7 @@ const BaseReaderSettingsTabs = ({
                                         updateSetting={(...args) => updateSetting(...args)}
                                         isDefaultable
                                         onDefault={(...args) => deleteSetting?.(...args)}
+                                        setTransparent={setTransparent}
                                     />
                                 </TabPanel>
                             );

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

@@ -22,102 +22,105 @@ export const ReaderFilterSettings = ({
     settings: { customFilter },
     updateSetting,
     onDefault,
-}: ReaderSettingsTypeProps) => (
+    setTransparent,
-    <Stack sx={{ gap: 2 }}>
+}: ReaderSettingsTypeProps) => {
-        <ReaderSettingBrightness
+    const update = (value: any, commit?: boolean) => {
-            brightness={customFilter.brightness}
+        updateSetting('customFilter', value, commit);
-            updateSetting={(key, value, commit) =>
+        setTransparent?.(commit === undefined ? false : !commit);
-                updateSetting(
+    };
-                    'customFilter',
+
-                    {
+    return (
+        <Stack sx={{ gap: 2 }}>
+            <ReaderSettingBrightness
+                brightness={customFilter.brightness}
+                updateSetting={(key, value, commit) =>
+                    update(
+                        {
+                            ...customFilter,
+                            [key]: value,
+                        },
+                        commit,
+                    )
+                }
+            />
+            <ReaderSettingContrast
+                contrast={customFilter.contrast}
+                updateSetting={(key, value, commit) =>
+                    update(
+                        {
+                            ...customFilter,
+                            [key]: value,
+                        },
+                        commit,
+                    )
+                }
+            />
+            <ReaderSettingSaturate
+                saturate={customFilter.saturate}
+                updateSetting={(key, value, commit) =>
+                    update(
+                        {
+                            ...customFilter,
+                            [key]: value,
+                        },
+                        commit,
+                    )
+                }
+            />
+            <ReaderSettingHue
+                hue={customFilter.hue}
+                updateSetting={(key, value, commit) =>
+                    update(
+                        {
+                            ...customFilter,
+                            [key]: value,
+                        },
+                        commit,
+                    )
+                }
+            />
+            <ReaderSettingRGBA
+                rgba={customFilter.rgba}
+                updateSetting={(key, value, commit) =>
+                    update(
+                        {
+                            ...customFilter,
+                            [key]: value,
+                        },
+                        commit,
+                    )
+                }
+            />
+            <ReaderSettingSepia
+                sepia={customFilter.sepia}
+                updateSetting={(value) =>
+                    update({
                         ...customFilter,
-                        [key]: value,
+                        sepia: value,
-                    },
+                    })
-                    commit,
+                }
-                )
+            />
-            }
+            <ReaderSettingGrayscale
-        />
+                grayscale={customFilter.grayscale}
-        <ReaderSettingContrast
+                updateSetting={(value) =>
-            contrast={customFilter.contrast}
+                    update({
-            updateSetting={(key, value, commit) =>
-                updateSetting(
-                    'customFilter',
-                    {
                         ...customFilter,
-                        [key]: value,
+                        grayscale: value,
-                    },
+                    })
-                    commit,
+                }
-                )
+            />
-            }
+            <ReaderSettingInvert
-        />
+                invert={customFilter.invert}
-        <ReaderSettingSaturate
+                updateSetting={(value) =>
-            saturate={customFilter.saturate}
+                    update({
-            updateSetting={(key, value, commit) =>
-                updateSetting(
-                    'customFilter',
-                    {
                         ...customFilter,
-                        [key]: value,
+                        invert: value,
-                    },
+                    })
-                    commit,
+                }
-                )
+            />
-            }
+            <Stack sx={{ alignItems: 'end' }}>
-        />
+                <ResetButton onClick={() => onDefault?.('customFilter')} variant="outlined" />
-        <ReaderSettingHue
+            </Stack>
-            hue={customFilter.hue}
-            updateSetting={(key, value, commit) =>
-                updateSetting(
-                    'customFilter',
-                    {
-                        ...customFilter,
-                        [key]: value,
-                    },
-                    commit,
-                )
-            }
-        />
-        <ReaderSettingRGBA
-            rgba={customFilter.rgba}
-            updateSetting={(key, value, commit) =>
-                updateSetting(
-                    'customFilter',
-                    {
-                        ...customFilter,
-                        [key]: value,
-                    },
-                    commit,
-                )
-            }
-        />
-        <ReaderSettingSepia
-            sepia={customFilter.sepia}
-            updateSetting={(value) =>
-                updateSetting('customFilter', {
-                    ...customFilter,
-                    sepia: value,
-                })
-            }
-        />
-        <ReaderSettingGrayscale
-            grayscale={customFilter.grayscale}
-            updateSetting={(value) =>
-                updateSetting('customFilter', {
-                    ...customFilter,
-                    grayscale: value,
-                })
-            }
-        />
-        <ReaderSettingInvert
-            invert={customFilter.invert}
-            updateSetting={(value) =>
-                updateSetting('customFilter', {
-                    ...customFilter,
-                    invert: value,
-                })
-            }
-        />
-        <Stack sx={{ alignItems: 'end' }}>
-            <ResetButton onClick={() => onDefault?.('customFilter')} variant="outlined" />
         </Stack>
-    </Stack>
+    );
-);
+};

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

@@ -30,6 +30,7 @@ export const ReaderLayoutSettings = ({
     isDefaultable,
     onDefault,
     isSeriesMode,
+    setTransparent,
 }: ReaderSettingsTypeProps & {
     setShowPreview: TReaderTapZoneContext['setShowPreview'];
     isSeriesMode?: boolean;
@@ -104,6 +105,7 @@ export const ReaderLayoutSettings = ({
                 isDefaultable={isDefaultable}
                 onDefault={() => onDefault?.('readerWidth')}
                 updateSetting={(...args) => updateSetting(...args)}
+                setTransparent={setTransparent}
             />
             {isSeriesMode && (
                 <>
@@ -112,6 +114,7 @@ export const ReaderLayoutSettings = ({
                         profiles={[settings.readingMode.value]}
                         updateSetting={updateSetting}
                         isSeriesMode={isSeriesMode}
+                        setTransparent={setTransparent}
                     />
                 </>
             )}

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

@@ -23,9 +23,11 @@ export const ReaderSettingWidth = ({
     isDefaultable,
     onDefault,
     updateSetting,
+    setTransparent,
 }: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
     Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
         updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+        setTransparent?: (transparent: boolean) => void;
     }) => {
     const { t } = useTranslation();
 
@@ -55,9 +57,11 @@ export const ReaderSettingWidth = ({
                             min: 10,
                             max: 100,
                             onChange: (_, value) => {
+                                setTransparent?.(true);
                                 updateSetting('readerWidth', { ...readerWidth, value: value as number }, false);
                             },
                             onChangeCommitted: (_, value) => {
+                                setTransparent?.(false);
                                 updateSetting('readerWidth', { ...readerWidth, value: value as number }, true);
                             },
                         },

src/modules/reader/types/Reader.types.ts

@@ -233,6 +233,7 @@ interface ReaderSettingsTypeBaseProps {
 export interface ReaderSettingsDefaultableProps {
     isDefaultable: boolean;
     onDefault: (setting: keyof IReaderSettings) => void;
+    setTransparent?: (transparent: boolean) => void;
 }
 
 interface ReaderSettingsTypeDefaultableProps extends ReaderSettingsTypeBaseProps, ReaderSettingsDefaultableProps {