Settings: more cleanup - wip

Commons/IconsSets/TablerIcons.qml

@@ -106,7 +106,7 @@ Singleton {
     "settings-wallpaper-selector": "library-photo",
     "settings-screen-recorder": "video",
     "settings-hooks": "link",
-    "settings-notification": "notification",
+    "settings-notification": "bell",
     "settings-about": "info-square-rounded",
     "bluetooth": "bluetooth",
     "bt-device-generic": "bluetooth",

Modules/SettingsPanel/SettingsPanel.qml

@@ -468,13 +468,13 @@ NPanel {
               NIcon {
                 icon: root.tabsModel[currentTabIndex]?.icon
                 color: Color.mPrimary
-                font.pointSize: Style.fontSizeXL * scaling
+                font.pointSize: Style.fontSizeXXL * scaling
               }
 
               // Main title
               NText {
                 text: root.tabsModel[currentTabIndex]?.label || ""
-                font.pointSize: Style.fontSizeXL * scaling
+                font.pointSize: Style.fontSizeXXL * scaling
                 font.weight: Style.fontWeightBold
                 color: Color.mPrimary
                 Layout.fillWidth: true

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -8,9 +8,10 @@ import qs.Services
 
 ColumnLayout {
   id: root
+  spacing: Style.marginL * scaling
 
   NHeader {
-    label: "Audio Settings"
+    label: "Volumes"
     description: "Configure system audio, devices, and media player preferences."
   }
 
@@ -24,9 +25,9 @@ ColumnLayout {
   }
 
   // Master Volume
-  ColumnLayout {
+    ColumnLayout {
-    spacing: Style.marginS * scaling
+      spacing: Style.marginXXS * scaling
-    Layout.fillWidth: true
+      Layout.fillWidth: true
 
     NLabel {
       label: "Output Volume"
@@ -72,7 +73,6 @@ ColumnLayout {
   ColumnLayout {
     spacing: Style.marginS * scaling
     Layout.fillWidth: true
-    Layout.topMargin: Style.marginM * scaling
 
     NToggle {
       label: "Mute Audio Output"
@@ -88,9 +88,8 @@ ColumnLayout {
 
   // Input Volume
   ColumnLayout {
-    spacing: Style.marginS * scaling
+    spacing: Style.marginXS * scaling
     Layout.fillWidth: true
-    Layout.topMargin: Style.marginM * scaling
 
     NLabel {
       label: "Input Volume"
@@ -122,7 +121,6 @@ ColumnLayout {
   ColumnLayout {
     spacing: Style.marginS * scaling
     Layout.fillWidth: true
-    Layout.topMargin: Style.marginM * scaling
 
     NToggle {
       label: "Mute Audio Input"
@@ -136,7 +134,6 @@ ColumnLayout {
   ColumnLayout {
     spacing: Style.marginS * scaling
     Layout.fillWidth: true
-    Layout.topMargin: Style.marginM * scaling
 
     NSpinBox {
       Layout.fillWidth: true
@@ -204,7 +201,6 @@ ColumnLayout {
     ColumnLayout {
       spacing: Style.marginXS * scaling
       Layout.fillWidth: true
-      Layout.bottomMargin: Style.marginL * scaling
 
       NLabel {
         label: "Input Device"

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -11,8 +11,8 @@ ColumnLayout {
   id: root
 
   NHeader {
-    label: "Bar Settings"
+    label: "Appearance"
-    description: "Configure bar appearance, positioning, and monitor settings."
+    description: "Configure bar appearance and positioning."
   }
 
   // Helper functions to update arrays immutably
@@ -75,41 +75,34 @@ ColumnLayout {
       }
     }
 
-    NDivider {
+        ColumnLayout {
-      Layout.fillWidth: true
-      Layout.topMargin: Style.marginXL * scaling
-      Layout.bottomMargin: Style.marginXL * scaling
-    }
-
-    ColumnLayout {
       spacing: Style.marginXXS * scaling
       Layout.fillWidth: true
 
-      NHeader {
+    NLabel {
-        label: "Background Opacity"
+      label: "Background Opacity"
-        description: "Adjust the background opacity of the bar."
+      description: "Adjust the background opacity of the bar."
-      }
-
-      RowLayout {
-        NSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: 1
-          stepSize: 0.01
-          value: Settings.data.bar.backgroundOpacity
-          onMoved: Settings.data.bar.backgroundOpacity = value
-          cutoutColor: Color.mSurface
-        }
-
-        NText {
-          text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%"
-          Layout.alignment: Qt.AlignVCenter
-          Layout.leftMargin: Style.marginS * scaling
-          color: Color.mOnSurface
-        }
-      }
     }
 
+    RowLayout {
+      NSlider {
+        Layout.fillWidth: true
+        from: 0
+        to: 1
+        stepSize: 0.01
+        value: Settings.data.bar.backgroundOpacity
+        onMoved: Settings.data.bar.backgroundOpacity = value
+        cutoutColor: Color.mSurface
+      }
+
+      NText {
+        text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%"
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: Style.marginS * scaling
+        color: Color.mOnSurface
+      }
+    }
+        }
     NToggle {
       Layout.fillWidth: true
       label: "Floating Bar"
@@ -206,11 +199,11 @@ ColumnLayout {
 
   // Monitor Configuration
   ColumnLayout {
-    spacing: Style.marginXXS * scaling
+    spacing: Style.marginM * scaling
     Layout.fillWidth: true
 
     NHeader {
-      label: "Monitor Configuration"
+      label: "Monitors Configuration"
       description: "Choose which monitors should display the bar."
     }
 

Modules/SettingsPanel/Tabs/ColorSchemeTab.qml

@@ -11,8 +11,8 @@ ColumnLayout {
   spacing: 0
 
   NHeader {
-    label: "Color Schemes"
+    label: "Behavior"
-    description: "Choose and customize color schemes for your interface."
+    description: "Main settings for Noctalia's colors."
   }
 
   // Cache for scheme JSON (can be flat or {dark, light})

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -51,14 +51,13 @@ ColumnLayout {
 
   spacing: Style.marginL * scaling
 
-  NLabel {
+  NHeader {
     label: "Monitor-specific configuration"
     description: "Configure scaling and brightness settings individually for each connected display."
   }
 
   ColumnLayout {
     spacing: Style.marginL * scaling
-    Layout.topMargin: Style.marginL * scaling
 
     Repeater {
       model: Quickshell.screens || []
@@ -92,7 +91,7 @@ ColumnLayout {
             text: (`${modelData.name}: ${modelData.model}` || "Unknown")
             font.pointSize: Style.fontSizeL * scaling
             font.weight: Style.fontWeightBold
-            color: Color.mSecondary
+            color: Color.mPrimary
           }
 
           NText {
@@ -255,7 +254,7 @@ ColumnLayout {
     spacing: Style.marginXS * scaling
     Layout.fillWidth: true
 
-NHeader {
+    NHeader {
       label: "Night Light"
       description: "Reduce blue light emission to help you sleep better and reduce eye strain."
     }

Modules/SettingsPanel/Tabs/DockTab.qml

@@ -7,13 +7,12 @@ import qs.Services
 import qs.Widgets
 
 ColumnLayout {
-  id: contentColumn
+  id: root
   spacing: Style.marginL * scaling
-  width: root.width
 
   NHeader {
-    label: "Dock Settings"
+    label: "Appearance"
-    description: "Configure dock behavior, appearance, and monitor settings."
+    description: "Configure dock behavior and appearance."
   }
 
   // Helper functions to update arrays immutably
@@ -43,6 +42,63 @@ ColumnLayout {
     onToggled: checked => Settings.data.dock.exclusive = checked
   }
 
+  ColumnLayout {
+    spacing: Style.marginXXS * scaling
+    Layout.fillWidth: true
+    NLabel {
+      label: "Background Opacity"
+      description: "Adjust the background opacity."
+    }
+
+    RowLayout {
+      NSlider {
+        Layout.fillWidth: true
+        from: 0
+        to: 1
+        stepSize: 0.01
+        value: Settings.data.dock.backgroundOpacity
+        onMoved: Settings.data.dock.backgroundOpacity = value
+        cutoutColor: Color.mSurface
+      }
+
+      NText {
+        text: Math.floor(Settings.data.dock.backgroundOpacity * 100) + "%"
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: Style.marginS * scaling
+        color: Color.mOnSurface
+      }
+    }
+  }
+
+  ColumnLayout {
+    spacing: Style.marginXXS * scaling
+    Layout.fillWidth: true
+
+    NLabel {
+      label: "Dock Floating Distance"
+      description: "Adjust the floating distance from the screen edge."
+    }
+
+    RowLayout {
+      NSlider {
+        Layout.fillWidth: true
+        from: 0
+        to: 4
+        stepSize: 0.01
+        value: Settings.data.dock.floatingRatio
+        onMoved: Settings.data.dock.floatingRatio = value
+        cutoutColor: Color.mSurface
+      }
+
+      NText {
+        text: Math.floor(Settings.data.dock.floatingRatio * 100) + "%"
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: Style.marginS * scaling
+        color: Color.mOnSurface
+      }
+    }
+  }
+
   NDivider {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginXL * scaling
@@ -51,11 +107,11 @@ ColumnLayout {
 
   // Monitor Configuration
   ColumnLayout {
-    spacing: Style.marginXXS * scaling
+    spacing: Style.marginM * scaling
     Layout.fillWidth: true
 
     NHeader {
-      label: "Monitor Configuration"
+      label: "Monitors Configuration"
       description: "Choose which monitors should display the dock."
     }
 
@@ -82,68 +138,4 @@ ColumnLayout {
     Layout.topMargin: Style.marginXL * scaling
     Layout.bottomMargin: Style.marginXL * scaling
   }
-
-  ColumnLayout {
-    spacing: Style.marginXXS * scaling
-    Layout.fillWidth: true
-
-    NHeader {
-      label: "Background Opacity"
-      description: "Adjust the background opacity."
-    }
-
-    RowLayout {
-      NSlider {
-        Layout.fillWidth: true
-        from: 0
-        to: 1
-        stepSize: 0.01
-        value: Settings.data.dock.backgroundOpacity
-        onMoved: Settings.data.dock.backgroundOpacity = value
-        cutoutColor: Color.mSurface
-      }
-
-      NText {
-        text: Math.floor(Settings.data.dock.backgroundOpacity * 100) + "%"
-        Layout.alignment: Qt.AlignVCenter
-        Layout.leftMargin: Style.marginS * scaling
-        color: Color.mOnSurface
-      }
-    }
-  }
-
-  NDivider {
-    Layout.fillWidth: true
-    Layout.topMargin: Style.marginXL * scaling
-    Layout.bottomMargin: Style.marginXL * scaling
-  }
-
-  ColumnLayout {
-    spacing: Style.marginXXS * scaling
-    Layout.fillWidth: true
-
-    NHeader {
-      label: "Dock Floating Distance"
-      description: "Adjust the floating distance from the screen edge."
-    }
-
-    RowLayout {
-      NSlider {
-        Layout.fillWidth: true
-        from: 0
-        to: 4
-        stepSize: 0.01
-        value: Settings.data.dock.floatingRatio
-        onMoved: Settings.data.dock.floatingRatio = value
-        cutoutColor: Color.mSurface
-      }
-
-      NText {
-        text: Math.floor(Settings.data.dock.floatingRatio * 100) + "%"
-        Layout.alignment: Qt.AlignVCenter
-        Layout.leftMargin: Style.marginS * scaling
-        color: Color.mOnSurface
-      }
-    }
-  }
 }

Modules/SettingsPanel/Tabs/GeneralTab.qml

@@ -55,6 +55,7 @@ ColumnLayout {
 
     NHeader {
       label: "User Interface"
+      description: "Main settings for the user interface."
     }
 
     NToggle {
@@ -136,6 +137,7 @@ ColumnLayout {
     Layout.fillWidth: true
     NHeader {
       label: "Screen Corners"
+      description: "Customize screen corner rounding and visual effects."
     }
 
     NToggle {
@@ -184,9 +186,10 @@ ColumnLayout {
   ColumnLayout {
     spacing: Style.marginL * scaling
     Layout.fillWidth: true
-    
+
     NHeader {
       label: "Fonts"
+      description: "Configure interface typography."
     }
 
     // Font configuration section

Modules/SettingsPanel/Tabs/LauncherTab.qml

@@ -9,8 +9,8 @@ ColumnLayout {
   id: root
 
   NHeader {
-    label: "Launcher Settings"
+    label: "Appearance"
-    description: "Configure the application launcher panel behavior and appearance."
+    description: "Configure the launcher behavior and appearance."
   }
 
   ColumnLayout {

Modules/SettingsPanel/Tabs/NotificationTab.qml

@@ -28,7 +28,8 @@ ColumnLayout {
     Layout.fillWidth: true
 
     NHeader {
-      label: "General Settings"
+      label: "Appearance"
+      description: "Configure notifications appearance and behavior."
     }
 
     NToggle {
@@ -47,11 +48,11 @@ ColumnLayout {
 
   // Monitor Configuration
   ColumnLayout {
-    spacing: Style.marginXXS * scaling
+    spacing: Style.marginM * scaling
     Layout.fillWidth: true
 
     NHeader {
-      label: "Monitor Configuration"
+      label: "Monitors Configuration"
       description: "Choose which monitors should display notifications."
     }
 

Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml

@@ -11,8 +11,8 @@ ColumnLayout {
   spacing: Style.marginL * scaling
 
   NHeader {
-    label: "Screen Recorder"
+    label: "General Settings"
-    description: "Configure screen recording settings and output options."
+    description: "Configure screen recording output and content."
   }
 
   // Output Directory

Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml

@@ -9,13 +9,8 @@ import qs.Widgets
 ColumnLayout {
   id: root
   width: parent.width
-
   spacing: Style.marginL * scaling
 
-  NHeader {
-    label: "Wallpaper Selector"
-    description: "Browse and select wallpapers from your configured directory."
-  }
 
   property list<string> wallpapersList: []
   property string currentWallpaper: ""
@@ -49,6 +44,7 @@ ColumnLayout {
   // Current wallpaper display
   NHeader {
     label: "Current Wallpaper"
+    description: "Preview and manage your desktop background."
   }
 
   Rectangle {

Modules/SettingsPanel/Tabs/WeatherTab.qml

@@ -9,8 +9,8 @@ ColumnLayout {
   id: root
 
   NHeader {
-    label: "Weather & Location"
+ label: "Your Location" 
-    description: "Configure weather display and location settings."
+  description: "Set your location for weather, time zones, and scheduling."
   }
 
   // Location section

Widgets/NHeader.qml

@@ -10,11 +10,13 @@ ColumnLayout {
 
   spacing: Style.marginXXS * scaling
   Layout.fillWidth: true
+  Layout.bottomMargin: Style.marginM * scaling
 
   NText {
     text: root.label
-    font.pointSize: Style.fontSizeXXL * scaling
+    font.pointSize: Style.fontSizeXL * scaling
     font.weight: Style.fontWeightBold
+    font.capitalization: Font.Capitalize
     color: Color.mSecondary
     visible: root.title !== ""
   }