Settings: improved tabs managment so changing the model actually reorder them properly

+ code formatting

Modules/AppLauncher/AppLauncher.qml

@@ -371,8 +371,7 @@ NLoader {
                             property bool isSelected: index === selectedIndex
                             color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary,
                                                                                          1.1) : Colors.mSurface
-                            border.color: (appCardArea.containsMouse
+                            border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent"
-                                           || isSelected) ? Colors.mPrimary : "transparent"
                             border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0
 
                             Behavior on color {

Modules/LockScreen/LockScreen.qml

@@ -530,8 +530,7 @@ WlSessionLock {
                   width: 120 * Scaling.scale(screen)
                   height: 40 * Scaling.scale(screen)
                   radius: 12
-                  color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(
+                  color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(Colors.mPrimary, "33")
-                                                             Colors.mPrimary, "33")
                   border.color: Colors.mPrimary
                   border.width: 1
                   enabled: !lock.authenticating
@@ -631,8 +630,7 @@ WlSessionLock {
         width: 64 * Scaling.scale(screen)
         height: 64 * Scaling.scale(screen)
         radius: 32
-        color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b,
+        color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, shutdownArea.containsMouse ? 0.9 : 0.2)
-                       shutdownArea.containsMouse ? 0.9 : 0.2)
         border.color: Colors.mError
         border.width: 2 * Scaling.scale(screen)
 
@@ -689,8 +687,7 @@ WlSessionLock {
         width: 64 * Scaling.scale(screen)
         height: 64 * Scaling.scale(screen)
         radius: 32
-        color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b,
+        color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, rebootArea.containsMouse ? 0.9 : 0.2)
-                       rebootArea.containsMouse ? 0.9 : 0.2)
         border.color: Colors.mPrimary
         border.width: 2 * Scaling.scale(screen)
 

Modules/Settings/SettingsPanel.qml

