refactor: PaneTransition now component

modules/controlcenter/bluetooth/BtPane.qml

@@ -33,6 +33,18 @@ Item {
                 id: rightBtPane
 
                 property BluetoothDevice pane: root.session.bt.active
+                property string paneId: pane ? (pane.address || "") : ""
+                property Component targetComponent: settings
+                property Component nextComponent: settings
+
+                function getComponentForPane() {
+                    return pane ? details : settings;
+                }
+
+                Component.onCompleted: {
+                    targetComponent = getComponentForPane();
+                    nextComponent = targetComponent;
+                }
 
                 Loader {
                     id: rightLoader
@@ -41,40 +53,19 @@ Item {
                     anchors.margins: Appearance.padding.large * 2
 
                     asynchronous: true
-                    sourceComponent: rightBtPane.pane ? details : settings
+                    sourceComponent: rightBtPane.targetComponent
                 }
 
-                Behavior on pane {
+                Behavior on paneId {
-                    SequentialAnimation {
+                    PaneTransition {
-                        ParallelAnimation {
+                        target: rightLoader
-                            Anim {
+                        propertyActions: [
-                                target: rightLoader
+                            PropertyAction {
-                                property: "opacity"
+                                target: rightBtPane
-                                to: 0
+                                property: "targetComponent"
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
+                                value: rightBtPane.nextComponent
                             }
-                            Anim {
+                        ]
-                                target: rightLoader
-                                property: "scale"
-                                to: 0.8
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
-                            }
-                        }
-                        PropertyAction {}
-                        ParallelAnimation {
-                            Anim {
-                                target: rightLoader
-                                property: "opacity"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                            Anim {
-                                target: rightLoader
-                                property: "scale"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                        }
                     }
                 }
 
@@ -82,6 +73,8 @@ Item {
                     target: root.session.bt
                     function onActiveChanged() {
                         rightBtPane.pane = root.session.bt.active;
+                        rightBtPane.nextComponent = rightBtPane.getComponentForPane();
+                        rightBtPane.paneId = pane ? (pane.address || "") : "";
                     }
                 }
             }
@@ -118,9 +111,4 @@ Item {
             session: root.session
         }
     }
-
-    component Anim: NumberAnimation {
-        duration: Appearance.anim.durations.normal / 2
-        easing.type: Easing.BezierSpline
-    }
 }

modules/controlcenter/components/PaneTransition.qml

@@ -0,0 +1,84 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import QtQuick
+
+// Reusable pane transition animation component
+// Provides standard fade-out/scale-down → update → fade-in/scale-up animation
+// Used when switching between detail/settings views in panes
+SequentialAnimation {
+    id: root
+
+    // The Loader element to animate
+    required property Item target
+    
+    // Optional list of PropertyActions to execute during the transition
+    // These typically update the component being displayed
+    property list<PropertyAction> propertyActions
+    
+    // Animation parameters (with sensible defaults)
+    property real scaleFrom: 1.0
+    property real scaleTo: 0.8
+    property real opacityFrom: 1.0
+    property real opacityTo: 0.0
+    
+    // Fade out and scale down
+    ParallelAnimation {
+        NumberAnimation {
+            target: root.target
+            property: "opacity"
+            from: root.opacityFrom
+            to: root.opacityTo
+            duration: Appearance.anim.durations.normal / 2
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standardAccel
+        }
+        
+        NumberAnimation {
+            target: root.target
+            property: "scale"
+            from: root.scaleFrom
+            to: root.scaleTo
+            duration: Appearance.anim.durations.normal / 2
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standardAccel
+        }
+    }
+    
+    // Execute property actions (component switching, state updates, etc.)
+    // This is where the component change happens while invisible
+    ScriptAction {
+        script: {
+            for (let i = 0; i < root.propertyActions.length; i++) {
+                const action = root.propertyActions[i];
+                if (action.target && action.property !== undefined) {
+                    action.target[action.property] = action.value;
+                }
+            }
+        }
+    }
+    
+    // Fade in and scale up
+    ParallelAnimation {
+        NumberAnimation {
+            target: root.target
+            property: "opacity"
+            from: root.opacityTo
+            to: root.opacityFrom
+            duration: Appearance.anim.durations.normal / 2
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standardDecel
+        }
+        
+        NumberAnimation {
+            target: root.target
+            property: "scale"
+            from: root.scaleTo
+            to: root.scaleFrom
+            duration: Appearance.anim.durations.normal / 2
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standardDecel
+        }
+    }
+}
+

modules/controlcenter/launcher/LauncherPane.qml

@@ -426,55 +426,30 @@ Item {
                 }
 
                 Behavior on paneId {
-                    SequentialAnimation {
+                    PaneTransition {
-                        ParallelAnimation {
+                        target: rightLauncherLoader
-                            Anim {
+                        propertyActions: [
+                            PropertyAction {
+                                target: rightLauncherPane
+                                property: "displayedApp"
+                                value: rightLauncherPane.pane
+                            },
+                            PropertyAction {
                                 target: rightLauncherLoader
-                                property: "opacity"
+                                property: "active"
-                                to: 0
+                                value: false
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
+                            },
-                            }
+                            PropertyAction {
-                            Anim {
+                                target: rightLauncherPane
+                                property: "targetComponent"
+                                value: rightLauncherPane.nextComponent
+                            },
+                            PropertyAction {
                                 target: rightLauncherLoader
-                                property: "scale"
+                                property: "active"
-                                to: 0.8
+                                value: true
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
                             }
-                        }
+                        ]
-                        PropertyAction {
-                            target: rightLauncherPane
-                            property: "displayedApp"
-                            value: rightLauncherPane.pane
-                        }
-                        PropertyAction {
-                            target: rightLauncherLoader
-                            property: "active"
-                            value: false
-                        }
-                        PropertyAction {
-                            target: rightLauncherPane
-                            property: "targetComponent"
-                            value: rightLauncherPane.nextComponent
-                        }
-                        PropertyAction {
-                            target: rightLauncherLoader
-                            property: "active"
-                            value: true
-                        }
-                        ParallelAnimation {
-                            Anim {
-                                target: rightLauncherLoader
-                                property: "opacity"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                            Anim {
-                                target: rightLauncherLoader
-                                property: "scale"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                        }
                     }
                 }
 
@@ -639,10 +614,4 @@ Item {
             }
         }
     }
-
-    component Anim: NumberAnimation {
-        target: rightLauncherLoader
-        duration: Appearance.anim.durations.normal / 2
-        easing.type: Easing.BezierSpline
-    }
 }

modules/controlcenter/network/EthernetPane.qml

@@ -77,40 +77,15 @@ RowLayout {
                 }
 
                 Behavior on paneId {
-                    SequentialAnimation {
+                    PaneTransition {
-                        ParallelAnimation {
+                        target: loader
-                            Anim {
+                        propertyActions: [
+                            PropertyAction {
                                 target: loader
-                                property: "opacity"
+                                property: "targetComponent"
-                                to: 0
+                                value: loader.nextComponent
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
                             }
-                            Anim {
+                        ]
-                                target: loader
-                                property: "scale"
-                                to: 0.8
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
-                            }
-                        }
-                        PropertyAction {
-                            target: loader
-                            property: "targetComponent"
-                            value: loader.nextComponent
-                        }
-                        ParallelAnimation {
-                            Anim {
-                                target: loader
-                                property: "opacity"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                            Anim {
-                                target: loader
-                                property: "scale"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                        }
                     }
                 }
 
@@ -153,10 +128,4 @@ RowLayout {
             }
         }
     }
-
-    component Anim: NumberAnimation {
-        target: loader
-        duration: Appearance.anim.durations.normal / 2
-        easing.type: Easing.BezierSpline
-    }
 }

modules/controlcenter/network/NetworkingPane.qml

@@ -447,7 +447,7 @@ Item {
                 property var ethernetPane: root.session.ethernet.active
                 property var wirelessPane: root.session.network.active
                 property var pane: ethernetPane || wirelessPane
-                property string paneId: ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : "")
+                property string paneId: ethernetPane ? ("eth:" + (ethernetPane.interface || "")) : (wirelessPane ? ("wifi:" + (wirelessPane.ssid || wirelessPane.bssid || "")) : "settings")
                 property Component targetComponent: settings
                 property Component nextComponent: settings
 
@@ -463,16 +463,16 @@ Item {
                 Connections {
                     target: root.session.ethernet
                     function onActiveChanged() {
-                        nextComponent = getComponentForPane();
+                        rightPaneItem.nextComponent = rightPaneItem.getComponentForPane();
-                        paneId = ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : "");
+                        rightPaneItem.paneId = rightPaneItem.ethernetPane ? ("eth:" + (rightPaneItem.ethernetPane.interface || "")) : (rightPaneItem.wirelessPane ? ("wifi:" + (rightPaneItem.wirelessPane.ssid || rightPaneItem.wirelessPane.bssid || "")) : "settings");
                     }
                 }
 
                 Connections {
                     target: root.session.network
                     function onActiveChanged() {
-                        nextComponent = getComponentForPane();
+                        rightPaneItem.nextComponent = rightPaneItem.getComponentForPane();
-                        paneId = ethernetPane ? (ethernetPane.interface || "") : (wirelessPane ? (wirelessPane.ssid || wirelessPane.bssid || "") : "");
+                        rightPaneItem.paneId = rightPaneItem.ethernetPane ? ("eth:" + (rightPaneItem.ethernetPane.interface || "")) : (rightPaneItem.wirelessPane ? ("wifi:" + (rightPaneItem.wirelessPane.ssid || rightPaneItem.wirelessPane.bssid || "")) : "settings");
                     }
                 }
 
@@ -489,57 +489,18 @@ Item {
 
                     asynchronous: true
                     sourceComponent: rightPaneItem.targetComponent
-
-                    Connections {
-                        target: rightPaneItem
-                        function onPaneIdChanged() {
-                            rightPaneItem.targetComponent = rightPaneItem.nextComponent;
-                        }
-                    }
                 }
 
                 Behavior on paneId {
-                    SequentialAnimation {
+                    PaneTransition {
-                        ParallelAnimation {
+                        target: rightLoader
-                            Anim {
+                        propertyActions: [
-                                target: rightLoader
+                            PropertyAction {
-                                property: "opacity"
+                                target: rightPaneItem
-                                to: 0
+                                property: "targetComponent"
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
+                                value: rightPaneItem.nextComponent
                             }
-                            Anim {
+                        ]
-                                target: rightLoader
-                                property: "scale"
-                                to: 0.8
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
-                            }
-                        }
-                        PropertyAction {
-                            target: rightPaneItem
-                            property: "targetComponent"
-                            value: rightPaneItem.nextComponent
-                        }
-                        ParallelAnimation {
-                            Anim {
-                                target: rightLoader
-                                property: "opacity"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                            Anim {
-                                target: rightLoader
-                                property: "scale"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                        }
-                    }
-                }
-
-                Connections {
-                    target: rightPaneItem
-                    function onPaneIdChanged() {
-                        rightPaneItem.targetComponent = rightPaneItem.nextComponent;
                     }
                 }
             }
@@ -621,11 +582,6 @@ Item {
         z: 1000
     }
 
-    component Anim: NumberAnimation {
-        duration: Appearance.anim.durations.normal / 2
-        easing.type: Easing.BezierSpline
-    }
-
     function checkSavedProfileForNetwork(ssid: string): void {
         if (ssid && ssid.length > 0) {
             Nmcli.loadSavedConnections(() => {});

modules/controlcenter/network/WirelessPane.qml

@@ -76,40 +76,15 @@ RowLayout {
                 }
 
                 Behavior on paneId {
-                    SequentialAnimation {
+                    PaneTransition {
-                        ParallelAnimation {
+                        target: loader
-                            Anim {
+                        propertyActions: [
+                            PropertyAction {
                                 target: loader
-                                property: "opacity"
+                                property: "targetComponent"
-                                to: 0
+                                value: loader.nextComponent
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
                             }
-                            Anim {
+                        ]
-                                target: loader
-                                property: "scale"
-                                to: 0.8
-                                easing.bezierCurve: Appearance.anim.curves.standardAccel
-                            }
-                        }
-                        PropertyAction {
-                            target: loader
-                            property: "targetComponent"
-                            value: loader.nextComponent
-                        }
-                        ParallelAnimation {
-                            Anim {
-                                target: loader
-                                property: "opacity"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                            Anim {
-                                target: loader
-                                property: "scale"
-                                to: 1
-                                easing.bezierCurve: Appearance.anim.curves.standardDecel
-                            }
-                        }
                     }
                 }
 
@@ -158,10 +133,4 @@ RowLayout {
         session: root.session
         z: 1000
     }
-
-    component Anim: NumberAnimation {
-        target: loader
-        duration: Appearance.anim.durations.normal / 2
-        easing.type: Easing.BezierSpline
-    }
 }