From effc0185798e69ceed7fb1f0e720e58053f433f2 Mon Sep 17 00:00:00 2001
From: Ionut Neagu <ionut.neagu@vertistudio.com>
Date: Wed, 1 Oct 2025 13:50:16 +0200
Subject: [PATCH 1/2] Improve quality setting handling in Compression settings

Refactored the Compression.js component to better handle toggling between auto and manual quality settings, preserving the user's manual quality value when switching modes. Updated the minimum allowed quality value in settings.php from 1 to 50 for better image quality control.
---
 .../parts/connected/settings/Compression.js   | 99 ++++++++++++-------
 inc/settings.php                              |  2 +-
 2 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js
index b71026cae..516019c48 100644
--- a/assets/src/dashboard/parts/connected/settings/Compression.js
+++ b/assets/src/dashboard/parts/connected/settings/Compression.js
@@ -23,6 +23,8 @@ import {
 
 import { useSelect } from '@wordpress/data';
 
+import { useEffect, useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
@@ -38,6 +40,31 @@ const Compression = ({
 	isSampleLoading,
 	setIsSampleLoading
 }) => {
+	const getQuality = value => {
+		if ( 'number' === typeof value ) {
+			return value;
+		}
+
+		if ( 'auto' === value ) {
+			return 80;
+		}
+
+		if ( 'high_c' === value ) {
+			return 90;
+		}
+
+		if ( 'medium_c' === value ) {
+			return 75;
+		}
+
+		if ( 'low_c' === value ) {
+			return 55;
+		}
+
+		return 80;
+	};
+
+	const manualQualityRef = useRef( getQuality( settings.quality ) );
 	const {
 		sampleImages,
 		isLoading
@@ -61,6 +88,14 @@ const Compression = ({
 	const isBestFormatEnabled = 'disabled' !== settings[ 'best_format' ];
 	const compressionMode = settings[ 'compression_mode' ];
 	const isRetinaEnabled = 'disabled' !== settings[ 'retina_images' ];
+
+	useEffect( () => {
+		if ( isAutoQualityEnabled ) {
+			return;
+		}
+
+		manualQualityRef.current = getQuality( settings.quality );
+	}, [ isAutoQualityEnabled, settings.quality ] );
 	const updateOption = ( option, value ) => {
 		setCanSave( true );
 		const data = { ...settings };
@@ -68,6 +103,21 @@ const Compression = ({
 		setSettings( data );
 	};
 
+	const handleAutoQualityToggle = value => {
+		setCanSave( true );
+		const data = { ...settings };
+		data.autoquality = value ? 'enabled' : 'disabled';
+		if ( value ) {
+			manualQualityRef.current = getQuality( settings.quality );
+			data.quality = 'mauto';
+		} else {
+			const manualQuality = manualQualityRef.current ?? getQuality( settings.quality );
+			manualQualityRef.current = manualQuality;
+			data.quality = manualQuality;
+		}
+		setSettings( data );
+	};
+
 	const loadSample = () => {
 		setIsSampleLoading( true );
 
@@ -80,34 +130,11 @@ const Compression = ({
 		);
 	};
 
-	const getQuality = value => {
-		if ( 'number' === typeof value ) {
-			return value;
-		}
-
-		if ( 'auto' === value ) {
-			return 90;
-		}
-
-		if ( 'high_c' === value ) {
-			return 90;
-		}
-
-		if ( 'medium_c' === value ) {
-			return 75;
-		}
-
-		if ( 'low_c' === value ) {
-			return 55;
-		}
-
-		return 90;
-	};
-
 	const updateQuality = value => {
 		setCanSave( true );
 		const data = { ...settings };
 		data.quality = value;
+		manualQualityRef.current = value;
 		setSettings( data );
 	};
 
@@ -306,18 +333,18 @@ const Compression = ({
 					<BaseControl
 						help={ ! isAutoQualityEnabled && optimoleDashboardApp.strings.options_strings.quality_desc }
 					>
-						<ToggleControl
-							label={ optimoleDashboardApp.strings.options_strings.quality_title }
-							help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
-							checked={ isAutoQualityEnabled }
-							disabled={ isLoading }
-							className={ classnames(
-								{
-									'is-disabled': isLoading
-								}
-							) }
-							onChange={ value => updateOption( 'autoquality', value ) }
-						/>
+					<ToggleControl
+						label={ optimoleDashboardApp.strings.options_strings.quality_title }
+						help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
+						checked={ isAutoQualityEnabled }
+						disabled={ isLoading }
+						className={ classnames(
+							{
+								'is-disabled': isLoading
+							}
+						) }
+						onChange={ handleAutoQualityToggle }
+					/>
 					</BaseControl>
 
 					{ ! isAutoQualityEnabled && (
diff --git a/inc/settings.php b/inc/settings.php
index de6ab74ea..72aa461df 100644
--- a/inc/settings.php
+++ b/inc/settings.php
@@ -280,7 +280,7 @@ public function parse_settings( $new_settings ) {
 					$sanitized_value = $this->to_bound_integer( $value, 100, 5000 );
 					break;
 				case 'quality':
-					$sanitized_value = $this->to_bound_integer( $value, 1, 100 );
+					$sanitized_value = $this->to_bound_integer( $value, 50, 100 );
 					break;
 				case 'wm_id':
 					$sanitized_value = intval( $value );

From 6d03fb55f01e87046a9d66b8d3f8cb52c7a81cd8 Mon Sep 17 00:00:00 2001
From: Ionut Neagu <ionut.neagu@vertistudio.com>
Date: Wed, 1 Oct 2025 14:21:25 +0200
Subject: [PATCH 2/2] fixed linting

---
 .../parts/connected/settings/Compression.js   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js
index 516019c48..bc965a9e2 100644
--- a/assets/src/dashboard/parts/connected/settings/Compression.js
+++ b/assets/src/dashboard/parts/connected/settings/Compression.js
@@ -23,7 +23,7 @@ import {
 
 import { useSelect } from '@wordpress/data';
 
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies.
@@ -95,7 +95,7 @@ const Compression = ({
 		}
 
 		manualQualityRef.current = getQuality( settings.quality );
-	}, [ isAutoQualityEnabled, settings.quality ] );
+	}, [ isAutoQualityEnabled, settings.quality ]);
 	const updateOption = ( option, value ) => {
 		setCanSave( true );
 		const data = { ...settings };
@@ -333,18 +333,18 @@ const Compression = ({
 					<BaseControl
 						help={ ! isAutoQualityEnabled && optimoleDashboardApp.strings.options_strings.quality_desc }
 					>
-					<ToggleControl
-						label={ optimoleDashboardApp.strings.options_strings.quality_title }
-						help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
-						checked={ isAutoQualityEnabled }
-						disabled={ isLoading }
-						className={ classnames(
-							{
-								'is-disabled': isLoading
-							}
-						) }
-						onChange={ handleAutoQualityToggle }
-					/>
+						<ToggleControl
+							label={ optimoleDashboardApp.strings.options_strings.quality_title }
+							help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
+							checked={ isAutoQualityEnabled }
+							disabled={ isLoading }
+							className={ classnames(
+								{
+									'is-disabled': isLoading
+								}
+							) }
+							onChange={ handleAutoQualityToggle }
+						/>
 					</BaseControl>
 
 					{ ! isAutoQualityEnabled && (