@@ -10,18 +10,18 @@ import qs.Widgets
 NLoader {
   id: root
 
+  // Enumerate all the tabs, ordering is NOT relevant
   enum Tab {
-    General,
+    About,
-    Bar,
-    TimeWeather,
-    ScreenRecorder,
-    Network,
     Audio,
+    Bar,
     Display,
+    General,
+    Network,
+    ScreenRecorder,
+    TimeWeather,
     Wallpaper,
-    WallpaperSelector,
+    WallpaperSelector
-    //Misc,
-    About
   }
 
   property int requestedTab: SettingsPanel.Tab.General
@@ -33,6 +33,61 @@ NLoader {
       readonly property real scaling: Scaling.scale(screen)
       property int currentTabIndex: 0
 
+      // List of all the tabs, ordering is relevant.
+      property var tabsModel: [{
+          "id": SettingsPanel.Tab.General,
+          "label": "General",
+          "icon": "tune",
+          "source": "Tabs/General.qml"
+        }, {
+          "id": SettingsPanel.Tab.Bar,
+          "label": "Bar",
+          "icon": "web_asset",
+          "source": "Tabs/Bar.qml"
+        }, {
+          "id": SettingsPanel.Tab.Display,
+          "label": "Display",
+          "icon": "monitor",
+          "source": "Tabs/Display.qml"
+        }, {
+          "id": SettingsPanel.Tab.Audio,
+          "label": "Audio",
+          "icon": "volume_up",
+          "source": "Tabs/Audio.qml"
+        }, {
+          "id": SettingsPanel.Tab.Network,
+          "label": "Network",
+          "icon": "lan",
+          "source": "Tabs/Network.qml"
+        }, {
+          "id": SettingsPanel.Tab.TimeWeather,
+          "label": "Time & Weather",
+          "icon": "schedule",
+          "source": "Tabs/TimeWeather.qml"
+        }, {
+          "id": SettingsPanel.Tab.Wallpaper,
+          "label": "Wallpaper",
+          "icon": "image",
+          "source": "Tabs/Wallpaper.qml"
+        }, {
+          "id": SettingsPanel.Tab.WallpaperSelector,
+          "label": "Wallpaper Selector",
+          "icon": "wallpaper_slideshow",
+          "source": "Tabs/WallpaperSelector.qml"
+        }, {
+          "id": SettingsPanel.Tab.ScreenRecorder,
+          "label": "Screen Recorder",
+          "icon": "videocam",
+          "source": "Tabs/ScreenRecorder.qml"
+        }, {
+          "id": SettingsPanel.Tab.About,
+          "label": "About",
+          "icon": "info",
+          "source": "Tabs/About.qml"
+        }]
+
+      WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
+
       // Override hide function to animate first
       function hide() {
         // Start hide animation
@@ -43,6 +98,69 @@ NLoader {
         hideTimer.start()
       }
 
+      function getTab(tabId) {
+        switch (tabId) {
+        case SettingsPanel.Tab.About:
+          return tabAbount
+        case SettingsPanel.Tab.Audio:
+          return tabAudio
+        case SettingsPanel.Tab.Bar:
+          return tabBar
+        case SettingsPanel.Tab.General:
+          return tabGeneral
+        case SettingsPanel.Tab.Network:
+          return tabNetwork
+        case SettingsPanel.Tab.ScreenRecorder:
+          return tabScreenRecorder
+        case SettingsPanel.Tab.TimeWeather:
+          return tabTimeWeather
+        case SettingsPanel.Tab.Wallpaper:
+          return tabWallpaper
+        case SettingsPanel.Tab.WallpaperSelector:
+          return tabWallpaperSelector
+        default:
+          return tabGeneral
+        }
+      }
+
+      // Wrap each tab in a Component so we can spawn them with flexibility
+      Component {
+        id: tabAbount
+        Tabs.About {}
+      }
+      Component {
+        id: tabAudio
+        Tabs.Audio {}
+      }
+      Component {
+        id: tabBar
+        Tabs.Bar {}
+      }
+      Component {
+        id: tabGeneral
+        Tabs.General {}
+      }
+      Component {
+        id: tabNetwork
+        Tabs.Network {}
+      }
+      Component {
+        id: tabScreenRecorder
+        Tabs.ScreenRecorder {}
+      }
+      Component {
+        id: tabTimeWeather
+        Tabs.TimeWeather {}
+      }
+      Component {
+        id: tabWallpaper
+        Tabs.Wallpaper {}
+      }
+      Component {
+        id: tabWallpaperSelector
+        Tabs.WallpaperSelector {}
+      }
+
       // Connect to NPanel's dismissed signal to handle external close events
       Connections {
         target: panel
@@ -67,66 +185,6 @@ NLoader {
         }
       }
 
-      WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
-
-      property var tabsModel: [{
-          "id": SettingsPanel.Tab.General,
-          "label": "General",
-          "icon": "tune",
-          "source": "Tabs/General.qml"
-        }, {
-          "id": SettingsPanel.Tab.Bar,
-          "label": "Bar",
-          "icon": "web_asset",
-          "source": "Tabs/Bar.qml"
-        }, {
-          "id": SettingsPanel.Tab.TimeWeather,
-          "label": "Time & Weather",
-          "icon": "schedule",
-          "source": "Tabs/TimeWeather.qml"
-        }, {
-          "id": SettingsPanel.Tab.ScreenRecorder,
-          "label": "Screen Recorder",
-          "icon": "videocam",
-          "source": "Tabs/ScreenRecorder.qml"
-        }, {
-          "id": SettingsPanel.Tab.Network,
-          "label": "Network",
-          "icon": "lan",
-          "source": "Tabs/Network.qml"
-        }, {
-          "id": SettingsPanel.Tab.Audio,
-          "label": "Audio",
-          "icon": "volume_up",
-          "source": "Tabs/Audio.qml"
-        }, {
-          "id": SettingsPanel.Tab.Display,
-          "label": "Display",
-          "icon": "monitor",
-          "source": "Tabs/Display.qml"
-        }, {
-          "id": SettingsPanel.Tab.Wallpaper,
-          "label": "Wallpaper",
-          "icon": "image",
-          "source": "Tabs/Wallpaper.qml"
-        }, {
-          "id": SettingsPanel.Tab.WallpaperSelector,
-          "label": "Wallpaper Selector",
-          "icon": "wallpaper_slideshow",
-          "source": "Tabs/WallpaperSelector.qml"
-        }, // {
-        //   "id":  SettingsPanel.Tab.Misc,
-        //   "label": "Misc",
-        //   "icon": "more_horiz",
-        //   "source": "Tabs/Misc.qml"
-        // },
-        {
-          "id": SettingsPanel.Tab.About,
-          "label": "About",
-          "icon": "info",
-          "source": "Tabs/About.qml"
-        }]
-
       Component.onCompleted: {
         show()
       }
@@ -220,7 +278,6 @@ NLoader {
               spacing: Style.marginTiny * 1.5 * scaling // Minimal spacing between tabs
 
               Repeater {
-                id: sections
                 model: panel.tabsModel
 
                 delegate: Rectangle {
@@ -328,17 +385,12 @@ NLoader {
                 Layout.fillHeight: true
                 currentIndex: currentTabIndex
 
-                Tabs.General {}
+                Repeater {
-                Tabs.Bar {}
+                  model: panel.tabsModel
-                Tabs.TimeWeather {}
+                  delegate: Loader {
-                Tabs.ScreenRecorder {}
+                    sourceComponent: getTab(modelData.id)
-                Tabs.Network {}
+                  }
-                Tabs.Audio {}
+                }
-                Tabs.Display {}
-                Tabs.Wallpaper {}
-                Tabs.WallpaperSelector {}
-                //Tabs.Misc {}
-                Tabs.About {}
               }
             }
           }

Modules/Settings/Tabs/ColorScheme.qml

@@ -0,0 +1,89 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Services
+import qs.Widgets
+
+ColumnLayout {
+  id: root
+
+  spacing: 0
+
+  ScrollView {
+    id: scrollView
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    padding: Style.marginMedium * scaling
+    clip: true
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+
+    ColumnLayout {
+      width: scrollView.availableWidth
+      spacing: 0
+
+      Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 0
+      }
+
+      ColumnLayout {
+        spacing: Style.marginLarge * scaling
+        Layout.fillWidth: true
+
+        NText {
+          text: "Components"
+          font.pointSize: Style.fontSizeXL * scaling
+          font.weight: Style.fontWeightBold
+          color: Colors.mOnSurface
+        }
+
+        NToggle {
+          label: "Show Active Window"
+          description: "Display the title of the currently focused window below the bar"
+          value: Settings.data.bar.showActiveWindow
+          onToggled: function (newValue) {
+            Settings.data.bar.showActiveWindow = newValue
+          }
+        }
+
+        NToggle {
+          label: "Show Active Window Icon"
+          description: "Display the icon of the currently focused window"
+          value: Settings.data.bar.showActiveWindowIcon
+          onToggled: function (newValue) {
+            Settings.data.bar.showActiveWindowIcon = newValue
+          }
+        }
+
+        NToggle {
+          label: "Show System Info"
+          description: "Display system information (CPU, RAM, Temperature)"
+          value: Settings.data.bar.showSystemInfo
+          onToggled: function (newValue) {
+            Settings.data.bar.showSystemInfo = newValue
+          }
+        }
+
+        NToggle {
+          label: "Show Taskbar"
+          description: "Display a taskbar showing currently open windows"
+          value: Settings.data.bar.showTaskbar
+          onToggled: function (newValue) {
+            Settings.data.bar.showTaskbar = newValue
+          }
+        }
+
+        NToggle {
+          label: "Show Media"
+          description: "Display media controls and information"
+          value: Settings.data.bar.showMedia
+          onToggled: function (newValue) {
+            Settings.data.bar.showMedia = newValue
+          }
+        }
+      }
+    }
+  }
+}

Modules/Settings/Tabs/Misc.qml

@@ -1,45 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import qs.Services
-import qs.Widgets
-
-ColumnLayout {
-  id: root
-
-  spacing: 0
-
-  ScrollView {
-    id: scrollView
-
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-    padding: Style.marginMedium * scaling
-    clip: true
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical.policy: ScrollBar.AsNeeded
-
-    ColumnLayout {
-      width: scrollView.availableWidth
-      spacing: 0
-
-      Item {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 0
-      }
-
-      ColumnLayout {
-        spacing: Style.marginLarge * scaling
-        Layout.fillWidth: true
-
-        NText {
-          text: "Miscellaneous Settings"
-          font.pointSize: Style.fontSizeXL * scaling
-          font.weight: Style.fontWeightBold
-          color: Colors.mOnSurface
-          Layout.bottomMargin: Style.marginSmall * scaling
-        }
-      }
-    }
-  }
-}

Services/Colors.qml

@@ -9,7 +9,6 @@ import qs.Services
 // Noctalia Colors - Material Design 3
 // We only use a very small subset of all available m3 colors to avoid complexity
 // All color names start with a 'm' to avoid QML assuming some of them are signals (ex: onPrimary)
-
 Singleton {
   id: root
 
@@ -66,7 +65,6 @@ Singleton {
     property color mOutline: "#44415a"
     property color mOutlineVariant: "#514e6c"
     property color mShadow: "#191724"
-
   }
 
   // ----------------------------------------------------------------

Widgets/NIconButton.qml

@@ -42,8 +42,7 @@ Rectangle {
     font.variableAxes: {
       "wght": (Font.Normal + Font.Bold) / 2.0
     }
-    color: (root.hovering
+    color: (root.hovering || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface
-            || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
     opacity: root.enabled ? Style.opacityFull : Style.opacityMedium

Widgets/NToggle.qml

@@ -53,7 +53,7 @@ RowLayout {
       implicitWidth: (root.baseSize - 5) * scaling
       implicitHeight: (root.baseSize - 5) * scaling
       radius: height * 0.5
-      color: value ? Colors.mOnPrimary: Colors.mPrimary
+      color: value ? Colors.mOnPrimary : Colors.mPrimary
       border.color: value ? Colors.mSurface : Colors.mSurface
       border.width: Math.max(1, Style.borderMedium * scaling)
       y: 2 * scaling