refactor: replaced input fields with SliderInput components

modules/controlcenter/components/DeviceDetails.qml

@@ -12,7 +12,7 @@ import QtQuick.Layouts
 Item {
     id: root
 
-    required property Session session
+    property Session session
     property var device: null
     
     property Component headerComponent: null

modules/controlcenter/components/SliderInput.qml

@@ -0,0 +1,207 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    property string label: ""
+    property real value: 0
+    property real from: 0
+    property real to: 100
+    property real stepSize: 0
+    property var validator: null
+    property string suffix: "" // Optional suffix text (e.g., "×", "px")
+    property int decimals: 1 // Number of decimal places to show (default: 1)
+    property var formatValueFunction: null // Optional custom format function
+    property var parseValueFunction: null // Optional custom parse function
+    
+    function formatValue(val: real): string {
+        if (formatValueFunction) {
+            return formatValueFunction(val);
+        }
+        // Default format function
+        // Check if it's an IntValidator (IntValidator doesn't have a 'decimals' property)
+        if (validator && validator.bottom !== undefined && validator.decimals === undefined) {
+            return Math.round(val).toString();
+        }
+        // For DoubleValidator or no validator, use the decimals property
+        return val.toFixed(root.decimals);
+    }
+    
+    function parseValue(text: string): real {
+        if (parseValueFunction) {
+            return parseValueFunction(text);
+        }
+        // Default parse function
+        if (validator && validator.bottom !== undefined) {
+            // Check if it's an integer validator
+            if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
+                return parseInt(text);
+            }
+        }
+        return parseFloat(text);
+    }
+    
+    signal valueModified(real newValue)
+
+    property bool _initialized: false
+
+    spacing: Appearance.spacing.small
+    
+    Component.onCompleted: {
+        // Set initialized flag after a brief delay to allow component to fully load
+        Qt.callLater(() => {
+            _initialized = true;
+        });
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            visible: root.label !== ""
+            text: root.label
+            font.pointSize: Appearance.font.size.normal
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        StyledRect {
+            Layout.preferredWidth: 70
+            implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2
+            color: inputHover.containsMouse || inputField.activeFocus 
+                   ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                   : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+            radius: Appearance.rounding.small
+            border.width: 1
+            border.color: inputField.activeFocus 
+                          ? Colours.palette.m3primary
+                          : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+            Behavior on color { CAnim {} }
+            Behavior on border.color { CAnim {} }
+
+            MouseArea {
+                id: inputHover
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.IBeamCursor
+                acceptedButtons: Qt.NoButton
+            }
+
+            StyledTextField {
+                id: inputField
+                anchors.centerIn: parent
+                width: parent.width - Appearance.padding.normal
+                horizontalAlignment: TextInput.AlignHCenter
+                validator: root.validator
+                
+                Component.onCompleted: {
+                    // Initialize text without triggering valueModified signal
+                    text = root.formatValue(root.value);
+                }
+                
+                onTextChanged: {
+                    if (activeFocus) {
+                        const val = root.parseValue(text);
+                        if (!isNaN(val)) {
+                            // Validate against validator bounds if available
+                            let isValid = true;
+                            if (root.validator) {
+                                if (root.validator.bottom !== undefined && val < root.validator.bottom) {
+                                    isValid = false;
+                                }
+                                if (root.validator.top !== undefined && val > root.validator.top) {
+                                    isValid = false;
+                                }
+                            }
+                            
+                            if (isValid) {
+                                root.valueModified(val);
+                            }
+                        }
+                    }
+                }
+                
+                onEditingFinished: {
+                    const val = root.parseValue(text);
+                    let isValid = true;
+                    if (root.validator) {
+                        if (root.validator.bottom !== undefined && val < root.validator.bottom) {
+                            isValid = false;
+                        }
+                        if (root.validator.top !== undefined && val > root.validator.top) {
+                            isValid = false;
+                        }
+                    }
+                    
+                    if (isNaN(val) || !isValid) {
+                        text = root.formatValue(root.value);
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            visible: root.suffix !== ""
+            text: root.suffix
+            color: Colours.palette.m3outline
+            font.pointSize: Appearance.font.size.normal
+        }
+    }
+
+    StyledSlider {
+        id: slider
+
+        Layout.fillWidth: true
+        implicitHeight: Appearance.padding.normal * 3
+
+        from: root.from
+        to: root.to
+        stepSize: root.stepSize
+        
+        // Use Binding to allow slider to move freely during dragging
+        Binding {
+            target: slider
+            property: "value"
+            value: root.value
+            when: !slider.pressed
+        }
+        
+        onValueChanged: {
+            // Update input field text in real-time as slider moves during dragging
+            // Always update when slider value changes (during dragging or external updates)
+            if (!inputField.activeFocus) {
+                const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
+                inputField.text = root.formatValue(newValue);
+            }
+        }
+        
+        onMoved: {
+            const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
+            root.valueModified(newValue);
+            if (!inputField.activeFocus) {
+                inputField.text = root.formatValue(newValue);
+            }
+        }
+    }
+    
+    // Update input field when value changes externally (slider is already bound)
+    onValueChanged: {
+        // Only update if component is initialized to avoid issues during creation
+        if (root._initialized && !inputField.activeFocus) {
+            inputField.text = root.formatValue(root.value);
+        }
+    }
+}
+

modules/controlcenter/components/controls/SliderInput.qml

@@ -0,0 +1,179 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    property string label: ""
+    property real value: 0
+    property real from: 0
+    property real to: 100
+    property real stepSize: 0
+    property var validator: null
+    property string suffix: "" // Optional suffix text (e.g., "×", "px")
+    property var formatValueFunction: null // Optional custom format function
+    property var parseValueFunction: null // Optional custom parse function
+    
+    function formatValue(val: real): string {
+        if (formatValueFunction) {
+            return formatValueFunction(val);
+        }
+        // Default format function
+        if (validator && validator.bottom !== undefined) {
+            // Check if it's an integer validator
+            if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
+                return Math.round(val).toString();
+            }
+        }
+        return val.toFixed(1);
+    }
+    
+    function parseValue(text: string): real {
+        if (parseValueFunction) {
+            return parseValueFunction(text);
+        }
+        // Default parse function
+        if (validator && validator.bottom !== undefined) {
+            // Check if it's an integer validator
+            if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
+                return parseInt(text);
+            }
+        }
+        return parseFloat(text);
+    }
+    
+    signal valueChanged(real newValue)
+
+    spacing: Appearance.spacing.small
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            visible: root.label !== ""
+            text: root.label
+            font.pointSize: Appearance.font.size.normal
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        StyledRect {
+            Layout.preferredWidth: 70
+            implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2
+            color: inputHover.containsMouse || inputField.activeFocus 
+                   ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                   : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+            radius: Appearance.rounding.small
+            border.width: 1
+            border.color: inputField.activeFocus 
+                          ? Colours.palette.m3primary
+                          : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+            Behavior on color { CAnim {} }
+            Behavior on border.color { CAnim {} }
+
+            MouseArea {
+                id: inputHover
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.IBeamCursor
+                acceptedButtons: Qt.NoButton
+            }
+
+            StyledTextField {
+                id: inputField
+                anchors.centerIn: parent
+                width: parent.width - Appearance.padding.normal
+                horizontalAlignment: TextInput.AlignHCenter
+                validator: root.validator
+                
+                Component.onCompleted: {
+                    text = root.formatValue(root.value);
+                }
+                
+                onTextChanged: {
+                    if (activeFocus) {
+                        const val = root.parseValue(text);
+                        if (!isNaN(val)) {
+                            // Validate against validator bounds if available
+                            let isValid = true;
+                            if (root.validator) {
+                                if (root.validator.bottom !== undefined && val < root.validator.bottom) {
+                                    isValid = false;
+                                }
+                                if (root.validator.top !== undefined && val > root.validator.top) {
+                                    isValid = false;
+                                }
+                            }
+                            
+                            if (isValid) {
+                                root.valueChanged(val);
+                            }
+                        }
+                    }
+                }
+                
+                onEditingFinished: {
+                    const val = root.parseValue(text);
+                    let isValid = true;
+                    if (root.validator) {
+                        if (root.validator.bottom !== undefined && val < root.validator.bottom) {
+                            isValid = false;
+                        }
+                        if (root.validator.top !== undefined && val > root.validator.top) {
+                            isValid = false;
+                        }
+                    }
+                    
+                    if (isNaN(val) || !isValid) {
+                        text = root.formatValue(root.value);
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            visible: root.suffix !== ""
+            text: root.suffix
+            color: Colours.palette.m3outline
+            font.pointSize: Appearance.font.size.normal
+        }
+    }
+
+    StyledSlider {
+        id: slider
+
+        Layout.fillWidth: true
+        implicitHeight: Appearance.padding.normal * 3
+
+        from: root.from
+        to: root.to
+        stepSize: root.stepSize
+        value: root.value
+        
+        onMoved: {
+            const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
+            root.valueChanged(newValue);
+            if (!inputField.activeFocus) {
+                inputField.text = root.formatValue(newValue);
+            }
+        }
+    }
+    
+    // Update input field when value changes externally (slider is already bound)
+    onValueChanged: {
+        if (!inputField.activeFocus) {
+            inputField.text = root.formatValue(root.value);
+        }
+    }
+}
+

modules/controlcenter/network/EthernetDetails.qml

@@ -15,8 +15,8 @@ DeviceDetails {
     id: root
 
     required property Session session
-    readonly property var ethernetDevice: session.ethernet.active
+    readonly property var ethernetDevice: root.session.ethernet.active
-
+    
     device: ethernetDevice
 
     Component.onCompleted: {

modules/controlcenter/network/WirelessDetails.qml

@@ -17,8 +17,8 @@ DeviceDetails {
     id: root
 
     required property Session session
-    readonly property var network: session.network.active
+    readonly property var network: root.session.network.active
-
+    
     device: network
 
     Component.onCompleted: {

modules/controlcenter/taskbar/TaskbarPane.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -520,98 +521,21 @@ Item {
                             SectionContainer {
                                 contentSpacing: Appearance.spacing.normal
 
-                                ColumnLayout {
+                                SliderInput {
                                     Layout.fillWidth: true
-                                    spacing: Appearance.spacing.small
+                                    
-
+                                    label: qsTr("Drag threshold")
-                                    RowLayout {
+                                    value: root.dragThreshold
-                                        Layout.fillWidth: true
+                                    from: 0
-                                        spacing: Appearance.spacing.normal
+                                    to: 100
-
+                                    suffix: "px"
-                                        StyledText {
+                                    validator: IntValidator { bottom: 0; top: 100 }
-                                            text: qsTr("Drag threshold")
+                                    formatValueFunction: (val) => Math.round(val).toString()
-                                            font.pointSize: Appearance.font.size.normal
+                                    parseValueFunction: (text) => parseInt(text)
-                                        }
+                                    
-
+                                    onValueModified: (newValue) => {
-                                        Item {
+                                        root.dragThreshold = Math.round(newValue);
-                                            Layout.fillWidth: true
+                                        root.saveConfig();
-                                        }
-
-                                        StyledRect {
-                                            Layout.preferredWidth: 70
-                                            implicitHeight: dragThresholdInput.implicitHeight + Appearance.padding.small * 2
-                                            color: dragThresholdInputHover.containsMouse || dragThresholdInput.activeFocus 
-                                                   ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
-                                                   : Colours.layer(Colours.palette.m3surfaceContainer, 2)
-                                            radius: Appearance.rounding.small
-                                            border.width: 1
-                                            border.color: dragThresholdInput.activeFocus 
-                                                          ? Colours.palette.m3primary
-                                                          : Qt.alpha(Colours.palette.m3outline, 0.3)
-
-                                            Behavior on color { CAnim {} }
-                                            Behavior on border.color { CAnim {} }
-
-                                            MouseArea {
-                                                id: dragThresholdInputHover
-                                                anchors.fill: parent
-                                                hoverEnabled: true
-                                                cursorShape: Qt.IBeamCursor
-                                                acceptedButtons: Qt.NoButton
-                                            }
-
-                                            StyledTextField {
-                                                id: dragThresholdInput
-                                                anchors.centerIn: parent
-                                                width: parent.width - Appearance.padding.normal
-                                                horizontalAlignment: TextInput.AlignHCenter
-                                                validator: IntValidator { bottom: 0; top: 100 }
-                                                
-                                                Component.onCompleted: {
-                                                    text = root.dragThreshold.toString();
-                                                }
-                                                
-                                                onTextChanged: {
-                                                    if (activeFocus) {
-                                                        const val = parseInt(text);
-                                                        if (!isNaN(val) && val >= 0 && val <= 100) {
-                                                            root.dragThreshold = val;
-                                                            root.saveConfig();
-                                                        }
-                                                    }
-                                                }
-                                                onEditingFinished: {
-                                                    const val = parseInt(text);
-                                                    if (isNaN(val) || val < 0 || val > 100) {
-                                                        text = root.dragThreshold.toString();
-                                                    }
-                                                }
-                                            }
-                                        }
-
-                                        StyledText {
-                                            text: "px"
-                                            color: Colours.palette.m3outline
-                                            font.pointSize: Appearance.font.size.normal
-                                        }
-                                    }
-
-                                    StyledSlider {
-                                        id: dragThresholdSlider
-
-                                        Layout.fillWidth: true
-                                        implicitHeight: Appearance.padding.normal * 3
-
-                                        from: 0
-                                        to: 100
-                                        value: root.dragThreshold
-                                        onMoved: {
-                                            root.dragThreshold = Math.round(dragThresholdSlider.value);
-                                            if (!dragThresholdInput.activeFocus) {
-                                                dragThresholdInput.text = Math.round(dragThresholdSlider.value).toString();
-                                            }
-                                            root.saveConfig();
-                                        }
                                     }
                                 }
                             }