Trying to fix a weird binding bug with NToggle

Modules/Bar/WiFiMenu.qml

@@ -147,13 +147,13 @@ NLoader {
 
             NToggle {
               baseSize: Style.baseWidgetSize * 0.75
-              value: Settings.data.network.wifiEnabled
+              checked: Settings.data.network.wifiEnabled
-              onToggled: function (value) {
+              onToggled: checked => {
-                Settings.data.network.wifiEnabled = value
+                Settings.data.network.wifiEnabled = checked
-                NetworkService.setWifiEnabled(value)
+                NetworkService.setWifiEnabled(checked)
 
                 // If enabling WiFi while menu is open, refresh after a delay
-                if (value) {
+                if (checked) {
                   wifiEnableRefreshTimer.start()
                 }
               }

Modules/Demo/DemoPanel.qml

@@ -201,8 +201,8 @@ NLoader {
               NToggle {
                 label: "Label"
                 description: "Description"
-                onToggled: function (value) {
+                onToggled: checked => {
-                  console.log("[DemoPanel] NToggle:", value)
+                  console.log("[DemoPanel] NToggle:", checked)
                 }
               }
 

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -123,10 +123,10 @@ ColumnLayout {
             NToggle {
               label: "Mute AudioService"
               description: "Mute or unmute the default audio output"
-              value: AudioService.muted
+              checked: AudioService.muted
-              onToggled: function (newValue) {
+              onToggled: checked => {
                 if (AudioService.sink && AudioService.sink.audio) {
-                  AudioService.sink.audio.muted = newValue
+                  AudioService.sink.audio.muted = checked
                 }
               }
             }

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -43,27 +43,27 @@ ColumnLayout {
         NToggle {
           label: "Show Active Window"
           description: "Display the title of the currently focused window below the bar"
-          value: Settings.data.bar.showActiveWindow
+          checked: Settings.data.bar.showActiveWindow
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.bar.showActiveWindow = newValue
+            Settings.data.bar.showActiveWindow = checked
           }
         }
 
         NToggle {
           label: "Show System Info"
           description: "Display system information (CPU, RAM, Temperature)"
-          value: Settings.data.bar.showSystemInfo
+          checked: Settings.data.bar.showSystemInfo
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.bar.showSystemInfo = newValue
+            Settings.data.bar.showSystemInfo = checked
           }
         }
 
         NToggle {
           label: "Show Media"
           description: "Display media controls and information"
-          value: Settings.data.bar.showMedia
+          checked: Settings.data.bar.showMedia
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.bar.showMedia = newValue
+            Settings.data.bar.showMedia = checked
           }
         }
       }

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -129,9 +129,9 @@ ColumnLayout {
         NToggle {
           label: "Use Matugen"
           description: "Automatically generate colors based on your active wallpaper using Matugen"
-          value: Settings.data.colorSchemes.useWallpaperColors
+          checked: Settings.data.colorSchemes.useWallpaperColors
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.colorSchemes.useWallpaperColors = newValue
+            Settings.data.colorSchemes.useWallpaperColors = checked
             if (Settings.data.colorSchemes.useWallpaperColors) {
               ColorSchemesService.changedWallpaper()
             }

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -89,9 +89,9 @@ Item {
                 NToggle {
                   label: "Bar"
                   description: "Enable the top bar on this monitor"
-                  value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
+                  checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
+                  onToggled: checked => {
-                    if (newValue) {
+                    if (checked) {
                       Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name)
                     } else {
                       Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name)
@@ -102,9 +102,9 @@ Item {
                 NToggle {
                   label: "Notifications"
                   description: "Enable notifications on this monitor"
-                  value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
+                  checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
+                  onToggled: checked => {
-                    if (newValue) {
+                    if (checked) {
                       Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
                                                                         modelData.name)
                     } else {
@@ -117,9 +117,9 @@ Item {
                 NToggle {
                   label: "Dock"
                   description: "Enable the dock on this monitor"
-                  value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
+                  checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
+                  onToggled: checked => {
-                    if (newValue) {
+                    if (checked) {
                       Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name)
                     } else {
                       Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name)

Modules/SettingsPanel/Tabs/GeneralTab.qml

@@ -95,27 +95,27 @@ ColumnLayout {
         NToggle {
           label: "Show Corners"
           description: "Display rounded corners on the edge of the screen"
-          value: Settings.data.general.showScreenCorners
+          checked: Settings.data.general.showScreenCorners
-          onToggled: function (v) {
+          onToggled: checked => {
-            Settings.data.general.showScreenCorners = v
+            Settings.data.general.showScreenCorners = checked
           }
         }
 
         NToggle {
           label: "Dim Desktop"
           description: "Dim the desktop when panels or menus are open"
-          value: Settings.data.general.dimDesktop
+          checked: Settings.data.general.dimDesktop
-          onToggled: function (v) {
+          onToggled: checked => {
-            Settings.data.general.dimDesktop = v
+            Settings.data.general.dimDesktop = checked
           }
         }
 
         NToggle {
           label: "Auto-hide Dock"
           description: "Automatically hide the dock when not in use"
-          value: Settings.data.dock.autoHide
+          checked: Settings.data.dock.autoHide
-          onToggled: function (v) {
+          onToggled: checked => {
-            Settings.data.dock.autoHide = v
+            Settings.data.dock.autoHide = checked
           }
         }
       }

Modules/SettingsPanel/Tabs/NetworkTab.qml

@@ -45,18 +45,18 @@ ColumnLayout {
         NToggle {
           label: "WiFi Enabled"
           description: "Enable WiFi connectivity"
-          value: Settings.data.network.wifiEnabled
+          checked: Settings.data.network.wifiEnabled
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.network.wifiEnabled = newValue
+            Settings.data.network.wifiEnabled = checked
           }
         }
 
         NToggle {
           label: "Bluetooth Enabled"
           description: "Enable Bluetooth connectivity"
-          value: Settings.data.network.bluetoothEnabled
+          checked: Settings.data.network.bluetoothEnabled
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.network.bluetoothEnabled = newValue
+            Settings.data.network.bluetoothEnabled = checked
           }
         }
       }

Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml

@@ -65,9 +65,9 @@ ColumnLayout {
             NToggle {
               label: "Show Cursor"
               description: "Record mouse cursor in the video"
-              value: Settings.data.screenRecorder.showCursor
+              checked: Settings.data.screenRecorder.showCursor
-              onToggled: function (newValue) {
+              onToggled: checked => {
-                Settings.data.screenRecorder.showCursor = newValue
+                Settings.data.screenRecorder.showCursor = checked
               }
             }
           }

Modules/SettingsPanel/Tabs/TimeWeatherTab.qml

@@ -81,18 +81,18 @@ ColumnLayout {
           NToggle {
             label: "Use 12-Hour Clock"
             description: "Display time in 12-hour format (AM/PM) instead of 24-hour"
-            value: Settings.data.location.use12HourClock
+            checked: Settings.data.location.use12HourClock
-            onToggled: function (newValue) {
+            onToggled: checked => {
-              Settings.data.location.use12HourClock = newValue
+              Settings.data.location.use12HourClock = checked
             }
           }
 
           NToggle {
             label: "Reverse Day/Month"
             description: "Display date as DD/MM instead of MM/DD"
-            value: Settings.data.location.reverseDayMonth
+            checked: Settings.data.location.reverseDayMonth
-            onToggled: function (newValue) {
+            onToggled: checked => {
-              Settings.data.location.reverseDayMonth = newValue
+              Settings.data.location.reverseDayMonth = checked
             }
           }
         }
@@ -119,9 +119,9 @@ ColumnLayout {
           NToggle {
             label: "Use Fahrenheit"
             description: "Display temperature in Fahrenheit instead of Celsius"
-            value: Settings.data.location.useFahrenheit
+            checked: Settings.data.location.useFahrenheit
-            onToggled: function (newValue) {
+            onToggled: checked => {
-              Settings.data.location.useFahrenheit = newValue
+              Settings.data.location.useFahrenheit = checked
             }
           }
         }

Modules/SettingsPanel/Tabs/WallpaperTab.qml

@@ -87,9 +87,9 @@ ColumnLayout {
         NToggle {
           label: "Random Wallpaper"
           description: "Automatically select random wallpapers from the folder"
-          value: Settings.data.wallpaper.isRandom
+          checked: Settings.data.wallpaper.isRandom
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.wallpaper.isRandom = newValue
+            Settings.data.wallpaper.isRandom = checked
           }
         }
 
@@ -157,9 +157,9 @@ ColumnLayout {
         NToggle {
           label: "Use SWWW"
           description: "Use SWWW daemon for advanced wallpaper management"
-          value: Settings.data.wallpaper.swww.enabled
+          checked: Settings.data.wallpaper.swww.enabled
-          onToggled: function (newValue) {
+          onToggled: checked => {
-            Settings.data.wallpaper.swww.enabled = newValue
+            Settings.data.wallpaper.swww.enabled = checked
           }
         }
 

Widgets/NToggle.qml

@@ -9,11 +9,11 @@ RowLayout {
 
   property string label: ""
   property string description: ""
-  property bool value: false
+  property bool checked: false
   property bool hovering: false
   property int baseSize: Style.baseWidgetSize
 
-  signal toggled(bool balue)
+  signal toggled(bool checked)
   signal entered
   signal exited
 
@@ -45,19 +45,19 @@ RowLayout {
     implicitWidth: root.baseSize * 1.625 * scaling
     implicitHeight: root.baseSize * scaling
     radius: height * 0.5
-    color: value ? Colors.mPrimary : Colors.mSurface
+    color: root.checked ? Colors.mPrimary : Colors.mSurface
-    border.color: value ? Colors.mPrimary : Colors.mOutline
+    border.color: root.checked ? Colors.mPrimary : Colors.mOutline
     border.width: Math.max(1, Style.borderMedium * scaling)
 
     Rectangle {
       implicitWidth: (root.baseSize - 5) * scaling
       implicitHeight: (root.baseSize - 5) * scaling
       radius: height * 0.5
-      color: value ? Colors.mOnPrimary : Colors.mPrimary
+      color: root.checked ? Colors.mOnPrimary : Colors.mPrimary
-      border.color: value ? Colors.mSurface : Colors.mSurface
+      border.color: root.checked ? Colors.mSurface : Colors.mSurface
       border.width: Math.max(1, Style.borderMedium * scaling)
       y: 2 * scaling
-      x: value ? switcher.width - width - 2 * scaling : 2 * scaling
+      x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling
 
       Behavior on x {
         NumberAnimation {
@@ -80,8 +80,8 @@ RowLayout {
         root.exited()
       }
       onClicked: {
-        value = !value
+        root.checked = !root.checked
-        root.toggled(value)
+        root.toggled(root.checked)
       }
     }
   }