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,13 +22,19 @@ export const ReaderFilterSettings = ({
     settings: { customFilter },
     updateSetting,
     onDefault,
-}: ReaderSettingsTypeProps) => (
+    setTransparent,
+}: ReaderSettingsTypeProps) => {
+    const update = (value: any, commit?: boolean) => {
+        updateSetting('customFilter', value, commit);
+        setTransparent?.(commit === undefined ? false : !commit);
+    };
+
+    return (
         <Stack sx={{ gap: 2 }}>
             <ReaderSettingBrightness
                 brightness={customFilter.brightness}
                 updateSetting={(key, value, commit) =>
-                updateSetting(
+                    update(
-                    'customFilter',
                         {
                             ...customFilter,
                             [key]: value,
@@ -40,8 +46,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingContrast
                 contrast={customFilter.contrast}
                 updateSetting={(key, value, commit) =>
-                updateSetting(
+                    update(
-                    'customFilter',
                         {
                             ...customFilter,
                             [key]: value,
@@ -53,8 +58,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingSaturate
                 saturate={customFilter.saturate}
                 updateSetting={(key, value, commit) =>
-                updateSetting(
+                    update(
-                    'customFilter',
                         {
                             ...customFilter,
                             [key]: value,
@@ -66,8 +70,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingHue
                 hue={customFilter.hue}
                 updateSetting={(key, value, commit) =>
-                updateSetting(
+                    update(
-                    'customFilter',
                         {
                             ...customFilter,
                             [key]: value,
@@ -79,8 +82,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingRGBA
                 rgba={customFilter.rgba}
                 updateSetting={(key, value, commit) =>
-                updateSetting(
+                    update(
-                    'customFilter',
                         {
                             ...customFilter,
                             [key]: value,
@@ -92,7 +94,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingSepia
                 sepia={customFilter.sepia}
                 updateSetting={(value) =>
-                updateSetting('customFilter', {
+                    update({
                         ...customFilter,
                         sepia: value,
                     })
@@ -101,7 +103,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingGrayscale
                 grayscale={customFilter.grayscale}
                 updateSetting={(value) =>
-                updateSetting('customFilter', {
+                    update({
                         ...customFilter,
                         grayscale: value,
                     })
@@ -110,7 +112,7 @@ export const ReaderFilterSettings = ({
             <ReaderSettingInvert
                 invert={customFilter.invert}
                 updateSetting={(value) =>
-                updateSetting('customFilter', {
+                    update({
                         ...customFilter,
                         invert: value,
                     })
@@ -120,4 +122,5 @@ export const ReaderFilterSettings = ({
                 <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 {