Create separate matugen toggles, add MatugenService

Matugen: add Matugen.qml as central place for templates, add
MatugenService to take care of .toml generation
Notification: possible fix for "children of null"

Modules/SettingsPanel/Tabs/AboutTab.qml

@@ -9,7 +9,7 @@ import qs.Services
 import qs.Widgets
 
 ColumnLayout {
-  id: root 
+  id: root
 
   property string latestVersion: GitHubService.latestVersion
   property string currentVersion: "Unknown" // Fallback version
@@ -37,199 +37,196 @@ ColumnLayout {
     }
   }
 
+  NText {
+    text: "Noctalia Shell"
+    font.pointSize: Style.fontSizeXXXL * scaling
+    font.weight: Style.fontWeightBold
+    color: Color.mOnSurface
+    Layout.alignment: Qt.AlignCenter
+    Layout.bottomMargin: Style.marginS * scaling
+  }
+
+  GridLayout {
+    Layout.alignment: Qt.AlignCenter
+    columns: 2
+    rowSpacing: Style.marginXS * scaling
+    columnSpacing: Style.marginS * scaling
+
+    NText {
+      text: "Latest Version:"
+      color: Color.mOnSurface
+      Layout.alignment: Qt.AlignRight
+    }
+
+    NText {
+      text: root.latestVersion
+      color: Color.mOnSurface
+      font.weight: Style.fontWeightBold
+    }
+
+    NText {
+      text: "Installed Version:"
+      color: Color.mOnSurface
+      Layout.alignment: Qt.AlignRight
+    }
+
+    NText {
+      text: root.currentVersion
+      color: Color.mOnSurface
+      font.weight: Style.fontWeightBold
+    }
+  }
+
+  Rectangle {
+    Layout.alignment: Qt.AlignCenter
+    Layout.topMargin: Style.marginS * scaling
+    Layout.preferredWidth: updateText.implicitWidth + 46 * scaling
+    Layout.preferredHeight: Style.barHeight * scaling
+    radius: Style.radiusL * scaling
+    color: updateArea.containsMouse ? Color.mPrimary : Color.transparent
+    border.color: Color.mPrimary
+    border.width: Math.max(1, Style.borderS * scaling)
+    visible: {
+      if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown")
+        return false
+
+      const latest = root.latestVersion.replace("v", "").split(".")
+      const current = root.currentVersion.replace("v", "").split(".")
+      for (var i = 0; i < Math.max(latest.length, current.length); i++) {
+        const l = parseInt(latest[i] || "0")
+        const c = parseInt(current[i] || "0")
+        if (l > c)
+          return true
+
+        if (l < c)
+          return false
+      }
+      return false
+    }
+
+    RowLayout {
+      anchors.centerIn: parent
+      spacing: Style.marginS * scaling
+
+      NIcon {
+        text: "system_update"
+        font.pointSize: Style.fontSizeXXL * scaling
+        color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
+      }
 
       NText {
-        text: "Noctalia Shell"
-        font.pointSize: Style.fontSizeXXXL * scaling
-        font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
-        Layout.alignment: Qt.AlignCenter
-        Layout.bottomMargin: Style.marginS * scaling
+        id: updateText
+        text: "Download latest release"
+        font.pointSize: Style.fontSizeL * scaling
+        color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
       }
+    }
 
-      GridLayout {
-        Layout.alignment: Qt.AlignCenter
-        columns: 2
-        rowSpacing: Style.marginXS * scaling
-        columnSpacing: Style.marginS * scaling
+    MouseArea {
+      id: updateArea
 
-        NText {
-          text: "Latest Version:"
-          color: Color.mOnSurface
-          Layout.alignment: Qt.AlignRight
-        }
-
-        NText {
-          text: root.latestVersion
-          color: Color.mOnSurface
-          font.weight: Style.fontWeightBold
-        }
-
-        NText {
-          text: "Installed Version:"
-          color: Color.mOnSurface
-          Layout.alignment: Qt.AlignRight
-        }
-
-        NText {
-          text: root.currentVersion
-          color: Color.mOnSurface
-          font.weight: Style.fontWeightBold
-        }
+      anchors.fill: parent
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      onClicked: {
+        Quickshell.execDetached(["xdg-open", "https://github.com/Ly-sec/Noctalia/releases/latest"])
       }
+    }
+  }
 
-      Rectangle {
-        Layout.alignment: Qt.AlignCenter
-        Layout.topMargin: Style.marginS * scaling
-        Layout.preferredWidth: updateText.implicitWidth + 46 * scaling
-        Layout.preferredHeight: Style.barHeight * scaling
+  NDivider {
+    Layout.fillWidth: true
+    Layout.topMargin: Style.marginXL * scaling
+    Layout.bottomMargin: Style.marginxL * scaling
+  }
+
+  NText {
+    text: `Shout-out to our ${root.contributors.length} awesome contributors!`
+    font.pointSize: Style.fontSizeL * scaling
+    font.weight: Style.fontWeightBold
+    color: Color.mOnSurface
+    Layout.alignment: Qt.AlignCenter
+    Layout.topMargin: Style.marginL * 2
+  }
+
+  ScrollView {
+    Layout.alignment: Qt.AlignCenter
+    Layout.preferredWidth: 200 * Style.marginXS * scaling
+    Layout.fillHeight: true
+    Layout.topMargin: Style.marginL * scaling
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+
+    GridView {
+      id: contributorsGrid
+
+      anchors.fill: parent
+      width: 200 * 4 * scaling
+      height: Math.ceil(root.contributors.length / 4) * 100
+      cellWidth: Style.baseWidgetSize * 6.25 * scaling
+      cellHeight: Style.baseWidgetSize * 3.125 * scaling
+      model: root.contributors
+
+      delegate: Rectangle {
+        width: contributorsGrid.cellWidth - Style.marginL * scaling
+        height: contributorsGrid.cellHeight - Style.marginXS * scaling
         radius: Style.radiusL * scaling
-        color: updateArea.containsMouse ? Color.mPrimary : Color.transparent
-        border.color: Color.mPrimary
-        border.width: Math.max(1, Style.borderS * scaling)
-        visible: {
-          if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown")
-            return false
-
-          const latest = root.latestVersion.replace("v", "").split(".")
-          const current = root.currentVersion.replace("v", "").split(".")
-          for (var i = 0; i < Math.max(latest.length, current.length); i++) {
-            const l = parseInt(latest[i] || "0")
-            const c = parseInt(current[i] || "0")
-            if (l > c)
-              return true
-
-            if (l < c)
-              return false
-          }
-          return false
-        }
+        color: contributorArea.containsMouse ? Color.mSecondary : Color.transparent
 
         RowLayout {
-          anchors.centerIn: parent
-          spacing: Style.marginS * scaling
+          anchors.fill: parent
+          anchors.margins: Style.marginS * scaling
+          spacing: Style.marginM * scaling
 
-          NIcon {
-            text: "system_update"
-            font.pointSize: Style.fontSizeXXL * scaling
-            color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
+          Item {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling
+            Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling
+
+            NImageCircled {
+              imagePath: modelData.avatar_url || ""
+              anchors.fill: parent
+              anchors.margins: Style.marginXS * scaling
+              fallbackIcon: "person"
+              borderColor: Color.mPrimary
+              borderWidth: Math.max(1, Style.borderM * scaling)
+            }
           }
 
-          NText {
-            id: updateText
-            text: "Download latest release"
-            font.pointSize: Style.fontSizeL * scaling
-            color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
+          ColumnLayout {
+            spacing: Style.marginXS * scaling
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+
+            NText {
+              text: modelData.login || "Unknown"
+              font.weight: Style.fontWeightBold
+              color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
+              elide: Text.ElideRight
+              Layout.fillWidth: true
+            }
+
+            NText {
+              text: (modelData.contributions || 0) + " " + ((modelData.contributions || 0) === 1 ? "commit" : "commits")
+              font.pointSize: Style.fontSizeXS * scaling
+              color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
+            }
           }
         }
 
         MouseArea {
-          id: updateArea
+          id: contributorArea
 
           anchors.fill: parent
           hoverEnabled: true
           cursorShape: Qt.PointingHandCursor
           onClicked: {
-            Quickshell.execDetached(["xdg-open", "https://github.com/Ly-sec/Noctalia/releases/latest"])
-          }
-        }
-      }
-
-      NDivider {
-        Layout.fillWidth: true
-        Layout.topMargin: Style.marginXL * scaling
-        Layout.bottomMargin: Style.marginxL * scaling
-      }
-
-      NText {
-        text: `Shout-out to our ${root.contributors.length} awesome contributors!`
-        font.pointSize: Style.fontSizeL * scaling
-        font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
-        Layout.alignment: Qt.AlignCenter
-        Layout.topMargin: Style.marginL * 2
-      }
-
-      ScrollView {
-        Layout.alignment: Qt.AlignCenter
-        Layout.preferredWidth: 200 * Style.marginXS * scaling
-        Layout.fillHeight: true
-        Layout.topMargin: Style.marginL * scaling
-        clip: true
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: ScrollBar.AsNeeded
-
-        GridView {
-          id: contributorsGrid
-
-          anchors.fill: parent
-          width: 200 * 4 * scaling
-          height: Math.ceil(root.contributors.length / 4) * 100
-          cellWidth: Style.baseWidgetSize * 6.25 * scaling
-          cellHeight: Style.baseWidgetSize * 3.125 * scaling
-          model: root.contributors
-
-          delegate: Rectangle {
-            width: contributorsGrid.cellWidth - Style.marginL * scaling
-            height: contributorsGrid.cellHeight - Style.marginXS * scaling
-            radius: Style.radiusL * scaling
-            color: contributorArea.containsMouse ? Color.mSecondary : Color.transparent
-
-            RowLayout {
-              anchors.fill: parent
-              anchors.margins: Style.marginS * scaling
-              spacing: Style.marginM * scaling
-
-              Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling
-                Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling
-
-                NImageCircled {
-                  imagePath: modelData.avatar_url || ""
-                  anchors.fill: parent
-                  anchors.margins: Style.marginXS * scaling
-                  fallbackIcon: "person"
-                  borderColor: Color.mPrimary
-                  borderWidth: Math.max(1, Style.borderM * scaling)
-                }
-              }
-
-              ColumnLayout {
-                spacing: Style.marginXS * scaling
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-
-                NText {
-                  text: modelData.login || "Unknown"
-                  font.weight: Style.fontWeightBold
-                  color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
-                  elide: Text.ElideRight
-                  Layout.fillWidth: true
-                }
-
-                NText {
-                  text: (modelData.contributions || 0) + " " + ((modelData.contributions
-                                                                 || 0) === 1 ? "commit" : "commits")
-                  font.pointSize: Style.fontSizeXS * scaling
-                  color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
-                }
-              }
-            }
-
-            MouseArea {
-              id: contributorArea
-
-              anchors.fill: parent
-              hoverEnabled: true
-              cursorShape: Qt.PointingHandCursor
-              onClicked: {
-                if (modelData.html_url)
-                  Quickshell.execDetached(["xdg-open", modelData.html_url])
-              }
-            }
+            if (modelData.html_url)
+              Quickshell.execDetached(["xdg-open", modelData.html_url])
           }
         }
       }
     }
-
+  }
+}

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -104,7 +104,6 @@ ColumnLayout {
   }
 
   ColumnLayout {
-    width: scrollView.availableWidth
     spacing: 0
 
     Item {
@@ -125,7 +124,7 @@ ColumnLayout {
         onToggled: checked => {
                      Settings.data.colorSchemes.darkMode = checked
                      if (Settings.data.colorSchemes.useWallpaperColors) {
-                       ColorSchemeService.changedWallpaper()
+                       MatugenService.generateFromWallpaper()
                      } else if (Settings.data.colorSchemes.predefinedScheme) {
                        // Re-apply current scheme to pick the right variant
                        ColorSchemeService.applyScheme(Settings.data.colorSchemes.predefinedScheme)
@@ -137,19 +136,6 @@ ColumnLayout {
                    }
       }
 
-      // App theming
-      NToggle {
-        label: "Theme external apps (GTK, Qt & kitty)"
-        description: "Writes GTK (gtk.css), Qt5/6 (noctalia.conf) and Kitty (noctalia.conf) themes based on your colors."
-        checked: Settings.data.colorSchemes.themeApps
-        onToggled: checked => {
-                     Settings.data.colorSchemes.themeApps = checked
-                     if (Settings.data.colorSchemes.useWallpaperColors) {
-                       ColorSchemeService.changedWallpaper()
-                     }
-                   }
-      }
-
       // Use Matugen
       NToggle {
         label: "Enable Matugen"
@@ -348,5 +334,84 @@ ColumnLayout {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginXL * scaling
     Layout.bottomMargin: Style.marginXL * scaling
+    visible: Settings.data.colorSchemes.useWallpaperColors
+  }
+
+  // Matugen template toggles (moved from MatugenTab)
+  ColumnLayout {
+    spacing: Style.marginL * scaling
+    Layout.fillWidth: true
+    visible: Settings.data.colorSchemes.useWallpaperColors
+
+    NText {
+      text: "Matugen Templates"
+      font.pointSize: Style.fontSizeXXL * scaling
+      font.weight: Style.fontWeightBold
+      color: Color.mSecondary
+      Layout.bottomMargin: Style.marginS * scaling
+    }
+
+    NText {
+      text: "Choose which external components should be themed by Matugen."
+      font.pointSize: Style.fontSizeM * scaling
+      color: Color.mOnSurfaceVariant
+      Layout.fillWidth: true
+      wrapMode: Text.WordWrap
+    }
+
+    NToggle {
+      label: "GTK 4 (libadwaita)"
+      description: "Write ~/.config/gtk-4.0/gtk.css"
+      checked: Settings.data.matugen.gtk4
+      onToggled: checked => {
+                   Settings.data.matugen.gtk4 = checked
+                   if (Settings.data.colorSchemes.useWallpaperColors)
+                   MatugenService.generateFromWallpaper()
+                 }
+    }
+
+    NToggle {
+      label: "GTK 3"
+      description: "Write ~/.config/gtk-3.0/gtk.css"
+      checked: Settings.data.matugen.gtk3
+      onToggled: checked => {
+                   Settings.data.matugen.gtk3 = checked
+                   if (Settings.data.colorSchemes.useWallpaperColors)
+                   MatugenService.generateFromWallpaper()
+                 }
+    }
+
+    NToggle {
+      label: "Qt6ct"
+      description: "Write ~/.config/qt6ct/colors/noctalia.conf"
+      checked: Settings.data.matugen.qt6
+      onToggled: checked => {
+                   Settings.data.matugen.qt6 = checked
+                   if (Settings.data.colorSchemes.useWallpaperColors)
+                   MatugenService.generateFromWallpaper()
+                 }
+    }
+
+    NToggle {
+      label: "Qt5ct"
+      description: "Write ~/.config/qt5ct/colors/noctalia.conf"
+      checked: Settings.data.matugen.qt5
+      onToggled: checked => {
+                   Settings.data.matugen.qt5 = checked
+                   if (Settings.data.colorSchemes.useWallpaperColors)
+                   MatugenService.generateFromWallpaper()
+                 }
+    }
+
+    NToggle {
+      label: "Kitty"
+      description: "Write ~/.config/kitty/themes/noctalia.conf and reload"
+      checked: Settings.data.matugen.kitty
+      onToggled: checked => {
+                   Settings.data.matugen.kitty = checked
+                   if (Settings.data.colorSchemes.useWallpaperColors)
+                   MatugenService.generateFromWallpaper()
+                 }
+    }
   }
 }

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -43,168 +43,166 @@ ColumnLayout {
     })
   }
 
+  NText {
+    text: "Monitor-specific configuration"
+    font.pointSize: Style.fontSizeL * scaling
+    font.weight: Style.fontWeightBold
+  }
 
-    NText {
-      text: "Monitor-specific configuration"
-      font.pointSize: Style.fontSizeL * scaling
-      font.weight: Style.fontWeightBold
-    }
+  NText {
+    text: "Bars and notifications appear on all displays by default. Choose specific displays below to limit where they're shown."
+    font.pointSize: Style.fontSizeM * scaling
+    color: Color.mOnSurfaceVariant
+    wrapMode: Text.WordWrap
+    Layout.fillWidth: true
+    Layout.preferredWidth: parent.width - (Style.marginL * 2 * scaling)
+  }
 
-    NText {
-      text: "Bars and notifications appear on all displays by default. Choose specific displays below to limit where they're shown."
-      font.pointSize: Style.fontSizeM * scaling
-      color: Color.mOnSurfaceVariant
-      wrapMode: Text.WordWrap
-      Layout.fillWidth: true
-      Layout.preferredWidth: parent.width - (Style.marginL * 2 * scaling)
-    }
+  ColumnLayout {
+    spacing: Style.marginL * scaling
+    Layout.topMargin: Style.marginL * scaling
 
-    ColumnLayout {
-      spacing: Style.marginL * scaling
-      Layout.topMargin: Style.marginL * scaling
+    Repeater {
+      model: Quickshell.screens || []
+      delegate: Rectangle {
+        Layout.fillWidth: true
+        Layout.minimumWidth: 550 * scaling
+        radius: Style.radiusM * scaling
+        color: Color.mSurface
+        border.color: Color.mOutline
+        border.width: Math.max(1, Style.borderS * scaling)
+        implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
 
-      Repeater {
-        model: Quickshell.screens || []
-        delegate: Rectangle {
-          Layout.fillWidth: true
-          Layout.minimumWidth: 550 * scaling
-          radius: Style.radiusM * scaling
-          color: Color.mSurface
-          border.color: Color.mOutline
-          border.width: Math.max(1, Style.borderS * scaling)
-          implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
+        ColumnLayout {
+          id: contentCol
+          anchors.fill: parent
+          anchors.margins: Style.marginL * scaling
+          spacing: Style.marginXXS * scaling
+
+          NText {
+            text: (modelData.name || "Unknown")
+            font.pointSize: Style.fontSizeXL * scaling
+            font.weight: Style.fontWeightBold
+            color: Color.mSecondary
+          }
+
+          NText {
+            text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})`
+            font.pointSize: Style.fontSizeXS * scaling
+            color: Color.mOnSurfaceVariant
+            wrapMode: Text.WordWrap
+            Layout.fillWidth: true
+          }
 
           ColumnLayout {
-            id: contentCol
-            anchors.fill: parent
-            anchors.margins: Style.marginL * scaling
-            spacing: Style.marginXXS * scaling
+            spacing: Style.marginL * scaling
+            Layout.fillWidth: true
 
-            NText {
-              text: (modelData.name || "Unknown")
-              font.pointSize: Style.fontSizeXL * scaling
-              font.weight: Style.fontWeightBold
-              color: Color.mSecondary
+            NToggle {
+              Layout.fillWidth: true
+              label: "Bar"
+              description: "Enable the bar on this monitor."
+              checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
+              onToggled: checked => {
+                           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)
+                           }
+                         }
             }
 
-            NText {
-              text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})`
-              font.pointSize: Style.fontSizeXS * scaling
-              color: Color.mOnSurfaceVariant
-              wrapMode: Text.WordWrap
+            NToggle {
               Layout.fillWidth: true
+              label: "Notifications"
+              description: "Enable notifications on this monitor."
+              checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
+              onToggled: checked => {
+                           if (checked) {
+                             Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
+                                                                               modelData.name)
+                           } else {
+                             Settings.data.notifications.monitors = removeMonitor(Settings.data.notifications.monitors,
+                                                                                  modelData.name)
+                           }
+                         }
+            }
+
+            NToggle {
+              Layout.fillWidth: true
+              label: "Dock"
+              description: "Enable the dock on this monitor."
+              checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
+              onToggled: checked => {
+                           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)
+                           }
+                         }
             }
 
             ColumnLayout {
-              spacing: Style.marginL * scaling
+              spacing: Style.marginS * scaling
               Layout.fillWidth: true
 
-              NToggle {
+              RowLayout {
                 Layout.fillWidth: true
-                label: "Bar"
-                description: "Enable the bar on this monitor."
-                checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
-                onToggled: checked => {
-                             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)
-                             }
-                           }
-              }
+                spacing: Style.marginL * scaling
 
-              NToggle {
-                Layout.fillWidth: true
-                label: "Notifications"
-                description: "Enable notifications on this monitor."
-                checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
-                onToggled: checked => {
-                             if (checked) {
-                               Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
-                                                                                 modelData.name)
-                             } else {
-                               Settings.data.notifications.monitors = removeMonitor(
-                                 Settings.data.notifications.monitors, modelData.name)
-                             }
-                           }
-              }
-
-              NToggle {
-                Layout.fillWidth: true
-                label: "Dock"
-                description: "Enable the dock on this monitor."
-                checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
-                onToggled: checked => {
-                             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)
-                             }
-                           }
-              }
-
-              ColumnLayout {
-                spacing: Style.marginS * scaling
-                Layout.fillWidth: true
-
-                RowLayout {
+                ColumnLayout {
+                  spacing: Style.marginXXS * scaling
                   Layout.fillWidth: true
-                  spacing: Style.marginL * scaling
-
-                  ColumnLayout {
-                    spacing: Style.marginXXS * scaling
-                    Layout.fillWidth: true
-
-                    NText {
-                      text: "Scale"
-                      font.pointSize: Style.fontSizeM * scaling
-                      font.weight: Style.fontWeightBold
-                      color: Color.mOnSurface
-                    }
-                    NText {
-                      text: "Scale the user interface on this monitor."
-                      font.pointSize: Style.fontSizeS * scaling
-                      color: Color.mOnSurfaceVariant
-                      wrapMode: Text.WordWrap
-                      Layout.fillWidth: true
-                    }
-                  }
 
                   NText {
-                    text: `${Math.round(ScalingService.scaleByName(modelData.name) * 100)}%`
-                    Layout.alignment: Qt.AlignVCenter
-                    Layout.minimumWidth: 50 * scaling
-                    horizontalAlignment: Text.AlignRight
+                    text: "Scale"
+                    font.pointSize: Style.fontSizeM * scaling
+                    font.weight: Style.fontWeightBold
+                    color: Color.mOnSurface
+                  }
+                  NText {
+                    text: "Scale the user interface on this monitor."
+                    font.pointSize: Style.fontSizeS * scaling
+                    color: Color.mOnSurfaceVariant
+                    wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
                   }
                 }
 
-                RowLayout {
-                  spacing: Style.marginS * scaling
-                  Layout.fillWidth: true
+                NText {
+                  text: `${Math.round(ScalingService.scaleByName(modelData.name) * 100)}%`
+                  Layout.alignment: Qt.AlignVCenter
+                  Layout.minimumWidth: 50 * scaling
+                  horizontalAlignment: Text.AlignRight
+                }
+              }
 
-                  NSlider {
-                    id: scaleSlider
-                    from: 0.7
-                    to: 1.8
-                    stepSize: 0.01
-                    value: ScalingService.scaleByName(modelData.name)
-                    onPressedChanged: {
-                      var data = Settings.data.monitorsScaling || {}
-                      data[modelData.name] = value
-                      Settings.data.monitorsScaling = data
-                    }
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: 150 * scaling
+              RowLayout {
+                spacing: Style.marginS * scaling
+                Layout.fillWidth: true
+
+                NSlider {
+                  id: scaleSlider
+                  from: 0.7
+                  to: 1.8
+                  stepSize: 0.01
+                  value: ScalingService.scaleByName(modelData.name)
+                  onPressedChanged: {
+                    var data = Settings.data.monitorsScaling || {}
+                    data[modelData.name] = value
+                    Settings.data.monitorsScaling = data
                   }
+                  Layout.fillWidth: true
+                  Layout.minimumWidth: 150 * scaling
+                }
 
-                  NIconButton {
-                    icon: "refresh"
-                    tooltipText: "Reset Scaling"
-                    onClicked: {
-                      var data = Settings.data.monitorsScaling || {}
-                      data[modelData.name] = 1.0
-                      Settings.data.monitorsScaling = data
-                    }
+                NIconButton {
+                  icon: "refresh"
+                  tooltipText: "Reset Scaling"
+                  onClicked: {
+                    var data = Settings.data.monitorsScaling || {}
+                    data[modelData.name] = 1.0
+                    Settings.data.monitorsScaling = data
                   }
                 }
               }
@@ -212,121 +210,121 @@ ColumnLayout {
           }
         }
       }
+    }
 
-      NDivider {
+    NDivider {
+      Layout.fillWidth: true
+      Layout.topMargin: Style.marginXL * scaling
+      Layout.bottomMargin: Style.marginXL * scaling
+    }
+
+    // Night Light Section
+    ColumnLayout {
+      spacing: Style.marginXS * scaling
+      NText {
+        text: "Night Light"
+        font.pointSize: Style.fontSizeXXL * scaling
+        font.weight: Style.fontWeightBold
+        color: Color.mSecondary
+      }
+
+      NText {
+        text: "Reduce blue light emission to help you sleep better and reduce eye strain."
+        font.pointSize: Style.fontSizeM * scaling
+        color: Color.mOnSurfaceVariant
+        wrapMode: Text.WordWrap
         Layout.fillWidth: true
-        Layout.topMargin: Style.marginXL * scaling
-        Layout.bottomMargin: Style.marginXL * scaling
+        Layout.preferredWidth: parent.width - (Style.marginL * 2 * scaling)
       }
+    }
 
-      // Night Light Section
-      ColumnLayout {
-        spacing: Style.marginXS * scaling
-        NText {
-          text: "Night Light"
-          font.pointSize: Style.fontSizeXXL * scaling
-          font.weight: Style.fontWeightBold
-          color: Color.mSecondary
-        }
+    NToggle {
+      label: "Enable Night Light"
+      description: "Apply a warm color filter to reduce blue light emission."
+      checked: Settings.data.nightLight.enabled
+      onToggled: checked => Settings.data.nightLight.enabled = checked
+    }
 
-        NText {
-          text: "Reduce blue light emission to help you sleep better and reduce eye strain."
-          font.pointSize: Style.fontSizeM * scaling
-          color: Color.mOnSurfaceVariant
-          wrapMode: Text.WordWrap
+    NToggle {
+      label: "Auto Schedule"
+      description: "Automatically enable night light based on time schedule."
+      checked: Settings.data.nightLight.autoSchedule
+      onToggled: checked => Settings.data.nightLight.autoSchedule = checked
+    }
+
+    // Intensity settings
+    ColumnLayout {
+      NLabel {
+        label: "Intensity"
+        description: "Higher values create warmer light."
+      }
+      RowLayout {
+        spacing: Style.marginS * scaling
+
+        NSlider {
+          from: 0
+          to: 1
+          stepSize: 0.01
+          value: Settings.data.nightLight.intensity
+          onMoved: Settings.data.nightLight.intensity = value
           Layout.fillWidth: true
-          Layout.preferredWidth: parent.width - (Style.marginL * 2 * scaling)
-        }
-      }
-
-      NToggle {
-        label: "Enable Night Light"
-        description: "Apply a warm color filter to reduce blue light emission."
-        checked: Settings.data.nightLight.enabled
-        onToggled: checked => Settings.data.nightLight.enabled = checked
-      }
-
-      NToggle {
-        label: "Auto Schedule"
-        description: "Automatically enable night light based on time schedule."
-        checked: Settings.data.nightLight.autoSchedule
-        onToggled: checked => Settings.data.nightLight.autoSchedule = checked
-      }
-
-      // Intensity settings
-      ColumnLayout {
-        NLabel {
-          label: "Intensity"
-          description: "Higher values create warmer light."
-        }
-        RowLayout {
-          spacing: Style.marginS * scaling
-
-          NSlider {
-            from: 0
-            to: 1
-            stepSize: 0.01
-            value: Settings.data.nightLight.intensity
-            onMoved: Settings.data.nightLight.intensity = value
-            Layout.fillWidth: true
-            Layout.minimumWidth: 150 * scaling
-          }
-
-          NText {
-            text: `${Math.round(Settings.data.nightLight.intensity * 100)}%`
-            Layout.alignment: Qt.AlignVCenter
-            Layout.minimumWidth: 60 * scaling
-            horizontalAlignment: Text.AlignRight
-          }
-        }
-      }
-
-      // Schedule settings
-      ColumnLayout {
-        spacing: Style.marginXS * scaling
-
-        NLabel {
-          label: "Schedule"
-          description: "Set a start and end time for automatic schedule."
+          Layout.minimumWidth: 150 * scaling
         }
 
-        RowLayout {
-          Layout.fillWidth: false
-          spacing: Style.marginM * scaling
-
-          NText {
-            text: "Start Time"
-            font.pointSize: Style.fontSizeM * scaling
-            color: Color.mOnSurfaceVariant
-          }
-
-          NComboBox {
-            model: timeOptions
-            currentKey: Settings.data.nightLight.startTime
-            placeholder: "Select start time"
-            onSelected: key => Settings.data.nightLight.startTime = key
-            preferredWidth: 120 * scaling
-          }
-
-          Item {// add a little more spacing
-          }
-
-          NText {
-            text: "Stop Time"
-            font.pointSize: Style.fontSizeM * scaling
-            color: Color.mOnSurfaceVariant
-          }
-          NComboBox {
-            model: timeOptions
-            currentKey: Settings.data.nightLight.stopTime
-            placeholder: "Select stop time"
-            onSelected: key => Settings.data.nightLight.stopTime = key
-            preferredWidth: 120 * scaling
-          }
+        NText {
+          text: `${Math.round(Settings.data.nightLight.intensity * 100)}%`
+          Layout.alignment: Qt.AlignVCenter
+          Layout.minimumWidth: 60 * scaling
+          horizontalAlignment: Text.AlignRight
         }
       }
     }
- 
+
+    // Schedule settings
+    ColumnLayout {
+      spacing: Style.marginXS * scaling
+
+      NLabel {
+        label: "Schedule"
+        description: "Set a start and end time for automatic schedule."
+      }
+
+      RowLayout {
+        Layout.fillWidth: false
+        spacing: Style.marginM * scaling
+
+        NText {
+          text: "Start Time"
+          font.pointSize: Style.fontSizeM * scaling
+          color: Color.mOnSurfaceVariant
+        }
+
+        NComboBox {
+          model: timeOptions
+          currentKey: Settings.data.nightLight.startTime
+          placeholder: "Select start time"
+          onSelected: key => Settings.data.nightLight.startTime = key
+          preferredWidth: 120 * scaling
+        }
+
+        Item {// add a little more spacing
+        }
+
+        NText {
+          text: "Stop Time"
+          font.pointSize: Style.fontSizeM * scaling
+          color: Color.mOnSurfaceVariant
+        }
+        NComboBox {
+          model: timeOptions
+          currentKey: Settings.data.nightLight.stopTime
+          placeholder: "Select stop time"
+          onSelected: key => Settings.data.nightLight.stopTime = key
+          preferredWidth: 120 * scaling
+        }
+      }
+    }
+  }
 
   NDivider {
     Layout.fillWidth: true