Individual display adjustment

package.json

@@ -1,7 +1,7 @@
 {
   "name": "display-dj",
   "private": true,
-  "version": "1.11.6",
+  "version": "1.11.7",
   "description": "A cross platform desktop application that supports brightness adjustment for integrated laptop monitor as well as external monitors and dark mode toggle supporting Windows and MacOSX at the moment.",
   "scripts": {
     "clean-dist": "rimraf dist",

src/renderer/components/MonitorBrightnessSetting.tsx

@@ -17,6 +17,7 @@ export function MonitorBrightnessSetting(props: MonitorBrightnessSettingProps) {
   const { monitor } = props;
   const { mutateAsync: updateMonitor } = useUpdateMonitor();
   const [disabled, setDisabled] = useState(false);
+  const [brightness, setBrightness] = useState(monitor.brightness);
   const isLaptop = monitor.type === 'laptop_monitor';
 
   const onChange = async (brightness: number) => {
@@ -33,12 +34,14 @@ export function MonitorBrightnessSetting(props: MonitorBrightnessSettingProps) {
   };
 
   const onMinAndMaxBrightness = () => {
-    if (monitor.brightness === 0) {
+    if (brightness === 0) {
       // maximize brightness
       onChange(100);
+      setBrightness(100);
     } else {
       // minimize brightness
       onChange(0);
+      setBrightness(0);
     }
   };
 
@@ -59,7 +62,7 @@ export function MonitorBrightnessSetting(props: MonitorBrightnessSettingProps) {
           <Slider
             className='field__value'
             placeholder='brightness'
-            value={monitor.brightness}
+            value={brightness}
             onInput={onChange}
             disabled={disabled}
           />

src/renderer/pages/Home.tsx

@@ -101,7 +101,11 @@ export function Home(props: HomeProps) {
     return (
       <>
         <Header configs={configs} preference={preference} />
-        <AllMonitorBrightnessSetting monitors={configs.monitors} />
+        {preference.showIndividualDisplays ? (
+          <MonitorBrightnessSettingForm monitors={configs.monitors} />
+        ) : (
+          <AllMonitorBrightnessSetting monitors={configs.monitors} />
+        )}
         <DarkModeSettingForm darkMode={configs.darkMode} />
       </>
     );