refactor: SplitPaneLayout now component

1 files changed, 250 insertions, 312 deletions

diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml
index c2d60d8..dc3ba56 100644
--- a/modules/controlcenter/audio/AudioPane.qml
+++ b/modules/controlcenter/audio/AudioPane.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -11,52 +12,17 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+Item {
     id: root
 
     required property Session session
 
     anchors.fill: parent
 
-    spacing: 0
+    SplitPaneLayout {
+        anchors.fill: parent
 
-    Item {
-        id: leftAudioItem
-        Layout.preferredWidth: Math.floor(parent.width * 0.4)
-        Layout.minimumWidth: 420
-        Layout.fillHeight: true
-
-        ClippingRectangle {
-            id: leftAudioClippingRect
-            anchors.fill: parent
-            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: 0
-            anchors.rightMargin: Appearance.padding.normal / 2
-
-            radius: leftAudioBorder.innerRadius
-            color: "transparent"
-
-            Loader {
-                id: leftAudioLoader
-
-                anchors.fill: parent
-                anchors.margins: Appearance.padding.large + Appearance.padding.normal
-                anchors.leftMargin: Appearance.padding.large
-                anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
-
-                asynchronous: true
-                sourceComponent: audioLeftContentComponent
-            }
-        }
-
-        InnerBorder {
-            id: leftAudioBorder
-            leftThickness: 0
-            rightThickness: Appearance.padding.normal / 2
-        }
-
-        Component {
-            id: audioLeftContentComponent
+        leftContent: Component {
 
             StyledFlickable {
                 id: leftAudioFlickable
@@ -246,349 +212,321 @@ RowLayout {
                     }
                 }
             }
-            }
         }
-    }
-
-    Item {
-        id: rightAudioItem
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-
-        ClippingRectangle {
-            id: rightAudioClippingRect
-            anchors.fill: parent
-            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: 0
-            anchors.rightMargin: Appearance.padding.normal / 2
-
-            radius: rightAudioBorder.innerRadius
-            color: "transparent"
-
-            Loader {
-                id: rightAudioLoader
+        }
 
+        rightContent: Component {
+            Item {
                 anchors.fill: parent
                 anchors.topMargin: Appearance.padding.large * 2
                 anchors.bottomMargin: Appearance.padding.large * 2
                 anchors.leftMargin: 0
                 anchors.rightMargin: 0
 
-                asynchronous: true
-                sourceComponent: audioRightContentComponent
-            }
-        }
-
-        InnerBorder {
-            id: rightAudioBorder
-            leftThickness: Appearance.padding.normal / 2
-        }
-
-        Component {
-            id: audioRightContentComponent
+                StyledFlickable {
+                    id: rightAudioFlickable
+                    anchors.fill: parent
+                    flickableDirection: Flickable.VerticalFlick
+                    contentHeight: contentLayout.height
 
-            StyledFlickable {
-                id: rightAudioFlickable
-                flickableDirection: Flickable.VerticalFlick
-                contentHeight: contentLayout.height
-
-                StyledScrollBar.vertical: StyledScrollBar {
-                    flickable: rightAudioFlickable
-                }
+                    StyledScrollBar.vertical: StyledScrollBar {
+                        flickable: rightAudioFlickable
+                    }
 
-                ColumnLayout {
-                    id: contentLayout
+                    ColumnLayout {
+                        id: contentLayout
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.leftMargin: Appearance.padding.large * 2
-                    anchors.rightMargin: Appearance.padding.large * 2
-                    spacing: Appearance.spacing.normal
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.leftMargin: Appearance.padding.large * 2
+                        anchors.rightMargin: Appearance.padding.large * 2
+                        spacing: Appearance.spacing.normal
 
-                ConnectionHeader {
-                    icon: "volume_up"
-                    title: qsTr("Audio Settings")
-                }
+                        ConnectionHeader {
+                            icon: "volume_up"
+                            title: qsTr("Audio Settings")
+                        }
 
-                SectionHeader {
-                    title: qsTr("Output volume")
-                    description: qsTr("Control the volume of your output device")
-                }
+                        SectionHeader {
+                            title: qsTr("Output volume")
+                            description: qsTr("Control the volume of your output device")
+                        }
 
-                SectionContainer {
-                    contentSpacing: Appearance.spacing.normal
+                        SectionContainer {
+                            contentSpacing: Appearance.spacing.normal
 
-                    ColumnLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
+                            ColumnLayout {
+                                Layout.fillWidth: true
+                                spacing: Appearance.spacing.small
 
-                        RowLayout {
-                            Layout.fillWidth: true
-                            spacing: Appearance.spacing.normal
+                                RowLayout {
+                                    Layout.fillWidth: true
+                                    spacing: Appearance.spacing.normal
 
-                            StyledText {
-                                text: qsTr("Volume")
-                                font.pointSize: Appearance.font.size.normal
-                                font.weight: 500
-                            }
+                                    StyledText {
+                                        text: qsTr("Volume")
+                                        font.pointSize: Appearance.font.size.normal
+                                        font.weight: 500
+                                    }
 
-                            Item {
-                                Layout.fillWidth: true
-                            }
+                                    Item {
+                                        Layout.fillWidth: true
+                                    }
 
-                            StyledRect {
-                                Layout.preferredWidth: 70
-                                implicitHeight: outputVolumeInput.implicitHeight + Appearance.padding.small * 2
-                                color: outputVolumeInputHover.containsMouse || outputVolumeInput.activeFocus 
-                                       ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
-                                       : Colours.layer(Colours.palette.m3surfaceContainer, 2)
-                                radius: Appearance.rounding.small
-                                border.width: 1
-                                border.color: outputVolumeInput.activeFocus 
-                                              ? Colours.palette.m3primary
-                                              : Qt.alpha(Colours.palette.m3outline, 0.3)
-                                enabled: !Audio.muted
-                                opacity: enabled ? 1 : 0.5
+                                    StyledRect {
+                                        Layout.preferredWidth: 70
+                                        implicitHeight: outputVolumeInput.implicitHeight + Appearance.padding.small * 2
+                                        color: outputVolumeInputHover.containsMouse || outputVolumeInput.activeFocus 
+                                               ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                               : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                        radius: Appearance.rounding.small
+                                        border.width: 1
+                                        border.color: outputVolumeInput.activeFocus 
+                                                      ? Colours.palette.m3primary
+                                                      : Qt.alpha(Colours.palette.m3outline, 0.3)
+                                        enabled: !Audio.muted
+                                        opacity: enabled ? 1 : 0.5
 
-                                Behavior on color { CAnim {} }
-                                Behavior on border.color { CAnim {} }
+                                        Behavior on color { CAnim {} }
+                                        Behavior on border.color { CAnim {} }
 
-                                MouseArea {
-                                    id: outputVolumeInputHover
-                                    anchors.fill: parent
-                                    hoverEnabled: true
-                                    cursorShape: Qt.IBeamCursor
-                                    acceptedButtons: Qt.NoButton
-                                }
+                                        MouseArea {
+                                            id: outputVolumeInputHover
+                                            anchors.fill: parent
+                                            hoverEnabled: true
+                                            cursorShape: Qt.IBeamCursor
+                                            acceptedButtons: Qt.NoButton
+                                        }
 
-                                StyledTextField {
-                                    id: outputVolumeInput
-                                    anchors.centerIn: parent
-                                    width: parent.width - Appearance.padding.normal
-                                    horizontalAlignment: TextInput.AlignHCenter
-                                    validator: IntValidator { bottom: 0; top: 100 }
-                                    enabled: !Audio.muted
-                                    
-                                    Component.onCompleted: {
-                                        text = Math.round(Audio.volume * 100).toString();
-                                    }
-                                    
-                                    Connections {
-                                        target: Audio
-                                        function onVolumeChanged() {
-                                            if (!outputVolumeInput.activeFocus) {
-                                                outputVolumeInput.text = Math.round(Audio.volume * 100).toString();
+                                        StyledTextField {
+                                            id: outputVolumeInput
+                                            anchors.centerIn: parent
+                                            width: parent.width - Appearance.padding.normal
+                                            horizontalAlignment: TextInput.AlignHCenter
+                                            validator: IntValidator { bottom: 0; top: 100 }
+                                            enabled: !Audio.muted
+                                            
+                                            Component.onCompleted: {
+                                                text = Math.round(Audio.volume * 100).toString();
                                             }
-                                        }
-                                    }
-                                    
-                                    onTextChanged: {
-                                        if (activeFocus) {
-                                            const val = parseInt(text);
-                                            if (!isNaN(val) && val >= 0 && val <= 100) {
-                                                Audio.setVolume(val / 100);
+                                            
+                                            Connections {
+                                                target: Audio
+                                                function onVolumeChanged() {
+                                                    if (!outputVolumeInput.activeFocus) {
+                                                        outputVolumeInput.text = Math.round(Audio.volume * 100).toString();
+                                                    }
+                                                }
+                                            }
+                                            
+                                            onTextChanged: {
+                                                if (activeFocus) {
+                                                    const val = parseInt(text);
+                                                    if (!isNaN(val) && val >= 0 && val <= 100) {
+                                                        Audio.setVolume(val / 100);
+                                                    }
+                                                }
+                                            }
+                                            onEditingFinished: {
+                                                const val = parseInt(text);
+                                                if (isNaN(val) || val < 0 || val > 100) {
+                                                    text = Math.round(Audio.volume * 100).toString();
+                                                }
                                             }
                                         }
                                     }
-                                    onEditingFinished: {
-                                        const val = parseInt(text);
-                                        if (isNaN(val) || val < 0 || val > 100) {
-                                            text = Math.round(Audio.volume * 100).toString();
-                                        }
+
+                                    StyledText {
+                                        text: "%"
+                                        color: Colours.palette.m3outline
+                                        font.pointSize: Appearance.font.size.normal
+                                        opacity: Audio.muted ? 0.5 : 1
                                     }
-                                }
-                            }
 
-                            StyledText {
-                                text: "%"
-                                color: Colours.palette.m3outline
-                                font.pointSize: Appearance.font.size.normal
-                                opacity: Audio.muted ? 0.5 : 1
-                            }
+                                    StyledRect {
+                                        implicitWidth: implicitHeight
+                                        implicitHeight: muteIcon.implicitHeight + Appearance.padding.normal * 2
 
-                            StyledRect {
-                                implicitWidth: implicitHeight
-                                implicitHeight: muteIcon.implicitHeight + Appearance.padding.normal * 2
+                                        radius: Appearance.rounding.normal
+                                        color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
 
-                                radius: Appearance.rounding.normal
-                                color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+                                        StateLayer {
+                                            function onClicked(): void {
+                                                if (Audio.sink?.audio) {
+                                                    Audio.sink.audio.muted = !Audio.sink.audio.muted;
+                                                }
+                                            }
+                                        }
 
-                                StateLayer {
-                                    function onClicked(): void {
-                                        if (Audio.sink?.audio) {
-                                            Audio.sink.audio.muted = !Audio.sink.audio.muted;
+                                        MaterialIcon {
+                                            id: muteIcon
+
+                                            anchors.centerIn: parent
+                                            text: Audio.muted ? "volume_off" : "volume_up"
+                                            color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
                                         }
                                     }
                                 }
 
-                                MaterialIcon {
-                                    id: muteIcon
+                                StyledSlider {
+                                    id: outputVolumeSlider
+                                    Layout.fillWidth: true
+                                    implicitHeight: Appearance.padding.normal * 3
 
-                                    anchors.centerIn: parent
-                                    text: Audio.muted ? "volume_off" : "volume_up"
-                                    color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+                                    value: Audio.volume
+                                    enabled: !Audio.muted
+                                    opacity: enabled ? 1 : 0.5
+                                    onMoved: {
+                                        Audio.setVolume(value);
+                                        if (!outputVolumeInput.activeFocus) {
+                                            outputVolumeInput.text = Math.round(value * 100).toString();
+                                        }
+                                    }
                                 }
                             }
                         }
 
-                        StyledSlider {
-                            id: outputVolumeSlider
-                            Layout.fillWidth: true
-                            implicitHeight: Appearance.padding.normal * 3
-
-                            value: Audio.volume
-                            enabled: !Audio.muted
-                            opacity: enabled ? 1 : 0.5
-                            onMoved: {
-                                Audio.setVolume(value);
-                                if (!outputVolumeInput.activeFocus) {
-                                    outputVolumeInput.text = Math.round(value * 100).toString();
-                                }
-                            }
+                        SectionHeader {
+                            title: qsTr("Input volume")
+                            description: qsTr("Control the volume of your input device")
                         }
-                    }
-                }
 
-                SectionHeader {
-                    title: qsTr("Input volume")
-                    description: qsTr("Control the volume of your input device")
-                }
+                        SectionContainer {
+                            contentSpacing: Appearance.spacing.normal
 
-                SectionContainer {
-                    contentSpacing: Appearance.spacing.normal
-
-                    ColumnLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
+                            ColumnLayout {
+                                Layout.fillWidth: true
+                                spacing: Appearance.spacing.small
 
-                        RowLayout {
-                            Layout.fillWidth: true
-                            spacing: Appearance.spacing.normal
+                                RowLayout {
+                                    Layout.fillWidth: true
+                                    spacing: Appearance.spacing.normal
 
-                            StyledText {
-                                text: qsTr("Volume")
-                                font.pointSize: Appearance.font.size.normal
-                                font.weight: 500
-                            }
+                                    StyledText {
+                                        text: qsTr("Volume")
+                                        font.pointSize: Appearance.font.size.normal
+                                        font.weight: 500
+                                    }
 
-                            Item {
-                                Layout.fillWidth: true
-                            }
+                                    Item {
+                                        Layout.fillWidth: true
+                                    }
 
-                            StyledRect {
-                                Layout.preferredWidth: 70
-                                implicitHeight: inputVolumeInput.implicitHeight + Appearance.padding.small * 2
-                                color: inputVolumeInputHover.containsMouse || inputVolumeInput.activeFocus 
-                                       ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
-                                       : Colours.layer(Colours.palette.m3surfaceContainer, 2)
-                                radius: Appearance.rounding.small
-                                border.width: 1
-                                border.color: inputVolumeInput.activeFocus 
-                                              ? Colours.palette.m3primary
-                                              : Qt.alpha(Colours.palette.m3outline, 0.3)
-                                enabled: !Audio.sourceMuted
-                                opacity: enabled ? 1 : 0.5
+                                    StyledRect {
+                                        Layout.preferredWidth: 70
+                                        implicitHeight: inputVolumeInput.implicitHeight + Appearance.padding.small * 2
+                                        color: inputVolumeInputHover.containsMouse || inputVolumeInput.activeFocus 
+                                               ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                               : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                        radius: Appearance.rounding.small
+                                        border.width: 1
+                                        border.color: inputVolumeInput.activeFocus 
+                                                      ? Colours.palette.m3primary
+                                                      : Qt.alpha(Colours.palette.m3outline, 0.3)
+                                        enabled: !Audio.sourceMuted
+                                        opacity: enabled ? 1 : 0.5
 
-                                Behavior on color { CAnim {} }
-                                Behavior on border.color { CAnim {} }
+                                        Behavior on color { CAnim {} }
+                                        Behavior on border.color { CAnim {} }
 
-                                MouseArea {
-                                    id: inputVolumeInputHover
-                                    anchors.fill: parent
-                                    hoverEnabled: true
-                                    cursorShape: Qt.IBeamCursor
-                                    acceptedButtons: Qt.NoButton
-                                }
+                                        MouseArea {
+                                            id: inputVolumeInputHover
+                                            anchors.fill: parent
+                                            hoverEnabled: true
+                                            cursorShape: Qt.IBeamCursor
+                                            acceptedButtons: Qt.NoButton
+                                        }
 
-                                StyledTextField {
-                                    id: inputVolumeInput
-                                    anchors.centerIn: parent
-                                    width: parent.width - Appearance.padding.normal
-                                    horizontalAlignment: TextInput.AlignHCenter
-                                    validator: IntValidator { bottom: 0; top: 100 }
-                                    enabled: !Audio.sourceMuted
-                                    
-                                    Component.onCompleted: {
-                                        text = Math.round(Audio.sourceVolume * 100).toString();
-                                    }
-                                    
-                                    Connections {
-                                        target: Audio
-                                        function onSourceVolumeChanged() {
-                                            if (!inputVolumeInput.activeFocus) {
-                                                inputVolumeInput.text = Math.round(Audio.sourceVolume * 100).toString();
+                                        StyledTextField {
+                                            id: inputVolumeInput
+                                            anchors.centerIn: parent
+                                            width: parent.width - Appearance.padding.normal
+                                            horizontalAlignment: TextInput.AlignHCenter
+                                            validator: IntValidator { bottom: 0; top: 100 }
+                                            enabled: !Audio.sourceMuted
+                                            
+                                            Component.onCompleted: {
+                                                text = Math.round(Audio.sourceVolume * 100).toString();
                                             }
-                                        }
-                                    }
-                                    
-                                    onTextChanged: {
-                                        if (activeFocus) {
-                                            const val = parseInt(text);
-                                            if (!isNaN(val) && val >= 0 && val <= 100) {
-                                                Audio.setSourceVolume(val / 100);
+                                            
+                                            Connections {
+                                                target: Audio
+                                                function onSourceVolumeChanged() {
+                                                    if (!inputVolumeInput.activeFocus) {
+                                                        inputVolumeInput.text = Math.round(Audio.sourceVolume * 100).toString();
+                                                    }
+                                                }
+                                            }
+                                            
+                                            onTextChanged: {
+                                                if (activeFocus) {
+                                                    const val = parseInt(text);
+                                                    if (!isNaN(val) && val >= 0 && val <= 100) {
+                                                        Audio.setSourceVolume(val / 100);
+                                                    }
+                                                }
+                                            }
+                                            onEditingFinished: {
+                                                const val = parseInt(text);
+                                                if (isNaN(val) || val < 0 || val > 100) {
+                                                    text = Math.round(Audio.sourceVolume * 100).toString();
+                                                }
                                             }
                                         }
                                     }
-                                    onEditingFinished: {
-                                        const val = parseInt(text);
-                                        if (isNaN(val) || val < 0 || val > 100) {
-                                            text = Math.round(Audio.sourceVolume * 100).toString();
-                                        }
-                                    }
-                                }
-                            }
 
-                            StyledText {
-                                text: "%"
-                                color: Colours.palette.m3outline
-                                font.pointSize: Appearance.font.size.normal
-                                opacity: Audio.sourceMuted ? 0.5 : 1
-                            }
+                                    StyledText {
+                                        text: "%"
+                                        color: Colours.palette.m3outline
+                                        font.pointSize: Appearance.font.size.normal
+                                        opacity: Audio.sourceMuted ? 0.5 : 1
+                                    }
 
-                            StyledRect {
-                                implicitWidth: implicitHeight
-                                implicitHeight: muteInputIcon.implicitHeight + Appearance.padding.normal * 2
+                                    StyledRect {
+                                        implicitWidth: implicitHeight
+                                        implicitHeight: muteInputIcon.implicitHeight + Appearance.padding.normal * 2
 
-                                radius: Appearance.rounding.normal
-                                color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+                                        radius: Appearance.rounding.normal
+                                        color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
 
-                                StateLayer {
-                                    function onClicked(): void {
-                                        if (Audio.source?.audio) {
-                                            Audio.source.audio.muted = !Audio.source.audio.muted;
+                                        StateLayer {
+                                            function onClicked(): void {
+                                                if (Audio.source?.audio) {
+                                                    Audio.source.audio.muted = !Audio.source.audio.muted;
+                                                }
+                                            }
                                         }
-                                    }
-                                }
 
-                                MaterialIcon {
-                                    id: muteInputIcon
+                                        MaterialIcon {
+                                            id: muteInputIcon
 
-                                    anchors.centerIn: parent
-                                    text: "mic_off"
-                                    color: Audio.sourceMuted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+                                            anchors.centerIn: parent
+                                            text: "mic_off"
+                                            color: Audio.sourceMuted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+                                        }
+                                    }
                                 }
-                            }
-                        }
 
-                        StyledSlider {
-                            id: inputVolumeSlider
-                            Layout.fillWidth: true
-                            implicitHeight: Appearance.padding.normal * 3
+                                StyledSlider {
+                                    id: inputVolumeSlider
+                                    Layout.fillWidth: true
+                                    implicitHeight: Appearance.padding.normal * 3
 
-                            value: Audio.sourceVolume
-                            enabled: !Audio.sourceMuted
-                            opacity: enabled ? 1 : 0.5
-                            onMoved: {
-                                Audio.setSourceVolume(value);
-                                if (!inputVolumeInput.activeFocus) {
-                                    inputVolumeInput.text = Math.round(value * 100).toString();
+                                    value: Audio.sourceVolume
+                                    enabled: !Audio.sourceMuted
+                                    opacity: enabled ? 1 : 0.5
+                                    onMoved: {
+                                        Audio.setSourceVolume(value);
+                                        if (!inputVolumeInput.activeFocus) {
+                                            inputVolumeInput.text = Math.round(value * 100).toString();
+                                        }
+                                    }
                                 }
                             }
                         }
                     }
                 }
             }
-            }
         }
     }
 }
\ No newline at end of file