Settings: large cleanup and factorization. Should look much better.

Widgets/NComboBox.qml

@@ -5,10 +5,11 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-ColumnLayout {
+RowLayout {
   id: root
 
-  readonly property real preferredHeight: Style.baseWidgetSize * 1.35 * scaling
+  readonly property real preferredHeight: Style.baseWidgetSize * 1.1 * scaling
+  property real preferredWidth: 320 * scaling
 
   property string label: ""
   property string description: ""
@@ -23,11 +24,6 @@ ColumnLayout {
   spacing: Style.marginS * scaling
   Layout.fillWidth: true
 
-  NLabel {
-    label: root.label
-    description: root.description
-  }
-
   function findIndexByKey(key) {
     for (var i = 0; i < root.model.count; i++) {
       if (root.model.get(i).key === key) {
@@ -37,10 +33,15 @@ ColumnLayout {
     return -1
   }
 
+  NLabel {
+    label: root.label
+    description: root.description
+  }
+
   ComboBox {
     id: combo
 
-    Layout.preferredWidth: 320 * scaling
+    Layout.preferredWidth: root.preferredWidth
     Layout.preferredHeight: height
     model: model
     currentIndex: findIndexByKey(currentKey)

Widgets/NLabel.qml

@@ -11,7 +11,7 @@ ColumnLayout {
 
   NText {
     text: label
-    font.pointSize: Style.fontSizeM * scaling
+    font.pointSize: Style.fontSizeL * scaling
     font.weight: Style.fontWeightBold
     color: Color.mOnSurface
     visible: label !== ""

Widgets/NSectionEditor.qml

@@ -10,7 +10,6 @@ NBox {
   property string sectionName: ""
   property var widgetModel: []
   property var availableWidgets: []
-  property var scrollView: null
 
   signal addWidget(string widgetName, string section)
   signal removeWidget(string section, int index)
@@ -23,7 +22,7 @@ NBox {
     if (widgetCount === 0)
       return 140 * scaling
 
-    var availableWidth = scrollView ? scrollView.availableWidth - (Style.marginM * scaling * 2) : 400 * scaling
+    var availableWidth = parent.width
     var avgWidgetWidth = 150 * scaling
     var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
     var rows = Math.ceil(widgetCount / widgetsPerRow)
@@ -52,7 +51,7 @@ NBox {
 
   ColumnLayout {
     anchors.fill: parent
-    anchors.margins: Style.marginM * scaling
+    anchors.margins: Style.marginL * scaling
     spacing: Style.marginM * scaling
 
     RowLayout {
@@ -189,13 +188,13 @@ NBox {
                            return
                          }
 
-                         Logger.log("NSectionEditor", `Started dragging widget: ${modelData} at index ${index}`)
+                         //Logger.log("NSectionEditor", `Started dragging widget: ${modelData} at index ${index}`)
                          // Bring to front when starting drag
                          widgetItem.z = 1000
                        }
 
             onReleased: {
-              Logger.log("NSectionEditor", `Released widget: ${modelData} at index ${index}`)
+              //Logger.log("NSectionEditor", `Released widget: ${modelData} at index ${index}`)
               // Reset z-index when drag ends
               widgetItem.z = 0
 
@@ -232,13 +231,13 @@ NBox {
               if (targetIndex !== -1 && targetIndex !== index) {
                 const fromIndex = index
                 const toIndex = targetIndex
-                Logger.log(
-                      "NSectionEditor",
-                      `Dropped widget from index ${fromIndex} to position ${toIndex} (distance: ${minDistance.toFixed(
-                        2)})`)
+                // Logger.log(
+                //       "NSectionEditor",
+                //       `Dropped widget from index ${fromIndex} to position ${toIndex} (distance: ${minDistance.toFixed(
+                //         2)})`)
                 reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
               } else {
-                Logger.log("NSectionEditor", `No valid drop target found for widget at index ${index}`)
+                Logger.warn("NSectionEditor", `No valid drop target found for widget at index ${index}`)
               }
             }
           }
@@ -264,17 +263,16 @@ NBox {
         radius: Style.radiusS * scaling
       }
 
-      onEntered: function (drag) {
-        Logger.log("NSectionEditor", "Entered start drop zone")
+      onEntered: function (drag) {//Logger.log("NSectionEditor", "Entered start drop zone")
       }
 
       onDropped: function (drop) {
-        Logger.log("NSectionEditor", "Dropped on start zone")
+        //Logger.log("NSectionEditor", "Dropped on start zone")
         if (drop.source && drop.source.widgetIndex !== undefined) {
           const fromIndex = drop.source.widgetIndex
           const toIndex = 0 // Insert at the beginning
           if (fromIndex !== toIndex) {
-            Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to beginning`)
+            //Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to beginning`)
             reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
           }
         }
@@ -299,17 +297,16 @@ NBox {
         radius: Style.radiusS * scaling
       }
 
-      onEntered: function (drag) {
-        Logger.log("NSectionEditor", "Entered end drop zone")
+      onEntered: function (drag) {//Logger.log("NSectionEditor", "Entered end drop zone")
       }
 
       onDropped: function (drop) {
-        Logger.log("NSectionEditor", "Dropped on end zone")
+        //Logger.log("NSectionEditor", "Dropped on end zone")
         if (drop.source && drop.source.widgetIndex !== undefined) {
           const fromIndex = drop.source.widgetIndex
           const toIndex = widgetModel.length // Insert at the end
           if (fromIndex !== toIndex) {
-            Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to end`)
+            //Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to end`)
             reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
           }
         }

Widgets/NSpinBox.qml

@@ -30,26 +30,9 @@ RowLayout {
 
   Layout.fillWidth: true
 
-  ColumnLayout {
-    spacing: Style.marginXXS * scaling
-    Layout.fillWidth: true
-
-    NText {
-      text: label
-      font.pointSize: Style.fontSizeM * scaling
-      font.weight: Style.fontWeightBold
-      color: Color.mOnSurface
-      visible: label !== ""
-    }
-
-    NText {
-      text: description
-      font.pointSize: Style.fontSizeS * scaling
-      color: Color.mOnSurfaceVariant
-      wrapMode: Text.WordWrap
-      Layout.fillWidth: true
-      visible: description !== ""
-    }
+  NLabel {
+    label: root.label
+    description: root.description
   }
 
   // Value

Widgets/NToast.qml

@@ -150,7 +150,7 @@ Item {
           id: labelText
           text: root.label
           color: Color.mOnSurface
-          font.pointSize: Style.fontSize * scaling
+          font.pointSize: Style.fontSizeM * scaling
           font.weight: Style.fontWeightBold
           wrapMode: Text.WordWrap
           width: parent.width
@@ -161,7 +161,7 @@ Item {
           id: descriptionText
           text: root.description
           color: Color.mOnSurface
-          font.pointSize: Style.fontSize * scaling
+          font.pointSize: Style.fontSizeM * scaling
           wrapMode: Text.WordWrap
           width: parent.width
           visible: text.length > 0
@@ -176,7 +176,7 @@ Item {
 
         color: Color.mOnSurface
 
-        fontPointSize: Style.fontSize * scaling
+        fontPointSize: Style.fontSizeM * scaling
         sizeRatio: 0.8
         Layout.alignment: Qt.AlignTop
 

Widgets/NToggle.qml

@@ -19,24 +19,9 @@ RowLayout {
 
   Layout.fillWidth: true
 
-  ColumnLayout {
-    spacing: Style.marginXXS * scaling
-    Layout.fillWidth: true
-
-    NText {
-      text: label
-      font.pointSize: Style.fontSizeM * scaling
-      font.weight: Style.fontWeightBold
-      color: Color.mOnSurface
-    }
-
-    NText {
-      text: description
-      font.pointSize: Style.fontSizeS * scaling
-      color: Color.mOnSurfaceVariant
-      wrapMode: Text.WordWrap
-      Layout.fillWidth: true
-    }
+  NLabel {
+    label: root.label
+    description: root.description
   }
 
   Rectangle {