feat(QML): enhance the setting components

Author: acolombier

res/qml/Settings.qml

@@ -248,14 +248,14 @@ Popup {
                     Layout.leftMargin: 20
 
                     Component.onCompleted: {
-                        let index = 0;
                         let activateBuilder = index => function () {
                                 categoryList.currentIndex = index;
                             };
                         let visibleBuilder = index => function () {
                                 return categoryList.currentIndex == index;
                             };
-                        for (let child of Object.values(data)) {
+                        for (let index = 0; index < data.length; index++) {
+                            let child = data[index];
                             if (!child.label)
                                 continue;
                             sectionProperties.append({
@@ -264,7 +264,6 @@ Popup {
                             child.visible = Qt.binding(visibleBuilder(index));
                             child.activated.connect(activateBuilder(index));
                             child.anchors.fill = this;
-                            index++;
                         }
                         // This is needed to ensure the right category is displayed.
                         // It would seems there is a bug, where the component's layout appears out of date.

res/qml/Settings/AudioRouter.qml

@@ -476,7 +476,7 @@ Rectangle {
                     tooltips: !root.hiddenConnections ? [] : [null, `${root.hiddenConnections} connection${root.hiddenConnections > 1 ? 's' : ''} hidden\nUse the advanced mode to view them`, null]
 
                     onOptionsChanged: {
-                        if (modeChoice.selected.startsWith("advanced")) {
+                        if (modeChoice.selected?.startsWith("advanced")) {
                             modeChoice.selected = options[1];
                         }
                     }

res/qml/Settings/RatioChoice.qml

@@ -18,7 +18,7 @@ Item {
     property alias metric: fontMetrics
     property bool normalizedWidth: false
     required property list<string> options
-    property string selected: options.length ? options[0] : null
+    property var selected: options.length ? options[0] : null
     property real spacing: 9
     property list<var> tooltips: []
 

res/qml/main.qml

@@ -13,6 +13,8 @@ ApplicationWindow {
     property alias editDeck: editDeckButton.checked
     property var focusedDeck: null
     property alias maximizeLibrary: maximizeLibraryButton.checked
+    readonly property int numDecks: 4
+    readonly property int numSamplers: 16
     readonly property bool show4decks: show4DecksButton.checked && show4DecksButton.visible
     property alias showEffects: showEffectsButton.checked
     property alias showSamplers: showSamplersButton.checked
@@ -25,13 +27,19 @@ ApplicationWindow {
     width: 1792
 
     Mixxx.ControlProxy {
-        id: numDecksControl
-
         group: "[App]"
         key: "num_decks"
 
-        Component.onCompleted: {
-            value = 4;
+        onInitializedChanged: {
+            value = root.numDecks;
+        }
+    }
+    Mixxx.ControlProxy {
+        group: "[App]"
+        key: "num_samplers"
+
+        onInitializedChanged: {
+            value = root.numSamplers;
         }
     }
     Column {
@@ -349,6 +357,7 @@ ApplicationWindow {
                     onToggleFocus: {
                         root.focusedDeck = (root.focusedDeck === deck1) ? null : deck1;
                     }
+
                     anchors {
                         left: parent.left
                         right: mixer.left